@cometchat/chat-uikit-angular 4.3.13 → 4.3.15

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

@@ -2,7 +2,7 @@ import { ConversationUtils, CometChatMentionsFormatter, CometChatUIKitLoginListe
 export * from '@cometchat/uikit-shared';
 import { CometChatMessageOption, CometChatUIKitConstants, localize, fontHelper, CometChatMessageTemplate, CometChatMessageComposerAction, MentionsTargetElement, MessageBubbleAlignment, CometChatTheme, CometChatMessageEvents, MessageStatus, CometChatUIEvents, ChatSdkEventInitializer, CometChatLocalize, CallWorkflow, CometChatCallEvents, IconButtonAlignment, TitleAlignment, States, DatePatterns, SelectionMode, UserPresencePlacement, CometChatUserEvents, CometChatGroupEvents, CometChatConversationEvents, MessageListAlignment, Receipts, TimestampAlignment, DocumentIconAlignment, Placement, UserMemberListType, AuxiliaryButtonAlignment, PreviewMessageMode, TabAlignment, TabsVisibility, CometChatCallDetailsTemplate, CometChatCallDetailsOption } from '@cometchat/uikit-resources';
 export * from '@cometchat/uikit-resources';
-import { CallscreenStyle, AvatarStyle, ListItemStyle, DateStyle, ReceiptStyle, BadgeStyle, ConfirmDialogStyle, MenuListStyle, QuickViewStyle, InputStyle, LabelStyle, RadioButtonStyle, CheckboxStyle, DropdownStyle, SingleSelectStyle, ChangeScopeStyle, MediaRecorderStyle, CreateGroupStyle, JoinGroupStyle } from '@cometchat/uikit-elements';
+import { CallscreenStyle, AvatarStyle, ListItemStyle, ConfirmDialogStyle, DateStyle, ReceiptStyle, BadgeStyle, MenuListStyle, QuickViewStyle, InputStyle, LabelStyle, RadioButtonStyle, CheckboxStyle, DropdownStyle, SingleSelectStyle, ChangeScopeStyle, MediaRecorderStyle, CreateGroupStyle, JoinGroupStyle } from '@cometchat/uikit-elements';
 export { ActionSheetStyle, AvatarStyle, BackdropStyle, BadgeStyle, ButtonGroupStyle, CallscreenStyle, CardStyle, ChangeScopeStyle, CheckboxStyle, CometChatActionItem, CometChatActionSheet, CometChatAudioBubble, CometChatAvatar, CometChatBackdrop, CometChatBadge, CometChatButton, CometChatButtonGroup, CometChatCallscreenWrapper, CometChatCard, CometChatChangeScope, CometChatCheckbox, CometChatConfirmDialog, CometChatContextMenu, CometChatCreateGroup, CometChatDate, CometChatDivider, CometChatDocumentBubble, CometChatDraggable, CometChatDropdown, CometChatEmoji, CometChatEmojiKeyboard, CometChatFileBubble, CometChatFullScreenViewer, CometChatIcon, CometChatIconButton, CometChatImageBubble, CometChatInput, CometChatJoinGroup, CometChatLabel, CometChatListItem, CometChatLiveReaction, CometChatLoader, CometChatMediaRecorder, CometChatMenuList, CometChatMessageInput, CometChatModal, CometChatPanel, CometChatPopover, CometChatPreview, CometChatQuickView, CometChatRadioButton, CometChatReceipt, CometChatSearchInput, CometChatSingleSelect, CometChatStatusIndicator, CometChatTextBubble, CometChatTextInput, CometChatVideoBubble, ConfirmDialogStyle, ContextMenuStyle, CreateGroupStyle, DateStyle, DocumentBubbleStyle, DropdownStyle, EmojiKeyboardStyle, Emojis, FileBubbleStyle, FullScreenViewerStyle, IconStyle, ImageBubbleStyle, InputStyle, JoinGroupStyle, LabelStyle, ListItemStyle, LoaderStyle, MediaRecorderStyle, MenuListStyle, MessageInputStyle, ModalStyle, PanelStyle, PopoverStyle, PreviewStyle, QuickViewStyle, RadioButtonStyle, ReceiptStyle, SearchInputStyle, SingleSelectStyle, TextBubbleStyle, TextInputStyle, auxiliaryButtonAlignmentEnum, layoutType } from '@cometchat/uikit-elements';
 import { CometChat } from '@cometchat/chat-sdk-javascript';
 import * as i0 from '@angular/core';
@@ -291,6 +291,20 @@ class MessageUtils {
             options: ChatConfigurator.getDataSource().getMessageOptions,
         });
     }
+    /**
+   * Function to check if a user's status should be visible
+   * @param {CometChat.User | CometChat.GroupMember} user - The user whose status visibility is to be checked.
+   * @return {boolean} - Returns `true` if the user's status should be hidden (blocked or offline), `false` otherwise.
+   */
+    getUserStatusVisibility(user) {
+        let userBlockedFlag = false;
+        if (user) {
+            if (user.getBlockedByMe() || user.getHasBlockedMe() || user.getStatus() === CometChatUIKitConstants.userStatusType.offline) {
+                userBlockedFlag = true;
+            }
+        }
+        return userBlockedFlag;
+    }
     getAllMessageTemplates() {
         return [
             ChatConfigurator.getDataSource().getTextMessageTemplate(),
@@ -1895,7 +1909,7 @@ class CometChatUIKit {
         if (window) {
             window.CometChatUiKit = {
                 name: "@cometchat/chat-uikit-angular",
-                version: "4.3.13",
+                version: "4.3.15",
             };
         }
         if (CometChatUIKitSharedSettings) {
@@ -3998,14 +4012,20 @@ class CometChatUsersComponent {
          * @param  {CometChat.User} user
          */
         this.getStatusIndicatorColor = (user) => {
-            if (!this.disableUsersPresence) {
-                if (user?.getStatus() == CometChatUIKitConstants.userStatusType.online) {
-                    return (this.usersStyle.onlineStatusColor ||
-                        this.themeService.theme.palette.getSuccess());
-                }
-                else {
-                    return null;
-                }
+            let userStatusVisibility = new MessageUtils().getUserStatusVisibility(user) || this.disableUsersPresence;
+            if (!userStatusVisibility) {
+                return (this.usersStyle?.onlineStatusColor ??
+                    this.themeService?.theme.palette.getSuccess());
+            }
+            return null;
+        };
+        /**
+         * @param  {CometChat.User} user
+         */
+        this.getStatusIndicatorStyle = (user) => {
+            let userStatusVisibility = new MessageUtils().getUserStatusVisibility(user) || this.disableUsersPresence;
+            if (!userStatusVisibility) {
+                return (this.statusIndicatorStyle);
             }
             return null;
         };
@@ -4361,10 +4381,10 @@ class CometChatUsersComponent {
     }
 }
 CometChatUsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersComponent, selector: "cometchat-users", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", disableUsersPresence: "disableUsersPresence", listItemView: "listItemView", menu: "menu", options: "options", activeUser: "activeUser", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", emptyStateView: "emptyStateView", onSelect: "onSelect", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", usersStyle: "usersStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", onItemClick: "onItemClick", searchKeyword: "searchKeyword", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n</div>\n  <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n      [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n      [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n  </cometchat-list>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\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\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button  (cc-radio-button-checked)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox  (cc-checkbox-changed)=\"addMembersToList(user,$event)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-users__selection--multiple{width:65px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersComponent, selector: "cometchat-users", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", disableUsersPresence: "disableUsersPresence", listItemView: "listItemView", menu: "menu", options: "options", activeUser: "activeUser", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", emptyStateView: "emptyStateView", onSelect: "onSelect", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", usersStyle: "usersStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", onItemClick: "onItemClick", searchKeyword: "searchKeyword", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n</div>\n  <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n      [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n      [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n  </cometchat-list>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n          [userPresencePlacement]=\"userPresencePlacement\">\n          <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n              <ng-container  *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button  (cc-radio-button-checked)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox  (cc-checkbox-changed)=\"addMembersToList(user,$event)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-users__selection--multiple{width:65px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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]=\"statusIndicatorStyle\"\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\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button  (cc-radio-button-checked)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox  (cc-checkbox-changed)=\"addMembersToList(user,$event)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-users__selection--multiple{width:65px}\n"] }]
+            args: [{ selector: "cometchat-users", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n</div>\n  <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n      [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n      [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n  </cometchat-list>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n          [userPresencePlacement]=\"userPresencePlacement\">\n          <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n              <ng-container  *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button  (cc-radio-button-checked)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox  (cc-checkbox-changed)=\"addMembersToList(user,$event)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-users__selection--multiple{width:65px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { usersRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{
@@ -4475,7 +4495,11 @@ class CometChatAddMembersComponent {
         this.titleAlignmentEnum = TitleAlignment;
         this.selectionmodeEnum = SelectionMode;
         this.addMembersStyle = {};
+        /**
+         * @deprecated This property is deprecated as of version 4.3.14. Use `statusIndicatorStyle` instead.
+         */
         this.StatusIndicatorStyle = {};
+        this.statusIndicatorStyle = {};
         this.avatarStyle = {};
         this.actionMessagesList = [];
         this.addMemberButtonStyle = {
@@ -4710,10 +4734,10 @@ class CometChatAddMembersComponent {
     }
 }
 CometChatAddMembersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatAddMembersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatAddMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", hideError: "hideError", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onBack: "onBack", onClose: "onClose", onSelect: "onSelect", buttonText: "buttonText", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", listItemStyle: "listItemStyle", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", onAddMembersButtonClick: "onAddMembersButtonClick", titleAlignment: "titleAlignment", addMembersStyle: "addMembersStyle", StatusIndicatorStyle: "StatusIndicatorStyle", avatarStyle: "avatarStyle" }, ngImport: i0, template: "<div class=\"cc-add-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-back-button\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\"  (cc-button-clicked)=\"backClicked()\" *ngIf=\"showBackButton\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-add-members__wrapper\" [ngStyle]=\"addMembersStyles()\">\n   <div class=\"cc-users\">\n    <cometchat-users [searchPlaceholder]=\"searchPlaceholder\" [usersRequestBuilder]=\"usersRequestBuilder\"\n    [hideSearch]=\"hideSearch\"\n    [StatusIndicatorStyle]=\"StatusIndicatorStyle\"\n    [avatarStyle]=\"avatarStyle\"\n    [searchIconURL]=\"searchIconURL\"\n    [searchRequestBuilder]=\"searchRequestBuilder\"\n    [usersStyle]=\"usersStyle\"\n    [subtitleView]=\"subtitleView\"\n    [options]=\"options\"\n    [usersRequestBuilder]=\"usersRequestBuilder\"\n    [emptyStateView]=\"emptyStateView\"\n    [onSelect]=\" addRemoveUsers\"\n    [sectionHeaderField]=\"sectionHeaderField\"\n    [loadingIconURL]=\"loadingIconURL\"\n    [errorStateView]=\"errorStateView\"\n    [loadingStateView]=\"loadingStateView\"\n    [titleAlignment]=\"titleAlignment\"\n    [showSectionHeader]=\"showSectionHeader\"\n    [listItemView]=\"listItemView\"\n    [menu]=\"menu\"\n    [hideSeparator]=\"hideSeparator\"\n    [hideError]=\"hideError\"\n    [selectionMode]=\" selectionMode\"\n    [title]=\"title\"  >\n\n    </cometchat-users>\n   </div>\n    <div class=\"cc-add-members__buttons\">\n      <cometchat-button class=\"cc-add-members__buttons--add\" [text]=\"buttonText\" [buttonStyle]=\"addMemberButtonStyle\" (click)=\"addMembersToGroup()\" ></cometchat-button>\n\n    </div>\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>", styles: [".cc-add-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-add-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-users{height:90%}.cc-add-members__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-add-members__buttons--add{height:42px;width:100%}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatAddMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", hideError: "hideError", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onBack: "onBack", onClose: "onClose", onSelect: "onSelect", buttonText: "buttonText", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", listItemStyle: "listItemStyle", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", onAddMembersButtonClick: "onAddMembersButtonClick", titleAlignment: "titleAlignment", addMembersStyle: "addMembersStyle", StatusIndicatorStyle: "StatusIndicatorStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle" }, ngImport: i0, template: "<div class=\"cc-add-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-back-button\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\"  (cc-button-clicked)=\"backClicked()\" *ngIf=\"showBackButton\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-add-members__wrapper\" [ngStyle]=\"addMembersStyles()\">\n   <div class=\"cc-users\">\n    <cometchat-users [searchPlaceholder]=\"searchPlaceholder\" [usersRequestBuilder]=\"usersRequestBuilder\"\n    [hideSearch]=\"hideSearch\"\n    [statusIndicatorStyle]=\"statusIndicatorStyle\"\n    [avatarStyle]=\"avatarStyle\"\n    [searchIconURL]=\"searchIconURL\"\n    [searchRequestBuilder]=\"searchRequestBuilder\"\n    [usersStyle]=\"usersStyle\"\n    [subtitleView]=\"subtitleView\"\n    [options]=\"options\"\n    [usersRequestBuilder]=\"usersRequestBuilder\"\n    [emptyStateView]=\"emptyStateView\"\n    [onSelect]=\" addRemoveUsers\"\n    [sectionHeaderField]=\"sectionHeaderField\"\n    [loadingIconURL]=\"loadingIconURL\"\n    [errorStateView]=\"errorStateView\"\n    [loadingStateView]=\"loadingStateView\"\n    [titleAlignment]=\"titleAlignment\"\n    [showSectionHeader]=\"showSectionHeader\"\n    [listItemView]=\"listItemView\"\n    [menu]=\"menu\"\n    [hideSeparator]=\"hideSeparator\"\n    [hideError]=\"hideError\"\n    [selectionMode]=\" selectionMode\"\n    [listItemStyle]=\"listItemStyle\"\n    [title]=\"title\"  >\n\n    </cometchat-users>\n   </div>\n    <div class=\"cc-add-members__buttons\">\n      <cometchat-button class=\"cc-add-members__buttons--add\" [text]=\"buttonText\" [buttonStyle]=\"addMemberButtonStyle\" (click)=\"addMembersToGroup()\" ></cometchat-button>\n\n    </div>\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>", styles: [".cc-add-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-add-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-users{height:90%}.cc-add-members__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-add-members__buttons--add{height:42px;width:100%}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: CometChatAddMembersComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-add-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-add-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-back-button\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\"  (cc-button-clicked)=\"backClicked()\" *ngIf=\"showBackButton\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-add-members__wrapper\" [ngStyle]=\"addMembersStyles()\">\n   <div class=\"cc-users\">\n    <cometchat-users [searchPlaceholder]=\"searchPlaceholder\" [usersRequestBuilder]=\"usersRequestBuilder\"\n    [hideSearch]=\"hideSearch\"\n    [StatusIndicatorStyle]=\"StatusIndicatorStyle\"\n    [avatarStyle]=\"avatarStyle\"\n    [searchIconURL]=\"searchIconURL\"\n    [searchRequestBuilder]=\"searchRequestBuilder\"\n    [usersStyle]=\"usersStyle\"\n    [subtitleView]=\"subtitleView\"\n    [options]=\"options\"\n    [usersRequestBuilder]=\"usersRequestBuilder\"\n    [emptyStateView]=\"emptyStateView\"\n    [onSelect]=\" addRemoveUsers\"\n    [sectionHeaderField]=\"sectionHeaderField\"\n    [loadingIconURL]=\"loadingIconURL\"\n    [errorStateView]=\"errorStateView\"\n    [loadingStateView]=\"loadingStateView\"\n    [titleAlignment]=\"titleAlignment\"\n    [showSectionHeader]=\"showSectionHeader\"\n    [listItemView]=\"listItemView\"\n    [menu]=\"menu\"\n    [hideSeparator]=\"hideSeparator\"\n    [hideError]=\"hideError\"\n    [selectionMode]=\" selectionMode\"\n    [title]=\"title\"  >\n\n    </cometchat-users>\n   </div>\n    <div class=\"cc-add-members__buttons\">\n      <cometchat-button class=\"cc-add-members__buttons--add\" [text]=\"buttonText\" [buttonStyle]=\"addMemberButtonStyle\" (click)=\"addMembersToGroup()\" ></cometchat-button>\n\n    </div>\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>", styles: [".cc-add-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-add-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-users{height:90%}.cc-add-members__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-add-members__buttons--add{height:42px;width:100%}\n"] }]
+            args: [{ selector: "cometchat-add-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-add-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-back-button\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\"  (cc-button-clicked)=\"backClicked()\" *ngIf=\"showBackButton\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-add-members__wrapper\" [ngStyle]=\"addMembersStyles()\">\n   <div class=\"cc-users\">\n    <cometchat-users [searchPlaceholder]=\"searchPlaceholder\" [usersRequestBuilder]=\"usersRequestBuilder\"\n    [hideSearch]=\"hideSearch\"\n    [statusIndicatorStyle]=\"statusIndicatorStyle\"\n    [avatarStyle]=\"avatarStyle\"\n    [searchIconURL]=\"searchIconURL\"\n    [searchRequestBuilder]=\"searchRequestBuilder\"\n    [usersStyle]=\"usersStyle\"\n    [subtitleView]=\"subtitleView\"\n    [options]=\"options\"\n    [usersRequestBuilder]=\"usersRequestBuilder\"\n    [emptyStateView]=\"emptyStateView\"\n    [onSelect]=\" addRemoveUsers\"\n    [sectionHeaderField]=\"sectionHeaderField\"\n    [loadingIconURL]=\"loadingIconURL\"\n    [errorStateView]=\"errorStateView\"\n    [loadingStateView]=\"loadingStateView\"\n    [titleAlignment]=\"titleAlignment\"\n    [showSectionHeader]=\"showSectionHeader\"\n    [listItemView]=\"listItemView\"\n    [menu]=\"menu\"\n    [hideSeparator]=\"hideSeparator\"\n    [hideError]=\"hideError\"\n    [selectionMode]=\" selectionMode\"\n    [listItemStyle]=\"listItemStyle\"\n    [title]=\"title\"  >\n\n    </cometchat-users>\n   </div>\n    <div class=\"cc-add-members__buttons\">\n      <cometchat-button class=\"cc-add-members__buttons--add\" [text]=\"buttonText\" [buttonStyle]=\"addMemberButtonStyle\" (click)=\"addMembersToGroup()\" ></cometchat-button>\n\n    </div>\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>", styles: [".cc-add-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-add-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-users{height:90%}.cc-add-members__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-add-members__buttons--add{height:42px;width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { usersRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{
@@ -4786,6 +4810,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], StatusIndicatorStyle: [{
                 type: Input
+            }], statusIndicatorStyle: [{
+                type: Input
             }], avatarStyle: [{
                 type: Input
             }] } });
@@ -4849,6 +4875,16 @@ class CometChatMessageHeaderComponent {
         this.subtitleText = "";
         this.isTyping = false;
         this.theme = new CometChatTheme({});
+        /**
+         * @param  {CometChat.User} user
+         */
+        this.getStatusIndicatorStyle = (user) => {
+            let userStatusVisibility = new MessageUtils().getUserStatusVisibility(user) || this.disableUsersPresence;
+            if (!userStatusVisibility) {
+                return (this.statusIndicatorStyle);
+            }
+            return null;
+        };
         this.statusColor = {
             online: "#00f300",
             private: "#00f300",
@@ -4864,7 +4900,15 @@ class CometChatMessageHeaderComponent {
             buttonIconTint: ""
         };
         this.checkStatusType = () => {
-            return this.user && !this.disableUsersPresence ? this.statusColor[this.user?.getStatus()] : this.statusColor[this.group?.getType()];
+            if (this.user) {
+                let userStatusVisibility = new MessageUtils().getUserStatusVisibility(this.user) || this.disableUsersPresence;
+                return userStatusVisibility ? null : this.statusColor[this.user?.getStatus()];
+            }
+            else if (this.group) {
+                return this.statusColor[this.group?.getType()];
+            }
+            else
+                return;
         };
         this.setTypingIndicatorText = (typing) => {
             const sender = typing.getSender();
@@ -4935,7 +4979,7 @@ class CometChatMessageHeaderComponent {
         this.setStatusStyle();
         this.subscribeToEvents();
         this.backButtonStyle.buttonIconTint = this.messageHeaderStyle?.backButtonIconTint || this.themeService.theme.palette.getPrimary();
-        this.statusColor.online = this.messageHeaderStyle.onlineStatusColor;
+        this.statusColor.online = this.messageHeaderStyle.onlineStatusColor ?? this.themeService.theme.palette.getSuccess();
     }
     // subscribe to global events
     subscribeToEvents() {
@@ -4989,6 +5033,8 @@ class CometChatMessageHeaderComponent {
         this.ccGroupMemberJoined?.unsubscribe();
         this.ccGroupMemberKicked?.unsubscribe();
         this.ccOwnershipChanged?.unsubscribe();
+        this.ccUserBlocked?.unsubscribe();
+        this.ccUserUnblocked?.unsubscribe();
         this.ccGroupLeft?.unsubscribe();
     }
     setListItemStyle() {
@@ -5027,7 +5073,12 @@ class CometChatMessageHeaderComponent {
             border: "none",
             borderRadius: "24px",
         };
-        this.statusIndicatorStyle = { ...defaultStyle, ...this.statusIndicatorStyle };
+        if (!this.disableUsersPresence) {
+            this.statusIndicatorStyle = { ...defaultStyle, ...this.statusIndicatorStyle };
+        }
+        else {
+            this.statusIndicatorStyle = {};
+        }
     }
     getHeadersStyle() {
         const defaultValues = this.messageHeaderStyle;
@@ -5056,7 +5107,8 @@ class CometChatMessageHeaderComponent {
         const count = this.group?.getMembersCount();
         const membersText = localize(count > 1 ? "MEMBERS" : "MEMBER");
         if (this.user) {
-            this.subtitleText = this.disableUsersPresence ? "" : this.user.getStatus();
+            let userStatusVisibility = this.user.getBlockedByMe() || this.user.getHasBlockedMe() || this.disableUsersPresence;
+            this.subtitleText = userStatusVisibility ? "" : this.user.getStatus();
             this.ref.detectChanges();
         }
         else {
@@ -5093,17 +5145,25 @@ class CometChatMessageHeaderComponent {
     }
     attachListeners() {
         try {
-            if (!this.disableUsersPresence) {
-                CometChat.addUserListener(this.userListenerId, new CometChat.UserListener({
-                    onUserOnline: (onlineUser) => {
-                        /* when someuser/friend comes online, user will be received here */
-                        this.updateUserStatus(onlineUser);
-                    },
-                    onUserOffline: (offlineUser) => {
-                        /* when someuser/friend went offline, user will be received here */
-                        this.updateUserStatus(offlineUser);
-                    },
-                }));
+            CometChat.addUserListener(this.userListenerId, new CometChat.UserListener({
+                onUserOnline: (onlineUser) => {
+                    /* when someuser/friend comes online, user will be received here */
+                    this.updateUserStatus(onlineUser);
+                },
+                onUserOffline: (offlineUser) => {
+                    /* when someuser/friend went offline, user will be received here */
+                    this.updateUserStatus(offlineUser);
+                },
+            }));
+            if (this.user) {
+                this.ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe((item) => {
+                    if (item.getUid() == this.user.getUid())
+                        this.updateUserStatus(item);
+                });
+                this.ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe((item) => {
+                    if (item.getUid() == this.user.getUid())
+                        this.updateUserStatus(item);
+                });
             }
             if (!this.disableTyping) {
                 this.onTypingStarted = CometChatMessageEvents.onTypingStarted.subscribe((typingIndicator) => {
@@ -5175,10 +5235,10 @@ class CometChatMessageHeaderComponent {
     }
 }
 CometChatMessageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageHeaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: { avatarStyle: "avatarStyle", statusIndicatorStyle: "statusIndicatorStyle", messageHeaderStyle: "messageHeaderStyle", listItemStyle: "listItemStyle", subtitleView: "subtitleView", disableUsersPresence: "disableUsersPresence", disableTyping: "disableTyping", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", privateGroupIcon: "privateGroupIcon", menu: "menu", user: "user", group: "group", backButtonIconURL: "backButtonIconURL", hideBackButton: "hideBackButton", listItemView: "listItemView", onError: "onError", onBack: "onBack" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-header__wrapper\" [ngStyle]=\"headerStyle()\">\n  <div class=\"cc-message-header\">\n    <div class=\"cc-message-header__back-button\" *ngIf=\"!hideBackButton\">\n      <cometchat-button [iconURL]=\"backButtonIconURL\"\n        [buttonStyle]=\"backButtonStyle\"\n        (cc-button-clicked)=\"onBackClicked()\"></cometchat-button>\n    </div>\n    <div class=\"cc-message-header__listitem\">\n      <cometchat-list-item *ngIf=\"!listItemView;else listitem\"\n        [avatarName]=\"user?.getName() || this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() || this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() || this.group?.getName()\"\n        [hideSeparator]=\"true\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n\n            </ng-container>\n          </ng-template>\n\n        </div>\n      </cometchat-list-item>\n      <ng-template #listitem>\n        <ng-container *ngTemplateOutlet=\"listItemView\">\n\n        </ng-container>\n      </ng-template>\n    </div>\n  </div>\n  <div class=\"cc-message-header__menu\" *ngIf=\"menu\">\n    <ng-container *ngTemplateOutlet=\"menu;context:{ $implicit: user ?? group }\">\n\n    </ng-container>\n  </div>\n</div>\n", styles: [".cc-message-header__wrapper{display:flex;align-items:center;justify-content:space-between;flex-direction:row;padding:8px;box-sizing:border-box}.cc-message-header__back-button{margin-right:8px}.cc-message-header{display:flex;align-items:center;justify-content:flex-start;height:100%;width:100%}.cc-message-header__listitem{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start}.cc-message-header__menu{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:flex-end;padding:12px}cometchat-list-item{width:100%}\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 });
+CometChatMessageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: { avatarStyle: "avatarStyle", statusIndicatorStyle: "statusIndicatorStyle", messageHeaderStyle: "messageHeaderStyle", listItemStyle: "listItemStyle", subtitleView: "subtitleView", disableUsersPresence: "disableUsersPresence", disableTyping: "disableTyping", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", privateGroupIcon: "privateGroupIcon", menu: "menu", user: "user", group: "group", backButtonIconURL: "backButtonIconURL", hideBackButton: "hideBackButton", listItemView: "listItemView", onError: "onError", onBack: "onBack" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-header__wrapper\" [ngStyle]=\"headerStyle()\">\n  <div class=\"cc-message-header\">\n    <div class=\"cc-message-header__back-button\" *ngIf=\"!hideBackButton\">\n      <cometchat-button [iconURL]=\"backButtonIconURL\"\n        [buttonStyle]=\"backButtonStyle\"\n        (cc-button-clicked)=\"onBackClicked()\"></cometchat-button>\n    </div>\n    <div class=\"cc-message-header__listitem\">\n      <cometchat-list-item *ngIf=\"!listItemView;else listitem\"\n        [avatarName]=\"user?.getName() || this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() || this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() || this.group?.getName()\"\n        [hideSeparator]=\"true\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n\n            </ng-container>\n          </ng-template>\n\n        </div>\n      </cometchat-list-item>\n      <ng-template #listitem>\n        <ng-container *ngTemplateOutlet=\"listItemView\">\n\n        </ng-container>\n      </ng-template>\n    </div>\n  </div>\n  <div class=\"cc-message-header__menu\" *ngIf=\"menu\">\n    <ng-container *ngTemplateOutlet=\"menu;context:{ $implicit: user ?? group }\">\n\n    </ng-container>\n  </div>\n</div>\n", styles: [".cc-message-header__wrapper{display:flex;align-items:center;justify-content:space-between;flex-direction:row;padding:8px;box-sizing:border-box}.cc-message-header__back-button{margin-right:8px}.cc-message-header{display:flex;align-items:center;justify-content:flex-start;height:100%;width:100%}.cc-message-header__listitem{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start}.cc-message-header__menu{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:flex-end;padding:12px}cometchat-list-item{width:100%}\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: CometChatMessageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cometchat-message-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-header__wrapper\" [ngStyle]=\"headerStyle()\">\n  <div class=\"cc-message-header\">\n    <div class=\"cc-message-header__back-button\" *ngIf=\"!hideBackButton\">\n      <cometchat-button [iconURL]=\"backButtonIconURL\"\n        [buttonStyle]=\"backButtonStyle\"\n        (cc-button-clicked)=\"onBackClicked()\"></cometchat-button>\n    </div>\n    <div class=\"cc-message-header__listitem\">\n      <cometchat-list-item *ngIf=\"!listItemView;else listitem\"\n        [avatarName]=\"user?.getName() || this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() || this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() || this.group?.getName()\"\n        [hideSeparator]=\"true\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n\n            </ng-container>\n          </ng-template>\n\n        </div>\n      </cometchat-list-item>\n      <ng-template #listitem>\n        <ng-container *ngTemplateOutlet=\"listItemView\">\n\n        </ng-container>\n      </ng-template>\n    </div>\n  </div>\n  <div class=\"cc-message-header__menu\" *ngIf=\"menu\">\n    <ng-container *ngTemplateOutlet=\"menu;context:{ $implicit: user ?? group }\">\n\n    </ng-container>\n  </div>\n</div>\n", styles: [".cc-message-header__wrapper{display:flex;align-items:center;justify-content:space-between;flex-direction:row;padding:8px;box-sizing:border-box}.cc-message-header__back-button{margin-right:8px}.cc-message-header{display:flex;align-items:center;justify-content:flex-start;height:100%;width:100%}.cc-message-header__listitem{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start}.cc-message-header__menu{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:flex-end;padding:12px}cometchat-list-item{width:100%}\n"] }]
+            args: [{ selector: 'cometchat-message-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-header__wrapper\" [ngStyle]=\"headerStyle()\">\n  <div class=\"cc-message-header\">\n    <div class=\"cc-message-header__back-button\" *ngIf=\"!hideBackButton\">\n      <cometchat-button [iconURL]=\"backButtonIconURL\"\n        [buttonStyle]=\"backButtonStyle\"\n        (cc-button-clicked)=\"onBackClicked()\"></cometchat-button>\n    </div>\n    <div class=\"cc-message-header__listitem\">\n      <cometchat-list-item *ngIf=\"!listItemView;else listitem\"\n        [avatarName]=\"user?.getName() || this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() || this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() || this.group?.getName()\"\n        [hideSeparator]=\"true\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n\n            </ng-container>\n          </ng-template>\n\n        </div>\n      </cometchat-list-item>\n      <ng-template #listitem>\n        <ng-container *ngTemplateOutlet=\"listItemView\">\n\n        </ng-container>\n      </ng-template>\n    </div>\n  </div>\n  <div class=\"cc-message-header__menu\" *ngIf=\"menu\">\n    <ng-container *ngTemplateOutlet=\"menu;context:{ $implicit: user ?? group }\">\n\n    </ng-container>\n  </div>\n</div>\n", styles: [".cc-message-header__wrapper{display:flex;align-items:center;justify-content:space-between;flex-direction:row;padding:8px;box-sizing:border-box}.cc-message-header__back-button{margin-right:8px}.cc-message-header{display:flex;align-items:center;justify-content:flex-start;height:100%;width:100%}.cc-message-header__listitem{height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start}.cc-message-header__menu{width:-moz-fit-content;width:fit-content;display:flex;align-items:center;justify-content:flex-end;padding:12px}cometchat-list-item{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { avatarStyle: [{
                 type: Input
             }], statusIndicatorStyle: [{
@@ -5377,13 +5437,9 @@ class CometChatBannedMembersComponent {
        * @param  {CometChat.GroupMember} member
        */
         this.getStatusIndicatorColor = (member) => {
-            if (!this.disableUsersPresence) {
-                if (member?.getStatus() == CometChatUIKitConstants.userStatusType.online) {
-                    return this.bannedMembersStyle.onlineStatusColor || this.themeService.theme.palette.getSuccess();
-                }
-                else {
-                    return null;
-                }
+            let userStatusVisibility = new MessageUtils().getUserStatusVisibility(member) || this.disableUsersPresence;
+            if (!userStatusVisibility) {
+                return this.bannedMembersStyle.onlineStatusColor ?? this.themeService.theme.palette.getSuccess();
             }
             return null;
         };
@@ -5424,18 +5480,16 @@ class CometChatBannedMembersComponent {
        * @param  {CometChat.User} member
        */
         this.updateMemberStatus = (member) => {
-            if (!this.disableUsersPresence) {
-                let memberlist = [...this.bannedMembers];
-                //search for user
-                let userKey = memberlist.findIndex((u, k) => u.getUid() == member.getUid());
-                //if found in the list, update user object
-                if (userKey > -1) {
-                    let user = memberlist[userKey];
-                    user.setStatus(member.getStatus());
-                    memberlist.splice(userKey, 1, user);
-                    this.bannedMembers = [...memberlist];
-                    this.ref.detectChanges();
-                }
+            let memberlist = [...this.bannedMembers];
+            //search for user
+            let userKey = memberlist.findIndex((u, k) => u.getUid() == member.getUid());
+            //if found in the list, update user object
+            if (userKey > -1) {
+                let user = memberlist[userKey];
+                user.setStatus(member.getStatus());
+                memberlist.splice(userKey, 1, user);
+                this.bannedMembers = [...memberlist];
+                this.ref.detectChanges();
             }
         };
         this.fetchNextBannedMembers = () => {
@@ -5818,7 +5872,7 @@ class CometChatConversationsComponent {
         this.title = localize("CHATS"); //Title of the component
         this.searchPlaceHolder = localize("SEARCH"); // placeholder text of search input
         this.disableUsersPresence = false;
-        this.disableReceipt = true;
+        this.disableReceipt = false;
         this.disableTyping = false;
         this.deliveredIcon = "assets/message-delivered.svg";
         this.readIcon = "assets/message-read.svg";
@@ -5853,22 +5907,22 @@ class CometChatConversationsComponent {
         this.confirmButtonText = localize("DELETE");
         this.cancelButtonText = localize("CANCEL");
         this.confirmDialogMessage = localize("WOULD__YOU_LIKE_TO_DELETE_THIS_CONVERSATION");
-        this.deleteConversationDialogStyle = {
-            confirmButtonBackground: "",
-            cancelButtonBackground: "",
-            confirmButtonTextColor: "",
-            confirmButtonTextFont: "",
-            cancelButtonTextColor: "",
-            cancelButtonTextFont: "",
-            titleFont: "",
-            titleColor: "",
-            messageTextFont: "",
-            messageTextColor: "",
-            background: "",
-            border: "1px solid #f2f2f2",
+        this.deleteConversationDialogStyle = new ConfirmDialogStyle({
+            confirmButtonBackground: this.themeService.theme.palette.getError(),
+            cancelButtonBackground: this.themeService.theme.palette.getSecondary(),
+            confirmButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
+            confirmButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
+            cancelButtonTextColor: this.themeService.theme.palette.getAccent900("dark"),
+            cancelButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
+            titleFont: fontHelper(this.themeService.theme.typography.title1),
+            titleColor: this.themeService.theme.palette.getAccent(),
+            messageTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            messageTextColor: this.themeService.theme.palette.getAccent600(),
+            background: this.themeService.theme.palette.getBackground(),
             height: "100%",
             width: "100%",
-        };
+            borderRadius: "8px",
+        });
         this.backdropStyle = {
             height: "100%",
             width: "100%",
@@ -5993,9 +6047,16 @@ class CometChatConversationsComponent {
         this.onConfirmClick = () => {
             this.deleteSelectedConversation();
         };
-        this.setStatusIndicatorStyle = (conversation) => {
-            if (conversation.getConversationType() ==
-                CometChatUIKitConstants.MessageReceiverType.group) {
+        this.getStatusIndicatorStyle = (conversation) => {
+            const convWith = conversation.getConversationWith();
+            if (convWith instanceof CometChat.User) {
+                let userStatusVisibility = new MessageUtils().getUserStatusVisibility(convWith);
+                if (!this.disableUsersPresence && !userStatusVisibility) {
+                    return this.statusIndicatorStyle;
+                }
+                return null;
+            }
+            else if (conversation.getConversationType() === CometChatUIKitConstants.MessageReceiverType.group) {
                 return {
                     height: "12px",
                     width: "12px",
@@ -6003,7 +6064,7 @@ class CometChatConversationsComponent {
                 };
             }
             else {
-                return this.statusIndicatorStyle;
+                return null;
             }
         };
         this.setSubtitle = (conversationObject) => {
@@ -6189,21 +6250,17 @@ class CometChatConversationsComponent {
          * @param  {CometChat.BaseMessage} message
          */
         this.markMessageAsDelivered = (message) => {
-            //if chat window is not open, mark message as delivered
-            if (this.activeConversation?.getConversationType() ==
-                CometChatUIKitConstants.MessageReceiverType.user) {
-                if ((!this.activeConversation ||
-                    this.activeConversation?.getConversationWith()?.getUid() !== message?.getSender()?.getUid()) &&
-                    !message.hasOwnProperty("deliveredAt")) {
-                    CometChat.markAsDelivered(message);
-                }
-            }
-            else {
-                if ((!this.activeConversation ||
-                    this.activeConversation?.getConversationWith()?.getGuid() !== message?.getReceiverId()) &&
-                    !message.hasOwnProperty("deliveredAt")) {
-                    CometChat.markAsDelivered(message);
-                }
+            const isGroupConversation = this.activeConversation?.getConversationType() ==
+                CometChatUIKitConstants.MessageReceiverType.group;
+            const isUserConversation = this.activeConversation?.getConversationType() ==
+                CometChatUIKitConstants.MessageReceiverType.user;
+            const isSameGroup = this.activeConversation?.getConversationWith() instanceof CometChat.Group && this.activeConversation?.getConversationWith()?.getGuid() === message?.getReceiverId();
+            const isSameUser = this.activeConversation?.getConversationWith() instanceof CometChat.User && this.activeConversation?.getConversationWith()?.getUid() === message?.getSender()?.getUid();
+            const shouldMarkAsDelivered = !this.activeConversation ||
+                (isGroupConversation && isSameGroup) ||
+                (isUserConversation && isSameUser);
+            if (shouldMarkAsDelivered && !message.hasOwnProperty("deliveredAt")) {
+                CometChat.markAsDelivered(message);
             }
         };
         /**
@@ -6281,20 +6338,16 @@ class CometChatConversationsComponent {
      * @param  {CometChat.Conversation} conversation
      */
     checkStatusType(conversation) {
-        let user = conversation.getConversationWith();
-        if (conversation.getConversationType() ==
-            CometChatUIKitConstants.MessageReceiverType.user &&
-            !this.disableUsersPresence) {
-            if (user.getStatus() === CometChatUIKitConstants.userStatusType.online) {
-                return this.statusColor[user.getStatus()];
-            }
+        let item = conversation.getConversationWith();
+        if (item instanceof CometChat.User) {
+            let userStatusVisibility = new MessageUtils().getUserStatusVisibility(item) || this.disableUsersPresence;
+            if (!userStatusVisibility)
+                return this.statusColor[item?.getStatus()];
             else
                 return null;
         }
-        else if (conversation.getConversationType() ==
-            CometChatUIKitConstants.MessageReceiverType.group) {
-            let group = conversation.getConversationWith();
-            return this.statusColor[group.getType()];
+        else {
+            return this.statusColor[item?.getType()];
         }
     }
     getExtensionData(messageObject) {
@@ -6497,9 +6550,20 @@ class CometChatConversationsComponent {
         if (!this.conversationType || this.conversationType == CometChatUIKitConstants.MessageReceiverType.user) {
             this.ccUserBlocked = CometChatUserEvents.ccUserBlocked.subscribe((item) => {
                 let conversation = this.getConversationFromUser(item);
-                if (conversation) {
+                if (conversation && !this.requestBuilder?.isIncludeBlockedUsers()) {
                     this.removeConversation(conversation);
                 }
+                else {
+                    this.updateUser(item);
+                }
+                this.ref.detectChanges();
+            });
+            this.ccUserUnblocked = CometChatUserEvents.ccUserUnblocked.subscribe((item) => {
+                let conversation = this.getConversationFromUser(item);
+                if (conversation && this.requestBuilder?.isIncludeBlockedUsers()) {
+                    this.updateUser(item);
+                }
+                this.ref.detectChanges();
             });
         }
         this.ccMessageEdit = CometChatMessageEvents.ccMessageEdited.subscribe((object) => {
@@ -6559,6 +6623,7 @@ class CometChatConversationsComponent {
         this.ccGroupDeleted?.unsubscribe();
         this.ccGroupLeft?.unsubscribe();
         this.ccUserBlocked?.unsubscribe();
+        this.ccUserUnblocked?.unsubscribe();
         this.ccMessageRead?.unsubscribe();
     }
     getConversationFromUser(user) {
@@ -6930,10 +6995,20 @@ class CometChatConversationsComponent {
                     callback(CometChatUIKitConstants.messages.INTERACTIVE_MESSAGE_RECEIVED, null, customMessage);
                 });
             this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
-                if (!this.disableReceipt && (!this.conversationType || this.conversationType == messageReceipt.getReceiverType())) {
+                if (!this.disableReceipt && messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user && (!this.conversationType || this.conversationType == messageReceipt.getReceiverType())) {
+                    this.markAsRead(messageReceipt);
+                }
+            });
+            this.onMessagesReadByAll = CometChatMessageEvents.onMessagesReadByAll.subscribe((messageReceipt) => {
+                if (!this.disableReceipt && messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group && (!this.conversationType || this.conversationType == messageReceipt.getReceiverType())) {
                     this.markAsRead(messageReceipt);
                 }
             });
+            this.onMessagesDeliveredToAll = CometChatMessageEvents.onMessagesDeliveredToAll.subscribe((messageReceipt) => {
+                if (!this.disableReceipt && messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group && (!this.conversationType || this.conversationType == messageReceipt?.getReceiverType())) {
+                    this.updateDeliveredMessage(messageReceipt);
+                }
+            });
             this.onMessageDeleted = CometChatMessageEvents.onMessageDeleted.subscribe((deletedMessage) => {
                 callback(CometChatUIKitConstants.messages.MESSAGE_DELETED, null, deletedMessage);
             });
@@ -6942,7 +7017,7 @@ class CometChatConversationsComponent {
             });
             this.onMessagesDelivered =
                 CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
-                    if (!this.disableReceipt && (!this.conversationType || this.conversationType == messageReceipt?.getReceiverType())) {
+                    if (!this.disableReceipt && messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user && (!this.conversationType || this.conversationType == messageReceipt?.getReceiverType())) {
                         this.updateDeliveredMessage(messageReceipt);
                     }
                 });
@@ -6997,6 +7072,8 @@ class CometChatConversationsComponent {
             this.onCardMessageReceived?.unsubscribe();
             this.onCustomInteractiveMessageReceived?.unsubscribe();
             this.onMessagesRead?.unsubscribe();
+            this.onMessagesDeliveredToAll?.unsubscribe();
+            this.onMessagesReadByAll?.unsubscribe();
             this.onMessageDeleted?.unsubscribe();
             this.onMessageEdited?.unsubscribe();
             this.onMessagesDelivered?.unsubscribe();
@@ -7030,7 +7107,7 @@ class CometChatConversationsComponent {
     }
     markAsRead(readMessage) {
         let conversationlist = [...this.conversationList];
-        const conversationKey = conversationlist.findIndex((conversationObj) => conversationObj.getLastMessage().getReceiverId() == readMessage.getSender().getUid());
+        const conversationKey = conversationlist.findIndex((conversationObj) => conversationObj.getLastMessage().getId() == Number(readMessage.getMessageId()) && conversationObj.getLastMessage().getSender().getUid() == this.loggedInUser?.getUid());
         if (conversationKey > -1) {
             let newConversationObject;
             if (!conversationlist[conversationKey].getLastMessage().getReadAt()) {
@@ -7207,8 +7284,7 @@ class CometChatConversationsComponent {
     }
     updateDeliveredMessage(messageReceipt) {
         let conversationList = [...this.conversationList];
-        let conversationKey = conversationList.findIndex((c) => c.getLastMessage().getId() ==
-            Number(messageReceipt.getMessageId()));
+        let conversationKey = conversationList.findIndex((c) => c.getLastMessage().getId() == Number(messageReceipt.getMessageId()) && c.getLastMessage().getSender().getUid() == this.loggedInUser?.getUid());
         let conversationObj;
         if (conversationKey > -1) {
             conversationObj = conversationList[conversationKey];
@@ -7434,10 +7510,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", 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]=\"setStatusIndicatorStyle(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\">\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", disableTyping: "disableTyping", deliveredIcon: "deliveredIcon", readIcon: "readIcon", errorIcon: "errorIcon", datePattern: "datePattern", onError: "onError", sentIcon: "sentIcon", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", customSoundForMessages: "customSoundForMessages", activeConversation: "activeConversation", searchIconURL: "searchIconURL", hideSearch: "hideSearch", conversationsRequestBuilder: "conversationsRequestBuilder", emptyStateView: "emptyStateView", onSelect: "onSelect", loadingIconURL: "loadingIconURL", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", listItemView: "listItemView", menu: "menu", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", disableSoundForMessages: "disableSoundForMessages", confirmDialogTitle: "confirmDialogTitle", confirmButtonText: "confirmButtonText", cancelButtonText: "cancelButtonText", confirmDialogMessage: "confirmDialogMessage", onItemClick: "onItemClick", deleteConversationDialogStyle: "deleteConversationDialogStyle", backdropStyle: "backdropStyle", badgeStyle: "badgeStyle", dateStyle: "dateStyle", conversationsStyle: "conversationsStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", typingIndicatorText: "typingIndicatorText", threadIndicatorText: "threadIndicatorText", avatarStyle: "avatarStyle", receiptStyle: "receiptStyle", loggedInUser: "loggedInUser", disableMentions: "disableMentions", textFormatters: "textFormatters" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-conversations\" [ngStyle]=\"styles.wrapperStyle()\">\n  <cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"isDialogOpen\">\n    <cometchat-confirm-dialog [title]=\"confirmDialogTitle\"\n      [messageText]=\"confirmDialogMessage\" [cancelButtonText]=\"cancelButtonText\"\n      [confirmButtonText]=\"confirmButtonText\"\n      (cc-confirm-clicked)=\"onConfirmClick()\"\n      (cc-cancel-clicked)=\"onCancelClick()\"\n      [confirmDialogStyle]=\"deleteConversationDialogStyle\">\n    </cometchat-confirm-dialog>\n  </cometchat-backdrop>\n  <div class=\"cc-conversations__menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n  </div>\n  <cometchat-list [state]=\"state\" [searchIconURL]=\"searchIconURL\"\n    [hideError]=\"hideError\" [emptyStateText]=\"emptyStateText\"\n    [loadingIconURL]=\"loadingIconURL\" [titleAlignment]=\"titleAlignment\"\n    [loadingStateView]=\"loadingStateView\" [listStyle]=\"listStyle\"\n    [emptyStateView]=\"emptyStateView\" [errorStateText]=\"errorStateText\"\n    [errorStateView]=\"errorStateView\" [onScrolledToBottom]=\"getConversation\"\n    [list]=\"conversationList\"\n    [listItemView]=\"listItemView ? listItemView : listItem\" [title]=\"title\"\n    [hideSearch]=\"hideSearch\"></cometchat-list>\n</div>\n<ng-template #listItem let-conversation>\n  <cometchat-list-item [hideSeparator]=\"hideSeparator\"\n    [avatarStyle]=\"avatarStyle\"\n    [statusIndicatorStyle]=\"getStatusIndicatorStyle(conversation)\"\n    [id]=\"conversation?.conversationId\"\n    [isActive]=\"getActiveConversation(conversation)\"\n    (cc-listitem-clicked)=\"onClick(conversation)\"\n    [title]=\"conversation?.conversationWith?.name\"\n    [statusIndicatorIcon]=\"checkGroupType(conversation)\"\n    [statusIndicatorColor]=\"checkStatusType(conversation)\"\n    [listItemStyle]=\"listItemStyle\"\n    [avatarURL]=\"conversation?.conversationWith?.avatar || conversation?.conversationWith?.icon\"\n    [avatarName]=\"conversation?.conversationWith?.name\">\n    <div slot=\"subtitleView\" *ngIf=\"subtitleView;else conversationSubtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: conversation }\">\n      </ng-container>\n    </div>\n    <ng-template #conversationSubtitle>\n\n      <div class=\"cc-conversations__subtitle-view \" slot=\"subtitleView\">\n        <div class=\"cc-conversations__threadview\"\n          *ngIf=\"conversation?.lastMessage?.parentMessageId\">\n          <cometchat-label [labelStyle]=\"itemThreadIndicatorStyle()\"\n            [text]=\"threadIndicatorText\"> </cometchat-label>\n          <cometchat-icon [URL]=\"threadIconURL\"\n            [iconStyle]=\"iconStyle\"></cometchat-icon>\n\n        </div>\n        <div class=\"cc-conversations__subtitle\">\n          <div class=\"cc-conversations__readreceipt\"\n            *ngIf=\"isReceiptDisable(conversation)\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(conversation)\"\n              [receiptStyle]=\"receiptStyle\" [sentIcon]=\"sentIcon\"\n              [errorIcon]=\"errorIcon\" [deliveredIcon]=\"deliveredIcon\"\n              [readIcon]=\"readIcon\"></cometchat-receipt>\n          </div>\n\n          <div [ngStyle]=\"subtitleStyle(conversation)\" class=\"cc-subtitle__text\"\n            [innerHTML]=\"setSubtitle(conversation)\"></div>\n        </div>\n\n      </div>\n    </ng-template>\n    <div slot=\"menuView\" class=\"cc-conversations__optionsview\"\n      *ngIf=\"selectionMode == selectionmodeEnum.none\">\n      <div *ngIf=\"options\">\n        <cometchat-menu-list [data]=\"options(conversation)\"\n          (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n          [menuListStyle]=\"menustyle\">\n\n        </cometchat-menu-list>\n      </div>\n      <div *ngIf=\"!options && conversationOptions\">\n        <cometchat-menu-list [data]=\"conversationOptions\"\n          (cc-menu-clicked)=\"onOptionClick($event,conversation)\"\n          [menuListStyle]=\"menustyle\">\n\n        </cometchat-menu-list>\n      </div>\n    </div>\n    <div slot=\"tailView\" class=\"cc-conversations__tail-view\">\n      <div class=\"tail__view\"\n        *ngIf=\"selectionMode == selectionmodeEnum.none && conversation?.lastMessage\">\n        <div class=\"cc-date\">\n          <cometchat-date *ngIf=\"conversation?.lastMessage\"\n            [dateStyle]=\"dateStyle\"\n            [timestamp]=\"conversation?.lastMessage?.sentAt\"\n            [pattern]=\"getDate()\"></cometchat-date>\n        </div>\n        <div class=\"cc-conversations__badge\">\n          <!-- <cometchat-icon *ngIf=\"conversation?.getUnreadMentionInMessageCount()\" [ngStyle]=\"getUnreadMentionsIconStyle()\" [iconStyle]=getMentionIconStyle() [URL]=\"mentionsIconURL\"></cometchat-icon> -->\n          <cometchat-badge [count]=\"conversation?.unreadMessageCount\"\n            [badgeStyle]=\"badgeStyle\"></cometchat-badge>\n        </div>\n      </div>\n      <div class=\"cc-conversations__selection-view\"\n        *ngIf=\"selectionMode != selectionmodeEnum.none\">\n        <ng-container *ngTemplateOutlet=\"tailView\">\n        </ng-container>\n      </div>\n    </div>\n  </cometchat-list-item>\n  <ng-template #tailView>\n    <div *ngIf=\"selectionMode == selectionmodeEnum.single\">\n      <cometchat-radio-button\n        (cc-radio-button-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-radio-button>\n    </div>\n    <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n      <cometchat-checkbox\n        (cc-checkbox-changed)=\"onConversationSelected(conversation,$event)\"></cometchat-checkbox>\n    </div>\n  </ng-template>\n</ng-template>\n", styles: [".cc-conversations{height:100%;width:100%;box-sizing:border-box;margin-bottom:16px;position:relative}.cc-conversations__selection-view{position:relative}.tail__view{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.cc-subtitle__text{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.cc-conversations__menus{position:absolute;right:12px;padding:4px;cursor:pointer}.cc-menus__icon{height:24px;width:24px}.cc-conversations__subtitle-view{display:flex;align-items:center;width:90%;flex-direction:column;justify-content:flex-start}.cc-conversations__subtitle{display:flex;justify-content:flex-start;width:100%;align-items:center;min-height:22px}.cc-conversations__threadview{height:12px;display:flex;justify-content:flex-start;width:100%;align-items:center}.cc-conversations__badge{display:flex;align-items:flex-end;justify-content:flex-end;width:100%;padding-right:8px}cometchat-list-item{padding:0 8px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatConversationsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-conversations", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-conversations\" [ngStyle]=\"styles.wrapperStyle()\">\n  <cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"isDialogOpen\">\n    <cometchat-confirm-dialog [title]=\"confirmDialogTitle\"\n      [messageText]=\"confirmDialogMessage\" [cancelButtonText]=\"cancelButtonText\"\n      [confirmButtonText]=\"confirmButtonText\"\n      (cc-confirm-clicked)=\"onConfirmClick()\"\n      (cc-cancel-clicked)=\"onCancelClick()\"\n      [confirmDialogStyle]=\"deleteConversationDialogStyle\">\n    </cometchat-confirm-dialog>\n  </cometchat-backdrop>\n  <div class=\"cc-conversations__menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n  </div>\n  <cometchat-list [state]=\"state\" [searchIconURL]=\"searchIconURL\"\n    [hideError]=\"hideError\" [emptyStateText]=\"emptyStateText\"\n    [loadingIconURL]=\"loadingIconURL\" [titleAlignment]=\"titleAlignment\"\n    [loadingStateView]=\"loadingStateView\" [listStyle]=\"listStyle\"\n    [emptyStateView]=\"emptyStateView\" [errorStateText]=\"errorStateText\"\n    [errorStateView]=\"errorStateView\" [onScrolledToBottom]=\"getConversation\"\n    [list]=\"conversationList\"\n    [listItemView]=\"listItemView ? listItemView : listItem\" [title]=\"title\"\n    [hideSearch]=\"hideSearch\"></cometchat-list>\n</div>\n<ng-template #listItem let-conversation>\n  <cometchat-list-item [hideSeparator]=\"hideSeparator\"\n    [avatarStyle]=\"avatarStyle\"\n    [statusIndicatorStyle]=\"setStatusIndicatorStyle(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\">\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\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: [{
@@ -8173,17 +8249,21 @@ class CometChatMessageInformationComponent {
     ngOnDestroy() {
         this.onMessagesDelivered.unsubscribe();
         this.onMessagesRead.unsubscribe();
+        this.onMessagesReadByAll.unsubscribe();
+        this.onMessagesDeliveredToAll.unsubscribe();
     }
     addMessageEventListeners() {
         try {
             this.onMessagesDelivered = CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
                 if (this.message?.getId() == Number(messageReceipt.getMessageId())) {
+                    this.updateReceipt(messageReceipt);
                     this.message?.setDeliveredAt(messageReceipt.getDeliveredAt());
                     this.ref.detectChanges();
                 }
             });
             this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
                 if (this.message?.getId() == Number(messageReceipt.getMessageId())) {
+                    this.updateReceipt(messageReceipt);
                     this.message?.setReadAt(messageReceipt.getReadAt());
                     this.ref.detectChanges();
                 }
@@ -8205,6 +8285,18 @@ class CometChatMessageInformationComponent {
         let receipt = MessageReceiptUtils.getReceiptStatus(this.message);
         return receipt;
     }
+    updateReceipt(receipt) {
+        let messageKey = this.receipts.findIndex((m) => m.getSender().getUid() === receipt.getSender().getUid());
+        if (messageKey > -1) {
+            if (receipt.getReceiptType() == receipt.RECEIPT_TYPE.READ_RECEIPT) {
+                this.receipts[messageKey].setReadAt(receipt.getReadAt());
+            }
+            else {
+                this.receipts[messageKey].setDeliveredAt(receipt.getDeliveredAt());
+            }
+        }
+        this.ref.detectChanges();
+    }
     getMessageReceipts() {
         if (this.message.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
             this.isUserType = true;
@@ -8245,10 +8337,10 @@ class CometChatMessageInformationComponent {
     }
 }
 CometChatMessageInformationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageInformationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessageInformationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: { closeIconURL: "closeIconURL", message: "message", title: "title", template: "template", bubbleView: "bubbleView", subtitleView: "subtitleView", listItemView: "listItemView", receiptDatePattern: "receiptDatePattern", onError: "onError", messageInformationStyle: "messageInformationStyle", readIcon: "readIcon", deliveredIcon: "deliveredIcon", onClose: "onClose", listItemStyle: "listItemStyle", emptyStateText: "emptyStateText", errorStateText: "errorStateText", emptyStateView: "emptyStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", errorStateView: "errorStateView" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-information__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-message-information__header\">\n    <div class=\"cc-message-information__title\">\n      <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"  ></cometchat-label>\n     </div>\n     <div class=\"cc-close-button\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n      </cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-message-information__bubble\">\n    <cometchat-label class=\"cc-message-information__caption\" [labelStyle]=\"getCaptionStyle()\" [text]=\"messageText\"></cometchat-label>\n   <div class=\"cc-message-information__bubble-view\">\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: message }\">\n    </ng-container>\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n   </div>\n  </div>\n  <div class=\"cc-message-information__list-item\">\n    <cometchat-label class=\"cc-message-information__caption\" [labelStyle]=\"getCaptionStyle()\" [text]=\"receiptInfoText\"></cometchat-label>\n    <div class=\"cc-message-information__bubble-view\" *ngIf=\"isUserType; else listView\">\n      <ng-container *ngIf=\"listItemView; else userListitem\">\n        <ng-container *ngTemplateOutlet=\"listItemView; context:{ $implicit: message }\">\n        </ng-container>\n      </ng-container>\n      <ng-template #userListitem>\n  <div *ngIf=\"!getUserReceipt(); else userReceiptView\" class=\"cc-empty-state-view\">\n <cometchat-label *ngIf=\"!emptyStateView else customEmptyView\" [text]=\"emptyStateText\" [labelStyle]=\"emptyLabelStyle\"></cometchat-label>\n <ng-template #customEmptyView>\n  <ng-container *ngTemplateOutlet=\"emptyStateView\">\n  </ng-container>\n </ng-template>\n  </div>\n  <ng-template #userReceiptView>\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-list-item [hideSeparator]=\"true\"\n    [id]=\"message.getId()\"\n     [title]=\"message.getReceiver().getName()\"\n    [listItemStyle]=\"listItemStyle\" [avatarURL]=\"getAvatarUrl()\" [avatarName]=\"message.getReceiver().getName()\">\n      <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n        <ng-container *ngTemplateOutlet=\"subtitleView\">\n        </ng-container>\n    </div>\n    <ng-template #userSubtitle>\n    <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n  <div class=\"cc-list-item__subtitle\">\n   <div class=\"cc-list-item__delivered-receipt\"  *ngIf=\"message.getDeliveredAt()\">\n  <div class=\"cc-list-item__receipt\">\n   <cometchat-receipt  [receipt]=\"deliveredReceipt\" [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"></cometchat-receipt>\n   <cometchat-label [text]=\"'Delivered'\" [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n  </div>\n     <cometchat-date  [timestamp]=\"message.getDeliveredAt()\" [dateStyle]=\"dateStyle\"></cometchat-date>\n   </div>\n    <div class=\"cc-list-item__read-receipt\" *ngIf=\"message.getReadAt()\">\n     <div class=\"cc-list-item__receipt\">\n       <cometchat-receipt  [receipt]=\"readReceipt\" [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"></cometchat-receipt>\n       <cometchat-label [text]=\"'Read'\" [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n      </div>\n      <cometchat-date  [timestamp]=\"message.getReadAt()\" [dateStyle]=\"dateStyle\"></cometchat-date>\n    </div>\n  </div>\n    </div>\n    </ng-template>\n    </cometchat-list-item>\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n  </ng-template>\n      </ng-template>\n    </div>\n  </div>\n</div>\n<!-- list item view -->\n<ng-template #listView>\n<cometchat-list\n[list]=\"receipts\"\n[listItemView]=\"listItemView ? listItemView : listItem\"\n[hideSearch]=\"true\"\n[state]=\"states\"\n[emptyStateText]=\"emptyStateText\"\n[errorStateText]=\"errorStateText\"\n[loadingIconURL]=\"loadingIconURL\"\n[loadingStateView]=\"loadingStateView\"\n[errorStateView]=\"errorStateView\"\n[emptyStateView]=\"emptyStateView\"\n[title]=\"''\"\n></cometchat-list>\n</ng-template>\n<ng-template #listItem let-messageReceipt>\n  <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n  <cometchat-list-item [hideSeparator]=\"true\"\n   [title]=\"messageReceipt.getSender().getName()\"\n  [listItemStyle]=\"listItemStyle\" [avatarURL]=\"messageReceipt.getSender()?.getAvatar()\" [avatarName]=\"messageReceipt.getSender().getName()\">\n    <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitleView\">\n      </ng-container>\n  </div>\n  <ng-template #userSubtitle>\n  <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n<div class=\"cc-list-item__subtitle\">\n <div class=\"cc-list-item__delivered-receipt\"  *ngIf=\"messageReceipt.getDeliveredAt()\">\n<div class=\"cc-list-item__receipt\">\n <cometchat-receipt  [receipt]=\"deliveredReceipt\" [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"></cometchat-receipt>\n <cometchat-label [text]=\"'Delivered'\"  [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n</div>\n   <cometchat-date  [timestamp]=\"messageReceipt.getDeliveredAt()\" [dateStyle]=\"dateStyle\" [pattern]=\"deliveredReceipt\" [customDateString]=\"getDatePattern(messageReceipt.getDeliveredAt())\"></cometchat-date>\n </div>\n  <div class=\"cc-list-item__read-receipt\" *ngIf=\"messageReceipt.getReadAt()\">\n   <div class=\"cc-list-item__receipt\">\n     <cometchat-receipt  [receipt]=\"readReceipt\" [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"></cometchat-receipt>\n     <cometchat-label [text]=\"'Read'\"  [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n    </div>\n    <cometchat-date [pattern]=\"readReceipt\" [timestamp]=\"messageReceipt.getReadAt()\" [dateStyle]=\"dateStyle\" [customDateString]=\"getDatePattern(messageReceipt.getReadAt())\"></cometchat-date>\n  </div>\n</div>\n  </div>\n  </ng-template>\n  </cometchat-list-item>\n  <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n</ng-template>", styles: [".cc-message-information__wrapper{height:500px;width:500px;background-color:#fff;padding:8px;display:flex;overflow:hidden;flex-direction:column}*{margin:0;padding:0;box-sizing:border-box}.cc-message-information__title{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}.cc-close-button{padding:8px 0}.cc-message-information__header{display:flex;flex-direction:row;justify-content:flex-end}.cc-message-information__bubble-header{display:flex;align-items:flex-start;justify-content:flex-start;padding-bottom:2px}.cc-message-information__bubble-view{overflow-y:auto;max-height:150px;overflow-x:hidden}.cc-message-information__bubble,.cc-message-information__list-item{margin:8px 0;overflow:hidden}.cc-list-item__delivered-receipt,.cc-list-item__read-receipt{display:flex;justify-content:space-between}.cc-list-item__receipt{display:flex}cometchat-label{display:flex;align-items:center;justify-content:flex-start}.cc-empty-state-view{display:flex;align-items:flex-start;justify-content:center}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessageInformationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: { closeIconURL: "closeIconURL", message: "message", title: "title", template: "template", bubbleView: "bubbleView", subtitleView: "subtitleView", listItemView: "listItemView", receiptDatePattern: "receiptDatePattern", onError: "onError", messageInformationStyle: "messageInformationStyle", readIcon: "readIcon", deliveredIcon: "deliveredIcon", onClose: "onClose", listItemStyle: "listItemStyle", emptyStateText: "emptyStateText", errorStateText: "errorStateText", emptyStateView: "emptyStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", errorStateView: "errorStateView" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-information__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-message-information__header\">\n    <div class=\"cc-message-information__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    </div>\n    <div class=\"cc-close-button\">\n      <cometchat-button [iconURL]=\"closeIconURL\"\n        [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n      </cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-message-information__bubble\">\n    <cometchat-label class=\"cc-message-information__caption\"\n      [labelStyle]=\"getCaptionStyle()\" [text]=\"messageText\"></cometchat-label>\n    <div class=\"cc-message-information__bubble-view\">\n      <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n      <ng-container\n        *ngTemplateOutlet=\"bubbleView; context:{ $implicit: message }\">\n      </ng-container>\n      <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    </div>\n  </div>\n  <div class=\"cc-message-information__list-item\">\n    <cometchat-label class=\"cc-message-information__caption\"\n      [labelStyle]=\"getCaptionStyle()\"\n      [text]=\"receiptInfoText\"></cometchat-label>\n    <div class=\"cc-message-information__bubble-view\"\n      *ngIf=\"isUserType; else listView\">\n      <ng-container *ngIf=\"listItemView; else userListitem\">\n        <ng-container\n          *ngTemplateOutlet=\"listItemView; context:{ $implicit: message }\">\n        </ng-container>\n      </ng-container>\n      <ng-template #userListitem>\n        <div *ngIf=\"!getUserReceipt(); else userReceiptView\"\n          class=\"cc-empty-state-view\">\n          <cometchat-label *ngIf=\"!emptyStateView else customEmptyView\"\n            [text]=\"emptyStateText\"\n            [labelStyle]=\"emptyLabelStyle\"></cometchat-label>\n          <ng-template #customEmptyView>\n            <ng-container *ngTemplateOutlet=\"emptyStateView\">\n            </ng-container>\n          </ng-template>\n        </div>\n        <ng-template #userReceiptView>\n          <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n          <cometchat-list-item [hideSeparator]=\"true\" [id]=\"message.getId()\"\n            [title]=\"message.getReceiver().getName()\"\n            [listItemStyle]=\"listItemStyle\" [avatarURL]=\"getAvatarUrl()\"\n            [avatarName]=\"message.getReceiver().getName()\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n              <ng-container *ngTemplateOutlet=\"subtitleView\">\n              </ng-container>\n            </div>\n            <ng-template #userSubtitle>\n              <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n                <div class=\"cc-list-item__subtitle\">\n                  <div class=\"cc-list-item__delivered-receipt\"\n                    *ngIf=\"message.getDeliveredAt()\">\n                    <div class=\"cc-list-item__receipt\">\n                      <cometchat-receipt [receipt]=\"deliveredReceipt\"\n                        [receiptStyle]=\"receiptStyle\"\n                        [deliveredIcon]=\"deliveredIcon\"\n                        [readIcon]=\"readIcon\"></cometchat-receipt>\n                      <cometchat-label [text]=\"'Delivered'\"\n                        [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n                    </div>\n                    <cometchat-date [timestamp]=\"message.getDeliveredAt()\"\n                      [dateStyle]=\"dateStyle\"></cometchat-date>\n                  </div>\n                  <div class=\"cc-list-item__read-receipt\"\n                    *ngIf=\"message.getReadAt()\">\n                    <div class=\"cc-list-item__receipt\">\n                      <cometchat-receipt [receipt]=\"readReceipt\"\n                        [receiptStyle]=\"receiptStyle\"\n                        [deliveredIcon]=\"deliveredIcon\"\n                        [readIcon]=\"readIcon\"></cometchat-receipt>\n                      <cometchat-label [text]=\"'Read'\"\n                        [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n                    </div>\n                    <cometchat-date [timestamp]=\"message.getReadAt()\"\n                      [dateStyle]=\"dateStyle\"></cometchat-date>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </cometchat-list-item>\n          <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n        </ng-template>\n      </ng-template>\n    </div>\n  </div>\n</div>\n<!-- list item view -->\n<ng-template #listView>\n  <cometchat-list [list]=\"receipts\"\n    [listItemView]=\"listItemView ? listItemView : listItem\" [hideSearch]=\"true\"\n    [state]=\"states\" [emptyStateText]=\"emptyStateText\"\n    [errorStateText]=\"errorStateText\" [loadingIconURL]=\"loadingIconURL\"\n    [loadingStateView]=\"loadingStateView\" [errorStateView]=\"errorStateView\"\n    [emptyStateView]=\"emptyStateView\" [title]=\"''\"></cometchat-list>\n</ng-template>\n<ng-template #listItem let-messageReceipt>\n  <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n  <cometchat-list-item [hideSeparator]=\"true\"\n    [title]=\"messageReceipt.getSender().getName()\"\n    [listItemStyle]=\"listItemStyle\"\n    [avatarURL]=\"messageReceipt.getSender()?.getAvatar()\"\n    [avatarName]=\"messageReceipt.getSender().getName()\">\n    <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitleView\">\n      </ng-container>\n    </div>\n    <ng-template #userSubtitle>\n      <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n        <div class=\"cc-list-item__subtitle\">\n          <div class=\"cc-list-item__delivered-receipt\"\n            *ngIf=\"messageReceipt.getDeliveredAt()\">\n            <div class=\"cc-list-item__receipt\">\n              <cometchat-receipt [receipt]=\"deliveredReceipt\"\n                [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\"\n                [readIcon]=\"readIcon\"></cometchat-receipt>\n              <cometchat-label [text]=\"'Delivered'\"\n                [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n            </div>\n            <cometchat-date [timestamp]=\"messageReceipt.getDeliveredAt()\"\n              [dateStyle]=\"dateStyle\"></cometchat-date>\n          </div>\n          <div class=\"cc-list-item__read-receipt\"\n            *ngIf=\"messageReceipt.getReadAt()\">\n            <div class=\"cc-list-item__receipt\">\n              <cometchat-receipt [receipt]=\"readReceipt\"\n                [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\"\n                [readIcon]=\"readIcon\"></cometchat-receipt>\n              <cometchat-label [text]=\"'Read'\"\n                [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n            </div>\n            <cometchat-date [timestamp]=\"messageReceipt.getReadAt()\"\n              [dateStyle]=\"dateStyle\"></cometchat-date>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </cometchat-list-item>\n  <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n</ng-template>\n", styles: [".cc-message-information__wrapper{height:500px;width:500px;background-color:#fff;padding:8px;display:flex;overflow:hidden;flex-direction:column}*{margin:0;padding:0;box-sizing:border-box}.cc-message-information__title{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}.cc-close-button{padding:8px 0}.cc-message-information__header{display:flex;flex-direction:row;justify-content:flex-end}.cc-message-information__bubble-header{display:flex;align-items:flex-start;justify-content:flex-start;padding-bottom:2px}.cc-message-information__bubble-view{overflow-y:auto;max-height:150px;overflow-x:hidden}.cc-message-information__bubble,.cc-message-information__list-item{margin:8px 0;overflow:hidden}.cc-list-item__delivered-receipt,.cc-list-item__read-receipt{display:flex;justify-content:space-between}.cc-list-item__receipt{display:flex}cometchat-label{display:flex;align-items:center;justify-content:flex-start}.cc-empty-state-view{display:flex;align-items:flex-start;justify-content:center}\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.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: CometChatMessageInformationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cometchat-message-information', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-information__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-message-information__header\">\n    <div class=\"cc-message-information__title\">\n      <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"  ></cometchat-label>\n     </div>\n     <div class=\"cc-close-button\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n      </cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-message-information__bubble\">\n    <cometchat-label class=\"cc-message-information__caption\" [labelStyle]=\"getCaptionStyle()\" [text]=\"messageText\"></cometchat-label>\n   <div class=\"cc-message-information__bubble-view\">\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: message }\">\n    </ng-container>\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n   </div>\n  </div>\n  <div class=\"cc-message-information__list-item\">\n    <cometchat-label class=\"cc-message-information__caption\" [labelStyle]=\"getCaptionStyle()\" [text]=\"receiptInfoText\"></cometchat-label>\n    <div class=\"cc-message-information__bubble-view\" *ngIf=\"isUserType; else listView\">\n      <ng-container *ngIf=\"listItemView; else userListitem\">\n        <ng-container *ngTemplateOutlet=\"listItemView; context:{ $implicit: message }\">\n        </ng-container>\n      </ng-container>\n      <ng-template #userListitem>\n  <div *ngIf=\"!getUserReceipt(); else userReceiptView\" class=\"cc-empty-state-view\">\n <cometchat-label *ngIf=\"!emptyStateView else customEmptyView\" [text]=\"emptyStateText\" [labelStyle]=\"emptyLabelStyle\"></cometchat-label>\n <ng-template #customEmptyView>\n  <ng-container *ngTemplateOutlet=\"emptyStateView\">\n  </ng-container>\n </ng-template>\n  </div>\n  <ng-template #userReceiptView>\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-list-item [hideSeparator]=\"true\"\n    [id]=\"message.getId()\"\n     [title]=\"message.getReceiver().getName()\"\n    [listItemStyle]=\"listItemStyle\" [avatarURL]=\"getAvatarUrl()\" [avatarName]=\"message.getReceiver().getName()\">\n      <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n        <ng-container *ngTemplateOutlet=\"subtitleView\">\n        </ng-container>\n    </div>\n    <ng-template #userSubtitle>\n    <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n  <div class=\"cc-list-item__subtitle\">\n   <div class=\"cc-list-item__delivered-receipt\"  *ngIf=\"message.getDeliveredAt()\">\n  <div class=\"cc-list-item__receipt\">\n   <cometchat-receipt  [receipt]=\"deliveredReceipt\" [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"></cometchat-receipt>\n   <cometchat-label [text]=\"'Delivered'\" [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n  </div>\n     <cometchat-date  [timestamp]=\"message.getDeliveredAt()\" [dateStyle]=\"dateStyle\"></cometchat-date>\n   </div>\n    <div class=\"cc-list-item__read-receipt\" *ngIf=\"message.getReadAt()\">\n     <div class=\"cc-list-item__receipt\">\n       <cometchat-receipt  [receipt]=\"readReceipt\" [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"></cometchat-receipt>\n       <cometchat-label [text]=\"'Read'\" [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n      </div>\n      <cometchat-date  [timestamp]=\"message.getReadAt()\" [dateStyle]=\"dateStyle\"></cometchat-date>\n    </div>\n  </div>\n    </div>\n    </ng-template>\n    </cometchat-list-item>\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n  </ng-template>\n      </ng-template>\n    </div>\n  </div>\n</div>\n<!-- list item view -->\n<ng-template #listView>\n<cometchat-list\n[list]=\"receipts\"\n[listItemView]=\"listItemView ? listItemView : listItem\"\n[hideSearch]=\"true\"\n[state]=\"states\"\n[emptyStateText]=\"emptyStateText\"\n[errorStateText]=\"errorStateText\"\n[loadingIconURL]=\"loadingIconURL\"\n[loadingStateView]=\"loadingStateView\"\n[errorStateView]=\"errorStateView\"\n[emptyStateView]=\"emptyStateView\"\n[title]=\"''\"\n></cometchat-list>\n</ng-template>\n<ng-template #listItem let-messageReceipt>\n  <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n  <cometchat-list-item [hideSeparator]=\"true\"\n   [title]=\"messageReceipt.getSender().getName()\"\n  [listItemStyle]=\"listItemStyle\" [avatarURL]=\"messageReceipt.getSender()?.getAvatar()\" [avatarName]=\"messageReceipt.getSender().getName()\">\n    <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitleView\">\n      </ng-container>\n  </div>\n  <ng-template #userSubtitle>\n  <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n<div class=\"cc-list-item__subtitle\">\n <div class=\"cc-list-item__delivered-receipt\"  *ngIf=\"messageReceipt.getDeliveredAt()\">\n<div class=\"cc-list-item__receipt\">\n <cometchat-receipt  [receipt]=\"deliveredReceipt\" [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"></cometchat-receipt>\n <cometchat-label [text]=\"'Delivered'\"  [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n</div>\n   <cometchat-date  [timestamp]=\"messageReceipt.getDeliveredAt()\" [dateStyle]=\"dateStyle\" [pattern]=\"deliveredReceipt\" [customDateString]=\"getDatePattern(messageReceipt.getDeliveredAt())\"></cometchat-date>\n </div>\n  <div class=\"cc-list-item__read-receipt\" *ngIf=\"messageReceipt.getReadAt()\">\n   <div class=\"cc-list-item__receipt\">\n     <cometchat-receipt  [receipt]=\"readReceipt\" [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"></cometchat-receipt>\n     <cometchat-label [text]=\"'Read'\"  [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n    </div>\n    <cometchat-date [pattern]=\"readReceipt\" [timestamp]=\"messageReceipt.getReadAt()\" [dateStyle]=\"dateStyle\" [customDateString]=\"getDatePattern(messageReceipt.getReadAt())\"></cometchat-date>\n  </div>\n</div>\n  </div>\n  </ng-template>\n  </cometchat-list-item>\n  <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n</ng-template>", styles: [".cc-message-information__wrapper{height:500px;width:500px;background-color:#fff;padding:8px;display:flex;overflow:hidden;flex-direction:column}*{margin:0;padding:0;box-sizing:border-box}.cc-message-information__title{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}.cc-close-button{padding:8px 0}.cc-message-information__header{display:flex;flex-direction:row;justify-content:flex-end}.cc-message-information__bubble-header{display:flex;align-items:flex-start;justify-content:flex-start;padding-bottom:2px}.cc-message-information__bubble-view{overflow-y:auto;max-height:150px;overflow-x:hidden}.cc-message-information__bubble,.cc-message-information__list-item{margin:8px 0;overflow:hidden}.cc-list-item__delivered-receipt,.cc-list-item__read-receipt{display:flex;justify-content:space-between}.cc-list-item__receipt{display:flex}cometchat-label{display:flex;align-items:center;justify-content:flex-start}.cc-empty-state-view{display:flex;align-items:flex-start;justify-content:center}\n"] }]
+            args: [{ selector: 'cometchat-message-information', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-information__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-message-information__header\">\n    <div class=\"cc-message-information__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    </div>\n    <div class=\"cc-close-button\">\n      <cometchat-button [iconURL]=\"closeIconURL\"\n        [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n      </cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-message-information__bubble\">\n    <cometchat-label class=\"cc-message-information__caption\"\n      [labelStyle]=\"getCaptionStyle()\" [text]=\"messageText\"></cometchat-label>\n    <div class=\"cc-message-information__bubble-view\">\n      <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n      <ng-container\n        *ngTemplateOutlet=\"bubbleView; context:{ $implicit: message }\">\n      </ng-container>\n      <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    </div>\n  </div>\n  <div class=\"cc-message-information__list-item\">\n    <cometchat-label class=\"cc-message-information__caption\"\n      [labelStyle]=\"getCaptionStyle()\"\n      [text]=\"receiptInfoText\"></cometchat-label>\n    <div class=\"cc-message-information__bubble-view\"\n      *ngIf=\"isUserType; else listView\">\n      <ng-container *ngIf=\"listItemView; else userListitem\">\n        <ng-container\n          *ngTemplateOutlet=\"listItemView; context:{ $implicit: message }\">\n        </ng-container>\n      </ng-container>\n      <ng-template #userListitem>\n        <div *ngIf=\"!getUserReceipt(); else userReceiptView\"\n          class=\"cc-empty-state-view\">\n          <cometchat-label *ngIf=\"!emptyStateView else customEmptyView\"\n            [text]=\"emptyStateText\"\n            [labelStyle]=\"emptyLabelStyle\"></cometchat-label>\n          <ng-template #customEmptyView>\n            <ng-container *ngTemplateOutlet=\"emptyStateView\">\n            </ng-container>\n          </ng-template>\n        </div>\n        <ng-template #userReceiptView>\n          <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n          <cometchat-list-item [hideSeparator]=\"true\" [id]=\"message.getId()\"\n            [title]=\"message.getReceiver().getName()\"\n            [listItemStyle]=\"listItemStyle\" [avatarURL]=\"getAvatarUrl()\"\n            [avatarName]=\"message.getReceiver().getName()\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n              <ng-container *ngTemplateOutlet=\"subtitleView\">\n              </ng-container>\n            </div>\n            <ng-template #userSubtitle>\n              <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n                <div class=\"cc-list-item__subtitle\">\n                  <div class=\"cc-list-item__delivered-receipt\"\n                    *ngIf=\"message.getDeliveredAt()\">\n                    <div class=\"cc-list-item__receipt\">\n                      <cometchat-receipt [receipt]=\"deliveredReceipt\"\n                        [receiptStyle]=\"receiptStyle\"\n                        [deliveredIcon]=\"deliveredIcon\"\n                        [readIcon]=\"readIcon\"></cometchat-receipt>\n                      <cometchat-label [text]=\"'Delivered'\"\n                        [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n                    </div>\n                    <cometchat-date [timestamp]=\"message.getDeliveredAt()\"\n                      [dateStyle]=\"dateStyle\"></cometchat-date>\n                  </div>\n                  <div class=\"cc-list-item__read-receipt\"\n                    *ngIf=\"message.getReadAt()\">\n                    <div class=\"cc-list-item__receipt\">\n                      <cometchat-receipt [receipt]=\"readReceipt\"\n                        [receiptStyle]=\"receiptStyle\"\n                        [deliveredIcon]=\"deliveredIcon\"\n                        [readIcon]=\"readIcon\"></cometchat-receipt>\n                      <cometchat-label [text]=\"'Read'\"\n                        [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n                    </div>\n                    <cometchat-date [timestamp]=\"message.getReadAt()\"\n                      [dateStyle]=\"dateStyle\"></cometchat-date>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </cometchat-list-item>\n          <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n        </ng-template>\n      </ng-template>\n    </div>\n  </div>\n</div>\n<!-- list item view -->\n<ng-template #listView>\n  <cometchat-list [list]=\"receipts\"\n    [listItemView]=\"listItemView ? listItemView : listItem\" [hideSearch]=\"true\"\n    [state]=\"states\" [emptyStateText]=\"emptyStateText\"\n    [errorStateText]=\"errorStateText\" [loadingIconURL]=\"loadingIconURL\"\n    [loadingStateView]=\"loadingStateView\" [errorStateView]=\"errorStateView\"\n    [emptyStateView]=\"emptyStateView\" [title]=\"''\"></cometchat-list>\n</ng-template>\n<ng-template #listItem let-messageReceipt>\n  <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n  <cometchat-list-item [hideSeparator]=\"true\"\n    [title]=\"messageReceipt.getSender().getName()\"\n    [listItemStyle]=\"listItemStyle\"\n    [avatarURL]=\"messageReceipt.getSender()?.getAvatar()\"\n    [avatarName]=\"messageReceipt.getSender().getName()\">\n    <div slot=\"subtitleView\" *ngIf=\"subtitleView;else userSubtitle\">\n      <ng-container *ngTemplateOutlet=\"subtitleView\">\n      </ng-container>\n    </div>\n    <ng-template #userSubtitle>\n      <div class=\"cc-list-item__subtitle-view \" slot=\"subtitleView\">\n        <div class=\"cc-list-item__subtitle\">\n          <div class=\"cc-list-item__delivered-receipt\"\n            *ngIf=\"messageReceipt.getDeliveredAt()\">\n            <div class=\"cc-list-item__receipt\">\n              <cometchat-receipt [receipt]=\"deliveredReceipt\"\n                [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\"\n                [readIcon]=\"readIcon\"></cometchat-receipt>\n              <cometchat-label [text]=\"'Delivered'\"\n                [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n            </div>\n            <cometchat-date [timestamp]=\"messageReceipt.getDeliveredAt()\"\n              [dateStyle]=\"dateStyle\"></cometchat-date>\n          </div>\n          <div class=\"cc-list-item__read-receipt\"\n            *ngIf=\"messageReceipt.getReadAt()\">\n            <div class=\"cc-list-item__receipt\">\n              <cometchat-receipt [receipt]=\"readReceipt\"\n                [receiptStyle]=\"receiptStyle\" [deliveredIcon]=\"deliveredIcon\"\n                [readIcon]=\"readIcon\"></cometchat-receipt>\n              <cometchat-label [text]=\"'Read'\"\n                [labelStyle]=\"getSubtitleStyle()\"></cometchat-label>\n            </div>\n            <cometchat-date [timestamp]=\"messageReceipt.getReadAt()\"\n              [dateStyle]=\"dateStyle\"></cometchat-date>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </cometchat-list-item>\n  <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n</ng-template>\n", styles: [".cc-message-information__wrapper{height:500px;width:500px;background-color:#fff;padding:8px;display:flex;overflow:hidden;flex-direction:column}*{margin:0;padding:0;box-sizing:border-box}.cc-message-information__title{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}.cc-close-button{padding:8px 0}.cc-message-information__header{display:flex;flex-direction:row;justify-content:flex-end}.cc-message-information__bubble-header{display:flex;align-items:flex-start;justify-content:flex-start;padding-bottom:2px}.cc-message-information__bubble-view{overflow-y:auto;max-height:150px;overflow-x:hidden}.cc-message-information__bubble,.cc-message-information__list-item{margin:8px 0;overflow:hidden}.cc-list-item__delivered-receipt,.cc-list-item__read-receipt{display:flex;justify-content:space-between}.cc-list-item__receipt{display:flex}cometchat-label{display:flex;align-items:center;justify-content:flex-start}.cc-empty-state-view{display:flex;align-items:flex-start;justify-content:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { closeIconURL: [{
                 type: Input
             }], message: [{
@@ -8306,6 +8398,7 @@ class CometChatMessageListComponent {
         this.ref = ref;
         this.themeService = themeService;
         this.hideError = false;
+        this.hideDateSeparator = false;
         this.errorStateText = localize("SOMETHING_WRONG");
         this.emptyStateText = localize("NO_MESSAGES_FOUND");
         this.loadingIconURL = "assets/Spinner.svg";
@@ -8349,7 +8442,7 @@ class CometChatMessageListComponent {
             width: "",
         };
         this.messageListStyle = {
-            nameTextFont: "600 15px Inter",
+            nameTextFont: "400 11px Inter",
             emptyStateTextFont: "700 22px Inter",
             errorStateTextFont: "700 22px Inter",
         };
@@ -10135,6 +10228,8 @@ class CometChatMessageListComponent {
             this.onCustomInteractiveMessageReceived?.unsubscribe();
             this.onMessagesDelivered?.unsubscribe();
             this.onMessagesRead?.unsubscribe();
+            this.onMessagesDeliveredToAll?.unsubscribe();
+            this.onMessagesReadByAll?.unsubscribe();
             this.onMessageDeleted?.unsubscribe();
             this.onMessageEdited?.unsubscribe();
             this.onTransientMessageReceived?.unsubscribe();
@@ -11026,6 +11121,9 @@ class CometChatMessageListComponent {
                 this.themeService.theme.palette.getAccent600();
         this.dividerStyle.background =
             this.themeService.theme.palette.getAccent100();
+        this.labelStyle.textColor = this.messageListStyle.nameTextColor || this.labelStyle.textColor;
+        this.labelStyle.textFont = this.messageListStyle.nameTextFont || this.labelStyle.textFont;
+        this.loadingStyle.iconTint = this.messageListStyle.loadingIconTint || this.loadingStyle.iconTint;
     }
     setAvatarStyle() {
         let defaultStyle = new AvatarStyle({
@@ -11123,7 +11221,7 @@ class CometChatMessageListComponent {
             errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
             errorStateTextColor: this.themeService.theme.palette.getAccent600(),
             loadingIconTint: this.themeService.theme.palette.getAccent600(),
-            nameTextFont: fontHelper(this.themeService.theme.typography.title2),
+            nameTextFont: fontHelper(this.themeService.theme.typography.caption2),
             nameTextColor: this.themeService.theme.palette.getAccent600(),
             threadReplyTextFont: fontHelper(this.themeService.theme.typography.text2),
             threadReplyIconTint: this.themeService.theme.palette.getAccent500(),
@@ -11431,10 +11529,24 @@ class CometChatMessageListComponent {
                 });
             this.onMessagesDelivered =
                 CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
-                    this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELIVERED, messageReceipt);
+                    if (messageReceipt.getReceiptType() == CometChatUIKitConstants.MessageReceiverType.user) {
+                        this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELIVERED, messageReceipt);
+                    }
                 });
             this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
-                this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_READ, messageReceipt);
+                if (messageReceipt.getReceiptType() == CometChatUIKitConstants.MessageReceiverType.user) {
+                    this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_READ, messageReceipt);
+                }
+            });
+            this.onMessagesReadByAll = CometChatMessageEvents.onMessagesReadByAll.subscribe((messageReceipt) => {
+                if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group) {
+                    this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_READ, messageReceipt);
+                }
+            });
+            this.onMessagesDeliveredToAll = CometChatMessageEvents.onMessagesDeliveredToAll.subscribe((messageReceipt) => {
+                if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.group) {
+                    this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELIVERED, messageReceipt);
+                }
             });
             this.onMessageDeleted = CometChatMessageEvents.onMessageDeleted.subscribe((deletedMessage) => {
                 this.messageUpdate(CometChatUIKitConstants.messages.MESSAGE_DELETED, deletedMessage);
@@ -11693,10 +11805,7 @@ class CometChatMessageListComponent {
     }
     messageReadAndDelivered(message) {
         try {
-            if (message.getReceiverType() ==
-                CometChatUIKitConstants.MessageReceiverType.user &&
-                message?.getSender().getUid() == this.user?.getUid() &&
-                message.getReceiver() == this.loggedInUser?.getUid()) {
+            if (message.getSender().getUid() == this.loggedInUser?.getUid()) {
                 if (message.getReceiptType() == CometChatUIKitConstants.messages.DELIVERY) {
                     //search for message
                     let messageKey = this.messagesList.findIndex((m) => m.getId() == Number(message.getMessageId()));
@@ -11704,25 +11813,15 @@ class CometChatMessageListComponent {
                         this.messagesList[messageKey].setDeliveredAt(message.getDeliveredAt());
                         this.ref.detectChanges();
                     }
-                    // this.ref.detectChanges();
                     this.markAllMessagAsDelivered(messageKey);
                 }
                 else if (message.getReceiptType() == CometChatUIKitConstants.messages.READ) {
                     //search for message
                     let messageKey = this.messagesList.findIndex((m) => m.getId() == Number(message.getMessageId()));
-                    if (messageKey > -1) {
-                        this.messagesList[messageKey].setReadAt(message?.getReadAt());
-                        this.ref.detectChanges();
-                    }
                     this.ref.detectChanges();
                     this.markAllMessagAsRead(messageKey);
                 }
             }
-            else if (message.getReceiverType() ===
-                CometChatUIKitConstants.MessageReceiverType.group &&
-                message.getReceiver() === this.group?.getGuid()) {
-                return;
-            }
         }
         catch (error) {
             if (this.onError) {
@@ -12390,10 +12489,10 @@ class CometChatMessageListComponent {
     }
 }
 CometChatMessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: { hideError: "hideError", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", user: "user", group: "group", disableReceipt: "disableReceipt", disableSoundForMessages: "disableSoundForMessages", customSoundForMessages: "customSoundForMessages", readIcon: "readIcon", deliveredIcon: "deliveredIcon", sentIcon: "sentIcon", waitIcon: "waitIcon", errorIcon: "errorIcon", aiErrorIcon: "aiErrorIcon", aiEmptyIcon: "aiEmptyIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", unreadMessageThreshold: "unreadMessageThreshold", reactionsConfiguration: "reactionsConfiguration", disableReactions: "disableReactions", emojiKeyboardStyle: "emojiKeyboardStyle", apiConfiguration: "apiConfiguration", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", threadIndicatorIcon: "threadIndicatorIcon", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError", messageInformationConfiguration: "messageInformationConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, viewQueries: [{ propertyName: "listScroll", first: true, predicate: ["listScroll"], descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "top", first: true, predicate: ["top"], descendants: true }, { propertyName: "textBubble", first: true, predicate: ["textBubble"], descendants: true }, { propertyName: "threadMessageBubble", first: true, predicate: ["threadMessageBubble"], descendants: true }, { propertyName: "fileBubble", first: true, predicate: ["fileBubble"], descendants: true }, { propertyName: "audioBubble", first: true, predicate: ["audioBubble"], descendants: true }, { propertyName: "videoBubble", first: true, predicate: ["videoBubble"], descendants: true }, { propertyName: "imageBubble", first: true, predicate: ["imageBubble"], descendants: true }, { propertyName: "formBubble", first: true, predicate: ["formBubble"], descendants: true }, { propertyName: "cardBubble", first: true, predicate: ["cardBubble"], descendants: true }, { propertyName: "stickerBubble", first: true, predicate: ["stickerBubble"], descendants: true }, { propertyName: "documentBubble", first: true, predicate: ["documentBubble"], descendants: true }, { propertyName: "whiteboardBubble", first: true, predicate: ["whiteboardBubble"], descendants: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true }, { propertyName: "directCalling", first: true, predicate: ["directCalling"], descendants: true }, { propertyName: "schedulerBubble", first: true, predicate: ["schedulerBubble"], descendants: true }, { propertyName: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }, { propertyName: "messageBubbleRef", predicate: ["messageBubbleRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n  *ngIf=\"!openContactsView\">\n\n  <div class=\"cc-message-list__header-view\">\n    <div *ngIf=\"headerView\">\n      <ng-container *ngTemplateOutlet=\"headerView\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-message-list\" #listScroll\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\"\n        *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\"\n          [loaderStyle]=\"loadingStyle\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\"\n          *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\"\n        *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *ngIf=\"state == states.error  && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <span class=\"cc-message-list__custom-view--empty\"\n          *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\"\n      *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message?.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div *ngIf=\"getBubbleWrapper(message)\">\n        <ng-container\n          *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <div *ngIf=\"!getBubbleWrapper(message)\" #messageBubbleRef\n        [id]=\"message?.getId()\">\n        <cometchat-message-bubble\n          [leadingView]=\" showAvatar ? leadingView : null\"\n          [bottomView]=\"getBottomView(message)\"\n          [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [footerView]=\"getFooterView(message) || reactionView\"\n          [contentView]=\"contentView\" [threadView]=\"threadView\"\n          [id]=\"message?.getId() || message?.getMuid()\"\n          [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n          [alignment]=\"setBubbleAlignment(message)\">\n          <ng-template #contentView>\n            <ng-container\n              *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #reactionView>\n            <cometchat-reactions\n              *ngIf=\"message.getReactions() && message.getReactions().length > 0 && !disableReactions\"\n              [messageObject]=\"getClonedReactionObject(message)\"\n              [alignment]=\"setBubbleAlignment(message)\"\n              [reactionsStyle]=\"getReactionsStyle()\"\n              [reactionClick]=\"addReactionOnClick\"\n              [reactionListConfiguration]=\"getReactionListConfiguration()\"\n              [reactionInfoConfiguration]=\"getReactionInfoConfiguration()\"></cometchat-reactions>\n          </ng-template>\n          <ng-template #statusInfoView>\n            <div class=\"cc-message-list__bubble-status-info\"\n              [ngStyle]=\"getStatusInfoStyle(message)\">\n              <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n                <ng-container\n                  *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n                </ng-container>\n              </div>\n              <ng-template #bubbleFooter>\n                <div class=\"cc-message-list__bubble-date\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\"\n                    [dateStyle]=\"getBubbleDateStyle(message)\"\n                    [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n                    [receiptStyle]=\"getReceiptStyle(message)\"\n                    [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\"\n                    [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n                    [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                </div>\n              </ng-template>\n            </div>\n          </ng-template>\n          <ng-template #leadingView>\n            <div\n              *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\">\n              <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n                [avatarStyle]=\"avatarStyle\"\n                [image]=\"message?.getSender()?.getAvatar()\">\n              </cometchat-avatar>\n            </div>\n          </ng-template>\n          <ng-template #bubbleHeader>\n            <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n              <ng-container\n                *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n              </ng-container>\n            </div>\n            <ng-template #defaultHeader>\n              <div class=\"cc-message-list__bubble-header\"\n                *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n                <cometchat-label [text]=\"message?.getSender()?.getName()\"\n                  [labelStyle]=\"labelStyle\"></cometchat-label>\n                <cometchat-date [pattern]=\"datePattern\"\n                  [timestamp]=\"message?.getSentAt()\"\n                  [dateStyle]=\"getBubbleDateStyle(message)\"\n                  *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n              </div>\n            </ng-template>\n          </ng-template>\n          <ng-template #threadView>\n            <div class=\"cc-message-list__threadreplies\"\n              *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\"\n              [ngStyle]=\"getThreadViewAlignment(message)\">\n              <cometchat-icon-button [iconURL]=\"threadIndicatorIcon\"\n                [mirrorIcon]=\"getThreadIconAlignment(message)\"\n                [buttonStyle]=\"getThreadViewStyle(message)\"\n                (cc-button-clicked)=\"openThreadView(message)\"\n                [text]='getThreadCount(message)'>\n                <!-- <span slot=\"buttonView\" [ngStyle]=\"getUnreadRepliesCountStyle()\"\n                  class=\"cc-message-list__unread-thread\"\n                  *ngIf=\"!message.getDeletedAt() && message.getUnreadReplyCount() > 0\">\n                  {{message.getUnreadReplyCount()}}\n                </span> -->\n\n              </cometchat-icon-button>\n            </div>\n          </ng-template>\n        </cometchat-message-bubble>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\"\n    *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\"\n      [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\"\n        *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n          [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n          (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\"\n        *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\"\n          [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\"\n          [errorStateText]=\"errorStateText\">\n          <smart-replies\n            *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\"\n            [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\"\n            [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\"\n        *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\"\n          [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\"\n          [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel\n            *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n            slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n            title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\n    </ng-template>\n  </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble\n    *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n  <cometchat-text-bubble\n    *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n    [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n    (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\"\n    [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\"\n    [image]=\"getLinkPreviewDetails('image',message)\"\n    [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n    <cometchat-text-bubble\n      *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  </link-preview>\n  <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n    *ngIf=\"isTranslated(message)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\"\n    [translatedText]=\"isTranslated(message)\"\n    [textFormatters]=\"getTextFormatters(message)\">\n    <cometchat-text-bubble\n      *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n\n  </message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\"\n    [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n    [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n  </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n      [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n      [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n    (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n    [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\"\n    [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\"\n    [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\"\n    [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [buttonText]=\"whiteboardButtonText\"\n    [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [buttonText]=\"documentButtonText\"\n    [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n  <cometchat-document-bubble [hideSeparator]=\"true\"\n    [iconAlignment]=\"callBubbleAlignment\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n    [ccClicked]=\"getStartCallFunction(message)\" [iconURL]=\"directCallIconURL\"\n    [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n    *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n  <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n    [loggedInUser]=\"loggedInUser\"\n    [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n    [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n    [senderUid]=\"getPollBubbleData(message)\"\n    [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [footerView]=\"getFooterView(message)\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #statusInfoView>\n      <div class=\"cc-message-list__bubble-status-info\"\n        [ngStyle]=\"getStatusInfoStyle(message)\">\n        <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n          <ng-container\n            *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\"\n            *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"getBubbleDateStyle(message)\" [pattern]=\"datePattern\">\n            </cometchat-date>\n          </div>\n          <div\n            *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n              [receiptStyle]=\"getReceiptStyle(message)\" [waitIcon]=\"waitIcon\"\n              [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n              [readIcon]=\"deliveredIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<cometchat-popover [popoverStyle]=\"popoverStyle\" #popoverRef\n  [placement]=\"keyboardAlignment\">\n  <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n    slot=\"content\"\n    [emojiKeyboardStyle]=\"emojiKeyboardStyle\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n    (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n    [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n  *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n  [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n  [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n  [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"getStatusInfoView(message)\"\n    [footerView]=\"getFooterView(message)\"\n    [leadingView]=\"showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information\n    [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n    [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n    [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden}.cc-message-list__bubble-status-info{display:flex;align-items:flex-end;width:100%;padding:0 8px 8px;box-sizing:border-box}cometchat-reactions{margin-top:-3px}.cc-message-list__unread-thread{margin-left:4px}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%;padding-top:4px;display:flex}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%;box-sizing:border-box;margin-bottom:1px}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}.cc-message-list__bubble-reactions{width:100%;box-sizing:border-box}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "statusInfoView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: ["closeIconURL", "message", "title", "template", "bubbleView", "subtitleView", "listItemView", "receiptDatePattern", "onError", "messageInformationStyle", "readIcon", "deliveredIcon", "onClose", "listItemStyle", "emptyStateText", "errorStateText", "emptyStateView", "loadingIconURL", "loadingStateView", "errorStateView"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: { hideError: "hideError", hideDateSeparator: "hideDateSeparator", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", user: "user", group: "group", disableReceipt: "disableReceipt", disableSoundForMessages: "disableSoundForMessages", customSoundForMessages: "customSoundForMessages", readIcon: "readIcon", deliveredIcon: "deliveredIcon", sentIcon: "sentIcon", waitIcon: "waitIcon", errorIcon: "errorIcon", aiErrorIcon: "aiErrorIcon", aiEmptyIcon: "aiEmptyIcon", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", unreadMessageThreshold: "unreadMessageThreshold", reactionsConfiguration: "reactionsConfiguration", disableReactions: "disableReactions", emojiKeyboardStyle: "emojiKeyboardStyle", apiConfiguration: "apiConfiguration", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", threadIndicatorIcon: "threadIndicatorIcon", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError", messageInformationConfiguration: "messageInformationConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, viewQueries: [{ propertyName: "listScroll", first: true, predicate: ["listScroll"], descendants: true }, { propertyName: "bottom", first: true, predicate: ["bottom"], descendants: true }, { propertyName: "top", first: true, predicate: ["top"], descendants: true }, { propertyName: "textBubble", first: true, predicate: ["textBubble"], descendants: true }, { propertyName: "threadMessageBubble", first: true, predicate: ["threadMessageBubble"], descendants: true }, { propertyName: "fileBubble", first: true, predicate: ["fileBubble"], descendants: true }, { propertyName: "audioBubble", first: true, predicate: ["audioBubble"], descendants: true }, { propertyName: "videoBubble", first: true, predicate: ["videoBubble"], descendants: true }, { propertyName: "imageBubble", first: true, predicate: ["imageBubble"], descendants: true }, { propertyName: "formBubble", first: true, predicate: ["formBubble"], descendants: true }, { propertyName: "cardBubble", first: true, predicate: ["cardBubble"], descendants: true }, { propertyName: "stickerBubble", first: true, predicate: ["stickerBubble"], descendants: true }, { propertyName: "documentBubble", first: true, predicate: ["documentBubble"], descendants: true }, { propertyName: "whiteboardBubble", first: true, predicate: ["whiteboardBubble"], descendants: true }, { propertyName: "popoverRef", first: true, predicate: ["popoverRef"], descendants: true }, { propertyName: "directCalling", first: true, predicate: ["directCalling"], descendants: true }, { propertyName: "schedulerBubble", first: true, predicate: ["schedulerBubble"], descendants: true }, { propertyName: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }, { propertyName: "messageBubbleRef", predicate: ["messageBubbleRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n  *ngIf=\"!openContactsView\">\n\n  <div class=\"cc-message-list__header-view\">\n    <div *ngIf=\"headerView\">\n      <ng-container *ngTemplateOutlet=\"headerView\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-message-list\" #listScroll\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\"\n        *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\"\n          [loaderStyle]=\"loadingStyle\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\"\n          *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\"\n        *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *ngIf=\"state == states.error  && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <span class=\"cc-message-list__custom-view--empty\"\n          *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\"\n      *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i === 0) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message?.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div *ngIf=\"getBubbleWrapper(message)\">\n        <ng-container\n          *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <div *ngIf=\"!getBubbleWrapper(message)\" #messageBubbleRef\n        [id]=\"message?.getId()\">\n        <cometchat-message-bubble\n          [leadingView]=\" showAvatar ? leadingView : null\"\n          [bottomView]=\"getBottomView(message)\"\n          [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [footerView]=\"getFooterView(message) || reactionView\"\n          [contentView]=\"contentView\" [threadView]=\"threadView\"\n          [id]=\"message?.getId() || message?.getMuid()\"\n          [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n          [alignment]=\"setBubbleAlignment(message)\">\n          <ng-template #contentView>\n            <ng-container\n              *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #reactionView>\n            <cometchat-reactions\n              *ngIf=\"message.getReactions() && message.getReactions().length > 0 && !disableReactions\"\n              [messageObject]=\"getClonedReactionObject(message)\"\n              [alignment]=\"setBubbleAlignment(message)\"\n              [reactionsStyle]=\"getReactionsStyle()\"\n              [reactionClick]=\"addReactionOnClick\"\n              [reactionListConfiguration]=\"getReactionListConfiguration()\"\n              [reactionInfoConfiguration]=\"getReactionInfoConfiguration()\"></cometchat-reactions>\n          </ng-template>\n          <ng-template #statusInfoView>\n            <div class=\"cc-message-list__bubble-status-info\"\n              [ngStyle]=\"getStatusInfoStyle(message)\">\n              <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n                <ng-container\n                  *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n                </ng-container>\n              </div>\n              <ng-template #bubbleFooter>\n                <div class=\"cc-message-list__bubble-date\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\"\n                    [dateStyle]=\"getBubbleDateStyle(message)\"\n                    [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() || this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n                    [receiptStyle]=\"getReceiptStyle(message)\"\n                    [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\"\n                    [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n                    [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                </div>\n              </ng-template>\n            </div>\n          </ng-template>\n          <ng-template #leadingView>\n            <div\n              *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\">\n              <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n                [avatarStyle]=\"avatarStyle\"\n                [image]=\"message?.getSender()?.getAvatar()\">\n              </cometchat-avatar>\n            </div>\n          </ng-template>\n          <ng-template #bubbleHeader>\n            <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n              <ng-container\n                *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n              </ng-container>\n            </div>\n            <ng-template #defaultHeader>\n              <div class=\"cc-message-list__bubble-header\"\n                *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n                <cometchat-label [text]=\"message?.getSender()?.getName()\"\n                  [labelStyle]=\"labelStyle\"></cometchat-label>\n                <cometchat-date [pattern]=\"datePattern\"\n                  [timestamp]=\"message?.getSentAt()\"\n                  [dateStyle]=\"getBubbleDateStyle(message)\"\n                  *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n              </div>\n            </ng-template>\n          </ng-template>\n          <ng-template #threadView>\n            <div class=\"cc-message-list__threadreplies\"\n              *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\"\n              [ngStyle]=\"getThreadViewAlignment(message)\">\n              <cometchat-icon-button [iconURL]=\"threadIndicatorIcon\"\n                [mirrorIcon]=\"getThreadIconAlignment(message)\"\n                [buttonStyle]=\"getThreadViewStyle(message)\"\n                (cc-button-clicked)=\"openThreadView(message)\"\n                [text]='getThreadCount(message)'>\n                <!-- <span slot=\"buttonView\" [ngStyle]=\"getUnreadRepliesCountStyle()\"\n                  class=\"cc-message-list__unread-thread\"\n                  *ngIf=\"!message.getDeletedAt() && message.getUnreadReplyCount() > 0\">\n                  {{message.getUnreadReplyCount()}}\n                </span> -->\n\n              </cometchat-icon-button>\n            </div>\n          </ng-template>\n        </cometchat-message-bubble>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\"\n    *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\"\n      [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\"\n        *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n          [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n          (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\"\n        *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\"\n          [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\"\n          [errorStateText]=\"errorStateText\">\n          <smart-replies\n            *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\"\n            [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\"\n            [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\"\n        *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\"\n          [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\"\n          [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel\n            *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n            slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n            title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\n    </ng-template>\n  </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble\n    *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n  <cometchat-text-bubble\n    *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n    [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n    (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\"\n    [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\"\n    [image]=\"getLinkPreviewDetails('image',message)\"\n    [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n    <cometchat-text-bubble\n      *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  </link-preview>\n  <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n    *ngIf=\"isTranslated(message)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\"\n    [translatedText]=\"isTranslated(message)\"\n    [textFormatters]=\"getTextFormatters(message)\">\n    <cometchat-text-bubble\n      *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n\n  </message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\"\n    [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n    [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n  </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n      [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n      [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n    (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n    [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\"\n    [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\"\n    [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\"\n    [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [buttonText]=\"whiteboardButtonText\"\n    [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [buttonText]=\"documentButtonText\"\n    [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n  <cometchat-document-bubble [hideSeparator]=\"true\"\n    [iconAlignment]=\"callBubbleAlignment\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n    [ccClicked]=\"getStartCallFunction(message)\" [iconURL]=\"directCallIconURL\"\n    [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n    *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n  <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n    [loggedInUser]=\"loggedInUser\"\n    [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n    [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n    [senderUid]=\"getPollBubbleData(message)\"\n    [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [footerView]=\"getFooterView(message)\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #statusInfoView>\n      <div class=\"cc-message-list__bubble-status-info\"\n        [ngStyle]=\"getStatusInfoStyle(message)\">\n        <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n          <ng-container\n            *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\"\n            *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"getBubbleDateStyle(message)\" [pattern]=\"datePattern\">\n            </cometchat-date>\n          </div>\n          <div\n            *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() || this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n              [receiptStyle]=\"getReceiptStyle(message)\" [waitIcon]=\"waitIcon\"\n              [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n              [readIcon]=\"deliveredIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<cometchat-popover [popoverStyle]=\"popoverStyle\" #popoverRef\n  [placement]=\"keyboardAlignment\">\n  <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n    slot=\"content\"\n    [emojiKeyboardStyle]=\"emojiKeyboardStyle\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n    (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n    [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n  *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n  [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n  [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n  [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"getStatusInfoView(message)\"\n    [footerView]=\"getFooterView(message)\"\n    [leadingView]=\"showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information\n    [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n    [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n    [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden}.cc-message-list__bubble-status-info{display:flex;align-items:flex-end;width:100%;padding:0 8px 8px;box-sizing:border-box}cometchat-reactions{margin-top:-3px}.cc-message-list__unread-thread{margin-left:4px}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%;padding-top:4px;display:flex}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%;box-sizing:border-box;margin-bottom:1px}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}.cc-message-list__bubble-reactions{width:100%;box-sizing:border-box}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "statusInfoView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder", "callWorkflow", "onError"] }, { type: CometChatMessageInformationComponent, selector: "cometchat-message-information", inputs: ["closeIconURL", "message", "title", "template", "bubbleView", "subtitleView", "listItemView", "receiptDatePattern", "onError", "messageInformationStyle", "readIcon", "deliveredIcon", "onClose", "listItemStyle", "emptyStateText", "errorStateText", "emptyStateView", "loadingIconURL", "loadingStateView", "errorStateView"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n  *ngIf=\"!openContactsView\">\n\n  <div class=\"cc-message-list__header-view\">\n    <div *ngIf=\"headerView\">\n      <ng-container *ngTemplateOutlet=\"headerView\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-message-list\" #listScroll\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\"\n        *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\"\n          [loaderStyle]=\"loadingStyle\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\"\n          *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\"\n        *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *ngIf=\"state == states.error  && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <span class=\"cc-message-list__custom-view--empty\"\n          *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\"\n      *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i === 0) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt()\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message?.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div *ngIf=\"getBubbleWrapper(message)\">\n        <ng-container\n          *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <div *ngIf=\"!getBubbleWrapper(message)\" #messageBubbleRef\n        [id]=\"message?.getId()\">\n        <cometchat-message-bubble\n          [leadingView]=\" showAvatar ? leadingView : null\"\n          [bottomView]=\"getBottomView(message)\"\n          [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [footerView]=\"getFooterView(message) || reactionView\"\n          [contentView]=\"contentView\" [threadView]=\"threadView\"\n          [id]=\"message?.getId() || message?.getMuid()\"\n          [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n          [alignment]=\"setBubbleAlignment(message)\">\n          <ng-template #contentView>\n            <ng-container\n              *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #reactionView>\n            <cometchat-reactions\n              *ngIf=\"message.getReactions() && message.getReactions().length > 0 && !disableReactions\"\n              [messageObject]=\"getClonedReactionObject(message)\"\n              [alignment]=\"setBubbleAlignment(message)\"\n              [reactionsStyle]=\"getReactionsStyle()\"\n              [reactionClick]=\"addReactionOnClick\"\n              [reactionListConfiguration]=\"getReactionListConfiguration()\"\n              [reactionInfoConfiguration]=\"getReactionInfoConfiguration()\"></cometchat-reactions>\n          </ng-template>\n          <ng-template #statusInfoView>\n            <div class=\"cc-message-list__bubble-status-info\"\n              [ngStyle]=\"getStatusInfoStyle(message)\">\n              <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n                <ng-container\n                  *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n                </ng-container>\n              </div>\n              <ng-template #bubbleFooter>\n                <div class=\"cc-message-list__bubble-date\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\"\n                    [dateStyle]=\"getBubbleDateStyle(message)\"\n                    [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n                    [receiptStyle]=\"getReceiptStyle(message)\"\n                    [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\"\n                    [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n                    [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                </div>\n              </ng-template>\n            </div>\n          </ng-template>\n          <ng-template #leadingView>\n            <div\n              *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\">\n              <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n                [avatarStyle]=\"avatarStyle\"\n                [image]=\"message?.getSender()?.getAvatar()\">\n              </cometchat-avatar>\n            </div>\n          </ng-template>\n          <ng-template #bubbleHeader>\n            <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n              <ng-container\n                *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n              </ng-container>\n            </div>\n            <ng-template #defaultHeader>\n              <div class=\"cc-message-list__bubble-header\"\n                *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n                <cometchat-label [text]=\"message?.getSender()?.getName()\"\n                  [labelStyle]=\"labelStyle\"></cometchat-label>\n                <cometchat-date [pattern]=\"datePattern\"\n                  [timestamp]=\"message?.getSentAt()\"\n                  [dateStyle]=\"getBubbleDateStyle(message)\"\n                  *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n              </div>\n            </ng-template>\n          </ng-template>\n          <ng-template #threadView>\n            <div class=\"cc-message-list__threadreplies\"\n              *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\"\n              [ngStyle]=\"getThreadViewAlignment(message)\">\n              <cometchat-icon-button [iconURL]=\"threadIndicatorIcon\"\n                [mirrorIcon]=\"getThreadIconAlignment(message)\"\n                [buttonStyle]=\"getThreadViewStyle(message)\"\n                (cc-button-clicked)=\"openThreadView(message)\"\n                [text]='getThreadCount(message)'>\n                <!-- <span slot=\"buttonView\" [ngStyle]=\"getUnreadRepliesCountStyle()\"\n                  class=\"cc-message-list__unread-thread\"\n                  *ngIf=\"!message.getDeletedAt() && message.getUnreadReplyCount() > 0\">\n                  {{message.getUnreadReplyCount()}}\n                </span> -->\n\n              </cometchat-icon-button>\n            </div>\n          </ng-template>\n        </cometchat-message-bubble>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\"\n    *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\"\n      [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\"\n        *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n          [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n          (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\"\n        *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\"\n          [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\"\n          [errorStateText]=\"errorStateText\">\n          <smart-replies\n            *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\"\n            [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\"\n            [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\"\n        *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\"\n          [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\"\n          [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel\n            *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n            slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n            title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\n    </ng-template>\n  </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble\n    *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n  <cometchat-text-bubble\n    *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n    [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n    (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\"\n    [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\"\n    [image]=\"getLinkPreviewDetails('image',message)\"\n    [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n    <cometchat-text-bubble\n      *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  </link-preview>\n  <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n    *ngIf=\"isTranslated(message)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\"\n    [translatedText]=\"isTranslated(message)\"\n    [textFormatters]=\"getTextFormatters(message)\">\n    <cometchat-text-bubble\n      *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n\n  </message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\"\n    [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n    [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n  </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n      [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n      [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n    (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n    [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\"\n    [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\"\n    [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\"\n    [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [buttonText]=\"whiteboardButtonText\"\n    [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [buttonText]=\"documentButtonText\"\n    [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n  <cometchat-document-bubble [hideSeparator]=\"true\"\n    [iconAlignment]=\"callBubbleAlignment\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n    [ccClicked]=\"getStartCallFunction(message)\" [iconURL]=\"directCallIconURL\"\n    [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n    *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n  <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n    [loggedInUser]=\"loggedInUser\"\n    [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n    [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n    [senderUid]=\"getPollBubbleData(message)\"\n    [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [footerView]=\"getFooterView(message)\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #statusInfoView>\n      <div class=\"cc-message-list__bubble-status-info\"\n        [ngStyle]=\"getStatusInfoStyle(message)\">\n        <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n          <ng-container\n            *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\"\n            *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"getBubbleDateStyle(message)\" [pattern]=\"datePattern\">\n            </cometchat-date>\n          </div>\n          <div\n            *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n              [receiptStyle]=\"getReceiptStyle(message)\" [waitIcon]=\"waitIcon\"\n              [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n              [readIcon]=\"deliveredIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<cometchat-popover [popoverStyle]=\"popoverStyle\" #popoverRef\n  [placement]=\"keyboardAlignment\">\n  <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n    slot=\"content\"\n    [emojiKeyboardStyle]=\"emojiKeyboardStyle\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n    (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n    [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n  *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n  [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n  [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n  [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"getStatusInfoView(message)\"\n    [footerView]=\"getFooterView(message)\"\n    [leadingView]=\"showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information\n    [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n    [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n    [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden}.cc-message-list__bubble-status-info{display:flex;align-items:flex-end;width:100%;padding:0 8px 8px;box-sizing:border-box}cometchat-reactions{margin-top:-3px}.cc-message-list__unread-thread{margin-left:4px}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%;padding-top:4px;display:flex}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%;box-sizing:border-box;margin-bottom:1px}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}.cc-message-list__bubble-reactions{width:100%;box-sizing:border-box}\n"] }]
+            args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\"\n  *ngIf=\"!openContactsView\">\n\n  <div class=\"cc-message-list__header-view\">\n    <div *ngIf=\"headerView\">\n      <ng-container *ngTemplateOutlet=\"headerView\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-message-list\" #listScroll\n    [ngStyle]=\"{height: showSmartReply || showConversationStarter || showConversationSummary ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\"\n      *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\"\n        *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\"\n          [loaderStyle]=\"loadingStyle\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\"\n          *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__error-view\"\n        *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\"\n          *ngIf=\"state == states.error && !errorStateView\"\n          [text]=\"errorStateText\">\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\"\n          *ngIf=\"state == states.error  && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"cc-message-list__empty-view\" *ngIf=\"state == states.empty\">\n        <span class=\"cc-message-list__custom-view--empty\"\n          *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bubble\"\n      *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i === 0) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\"\n        *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt())) && message?.getSentAt() && !hideDateSeparator\">\n        <span class=\"cc-message-list__date\">\n          <cometchat-date [timestamp]=\"message?.getSentAt()\"\n            [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\">\n          </cometchat-date>\n        </span>\n      </div>\n      <div *ngIf=\"getBubbleWrapper(message)\">\n        <ng-container\n          *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <div *ngIf=\"!getBubbleWrapper(message)\" #messageBubbleRef\n        [id]=\"message?.getId()\">\n        <cometchat-message-bubble\n          [leadingView]=\" showAvatar ? leadingView : null\"\n          [bottomView]=\"getBottomView(message)\"\n          [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n          [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\"\n          [footerView]=\"getFooterView(message) || reactionView\"\n          [contentView]=\"contentView\" [threadView]=\"threadView\"\n          [id]=\"message?.getId() || message?.getMuid()\"\n          [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n          [alignment]=\"setBubbleAlignment(message)\">\n          <ng-template #contentView>\n            <ng-container\n              *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n            </ng-container>\n          </ng-template>\n          <ng-template #reactionView>\n            <cometchat-reactions\n              *ngIf=\"message.getReactions() && message.getReactions().length > 0 && !disableReactions\"\n              [messageObject]=\"getClonedReactionObject(message)\"\n              [alignment]=\"setBubbleAlignment(message)\"\n              [reactionsStyle]=\"getReactionsStyle()\"\n              [reactionClick]=\"addReactionOnClick\"\n              [reactionListConfiguration]=\"getReactionListConfiguration()\"\n              [reactionInfoConfiguration]=\"getReactionInfoConfiguration()\"></cometchat-reactions>\n          </ng-template>\n          <ng-template #statusInfoView>\n            <div class=\"cc-message-list__bubble-status-info\"\n              [ngStyle]=\"getStatusInfoStyle(message)\">\n              <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n                <ng-container\n                  *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n                </ng-container>\n              </div>\n              <ng-template #bubbleFooter>\n                <div class=\"cc-message-list__bubble-date\"\n                  *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n                  <cometchat-date [timestamp]=\"message?.getSentAt()\"\n                    [dateStyle]=\"getBubbleDateStyle(message)\"\n                    [pattern]=\"datePattern\">\n                  </cometchat-date>\n                </div>\n                <div\n                  *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() || this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n                  class=\"cc-message-list__receipt\">\n                  <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n                    [receiptStyle]=\"getReceiptStyle(message)\"\n                    [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\"\n                    [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\"\n                    [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                </div>\n              </ng-template>\n            </div>\n          </ng-template>\n          <ng-template #leadingView>\n            <div\n              *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\">\n              <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n                [avatarStyle]=\"avatarStyle\"\n                [image]=\"message?.getSender()?.getAvatar()\">\n              </cometchat-avatar>\n            </div>\n          </ng-template>\n          <ng-template #bubbleHeader>\n            <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n              <ng-container\n                *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n              </ng-container>\n            </div>\n            <ng-template #defaultHeader>\n              <div class=\"cc-message-list__bubble-header\"\n                *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n                <cometchat-label [text]=\"message?.getSender()?.getName()\"\n                  [labelStyle]=\"labelStyle\"></cometchat-label>\n                <cometchat-date [pattern]=\"datePattern\"\n                  [timestamp]=\"message?.getSentAt()\"\n                  [dateStyle]=\"getBubbleDateStyle(message)\"\n                  *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n              </div>\n            </ng-template>\n          </ng-template>\n          <ng-template #threadView>\n            <div class=\"cc-message-list__threadreplies\"\n              *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\"\n              [ngStyle]=\"getThreadViewAlignment(message)\">\n              <cometchat-icon-button [iconURL]=\"threadIndicatorIcon\"\n                [mirrorIcon]=\"getThreadIconAlignment(message)\"\n                [buttonStyle]=\"getThreadViewStyle(message)\"\n                (cc-button-clicked)=\"openThreadView(message)\"\n                [text]='getThreadCount(message)'>\n                <!-- <span slot=\"buttonView\" [ngStyle]=\"getUnreadRepliesCountStyle()\"\n                  class=\"cc-message-list__unread-thread\"\n                  *ngIf=\"!message.getDeletedAt() && message.getUnreadReplyCount() > 0\">\n                  {{message.getUnreadReplyCount()}}\n                </span> -->\n\n              </cometchat-icon-button>\n            </div>\n          </ng-template>\n        </cometchat-message-bubble>\n      </div>\n    </div>\n    <div class=\"cc-message-list__bottom\" #bottom>\n    </div>\n\n  </div>\n  <div class=\"cc-message-list__message-indicator\"\n    *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\"\n    [ngStyle]=\"{bottom: showSmartReply || footerView || showConversationStarter || showConversationSummary  ? '20%' : '13%'}\">\n    <cometchat-button [text]=\"newMessageCount\"\n      [buttonStyle]=\"unreadMessagesStyle\"\n      (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height:  'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n\n      <div class=\"cc-message-list__smart-replies\"\n        *ngIf=\"!showConversationStarter && showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\"\n          [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\"\n          (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n\n\n      <div class=\"cc-message-list__conversation-starters\"\n        *ngIf=\"enableConversationStarter && showConversationStarter\">\n        <cometchat-ai-card [state]=\"conversationStarterState\"\n          [loadingStateText]=\"starterLoadingStateText\"\n          [emptyStateText]=\"starterEmptyStateText\"\n          [errorStateText]=\"errorStateText\">\n          <smart-replies\n            *ngIf=\"conversationStarterState == states.loaded && !parentMessageId\"\n            [smartReplyStyle]=\"conversationStarterStyle\"\n            [replies]=\"conversationStarterReplies\" slot=\"loadedView\"\n            (cc-reply-clicked)=\"sendConversationStarter($event)\"\n            [closeIconURL]=\"''\">\n          </smart-replies>\n        </cometchat-ai-card>\n      </div>\n\n      <div class=\"cc-message-list__conversation-summary\"\n        *ngIf=\"enableConversationSummary && showConversationSummary\">\n\n        <cometchat-ai-card [state]=\"conversationSummaryState\"\n          [loadingStateText]=\"summaryLoadingStateText\"\n          [emptyStateText]=\"summaryEmptyStateText\"\n          [errorStateText]=\"errorStateText\" [errorIconURL]=\"aiErrorIcon\"\n          [emptyIconURL]=\"aiEmptyIcon\">\n          <cometchat-panel\n            *ngIf=\"conversationSummaryState == states.loaded && !parentMessageId\"\n            slot=\"loadedView\" [panelStyle]=\"conversationSummaryStyle\"\n            title=\"Conversation Summary\" [text]=\"conversationSummary\"\n            (cc-close-clicked)=\"closeConversationSummary()\">\n          </cometchat-panel>\n        </cometchat-ai-card>\n\n      </div>\n\n    </ng-template>\n  </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble\n    *ngIf=\"message?.type == MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\"\n    [textStyle]=\"setTextBubbleStyle(message)\"\n    [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n  <cometchat-text-bubble\n    *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n    [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n    [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  <link-preview [linkPreviewStyle]=\"linkPreviewStyle\"\n    (cc-link-clicked)=\"openLinkURL($event)\"\n    *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\"\n    [title]=\"getLinkPreviewDetails('title',message)\"\n    [description]=\"getLinkPreviewDetails('description',message)\"\n    [URL]=\"getLinkPreviewDetails('url',message)\"\n    [image]=\"getLinkPreviewDetails('image',message)\"\n    [favIconURL]=\"getLinkPreviewDetails('favicon',message)\">\n    <cometchat-text-bubble\n      *ngIf=\"!isTranslated(message) && getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n  </link-preview>\n  <message-translation-bubble [alignment]=\"getBubbleAlignment(message)\"\n    *ngIf=\"isTranslated(message)\"\n    [messageTranslationStyle]=\"setTranslationStyle(message)\"\n    [translatedText]=\"isTranslated(message)\"\n    [textFormatters]=\"getTextFormatters(message)\">\n    <cometchat-text-bubble\n      *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\"\n      [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"\n      [textFormatters]=\"getTextFormatters(message)\"></cometchat-text-bubble>\n\n  </message-translation-bubble>\n</ng-template>\n<ng-template #fileBubble let-message>\n\n  <cometchat-file-bubble [fileStyle]=\"setFileBubbleStyle(message)\"\n    [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\"\n    [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\"\n    [fileURL]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"></cometchat-file-bubble>\n</ng-template>\n<ng-template #audioBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\">\n  </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\"\n    *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\"\n    [iconURL]=\"getCallTypeIcon(message)\"\n    [buttonStyle]=\"callStatusStyle(message)\"\n    [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble\n    *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"\n    [videoStyle]=\"videoBubbleStyle\"\n    [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\"\n    [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n  <image-moderation (cc-show-dialog)=\"openWarningDialog($event)\"\n    *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\"\n    [imageModerationStyle]=\"imageModerationStyle\">\n    <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"\n      [imageStyle]=\"imageBubbleStyle\" [src]=\" getImageThumbnail(message)\"\n      [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n  </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\"\n    (cc-image-clicked)=\"openImageInFullScreen(message)\"\n    *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"\n    [src]=\" getImageThumbnail(message)\"\n    [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #formBubble let-message>\n  <cometchat-form-bubble [message]=\"message\"\n    [formBubbleStyle]=\"getFormMessageBubbleStyle()\"></cometchat-form-bubble>\n</ng-template>\n<ng-template #cardBubble let-message>\n  <cometchat-card-bubble [message]=\"message\"\n    [cardBubbleStyle]=\"getCardMessageBubbleStyle()\"></cometchat-card-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\"\n    [imageStyle]=\"imageBubbleStyle\"></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\"\n    [buttonText]=\"whiteboardButtonText\"\n    [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\"\n    [iconAlignment]=\"documentBubbleAlignment\"\n    [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\"\n    [ccClicked]=\"launchCollaborativeWhiteboardDocument\"\n    [iconURL]=\"documentIconURL\" [title]=\"documentTitle\"\n    [buttonText]=\"documentButtonText\"\n    [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling let-message>\n  <cometchat-document-bubble [hideSeparator]=\"true\"\n    [iconAlignment]=\"callBubbleAlignment\"\n    [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\"\n    [ccClicked]=\"getStartCallFunction(message)\" [iconURL]=\"directCallIconURL\"\n    [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"\n    *ngIf=\"message.category == 'custom'\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #schedulerBubble let-message>\n  <cometchat-scheduler-bubble [schedulerMessage]=\"message\"\n    [loggedInUser]=\"loggedInUser\"\n    [schedulerBubbleStyle]=\"getSchedulerBubbleStyle(message)\"></cometchat-scheduler-bubble>\n\n</ng-template>\n<ng-template #pollBubble let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"\n    [pollQuestion]=\"getPollBubbleData(message,'question')\"\n    [pollId]=\"getPollBubbleData(message,'id')\" [loggedInUser]=\"loggedInUser\"\n    [senderUid]=\"getPollBubbleData(message)\"\n    [metadata]=\"message?.metadata\"></polls-bubble>\n\n</ng-template>\n\n<!-- thread bubble view -->\n<ng-template #threadMessageBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"showStatusInfo(message) ?  statusInfoView : null\"\n    [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [footerView]=\"getFooterView(message)\" [contentView]=\"contentView\"\n    [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #statusInfoView>\n      <div class=\"cc-message-list__bubble-status-info\"\n        [ngStyle]=\"getStatusInfoStyle(message)\">\n        <div *ngIf=\"getStatusInfoView(message);else bubbleFooter\">\n          <ng-container\n            *ngTemplateOutlet=\"getStatusInfoView(message);context:{ $implicit: message }\">\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\"\n            *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call && message?.getSentAt()\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"getBubbleDateStyle(message)\" [pattern]=\"datePattern\">\n            </cometchat-date>\n          </div>\n          <div\n            *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() || this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\"\n            class=\"cc-message-list__receipt\">\n            <cometchat-receipt [receipt]=\"getMessageReceipt(message)\"\n              [receiptStyle]=\"getReceiptStyle(message)\" [waitIcon]=\"waitIcon\"\n              [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\"\n              [readIcon]=\"deliveredIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </div>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<cometchat-popover [popoverStyle]=\"popoverStyle\" #popoverRef\n  [placement]=\"keyboardAlignment\">\n  <cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"\n    slot=\"content\"\n    [emojiKeyboardStyle]=\"emojiKeyboardStyle\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\"\n    (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\"\n    [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\"\n  *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\"\n  [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</cometchat-full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\"\n  [callSettingsBuilder]=\"getCallBuilder()\" [ongoingCallStyle]=\"ongoingCallStyle\"\n  [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n<!-- message information view -->\n<!-- thread bubble view -->\n<ng-template #messageinfoBubble let-message>\n  <div *ngIf=\"getBubbleWrapper(message)\">\n    <ng-container\n      *ngTemplateOutlet=\"getBubbleWrapper(message);context:{ $implicit: message }\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble *ngIf=\"!getBubbleWrapper(message)\"\n    [bottomView]=\"getBottomView(message)\"\n    [statusInfoView]=\"getStatusInfoView(message)\"\n    [footerView]=\"getFooterView(message)\"\n    [leadingView]=\"showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\"\n    [contentView]=\"contentView\" [id]=\"message?.getId() || message?.getMuid()\"\n    [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n    [alignment]=\"messageInfoAlignment\">\n    <ng-template #contentView>\n      <ng-container\n        *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\">\n      </ng-container>\n    </ng-template>\n    <ng-template #leadingView>\n      <div\n        *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\">\n        <cometchat-avatar [name]=\"message?.getSender()?.getName()\"\n          [avatarStyle]=\"avatarStyle\"\n          [image]=\"message?.getSender()?.getAvatar()\">\n        </cometchat-avatar>\n      </div>\n    </ng-template>\n    <ng-template #bubbleHeader>\n      <div *ngIf=\"getHeaderView(message);else defaultHeader\">\n        <ng-container\n          *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\">\n        </ng-container>\n      </div>\n      <ng-template #defaultHeader>\n        <div class=\"cc-message-list__bubble-header\"\n          *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n          <cometchat-label [text]=\"message?.getSender()?.getName()\"\n            [labelStyle]=\"labelStyle\"></cometchat-label>\n          <cometchat-date [pattern]=\"datePattern\"\n            [timestamp]=\"message?.getSentAt()\"\n            [dateStyle]=\"getBubbleDateStyle(message)\"\n            *ngIf=\"timestampAlignment == timestampEnum.top && message?.getSentAt()\"></cometchat-date>\n        </div>\n      </ng-template>\n    </ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n<cometchat-backdrop *ngIf=\"openMessageInfoPage\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-message-information\n    [closeIconURL]=\"messageInformationConfiguration.closeIconURL\"\n    [loadingStateView]=\"messageInformationConfiguration.loadingStateView\"\n    [errorStateView]=\"messageInformationConfiguration.errorStateView\"\n    [listItemStyle]=\"messageInformationConfiguration.listItemStyle\"\n    [emptyStateView]=\"messageInformationConfiguration.emptyStateView\"\n    [loadingIconURL]=\"messageInformationConfiguration.loadingIconURL\"\n    [readIcon]=\"messageInformationConfiguration.readIcon\"\n    [deliveredIcon]=\"messageInformationConfiguration.deliveredIcon\"\n    [onError]=\"messageInformationConfiguration.onError\"\n    [SubtitleView]=\"messageInformationConfiguration.subtitleView\"\n    [receiptDatePattern]=\"messageInformationConfiguration.receiptDatePattern\"\n    [listItemView]=\"messageInformationConfiguration.listItemView \"\n    [messageInformationStyle]=\"messageInformationConfiguration.messageInformationStyle\"\n    [onClose]=\"messageInformationConfiguration.onClose ??  closeMessageInfoPage\"\n    [bubbleView]=\"messageInformationConfiguration.bubbleView ?? messageinfoBubble\"\n    [message]=\"messageInfoObject\">\n\n  </cometchat-message-information>\n</cometchat-backdrop>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;overflow-x:hidden;position:relative}.cc-message-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between;overflow-y:hidden}.cc-message-list__bubble-status-info{display:flex;align-items:flex-end;width:100%;padding:0 8px 8px;box-sizing:border-box}cometchat-reactions{margin-top:-3px}.cc-message-list__unread-thread{margin-left:4px}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies,.cc-message-list__conversation-starters{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__conversation-summary{height:100%;position:relative;bottom:0;z-index:1;padding:.1px 14px}.cc-message-list__date{border-radius:10px;display:flex;justify-content:center}.cc-message-list__threadreplies{min-width:130px;width:100%;padding-top:4px;display:flex}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:10%;position:absolute}.cc-message-list__footer-view{z-index:1;position:relative;width:100%;box-sizing:border-box;margin-bottom:1px}.cc-message-list__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;height:100%}.cc-message-list__footer__decorator-message{margin:0;line-height:30px;word-wrap:break-word;padding:0 8px 0 16px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;height:100%}.cc-message-list::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-message-list__footer-view-decorator{display:flex;flex-direction:row;column-gap:8px}.cc_panel_container{border:1px solid #6851d6}cometchat-scheduler-bubble{width:100%}.cc-message-list__bubble-reactions{width:100%;box-sizing:border-box}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { listScroll: [{
                 type: ViewChild,
                 args: ["listScroll", { static: false }]
@@ -12453,6 +12552,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ["messageBubbleRef"]
             }], hideError: [{
                 type: Input
+            }], hideDateSeparator: [{
+                type: Input
             }], errorStateView: [{
                 type: Input
             }], loadingStateView: [{
@@ -12604,6 +12705,8 @@ class CometChatGroupMembersComponent {
         this.groupScopeStyle = new ChangeScopeStyle({
             height: "200px",
             width: "280px",
+            closeIconTint: "",
+            buttonBackground: "",
         });
         this.listItemStyle = {
             height: "100%",
@@ -12611,8 +12714,8 @@ class CometChatGroupMembersComponent {
             background: "",
             activeBackground: "transparent",
             borderRadius: "grey",
-            titleFont: "",
-            titleColor: "",
+            titleFont: fontHelper(this.themeService.theme.typography.title2),
+            titleColor: this.themeService.theme.palette.getAccent(),
             border: "",
             hoverBackground: "transparent",
             separatorColor: "rgba(222 222 222 / 46%)",
@@ -12691,14 +12794,19 @@ class CometChatGroupMembersComponent {
          * @param  {CometChat.GroupMember} member
          */
         this.getStatusIndicatorColor = (member) => {
-            if (!this.disableUsersPresence) {
-                if (member?.getStatus() == CometChatUIKitConstants.userStatusType.online) {
-                    return (this.groupMembersStyle.onlineStatusColor ||
-                        this.themeService.theme.palette.getSuccess());
-                }
-                else {
-                    return null;
-                }
+            let userStatusVisibility = new MessageUtils().getUserStatusVisibility(member) || this.disableUsersPresence;
+            if (!userStatusVisibility) {
+                return this.groupMembersStyle.onlineStatusColor ?? this.themeService.theme.palette.getSuccess();
+            }
+            return null;
+        };
+        /**
+       * @param  {CometChat.GroupMember} member
+       */
+        this.getStatusIndicatorStyle = (member) => {
+            let userStatusVisibility = new MessageUtils().getUserStatusVisibility(member) || this.disableUsersPresence;
+            if (!userStatusVisibility) {
+                return (this.statusIndicatorStyle);
             }
             return null;
         };
@@ -13107,6 +13215,10 @@ class CometChatGroupMembersComponent {
         this.modalStyle.boxShadow = `0px 0px 1px ${this.themeService.theme.palette.getAccent600()}`;
         this.modalStyle.background =
             this.themeService.theme.palette.getBackground();
+        this.groupScopeStyle.closeIconTint =
+            this.groupScopeStyle.closeIconTint || this.themeService.theme.palette.getPrimary();
+        this.groupScopeStyle.buttonBackground =
+            this.groupScopeStyle.buttonBackground || this.themeService.theme.palette.getPrimary();
     }
     setGroupMembersStyle() {
         let defaultStyle = new GroupMembersStyle({
@@ -13228,10 +13340,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]=\"statusIndicatorStyle\" [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 (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]=\"statusIndicatorStyle\" [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 (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: [{
@@ -13434,6 +13546,8 @@ class CometChatMessageComposerComponent {
             titleColor: "#141414",
             listItemBackground: "",
             ActionSheetSeparatorTint: "1px solid RGBA(20, 20, 20, 0.08)",
+            listItemIconBackground: "",
+            listItemIconTint: ""
         };
         this.aiActionSheetStyle = {
             layoutModeIconTint: "rgba(20, 20, 20, 0.04)",
@@ -13456,6 +13570,8 @@ class CometChatMessageComposerComponent {
         this.voiceRecordingStartIconURL = "assets/mic.svg";
         this.voiceRecordingStopIconURL = "assets/stop.svg";
         this.voiceRecordingSubmitIconURL = "assets/Send.svg";
+        this.hideLayoutMode = false;
+        this.emojiIconURL = "assets/Stipop.svg";
         this.childEvent = new EventEmitter();
         this.userMemberWrapperConfiguration = new UserMemberWrapperConfiguration({});
         this.textFormatters = [];
@@ -14299,13 +14415,18 @@ class CometChatMessageComposerComponent {
         this.showAiBotList = false;
         this.showSmartReply = false;
         this.closeModals();
-        this.messageText = "";
-        this.inputRef?.nativeElement?.emptyInputField();
+        this.messageText = this.text;
+        if (this.inputRef && this.inputRef.nativeElement) {
+            setTimeout(() => {
+                this.inputRef?.nativeElement?.emptyInputField();
+                this.inputRef?.nativeElement?.pasteHtmlAtCaret(this.text);
+            }, 0);
+        }
         this.showSendButton = false;
-        this.text = "";
         this.composerId = this.getComposerId();
         if (this.attachmentOptions) {
             this.composerActions = this.attachmentOptions(this.user || this.group, this.composerId);
+            this.addAttachmentCallback();
         }
         else {
             this.composerActions =
@@ -14383,7 +14504,6 @@ class CometChatMessageComposerComponent {
             //clearing Message Input Box
             this.messageText = "";
             this.inputRef?.nativeElement?.emptyInputField();
-            this.text = "";
             this.messageSending = false;
             for (let i = 0; i < this.textFormatterList.length; i++) {
                 textMessage = this.textFormatterList[i].formatMessageForSending(textMessage);
@@ -14840,16 +14960,19 @@ class CometChatMessageComposerComponent {
             layoutModeIconTint: this.actionSheetStyle.layoutModeIconTint ||
                 this.themeService.theme.palette.getAccent(),
             borderRadius: "inherit",
-            background: this.themeService.theme.palette.getBackground(),
-            border: "none",
-            width: "100%",
-            height: "100%",
+            background: this.actionSheetStyle.background || this.themeService.theme.palette.getBackground(),
+            border: this.actionSheetStyle.border || "none",
+            width: this.actionSheetStyle.width || "100%",
+            height: this.actionSheetStyle.height || "100%",
             titleFont: this.actionSheetStyle.titleFont ||
                 fontHelper(this.themeService.theme.typography.title2),
             titleColor: this.actionSheetStyle.titleColor ||
                 this.themeService.theme.palette.getAccent(),
             ActionSheetSeparatorTint: this.actionSheetStyle.ActionSheetSeparatorTint ||
                 this.themeService.theme.palette.getAccent400(),
+            listItemBackground: this.actionSheetStyle.listItemBackground || this.themeService.theme.palette.getBackground(),
+            listItemIconTint: this.actionSheetStyle.listItemIconTint || this.themeService.theme.palette.getAccent700(),
+            listItemIconBackground: this.actionSheetStyle.listItemIconBackground || 'transparent',
         };
         this.aiActionSheetStyle = {
             layoutModeIconTint: this.aiActionSheetStyle.layoutModeIconTint ||
@@ -14933,7 +15056,8 @@ class CometChatMessageComposerComponent {
             ...buttonStyle,
         };
         this.mediaRecorderButtonStyle = {
-            buttonIconTint: this.themeService.theme.palette.getAccent600(),
+            buttonIconTint: this.messageComposerStyle?.voiceRecordingIconTint ||
+                this.themeService.theme.palette.getAccent600(),
             ...buttonStyle,
         };
         this.emojiKeyboardStyle = {
@@ -15060,10 +15184,10 @@ class CometChatMessageComposerComponent {
     }
 }
 CometChatMessageComposerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessageComposerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessageComposerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: { user: "user", group: "group", disableSoundForMessages: "disableSoundForMessages", customSoundForMessage: "customSoundForMessage", disableTypingEvents: "disableTypingEvents", text: "text", placeholderText: "placeholderText", headerView: "headerView", onTextChange: "onTextChange", attachmentIconURL: "attachmentIconURL", attachmentOptions: "attachmentOptions", secondaryButtonView: "secondaryButtonView", auxilaryButtonView: "auxilaryButtonView", auxiliaryButtonsAlignment: "auxiliaryButtonsAlignment", sendButtonView: "sendButtonView", parentMessageId: "parentMessageId", hideLiveReaction: "hideLiveReaction", LiveReactionIconURL: "LiveReactionIconURL", backButtonIconURL: "backButtonIconURL", mentionsWarningText: "mentionsWarningText", mentionsWarningStyle: "mentionsWarningStyle", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", actionSheetStyle: "actionSheetStyle", aiActionSheetStyle: "aiActionSheetStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", aiOptionsStyle: "aiOptionsStyle", aiIconURL: "aiIconURL", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, outputs: { childEvent: "childEvent" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "emojiButtonRef", first: true, predicate: ["emojiButtonRef"], descendants: true }, { propertyName: "actionSheetRef", first: true, predicate: ["actionSheetRef"], descendants: true }, { propertyName: "stickerButtonRef", first: true, predicate: ["stickerButtonRef"], descendants: true }, { propertyName: "mediaRecordedRef", first: true, predicate: ["mediaRecordedRef"], descendants: true }, { propertyName: "aiButtonRef", first: true, predicate: ["aiButtonRef"], descendants: true }, { propertyName: "userMemberWrapperRef", first: true, predicate: ["userMemberWrapperRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" *ngIf=\"showListForMentions\"\n    #userMemberWrapperRef>\n    <cometchat-user-member-wrapper [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n              [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n              <cometchat-action-sheet slot=\"content\"\n                [title]=\"localize('ADD_TO_CHAT')\" [actions]=\"composerActions\"\n                [actionSheetStyle]=\"actionSheetStyle\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n              <cometchat-button #actionSheetRef slot=\"children\"\n                (cc-button-clicked)=\"openActionSheet($event)\"\n                [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\"\n                [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n            </cometchat-popover>\n          </div>\n        </ng-template>\n      </div>\n\n      <div class=\"cc-message-composer__auxiliary\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"'AI'\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"'AI'\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n              slot=\"children\" #aiButtonRef\n              (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard && !auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n            <stickers-keyboard slot=\"content\"\n              [stickerStyle]=\"stickerKeyboardStyle\"\n              (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n              #stickerButtonRef\n              (cc-button-clicked)=\"openStickerKeyboard($event)\"\n              [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n            <cometchat-emoji-keyboard slot=\"content\"\n              [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n              (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n              slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n              [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\"\n          *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"mediaRecordedPopover\"\n            [placement]=\"auxilaryPlacement\">\n\n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n              [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n              submitButtonIconText=\"\"\n              [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n              [startIconURL]=\"voiceRecordingStartIconURL\"\n              [stopIconURL]=\"voiceRecordingStopIconURL\"\n              [closeIconURL]=\"voiceRecordingCloseIconURL\"\n              (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n              (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n              slot=\"content\"\n              [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n              slot=\"children\" #mediaRecordedRef\n              (cc-button-clicked)=\"openMediaRecorded($event)\"\n              [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n      <div data-slot=\"primaryView\">\n        <div *ngIf=\"sendButtonView;else sendButton\">\n          <ng-container\n            *ngTemplateOutlet=\"sendButtonView;context:{ item: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #sendButton>\n          <div class=\"cc-message-composer__sendbutton\"\n            *ngIf=\"showSendButton || hideLiveReaction\">\n            <cometchat-button [iconURL]=\"sendButtonIconURL\"\n              [buttonStyle]=\"sendButtonStyle\"\n              [hoverText]=\"localize('SEND_MESSAGE')\"\n              [disabled]=\"!showSendButton\"\n              (cc-button-clicked)=\"customSendMethod(messageText)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"], components: [{ type: CometChatUserMemberWrapperComponent, selector: "cometchat-user-member-wrapper", inputs: ["userMemberListType", "onItemClick", "listItemView", "avatarStyle", "statusIndicatorStyle", "searchKeyword", "group", "subtitleView", "usersRequestBuilder", "disableUsersPresence", "userPresencePlacement", "hideSeperator", "loadingStateView", "onEmpty", "onError", "groupMemberRequestBuilder", "loadingIconUrl", "disableLoadingState"] }], 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 });
+CometChatMessageComposerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: { user: "user", group: "group", disableSoundForMessages: "disableSoundForMessages", customSoundForMessage: "customSoundForMessage", disableTypingEvents: "disableTypingEvents", text: "text", placeholderText: "placeholderText", headerView: "headerView", onTextChange: "onTextChange", attachmentIconURL: "attachmentIconURL", attachmentOptions: "attachmentOptions", secondaryButtonView: "secondaryButtonView", auxilaryButtonView: "auxilaryButtonView", auxiliaryButtonsAlignment: "auxiliaryButtonsAlignment", sendButtonView: "sendButtonView", parentMessageId: "parentMessageId", hideLiveReaction: "hideLiveReaction", LiveReactionIconURL: "LiveReactionIconURL", backButtonIconURL: "backButtonIconURL", mentionsWarningText: "mentionsWarningText", mentionsWarningStyle: "mentionsWarningStyle", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle", actionSheetStyle: "actionSheetStyle", aiActionSheetStyle: "aiActionSheetStyle", hideVoiceRecording: "hideVoiceRecording", mediaRecorderStyle: "mediaRecorderStyle", aiOptionsStyle: "aiOptionsStyle", aiIconURL: "aiIconURL", voiceRecordingIconURL: "voiceRecordingIconURL", voiceRecordingCloseIconURL: "voiceRecordingCloseIconURL", voiceRecordingStartIconURL: "voiceRecordingStartIconURL", voiceRecordingStopIconURL: "voiceRecordingStopIconURL", voiceRecordingSubmitIconURL: "voiceRecordingSubmitIconURL", hideLayoutMode: "hideLayoutMode", emojiIconURL: "emojiIconURL", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", disableMentions: "disableMentions", textFormatters: "textFormatters" }, outputs: { childEvent: "childEvent" }, viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "emojiButtonRef", first: true, predicate: ["emojiButtonRef"], descendants: true }, { propertyName: "actionSheetRef", first: true, predicate: ["actionSheetRef"], descendants: true }, { propertyName: "stickerButtonRef", first: true, predicate: ["stickerButtonRef"], descendants: true }, { propertyName: "mediaRecordedRef", first: true, predicate: ["mediaRecordedRef"], descendants: true }, { propertyName: "aiButtonRef", first: true, predicate: ["aiButtonRef"], descendants: true }, { propertyName: "userMemberWrapperRef", first: true, predicate: ["userMemberWrapperRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" *ngIf=\"showListForMentions\"\n    #userMemberWrapperRef>\n    <cometchat-user-member-wrapper [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n              [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n              <cometchat-action-sheet slot=\"content\"\n                [title]=\"localize('ADD_TO_CHAT')\" [actions]=\"composerActions\"\n                [actionSheetStyle]=\"actionSheetStyle\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\"\n                [hideLayoutMode]=\"hideLayoutMode\"\n                >\n              </cometchat-action-sheet>\n              <cometchat-button #actionSheetRef slot=\"children\"\n                (cc-button-clicked)=\"openActionSheet($event)\"\n                [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\"\n                [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n            </cometchat-popover>\n          </div>\n        </ng-template>\n      </div>\n\n      <div class=\"cc-message-composer__auxiliary\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"localize('AI')\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"localize('AI')\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n              slot=\"children\" #aiButtonRef\n              (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard && !auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n            <stickers-keyboard slot=\"content\"\n              [stickerStyle]=\"stickerKeyboardStyle\"\n              (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n              #stickerButtonRef\n              (cc-button-clicked)=\"openStickerKeyboard($event)\"\n              [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n            <cometchat-emoji-keyboard slot=\"content\"\n              [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n              (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n              slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n              [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\"\n          *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"mediaRecordedPopover\"\n            [placement]=\"auxilaryPlacement\">\n\n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n              [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n              submitButtonIconText=\"\"\n              [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n              [startIconURL]=\"voiceRecordingStartIconURL\"\n              [stopIconURL]=\"voiceRecordingStopIconURL\"\n              [closeIconURL]=\"voiceRecordingCloseIconURL\"\n              (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n              (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n              slot=\"content\"\n              [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n              slot=\"children\" #mediaRecordedRef\n              (cc-button-clicked)=\"openMediaRecorded($event)\"\n              [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n      <div data-slot=\"primaryView\">\n        <div *ngIf=\"sendButtonView;else sendButton\">\n          <ng-container\n            *ngTemplateOutlet=\"sendButtonView;context:{ item: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #sendButton>\n          <div class=\"cc-message-composer__sendbutton\"\n            *ngIf=\"showSendButton || hideLiveReaction\">\n            <cometchat-button [iconURL]=\"sendButtonIconURL\"\n              [buttonStyle]=\"sendButtonStyle\"\n              [hoverText]=\"localize('SEND_MESSAGE')\"\n              [disabled]=\"!showSendButton\"\n              (cc-button-clicked)=\"customSendMethod(messageText)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"], components: [{ type: CometChatUserMemberWrapperComponent, selector: "cometchat-user-member-wrapper", inputs: ["userMemberListType", "onItemClick", "listItemView", "avatarStyle", "statusIndicatorStyle", "searchKeyword", "group", "subtitleView", "usersRequestBuilder", "disableUsersPresence", "userPresencePlacement", "hideSeperator", "loadingStateView", "onEmpty", "onError", "groupMemberRequestBuilder", "loadingIconUrl", "disableLoadingState"] }], 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: CometChatMessageComposerComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-message-composer", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" *ngIf=\"showListForMentions\"\n    #userMemberWrapperRef>\n    <cometchat-user-member-wrapper [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n              [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n              <cometchat-action-sheet slot=\"content\"\n                [title]=\"localize('ADD_TO_CHAT')\" [actions]=\"composerActions\"\n                [actionSheetStyle]=\"actionSheetStyle\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n              <cometchat-button #actionSheetRef slot=\"children\"\n                (cc-button-clicked)=\"openActionSheet($event)\"\n                [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\"\n                [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n            </cometchat-popover>\n          </div>\n        </ng-template>\n      </div>\n\n      <div class=\"cc-message-composer__auxiliary\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"'AI'\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"'AI'\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n              slot=\"children\" #aiButtonRef\n              (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard && !auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n            <stickers-keyboard slot=\"content\"\n              [stickerStyle]=\"stickerKeyboardStyle\"\n              (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n              #stickerButtonRef\n              (cc-button-clicked)=\"openStickerKeyboard($event)\"\n              [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n            <cometchat-emoji-keyboard slot=\"content\"\n              [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n              (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n              slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n              [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\"\n          *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"mediaRecordedPopover\"\n            [placement]=\"auxilaryPlacement\">\n\n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n              [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n              submitButtonIconText=\"\"\n              [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n              [startIconURL]=\"voiceRecordingStartIconURL\"\n              [stopIconURL]=\"voiceRecordingStopIconURL\"\n              [closeIconURL]=\"voiceRecordingCloseIconURL\"\n              (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n              (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n              slot=\"content\"\n              [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n              slot=\"children\" #mediaRecordedRef\n              (cc-button-clicked)=\"openMediaRecorded($event)\"\n              [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n      <div data-slot=\"primaryView\">\n        <div *ngIf=\"sendButtonView;else sendButton\">\n          <ng-container\n            *ngTemplateOutlet=\"sendButtonView;context:{ item: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #sendButton>\n          <div class=\"cc-message-composer__sendbutton\"\n            *ngIf=\"showSendButton || hideLiveReaction\">\n            <cometchat-button [iconURL]=\"sendButtonIconURL\"\n              [buttonStyle]=\"sendButtonStyle\"\n              [hoverText]=\"localize('SEND_MESSAGE')\"\n              [disabled]=\"!showSendButton\"\n              (cc-button-clicked)=\"customSendMethod(messageText)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"] }]
+            args: [{ selector: "cometchat-message-composer", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-messagecomposer__mentions\" *ngIf=\"showListForMentions\"\n    #userMemberWrapperRef>\n    <cometchat-user-member-wrapper [userMemberListType]=\"userMemberListType\"\n      [onItemClick]=\"userMemberWrapperConfiguration.onItemClick || defaultMentionsItemClickHandler\"\n      [usersRequestBuilder]=\"usersRequestBuilder\"\n      [searchKeyword]=\"mentionsSearchTerm\"\n      [subtitleView]=\"userMemberWrapperConfiguration.subtitleView\"\n      [disableUsersPresence]=\"userMemberWrapperConfiguration.disableUsersPresence\"\n      [avatarStyle]=\"userMemberWrapperConfiguration.avatarStyle\"\n      [listItemView]=\"userMemberWrapperConfiguration.listItemView\"\n      [statusIndicatorStyle]=\"userMemberWrapperConfiguration.statusIndicatorStyle\"\n      [userPresencePlacement]=\"userMemberWrapperConfiguration.userPresencePlacement\"\n      [hideSeperator]=\"userMemberWrapperConfiguration.hideSeparator\"\n      [loadingStateView]=\"userMemberWrapperConfiguration.loadingStateView\"\n      [onEmpty]=\"defaultOnEmptyForMentions\"\n      [loadingIconUrl]=\"userMemberWrapperConfiguration.loadingIconURL\"\n      [group]=\"group\" [groupMemberRequestBuilder]=\"groupMembersRequestBuilder\"\n      [disableLoadingState]=\"true\"\n      [onError]=\"defaultOnEmptyForMentions\"></cometchat-user-member-wrapper>\n\n    <div *ngIf=\"showMentionsCountWarning\"\n      class=\"cc-messagecomposer__mentions-limit-exceeded\">\n      <cometchat-icon-button\n        [text]=\"mentionsWarningText || localize('MENTIONS_LIMIT_WARNING_MESSAGE')\"\n        [iconURL]=\"InfoSimpleIcon\"\n        [buttonStyle]=\"getMentionInfoIconStyle()\"></cometchat-icon-button>\n    </div>\n\n  </div>\n  <div class=\"cc-message-composer__header-view\"\n    *ngIf=\"headerView; else messagePreview\">\n    <ng-container\n      *ngTemplateOutlet=\"headerView;context:{ $implicit: user ?? group, composerId:composerId }\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\"\n        [previewSubtitle]=\"editPreviewText\"\n        (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n  <div class=\"cc-message-composer__input\">\n\n    <cometchat-text-input (cc-text-input-entered)=\"sendMessageOnEnter($event)\"\n      #inputRef [text]=\"text\"\n      (cc-text-input-changed)=\"messageInputChanged($event)\"\n      [textInputStyle]=\"textInputStyle\" [placeholderText]=\"placeholderText\"\n      [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\"\n      [textFormatters]=\"textFormatters\">\n\n      <div data-slot=\"secondaryView\">\n        <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n          <ng-container\n            *ngTemplateOutlet=\"secondaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #secondaryButton>\n          <div class=\"cc-message-composer__attachbutton\">\n            <cometchat-popover\n              (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n              [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\">\n              <cometchat-action-sheet slot=\"content\"\n                [title]=\"localize('ADD_TO_CHAT')\" [actions]=\"composerActions\"\n                [actionSheetStyle]=\"actionSheetStyle\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\"\n                [hideLayoutMode]=\"hideLayoutMode\"\n                >\n              </cometchat-action-sheet>\n              <cometchat-button #actionSheetRef slot=\"children\"\n                (cc-button-clicked)=\"openActionSheet($event)\"\n                [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeButtonIconURL\"\n                [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n            </cometchat-popover>\n          </div>\n        </ng-template>\n      </div>\n\n      <div class=\"cc-message-composer__auxiliary\" data-slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\"\n          *ngIf=\"auxilaryButtonView\">\n          <ng-container\n            *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <!-- AI Cards -->\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-click)=\"openStickerKeyboard($event)\"\n            [popoverStyle]=\"aiPopover\" [placement]=\"auxilaryPlacement\">\n            <cometchat-ai-card [state]=\"smartReplyState\"\n              *ngIf=\"showSmartReply && !showActionSheetItemAI && !showAiBotList\"\n              slot=\"content\" [loadingStateText]=\"loadingStateText\"\n              [emptyStateText]=\"emptyStateText\"\n              [errorStateText]=\"errorStateText\">\n              <div slot=\"loadedView\" class=\"smart-replies-wrapper\">\n\n                <div class=\"cc-message-composer__smartreply-header\">\n                  <div class=\"cc-message-composer__back-button\">\n                    <cometchat-button\n                      *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                      [iconURL]=\"backButtonIconURL\"\n                      (cc-button-clicked)=\"onAiBackButtonClick()\"\n                      [buttonStyle]=\"backButtonStyle()\">\n                    </cometchat-button>\n                  </div>\n                  <div class=\"cc-message-composer__smartreply-header-view\">\n                    <p>{{ localize(\"SUGGEST_A_REPLY\") }}</p>\n                  </div>\n                </div>\n\n                <div class=\"cc-message-composer__smartreply-content\">\n                  <smart-replies\n                    *ngIf=\"repliesArray && repliesArray.length > 0 \"\n                    [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"repliesArray\"\n                    [closeIconURL]=\"''\" (cc-reply-clicked)=\"sendReply($event)\">\n                  </smart-replies>\n                </div>\n\n\n\n\n\n              </div>\n            </cometchat-ai-card>\n\n            <div *ngIf=\"showAiBotList  && !showActionSheetItemAI\"\n              slot=\"content\">\n              <div class=\"cc-message-composer__aibotlist\">\n                <cometchat-button *ngIf=\" aiBotList && aiBotList.length> 1 \"\n                  [iconURL]=\"backButtonIconURL\"\n                  (cc-button-clicked)=\"onAiBackButtonClick()\"\n                  [buttonStyle]=\"backButtonStyle()\">\n                </cometchat-button>\n                <p>{{ localize(\"COMETCHAT_ASK_AI_BOT\") }}</p>\n              </div>\n              <cometchat-action-sheet\n                *ngIf=\"showAiBotList  && !showActionSheetItemAI\" slot=\"content\"\n                [actions]=\"aiActionButtons\" [title]=\"localize('AI')\"\n                [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n                (cc-actionsheet-clicked)=\"handleActions($event)\">\n              </cometchat-action-sheet>\n            </div>\n\n            <cometchat-action-sheet *ngIf=\"showActionSheetItemAI\" slot=\"content\"\n              [actions]=\"buttons\" [title]=\"localize('AI')\"\n              [actionSheetStyle]=\"aiActionSheetStyle\" [hideLayoutMode]=\"true\"\n              (cc-actionsheet-clicked)=\"handleActions($event)\">\n            </cometchat-action-sheet>\n\n            <cometchat-button *ngIf=\"isAiEnabled\" [hoverText]=\"localize('AI')\"\n              slot=\"children\" #aiButtonRef\n              (cc-button-clicked)=\"openAiFeatures($event)\"\n              [iconURL]=\"!showAiFeatures ? aiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n\n        <div class=\"cc-message-composer__stickerkeyboard\"\n          *ngIf=\"enableStickerKeyboard && !auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\">\n            <stickers-keyboard slot=\"content\"\n              [stickerStyle]=\"stickerKeyboardStyle\"\n              (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button [hoverText]=\"localize('STICKER')\" slot=\"children\"\n              #stickerButtonRef\n              (cc-button-clicked)=\"openStickerKeyboard($event)\"\n              [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"stickerButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\"\n          *ngIf=\"!auxilaryButtonView\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\">\n            <cometchat-emoji-keyboard slot=\"content\"\n              [emojiKeyboardStyle]=\"emojiKeyboardStyle\"\n              (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef [hoverText]=\"localize('EMOJI')\"\n              slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\"\n              [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__mediarecorder\"\n          *ngIf=\"!hideVoiceRecording\">\n          <cometchat-popover (cc-popover-outside-clicked)=\"handleOutsideClick()\"\n            [popoverStyle]=\"mediaRecordedPopover\"\n            [placement]=\"auxilaryPlacement\">\n\n            <cometchat-media-recorder *ngIf=\"toggleMediaRecorded\"\n              [autoRecording]=\"true\" startIconText=\"\" stopIconText=\"\"\n              submitButtonIconText=\"\"\n              [submitButtonIconURL]=\"voiceRecordingSubmitIconURL\"\n              [startIconURL]=\"voiceRecordingStartIconURL\"\n              [stopIconURL]=\"voiceRecordingStopIconURL\"\n              [closeIconURL]=\"voiceRecordingCloseIconURL\"\n              (cc-media-recorder-submitted)=\"sendRecordedMedia($event)\"\n              (cc-media-recorder-closed)=\"closeMediaRecorder($event)\"\n              slot=\"content\"\n              [mediaPlayerStyle]=\"mediaRecorderStyle\"></cometchat-media-recorder>\n            <cometchat-icon-button [hoverText]=\"localize('VOICE_RECORDING')\"\n              slot=\"children\" #mediaRecordedRef\n              (cc-button-clicked)=\"openMediaRecorded($event)\"\n              [iconURL]=\" !toggleMediaRecorded ? voiceRecordingIconURL : closeButtonIconURL\"\n              [buttonStyle]=\"mediaRecorderButtonStyle\"></cometchat-icon-button>\n          </cometchat-popover>\n        </div>\n      </div>\n      <div data-slot=\"primaryView\">\n        <div *ngIf=\"sendButtonView;else sendButton\">\n          <ng-container\n            *ngTemplateOutlet=\"sendButtonView;context:{ item: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <ng-template #sendButton>\n          <div class=\"cc-message-composer__sendbutton\"\n            *ngIf=\"showSendButton || hideLiveReaction\">\n            <cometchat-button [iconURL]=\"sendButtonIconURL\"\n              [buttonStyle]=\"sendButtonStyle\"\n              [hoverText]=\"localize('SEND_MESSAGE')\"\n              [disabled]=\"!showSendButton\"\n              (cc-button-clicked)=\"customSendMethod(messageText)\">\n            </cometchat-button>\n          </div>\n          <div class=\"cc-message-composer__livereaction\"\n            *ngIf=\"!hideLiveReaction && !showSendButton\">\n            <cometchat-button [iconURL]=\"LiveReactionIconURL\"\n              [hoverText]=\"localize('LIVE_REACTION')\"\n              [buttonStyle]=\"liveReactionStyle\"\n              (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n        </ng-template>\n      </div>\n    </cometchat-text-input>\n  </div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement\n  (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\"\n    (cc-close-clicked)=\"closeCreatePolls()\"\n    [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>\n", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:14px 16px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%;padding:0 0 1px}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}.cc-message-composer__smartreply-header{width:100%;display:flex;align-items:center;position:absolute;padding:10px;top:0;z-index:1}.cc-message-composer__back-button{margin-left:2%}.cc-message-composer__smartreply-header-view{margin-left:14%}.cc-message-composer__smartreply-content{max-height:200px}.cc-message-composer__aibotlist{display:flex;padding:10px;align-items:center;gap:45px;font-size:medium}.cc-messagecomposer__mentions{max-height:196px;min-height:28px;overflow:hidden;position:absolute;width:100%;left:50%;transform:translate(-50%,-100%);z-index:2;display:flex;padding:0 16px 1px 14px;box-sizing:border-box}.cc-messagecomposer__mentions cometchat-user-member-wrapper{max-height:196px;min-height:28px;overflow:hidden;width:100%;box-sizing:border-box;min-height:45px}.cc-messagecomposer__mentions::-webkit-scrollbar{display:none}.cc-messagecomposer__mentions-limit-exceeded{margin-top:20px;left:2px;position:relative;padding-left:13px;background-color:#fff}*{box-sizing:border-box}cometchat-ai-card{height:100%;width:100%;display:flex;border-radius:8px;overflow-y:auto;justify-content:center;align-items:center}cometchat-popover{position:relative}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { inputElementRef: [{
                 type: ViewChild,
                 args: ["inputElement", { static: false }]
@@ -15160,6 +15284,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], voiceRecordingSubmitIconURL: [{
                 type: Input
+            }], hideLayoutMode: [{
+                type: Input
+            }], emojiIconURL: [{
+                type: Input
             }], childEvent: [{
                 type: Output
             }], userMemberWrapperConfiguration: [{
@@ -15186,18 +15314,20 @@ class CometChatThreadedMessagesComponent {
         this.title = localize("THREAD");
         this.closeIconURL = "assets/close2x.svg";
         this.messageListConfiguration = new MessageListConfiguration({});
+        this.userMemberWrapperConfiguration = new UserMemberWrapperConfiguration({});
         this.messageComposerConfiguration = new MessageComposerConfiguration({});
         this.threadedMessagesStyle = {
             width: "100%",
             height: "100%",
-            background: "white",
+            background: this.themeService.theme.palette.getBackground(),
             borderRadius: "none",
-            border: "1px solid rgba(20, 20, 20, 0.1)",
-            titleColor: "rgba(20, 20, 20)",
-            titleFont: "700 22px Inter",
-            closeIconTint: "#3399FF"
+            border: "none",
+            titleColor: this.themeService.theme.palette.getAccent(),
+            titleFont: fontHelper(this.themeService.theme.typography.title1),
+            closeIconTint: this.themeService.theme.palette.getPrimary()
         };
         this.hideMessageComposer = false;
+        this.disableSoundForMessages = false;
         this.limit = 30;
         this.composerStyles = {
             width: "100%",
@@ -15336,9 +15466,19 @@ class CometChatThreadedMessagesComponent {
     addMessageEventListeners() {
         try {
             this.onMessagesDelivered = CometChatMessageEvents.onMessagesDelivered.subscribe((messageReceipt) => {
-                this.updateReceipt(messageReceipt);
+                if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
+                    this.updateReceipt(messageReceipt);
+                }
             });
             this.onMessagesRead = CometChatMessageEvents.onMessagesRead.subscribe((messageReceipt) => {
+                if (messageReceipt.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
+                    this.updateReceipt(messageReceipt);
+                }
+            });
+            this.onMessagesReadByAll = CometChatMessageEvents.onMessagesReadByAll.subscribe((messageReceipt) => {
+                this.updateReceipt(messageReceipt);
+            });
+            this.onMessagesDeliveredToAll = CometChatMessageEvents.onMessagesDeliveredToAll.subscribe((messageReceipt) => {
                 this.updateReceipt(messageReceipt);
             });
             this.onMessageDeleted = CometChatMessageEvents.onMessageDeleted.subscribe((deletedMessage) => {
@@ -15435,6 +15575,8 @@ class CometChatThreadedMessagesComponent {
         this.onCustomInteractiveMessageReceived?.unsubscribe();
         this.onCustomMessageReceived?.unsubscribe();
         this.onMediaMessageReceived?.unsubscribe();
+        this.onMessagesReadByAll?.unsubscribe();
+        this.onMessagesDeliveredToAll?.unsubscribe();
     }
     closeView() {
         if (this.onClose) {
@@ -15481,10 +15623,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", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle", hideMessageComposer: "hideMessageComposer", messageComposerView: "messageComposerView", messageListView: "messageListView" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n    <cometchat-message-list #messageListRef\n      [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n      [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n      [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n      [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n      [parentMessageId]=\"parentMessage?.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [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      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\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    </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", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatThreadedMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: { onClose: "onClose", onError: "onError", parentMessage: "parentMessage", title: "title", closeIconURL: "closeIconURL", bubbleView: "bubbleView", messageActionView: "messageActionView", messageListConfiguration: "messageListConfiguration", userMemberWrapperConfiguration: "userMemberWrapperConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle", hideMessageComposer: "hideMessageComposer", messageComposerView: "messageComposerView", messageListView: "messageListView", disableSoundForMessages: "disableSoundForMessages" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n    <cometchat-message-list #messageListRef\n      [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n      [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n      [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n      [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n      [parentMessageId]=\"parentMessage?.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [templates]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [hideError]=\"messageListConfiguration.hideError\"\n      [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      [disableMentions]=\"messageListConfiguration.disableMentions\"\n      [textFormatters]=\"messageListConfiguration?.textFormatters\">\n    </cometchat-message-list>\n  </div>\n  <ng-container *ngIf=\"messageListView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n  <div class=\"cc-threaded-messages__composer\"\n    *ngIf=\"!hideMessageComposer && !messageComposerView\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n      [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n      [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n      [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n      [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n      [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n      [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n      [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n      [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n      [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n      [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n      [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n      [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n      [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n      [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n      [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n      [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      >\n    </cometchat-message-composer>\n  </div>\n  <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"], components: [{ type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatThreadedMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-threaded-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-threaded-messages__header\">\n    <div class=\"cc-threaded-messages__title\">\n      <cometchat-label [text]=\"title\"\n        [labelStyle]=\"titleStyle\"></cometchat-label>\n    </div>\n    <div class=\"cc-threaded-messages__close\">\n      <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\"\n        (cc-button-clicked)=\"closeView()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-threaded-messages__bubble-view\">\n    <ng-container\n      *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n  </div>\n  <div class=\"cc-threaded-messages__action-view\">\n    <ng-container\n      *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n    </ng-container>\n    <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\"\n      [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-threaded-messages__list\" *ngIf=\"!messageListView\">\n    <cometchat-message-list #messageListRef\n      [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n      [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n      [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n      [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n      [parentMessageId]=\"parentMessage?.getId()\"\n      [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n      [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n      [user]=\"user\" [group]=\"group\"\n      [errorStateView]=\"messageListConfiguration.errorStateView\"\n      [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [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      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\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    </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      [readIcon]=\"messageListConfiguration.readIcon\"\n      [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n      [sentIcon]=\"messageListConfiguration.sentIcon\"\n      [waitIcon]=\"messageListConfiguration.waitIcon\"\n      [loadingIconURL]=\"messageListConfiguration.loadingIconURL\"\n      [errorIcon]=\"messageListConfiguration.errorIcon\"\n      [alignment]=\"messageListConfiguration.alignment\"\n      [showAvatar]=\"messageListConfiguration.showAvatar\"\n      [datePattern]=\"messageListConfiguration.datePattern\"\n      [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n      [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n      [messageTypes]=\"messageListConfiguration.templates\"\n      [templates]=\"messageListConfiguration.templates\"\n      [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\"\n      [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n      [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\"\n      [headerView]=\"messageListConfiguration.headerView\"\n      [footerView]=\"messageListConfiguration.footerView\"\n      [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n      [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n      [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n      [onError]=\"messageListConfiguration.onError\"\n      [hideError]=\"messageListConfiguration.hideError\"\n      [hideDateSeparator]=\"messageListConfiguration.hideDateSeparator\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      [disableMentions]=\"messageListConfiguration.disableMentions\"\n      [textFormatters]=\"messageListConfiguration?.textFormatters\">\n    </cometchat-message-list>\n  </div>\n  <ng-container *ngIf=\"messageListView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n  <div class=\"cc-threaded-messages__composer\"\n    *ngIf=\"!hideMessageComposer && !messageComposerView\">\n    <cometchat-message-composer #messageComposerRef\n      [parentMessageId]=\"parentMessage?.getId()\" [user]=\"user\" [group]=\"group\"\n      [text]=\"messageComposerConfiguration.text\"\n      [headerView]=\"messageComposerConfiguration.headerView\"\n      [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n      [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n      [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n      [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n      [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n      [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n      [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n      [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n      [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n      [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n      [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n      [sendButtonIconURL]=\"messageComposerConfiguration.sendButtonIconURL\"\n      [onError]=\"messageComposerConfiguration.onError\"\n      [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n      [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n      [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n      [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n      [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n      [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\"\n      [emojiIconURL]=\"messageComposerConfiguration.emojiIconURL\"\n      [AIIconURL]=\"messageComposerConfiguration.AIIconURL\"\n      [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n      [hideLayoutMode]=\"messageComposerConfiguration.hideLayoutMode\"\n      [AIOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n      [backdropStyle]=\"messageComposerConfiguration.backdropStyle\"\n      [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n      [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n      [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n      [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n      [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n      [disableSoundForMessages]=\"disableSoundForMessages\"\n      >\n    </cometchat-message-composer>\n  </div>\n  <ng-container *ngIf=\"!hideMessageComposer && messageComposerView\">\n    <ng-container\n      *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group,parentMessage:parentMessage }\">\n    </ng-container>\n  </ng-container>\n\n</div>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-threaded-messages__wrapper{display:flex;flex-direction:column;height:100%;overflow-y:auto}.cc-threaded-messages__header{height:8%;width:100%;display:flex;padding:16px;align-items:flex-start}.cc-threaded-messages__close{display:flex;align-items:center}.cc-threaded-messages__title{display:flex;align-items:center;justify-content:center;width:100%}.cc-threaded-messages__bubble-view{width:100%}.cc-threaded-messages__header{flex:0 0 auto}.cc-threaded-messages__list{flex:1 1 auto;min-height:65%}.cc-threaded-messages__composer{flex:0 0 auto;min-height:80px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { onClose: [{
                 type: Input
             }], onError: [{
@@ -15501,6 +15643,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], messageListConfiguration: [{
                 type: Input
+            }], userMemberWrapperConfiguration: [{
+                type: Input
             }], messageComposerConfiguration: [{
                 type: Input
             }], threadedMessagesStyle: [{
@@ -15511,6 +15655,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], messageListView: [{
                 type: Input
+            }], disableSoundForMessages: [{
+                type: Input
             }] } });
 
 /**
@@ -15982,7 +16128,15 @@ class CometChatDetailsComponent {
         this.subtitleText = "";
         this.userListenerId = "userlist_" + new Date().getTime();
         this.checkStatusType = () => {
-            return this.user && !this.disableUsersPresence ? this.statusColor[this.user?.getStatus()] : this.statusColor[this.group?.getType()];
+            if (this.user) {
+                let userStatusVisibility = !this.disableUsersPresence && !new MessageUtils().getUserStatusVisibility(this.user);
+                return userStatusVisibility ? this.statusColor[this.user?.getStatus()] : null;
+            }
+            else if (this.group) {
+                return this.statusColor[this.group?.getType()];
+            }
+            else
+                return null;
         };
         this.viewMembers = () => {
             this.openViewMembersPage = !this.openViewMembersPage;
@@ -16012,7 +16166,8 @@ class CometChatDetailsComponent {
             }
         };
         this.subtitleStyle = () => {
-            if (this.user && this.user.getStatus() == CometChatUIKitConstants.userStatusType.online) {
+            let hideUserStatus = this.user ? new MessageUtils().getUserStatusVisibility(this.user) : true;
+            if (!this.disableUsersPresence && !hideUserStatus) {
                 return {
                     textFont: this.detailsStyle.subtitleTextFont,
                     textColor: this.themeService.theme.palette.getPrimary()
@@ -16160,7 +16315,13 @@ class CometChatDetailsComponent {
     updateSubtitle() {
         const count = this.group?.getMembersCount();
         const membersText = localize(count > 1 ? "MEMBERS" : "MEMBER");
-        this.subtitleText = this.user ? this.user.getStatus() : `${count} ${membersText}`;
+        if (this.user) {
+            let userStatusVisibility = !this.disableUsersPresence && !this.user.getBlockedByMe() && !this.user.getHasBlockedMe();
+            this.subtitleText = userStatusVisibility ? this.user.getStatus() : "";
+        }
+        else if (this.group) {
+            this.subtitleText = `${count} ${membersText}`;
+        }
         this.ref.detectChanges();
     }
     getButtonStyle(option) {
@@ -16334,6 +16495,7 @@ class CometChatDetailsComponent {
             CometChat.blockUsers([this.user.getUid()]).then(() => {
                 this.user.setBlockedByMe(true);
                 CometChatUserEvents.ccUserBlocked.next(this.user);
+                this.updateSubtitle();
                 this.getTemplate();
             })
                 .catch((error) => {
@@ -16350,6 +16512,7 @@ class CometChatDetailsComponent {
                 this.user.setBlockedByMe(false);
                 CometChatUserEvents.ccUserUnblocked.next(this.user);
                 this.getTemplate();
+                this.updateSubtitle();
             })
                 .catch((error) => {
                 if (this.onError) {
@@ -16499,7 +16662,7 @@ class CometChatDetailsComponent {
     }
 }
 CometChatDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatDetailsComponent, selector: "cometchat-details", inputs: { group: "group", user: "user", title: "title", closeButtonIconURL: "closeButtonIconURL", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", data: "data", disableUsersPresence: "disableUsersPresence", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", onError: "onError", onClose: "onClose", leaveGroupConfirmButtonText: "leaveGroupConfirmButtonText", leaveGroupCancelButtonText: "leaveGroupCancelButtonText", leaveGroupDialogMessage: "leaveGroupDialogMessage", leaveGroupDialogStyle: "leaveGroupDialogStyle", deleteGroupConfirmButtonText: "deleteGroupConfirmButtonText", deleteGroupDialogMessage: "deleteGroupDialogMessage", deleteGroupCancelButtonText: "deleteGroupCancelButtonText", deleteGroupDialogStyle: "deleteGroupDialogStyle", transferOwnershipConfirmButtonText: "transferOwnershipConfirmButtonText", transferOwnershipDialogMessage: "transferOwnershipDialogMessage", transferOwnershipCancelButtonText: "transferOwnershipCancelButtonText", transferOwnershipDialogStyle: "transferOwnershipDialogStyle", addMembersConfiguration: "addMembersConfiguration", bannedMembersConfiguration: "bannedMembersConfiguration", groupMembersConfiguration: "groupMembersConfiguration", transferOwnershipConfiguration: "transferOwnershipConfiguration", statusIndicatorStyle: "statusIndicatorStyle", backdropStyle: "backdropStyle", avatarStyle: "avatarStyle", detailsStyle: "detailsStyle", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"addMembersConfiguration?.onBack || addMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"], components: [{ type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onBack", "onClose", "onSelect", "buttonText", "group", "emptyStateView", "errorStateView", "loadingIconURL", "listItemStyle", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "onAddMembersButtonClick", "titleAlignment", "addMembersStyle", "StatusIndicatorStyle", "avatarStyle"] }, { type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: ["bannedMembersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "onBack", "onClose", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "unbanIconURL", "statusIndicatorStyle", "avatarStyle", "bannedMembersStyle", "listItemStyle"] }, { type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }, { type: CometChatTransferOwnershipComponent, selector: "cometchat-transfer-ownership", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "options", "closeButtonIconURL", "hideSeparator", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onClose", "onTransferOwnership", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "statusIndicatorStyle", "transferOwnershipStyle", "transferButtonText", "cancelButtonText", "avatarStyle", "groupMembersStyle", "listItemStyle", "titleAlignment"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatDetailsComponent, selector: "cometchat-details", inputs: { group: "group", user: "user", title: "title", closeButtonIconURL: "closeButtonIconURL", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", data: "data", disableUsersPresence: "disableUsersPresence", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", onError: "onError", onClose: "onClose", leaveGroupConfirmButtonText: "leaveGroupConfirmButtonText", leaveGroupCancelButtonText: "leaveGroupCancelButtonText", leaveGroupDialogMessage: "leaveGroupDialogMessage", leaveGroupDialogStyle: "leaveGroupDialogStyle", deleteGroupConfirmButtonText: "deleteGroupConfirmButtonText", deleteGroupDialogMessage: "deleteGroupDialogMessage", deleteGroupCancelButtonText: "deleteGroupCancelButtonText", deleteGroupDialogStyle: "deleteGroupDialogStyle", transferOwnershipConfirmButtonText: "transferOwnershipConfirmButtonText", transferOwnershipDialogMessage: "transferOwnershipDialogMessage", transferOwnershipCancelButtonText: "transferOwnershipCancelButtonText", transferOwnershipDialogStyle: "transferOwnershipDialogStyle", addMembersConfiguration: "addMembersConfiguration", bannedMembersConfiguration: "bannedMembersConfiguration", groupMembersConfiguration: "groupMembersConfiguration", transferOwnershipConfiguration: "transferOwnershipConfiguration", statusIndicatorStyle: "statusIndicatorStyle", backdropStyle: "backdropStyle", avatarStyle: "avatarStyle", detailsStyle: "detailsStyle", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"addMembersConfiguration?.onBack || addMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"], components: [{ type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onBack", "onClose", "onSelect", "buttonText", "group", "emptyStateView", "errorStateView", "loadingIconURL", "listItemStyle", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "onAddMembersButtonClick", "titleAlignment", "addMembersStyle", "StatusIndicatorStyle", "statusIndicatorStyle", "avatarStyle"] }, { type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: ["bannedMembersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "onBack", "onClose", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "unbanIconURL", "statusIndicatorStyle", "avatarStyle", "bannedMembersStyle", "listItemStyle"] }, { type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }, { type: CometChatTransferOwnershipComponent, selector: "cometchat-transfer-ownership", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "options", "closeButtonIconURL", "hideSeparator", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onClose", "onTransferOwnership", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "statusIndicatorStyle", "transferOwnershipStyle", "transferButtonText", "cancelButtonText", "avatarStyle", "groupMembersStyle", "listItemStyle", "titleAlignment"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: "cometchat-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"addMembersConfiguration?.onBack || addMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"] }]
@@ -16718,6 +16881,9 @@ class CometChatMessagesComponent {
             this.ref.detectChanges();
         };
         this.closeThreadView = () => {
+            if (this.threadedMessageConfiguration.onClose) {
+                this.threadedMessageConfiguration.onClose();
+            }
             this.threadMessageObject = null;
             this.openThreadedMessages = false;
             this.ref.detectChanges();
@@ -16953,10 +17119,10 @@ class CometChatMessagesComponent {
     }
 }
 CometChatMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessagesComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-CometChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: { user: "user", group: "group", currentAskAIBot: "currentAskAIBot", hideMessageComposer: "hideMessageComposer", disableTyping: "disableTyping", messageHeaderConfiguration: "messageHeaderConfiguration", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessageConfiguration: "threadedMessageConfiguration", detailsConfiguration: "detailsConfiguration", customSoundForIncomingMessages: "customSoundForIncomingMessages", customSoundForOutgoingMessages: "customSoundForOutgoingMessages", disableSoundForMessages: "disableSoundForMessages", messagesStyle: "messagesStyle", messageHeaderView: "messageHeaderView", messageComposerView: "messageComposerView", messageListView: "messageListView", hideMessageHeader: "hideMessageHeader", hideDetails: "hideDetails", auxiliaryMenu: "auxiliaryMenu" }, viewQueries: [{ propertyName: "messageComposerRef", first: true, predicate: ["messageComposerRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messageListRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: AIAssistBotMessageListComponent, selector: "aiassist-bot-message-list", inputs: ["hideSearch", "footerView", "user", "group", "currentAskAIBot", "subtitleText", "sendIconUrl", "waitIcon", "errorIcon", "botFirstMessageText", "closeButtonIconURL", "sendButtonIconURL", "avatarStyle", "aiBotChatHeaderStyle", "aiBotChatContainerStyle", "datePattern", "alignment"] }, { type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "passwordGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "messageComposerConfiguration", "threadedMessagesStyle", "hideMessageComposer", "messageComposerView", "messageListView"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "onError", "onClose", "leaveGroupConfirmButtonText", "leaveGroupCancelButtonText", "leaveGroupDialogMessage", "leaveGroupDialogStyle", "deleteGroupConfirmButtonText", "deleteGroupDialogMessage", "deleteGroupCancelButtonText", "deleteGroupDialogStyle", "transferOwnershipConfirmButtonText", "transferOwnershipDialogMessage", "transferOwnershipCancelButtonText", "transferOwnershipDialogStyle", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: { user: "user", group: "group", currentAskAIBot: "currentAskAIBot", hideMessageComposer: "hideMessageComposer", disableTyping: "disableTyping", messageHeaderConfiguration: "messageHeaderConfiguration", messageListConfiguration: "messageListConfiguration", messageComposerConfiguration: "messageComposerConfiguration", threadedMessageConfiguration: "threadedMessageConfiguration", detailsConfiguration: "detailsConfiguration", customSoundForIncomingMessages: "customSoundForIncomingMessages", customSoundForOutgoingMessages: "customSoundForOutgoingMessages", disableSoundForMessages: "disableSoundForMessages", messagesStyle: "messagesStyle", messageHeaderView: "messageHeaderView", messageComposerView: "messageComposerView", messageListView: "messageListView", hideMessageHeader: "hideMessageHeader", hideDetails: "hideDetails", auxiliaryMenu: "auxiliaryMenu" }, viewQueries: [{ propertyName: "messageComposerRef", first: true, predicate: ["messageComposerRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messageListRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n      [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n      [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n      ></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: AIAssistBotMessageListComponent, selector: "aiassist-bot-message-list", inputs: ["hideSearch", "footerView", "user", "group", "currentAskAIBot", "subtitleText", "sendIconUrl", "waitIcon", "errorIcon", "botFirstMessageText", "closeButtonIconURL", "sendButtonIconURL", "avatarStyle", "aiBotChatHeaderStyle", "aiBotChatContainerStyle", "datePattern", "alignment"] }, { type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "passwordGroupIcon", "privateGroupIcon", "menu", "user", "group", "backButtonIconURL", "hideBackButton", "listItemView", "onError", "onBack"] }, { type: CometChatMessageListComponent, selector: "cometchat-message-list", inputs: ["hideError", "hideDateSeparator", "errorStateView", "loadingStateView", "emptyStateView", "errorStateText", "emptyStateText", "loadingIconURL", "user", "group", "disableReceipt", "disableSoundForMessages", "customSoundForMessages", "readIcon", "deliveredIcon", "sentIcon", "waitIcon", "errorIcon", "aiErrorIcon", "aiEmptyIcon", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "unreadMessageThreshold", "reactionsConfiguration", "disableReactions", "emojiKeyboardStyle", "apiConfiguration", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "threadIndicatorIcon", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError", "messageInformationConfiguration", "disableMentions", "textFormatters"] }, { type: CometChatMessageComposerComponent, selector: "cometchat-message-composer", inputs: ["user", "group", "disableSoundForMessages", "customSoundForMessage", "disableTypingEvents", "text", "placeholderText", "headerView", "onTextChange", "attachmentIconURL", "attachmentOptions", "secondaryButtonView", "auxilaryButtonView", "auxiliaryButtonsAlignment", "sendButtonView", "parentMessageId", "hideLiveReaction", "LiveReactionIconURL", "backButtonIconURL", "mentionsWarningText", "mentionsWarningStyle", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle", "actionSheetStyle", "aiActionSheetStyle", "hideVoiceRecording", "mediaRecorderStyle", "aiOptionsStyle", "aiIconURL", "voiceRecordingIconURL", "voiceRecordingCloseIconURL", "voiceRecordingStartIconURL", "voiceRecordingStopIconURL", "voiceRecordingSubmitIconURL", "hideLayoutMode", "emojiIconURL", "userMemberWrapperConfiguration", "disableMentions", "textFormatters"], outputs: ["childEvent"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "userMemberWrapperConfiguration", "messageComposerConfiguration", "threadedMessagesStyle", "hideMessageComposer", "messageComposerView", "messageListView", "disableSoundForMessages"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "onError", "onClose", "leaveGroupConfirmButtonText", "leaveGroupCancelButtonText", "leaveGroupDialogMessage", "leaveGroupDialogStyle", "deleteGroupConfirmButtonText", "deleteGroupDialogMessage", "deleteGroupCancelButtonText", "deleteGroupDialogStyle", "transferOwnershipConfirmButtonText", "transferOwnershipDialogMessage", "transferOwnershipCancelButtonText", "transferOwnershipDialogStyle", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"] }]
+            args: [{ selector: "cometchat-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-messages__wrapper\">\n  <cometchat-backdrop *ngIf=\"showAiBotChat\">\n    <aiassist-bot-message-list [user]=\"user\" [group]=\"group\"\n      [currentAskAIBot]=\"currentAskAIBot\"></aiassist-bot-message-list>\n  </cometchat-backdrop>\n  <div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n    <div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n      <div *ngIf=\"messageHeaderView; else customHeaderView\"\n        class=\"cc-messages__header-customview\">\n        <ng-container\n          *ngTemplateOutlet=\"messageHeaderView;context:{  user: user, group: group }\">\n        </ng-container>\n      </div>\n      <ng-template #customHeaderView>\n        <cometchat-message-header [user]=\"user\" [group]=\"group\"\n          [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n          [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\"\n          [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\"\n          [passwordGroupIcon]=\"messageHeaderConfiguration.passwordGroupIcon\"\n          [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\"\n          [menu]=\"headerMenu\"\n          [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n          [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\"\n          [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\"\n          [onError]=\"messageHeaderConfiguration.onError\"\n          [onBack]=\"messageHeaderConfiguration.onBack\"\n          [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\"\n          [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n          [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\">\n        </cometchat-message-header>\n      </ng-template>\n    </div>\n    <div class=\"cc-messages__list\" *ngIf=\"!messageListView\">\n      <cometchat-message-list #messageListRef\n        [disableReactions]=\"messageListConfiguration?.disableReactions!\"\n        [emojiKeyboardStyle]=\"messageListConfiguration?.emojiKeyboardStyle!\"\n        [threadIndicatorIcon]=\"messageListConfiguration?.threadIndicatorIcon!\"\n        [reactionsConfiguration]=\"messageListConfiguration?.reactionsConfiguration!\"\n        [messageInformationConfiguration]=\"\n        messageListConfiguration.messageInformationConfiguration\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [customSoundForMessages]=\"customSoundForIncomingMessages\"\n        [emptyStateView]=\"messageListConfiguration.emptyStateView\"\n        [loadingIconURL]=\"messageListConfiguration?.loadingIconURL!\"\n        [loadingStateView]=\"messageListConfiguration.loadingStateView\"\n        [user]=\"user\" [group]=\"group\"\n        [errorStateView]=\"messageListConfiguration.errorStateView\"\n        [disableReceipt]=\"messageListConfiguration.disableReceipt\"\n        [readIcon]=\"messageListConfiguration.readIcon\"\n        [deliveredIcon]=\"messageListConfiguration.deliveredIcon\"\n        [sentIcon]=\"messageListConfiguration.sentIcon\"\n        [waitIcon]=\"messageListConfiguration.waitIcon\"\n        [errorIcon]=\"messageListConfiguration.errorIcon\"\n        [alignment]=\"messageListConfiguration.alignment\"\n        [showAvatar]=\"messageListConfiguration.showAvatar\"\n        [datePattern]=\"messageListConfiguration.datePattern\"\n        [timestampAlignment]=\"messageListConfiguration.timestampAlignment\"\n        [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n        [templates]=\"messageListConfiguration.templates\"\n        [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\"\n        [thresholdValue]=\"messageListConfiguration.thresholdValue\"\n        [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\"\n        [headerView]=\"messageListConfiguration.headerView\"\n        [footerView]=\"messageListConfiguration.footerView\"\n        [avatarStyle]=\"messageListConfiguration.avatarStyle\"\n        [scrollToBottomOnNewMessages]=\"messageListConfiguration.scrollToBottomOnNewMessages\"\n        [backdropStyle]=\"messageListConfiguration.backdropStyle\"\n        [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\"\n        [messageListStyle]=\"messageListConfiguration.messageListStyle\"\n        [onError]=\"messageListConfiguration.onError\"\n        [hideError]=\"messageListConfiguration.hideError\"\n        [disableMentions]=\"messageListConfiguration.disableMentions\"\n        [textFormatters]=\"messageListConfiguration?.textFormatters\">\n      </cometchat-message-list>\n    </div>\n    <ng-container *ngIf=\"messageListView\">\n      <ng-container\n        *ngTemplateOutlet=\"messageListView;context:{  user: user, group: group }\">\n      </ng-container>\n    </ng-container>\n\n    <div class=\"cc-messages__composer\"\n      *ngIf=\"!messageComposerView && !hideMessageComposer\">\n      <cometchat-message-composer #messageComposerRef\n        [hideVoiceRecording]=\"messageComposerConfiguration.hideVoiceRecording\"\n        [disableSoundForMessages]=\"disableSoundForMessages\"\n        [voiceRecordingStopIconURL]=\"messageComposerConfiguration.voiceRecordingStopIconURL\"\n        [voiceRecordingStartIconURL]=\"messageComposerConfiguration.voiceRecordingStartIconURL\"\n        [voiceRecordingCloseIconURL]=\"messageComposerConfiguration.voiceRecordingCloseIconURL\"\n        [voiceRecordingSubmitIconURL]=\"messageComposerConfiguration.voiceRecordingSubmitIconURL\"\n        [mediaRecorderStyle]=\"messageComposerConfiguration.mediaRecorderStyle\"\n        [customSoundForMessages]=\"customSoundForOutgoingMessages\" [user]=\"user\"\n        [group]=\"group\" [text]=\"messageComposerConfiguration.text\"\n        [headerView]=\"messageComposerConfiguration.headerView\"\n        [onTextChange]=\"messageComposerConfiguration.onTextChange\"\n        [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n        [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\"\n        [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\"\n        [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\"\n        [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n        [sendButtonView]=\"messageComposerConfiguration.sendButtonView\"\n        [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\"\n        [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\"\n        [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n        [onError]=\"messageComposerConfiguration.onError\"\n        [actionSheetStyle]=\"messageComposerConfiguration.actionSheetStyle\"\n        [aiOptionsStyle]=\"messageComposerConfiguration.AIOptionsStyle\"\n        [aiIconURL]=\"messageComposerConfiguration.AIIconURL\"\n        [userMemberWrapperConfiguration]=\"messageComposerConfiguration.userMemberWrapperConfiguration\"\n        [textFormatters]=\"messageComposerConfiguration?.textFormatters\"\n        [disableMentions]=\"messageComposerConfiguration.disableMentions\"\n        [mentionsWarningText]=\"messageComposerConfiguration?.mentionsWarningText\"\n        [mentionsWarningStyle]=\"messageComposerConfiguration?.mentionsWarningStyle\">\n      </cometchat-message-composer>\n    </div>\n    <div *ngIf=\"messageComposerView && !hideMessageComposer\"\n      class=\"cc-messages__composer--customview\">\n      <ng-container\n        *ngTemplateOutlet=\"messageComposerView;context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n  </div>\n  <div class=\"cc-messages__livereaction\">\n    <cometchat-live-reaction *ngIf=\"liveReaction\"\n      [reactionIconURL]=\"reactionName\"\n      [liveReactionStyle]=\"liveReactionStyle\"></cometchat-live-reaction>\n  </div>\n  <div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n    <cometchat-threaded-messages [onClose]=\"closeThreadView\"\n      [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\"\n      [messageActionView]=\"threadedMessageConfiguration.messageActionView\"\n      [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\"\n      [onError]=\"threadedMessageConfiguration.onError\"\n      [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\"\n      [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"\n      [messageListConfiguration]=\"threadedMessageConfiguration.messageListConfiguration\"\n      [messageComposerView]=\"threadedMessageConfiguration.messageComposerView\"\n      [messageListView]=\"threadedMessageConfiguration.messageListView\"\n      [hideMessageComposer]=\"threadedMessageConfiguration.hideMessageComposer\"\n      [messageComposerConfiguration]=\"threadedMessageConfiguration.messageComposerConfiguration\"\n      [disableSoundForMessages]=\"threadedMessageConfiguration.disableSoundForMessages\"\n      ></cometchat-threaded-messages>\n  </div>\n\n  <div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n    <cometchat-details\n      [protectedGroupIcon]=\"detailsConfiguration.protectedGroupIcon\"\n      [passwordGroupIcon]=\"detailsConfiguration.passwordGroupIcon\"\n      [privateGroupIcon]=\"detailsConfiguration.privateGroupIcon\"\n      [backdropStyle]=\"detailsConfiguration.backdropStyle\"\n      [disableUsersPresence]=\"detailsConfiguration?.disableUsersPresence!\"\n      [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\"\n      [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\"\n      [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\"\n      [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"\n      [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\"\n      [listItemStyle]=\"detailsConfiguration.listItemStyle\"\n      [detailsStyle]=\"detailsConfiguration.detailsStyle\"\n      [avatarStyle]=\"detailsConfiguration.avatarStyle\"\n      [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\"\n      [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\"\n      [data]=\"setDetailsTemplate()\"\n      [customProfileView]=\"detailsConfiguration.customProfileView\"\n      [subtitleView]=\"detailsConfiguration.subtitleView\"\n      [hideProfile]=\"detailsConfiguration.hideProfile\"\n      [onError]=\"detailsConfiguration.onError\"\n      [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"\n      [user]=\"user\" [group]=\"group\"></cometchat-details>\n  </div>\n</div>\n<ng-template #headerMenu>\n  <div class=\"cc-messages__headermenu\">\n    <div class=\"cc-messages__auxiliarymenu\"\n      *ngIf=\"getAuxilaryView(); else elseBlock\">\n      <ng-container\n        *ngTemplateOutlet=\"getAuxilaryView();context:{  user: user, group: group }\">\n      </ng-container>\n    </div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\"\n        videoCallIconText=\"\" [user]=\"user\" [group]=\"group\"\n        [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\"\n      [buttonStyle]=\"detailsButtonStyle\"\n      (cc-button-clicked)=\"openDetailsPage()\"></cometchat-button>\n  </div>\n</ng-template>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-messages__wrapper{position:relative;height:100%;width:100%}.cc-messages{display:flex;flex-direction:column;position:relative;height:100%;width:100%;box-sizing:border-box;justify-content:space-between}.cc-messages__headermenu{display:flex;justify-content:center;align-items:center}.cc-messages__threadedmessages,.cc-messages__details{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-messages__header{width:100%}.cc-messages__list{overflow:hidden;width:100%;height:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }, { type: i0.ElementRef }]; }, propDecorators: { messageComposerRef: [{
                 type: ViewChild,
                 args: ["messageComposerRef", { static: false }]
@@ -17645,10 +17811,10 @@ class CometChatGroupsComponent {
     }
 }
 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\">\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?.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 });
 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\">\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?.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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { groupsRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{
@@ -19362,10 +19528,10 @@ class CometChatUsersWithMessagesComponent {
     }
 }
 CometChatUsersWithMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersWithMessagesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatUsersWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersWithMessagesComponent, selector: "cometchat-users-with-messages", inputs: { user: "user", isMobileView: "isMobileView", messageText: "messageText", usersWithMessagesStyle: "usersWithMessagesStyle", messagesConfiguration: "messagesConfiguration", usersConfiguration: "usersConfiguration", onError: "onError" }, viewQueries: [{ propertyName: "userRef", first: true, predicate: ["usersRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messagesRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"usersWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-users\n    #usersRef\n    [activeUser]=\"user\"\n    [hideSearch]=\"usersConfiguration.hideSearch\"\n    [searchIconURL]=\"usersConfiguration.searchIconURL\"\n    [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder\"\n    [onItemClick]=\"usersConfiguration.onItemClick || onItemClick\"\n    [usersStyle]=\"usersConfiguration.usersStyle\"\n    [subtitleView]=\"usersConfiguration.subtitleView\"\n    [options]=\"usersConfiguration.options\"\n    [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder\"\n    [emptyStateView]=\"usersConfiguration.emptyStateView\"\n    [onSelect]=\"usersConfiguration.onSelect\"\n    [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n    [errorStateView]=\"usersConfiguration.errorStateView\"\n    [loadingStateView]=\"usersConfiguration.loadingStateView\"\n    [titleAlignment]=\"usersConfiguration.titleAlignment\"\n    [showSectionHeader]=\"usersConfiguration.showSectionHeader\"\n    [listItemView]=\"usersConfiguration.listItemView\"\n    [menu]=\"usersConfiguration.menu\"\n    [hideSeparator]=\"usersConfiguration.hideSeparator\"\n    [hideError]=\"usersConfiguration.hideError\"\n    [selectionMode]=\"usersConfiguration.selectionMode\"\n    [listItemStyle]=\"usersConfiguration.listItemStyle\"\n\n    ></cometchat-users>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n    [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n    [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n    [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n    [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n    [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n    [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n    [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n    [disableTyping]=\"messagesConfiguration.disableTyping\"\n    [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n    [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n    [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n    [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n    [messageListView]=\"messagesConfiguration.messageListView\"\n    [hideDetails]=\"messagesConfiguration.hideDetails!\"\n    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n</div>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatUsersWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersWithMessagesComponent, selector: "cometchat-users-with-messages", inputs: { user: "user", isMobileView: "isMobileView", messageText: "messageText", usersWithMessagesStyle: "usersWithMessagesStyle", messagesConfiguration: "messagesConfiguration", usersConfiguration: "usersConfiguration", onError: "onError" }, viewQueries: [{ propertyName: "userRef", first: true, predicate: ["usersRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messagesRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"usersWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-users\n    #usersRef\n    [activeUser]=\"user\"\n    [hideSearch]=\"usersConfiguration.hideSearch\"\n    [searchIconURL]=\"usersConfiguration.searchIconURL\"\n    [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder\"\n    [onItemClick]=\"usersConfiguration.onItemClick || onItemClick\"\n    [usersStyle]=\"usersConfiguration.usersStyle\"\n    [subtitleView]=\"usersConfiguration.subtitleView\"\n    [options]=\"usersConfiguration.options\"\n    [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder\"\n    [emptyStateView]=\"usersConfiguration.emptyStateView\"\n    [onSelect]=\"usersConfiguration.onSelect\"\n    [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n    [errorStateView]=\"usersConfiguration.errorStateView\"\n    [loadingStateView]=\"usersConfiguration.loadingStateView\"\n    [titleAlignment]=\"usersConfiguration.titleAlignment\"\n    [showSectionHeader]=\"usersConfiguration.showSectionHeader\"\n    [listItemView]=\"usersConfiguration.listItemView\"\n    [menu]=\"usersConfiguration.menu\"\n    [hideSeparator]=\"usersConfiguration.hideSeparator\"\n    [hideError]=\"usersConfiguration.hideError\"\n    [selectionMode]=\"usersConfiguration.selectionMode\"\n    [listItemStyle]=\"usersConfiguration.listItemStyle\"\n    [statusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n    ></cometchat-users>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n    [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n    [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n    [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n    [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n    [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n    [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n    [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n    [disableTyping]=\"messagesConfiguration.disableTyping\"\n    [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n    [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n    [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n    [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n    [messageListView]=\"messagesConfiguration.messageListView\"\n    [hideDetails]=\"messagesConfiguration.hideDetails!\"\n    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n</div>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersWithMessagesComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-users-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"usersWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-users\n    #usersRef\n    [activeUser]=\"user\"\n    [hideSearch]=\"usersConfiguration.hideSearch\"\n    [searchIconURL]=\"usersConfiguration.searchIconURL\"\n    [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder\"\n    [onItemClick]=\"usersConfiguration.onItemClick || onItemClick\"\n    [usersStyle]=\"usersConfiguration.usersStyle\"\n    [subtitleView]=\"usersConfiguration.subtitleView\"\n    [options]=\"usersConfiguration.options\"\n    [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder\"\n    [emptyStateView]=\"usersConfiguration.emptyStateView\"\n    [onSelect]=\"usersConfiguration.onSelect\"\n    [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n    [errorStateView]=\"usersConfiguration.errorStateView\"\n    [loadingStateView]=\"usersConfiguration.loadingStateView\"\n    [titleAlignment]=\"usersConfiguration.titleAlignment\"\n    [showSectionHeader]=\"usersConfiguration.showSectionHeader\"\n    [listItemView]=\"usersConfiguration.listItemView\"\n    [menu]=\"usersConfiguration.menu\"\n    [hideSeparator]=\"usersConfiguration.hideSeparator\"\n    [hideError]=\"usersConfiguration.hideError\"\n    [selectionMode]=\"usersConfiguration.selectionMode\"\n    [listItemStyle]=\"usersConfiguration.listItemStyle\"\n\n    ></cometchat-users>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n    [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n    [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n    [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n    [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n    [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n    [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n    [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n    [disableTyping]=\"messagesConfiguration.disableTyping\"\n    [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n    [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n    [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n    [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n    [messageListView]=\"messagesConfiguration.messageListView\"\n    [hideDetails]=\"messagesConfiguration.hideDetails!\"\n    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n</div>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: "cometchat-users-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"usersWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-users\n    #usersRef\n    [activeUser]=\"user\"\n    [hideSearch]=\"usersConfiguration.hideSearch\"\n    [searchIconURL]=\"usersConfiguration.searchIconURL\"\n    [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder\"\n    [onItemClick]=\"usersConfiguration.onItemClick || onItemClick\"\n    [usersStyle]=\"usersConfiguration.usersStyle\"\n    [subtitleView]=\"usersConfiguration.subtitleView\"\n    [options]=\"usersConfiguration.options\"\n    [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder\"\n    [emptyStateView]=\"usersConfiguration.emptyStateView\"\n    [onSelect]=\"usersConfiguration.onSelect\"\n    [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n    [errorStateView]=\"usersConfiguration.errorStateView\"\n    [loadingStateView]=\"usersConfiguration.loadingStateView\"\n    [titleAlignment]=\"usersConfiguration.titleAlignment\"\n    [showSectionHeader]=\"usersConfiguration.showSectionHeader\"\n    [listItemView]=\"usersConfiguration.listItemView\"\n    [menu]=\"usersConfiguration.menu\"\n    [hideSeparator]=\"usersConfiguration.hideSeparator\"\n    [hideError]=\"usersConfiguration.hideError\"\n    [selectionMode]=\"usersConfiguration.selectionMode\"\n    [listItemStyle]=\"usersConfiguration.listItemStyle\"\n    [statusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n    ></cometchat-users>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n    [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n    [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n    [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n    [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n    [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n    [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n    [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n    [disableTyping]=\"messagesConfiguration.disableTyping\"\n    [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n    [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n    [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n    [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n    [messageListView]=\"messagesConfiguration.messageListView\"\n    [hideDetails]=\"messagesConfiguration.hideDetails!\"\n    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n</div>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { userRef: [{
                 type: ViewChild,
                 args: ["usersRef", { static: false }]
@@ -21036,6 +21202,10 @@ class CometChatCallLogDetailsComponent {
             height: "28px",
             border: "none",
         };
+        this.labelStyle = {
+            textFont: '600 22px sans-serif, Inter',
+            textColor: 'rgb(20, 20, 20)'
+        };
         this.callDetailsStyle = {
             width: "100%",
             height: "100%",
@@ -21062,11 +21232,6 @@ class CometChatCallLogDetailsComponent {
         this.showParticipantsList = false;
         this.showCallRecordingList = false;
         this.showCallHistory = false;
-        this.dividerStyle = {
-            background: "rgb(222 222 222 / 46%)",
-            height: "1px",
-            width: "100%",
-        };
         this.userListenerId = "userlist_" + new Date().getTime();
         this.limit = 5;
         this.onItemClick = (call) => {
@@ -21125,6 +21290,27 @@ class CometChatCallLogDetailsComponent {
                 border: this.callDetailsStyle.border,
                 borderRadius: this.callDetailsStyle.borderRadius,
                 background: this.callDetailsStyle.background,
+                padding: '16px',
+            };
+        };
+        this.profileContainerStyle = () => {
+            return {
+                height: "auto",
+                width: "100%",
+                minHeight: "150px",
+                padding: "16px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                boxSizing: "border-box",
+                gap: "8px",
+            };
+        };
+        this.getTailViewStyle = () => {
+            return {
+                font: fontHelper(this.themeService?.theme.typography.text3),
+                color: this.themeService.theme.palette.getAccent600()
             };
         };
         this.backButtonStyle = () => {
@@ -21286,7 +21472,7 @@ class CometChatCallLogDetailsComponent {
             width: "100%",
             background: option?.backgroundColor ||
                 this.themeService.theme.palette.getBackground(),
-            borderRadius: "0",
+            borderRadius: "8px",
             titleFont: option?.titleFont ||
                 fontHelper(this.themeService.theme.typography.title2),
             border: "none",
@@ -21296,10 +21482,10 @@ class CometChatCallLogDetailsComponent {
     }
 }
 CometChatCallLogDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatCallLogDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallLogDetailsComponent, selector: "cometchat-call-log-details", inputs: { call: "call", group: "group", user: "user", title: "title", onBackClick: "onBackClick", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", backIconUrl: "backIconUrl", greaterThanIconURL: "greaterThanIconURL", callButtonsConfiguration: "callButtonsConfiguration", callLogParticipantsConfiguration: "callLogParticipantsConfiguration", callLogHistoryConfiguration: "callLogHistoryConfiguration", callLogRecordingsConfiguration: "callLogRecordingsConfiguration", onError: "onError", datePattern: "datePattern", datePattern2: "datePattern2", data: "data", avatarStyle: "avatarStyle", callDetailsStyle: "callDetailsStyle", listItemStyle: "listItemStyle", dateStyle: "dateStyle", callButtonsStyle: "callButtonsStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-call-log-details__wrapper\" *ngIf=\"user || group\" [ngStyle]=\"wrapperStyle()\">\n\n  <div class=\"cc-call-log-details__header\"\n    *ngIf=\"onBackClick && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n    <cometchat-button [iconURL]=\"backIconUrl\" class=\"cc-call-log-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n      (cc-button-clicked)=\"onBackClick()\"></cometchat-button>\n    <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n  </div>\n\n  <div class=\"cc-call-log-details\">\n    <div class=\"cc-call-log-details__profile\"\n      *ngIf=\"!hideProfile && showCallLogDetailOptionList && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n\n\n      <div class=\" cc-call-log-details__default-profile\" *ngIf=\"!customProfileView;else listitem\">\n        <cometchat-avatar [name]=\"user?.getName() ?? group?.getName()\" [avatarStyle]=\"avatarStyle\"\n          [image]=\"user?.getAvatar() ?? group?.getIcon()\">\n        </cometchat-avatar>\n\n        <cometchat-label [text]=\"user?.getName() ?? this.group?.getName()\"></cometchat-label>\n      </div>\n    </div>\n    <div class=\"cc-call-log-details__section-list\"\n      *ngIf=\"showCallLogDetailOptionList && defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-call-log-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-call-log-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"></cometchat-label>\n        </div>\n        <div class=\"cc-call-log-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-call-log-details__options\" *ngFor=\"let option of getTemplateOptions(item);  trackBy: trackByFnOption \">\n            <div class=\"cc-call-log-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\">\n              <div class=\"cc-call-log-details__option-element\">\n\n                <div class=\"cc-call-log-details__calling-default-option\" *ngIf=\"option.id=='calls'\">\n\n                  <cometchat-call-buttons [user]=\"user\" [group]=\"group\"\n                    [callButtonsStyle]=\"callButtonsConfiguration.callButtonsStyle\"\n                    [onVideoCallClick]=\"callButtonsConfiguration.onVideoCallClick\"\n                    [onVoiceCallClick]=\"callButtonsConfiguration.onVoiceCallClick\"\n                    [videoCallIconURL]=\"callButtonsConfiguration.videoCallIconURL\"\n                    [voiceCallIconURL]=\"callButtonsConfiguration.voiceCallIconURL\"></cometchat-call-buttons>\n                </div>\n                <cometchat-list-item *ngIf=\"option.id==='callStatus'\" [listItemStyle]=\"getListItemStyle(option)\"\n                  [hideSeparator]=\"true\">\n                  <div class=\"cc-call-log-details__call-Status\" slot=\"subtitleView\" >\n                    <div *ngIf=\"!subtitleView; else subtitle\" style=\"width: 100%;\">\n                      <div> <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n                          [pattern]=\"datePattern2\">\n                        </cometchat-date></div>\n\n                      <div\n                      class=\"cc-call-log-details__call-Status__subTitle\">\n                        <div>\n\n                          <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n                            [pattern]=\"datePattern\">\n                          </cometchat-date>\n                          <cometchat-label [text]=\"getSubtitle(call)\" [labelStyle]=\"subtitleStyle(option)\">\n                          </cometchat-label>\n                        </div>\n                        <div class=\"cc-call-log-details__call-Status__tailview\"> {{ getTailView(call?.getTotalDurationInMinutes()!) }}\n                        </div>\n\n                      </div>\n\n\n                    </div>\n\n                    <ng-template #subtitle>\n                      <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n                      </ng-container>\n                    </ng-template>\n                  </div>\n\n\n                </cometchat-list-item>\n                <cometchat-list-item *ngIf=\"option.id!=='calls' && option.id!=='callStatus' \"\n                  (cc-listitem-clicked)=\"onOptionClick(option)\" [listItemStyle]=\"getListItemStyle(option)\"\n                  [title]=\"option.title\" [hideSeparator]=\"true\">\n               \n                      <div slot=\"tailView\" class=\"cc-call-log-details__secondary-view__tail-view\"\n                       >\n                        {{option.tail}}\n                        <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"greaterThanIconURL\"></cometchat-icon>\n                      </div>\n\n               \n\n                </cometchat-list-item>\n\n              </div>\n              <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n\n    <div *ngIf=\"showParticipantsList || showCallRecordingList || showCallHistory\" style=\" height: 100%;\">\n\n      <div *ngIf=\"showParticipantsList\" style=\"height: 100%;\">\n        <cometchat-call-log-participants [call]=\"call\"\n          [onBackClick]=\"callLogParticipantsConfiguration.onBackClick || handlePageOnBackClick\"\n          [backIconUrl]=\"callLogParticipantsConfiguration.backIconUrl || backIconUrl\"\n          [avatarStyle]=\"callLogParticipantsConfiguration.avatarStyle\"\n          [onItemClick]=\"callLogParticipantsConfiguration.onItemClick!\"\n          [datePattern]=\"callLogParticipantsConfiguration.datePattern\"\n          [subtitleView]=\"callLogParticipantsConfiguration.subtitleView\"\n          [listItemView]=\"callLogParticipantsConfiguration.listItemView\"\n\n          [listItemStyle]=\"callLogParticipantsConfiguration.listItemStyle\" [callLogParticipantsStyle]=\"\n        callLogParticipantsConfiguration.callLogParticipantsStyle\"\n       \n          [tailView]=\"callLogParticipantsConfiguration.tailView\"></cometchat-call-log-participants>\n      </div>\n      <div *ngIf=\"showCallRecordingList\" style=\"height:100%;\">\n        <cometchat-call-log-recordings [call]=\"call\"\n          [backIconUrl]=\"callLogRecordingsConfiguration.backIconUrl || backIconUrl\" [onBackClick]=\"\n        callLogRecordingsConfiguration.onBackClick || handlePageOnBackClick\n      \" [onItemClick]=\"callLogRecordingsConfiguration.onItemClick!\"\n          [datePattern]=\"callLogRecordingsConfiguration.datePattern!\"\n          [listItemStyle]=\"callLogRecordingsConfiguration.listItemStyle\" callLogRecordingsStyle=\"\n        callLogRecordingsConfiguration.callLogRecordingsStyle\n        callLogRecordingsConfiguration.hideDownloadButton || false\n      \" [onDownloadClick]=\"callLogRecordingsConfiguration.onDownloadClick!\"\n          [listItemView]=\"callLogRecordingsConfiguration.listItemView\"\n          [subtitleView]=\"callLogRecordingsConfiguration.subtitleView\"\n          [tailView]=\"callLogRecordingsConfiguration.tailView\"></cometchat-call-log-recordings>\n      </div>\n      <div *ngIf=\"showCallHistory\" style=\"height: 100%; \">\n        <cometchat-call-log-history [call]=\"call\" [user]=\"user\" [group]=\"group\" [onBackClick]=\"handlePageOnBackClick\"\n          [backIconUrl]=\"callLogHistoryConfiguration.backIconUrl || backIconUrl\"\n          [emptyStateView]=\"callLogHistoryConfiguration.emptyStateView\"\n          [errorStateView]=\"callLogHistoryConfiguration.errorStateView\"\n          [loadingIconURL]=\"callLogHistoryConfiguration.loadingIconURL\"\n          [loadingStateView]=\"callLogHistoryConfiguration.loadingStateView\"\n          [tailView]=\"callLogHistoryConfiguration.tailView\" [callLogRequestBuilder]=\"\n            callLogHistoryConfiguration.callLogRequestBuilder\n          \" [onItemClick]=\"callLogHistoryConfiguration.onItemClick || onItemClick\" [onBackClick]=\"\n            callLogHistoryConfiguration.onBackClick || handlePageOnBackClick\n          \" [listItemStyle]=\"callLogHistoryConfiguration.listItemStyle\"\n          [datePattern]=\"callLogHistoryConfiguration.datePattern\" [dateSeparatorPattern]=\"\n            callLogHistoryConfiguration.dateSeparatorPattern\n          \" [callLogHistoryStyle]=\"\n            callLogHistoryConfiguration.callLogHistoryStyle\n          \" [onError]=\"callLogHistoryConfiguration.onError!\"></cometchat-call-log-history>\n      </div>\n\n    </div>\n  </div>\n</div>\n\n\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-call-log-details__header{display:flex;gap:10px;align-items:center;height:3%}.cc-call-log-details{height:98%}.cc-call-log-details__profile{display:flex;align-items:center;justify-content:center}.cc-call-log-details__default-profile{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.cc-call-log-details__section{margin:10px 3px 3px}.cc-call-log-details__option{margin-top:5px}.cc-call-log-details__calling-default-option{display:flex;align-items:center;justify-content:center;margin:10px}.cc-call-log-details__call-Status{display:flex;justify-content:space-between}.cc-call-log-details__call-Status__subTitle{display:flex;justify-content:space-between;margin:10px 0;padding-right:8px;width:100%}.cc-call-log-details__call-Status__tailview{color:gray}.cc-call-log-details__secondary-view__tail-view{display:flex;align-items:center;justify-content:center;gap:5px;color:RGBA(20,20,20,.68)}\n"], components: [{ type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }, { type: CometChatCallLogParticipantsComponent, selector: "cometchat-call-log-participants", inputs: ["title", "call", "backIconUrl", "onBackClick", "datePattern", "subtitleView", "listItemView", "onError", "hideSeparator", "avatarStyle", "dateStyle", "CallLogParticipantsStyle", "listItemStyle"] }, { type: CometChatCallLogRecordingsComponent, selector: "cometchat-call-log-recordings", inputs: ["title", "call", "onBackClick", "backIconURL", "datePattern", "subtitleView", "listItemView", "downloadIconURL", "onDownloadClick", "hideDownloadButton", "onError", "avatarStyle", "dateStyle", "CallLogRecordingsStyle", "listItemStyle", "options"] }, { type: CometChatCallLogHistoryComponent, selector: "cometchat-call-log-history", inputs: ["user", "group", "title", "emptyStateView", "errorStateView", "loadingStateView", "subtitleView", "listItemView", "menu", "emptyStateText", "errorStateText", "loadingIconURL", "backIconUrl", "onItemClick", "onBackClick", "callLogRequestBuilder", "DateSeparatorPattern", "hideSeparator", "dateSeparatorStyle", "hideError", "onError", "showSectionHeader", "sectionHeaderField", "datePattern", "avatarStyle", "dateStyle", "CallLogHistoryStyle", "listItemStyle"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatCallLogDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallLogDetailsComponent, selector: "cometchat-call-log-details", inputs: { call: "call", group: "group", user: "user", title: "title", onBackClick: "onBackClick", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", backIconUrl: "backIconUrl", greaterThanIconURL: "greaterThanIconURL", callButtonsConfiguration: "callButtonsConfiguration", callLogParticipantsConfiguration: "callLogParticipantsConfiguration", callLogHistoryConfiguration: "callLogHistoryConfiguration", callLogRecordingsConfiguration: "callLogRecordingsConfiguration", onError: "onError", datePattern: "datePattern", datePattern2: "datePattern2", data: "data", avatarStyle: "avatarStyle", labelStyle: "labelStyle", callDetailsStyle: "callDetailsStyle", listItemStyle: "listItemStyle", dateStyle: "dateStyle", callButtonsStyle: "callButtonsStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-call-log-details__wrapper\" *ngIf=\"user || group\" [ngStyle]=\"wrapperStyle()\">\n\n  <div class=\"cc-call-log-details__header\"\n    *ngIf=\"onBackClick && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n    <cometchat-button [iconURL]=\"backIconUrl\" class=\"cc-call-log-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n      (cc-button-clicked)=\"onBackClick()\"></cometchat-button>\n    <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n  </div>\n\n  <div class=\"cc-call-log-details\">\n    <div class=\"cc-call-log-details__profile\"\n      *ngIf=\"!hideProfile && showCallLogDetailOptionList && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n\n\n      <div class=\" cc-call-log-details__default-profile\" *ngIf=\"!customProfileView;else listitem\" [ngStyle]=\"profileContainerStyle()\">\n        <cometchat-avatar [name]=\"user?.getName() ?? group?.getName()\" [avatarStyle]=\"avatarStyle\"\n          [image]=\"user?.getAvatar() ?? group?.getIcon()\">\n        </cometchat-avatar>\n\n        <cometchat-label [text]=\"user?.getName() ?? this.group?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n      </div>\n    </div>\n    <div class=\"cc-call-log-details__section-list\"\n      *ngIf=\"showCallLogDetailOptionList && defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-call-log-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-call-log-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"></cometchat-label>\n        </div>\n        <div class=\"cc-call-log-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-call-log-details__options\" *ngFor=\"let option of getTemplateOptions(item);  trackBy: trackByFnOption \">\n            <div class=\"cc-call-log-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\">\n              <div class=\"cc-call-log-details__option-element\">\n\n                <div class=\"cc-call-log-details__calling-default-option\" *ngIf=\"option.id=='calls'\">\n\n                  <cometchat-call-buttons [user]=\"user\" [group]=\"group\"\n                    [callButtonsStyle]=\"callButtonsConfiguration.callButtonsStyle\"\n                    [onVideoCallClick]=\"callButtonsConfiguration.onVideoCallClick\"\n                    [onVoiceCallClick]=\"callButtonsConfiguration.onVoiceCallClick\"\n                    [videoCallIconURL]=\"callButtonsConfiguration.videoCallIconURL\"\n                    [voiceCallIconURL]=\"callButtonsConfiguration.voiceCallIconURL\"></cometchat-call-buttons>\n                </div>\n                <cometchat-list-item *ngIf=\"option.id==='callStatus'\" [listItemStyle]=\"getListItemStyle(option)\"\n                  [hideSeparator]=\"true\">\n                  <div class=\"cc-call-log-details__call-Status\" slot=\"subtitleView\" >\n                    <div *ngIf=\"!subtitleView; else subtitle\" style=\"width: 100%;\">\n                      <div> <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n                          [pattern]=\"datePattern2\">\n                        </cometchat-date></div>\n\n                      <div\n                      class=\"cc-call-log-details__call-Status__subTitle\">\n                        <div>\n\n                          <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n                            [pattern]=\"datePattern\">\n                          </cometchat-date>\n                          <cometchat-label [text]=\"getSubtitle(call)\" [labelStyle]=\"subtitleStyle(option)\">\n                          </cometchat-label>\n                        </div>\n                        <div class=\"cc-call-log-details__call-Status__tailview\" [style]=\"getTailViewStyle()\"> {{ getTailView(call?.getTotalDurationInMinutes()!) }}\n                        </div>\n\n                      </div>\n\n\n                    </div>\n\n                    <ng-template #subtitle>\n                      <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n                      </ng-container>\n                    </ng-template>\n                  </div>\n\n\n                </cometchat-list-item>\n                <cometchat-list-item *ngIf=\"option.id!=='calls' && option.id!=='callStatus' \"\n                  (cc-listitem-clicked)=\"onOptionClick(option)\" [listItemStyle]=\"getListItemStyle(option)\"\n                  [title]=\"option.title\" [hideSeparator]=\"true\">\n               \n                      <div slot=\"tailView\" class=\"cc-call-log-details__secondary-view__tail-view\" [style]=\"getTailViewStyle()\"\n                       >\n                        {{option.tail}}\n                        <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"greaterThanIconURL\"></cometchat-icon>\n                      </div>\n\n               \n\n                </cometchat-list-item>\n\n              </div>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n\n    <div *ngIf=\"showParticipantsList || showCallRecordingList || showCallHistory\" style=\" height: 100%;\">\n\n      <div *ngIf=\"showParticipantsList\" style=\"height: 100%;\">\n        <cometchat-call-log-participants [call]=\"call\"\n          [onBackClick]=\"callLogParticipantsConfiguration.onBackClick || handlePageOnBackClick\"\n          [backIconUrl]=\"callLogParticipantsConfiguration.backIconUrl || backIconUrl\"\n          [avatarStyle]=\"callLogParticipantsConfiguration.avatarStyle\"\n          [onItemClick]=\"callLogParticipantsConfiguration.onItemClick!\"\n          [datePattern]=\"callLogParticipantsConfiguration.datePattern\"\n          [subtitleView]=\"callLogParticipantsConfiguration.subtitleView\"\n          [listItemView]=\"callLogParticipantsConfiguration.listItemView\"\n\n          [listItemStyle]=\"callLogParticipantsConfiguration.listItemStyle\" [callLogParticipantsStyle]=\"\n        callLogParticipantsConfiguration.callLogParticipantsStyle\"\n       \n          [tailView]=\"callLogParticipantsConfiguration.tailView\"></cometchat-call-log-participants>\n      </div>\n      <div *ngIf=\"showCallRecordingList\" style=\"height:100%;\">\n        <cometchat-call-log-recordings [call]=\"call\"\n          [backIconUrl]=\"callLogRecordingsConfiguration.backIconUrl || backIconUrl\" [onBackClick]=\"\n        callLogRecordingsConfiguration.onBackClick || handlePageOnBackClick\n      \" [onItemClick]=\"callLogRecordingsConfiguration.onItemClick!\"\n          [datePattern]=\"callLogRecordingsConfiguration.datePattern!\"\n          [listItemStyle]=\"callLogRecordingsConfiguration.listItemStyle\" callLogRecordingsStyle=\"\n        callLogRecordingsConfiguration.callLogRecordingsStyle\n        callLogRecordingsConfiguration.hideDownloadButton || false\n      \" [onDownloadClick]=\"callLogRecordingsConfiguration.onDownloadClick!\"\n          [listItemView]=\"callLogRecordingsConfiguration.listItemView\"\n          [subtitleView]=\"callLogRecordingsConfiguration.subtitleView\"\n          [tailView]=\"callLogRecordingsConfiguration.tailView\"></cometchat-call-log-recordings>\n      </div>\n      <div *ngIf=\"showCallHistory\" style=\"height: 100%; \">\n        <cometchat-call-log-history [call]=\"call\" [user]=\"user\" [group]=\"group\" [onBackClick]=\"handlePageOnBackClick\"\n          [backIconUrl]=\"callLogHistoryConfiguration.backIconUrl || backIconUrl\"\n          [emptyStateView]=\"callLogHistoryConfiguration.emptyStateView\"\n          [errorStateView]=\"callLogHistoryConfiguration.errorStateView\"\n          [loadingIconURL]=\"callLogHistoryConfiguration.loadingIconURL\"\n          [loadingStateView]=\"callLogHistoryConfiguration.loadingStateView\"\n          [tailView]=\"callLogHistoryConfiguration.tailView\" [callLogRequestBuilder]=\"\n            callLogHistoryConfiguration.callLogRequestBuilder\n          \" [onItemClick]=\"callLogHistoryConfiguration.onItemClick || onItemClick\" [onBackClick]=\"\n            callLogHistoryConfiguration.onBackClick || handlePageOnBackClick\n          \" [listItemStyle]=\"callLogHistoryConfiguration.listItemStyle\"\n          [datePattern]=\"callLogHistoryConfiguration.datePattern\" [dateSeparatorPattern]=\"\n            callLogHistoryConfiguration.dateSeparatorPattern\n          \" [callLogHistoryStyle]=\"\n            callLogHistoryConfiguration.callLogHistoryStyle\n          \" [onError]=\"callLogHistoryConfiguration.onError!\"></cometchat-call-log-history>\n      </div>\n\n    </div>\n  </div>\n</div>\n\n\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-call-log-details__header{display:flex;gap:10px;align-items:center;height:3%}.cc-call-log-details{height:98%}.cc-call-log-details__profile{display:flex;align-items:center;justify-content:center}.cc-call-log-details__default-profile{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.cc-call-log-details__section{margin:10px 3px 3px}.cc-call-log-details__option{margin-top:5px}.cc-call-log-details__calling-default-option{display:flex;align-items:center;justify-content:center;margin:10px}.cc-call-log-details__call-Status{display:flex;justify-content:space-between}.cc-call-log-details__call-Status__subTitle{display:flex;justify-content:space-between;margin:10px 0;padding-right:8px;width:100%}.cc-call-log-details__call-Status__tailview{color:gray}.cc-call-log-details__secondary-view__tail-view{display:flex;align-items:center;justify-content:center;gap:5px;color:RGBA(20,20,20,.68)}\n"], components: [{ type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle", "outgoingCallConfiguration", "ongoingCallConfiguration"] }, { type: CometChatCallLogParticipantsComponent, selector: "cometchat-call-log-participants", inputs: ["title", "call", "backIconUrl", "onBackClick", "datePattern", "subtitleView", "listItemView", "onError", "hideSeparator", "avatarStyle", "dateStyle", "CallLogParticipantsStyle", "listItemStyle"] }, { type: CometChatCallLogRecordingsComponent, selector: "cometchat-call-log-recordings", inputs: ["title", "call", "onBackClick", "backIconURL", "datePattern", "subtitleView", "listItemView", "downloadIconURL", "onDownloadClick", "hideDownloadButton", "onError", "avatarStyle", "dateStyle", "CallLogRecordingsStyle", "listItemStyle", "options"] }, { type: CometChatCallLogHistoryComponent, selector: "cometchat-call-log-history", inputs: ["user", "group", "title", "emptyStateView", "errorStateView", "loadingStateView", "subtitleView", "listItemView", "menu", "emptyStateText", "errorStateText", "loadingIconURL", "backIconUrl", "onItemClick", "onBackClick", "callLogRequestBuilder", "DateSeparatorPattern", "hideSeparator", "dateSeparatorStyle", "hideError", "onError", "showSectionHeader", "sectionHeaderField", "datePattern", "avatarStyle", "dateStyle", "CallLogHistoryStyle", "listItemStyle"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: CometChatCallLogDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-call-log-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-log-details__wrapper\" *ngIf=\"user || group\" [ngStyle]=\"wrapperStyle()\">\n\n  <div class=\"cc-call-log-details__header\"\n    *ngIf=\"onBackClick && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n    <cometchat-button [iconURL]=\"backIconUrl\" class=\"cc-call-log-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n      (cc-button-clicked)=\"onBackClick()\"></cometchat-button>\n    <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n  </div>\n\n  <div class=\"cc-call-log-details\">\n    <div class=\"cc-call-log-details__profile\"\n      *ngIf=\"!hideProfile && showCallLogDetailOptionList && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n\n\n      <div class=\" cc-call-log-details__default-profile\" *ngIf=\"!customProfileView;else listitem\">\n        <cometchat-avatar [name]=\"user?.getName() ?? group?.getName()\" [avatarStyle]=\"avatarStyle\"\n          [image]=\"user?.getAvatar() ?? group?.getIcon()\">\n        </cometchat-avatar>\n\n        <cometchat-label [text]=\"user?.getName() ?? this.group?.getName()\"></cometchat-label>\n      </div>\n    </div>\n    <div class=\"cc-call-log-details__section-list\"\n      *ngIf=\"showCallLogDetailOptionList && defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-call-log-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-call-log-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"></cometchat-label>\n        </div>\n        <div class=\"cc-call-log-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-call-log-details__options\" *ngFor=\"let option of getTemplateOptions(item);  trackBy: trackByFnOption \">\n            <div class=\"cc-call-log-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\">\n              <div class=\"cc-call-log-details__option-element\">\n\n                <div class=\"cc-call-log-details__calling-default-option\" *ngIf=\"option.id=='calls'\">\n\n                  <cometchat-call-buttons [user]=\"user\" [group]=\"group\"\n                    [callButtonsStyle]=\"callButtonsConfiguration.callButtonsStyle\"\n                    [onVideoCallClick]=\"callButtonsConfiguration.onVideoCallClick\"\n                    [onVoiceCallClick]=\"callButtonsConfiguration.onVoiceCallClick\"\n                    [videoCallIconURL]=\"callButtonsConfiguration.videoCallIconURL\"\n                    [voiceCallIconURL]=\"callButtonsConfiguration.voiceCallIconURL\"></cometchat-call-buttons>\n                </div>\n                <cometchat-list-item *ngIf=\"option.id==='callStatus'\" [listItemStyle]=\"getListItemStyle(option)\"\n                  [hideSeparator]=\"true\">\n                  <div class=\"cc-call-log-details__call-Status\" slot=\"subtitleView\" >\n                    <div *ngIf=\"!subtitleView; else subtitle\" style=\"width: 100%;\">\n                      <div> <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n                          [pattern]=\"datePattern2\">\n                        </cometchat-date></div>\n\n                      <div\n                      class=\"cc-call-log-details__call-Status__subTitle\">\n                        <div>\n\n                          <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n                            [pattern]=\"datePattern\">\n                          </cometchat-date>\n                          <cometchat-label [text]=\"getSubtitle(call)\" [labelStyle]=\"subtitleStyle(option)\">\n                          </cometchat-label>\n                        </div>\n                        <div class=\"cc-call-log-details__call-Status__tailview\"> {{ getTailView(call?.getTotalDurationInMinutes()!) }}\n                        </div>\n\n                      </div>\n\n\n                    </div>\n\n                    <ng-template #subtitle>\n                      <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n                      </ng-container>\n                    </ng-template>\n                  </div>\n\n\n                </cometchat-list-item>\n                <cometchat-list-item *ngIf=\"option.id!=='calls' && option.id!=='callStatus' \"\n                  (cc-listitem-clicked)=\"onOptionClick(option)\" [listItemStyle]=\"getListItemStyle(option)\"\n                  [title]=\"option.title\" [hideSeparator]=\"true\">\n               \n                      <div slot=\"tailView\" class=\"cc-call-log-details__secondary-view__tail-view\"\n                       >\n                        {{option.tail}}\n                        <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"greaterThanIconURL\"></cometchat-icon>\n                      </div>\n\n               \n\n                </cometchat-list-item>\n\n              </div>\n              <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n\n    <div *ngIf=\"showParticipantsList || showCallRecordingList || showCallHistory\" style=\" height: 100%;\">\n\n      <div *ngIf=\"showParticipantsList\" style=\"height: 100%;\">\n        <cometchat-call-log-participants [call]=\"call\"\n          [onBackClick]=\"callLogParticipantsConfiguration.onBackClick || handlePageOnBackClick\"\n          [backIconUrl]=\"callLogParticipantsConfiguration.backIconUrl || backIconUrl\"\n          [avatarStyle]=\"callLogParticipantsConfiguration.avatarStyle\"\n          [onItemClick]=\"callLogParticipantsConfiguration.onItemClick!\"\n          [datePattern]=\"callLogParticipantsConfiguration.datePattern\"\n          [subtitleView]=\"callLogParticipantsConfiguration.subtitleView\"\n          [listItemView]=\"callLogParticipantsConfiguration.listItemView\"\n\n          [listItemStyle]=\"callLogParticipantsConfiguration.listItemStyle\" [callLogParticipantsStyle]=\"\n        callLogParticipantsConfiguration.callLogParticipantsStyle\"\n       \n          [tailView]=\"callLogParticipantsConfiguration.tailView\"></cometchat-call-log-participants>\n      </div>\n      <div *ngIf=\"showCallRecordingList\" style=\"height:100%;\">\n        <cometchat-call-log-recordings [call]=\"call\"\n          [backIconUrl]=\"callLogRecordingsConfiguration.backIconUrl || backIconUrl\" [onBackClick]=\"\n        callLogRecordingsConfiguration.onBackClick || handlePageOnBackClick\n      \" [onItemClick]=\"callLogRecordingsConfiguration.onItemClick!\"\n          [datePattern]=\"callLogRecordingsConfiguration.datePattern!\"\n          [listItemStyle]=\"callLogRecordingsConfiguration.listItemStyle\" callLogRecordingsStyle=\"\n        callLogRecordingsConfiguration.callLogRecordingsStyle\n        callLogRecordingsConfiguration.hideDownloadButton || false\n      \" [onDownloadClick]=\"callLogRecordingsConfiguration.onDownloadClick!\"\n          [listItemView]=\"callLogRecordingsConfiguration.listItemView\"\n          [subtitleView]=\"callLogRecordingsConfiguration.subtitleView\"\n          [tailView]=\"callLogRecordingsConfiguration.tailView\"></cometchat-call-log-recordings>\n      </div>\n      <div *ngIf=\"showCallHistory\" style=\"height: 100%; \">\n        <cometchat-call-log-history [call]=\"call\" [user]=\"user\" [group]=\"group\" [onBackClick]=\"handlePageOnBackClick\"\n          [backIconUrl]=\"callLogHistoryConfiguration.backIconUrl || backIconUrl\"\n          [emptyStateView]=\"callLogHistoryConfiguration.emptyStateView\"\n          [errorStateView]=\"callLogHistoryConfiguration.errorStateView\"\n          [loadingIconURL]=\"callLogHistoryConfiguration.loadingIconURL\"\n          [loadingStateView]=\"callLogHistoryConfiguration.loadingStateView\"\n          [tailView]=\"callLogHistoryConfiguration.tailView\" [callLogRequestBuilder]=\"\n            callLogHistoryConfiguration.callLogRequestBuilder\n          \" [onItemClick]=\"callLogHistoryConfiguration.onItemClick || onItemClick\" [onBackClick]=\"\n            callLogHistoryConfiguration.onBackClick || handlePageOnBackClick\n          \" [listItemStyle]=\"callLogHistoryConfiguration.listItemStyle\"\n          [datePattern]=\"callLogHistoryConfiguration.datePattern\" [dateSeparatorPattern]=\"\n            callLogHistoryConfiguration.dateSeparatorPattern\n          \" [callLogHistoryStyle]=\"\n            callLogHistoryConfiguration.callLogHistoryStyle\n          \" [onError]=\"callLogHistoryConfiguration.onError!\"></cometchat-call-log-history>\n      </div>\n\n    </div>\n  </div>\n</div>\n\n\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-call-log-details__header{display:flex;gap:10px;align-items:center;height:3%}.cc-call-log-details{height:98%}.cc-call-log-details__profile{display:flex;align-items:center;justify-content:center}.cc-call-log-details__default-profile{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.cc-call-log-details__section{margin:10px 3px 3px}.cc-call-log-details__option{margin-top:5px}.cc-call-log-details__calling-default-option{display:flex;align-items:center;justify-content:center;margin:10px}.cc-call-log-details__call-Status{display:flex;justify-content:space-between}.cc-call-log-details__call-Status__subTitle{display:flex;justify-content:space-between;margin:10px 0;padding-right:8px;width:100%}.cc-call-log-details__call-Status__tailview{color:gray}.cc-call-log-details__secondary-view__tail-view{display:flex;align-items:center;justify-content:center;gap:5px;color:RGBA(20,20,20,.68)}\n"] }]
+            args: [{ selector: "cometchat-call-log-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-log-details__wrapper\" *ngIf=\"user || group\" [ngStyle]=\"wrapperStyle()\">\n\n  <div class=\"cc-call-log-details__header\"\n    *ngIf=\"onBackClick && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n    <cometchat-button [iconURL]=\"backIconUrl\" class=\"cc-call-log-details__close-button\" [buttonStyle]=\"backButtonStyle()\"\n      (cc-button-clicked)=\"onBackClick()\"></cometchat-button>\n    <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n  </div>\n\n  <div class=\"cc-call-log-details\">\n    <div class=\"cc-call-log-details__profile\"\n      *ngIf=\"!hideProfile && showCallLogDetailOptionList && !(showParticipantsList || showCallRecordingList || showCallHistory)\">\n\n\n      <div class=\" cc-call-log-details__default-profile\" *ngIf=\"!customProfileView;else listitem\" [ngStyle]=\"profileContainerStyle()\">\n        <cometchat-avatar [name]=\"user?.getName() ?? group?.getName()\" [avatarStyle]=\"avatarStyle\"\n          [image]=\"user?.getAvatar() ?? group?.getIcon()\">\n        </cometchat-avatar>\n\n        <cometchat-label [text]=\"user?.getName() ?? this.group?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n      </div>\n    </div>\n    <div class=\"cc-call-log-details__section-list\"\n      *ngIf=\"showCallLogDetailOptionList && defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-call-log-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-call-log-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"></cometchat-label>\n        </div>\n        <div class=\"cc-call-log-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-call-log-details__options\" *ngFor=\"let option of getTemplateOptions(item);  trackBy: trackByFnOption \">\n            <div class=\"cc-call-log-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\">\n              <div class=\"cc-call-log-details__option-element\">\n\n                <div class=\"cc-call-log-details__calling-default-option\" *ngIf=\"option.id=='calls'\">\n\n                  <cometchat-call-buttons [user]=\"user\" [group]=\"group\"\n                    [callButtonsStyle]=\"callButtonsConfiguration.callButtonsStyle\"\n                    [onVideoCallClick]=\"callButtonsConfiguration.onVideoCallClick\"\n                    [onVoiceCallClick]=\"callButtonsConfiguration.onVoiceCallClick\"\n                    [videoCallIconURL]=\"callButtonsConfiguration.videoCallIconURL\"\n                    [voiceCallIconURL]=\"callButtonsConfiguration.voiceCallIconURL\"></cometchat-call-buttons>\n                </div>\n                <cometchat-list-item *ngIf=\"option.id==='callStatus'\" [listItemStyle]=\"getListItemStyle(option)\"\n                  [hideSeparator]=\"true\">\n                  <div class=\"cc-call-log-details__call-Status\" slot=\"subtitleView\" >\n                    <div *ngIf=\"!subtitleView; else subtitle\" style=\"width: 100%;\">\n                      <div> <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n                          [pattern]=\"datePattern2\">\n                        </cometchat-date></div>\n\n                      <div\n                      class=\"cc-call-log-details__call-Status__subTitle\">\n                        <div>\n\n                          <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.getInitiatedAt()\"\n                            [pattern]=\"datePattern\">\n                          </cometchat-date>\n                          <cometchat-label [text]=\"getSubtitle(call)\" [labelStyle]=\"subtitleStyle(option)\">\n                          </cometchat-label>\n                        </div>\n                        <div class=\"cc-call-log-details__call-Status__tailview\" [style]=\"getTailViewStyle()\"> {{ getTailView(call?.getTotalDurationInMinutes()!) }}\n                        </div>\n\n                      </div>\n\n\n                    </div>\n\n                    <ng-template #subtitle>\n                      <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n                      </ng-container>\n                    </ng-template>\n                  </div>\n\n\n                </cometchat-list-item>\n                <cometchat-list-item *ngIf=\"option.id!=='calls' && option.id!=='callStatus' \"\n                  (cc-listitem-clicked)=\"onOptionClick(option)\" [listItemStyle]=\"getListItemStyle(option)\"\n                  [title]=\"option.title\" [hideSeparator]=\"true\">\n               \n                      <div slot=\"tailView\" class=\"cc-call-log-details__secondary-view__tail-view\" [style]=\"getTailViewStyle()\"\n                       >\n                        {{option.tail}}\n                        <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"greaterThanIconURL\"></cometchat-icon>\n                      </div>\n\n               \n\n                </cometchat-list-item>\n\n              </div>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n\n\n\n    <div *ngIf=\"showParticipantsList || showCallRecordingList || showCallHistory\" style=\" height: 100%;\">\n\n      <div *ngIf=\"showParticipantsList\" style=\"height: 100%;\">\n        <cometchat-call-log-participants [call]=\"call\"\n          [onBackClick]=\"callLogParticipantsConfiguration.onBackClick || handlePageOnBackClick\"\n          [backIconUrl]=\"callLogParticipantsConfiguration.backIconUrl || backIconUrl\"\n          [avatarStyle]=\"callLogParticipantsConfiguration.avatarStyle\"\n          [onItemClick]=\"callLogParticipantsConfiguration.onItemClick!\"\n          [datePattern]=\"callLogParticipantsConfiguration.datePattern\"\n          [subtitleView]=\"callLogParticipantsConfiguration.subtitleView\"\n          [listItemView]=\"callLogParticipantsConfiguration.listItemView\"\n\n          [listItemStyle]=\"callLogParticipantsConfiguration.listItemStyle\" [callLogParticipantsStyle]=\"\n        callLogParticipantsConfiguration.callLogParticipantsStyle\"\n       \n          [tailView]=\"callLogParticipantsConfiguration.tailView\"></cometchat-call-log-participants>\n      </div>\n      <div *ngIf=\"showCallRecordingList\" style=\"height:100%;\">\n        <cometchat-call-log-recordings [call]=\"call\"\n          [backIconUrl]=\"callLogRecordingsConfiguration.backIconUrl || backIconUrl\" [onBackClick]=\"\n        callLogRecordingsConfiguration.onBackClick || handlePageOnBackClick\n      \" [onItemClick]=\"callLogRecordingsConfiguration.onItemClick!\"\n          [datePattern]=\"callLogRecordingsConfiguration.datePattern!\"\n          [listItemStyle]=\"callLogRecordingsConfiguration.listItemStyle\" callLogRecordingsStyle=\"\n        callLogRecordingsConfiguration.callLogRecordingsStyle\n        callLogRecordingsConfiguration.hideDownloadButton || false\n      \" [onDownloadClick]=\"callLogRecordingsConfiguration.onDownloadClick!\"\n          [listItemView]=\"callLogRecordingsConfiguration.listItemView\"\n          [subtitleView]=\"callLogRecordingsConfiguration.subtitleView\"\n          [tailView]=\"callLogRecordingsConfiguration.tailView\"></cometchat-call-log-recordings>\n      </div>\n      <div *ngIf=\"showCallHistory\" style=\"height: 100%; \">\n        <cometchat-call-log-history [call]=\"call\" [user]=\"user\" [group]=\"group\" [onBackClick]=\"handlePageOnBackClick\"\n          [backIconUrl]=\"callLogHistoryConfiguration.backIconUrl || backIconUrl\"\n          [emptyStateView]=\"callLogHistoryConfiguration.emptyStateView\"\n          [errorStateView]=\"callLogHistoryConfiguration.errorStateView\"\n          [loadingIconURL]=\"callLogHistoryConfiguration.loadingIconURL\"\n          [loadingStateView]=\"callLogHistoryConfiguration.loadingStateView\"\n          [tailView]=\"callLogHistoryConfiguration.tailView\" [callLogRequestBuilder]=\"\n            callLogHistoryConfiguration.callLogRequestBuilder\n          \" [onItemClick]=\"callLogHistoryConfiguration.onItemClick || onItemClick\" [onBackClick]=\"\n            callLogHistoryConfiguration.onBackClick || handlePageOnBackClick\n          \" [listItemStyle]=\"callLogHistoryConfiguration.listItemStyle\"\n          [datePattern]=\"callLogHistoryConfiguration.datePattern\" [dateSeparatorPattern]=\"\n            callLogHistoryConfiguration.dateSeparatorPattern\n          \" [callLogHistoryStyle]=\"\n            callLogHistoryConfiguration.callLogHistoryStyle\n          \" [onError]=\"callLogHistoryConfiguration.onError!\"></cometchat-call-log-history>\n      </div>\n\n    </div>\n  </div>\n</div>\n\n\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-call-log-details__header{display:flex;gap:10px;align-items:center;height:3%}.cc-call-log-details{height:98%}.cc-call-log-details__profile{display:flex;align-items:center;justify-content:center}.cc-call-log-details__default-profile{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.cc-call-log-details__section{margin:10px 3px 3px}.cc-call-log-details__option{margin-top:5px}.cc-call-log-details__calling-default-option{display:flex;align-items:center;justify-content:center;margin:10px}.cc-call-log-details__call-Status{display:flex;justify-content:space-between}.cc-call-log-details__call-Status__subTitle{display:flex;justify-content:space-between;margin:10px 0;padding-right:8px;width:100%}.cc-call-log-details__call-Status__tailview{color:gray}.cc-call-log-details__secondary-view__tail-view{display:flex;align-items:center;justify-content:center;gap:5px;color:RGBA(20,20,20,.68)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { call: [{
                 type: Input
             }], group: [{
@@ -21338,6 +21524,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], avatarStyle: [{
                 type: Input
+            }], labelStyle: [{
+                type: Input
             }], callDetailsStyle: [{
                 type: Input
             }], listItemStyle: [{
@@ -21544,10 +21732,10 @@ class CometChatCallLogsWithDetailsComponent {
     }
 }
 CometChatCallLogsWithDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogsWithDetailsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatCallLogsWithDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallLogsWithDetailsComponent, selector: "cometchat-call-logs-with-details", inputs: { isMobileView: "isMobileView", messageText: "messageText", withDetailsStyle: "withDetailsStyle", showMoreInfo: "showMoreInfo", backdropStyle: "backdropStyle", call: "call", callLogDetailsConfiguration: "callLogDetailsConfiguration", callLogConfiguration: "callLogConfiguration", onError: "onError" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-details__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-details__sidebar\" [ngClass]=\"{mobile : isMobileView}\">\n    <cometchat-call-logs [activeCall]=\"activeCall\" [showMoreInfo]=\"showMoreInfo\" [backdropStyle]=\"backdropStyle\"\n      [activeCall]=\"activeCall\" [titleAlignment]=\"callLogConfiguration?.titleAlignment!\"\n      [emptyStateView]=\"callLogConfiguration.emptyStateView\" \n      [errorStateView]=\"callLogConfiguration.errorStateView\"\n      [subtitleView]=\"callLogConfiguration.subtitleView\" \n      [listItemView]=\"callLogConfiguration.listItemView\" \n      [tailView]=\"callLogConfiguration.tailView\" \n      [loadingIconURL]=\"callLogConfiguration.loadingIconURL\" [loadingStateView]=\"callLogConfiguration.loadingStateView\"\n      [callLogRequestBuilder]=\"callLogConfiguration.callLogRequestBuilder\"\n      [onItemClick]=\"callLogConfiguration.onItemClick!\" [onInfoClick]=\"callLogConfiguration.onInfoClick || onInfoClick! \"\n      [onError]=\"callLogConfiguration.onError!\" [listItemStyle]=\"callLogConfiguration.listItemStyle\"\n      [infoIconUrl]=\"callLogConfiguration.infoIconUrl\" [datePattern]=\"callLogConfiguration.datePattern\"\n      [dateSeparatorPattern]=\"callLogConfiguration.dateSeparatorPattern\"\n      [incomingAudioCallIconUrl]=\"callLogConfiguration.incomingAudioCallIconUrl\"\n      [incomingVideoCallIconUrl]=\"callLogConfiguration.incomingVideoCallIconUrl\"\n      [outgoingAudioCallIconUrl]=\"callLogConfiguration.outgoingAudioCallIconUrl\"\n      [outgoingVideoCallIconUrl]=\"callLogConfiguration.outgoingVideoCallIconUrl\"\n      [missedAudioCallIconUrl]=\"callLogConfiguration.missedAudioCallIconUrl\"\n      [missedVideoCallIconUrl]=\"callLogConfiguration.missedVideoCallIconUrl\"\n      [callLogsStyle]=\"callLogConfiguration.callLogsStyle\" [avatarStyle]=\"callLogConfiguration.avatarStyle\"\n      [hideSeparator]=\"callLogConfiguration.hideSeparator\"\n      [outgoingCallConfiguration]=\"callLogConfiguration.outgoingCallConfiguration\"></cometchat-call-logs>\n  </div>\n  <div class=\"cc-with-details__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"activeCall && (user || group)\">\n    <!--call details Screen-->\n    <cometchat-call-log-details [user]=\"user!\" [group]=\"group!\" [call]=\"call\"\n      [backIconUrl]=\"computedCallLogDetailsConfig.backIconUrl\" [avatarStyle]=\"computedCallLogDetailsConfig.avatarStyle\"\n      [onBackClick]=\"computedCallLogDetailsConfig.onBackClick!\"\n      [callLogHistoryConfiguration]=\"computedCallLogDetailsConfig.callLogHistoryConfiguration\"\n      [callLogParticipantsConfiguration]=\"computedCallLogDetailsConfig.callLogParticipantsConfiguration\"\n      [callLogRecordingsConfiguration]=\"computedCallLogDetailsConfig.callLogRecordingsConfiguration\"\n      [callLogDetailStyle]=\"computedCallLogDetailsConfig.callLogDetailsStyle\">\n    </cometchat-call-log-details>\n  </div>\n\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>", styles: [".cc-with-details__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-details__sidebar{width:280px;height:100%;position:relative}.cc-with-details__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometchatCallLogsComponent, selector: "cometchat-call-logs", inputs: ["title", "titleAlignment", "listItemView", "subtitleView", "tailView", "menu", "emptyStateView", "errorStateView", "emptyStateText", "errorStateText", "loadingStateView", "loadingIconURL", "infoIconUrl", "missedAudioCallIconUrl", "missedVideoCallIconUrl", "outgoingAudioCallIconUrl", "outgoingVideoCallIconUrl", "incomingAudioCallIconUrl", "incomingVideoCallIconUrl", "callLogRequestBuilder", "cometchatCallObject", "onItemClick", "onInfoClick", "onError", "activeCall", "datePattern", "DateSeparatorPattern", "callLogsStyle", "avatarStyle", "hideSeparator", "dateSeparatorStyle", "outgoingCallConfiguration", "hideError", "showSectionHeader", "showMoreInfo", "sectionHeaderField", "backdropStyle", "dateStyle", "listItemStyle", "ongoingCallConfiguration"] }, { type: CometChatCallLogDetailsComponent, selector: "cometchat-call-log-details", inputs: ["call", "group", "user", "title", "onBackClick", "hideProfile", "subtitleView", "customProfileView", "backIconUrl", "greaterThanIconURL", "callButtonsConfiguration", "callLogParticipantsConfiguration", "callLogHistoryConfiguration", "callLogRecordingsConfiguration", "onError", "datePattern", "datePattern2", "data", "avatarStyle", "callDetailsStyle", "listItemStyle", "dateStyle", "callButtonsStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatCallLogsWithDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallLogsWithDetailsComponent, selector: "cometchat-call-logs-with-details", inputs: { isMobileView: "isMobileView", messageText: "messageText", withDetailsStyle: "withDetailsStyle", showMoreInfo: "showMoreInfo", backdropStyle: "backdropStyle", call: "call", callLogDetailsConfiguration: "callLogDetailsConfiguration", callLogConfiguration: "callLogConfiguration", onError: "onError" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-details__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-details__sidebar\" [ngClass]=\"{mobile : isMobileView}\">\n    <cometchat-call-logs [activeCall]=\"activeCall\" [showMoreInfo]=\"showMoreInfo\" [backdropStyle]=\"backdropStyle\"\n      [activeCall]=\"activeCall\" [titleAlignment]=\"callLogConfiguration?.titleAlignment!\"\n      [emptyStateView]=\"callLogConfiguration.emptyStateView\" \n      [errorStateView]=\"callLogConfiguration.errorStateView\"\n      [subtitleView]=\"callLogConfiguration.subtitleView\" \n      [listItemView]=\"callLogConfiguration.listItemView\" \n      [tailView]=\"callLogConfiguration.tailView\" \n      [loadingIconURL]=\"callLogConfiguration.loadingIconURL\" [loadingStateView]=\"callLogConfiguration.loadingStateView\"\n      [callLogRequestBuilder]=\"callLogConfiguration.callLogRequestBuilder\"\n      [onItemClick]=\"callLogConfiguration.onItemClick!\" [onInfoClick]=\"callLogConfiguration.onInfoClick || onInfoClick! \"\n      [onError]=\"callLogConfiguration.onError!\" [listItemStyle]=\"callLogConfiguration.listItemStyle\"\n      [infoIconUrl]=\"callLogConfiguration.infoIconUrl\" [datePattern]=\"callLogConfiguration.datePattern\"\n      [dateSeparatorPattern]=\"callLogConfiguration.dateSeparatorPattern\"\n      [incomingAudioCallIconUrl]=\"callLogConfiguration.incomingAudioCallIconUrl\"\n      [incomingVideoCallIconUrl]=\"callLogConfiguration.incomingVideoCallIconUrl\"\n      [outgoingAudioCallIconUrl]=\"callLogConfiguration.outgoingAudioCallIconUrl\"\n      [outgoingVideoCallIconUrl]=\"callLogConfiguration.outgoingVideoCallIconUrl\"\n      [missedAudioCallIconUrl]=\"callLogConfiguration.missedAudioCallIconUrl\"\n      [missedVideoCallIconUrl]=\"callLogConfiguration.missedVideoCallIconUrl\"\n      [callLogsStyle]=\"callLogConfiguration.callLogsStyle\" [avatarStyle]=\"callLogConfiguration.avatarStyle\"\n      [hideSeparator]=\"callLogConfiguration.hideSeparator\"\n      [outgoingCallConfiguration]=\"callLogConfiguration.outgoingCallConfiguration\"></cometchat-call-logs>\n  </div>\n  <div class=\"cc-with-details__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"activeCall && (user || group)\">\n    <!--call details Screen-->\n    <cometchat-call-log-details [user]=\"user!\" [group]=\"group!\" [call]=\"call\"\n      [backIconUrl]=\"computedCallLogDetailsConfig.backIconUrl\" [avatarStyle]=\"computedCallLogDetailsConfig.avatarStyle\"\n      [onBackClick]=\"computedCallLogDetailsConfig.onBackClick || onBackClick\"\n      [callLogHistoryConfiguration]=\"computedCallLogDetailsConfig.callLogHistoryConfiguration\"\n      [callLogParticipantsConfiguration]=\"computedCallLogDetailsConfig.callLogParticipantsConfiguration\"\n      [callLogRecordingsConfiguration]=\"computedCallLogDetailsConfig.callLogRecordingsConfiguration\"\n      [callLogDetailStyle]=\"computedCallLogDetailsConfig.callLogDetailsStyle\">\n    </cometchat-call-log-details>\n  </div>\n\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>", styles: [".cc-with-details__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-details__sidebar{width:280px;height:100%;position:relative}.cc-with-details__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometchatCallLogsComponent, selector: "cometchat-call-logs", inputs: ["title", "titleAlignment", "listItemView", "subtitleView", "tailView", "menu", "emptyStateView", "errorStateView", "emptyStateText", "errorStateText", "loadingStateView", "loadingIconURL", "infoIconUrl", "missedAudioCallIconUrl", "missedVideoCallIconUrl", "outgoingAudioCallIconUrl", "outgoingVideoCallIconUrl", "incomingAudioCallIconUrl", "incomingVideoCallIconUrl", "callLogRequestBuilder", "cometchatCallObject", "onItemClick", "onInfoClick", "onError", "activeCall", "datePattern", "DateSeparatorPattern", "callLogsStyle", "avatarStyle", "hideSeparator", "dateSeparatorStyle", "outgoingCallConfiguration", "hideError", "showSectionHeader", "showMoreInfo", "sectionHeaderField", "backdropStyle", "dateStyle", "listItemStyle", "ongoingCallConfiguration"] }, { type: CometChatCallLogDetailsComponent, selector: "cometchat-call-log-details", inputs: ["call", "group", "user", "title", "onBackClick", "hideProfile", "subtitleView", "customProfileView", "backIconUrl", "greaterThanIconURL", "callButtonsConfiguration", "callLogParticipantsConfiguration", "callLogHistoryConfiguration", "callLogRecordingsConfiguration", "onError", "datePattern", "datePattern2", "data", "avatarStyle", "labelStyle", "callDetailsStyle", "listItemStyle", "dateStyle", "callButtonsStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallLogsWithDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-call-logs-with-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-details__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-details__sidebar\" [ngClass]=\"{mobile : isMobileView}\">\n    <cometchat-call-logs [activeCall]=\"activeCall\" [showMoreInfo]=\"showMoreInfo\" [backdropStyle]=\"backdropStyle\"\n      [activeCall]=\"activeCall\" [titleAlignment]=\"callLogConfiguration?.titleAlignment!\"\n      [emptyStateView]=\"callLogConfiguration.emptyStateView\" \n      [errorStateView]=\"callLogConfiguration.errorStateView\"\n      [subtitleView]=\"callLogConfiguration.subtitleView\" \n      [listItemView]=\"callLogConfiguration.listItemView\" \n      [tailView]=\"callLogConfiguration.tailView\" \n      [loadingIconURL]=\"callLogConfiguration.loadingIconURL\" [loadingStateView]=\"callLogConfiguration.loadingStateView\"\n      [callLogRequestBuilder]=\"callLogConfiguration.callLogRequestBuilder\"\n      [onItemClick]=\"callLogConfiguration.onItemClick!\" [onInfoClick]=\"callLogConfiguration.onInfoClick || onInfoClick! \"\n      [onError]=\"callLogConfiguration.onError!\" [listItemStyle]=\"callLogConfiguration.listItemStyle\"\n      [infoIconUrl]=\"callLogConfiguration.infoIconUrl\" [datePattern]=\"callLogConfiguration.datePattern\"\n      [dateSeparatorPattern]=\"callLogConfiguration.dateSeparatorPattern\"\n      [incomingAudioCallIconUrl]=\"callLogConfiguration.incomingAudioCallIconUrl\"\n      [incomingVideoCallIconUrl]=\"callLogConfiguration.incomingVideoCallIconUrl\"\n      [outgoingAudioCallIconUrl]=\"callLogConfiguration.outgoingAudioCallIconUrl\"\n      [outgoingVideoCallIconUrl]=\"callLogConfiguration.outgoingVideoCallIconUrl\"\n      [missedAudioCallIconUrl]=\"callLogConfiguration.missedAudioCallIconUrl\"\n      [missedVideoCallIconUrl]=\"callLogConfiguration.missedVideoCallIconUrl\"\n      [callLogsStyle]=\"callLogConfiguration.callLogsStyle\" [avatarStyle]=\"callLogConfiguration.avatarStyle\"\n      [hideSeparator]=\"callLogConfiguration.hideSeparator\"\n      [outgoingCallConfiguration]=\"callLogConfiguration.outgoingCallConfiguration\"></cometchat-call-logs>\n  </div>\n  <div class=\"cc-with-details__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"activeCall && (user || group)\">\n    <!--call details Screen-->\n    <cometchat-call-log-details [user]=\"user!\" [group]=\"group!\" [call]=\"call\"\n      [backIconUrl]=\"computedCallLogDetailsConfig.backIconUrl\" [avatarStyle]=\"computedCallLogDetailsConfig.avatarStyle\"\n      [onBackClick]=\"computedCallLogDetailsConfig.onBackClick!\"\n      [callLogHistoryConfiguration]=\"computedCallLogDetailsConfig.callLogHistoryConfiguration\"\n      [callLogParticipantsConfiguration]=\"computedCallLogDetailsConfig.callLogParticipantsConfiguration\"\n      [callLogRecordingsConfiguration]=\"computedCallLogDetailsConfig.callLogRecordingsConfiguration\"\n      [callLogDetailStyle]=\"computedCallLogDetailsConfig.callLogDetailsStyle\">\n    </cometchat-call-log-details>\n  </div>\n\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>", styles: [".cc-with-details__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-details__sidebar{width:280px;height:100%;position:relative}.cc-with-details__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: "cometchat-call-logs-with-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-details__wrapper\" [ngStyle]=\"chatsWrapperStyles()\">\n  <div class=\"cc-with-details__sidebar\" [ngClass]=\"{mobile : isMobileView}\">\n    <cometchat-call-logs [activeCall]=\"activeCall\" [showMoreInfo]=\"showMoreInfo\" [backdropStyle]=\"backdropStyle\"\n      [activeCall]=\"activeCall\" [titleAlignment]=\"callLogConfiguration?.titleAlignment!\"\n      [emptyStateView]=\"callLogConfiguration.emptyStateView\" \n      [errorStateView]=\"callLogConfiguration.errorStateView\"\n      [subtitleView]=\"callLogConfiguration.subtitleView\" \n      [listItemView]=\"callLogConfiguration.listItemView\" \n      [tailView]=\"callLogConfiguration.tailView\" \n      [loadingIconURL]=\"callLogConfiguration.loadingIconURL\" [loadingStateView]=\"callLogConfiguration.loadingStateView\"\n      [callLogRequestBuilder]=\"callLogConfiguration.callLogRequestBuilder\"\n      [onItemClick]=\"callLogConfiguration.onItemClick!\" [onInfoClick]=\"callLogConfiguration.onInfoClick || onInfoClick! \"\n      [onError]=\"callLogConfiguration.onError!\" [listItemStyle]=\"callLogConfiguration.listItemStyle\"\n      [infoIconUrl]=\"callLogConfiguration.infoIconUrl\" [datePattern]=\"callLogConfiguration.datePattern\"\n      [dateSeparatorPattern]=\"callLogConfiguration.dateSeparatorPattern\"\n      [incomingAudioCallIconUrl]=\"callLogConfiguration.incomingAudioCallIconUrl\"\n      [incomingVideoCallIconUrl]=\"callLogConfiguration.incomingVideoCallIconUrl\"\n      [outgoingAudioCallIconUrl]=\"callLogConfiguration.outgoingAudioCallIconUrl\"\n      [outgoingVideoCallIconUrl]=\"callLogConfiguration.outgoingVideoCallIconUrl\"\n      [missedAudioCallIconUrl]=\"callLogConfiguration.missedAudioCallIconUrl\"\n      [missedVideoCallIconUrl]=\"callLogConfiguration.missedVideoCallIconUrl\"\n      [callLogsStyle]=\"callLogConfiguration.callLogsStyle\" [avatarStyle]=\"callLogConfiguration.avatarStyle\"\n      [hideSeparator]=\"callLogConfiguration.hideSeparator\"\n      [outgoingCallConfiguration]=\"callLogConfiguration.outgoingCallConfiguration\"></cometchat-call-logs>\n  </div>\n  <div class=\"cc-with-details__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"activeCall && (user || group)\">\n    <!--call details Screen-->\n    <cometchat-call-log-details [user]=\"user!\" [group]=\"group!\" [call]=\"call\"\n      [backIconUrl]=\"computedCallLogDetailsConfig.backIconUrl\" [avatarStyle]=\"computedCallLogDetailsConfig.avatarStyle\"\n      [onBackClick]=\"computedCallLogDetailsConfig.onBackClick || onBackClick\"\n      [callLogHistoryConfiguration]=\"computedCallLogDetailsConfig.callLogHistoryConfiguration\"\n      [callLogParticipantsConfiguration]=\"computedCallLogDetailsConfig.callLogParticipantsConfiguration\"\n      [callLogRecordingsConfiguration]=\"computedCallLogDetailsConfig.callLogRecordingsConfiguration\"\n      [callLogDetailStyle]=\"computedCallLogDetailsConfig.callLogDetailsStyle\">\n    </cometchat-call-log-details>\n  </div>\n\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n  </div>", styles: [".cc-with-details__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-details__sidebar{width:280px;height:100%;position:relative}.cc-with-details__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { isMobileView: [{
                 type: Input
             }], messageText: [{