@cometchat/chat-uikit-angular 4.0.0-beta.1.1 → 4.0.0-beta.1.3

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

@@ -1,7 +1,7 @@
-import { CometChatMessageOption, CometChatUIKitConstants, localize, fontHelper, CometChatMessageTemplate, CometChatMessageComposerAction, CometChatTheme, CometChatMessageEvents, MessageStatus, CometChatUIEvents, IconButtonAlignment, CometChatCallEvents, CometChatLocalize, SelectionMode, TitleAlignment as TitleAlignment$1, States as States$1, CometChatUserEvents, CometChatGroupEvents, DatePatterns, CometChatConversationEvents, MessageListAlignment, TimestampAlignment, DocumentIconAlignment, MessageBubbleAlignment as MessageBubbleAlignment$1, Placement, AuxiliaryButtonAlignment } from '@cometchat/uikit-resources';
+import { CometChatMessageOption, CometChatUIKitConstants, localize, fontHelper, CometChatMessageTemplate, CometChatMessageComposerAction, CometChatTheme, CometChatMessageEvents, MessageStatus, CometChatUIEvents, IconButtonAlignment, CometChatCallEvents, CometChatLocalize, SelectionMode, TitleAlignment as TitleAlignment$1, States as States$1, CometChatUserEvents, CometChatGroupEvents, DatePatterns, CometChatConversationEvents, MessageListAlignment, TimestampAlignment, DocumentIconAlignment, MessageBubbleAlignment as MessageBubbleAlignment$1, Placement, AuxiliaryButtonAlignment, TabAlignment } from '@cometchat/uikit-resources';
 export { AuxiliaryButtonAlignment, CometChatDetailsOption, CometChatDetailsTemplate, CometChatLocalize, CometChatMessageComposerAction, CometChatMessageOption, CometChatMessageTemplate, CometChatOption, CometChatPalette, CometChatTabItem, CometChatTheme, CometChatTypography, CometChatUIKitConstants, DatePatterns, DocumentIconAlignment, IconButtonAlignment, MessageBubbleAlignment, MessageListAlignment, MessageStatus, Placement, Receipts, SelectionMode, States, TabAlignment, TimestampAlignment, TitleAlignment, fontHelper, localize } from '@cometchat/uikit-resources';
-import { ConversationUtils, CallingDetailsUtils, CollaborativeDocumentConstants, CollaborativeWhiteboardConstants, MessageTranslationConfiguration, PollsConstants, CometChatUIKitUtility, CometChatSoundManager, SmartRepliesConfiguration, StickersConstants, StickersConfiguration, OutgoingCallStyle, CallscreenStyle, CallButtonsStyle, TitleAlignment, States, StorageUtils, IncomingCallStyle, UsersStyle, SelectionMode as SelectionMode$1, AddMembersStyle, MessageHeaderStyle, ListStyle, BannedMembersStyle, MessageReceiptUtils, MessageStatus as MessageStatus$1, ConversationsStyle, MessageBubbleAlignment, MessageTranslationConstants, MessageTranslationStyle, ReactionsConstants, LinkPreviewConstants, ThumbnailGenerationConstants, MessageListStyle, LinkPreviewStyle, SmartRepliesConstants, MessageComposerStyle, MessageListConfiguration, MessageComposerConfiguration, ThreadedMessagesStyle, GroupMemberUtils, GroupMembersStyle, TransferOwnershipStyle, AddMembersConfiguration, BannedMembersConfiguration, GroupMembersConfiguration, TransferOwnershipConfiguration, DetailsUtils, DetailsStyle, MessageHeaderConfiguration, ThreadedMessagesConfiguration, DetailsConfiguration, MessagesStyle, MessagesConfiguration, ConversationsConfiguration, WithMessagesStyle, GroupsStyle, CreateGroupConfiguration, JoinGroupConfiguration, GroupsConfiguration, UsersConfiguration } from '@cometchat/uikit-shared';
-export { AddMembersConfiguration, BannedMembersConfiguration, CallButtonsConfiguration, CallDetailsConfiguration, CallHistoryConfiguration, CallingDetailsUtils, CallscreenConfiguration, CollaborativeDocumentConfiguration, CollaborativeDocumentConstants, CollaborativeWhiteboardConfiguration, CollaborativeWhiteboardConstants, ConversationUtils, ConversationsConfiguration, CreateGroupConfiguration, DetailsConfiguration, DetailsUtils, GroupMemberUtils, GroupMembersConfiguration, GroupsConfiguration, ImageModerationConfiguration, ImageModerationConstants, JoinGroupConfiguration, LinkPreviewConstants, MessageBubbleConfiguration, MessageComposerConfiguration, MessageHeaderConfiguration, MessageListConfiguration, MessageReceiptUtils, MessageTranslationConfiguration, MessageTranslationConstants, MessagesConfiguration, OutgoingCallConfiguration, PollsConstants, ReactionsConstants, SmartRepliesConfiguration, SmartRepliesConstants, StickersConfiguration, StickersConstants, ThreadedMessagesConfiguration, ThumbnailGenerationConstants, TransferOwnershipConfiguration, UsersConfiguration } from '@cometchat/uikit-shared';
+import { ConversationUtils, CallingDetailsUtils, CollaborativeDocumentConstants, CollaborativeWhiteboardConstants, MessageTranslationConfiguration, PollsConstants, CometChatUIKitUtility, CometChatSoundManager, SmartRepliesConfiguration, StickersConstants, StickersConfiguration, CometChatUIKitCalls, CallscreenStyle, OutgoingCallStyle, OutgoingCallConfiguration, CallScreenConfiguration, CallButtonsStyle, TitleAlignment, States, StorageUtils, IncomingCallStyle, UsersStyle, SelectionMode as SelectionMode$1, AddMembersStyle, MessageHeaderStyle, ListStyle, BannedMembersStyle, MessageReceiptUtils, MessageStatus as MessageStatus$1, ConversationsStyle, MessageBubbleAlignment, MessageTranslationConstants, MessageTranslationStyle, ReactionsConstants, LinkPreviewConstants, ThumbnailGenerationConstants, MessageListStyle, LinkPreviewStyle, SmartRepliesConstants, MessageComposerStyle, MessageListConfiguration, MessageComposerConfiguration, ThreadedMessagesStyle, GroupMemberUtils, GroupMembersStyle, TransferOwnershipStyle, AddMembersConfiguration, BannedMembersConfiguration, GroupMembersConfiguration, TransferOwnershipConfiguration, DetailsUtils, DetailsStyle, MessageHeaderConfiguration, ThreadedMessagesConfiguration, DetailsConfiguration, MessagesStyle, MessagesConfiguration, ConversationsConfiguration, WithMessagesStyle, GroupsStyle, CreateGroupConfiguration, JoinGroupConfiguration, GroupsConfiguration, UsersConfiguration, CallHistoryStyle, CallButtonsConfiguration, CallDetailsConfiguration, CallHistoryConfiguration, WithDetailsStyle } from '@cometchat/uikit-shared';
+export { AddMembersConfiguration, BannedMembersConfiguration, CallButtonsConfiguration, CallDetailsConfiguration, CallHistoryConfiguration, CallScreenConfiguration, CallingDetailsUtils, CollaborativeDocumentConfiguration, CollaborativeDocumentConstants, CollaborativeWhiteboardConfiguration, CollaborativeWhiteboardConstants, ConversationUtils, ConversationsConfiguration, CreateGroupConfiguration, DetailsConfiguration, DetailsUtils, GroupMemberUtils, GroupMembersConfiguration, GroupsConfiguration, ImageModerationConfiguration, ImageModerationConstants, JoinGroupConfiguration, LinkPreviewConstants, MessageBubbleConfiguration, MessageComposerConfiguration, MessageHeaderConfiguration, MessageListConfiguration, MessageReceiptUtils, MessageTranslationConfiguration, MessageTranslationConstants, MessagesConfiguration, OutgoingCallConfiguration, PollsConstants, ReactionsConstants, SmartRepliesConfiguration, SmartRepliesConstants, StickersConfiguration, StickersConstants, ThreadedMessagesConfiguration, ThumbnailGenerationConstants, TransferOwnershipConfiguration, UsersConfiguration } from '@cometchat/uikit-shared';
 import { CometChat } from '@cometchat-pro/chat';
 import * as i0 from '@angular/core';
 import { Injectable, Component, Input, ChangeDetectionStrategy, ViewChild, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@@ -1061,6 +1061,15 @@ class SmartReplyExtension {
     }
 }
 
+function CometChatException(error) {
+    return new CometChat.CometChatException({
+        message: error?.message,
+        details: error?.details,
+        code: error?.code,
+        name: error?.name
+    });
+}
+
 class StickersExtensionDecorator extends DataSourceDecorator {
     constructor(dataSource, configuration = new StickersConfiguration({})) {
         super(dataSource);
@@ -1106,7 +1115,7 @@ class StickersExtensionDecorator extends DataSourceDecorator {
             }
             catch (error) {
                 if (onError) {
-                    onError(error);
+                    onError(CometChatException(error));
                 }
             }
         };
@@ -1258,15 +1267,13 @@ class CometChatUIKit {
         const appSettings = appSettingsBuilder.build();
         return new Promise((resolve, reject) => {
             CometChat.init(uiKitSettings?.appId, appSettings).then(() => {
-                CometChat.getLoggedinUser().then((user) => {
-                    if (user) {
-                        ChatConfigurator.init();
-                        this.initiateAfterLogin();
-                    }
+                CometChatUIKit.getLoggedinUser()?.then((user) => {
+                    ChatConfigurator.init();
+                    this.initiateAfterLogin();
                     return resolve(user);
-                }).catch((error) => {
-                    console.log(error);
-                    return reject(error);
+                })
+                    .catch((error) => {
+                    reject(error);
                 });
             })
                 .catch((error) => {
@@ -1274,11 +1281,21 @@ class CometChatUIKit {
             });
         });
     }
+    static getLoggedinUser() {
+        return new Promise((resolve, reject) => {
+            CometChat.getLoggedinUser().then((user) => {
+                return resolve(user);
+            }).catch((error) => {
+                return reject(error);
+            })
+                .catch((error) => {
+                return reject(error);
+            });
+        });
+    }
     static enableCalling() {
-        if (window) {
-            if (window.isCallingEnabled) {
-                new CallingExtension().enable();
-            }
+        if (CometChatUIKitCalls) {
+            new CallingExtension().enable();
         }
     }
     static initiateAfterLogin() {
@@ -1292,24 +1309,31 @@ class CometChatUIKit {
             }
         }
     }
-    static async login(uid) {
+    static async login(details) {
         if (!CometChatUIKit.checkAuthSettings())
             return undefined;
         return new Promise((resolve, reject) => {
-            CometChat.login(uid, CometChatUIKit.uiKitSettings.authKey).then((user) => {
-                resolve(user);
-                ChatConfigurator.init();
-                this.initiateAfterLogin();
-            }).catch((error) => {
+            CometChatUIKit.getLoggedinUser()?.then((user) => {
+                if (user) {
+                    resolve(user);
+                    ChatConfigurator.init();
+                    this.initiateAfterLogin();
+                }
+                else {
+                    let args = details.uid ? [details.uid, CometChatUIKit.uiKitSettings.authKey] : [details.authToken];
+                    CometChat.login(...args).then((user) => {
+                        resolve(user);
+                        ChatConfigurator.init();
+                        this.initiateAfterLogin();
+                    }).catch((error) => {
+                        reject(error);
+                    });
+                }
+            })
+                .catch((error) => {
                 reject(error);
             });
         });
-        // calling SDK method
-        // if calling is enabled
-        // if appsetting does not contain extensions then enable all
-        // StickerExtension.enable()...enable all extensions by default
-        // else if appsetting contains some extensions
-        // loop through extension list and call enable for each extension
     }
     static async createUser(user) {
         if (!CometChatUIKit.checkAuthSettings())
@@ -1433,17 +1457,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 *
 */
 class CometChatOngoingCallComponent {
-    constructor() {
+    constructor(themeService) {
+        this.themeService = themeService;
         this.ongoingCallStyle = {
             maxHeight: "100%",
             maxWidth: "100%",
             border: "none",
             borderRadius: "0",
-            background: "grey",
+            background: "#1c2226",
             minHeight: "400px",
             minWidth: "400px",
-            minimizeIconTint: "white",
-            maximizeIconTint: "white",
+            // minimizeIconTint:"white",
+            // maximizeIconTint:"white",
         };
         this.resizeIconHoverText = localize("RESIZE");
         this.sessionID = "";
@@ -1451,14 +1476,29 @@ class CometChatOngoingCallComponent {
         this.maximizeIconURL = "assets/increase-size.svg";
     }
     ngOnInit() {
+        this.setongoingCallStyle();
+    }
+    setongoingCallStyle() {
+        let defaultStyle = new CallscreenStyle({
+            maxHeight: "100%",
+            maxWidth: "100%",
+            border: "none",
+            borderRadius: "0",
+            background: "#1c2226",
+            minHeight: "400px",
+            minWidth: "400px",
+            minimizeIconTint: this.themeService.theme.palette.getAccent("dark"),
+            maximizeIconTint: this.themeService.theme.palette.getAccent("dark"),
+        });
+        this.ongoingCallStyle = { ...defaultStyle, ...this.ongoingCallStyle };
     }
 }
-CometChatOngoingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOngoingCallComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CometChatOngoingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOngoingCallComponent, deps: [{ token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
 CometChatOngoingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: { ongoingCallStyle: "ongoingCallStyle", resizeIconHoverText: "resizeIconHoverText", sessionID: "sessionID", minimizeIconURL: "minimizeIconURL", maximizeIconURL: "maximizeIconURL", callSettingsBuilder: "callSettingsBuilder" }, ngImport: i0, template: "<cometchat-callscreen [callscreenStyle]=\"ongoingCallStyle\" [callSettingsBuilder]=\"callSettingsBuilder\" [resizeIconHoverText]=\"resizeIconHoverText\" [sessionID]=\"sessionID\" [minimizeIconURL]=\"minimizeIconURL\" [maximizeIconURL]=\"maximizeIconURL\"></cometchat-callscreen>", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatOngoingCallComponent, decorators: [{
             type: Component,
             args: [{ selector: "cometchat-ongoing-call", template: "<cometchat-callscreen [callscreenStyle]=\"ongoingCallStyle\" [callSettingsBuilder]=\"callSettingsBuilder\" [resizeIconHoverText]=\"resizeIconHoverText\" [sessionID]=\"sessionID\" [minimizeIconURL]=\"minimizeIconURL\" [maximizeIconURL]=\"maximizeIconURL\"></cometchat-callscreen>", styles: [""] }]
-        }], propDecorators: { ongoingCallStyle: [{
+        }], ctorParameters: function () { return [{ type: CometChatThemeService }]; }, propDecorators: { ongoingCallStyle: [{
                 type: Input
             }], resizeIconHoverText: [{
                 type: Input
@@ -1496,18 +1536,7 @@ class CometChatOutgoingCallComponent {
             width: "180px",
             height: "180px",
         };
-        this.outgoingCallStyle = {
-            width: "100%",
-            height: "100%",
-            titleTextFont: "700 22px Inter",
-            titleTextColor: "RGB(20, 20, 20)",
-            subtitleTextFont: "400 15px Inter",
-            subtitleTextColor: "RGBA(20, 20, 20, 0.58)",
-            declineButtonTextFont: "400 12px Inter",
-            declineButtonTextColor: "RGBA(20, 20, 20, 0.58)",
-            declineButtonIconTint: "white",
-            declineButtonIconBackground: "red"
-        };
+        this.outgoingCallStyle = {};
         this.buttonStyle = {
             height: "fit-content",
             width: "fit-content",
@@ -1562,6 +1591,7 @@ class CometChatOutgoingCallComponent {
         }
     }
     ngOnInit() {
+        console.log(this.outgoingCallStyle);
     }
     playAudio() {
         if (this.customSoundForCalls) {
@@ -1585,11 +1615,11 @@ class CometChatOutgoingCallComponent {
     }
     setOutgoingCallStyle() {
         let defaultStyle = new OutgoingCallStyle({
-            width: "100%",
-            height: "100%",
+            width: "360px",
+            height: "581px",
             background: this.themeService.theme.palette.getBackground(),
             border: "none",
-            borderRadius: "0",
+            borderRadius: "8px",
             titleTextFont: fontHelper(this.themeService.theme.typography.title1),
             titleTextColor: this.themeService.theme.palette.getAccent(),
             subtitleTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
@@ -1690,6 +1720,8 @@ class CometChatCallButtonsComponent {
             borderRadius: "0",
             background: "transparent"
         };
+        this.outgoingCallConfiguration = new OutgoingCallConfiguration({});
+        this.ongoingCallConfiguration = new CallScreenConfiguration({});
         this.disableButtons = false;
         this.showOngoingCall = false;
         this.sessionId = "";
@@ -1790,7 +1822,7 @@ class CometChatCallButtonsComponent {
         if (this.activeCall?.getType() == CometChatUIKitConstants.calls.meeting) {
             return undefined;
         }
-        return new CometChat.CallSettingsBuilder()
+        return this.ongoingCallConfiguration.callSettingsBuilder ?? new CometChat.CallSettingsBuilder()
             .setSessionID(this.sessionId)
             .enableDefaultLayout(true)
             .setIsAudioOnlyCall(audioOnlyCall)
@@ -1904,7 +1936,7 @@ class CometChatCallButtonsComponent {
             },
             onOutgoingCallAccepted: (call) => {
                 this.openOngoingCallScreen(call);
-            },
+            }
         }));
     }
     removeListener() {
@@ -1980,10 +2012,10 @@ class CometChatCallButtonsComponent {
     }
 }
 CometChatCallButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallButtonsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatCallButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: { user: "user", group: "group", voiceCallIconURL: "voiceCallIconURL", voiceCallIconText: "voiceCallIconText", voiceCallIconHoverText: "voiceCallIconHoverText", videoCallIconURL: "videoCallIconURL", videoCallIconText: "videoCallIconText", videoCallIconHoverText: "videoCallIconHoverText", onVoiceCallClick: "onVoiceCallClick", onVideoCallClick: "onVideoCallClick", onError: "onError", callButtonsStyle: "callButtonsStyle" }, ngImport: i0, template: "<div class=\"cc-call-buttons__wrapper\" [ngStyle]=\"wrapperStyle()\">\n<div class=\"cc-call-buttons-buttons\">\n<cometchat-button [disabled]=\"disableButtons ? true : false\" *ngIf=\"user\" (cc-button-clicked)=\"initiateAudioCall()\" [buttonStyle]=\"getVoiceCallButtonStyle(disableButtons)\" [text]=\"voiceCallIconText\" [hoverText]=\"voiceCallIconHoverText\" [iconURL]=\"voiceCallIconURL\"></cometchat-button>\n<cometchat-button [disabled]=\"disableButtons  ? true : false\" *ngIf=\"user || group\" (cc-button-clicked)=\"initiateVideoCall()\" [buttonStyle]=\"getVideoCallButtonStyle(disableButtons)\" [text]=\"videoCallIconText\" [hoverText]=\"videoCallIconHoverText\" [iconURL]=\"videoCallIconURL\"></cometchat-button>\n</div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"  [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>\n<cometchat-backdrop *ngIf=\"showOutgoingCallscreen\">\n<cometchat-outgoing-call [onCloseClicked]=\"cancelOutgoingCall\" [outgoingCallStyle]=\"outgoingCallStyle\" [call]=\"call!\"></cometchat-outgoing-call>\n</cometchat-backdrop>", styles: [".cc-call-buttons__wrapper{height:100%;width:100%}.cc-call-buttons-buttons{display:flex;gap:8px}\n"], components: [{ type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder"] }, { type: CometChatOutgoingCallComponent, selector: "cometchat-outgoing-call", inputs: ["call", "declineButtonText", "declineButtonIconURL", "customView", "onError", "disableSoundForCalls", "customSoundForCalls", "avatarStyle", "outgoingCallStyle", "onCloseClicked"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatCallButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: { user: "user", group: "group", voiceCallIconURL: "voiceCallIconURL", voiceCallIconText: "voiceCallIconText", voiceCallIconHoverText: "voiceCallIconHoverText", videoCallIconURL: "videoCallIconURL", videoCallIconText: "videoCallIconText", videoCallIconHoverText: "videoCallIconHoverText", onVoiceCallClick: "onVoiceCallClick", onVideoCallClick: "onVideoCallClick", onError: "onError", callButtonsStyle: "callButtonsStyle", outgoingCallConfiguration: "outgoingCallConfiguration", ongoingCallConfiguration: "ongoingCallConfiguration" }, ngImport: i0, template: "<div class=\"cc-call-buttons__wrapper\" [ngStyle]=\"wrapperStyle()\">\n<div class=\"cc-call-buttons-buttons\">\n<cometchat-button [disabled]=\"disableButtons ? true : false\" *ngIf=\"user\" (cc-button-clicked)=\"initiateAudioCall()\" [buttonStyle]=\"getVoiceCallButtonStyle(disableButtons)\" [text]=\"voiceCallIconText\" [hoverText]=\"voiceCallIconHoverText\" [iconURL]=\"voiceCallIconURL\"></cometchat-button>\n<cometchat-button [disabled]=\"disableButtons  ? true : false\" *ngIf=\"user || group\" (cc-button-clicked)=\"initiateVideoCall()\" [buttonStyle]=\"getVideoCallButtonStyle(disableButtons)\" [text]=\"videoCallIconText\" [hoverText]=\"videoCallIconHoverText\" [iconURL]=\"videoCallIconURL\"></cometchat-button>\n</div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [maximizeIconURL]=\"ongoingCallConfiguration.maximizeIconURL\" [minimizeIconURL]=\"ongoingCallConfiguration.minimizeIconURL\" [ongoingCallStyle]=\"ongoingCallConfiguration.ongoingCallStyle || ongoingCallStyle\" [sessionID]=\"sessionId\"  [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>\n<cometchat-backdrop *ngIf=\"showOutgoingCallscreen\">\n<cometchat-outgoing-call [customSoundForCalls]=\"outgoingCallConfiguration.customSoundForCalls\" [onError]=\"outgoingCallConfiguration.onError\" [disableSoundForCalls]=\"outgoingCallConfiguration.disableSoundForCalls\" [avatarStyle]=\"outgoingCallConfiguration.avatarStyle\" [customView]=\"outgoingCallConfiguration.customView\" [declineButtonIconURL]=\"outgoingCallConfiguration.declineButtonIconURL\"  [onCloseClicked]=\"outgoingCallConfiguration.onCloseClicked || cancelOutgoingCall\" [outgoingCallStyle]=\"outgoingCallConfiguration.outgoingCallStyle || outgoingCallStyle\" [call]=\"call!\"></cometchat-outgoing-call>\n</cometchat-backdrop>", styles: [".cc-call-buttons__wrapper{height:100%;width:100%}.cc-call-buttons-buttons{display:flex;gap:8px}\n"], components: [{ type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder"] }, { type: CometChatOutgoingCallComponent, selector: "cometchat-outgoing-call", inputs: ["call", "declineButtonText", "declineButtonIconURL", "customView", "onError", "disableSoundForCalls", "customSoundForCalls", "avatarStyle", "outgoingCallStyle", "onCloseClicked"] }], 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: CometChatCallButtonsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-call-buttons", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-buttons__wrapper\" [ngStyle]=\"wrapperStyle()\">\n<div class=\"cc-call-buttons-buttons\">\n<cometchat-button [disabled]=\"disableButtons ? true : false\" *ngIf=\"user\" (cc-button-clicked)=\"initiateAudioCall()\" [buttonStyle]=\"getVoiceCallButtonStyle(disableButtons)\" [text]=\"voiceCallIconText\" [hoverText]=\"voiceCallIconHoverText\" [iconURL]=\"voiceCallIconURL\"></cometchat-button>\n<cometchat-button [disabled]=\"disableButtons  ? true : false\" *ngIf=\"user || group\" (cc-button-clicked)=\"initiateVideoCall()\" [buttonStyle]=\"getVideoCallButtonStyle(disableButtons)\" [text]=\"videoCallIconText\" [hoverText]=\"videoCallIconHoverText\" [iconURL]=\"videoCallIconURL\"></cometchat-button>\n</div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"  [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>\n<cometchat-backdrop *ngIf=\"showOutgoingCallscreen\">\n<cometchat-outgoing-call [onCloseClicked]=\"cancelOutgoingCall\" [outgoingCallStyle]=\"outgoingCallStyle\" [call]=\"call!\"></cometchat-outgoing-call>\n</cometchat-backdrop>", styles: [".cc-call-buttons__wrapper{height:100%;width:100%}.cc-call-buttons-buttons{display:flex;gap:8px}\n"] }]
+            args: [{ selector: "cometchat-call-buttons", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-buttons__wrapper\" [ngStyle]=\"wrapperStyle()\">\n<div class=\"cc-call-buttons-buttons\">\n<cometchat-button [disabled]=\"disableButtons ? true : false\" *ngIf=\"user\" (cc-button-clicked)=\"initiateAudioCall()\" [buttonStyle]=\"getVoiceCallButtonStyle(disableButtons)\" [text]=\"voiceCallIconText\" [hoverText]=\"voiceCallIconHoverText\" [iconURL]=\"voiceCallIconURL\"></cometchat-button>\n<cometchat-button [disabled]=\"disableButtons  ? true : false\" *ngIf=\"user || group\" (cc-button-clicked)=\"initiateVideoCall()\" [buttonStyle]=\"getVideoCallButtonStyle(disableButtons)\" [text]=\"videoCallIconText\" [hoverText]=\"videoCallIconHoverText\" [iconURL]=\"videoCallIconURL\"></cometchat-button>\n</div>\n</div>\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [maximizeIconURL]=\"ongoingCallConfiguration.maximizeIconURL\" [minimizeIconURL]=\"ongoingCallConfiguration.minimizeIconURL\" [ongoingCallStyle]=\"ongoingCallConfiguration.ongoingCallStyle || ongoingCallStyle\" [sessionID]=\"sessionId\"  [callSettingsBuilder]=\"getCallBuilder()!\"></cometchat-ongoing-call>\n<cometchat-backdrop *ngIf=\"showOutgoingCallscreen\">\n<cometchat-outgoing-call [customSoundForCalls]=\"outgoingCallConfiguration.customSoundForCalls\" [onError]=\"outgoingCallConfiguration.onError\" [disableSoundForCalls]=\"outgoingCallConfiguration.disableSoundForCalls\" [avatarStyle]=\"outgoingCallConfiguration.avatarStyle\" [customView]=\"outgoingCallConfiguration.customView\" [declineButtonIconURL]=\"outgoingCallConfiguration.declineButtonIconURL\"  [onCloseClicked]=\"outgoingCallConfiguration.onCloseClicked || cancelOutgoingCall\" [outgoingCallStyle]=\"outgoingCallConfiguration.outgoingCallStyle || outgoingCallStyle\" [call]=\"call!\"></cometchat-outgoing-call>\n</cometchat-backdrop>", styles: [".cc-call-buttons__wrapper{height:100%;width:100%}.cc-call-buttons-buttons{display:flex;gap:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { user: [{
                 type: Input
             }], group: [{
@@ -2008,6 +2040,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], callButtonsStyle: [{
                 type: Input
+            }], outgoingCallConfiguration: [{
+                type: Input
+            }], ongoingCallConfiguration: [{
+                type: Input
             }] } });
 
 class CometchatListComponent {
@@ -2156,10 +2192,10 @@ class CometchatListComponent {
     }
 }
 CometchatListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometchatListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CometchatListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometchatListComponent, selector: "cometchat-list", inputs: { listItemView: "listItemView", onScrolledToBottom: "onScrolledToBottom", onScrolledToTop: "onScrolledToTop", list: "list", onSearch: "onSearch", searchText: "searchText", searchIconURL: "searchIconURL", listStyle: "listStyle", searchPlaceholderText: "searchPlaceholderText", hideSearch: "hideSearch", hideError: "hideError", title: "title", titleAlignment: "titleAlignment", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", state: "state", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-list__wrapper\">\n  <div class=\"list__header\" [ngStyle]=\"headerStyle()\">\n    <div *ngIf=\"title\" class=\"list__title\" [ngStyle]=\"headerTitle()\"> {{title}}</div>\n    <div class=\"cc-list__search-input\">\n      <cometchat-search-input [searchInputStyle]=\"searchStyle\" [placeholderText]=\"searchPlaceholderText\" *ngIf=\"!hideSearch\"\n      [searchIconURL]=\"searchIconURL\" (cc-search-changed)=\"searchEvent($event)\"></cometchat-search-input>\n    </div>\n  </div>\n  <div class=\"cc-list\" #listScroll [ngStyle]=\"listStyles()\">\n    <div class=\"list__top\" #top>\n    </div>\n    <div class=\"decorator__message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"loading__view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"iconStyle\">\n        </cometchat-loader>\n        <span class=\"custom__view--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"error__view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"custom__view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"empty__view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"custom__view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"listitem__view\" *ngFor=\"let item of list; let i = index\">\n      <div class=\"list__section\" *ngIf=\"showSectionHeader\">\n        <div *ngIf=\"i > 0; else elseBlock\" class=\"section__separator\">\n          <div *ngIf=\"\n              list[i - 1][sectionHeaderField][0].toUpperCase() !==\n              list[i][sectionHeaderField][0].toUpperCase()\n            \" class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n            {{ list[i][sectionHeaderField][0].toUpperCase() }}\n          </div>\n        </div>\n        <ng-template #elseBlock>\n          <div class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n            {{\n            list[i][sectionHeaderField][0].toUpperCase()\n            }}\n          </div>\n        </ng-template>\n      </div>\n      <ng-container *ngTemplateOutlet=\"listItemView;context:{ $implicit: item }\">\n      </ng-container>\n    </div>\n    <div class=\"list__bottom\" #bottom>\n    </div>\n  </div>\n</div>", styles: [".cc-list{width:100%;overflow-y:auto;overflow-x:hidden}.cc-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column}.section__header{padding:4px}.list__title{width:90%;margin:4px 0;padding-left:8px}.user__section{padding:8px}.cc-list__search-input{height:-moz-fit-content;height:fit-content;margin:0 8px}.list__header{width:100%}.list__section{margin-left:8px}.decorator__message--loading{display:block;height:24px;width:24px;margin-right:30px}.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%}.list__title{margin-bottom:8px}.cc-list::-webkit-scrollbar{background:transparent;width:8px}.cc-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.error__view,.empty__view{text-align:center}\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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+CometchatListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometchatListComponent, selector: "cometchat-list", inputs: { listItemView: "listItemView", onScrolledToBottom: "onScrolledToBottom", onScrolledToTop: "onScrolledToTop", list: "list", onSearch: "onSearch", searchText: "searchText", searchIconURL: "searchIconURL", listStyle: "listStyle", searchPlaceholderText: "searchPlaceholderText", hideSearch: "hideSearch", hideError: "hideError", title: "title", titleAlignment: "titleAlignment", errorStateView: "errorStateView", loadingStateView: "loadingStateView", emptyStateView: "emptyStateView", state: "state", errorStateText: "errorStateText", emptyStateText: "emptyStateText", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-list__wrapper\">\n  <div class=\"list__header\" [ngStyle]=\"headerStyle()\">\n    <div *ngIf=\"title\" class=\"list__title\" [ngStyle]=\"headerTitle()\"> {{title}}</div>\n    <div class=\"cc-list__search-input\">\n      <cometchat-search-input [searchInputStyle]=\"searchStyle\" [placeholderText]=\"searchPlaceholderText\" *ngIf=\"!hideSearch\"\n      [searchIconURL]=\"searchIconURL\" (cc-search-changed)=\"searchEvent($event)\"></cometchat-search-input>\n    </div>\n  </div>\n  <div class=\"cc-list\" #listScroll [ngStyle]=\"listStyles()\">\n    <div class=\"list__top\" #top>\n    </div>\n    <div class=\"decorator__message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"loading__view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"iconStyle\">\n        </cometchat-loader>\n        <span class=\"custom__view--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"error__view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"custom__view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"empty__view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"custom__view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"listitem__view\" *ngFor=\"let item of list; let i = index\">\n      <div class=\"list__section\" *ngIf=\"showSectionHeader\">\n        <div *ngIf=\"i > 0; else elseBlock\" class=\"section__separator\">\n          <div *ngIf=\"\n              list[i - 1][sectionHeaderField][0].toUpperCase() !==\n              list[i][sectionHeaderField][0].toUpperCase()\n            \" class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n            {{ list[i][sectionHeaderField][0].toUpperCase() }}\n          </div>\n        </div>\n        <ng-template #elseBlock>\n          <div class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n            {{\n            list[i][sectionHeaderField][0].toUpperCase()\n            }}\n          </div>\n        </ng-template>\n      </div>\n      <ng-container *ngTemplateOutlet=\"listItemView;context:{ $implicit: item }\">\n      </ng-container>\n    </div>\n    <div class=\"list__bottom\" #bottom>\n    </div>\n  </div>\n</div>", styles: [".cc-list{width:100%;overflow-y:auto;overflow-x:hidden}.cc-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column}.section__header{padding:4px}.list__title{width:90%;margin:4px 0;padding-left:8px}.user__section{padding:8px}.cc-list__search-input{height:-moz-fit-content;height:fit-content;margin:0 8px}.list__header{width:100%}.list__section{margin-left:8px}.decorator__message--loading{display:block;height:24px;width:24px;margin-right:30px}.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%}.list__title{margin-bottom:8px}.cc-list::-webkit-scrollbar{background:transparent;width:8px}.cc-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.error__view,.empty__view{text-align:center;width:100%;text-overflow:ellipsis;text-wrap:balance}\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"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometchatListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cometchat-list', template: "<div class=\"cc-list__wrapper\">\n  <div class=\"list__header\" [ngStyle]=\"headerStyle()\">\n    <div *ngIf=\"title\" class=\"list__title\" [ngStyle]=\"headerTitle()\"> {{title}}</div>\n    <div class=\"cc-list__search-input\">\n      <cometchat-search-input [searchInputStyle]=\"searchStyle\" [placeholderText]=\"searchPlaceholderText\" *ngIf=\"!hideSearch\"\n      [searchIconURL]=\"searchIconURL\" (cc-search-changed)=\"searchEvent($event)\"></cometchat-search-input>\n    </div>\n  </div>\n  <div class=\"cc-list\" #listScroll [ngStyle]=\"listStyles()\">\n    <div class=\"list__top\" #top>\n    </div>\n    <div class=\"decorator__message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"loading__view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"iconStyle\">\n        </cometchat-loader>\n        <span class=\"custom__view--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"error__view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"custom__view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"empty__view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"custom__view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"listitem__view\" *ngFor=\"let item of list; let i = index\">\n      <div class=\"list__section\" *ngIf=\"showSectionHeader\">\n        <div *ngIf=\"i > 0; else elseBlock\" class=\"section__separator\">\n          <div *ngIf=\"\n              list[i - 1][sectionHeaderField][0].toUpperCase() !==\n              list[i][sectionHeaderField][0].toUpperCase()\n            \" class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n            {{ list[i][sectionHeaderField][0].toUpperCase() }}\n          </div>\n        </div>\n        <ng-template #elseBlock>\n          <div class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n            {{\n            list[i][sectionHeaderField][0].toUpperCase()\n            }}\n          </div>\n        </ng-template>\n      </div>\n      <ng-container *ngTemplateOutlet=\"listItemView;context:{ $implicit: item }\">\n      </ng-container>\n    </div>\n    <div class=\"list__bottom\" #bottom>\n    </div>\n  </div>\n</div>", styles: [".cc-list{width:100%;overflow-y:auto;overflow-x:hidden}.cc-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column}.section__header{padding:4px}.list__title{width:90%;margin:4px 0;padding-left:8px}.user__section{padding:8px}.cc-list__search-input{height:-moz-fit-content;height:fit-content;margin:0 8px}.list__header{width:100%}.list__section{margin-left:8px}.decorator__message--loading{display:block;height:24px;width:24px;margin-right:30px}.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%}.list__title{margin-bottom:8px}.cc-list::-webkit-scrollbar{background:transparent;width:8px}.cc-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.error__view,.empty__view{text-align:center}\n"] }]
+            args: [{ selector: 'cometchat-list', template: "<div class=\"cc-list__wrapper\">\n  <div class=\"list__header\" [ngStyle]=\"headerStyle()\">\n    <div *ngIf=\"title\" class=\"list__title\" [ngStyle]=\"headerTitle()\"> {{title}}</div>\n    <div class=\"cc-list__search-input\">\n      <cometchat-search-input [searchInputStyle]=\"searchStyle\" [placeholderText]=\"searchPlaceholderText\" *ngIf=\"!hideSearch\"\n      [searchIconURL]=\"searchIconURL\" (cc-search-changed)=\"searchEvent($event)\"></cometchat-search-input>\n    </div>\n  </div>\n  <div class=\"cc-list\" #listScroll [ngStyle]=\"listStyles()\">\n    <div class=\"list__top\" #top>\n    </div>\n    <div class=\"decorator__message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"loading__view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"iconStyle\">\n        </cometchat-loader>\n        <span class=\"custom__view--loading\" *ngIf=\"state == states.loading  && loadingStateView\">\n          <ng-container *ngTemplateOutlet=\"loadingStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"error__view\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"custom__view--error\" *ngIf=\"state == states.error  && !hideError && errorStateView\">\n          <ng-container *ngTemplateOutlet=\"errorStateView\">\n          </ng-container>\n        </span>\n      </div>\n      <div class=\"empty__view\" *ngIf=\"state == states.empty\">\n        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"custom__view--empty\" *ngIf=\"state == states.empty && emptyStateView\">\n          <ng-container *ngTemplateOutlet=\"emptyStateView\">\n          </ng-container>\n        </span>\n      </div>\n    </div>\n    <div class=\"listitem__view\" *ngFor=\"let item of list; let i = index\">\n      <div class=\"list__section\" *ngIf=\"showSectionHeader\">\n        <div *ngIf=\"i > 0; else elseBlock\" class=\"section__separator\">\n          <div *ngIf=\"\n              list[i - 1][sectionHeaderField][0].toUpperCase() !==\n              list[i][sectionHeaderField][0].toUpperCase()\n            \" class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n            {{ list[i][sectionHeaderField][0].toUpperCase() }}\n          </div>\n        </div>\n        <ng-template #elseBlock>\n          <div class=\"section__header\" [ngStyle]=\"sectionHeaderStyle()\">\n            {{\n            list[i][sectionHeaderField][0].toUpperCase()\n            }}\n          </div>\n        </ng-template>\n      </div>\n      <ng-container *ngTemplateOutlet=\"listItemView;context:{ $implicit: item }\">\n      </ng-container>\n    </div>\n    <div class=\"list__bottom\" #bottom>\n    </div>\n  </div>\n</div>", styles: [".cc-list{width:100%;overflow-y:auto;overflow-x:hidden}.cc-list__wrapper{height:100%;width:100%;display:flex;flex-direction:column}.section__header{padding:4px}.list__title{width:90%;margin:4px 0;padding-left:8px}.user__section{padding:8px}.cc-list__search-input{height:-moz-fit-content;height:fit-content;margin:0 8px}.list__header{width:100%}.list__section{margin-left:8px}.decorator__message--loading{display:block;height:24px;width:24px;margin-right:30px}.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%}.list__title{margin-bottom:8px}.cc-list::-webkit-scrollbar{background:transparent;width:8px}.cc-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.error__view,.empty__view{text-align:center;width:100%;text-overflow:ellipsis;text-wrap:balance}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { listScroll: [{
                 type: ViewChild,
                 args: ["listScroll", { static: false }]
@@ -2400,29 +2436,6 @@ class CometChatIncomingCallComponent {
             });
             this.ongoingCallStyle = { ...defaultStyle, ...this.ongoingCallStyle };
         };
-        this.startDefaultCall = () => {
-            let call = this.call;
-            const sessionId = call?.getSessionId();
-            const callType = call?.getType() === CometChatUIKitConstants.MessageTypes.audio ? true : false;
-            const showRecordingButton = true;
-            const callSettings = new CometChat.CallSettingsBuilder()
-                .setSessionID(sessionId)
-                .enableDefaultLayout(true)
-                .setMode(CometChat.CALL_MODE.DEFAULT)
-                .setIsAudioOnlyCall(callType)
-                .showRecordingButton(showRecordingButton)
-                .build();
-            const el = "";
-            CometChat.startCall(callSettings, el, new CometChat.OngoingCallListener({
-                onCallEnded: (endedCall) => {
-                    /* Notification received here if current ongoing call is ended. */
-                    if (endedCall.getAction() == CometChatUIKitConstants.calls.ended) {
-                        CometChatCallEvents.ccCallEnded.next(endedCall);
-                    }
-                    /* hiding/closing the call screen can be done here. */
-                },
-            }));
-        };
         this.checkForActiveCallAndEndCall = () => {
             let call = CometChat.getActiveCall();
             return new Promise((resolve, reject) => {
@@ -2769,28 +2782,7 @@ class CometChatUsersComponent {
         this.usersStyle = {
             width: "100%",
             height: "100%",
-            background: "",
-            border: "",
-            borderRadius: "",
-            titleTextFont: "",
-            titleTextColor: "",
-            searchPlaceholderTextFont: "",
-            searchPlaceholderTextColor: "",
-            searchTextFont: "",
-            searchTextColor: "",
-            emptyStateTextFont: "",
-            emptyStateTextColor: "",
-            errorStateTextFont: "",
-            errorStateTextColor: "",
-            loadingIconTint: "",
-            searchIconTint: "",
-            searchBorder: "",
-            searchBorderRadius: "",
-            searchBackground: "",
-            onlineStatusColor: "",
             separatorColor: "rgb(222 222 222 / 46%)",
-            sectionHeaderTextFont: "",
-            sectionHeaderTextColor: ""
         };
         this.listItemStyle = {
             height: "100%",
@@ -2899,11 +2891,17 @@ class CometChatUsersComponent {
                             this.ref.detectChanges();
                         }
                     }, (error) => {
+                        if (this.onError) {
+                            this.onError(CometChatException(error));
+                        }
                         this.state = States$1.error;
                         this.ref.detectChanges();
                     });
                 }
                 catch (error) {
+                    if (this.onError) {
+                        this.onError(CometChatException(error));
+                    }
                     this.state = States$1.error;
                     this.ref.detectChanges();
                 }
@@ -2929,7 +2927,7 @@ class CometChatUsersComponent {
             }
             catch (error) {
                 if (this.onError) {
-                    this.onError(error);
+                    this.onError(CometChatException(error));
                 }
             }
         };
@@ -3221,6 +3219,8 @@ class CometChatAddMembersComponent {
         this.titleAlignmentEnum = TitleAlignment;
         this.selectionmodeEnum = SelectionMode$1;
         this.addMembersStyle = {};
+        this.StatusIndicatorStyle = {};
+        this.avatarStyle = {};
         this.actionMessagesList = [];
         this.addMemberButtonStyle = {
             height: "100%",
@@ -3451,10 +3451,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" }, 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    [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"] }], 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", 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"] }], 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    [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    [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: [{
@@ -3525,6 +3525,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], addMembersStyle: [{
                 type: Input
+            }], StatusIndicatorStyle: [{
+                type: Input
+            }], avatarStyle: [{
+                type: Input
             }] } });
 
 /**
@@ -3886,7 +3890,9 @@ class CometChatMessageHeaderComponent {
             }));
         }
         catch (error) {
-            console.log(error);
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
         }
     }
     removeListener() {
@@ -3899,10 +3905,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", 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\"> <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle\" (cc-button-clicked)=\"onBackClicked()\"></cometchat-button></div>\n<div class=\"cc-message-header__listitem\">\n<cometchat-list-item *ngIf=\"!listItemView;else listitem\" [avatarName]=\"user?.getName() || this.group?.getName()\" [avatarURL]=\"this.user?.getAvatar() || this.group?.getIcon()\" [listItemStyle]=\"listItemStyle\"\n [statusIndicatorColor]=\"checkStatusType()\" [statusIndicatorIcon]=\"checkGroupType()\" [title]=\"this.user?.getName() || this.group?.getName()\"  [hideSeparator]=\"true\"\n  [statusIndicatorStyle]=\"statusIndicatorStyle\" [avatarStyle]=\"avatarStyle\">\n<div slot=\"subtitleView\">\n<div *ngIf=\"!subtitleView; else subtitle\">\n<cometchat-label [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n\n</cometchat-label>\n</div>\n<ng-template #subtitle>\n  <ng-container *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\">\n\n    </ng-container>\n  </div>\n     </div>\n\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", 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\"> <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle\" (cc-button-clicked)=\"onBackClicked()\"></cometchat-button></div>\n<div class=\"cc-message-header__listitem\">\n<cometchat-list-item *ngIf=\"!listItemView;else listitem\" [avatarName]=\"user?.getName() || this.group?.getName()\" [avatarURL]=\"this.user?.getAvatar() || this.group?.getIcon()\" [listItemStyle]=\"listItemStyle\"\n [statusIndicatorColor]=\"checkStatusType()\" [statusIndicatorIcon]=\"checkGroupType()\" [title]=\"this.user?.getName() || this.group?.getName()\"  [hideSeparator]=\"true\"\n  [statusIndicatorStyle]=\"statusIndicatorStyle\" [avatarStyle]=\"avatarStyle\">\n<div slot=\"subtitleView\">\n<div *ngIf=\"!subtitleView; else subtitle\">\n<cometchat-label [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n\n</cometchat-label>\n</div>\n<ng-template #subtitle>\n  <ng-container *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\">\n\n    </ng-container>\n  </div>\n     </div>\n\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\"> <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle\" (cc-button-clicked)=\"onBackClicked()\"></cometchat-button></div>\n<div class=\"cc-message-header__listitem\">\n<cometchat-list-item *ngIf=\"!listItemView;else listitem\" [avatarName]=\"user?.getName() || this.group?.getName()\" [avatarURL]=\"this.user?.getAvatar() || this.group?.getIcon()\" [listItemStyle]=\"listItemStyle\"\n [statusIndicatorColor]=\"checkStatusType()\" [statusIndicatorIcon]=\"checkGroupType()\" [title]=\"this.user?.getName() || this.group?.getName()\"  [hideSeparator]=\"true\"\n  [statusIndicatorStyle]=\"statusIndicatorStyle\" [avatarStyle]=\"avatarStyle\">\n<div slot=\"subtitleView\">\n<div *ngIf=\"!subtitleView; else subtitle\">\n<cometchat-label [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n\n</cometchat-label>\n</div>\n<ng-template #subtitle>\n  <ng-container *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\">\n\n    </ng-container>\n  </div>\n     </div>\n\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\"> <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle\" (cc-button-clicked)=\"onBackClicked()\"></cometchat-button></div>\n<div class=\"cc-message-header__listitem\">\n<cometchat-list-item *ngIf=\"!listItemView;else listitem\" [avatarName]=\"user?.getName() || this.group?.getName()\" [avatarURL]=\"this.user?.getAvatar() || this.group?.getIcon()\" [listItemStyle]=\"listItemStyle\"\n [statusIndicatorColor]=\"checkStatusType()\" [statusIndicatorIcon]=\"checkGroupType()\" [title]=\"this.user?.getName() || this.group?.getName()\"  [hideSeparator]=\"true\"\n  [statusIndicatorStyle]=\"statusIndicatorStyle\" [avatarStyle]=\"avatarStyle\">\n<div slot=\"subtitleView\">\n<div *ngIf=\"!subtitleView; else subtitle\">\n<cometchat-label [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n\n</cometchat-label>\n</div>\n<ng-template #subtitle>\n  <ng-container *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\">\n\n    </ng-container>\n  </div>\n     </div>\n\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: [{
@@ -4012,7 +4018,7 @@ class CometChatBannedMembersComponent {
     constructor(ref, themeService) {
         this.ref = ref;
         this.themeService = themeService;
-        this.disableUsersPresence = false;
+        this.disableUsersPresence = true;
         this.backButtonIconURL = "assets/backbutton.svg";
         this.closeButtonIconURL = "assets/close2x.svg";
         this.showBackButton = true;
@@ -4030,6 +4036,12 @@ class CometChatBannedMembersComponent {
         this.errorStateText = localize("SOMETHING_WRONG");
         this.titleAlignment = TitleAlignment.center;
         this.unbanIconURL = "assets/close2x.svg";
+        this.statusIndicatorStyle = {
+            height: "10px",
+            width: "10px",
+            borderRadius: "16px",
+            border: ""
+        };
         this.menuListStyle = {
             width: "",
             height: "",
@@ -4089,6 +4101,20 @@ class CometChatBannedMembersComponent {
         this.membersListenerId = "bannedMembers_" + new Date().getTime();
         this.membersList = [];
         this.onScrolledToBottom = null;
+        /**
+       * @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;
+                }
+            }
+            return null;
+        };
         this.unBanMember = (member) => {
             CometChat.unbanGroupMember(this.group.getGuid(), member.getUid()).then(() => {
                 CometChatGroupEvents.ccGroupMemberUnbanned.next({
@@ -4098,7 +4124,9 @@ class CometChatBannedMembersComponent {
                 });
                 this.updateMember(member);
             }).catch((err) => {
-                console.log(err);
+                if (this.onError) {
+                    this.onError(err);
+                }
             });
         };
         /**
@@ -4120,6 +4148,24 @@ class CometChatBannedMembersComponent {
                 this.ref.detectChanges();
             }
         };
+        /**
+       * @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();
+                }
+            }
+        };
         this.fetchNextBannedMembers = () => {
             this.onScrolledToBottom = null;
             if (this.bannedMembersRequest && this.bannedMembersRequest.pagination && (this.bannedMembersRequest.pagination.current_page == 0 || this.bannedMembersRequest.pagination.current_page != this.bannedMembersRequest.pagination.total_pages)) {
@@ -4139,13 +4185,17 @@ class CometChatBannedMembersComponent {
                             this.ref.detectChanges();
                         }
                     }, (error) => {
-                        console.log(error);
+                        if (this.onError) {
+                            this.onError(CometChatException(error));
+                        }
                         this.state = States.error;
                         this.ref.detectChanges();
                     });
                 }
                 catch (error) {
-                    console.log(error);
+                    if (this.onError) {
+                        this.onError(CometChatException(error));
+                    }
                     this.state = States.error;
                     this.ref.detectChanges();
                 }
@@ -4170,7 +4220,7 @@ class CometChatBannedMembersComponent {
             }
             catch (error) {
                 if (this.onError) {
-                    this.onError(error);
+                    this.onError(CometChatException(error));
                 }
             }
         };
@@ -4211,6 +4261,7 @@ class CometChatBannedMembersComponent {
         };
     }
     ngOnInit() {
+        this.attachListeners();
         this.onScrolledToBottom = this.fetchNextBannedMembers;
         this.setThemeStyle();
         CometChat.getLoggedinUser().then((user) => {
@@ -4235,6 +4286,16 @@ class CometChatBannedMembersComponent {
     }
     attachListeners() {
         //Attaching User Listeners to dynamilcally update when a user comes online and goes offline
+        CometChat.addUserListener(this.membersListenerId, new CometChat.UserListener({
+            onUserOnline: (onlineUser) => {
+                /* when someuser/friend comes online, user will be received here */
+                this.updateMemberStatus(onlineUser);
+            },
+            onUserOffline: (offlineUser) => {
+                /* when someuser/friend went offline, user will be received here */
+                this.updateMemberStatus(offlineUser);
+            },
+        }));
         CometChat.addGroupListener(this.membersListenerId, new CometChat.GroupListener({
             onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
                 this.updateMember(bannedUser);
@@ -4277,6 +4338,7 @@ class CometChatBannedMembersComponent {
         this.setBanMembersStyle();
         this.setListItemStyle();
         this.setAvatarStyle();
+        this.setStatusStyle();
         this.menuListStyle.background = this.themeService.theme.palette.getBackground();
         this.menuListStyle.iconBackground = this.themeService.theme.palette.getBackground();
         this.menuListStyle.iconTint = this.themeService.theme.palette.getAccent400();
@@ -4333,6 +4395,15 @@ class CometChatBannedMembersComponent {
             searchTextColor: this.bannedMembersStyle.searchTextColor,
         };
     }
+    setStatusStyle() {
+        let defaultStyle = {
+            height: "12px",
+            width: "12px",
+            border: "none",
+            borderRadius: "24px",
+        };
+        this.statusIndicatorStyle = { ...defaultStyle, ...this.statusIndicatorStyle };
+    }
     setListItemStyle() {
         let defaultStyle = new ListItemStyle({
             height: "45px",
@@ -4365,10 +4436,10 @@ class CometChatBannedMembersComponent {
     }
 }
 CometChatBannedMembersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatBannedMembersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatBannedMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: { bannedMembersRequestBuilder: "bannedMembersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onSelect: "onSelect", onBack: "onBack", onClose: "onClose", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", unbanIconURL: "unbanIconURL", avatarStyle: "avatarStyle", bannedMembersStyle: "bannedMembersStyle", listItemStyle: "listItemStyle" }, ngImport: i0, template: "<div class=\"cc-banned-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-banned-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"   (cc-button-clicked)=\"backClicked()\" >\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-banned-members__wrapper\" [ngStyle]=\"membersStyles()\">\n    <div class=\"cc-banned-members__menus\" *ngIf=\"menu\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n  </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"bannedMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"  [title]=\"title\"\n\n        [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n        [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n        [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n    </cometchat-list>\n    <ng-template #listItem let-bannedMember>\n        <cometchat-list-item [title]=\"bannedMember?.name\" [avatarURL]=\"bannedMember?.avatar\" [avatarName]=\"bannedMember?.name\"\n            [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-banned-members__subtitle-view\">\n                <ng-container *ngTemplateOutlet=\"subtitleView\">\n                </ng-container>\n            </div>\n            <div slot=\"menuView\"  *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(bannedMember)\"  [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n          </div>\n          <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none; else changeScope\" class=\"cc-banned-members__tail-view\">\n            <ng-container *ngTemplateOutlet=\"tailView\">\n            </ng-container>\n        </div>\n        <ng-template  #changeScope>\n         <div  slot=\"tailView\">\n          <div class=\"cc-banned-members__unban\">\n            <cometchat-button [buttonStyle]=\"unbanIconStyle\" [iconURL]=\"unbanIconURL\" (click)=\"unBanMember(bannedMember)\">\n\n            </cometchat-button>\n          </div>\n         </div>\n        </ng-template>\n        </cometchat-list-item>\n        <ng-template #tailView>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-banned-members__selection--single\">\n            <cometchat-radio-button (cc-radio-button-changed)=\"onSelect ? onSelect(bannedMember) : null\"></cometchat-radio-button>\n          </div>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-banned-members__selection--multiple\">\n            <cometchat-checkbox (cc-checkbox-changed)=\"onSelect ? onSelect(bannedMember) : null\"></cometchat-checkbox>\n          </div>\n        </ng-template>\n    </ng-template>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-banned-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-banned-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view{position:relative}.cc-banned-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-banned-members__unban{display:flex;align-items:center;justify-content:flex-end;width:100px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatBannedMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: { bannedMembersRequestBuilder: "bannedMembersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onSelect: "onSelect", onBack: "onBack", onClose: "onClose", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", unbanIconURL: "unbanIconURL", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", bannedMembersStyle: "bannedMembersStyle", listItemStyle: "listItemStyle" }, ngImport: i0, template: "<div class=\"cc-banned-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-banned-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"   (cc-button-clicked)=\"backClicked()\" >\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-banned-members__wrapper\" [ngStyle]=\"membersStyles()\">\n    <div class=\"cc-banned-members__menus\" *ngIf=\"menu\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n  </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"bannedMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"  [title]=\"title\"\n\n        [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n        [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n        [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n    </cometchat-list>\n    <ng-template #listItem let-bannedMember>\n        <cometchat-list-item [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [statusIndicatorColor]=\"getStatusIndicatorColor(bannedMember)\" [title]=\"bannedMember?.name\" [avatarURL]=\"bannedMember?.avatar\" [avatarName]=\"bannedMember?.name\"\n            [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-banned-members__subtitle-view\">\n                <ng-container *ngTemplateOutlet=\"subtitleView\">\n                </ng-container>\n            </div>\n            <div slot=\"menuView\"  *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(bannedMember)\"  [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n          </div>\n          <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none; else changeScope\" class=\"cc-banned-members__tail-view\">\n            <ng-container *ngTemplateOutlet=\"tailView\">\n            </ng-container>\n        </div>\n        <ng-template  #changeScope>\n         <div  slot=\"tailView\">\n          <div class=\"cc-banned-members__unban\">\n            <cometchat-button [buttonStyle]=\"unbanIconStyle\" [iconURL]=\"unbanIconURL\" (click)=\"unBanMember(bannedMember)\">\n\n            </cometchat-button>\n          </div>\n         </div>\n        </ng-template>\n        </cometchat-list-item>\n        <ng-template #tailView>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-banned-members__selection--single\">\n            <cometchat-radio-button (cc-radio-button-changed)=\"onSelect ? onSelect(bannedMember) : null\"></cometchat-radio-button>\n          </div>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-banned-members__selection--multiple\">\n            <cometchat-checkbox (cc-checkbox-changed)=\"onSelect ? onSelect(bannedMember) : null\"></cometchat-checkbox>\n          </div>\n        </ng-template>\n    </ng-template>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-banned-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-banned-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view{position:relative}.cc-banned-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-banned-members__unban{display:flex;align-items:center;justify-content:flex-end;width:100px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatBannedMembersComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-banned-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-banned-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-banned-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"   (cc-button-clicked)=\"backClicked()\" >\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-banned-members__wrapper\" [ngStyle]=\"membersStyles()\">\n    <div class=\"cc-banned-members__menus\" *ngIf=\"menu\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n  </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"bannedMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"  [title]=\"title\"\n\n        [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n        [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n        [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n    </cometchat-list>\n    <ng-template #listItem let-bannedMember>\n        <cometchat-list-item [title]=\"bannedMember?.name\" [avatarURL]=\"bannedMember?.avatar\" [avatarName]=\"bannedMember?.name\"\n            [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-banned-members__subtitle-view\">\n                <ng-container *ngTemplateOutlet=\"subtitleView\">\n                </ng-container>\n            </div>\n            <div slot=\"menuView\"  *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(bannedMember)\"  [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n          </div>\n          <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none; else changeScope\" class=\"cc-banned-members__tail-view\">\n            <ng-container *ngTemplateOutlet=\"tailView\">\n            </ng-container>\n        </div>\n        <ng-template  #changeScope>\n         <div  slot=\"tailView\">\n          <div class=\"cc-banned-members__unban\">\n            <cometchat-button [buttonStyle]=\"unbanIconStyle\" [iconURL]=\"unbanIconURL\" (click)=\"unBanMember(bannedMember)\">\n\n            </cometchat-button>\n          </div>\n         </div>\n        </ng-template>\n        </cometchat-list-item>\n        <ng-template #tailView>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-banned-members__selection--single\">\n            <cometchat-radio-button (cc-radio-button-changed)=\"onSelect ? onSelect(bannedMember) : null\"></cometchat-radio-button>\n          </div>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-banned-members__selection--multiple\">\n            <cometchat-checkbox (cc-checkbox-changed)=\"onSelect ? onSelect(bannedMember) : null\"></cometchat-checkbox>\n          </div>\n        </ng-template>\n    </ng-template>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-banned-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-banned-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view{position:relative}.cc-banned-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-banned-members__unban{display:flex;align-items:center;justify-content:flex-end;width:100px}\n"] }]
+            args: [{ selector: "cometchat-banned-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-banned-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-banned-members__back\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"   (cc-button-clicked)=\"backClicked()\" >\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-banned-members__wrapper\" [ngStyle]=\"membersStyles()\">\n    <div class=\"cc-banned-members__menus\" *ngIf=\"menu\">\n      <ng-container *ngTemplateOutlet=\"menu\">\n      </ng-container>\n  </div>\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"bannedMembers\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"  [title]=\"title\"\n\n        [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n        [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n        [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n    </cometchat-list>\n    <ng-template #listItem let-bannedMember>\n        <cometchat-list-item [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [statusIndicatorColor]=\"getStatusIndicatorColor(bannedMember)\" [title]=\"bannedMember?.name\" [avatarURL]=\"bannedMember?.avatar\" [avatarName]=\"bannedMember?.name\"\n            [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [hideSeparator]=\"hideSeparator\">\n            <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-banned-members__subtitle-view\">\n                <ng-container *ngTemplateOutlet=\"subtitleView\">\n                </ng-container>\n            </div>\n            <div slot=\"menuView\"  *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(bannedMember)\"  [menuListStyle]=\"menuListStyle\"></cometchat-menu-list>\n          </div>\n          <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none; else changeScope\" class=\"cc-banned-members__tail-view\">\n            <ng-container *ngTemplateOutlet=\"tailView\">\n            </ng-container>\n        </div>\n        <ng-template  #changeScope>\n         <div  slot=\"tailView\">\n          <div class=\"cc-banned-members__unban\">\n            <cometchat-button [buttonStyle]=\"unbanIconStyle\" [iconURL]=\"unbanIconURL\" (click)=\"unBanMember(bannedMember)\">\n\n            </cometchat-button>\n          </div>\n         </div>\n        </ng-template>\n        </cometchat-list-item>\n        <ng-template #tailView>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-banned-members__selection--single\">\n            <cometchat-radio-button (cc-radio-button-changed)=\"onSelect ? onSelect(bannedMember) : null\"></cometchat-radio-button>\n          </div>\n          <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-banned-members__selection--multiple\">\n            <cometchat-checkbox (cc-checkbox-changed)=\"onSelect ? onSelect(bannedMember) : null\"></cometchat-checkbox>\n          </div>\n        </ng-template>\n    </ng-template>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-banned-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-banned-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-banned-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-banned-members__tail-view{position:relative}.cc-banned-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-banned-members__unban{display:flex;align-items:center;justify-content:flex-end;width:100px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { bannedMembersRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{
@@ -4427,6 +4498,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], unbanIconURL: [{
                 type: Input
+            }], statusIndicatorStyle: [{
+                type: Input
             }], avatarStyle: [{
                 type: Input
             }], bannedMembersStyle: [{
@@ -4727,13 +4800,16 @@ class CometChatConversationsComponent {
                         });
                     })
                         .catch((error) => {
+                        if (this.onError) {
+                            this.onError(error);
+                        }
                         this.state = States.error;
                         this.ref.detectChanges();
                     });
                 }
                 catch (error) {
                     if (this.onError) {
-                        this.onError(error);
+                        this.onError(CometChatException(error));
                     }
                 }
             }
@@ -4785,7 +4861,7 @@ class CometChatConversationsComponent {
             }
             catch (error) {
                 if (this.onError) {
-                    this.onError(error);
+                    this.onError(CometChatException(error));
                 }
             }
         };
@@ -4920,7 +4996,7 @@ class CometChatConversationsComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
         this.ref.detectChanges();
@@ -5053,7 +5129,7 @@ class CometChatConversationsComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -5064,7 +5140,7 @@ class CometChatConversationsComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
         this.ref.detectChanges();
@@ -5258,7 +5334,7 @@ class CometChatConversationsComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -5366,7 +5442,7 @@ class CometChatConversationsComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -5381,7 +5457,7 @@ class CometChatConversationsComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -5439,7 +5515,7 @@ class CometChatConversationsComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
             this.ref.detectChanges();
         }
@@ -5513,7 +5589,7 @@ class CometChatConversationsComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
         this.ref.detectChanges();
@@ -5629,7 +5705,7 @@ class CometChatConversationsComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -5656,7 +5732,7 @@ class CometChatConversationsComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -6132,10 +6208,10 @@ class CometChatMessageListComponent {
             textColor: "grey"
         };
         this.imageBubbleStyle = {
-            height: "128px",
-            width: "128px",
+            height: "auto",
+            width: "300px",
             border: "none",
-            borderRadius: "0",
+            borderRadius: "8px",
             background: "transparent"
         };
         this.messagesList = [];
@@ -6447,7 +6523,7 @@ class CometChatMessageListComponent {
         this.fetchPreviousMessages = () => {
             if (this.reinitialized) {
                 if (this.messagesRequestBuilder) {
-                    this.requestBuilder = this.messagesRequestBuilder.setMessageId(this.messagesList[0].getId()).build();
+                    this.requestBuilder = this.user ? this.messagesRequestBuilder.setUID(this.user?.getUid()).setMessageId(this.messagesList[0].getId()).build() : this.messagesRequestBuilder.setGUID(this.group?.getGuid()).setMessageId(this.messagesList[0].getId()).build();
                 }
                 else {
                     if (this.user) {
@@ -6529,7 +6605,7 @@ class CometChatMessageListComponent {
             }, (error) => {
                 this.state = States$1.error;
                 if (this.onError) {
-                    this.onError(error);
+                    this.onError(CometChatException(error));
                 }
                 this.ref.detectChanges();
             }).catch((error) => {
@@ -6542,7 +6618,7 @@ class CometChatMessageListComponent {
             let index = this.messagesList.length - 1;
             if (this.reinitialized) {
                 if (this.messagesRequestBuilder) {
-                    this.requestBuilder = this.messagesRequestBuilder.setMessageId(this.messagesList[index].getId()).build();
+                    this.requestBuilder = this.user ? this.messagesRequestBuilder.setUID(this.user?.getUid()).setMessageId(this.messagesList[index].getId()).build() : this.messagesRequestBuilder.setGUID(this.group?.getGuid()).setMessageId(this.messagesList[index].getId()).build();
                 }
                 else {
                     if (this.user) {
@@ -6600,7 +6676,7 @@ class CometChatMessageListComponent {
                     this.state = States$1.error;
                     console.log(error);
                     if (this.onError) {
-                        this.onError(error);
+                        this.onError(CometChatException(error));
                     }
                     this.ref.detectChanges();
                 }).catch((error) => {
@@ -6733,7 +6809,7 @@ class CometChatMessageListComponent {
             }
             catch (error) {
                 if (this.onError) {
-                    this.onError(error);
+                    this.onError(CometChatException(error));
                 }
             }
             this.ref.detectChanges();
@@ -6751,8 +6827,8 @@ class CometChatMessageListComponent {
                     message,
                     ...messageList.slice(messageKey + 1)
                 ];
+                this.ref.detectChanges();
             }
-            this.ref.detectChanges();
         };
         /**
          * @param  {CometChat.BaseMessage} message
@@ -6854,7 +6930,7 @@ class CometChatMessageListComponent {
             }
             catch (error) {
                 if (this.onError) {
-                    this.onError(error);
+                    this.onError(CometChatException(error));
                 }
             }
         };
@@ -6874,7 +6950,7 @@ class CometChatMessageListComponent {
             }
             catch (error) {
                 if (this.onError) {
-                    this.onError(error);
+                    this.onError(CometChatException(error));
                 }
             }
         };
@@ -6891,7 +6967,7 @@ class CometChatMessageListComponent {
             }
             catch (error) {
                 if (this.onError) {
-                    this.onError(error);
+                    this.onError(CometChatException(error));
                 }
             }
         };
@@ -6947,6 +7023,11 @@ class CometChatMessageListComponent {
                 borderRadius: this.messageListStyle.borderRadius
             };
         };
+        this.listStyle = () => {
+            return {
+                height: this.showSmartReply ? "92%" : "100%"
+            };
+        };
     }
     getThreadViewStyle(message) {
         if ((!message.getSender() || message.getSender().getUid() === this.loggedInUser?.getUid()) && message?.getType() == CometChatUIKitConstants.MessageTypes.text) {
@@ -6983,7 +7064,6 @@ class CometChatMessageListComponent {
         }
     }
     ngOnChanges(changes) {
-        console.log(this.templates);
         try {
             if (changes[CometChatUIKitConstants.MessageReceiverType.user] || changes[CometChatUIKitConstants.MessageReceiverType.group]) {
                 this.showEnabledExtensions();
@@ -6991,6 +7071,11 @@ class CometChatMessageListComponent {
                 if (!this.loggedInUser) {
                     CometChat.getLoggedinUser().then((user) => {
                         this.loggedInUser = user;
+                    })
+                        .catch((error) => {
+                        if (this.onError) {
+                            this.onError(error);
+                        }
                     });
                 }
                 this.messagesList = [];
@@ -7037,7 +7122,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -7148,11 +7233,15 @@ class CometChatMessageListComponent {
                 .then((response) => {
             })
                 .catch((error) => {
-                console.log(error);
+                if (this.onError) {
+                    this.onError(error);
+                }
             });
         }
         catch (error) {
-            console.log(error);
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
         }
     }
     ngOnDestroy() {
@@ -7165,7 +7254,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -7375,7 +7464,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -7401,7 +7490,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -7621,7 +7710,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -7644,7 +7733,7 @@ class CometChatMessageListComponent {
             }
             catch (error) {
                 if (this.onError) {
-                    this.onError(error);
+                    this.onError(CometChatException(error));
                 }
             }
         }
@@ -7785,6 +7874,7 @@ class CometChatMessageListComponent {
             border: "none",
             warningTextColor: this.themeService.theme.palette.getAccent("dark"),
             warningTextFont: fontHelper(this.themeService.theme.typography.title2),
+            borderRadius: "8px"
         };
         this.confirmDialogStyle = {
             confirmButtonBackground: this.themeService.theme.palette.getError(),
@@ -7826,28 +7916,23 @@ class CometChatMessageListComponent {
         this.state = States$1.loading;
         this.requestBuilder = null;
         if (this.user || this.group) {
-            if (!this.messagesRequestBuilder) {
-                if (this.user) {
-                    this.requestBuilder = new CometChat.MessagesRequestBuilder()
-                        .setUID(this.user.getUid())
-                        .setLimit(this.limit)
-                        .setTypes(this.types)
-                        .setCategories(this.categories)
-                        .hideReplies(true)
-                        .build();
-                }
-                else {
-                    this.requestBuilder = new CometChat.MessagesRequestBuilder()
-                        .setGUID(this.group.getGuid())
-                        .setLimit(this.limit)
-                        .setTypes(this.types)
-                        .hideReplies(true)
-                        .setCategories(this.categories)
-                        .build();
-                }
+            if (this.user) {
+                this.requestBuilder = this.messagesRequestBuilder ? this.messagesRequestBuilder.setUID(this.user?.getUid()).build() : new CometChat.MessagesRequestBuilder()
+                    .setUID(this.user.getUid())
+                    .setLimit(this.limit)
+                    .setTypes(this.types)
+                    .setCategories(this.categories)
+                    .hideReplies(true)
+                    .build();
             }
             else {
-                this.requestBuilder = this.messagesRequestBuilder.build();
+                this.requestBuilder = this.messagesRequestBuilder ? this.messagesRequestBuilder.setGUID(this.group?.getGuid()).build() : new CometChat.MessagesRequestBuilder()
+                    .setGUID(this.group.getGuid())
+                    .setLimit(this.limit)
+                    .setTypes(this.types)
+                    .hideReplies(true)
+                    .setCategories(this.categories)
+                    .build();
             }
             this.fetchPreviousMessages();
         }
@@ -7942,7 +8027,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -7993,7 +8078,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -8032,7 +8117,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
         this.ref.detectChanges();
@@ -8058,7 +8143,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -8085,7 +8170,7 @@ class CometChatMessageListComponent {
             else {
                 this.messagesList.splice(30);
             }
-            this.requestBuilder = this.messagesRequestBuilder;
+            this.requestBuilder = this.user ? this.messagesRequestBuilder.setUID(this.user.getUid()).build() : this.messagesRequestBuilder.setGUID(this.group.getGuid()).build();
         }
         else {
             if (this.keepRecentMessages) {
@@ -8135,7 +8220,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
         this.ref.detectChanges();
@@ -8212,7 +8297,7 @@ class CometChatMessageListComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
         this.ref.detectChanges();
@@ -8274,7 +8359,7 @@ class CometChatMessageListComponent {
         catch (error) {
             this.state = States$1.error;
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -8378,9 +8463,12 @@ class CometChatMessageListComponent {
         this.ccShowPanel = CometChatUIEvents.ccShowPanel.subscribe((data) => {
             this.smartReplyConfig = data.configuration;
             this.smartReplyMessage = data.message;
-            this.enableSmartReply = true;
-            this.showSmartReply = true;
-            this.ref.detectChanges();
+            const smartReplyObject = data.message?.metadata?.[SmartRepliesConstants.injected]?.extensions?.[SmartRepliesConstants.smart_reply];
+            if (smartReplyObject && !smartReplyObject.error) {
+                this.enableSmartReply = true;
+                this.showSmartReply = true;
+                this.ref.detectChanges();
+            }
         });
         this.ccHidePanel = CometChatUIEvents.ccHidePanel.subscribe(() => {
             this.smartReplyMessage = null;
@@ -8474,10 +8562,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", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError" }, 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: "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: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\">\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    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *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\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && 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        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--empty\" *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\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0)\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt()))\n        \">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [style]=\"avatarStyle\" [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 *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [style]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-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  </div>\n  <div class=\"cc-message-list__footer-view\">\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"showSmartReply && getReplies() && (!UnreadCount || UnreadCount.length == 0)\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n<div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\">\n  <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n</div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [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)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></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)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [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\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [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 *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [style]=\"avatarStyle\" [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 *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [style]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;position:relative}.cc-message-list__wrapper{height:100%;width:100%;padding:8px;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0}.cc-message-list__date{border-radius:10px}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:0%;position:absolute}.cc-message-list__footer-view{z-index:2;position:relative;width:100%}.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::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder"] }], 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"] }, { 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", 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", alignment: "alignment", showAvatar: "showAvatar", datePattern: "datePattern", timestampAlignment: "timestampAlignment", DateSeparatorPattern: "DateSeparatorPattern", templates: "templates", messagesRequestBuilder: "messagesRequestBuilder", newMessageIndicatorText: "newMessageIndicatorText", scrollToBottomOnNewMessages: "scrollToBottomOnNewMessages", thresholdValue: "thresholdValue", onThreadRepliesClick: "onThreadRepliesClick", headerView: "headerView", footerView: "footerView", parentMessageId: "parentMessageId", avatarStyle: "avatarStyle", backdropStyle: "backdropStyle", dateSeparatorStyle: "dateSeparatorStyle", messageListStyle: "messageListStyle", onError: "onError" }, 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: "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: "pollBubble", first: true, predicate: ["pollBubble"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\">\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 [ngStyle]=\"{height: showSmartReply ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *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\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && 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        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--empty\" *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\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0)\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt()))\n        \">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [style]=\"avatarStyle\" [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 *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [style]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-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\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView ? '20%' : '10%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply  ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [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)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></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)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [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\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [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 *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [style]=\"avatarStyle\" [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 *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [style]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\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%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px}.cc-message-list__threadreplies{min-width:130px;width:100%}.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%}.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::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}\n"], components: [{ type: CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "moreIconURL", "topMenuSize"] }, { type: CometChatOngoingCallComponent, selector: "cometchat-ongoing-call", inputs: ["ongoingCallStyle", "resizeIconHoverText", "sessionID", "minimizeIconURL", "maximizeIconURL", "callSettingsBuilder"] }], 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"] }, { 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  <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    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *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\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && 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        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--empty\" *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\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0)\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt()))\n        \">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [style]=\"avatarStyle\" [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 *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [style]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-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  </div>\n  <div class=\"cc-message-list__footer-view\">\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"showSmartReply && getReplies() && (!UnreadCount || UnreadCount.length == 0)\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n<div class=\"cc-message-list__message-indicator\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\">\n  <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n</div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [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)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></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)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [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\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [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 *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [style]=\"avatarStyle\" [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 *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [style]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\n", styles: [".cc-message-list{height:100%;width:100%;overflow-y:auto;position:relative}.cc-message-list__wrapper{height:100%;width:100%;padding:8px;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0}.cc-message-list__date{border-radius:10px}.cc-message-list__threadreplies{min-width:130px;width:100%}.cc-message-list__message-indicator{height:25px;display:flex;align-items:center;justify-content:center;width:100%;bottom:0%;position:absolute}.cc-message-list__footer-view{z-index:2;position:relative;width:100%}.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::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}\n"] }]
+            args: [{ selector: "cometchat-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-list__wrapper\" [ngStyle]=\"wrapperStyle()\">\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 [ngStyle]=\"{height: showSmartReply ? '92%' : '100%'}\">\n    <div class=\"cc-message-list__top\" #top>\n    </div>\n    <div class=\"cc-message-list__decorator-message\" *ngIf=\"state == states.loading || state == states.error  || state == states.empty \"\n      [ngStyle]=\"messageContainerStyle()\">\n      <div class=\"cc-message-list__loading-view\" *ngIf=\"state == states.loading \">\n        <cometchat-loader [iconURL]=\"loadingIconURL\" [loaderStyle]=\"loadingStyle()\">\n        </cometchat-loader>\n        <span class=\"cc-message-list__customview--loading\" *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\" *ngIf=\"state == states.error  && !hideError \">\n        <cometchat-label [labelStyle]=\"errorStyle()\" *ngIf=\"state == states.error  && !hideError && !errorStateView\" [text]=\"errorStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--error\" *ngIf=\"state == states.error  && !hideError && 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        <cometchat-label [labelStyle]=\"emptyStyle()\" *ngIf=\"state == states.empty && !emptyStateView\" [text]=\"emptyStateText\"\n          >\n        </cometchat-label>\n        <span class=\"cc-message-list__custom-view--empty\" *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\" *ngFor=\"let message of messagesList; let i = index\">\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i === 0)\">\n        <span class=\"cc-message-list__date\" >\n          <cometchat-date [timestamp]=\"message!.getSentAt()\"  [pattern]=\"DateSeparatorPattern\" [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n      <div class=\"cc-message-list__date-container\" *ngIf=\"(i > 0 && isDateDifferent(messagesList[i - 1]?.getSentAt(), messagesList[i]?.getSentAt()))\n        \">\n        <span class=\"cc-message-list__date\"  >\n          <cometchat-date [timestamp]=\"message?.getSentAt()\" [pattern]=\"DateSeparatorPattern\"   [dateStyle]=\"dateSeparatorStyle\"\n           >\n          </cometchat-date>\n        </span>\n      </div>\n        <div *ngIf=\"getBubbleWrapper(message) \">\n          <ng-container *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n          </ng-container>\n        </div>\n       <div>\n        <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [leadingView]=\" showAvatar ? leadingView : null\" [bottomView]=\"enableReactions ? reactionView : null\"\n        [headerView]=\"getHeaderView(message) || message?.getCategory() != MessageCategory.action && showHeaderTitle(message) ? bubbleHeader : null\" [footerView]=\"footerView\"  [contentView]=\"contentView\" [threadView]=\"threadView\"\n         [id]=\"message?.getId() || message?.getMuid()\" [options]=\"setMessageOptions(message)\"\n          [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"setBubbleAlignment(message)\">\n        <ng-template #contentView>\n          <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </ng-template>\n        <ng-template #reactionView>\n          <reactions-view [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n          [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n          </ng-template>\n         <ng-template #footerView>\n          <div  class=\"cc-message-list__bubble-footer\">\n            <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n              <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n              </ng-container>\n            </div>\n            <ng-template #bubbleFooter>\n              <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && !message.getDeletedAt() && message?.getCategory() != MessageCategory.call\">\n                <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n                </cometchat-date>\n               </div>\n                 <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                    <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"deliveredIcon\" [readIcon]=\"readIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n                 </div>\n            </ng-template>\n          </div>\n         </ng-template>\n<ng-template #leadingView>\n  <div  *ngIf=\" message?.getCategory() != MessageCategory.action  && showHeaderTitle(message)\" >\n    <cometchat-avatar [name]=\"message?.getSender()?.getName()\" [style]=\"avatarStyle\" [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 *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n    </ng-container>\n  </div>\n<ng-template #defaultHeader>\n  <div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n    <cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n    <cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [style]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top\"></cometchat-date>\n   </div>\n</ng-template>\n</ng-template>\n<ng-template #threadView>\n  <div class=\"cc-message-list__threadreplies\" *ngIf=\"message?.getReplyCount() && !message.getDeletedAt()\" >\n    <cometchat-divider [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n    <cometchat-button [text]=\"getThreadCount(message)\" [buttonStyle]=\"getThreadViewStyle(message)\" [iconURL]=\"threadOpenIcon\" (cc-button-clicked)=\"openThreadView(message)\">\n    </cometchat-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\" *ngIf=\"UnreadCount && UnreadCount.length > 0 && !isOnBottom\" [ngStyle]=\"{bottom: showSmartReply || footerView ? '20%' : '10%'}\">\n    <cometchat-button [text]=\"newMessageCount\" [buttonStyle]=\"unreadMessagesStyle\" (cc-button-clicked)=\"scrollToBottom()\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-list__footer-view\" [ngStyle]=\"{height: showSmartReply  ? '8%' : 'auto'}\">\n\n    <div *ngIf=\"footerView;else footer\">\n      <ng-container *ngTemplateOutlet=\"footerView\">\n      </ng-container>\n    </div>\n    <ng-template #footer>\n      <div class=\"cc-message-list__smart-replies\" *ngIf=\"showSmartReply && getReplies()\">\n        <smart-replies [smartReplyStyle]=\"smartReplyStyle\" [replies]=\"getReplies()\" (cc-reply-clicked)=\"sendReply($event)\" (cc-close-clicked)=\"closeSmartReply()\">\n        </smart-replies>\n      </div>\n    </ng-template>\n        </div>\n\n</div>\n<!-- default bubbles -->\n<ng-template #textBubble let-message>\n  <cometchat-text-bubble *ngIf=\"message?.type == MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.message\"></cometchat-text-bubble>\n  <cometchat-text-bubble *ngIf=\"message?.getDeletedAt()\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"localize('MESSAGE_IS_DELETED')\"></cometchat-text-bubble>\n<cometchat-text-bubble *ngIf=\"!isTranslated(message) && !getLinkPreview(message) && !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"getTextMessage(message)\"></cometchat-text-bubble>\n<link-preview [linkPreviewStyle]=\"linkPreviewStyle\" (cc-link-clicked)=\"openLinkURL($event)\" *ngIf=\"!message?.getDeletedAt() && getLinkPreview(message) && enableLinkPreview\" [title]=\"getLinkPreviewDetails('title',message)\" [description]=\"getLinkPreviewDetails('description',message)\" [URL]=\"getLinkPreviewDetails('url',message)\" [image]=\"getLinkPreviewDetails('image',message)\" [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)\"></cometchat-text-bubble>\n</link-preview>\n<message-translation-bubble [alignment]=\"getBubbleAlignment(message)\" *ngIf=\"isTranslated(message)\"  [messageTranslationStyle]=\"setTranslationStyle(message)\" [translatedText]=\"isTranslated(message)\">\n  <cometchat-text-bubble *ngIf=\" !message?.deletedAt && message?.type != MessageTypesConstant.groupMember\" [textStyle]=\"setTextBubbleStyle(message)\" [text]=\"message?.text\"></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)\" [downloadIconURL]=\"downloadIconURL\" [subtitle]=\"localize('SHARED_FILE')\" [title]=\"message?.data?.attachments ? message?.data?.attachments[0]?.name: ''\" [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\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.audio\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n  <cometchat-audio-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\"  [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" > </cometchat-audio-bubble>\n</ng-template>\n<ng-template #videoBubble let-message>\n  <cometchat-icon-button [disabled]=\"true\" *ngIf=\"message?.category == callConstant && message?.type == MessageTypesConstant.video\" [iconURL]=\"getCallTypeIcon(message)\" [buttonStyle]=\"callStatusStyle(message)\" [text]=\"getCallActionMessage(message)\"></cometchat-icon-button>\n\n  <cometchat-video-bubble *ngIf=\"!message.getDeletedAt() && message?.category != callConstant\" [videoStyle]=\"videoBubbleStyle\" [src]=\"message?.data?.attachments ? message?.data?.attachments[0]?.url : ''\" [poster]=\" getImageThumbnail(message)\"></cometchat-video-bubble>\n</ng-template>\n<ng-template #imageBubble let-message>\n <image-moderation  (cc-show-dialog)=\"openWarningDialog($event)\" *ngIf=\"!message.getDeletedAt() && enableImageModeration\" [message]=\"message\" [imageModerationStyle]=\"imageModerationStyle\">\n  <cometchat-image-bubble (cc-image-clicked)=\"openImageInFullScreen(message)\" [imageStyle]=\"imageBubbleStyle\"   [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n </image-moderation>\n  <cometchat-image-bubble [imageStyle]=\"imageBubbleStyle\" (cc-image-clicked)=\"openImageInFullScreen(message)\" *ngIf=\"!message.getDeletedAt() && !enableImageModeration\"  [src]=\" getImageThumbnail(message)\" [placeholderImage]=\"placeholderIconURL\"></cometchat-image-bubble>\n</ng-template>\n<ng-template #customTextBubble>\n</ng-template>\n<ng-template #stickerBubble  let-message>\n  <cometchat-image-bubble [src]=\"getSticker(message)\" [imageStyle]=\"imageBubbleStyle\" ></cometchat-image-bubble>\n\n</ng-template>\n<ng-template #whiteboardBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"whiteboardIconURL\" [title]=\"whiteboardTitle\" [buttonText]=\"whiteboardButtonText\" [subtitle]=\"whiteboardSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #documentBubble  let-message>\n  <cometchat-document-bubble [hideSeparator]=\"false\" [iconAlignment]=\"documentBubbleAlignment\" [documentStyle]=\"documentBubbleStyle\" [URL]=\"getWhiteboardDocument(message)\" [ccClicked]=\"launchCollaborativeWhiteboardDocument\" [iconURL]=\"documentIconURL\" [title]=\"documentTitle\" [buttonText]=\"documentButtonText\" [subtitle]=\"documentSubitle\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #directCalling  let-message>\n  <cometchat-document-bubble  [hideSeparator]=\"true\" [iconAlignment]=\"callBubbleAlignment\" [documentStyle]=\"getCallBubbleStyle(message)\" [URL]=\"getSessionId(message)\" [ccClicked]=\"startDirectCall\" [iconURL]=\"directCallIconURL\" [title]=\"getCallBubbleTitle(message)\" [buttonText]=\"joinCallButtonText\"></cometchat-document-bubble>\n\n</ng-template>\n<ng-template #pollBubble  let-message>\n  <polls-bubble [pollStyle]=\"pollBubbleStyle\"  [pollQuestion]=\"getPollBubbleData(message,'question')\" [pollId]=\"getPollBubbleData(message,'id')\"\n   [loggedInUser]=\"loggedInUser\" [senderUid]=\"getPollBubbleData(message)\" [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 *ngTemplateOutlet=\"getBubbleWrapper(message)\">\n    </ng-container>\n  </div>\n  <cometchat-message-bubble  *ngIf=\"!getBubbleWrapper(message)\" [bottomView]=\"enableReactions ? reactionView : null\" [leadingView]=\" showAvatar ? leadingView : null\" [headerView]=\"bubbleHeader\" [footerView]=\"footerView\"\n  [contentView]=\"contentView\"  [id]=\"message?.getId() || message?.getMuid()\"  [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"  [alignment]=\"threadedAlignment\">\n    <ng-template #contentView>\n      <ng-container *ngTemplateOutlet=\"getContentView(message);context:{ $implicit: message }\" >\n      </ng-container>\n    </ng-template>\n    <ng-template #reactionView>\n      <reactions-view [messageObject]=\"message\" [alignment]=\"setBubbleAlignment(message)\"\n      [loggedInUser]=\"loggedInUser\" [reactionsStyle]=\"reactionsStyle(message)\"></reactions-view>\n      </ng-template>\n     <ng-template #footerView>\n      <div  class=\"cc-message-list__bubble-footer\">\n        <div *ngIf=\"getFooterView(message);else bubbleFooter\">\n          <ng-container *ngTemplateOutlet=\"getFooterView(message);context:{ $implicit: message }\" >\n          </ng-container>\n        </div>\n        <ng-template #bubbleFooter>\n          <div class=\"cc-message-list__bubble-date\" *ngIf=\"timestampAlignment == timestampEnum.bottom && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\">\n            <cometchat-date [timestamp]=\"message?.getSentAt()\" [dateStyle]=\"bubbleDateStyle\" [pattern]=\"datePattern\">\n            </cometchat-date>\n           </div>\n             <div *ngIf=\" !message?.getDeletedAt() &&  !disableReceipt && (!message?.getSender() ||this.loggedInUser.getUid() == message?.getSender()?.getUid()) && message?.getCategory() != MessageCategory.action && message?.getCategory() != MessageCategory.call\" class=\"cc-message-list__receipt\">\n                <cometchat-receipt [receipt]=\"getMessageReceipt(message)\" [receiptStyle]=\"receiptStyle\" [waitIcon]=\"waitIcon\" [sentIcon]=\"sentIcon\" [deliveredIcon]=\"\" [readIcon]=\"deliveredIcon\" [errorIcon]=\"errorIcon\"></cometchat-receipt>\n             </div>\n        </ng-template>\n      </div>\n     </ng-template>\n<ng-template #leadingView>\n<div  *ngIf=\" message?.getCategory() != MessageCategory.action && showHeaderTitle(message)\" >\n<cometchat-avatar [name]=\"message?.getSender()?.getName()\" [style]=\"avatarStyle\" [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 *ngTemplateOutlet=\"getHeaderView(message);context:{ $implicit: message }\" >\n</ng-container>\n</div>\n<ng-template #defaultHeader>\n<div  class=\"cc-message-list__bubble-header\" *ngIf=\"message?.getCategory() != MessageCategory.action && showHeaderTitle(message) && message?.getCategory() != MessageCategory.call\">\n<cometchat-label [text]=\"message?.getSender()?.getName()\" [labelStyle]=\"labelStyle\"></cometchat-label>\n<cometchat-date [pattern]=\"datePattern\" [timestamp]=\"message?.getSentAt()\" [style]=\"bubbleDateStyle\" *ngIf=\"timestampAlignment == timestampEnum.top\"></cometchat-date>\n</div>\n</ng-template>\n</ng-template>\n  </cometchat-message-bubble>\n\n</ng-template>\n\n\n<!--  -->\n<ng-template #bubbleView></ng-template>\n<cometchat-popover [popoverStyle]=\"popoverStyle\"  #popoverRef [placement]=\"keyboardAlignment\">\n<cometchat-emoji-keyboard (cc-emoji-clicked)=\"addReaction($event)\"  slot=\"content\"></cometchat-emoji-keyboard>\n</cometchat-popover>\n<cometchat-backdrop *ngIf=\"openConfirmDialog\" [backdropStyle]=\"backdropStyle\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"warningText\" (cc-confirm-clicked)=\"onConfirmClick()\" [cancelButtonText]=\"cancelText\" [confirmButtonText]=\"confirmText\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"confirmDialogStyle\">\n\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<full-screen-viewer (cc-close-clicked)=\"closeImageInFullScreen()\" *ngIf=\"openFullscreenView\" [URL]=\"imageurlToOpen\" [closeIconURL]=\"closeIconURL\" [fullScreenViewerStyle]=\"fullScreenViewerStyle\">\n\n</full-screen-viewer>\n\n<!-- ongoing callscreen for direct call -->\n<cometchat-ongoing-call *ngIf=\"showOngoingCall\" [ongoingCallStyle]=\"ongoingCallStyle\" [sessionID]=\"sessionId\"></cometchat-ongoing-call>\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%;overflow-y:hidden}.cc-message-list__bubble-footer{display:flex;justify-content:center;align-items:center}.cc-message-list__date-container{text-align:center;margin:5px 0}.cc-message-list__smart-replies{height:-moz-fit-content;height:fit-content;width:100%;position:absolute;bottom:0;z-index:1}.cc-message-list__date{border-radius:10px}.cc-message-list__threadreplies{min-width:130px;width:100%}.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%}.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::-webkit-scrollbar{background:transparent;width:8px}.cc-message-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { listScroll: [{
                 type: ViewChild,
                 args: ["listScroll", { static: false }]
@@ -8614,7 +8702,7 @@ class CometChatMessageComposerComponent {
         this.customSoundForMessage = "";
         this.disableTypingEvents = false;
         this.text = "";
-        this.placeholderText = localize("SEND_MESSAGE");
+        this.placeholderText = localize("ENTER_YOUR_MESSAGE_HERE");
         this.attachmentIconURL = "assets/Plus.svg";
         this.auxiliaryButtonsAlignment = AuxiliaryButtonAlignment.right;
         this.parentMessageId = 0;
@@ -8701,8 +8789,8 @@ class CometChatMessageComposerComponent {
             boxShadow: "0px 0px 32px rgba(20, 20, 20, 0.2)",
         };
         this.stickerPopover = {
-            width: "100%",
-            height: "100%",
+            width: "300px",
+            height: "320px",
             border: "none",
             background: "transparent",
             borderRadius: "8px",
@@ -8802,6 +8890,8 @@ class CometChatMessageComposerComponent {
             handler(event);
         };
         this.sendSticker = (event) => {
+            this.stickerButtonRef?.nativeElement?.click();
+            this.showStickerKeyboard = false;
             let sticker = event?.detail?.stickerURL;
             let stickerName = event?.detail?.stickerName;
             if (this.stickerConfiguration?.configuration?.ccStickerClicked) {
@@ -9027,7 +9117,9 @@ class CometChatMessageComposerComponent {
             }
         }
         catch (error) {
-            this.onError(error);
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
         }
         return true;
     }
@@ -9057,7 +9149,9 @@ class CometChatMessageComposerComponent {
             });
         }
         catch (error) {
-            this.onError(error);
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
         }
     }
     getReceiverDetails() {
@@ -9098,7 +9192,9 @@ class CometChatMessageComposerComponent {
                 }, typingInterval);
             }
             catch (error) {
-                this.onError(error);
+                if (this.onError) {
+                    this.onError(CometChatException(error));
+                }
             }
         }
     }
@@ -9113,7 +9209,9 @@ class CometChatMessageComposerComponent {
                 this.storeTypingInterval = null;
             }
             catch (error) {
-                this.onError(error);
+                if (this.onError) {
+                    this.onError(CometChatException(error));
+                }
             }
         }
     }
@@ -9173,7 +9271,9 @@ class CometChatMessageComposerComponent {
             }
         }
         catch (error) {
-            this.onError(error);
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
         }
         return true;
     }
@@ -9194,7 +9294,9 @@ class CometChatMessageComposerComponent {
             reader.readAsArrayBuffer(uploadedFile);
         }
         catch (error) {
-            this.onError(error);
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
         }
         return true;
     }
@@ -9215,7 +9317,9 @@ class CometChatMessageComposerComponent {
             reader.readAsArrayBuffer(uploadedFile);
         }
         catch (error) {
-            this.onError(error);
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
         }
         return true;
     }
@@ -9236,7 +9340,9 @@ class CometChatMessageComposerComponent {
             reader.readAsArrayBuffer(uploadedFile);
         }
         catch (error) {
-            this.onError(error);
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
         }
         return true;
     }
@@ -9257,7 +9363,9 @@ class CometChatMessageComposerComponent {
             reader.readAsArrayBuffer(uploadedFile);
         }
         catch (error) {
-            this.onError(error);
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
         }
         return true;
     }
@@ -9283,6 +9391,7 @@ class CometChatMessageComposerComponent {
         return { user: null, group: null, parentMessageId: this.parentMessageId };
     }
     ngOnInit() {
+        console.log(this.auxilaryButtonView);
         CometChat.getLoggedinUser().then((user) => {
             this.loggedInUser = user;
         }).catch((error) => {
@@ -9301,6 +9410,11 @@ class CometChatMessageComposerComponent {
             this.enableStickerKeyboard = false;
         }
     }
+    composerWrapperStyle() {
+        return {
+            background: this.themeService.theme.palette.getBackground()
+        };
+    }
     setTheme() {
         this.setComposerStyle();
         this.actionsheetStyle = {
@@ -9452,10 +9566,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", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" >\n  <div class=\"cc-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *ngTemplateOutlet=\"headerView\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showStickerKeyboard\">\n      <stickers-keyboard    [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n      </stickers-keyboard>\n    </div>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\" [previewSubtitle]=\"messageToBeEdited?.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *ngTemplateOutlet=\"secondaryButtonView\">\n        </ng-container>\n      </div>\n      <ng-template #secondaryButton>\n    <div class=\"cc-message-composer__attachbutton\">\n        <cometchat-popover [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n    <div slot=\"auxilaryView\" >\n     <div *ngIf=\"auxilaryButtonView; else auxilaryView\">\n      <ng-container *ngTemplateOutlet=\"auxilaryButtonView\">\n      </ng-container>\n     </div>\n    </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n<ng-template #auxilaryView>\n<div class=\"cc-message-composer__auxiliary\">\n  <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n    <cometchat-button #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-composer__emojikeyboard\">\n    <cometchat-popover  [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n      <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n      </cometchat-emoji-keyboard>\n      <cometchat-button #emojiButtonRef slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n    </cometchat-popover>\n  </div>\n</div>\n</ng-template>\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:4px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}\n"], directives: [{ 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", messageComposerStyle: "messageComposerStyle", onSendButtonClick: "onSendButtonClick", onError: "onError", backdropStyle: "backdropStyle" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *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\" [previewSubtitle]=\"messageToBeEdited.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *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 [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\" *ngIf=\"auxilaryButtonView\">\n          <ng-container *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\" >\n            <stickers-keyboard  slot=\"content\"  [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button slot=\"children\" #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover  [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n            <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n      </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:4px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}\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: CometChatMessageComposerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cometchat-message-composer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" >\n  <div class=\"cc-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *ngTemplateOutlet=\"headerView\">\n    </ng-container>\n  </div>\n  <ng-template #messagePreview>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showStickerKeyboard\">\n      <stickers-keyboard    [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n      </stickers-keyboard>\n    </div>\n    <div class=\"cc-message-composer__header-view\" *ngIf=\"showPreview\">\n      <cometchat-preview [previewStyle]=\"previewStyle\" [previewSubtitle]=\"messageToBeEdited?.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *ngTemplateOutlet=\"secondaryButtonView\">\n        </ng-container>\n      </div>\n      <ng-template #secondaryButton>\n    <div class=\"cc-message-composer__attachbutton\">\n        <cometchat-popover [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n    <div slot=\"auxilaryView\" >\n     <div *ngIf=\"auxilaryButtonView; else auxilaryView\">\n      <ng-container *ngTemplateOutlet=\"auxilaryButtonView\">\n      </ng-container>\n     </div>\n    </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n<ng-template #auxilaryView>\n<div class=\"cc-message-composer__auxiliary\">\n  <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n    <cometchat-button #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n  </div>\n  <div class=\"cc-message-composer__emojikeyboard\">\n    <cometchat-popover  [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n      <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n      </cometchat-emoji-keyboard>\n      <cometchat-button #emojiButtonRef slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n    </cometchat-popover>\n  </div>\n</div>\n</ng-template>\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:4px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}\n"] }]
+            args: [{ selector: 'cometchat-message-composer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-message-composer__wrapper\" [ngStyle]=\"composerWrapperStyle()\">\n  <div class=\"cc-message-composer__header-view\" *ngIf=\"headerView; else messagePreview\">\n    <ng-container *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\" [previewSubtitle]=\"messageToBeEdited.getText()\" (cc-preview-close-clicked)=\"closePreview()\"> </cometchat-preview>\n    </div>\n  </ng-template>\n<div class=\"cc-message-composer__input\">\n  <cometchat-message-input (cc-message-input-entered)=\"sendMessageOnEnter($event)\" #inputRef [text]=\"text\" (cc-message-input-changed)=\"messageInputChanged($event)\" [messageInputStyle]=\"messageInputStyle\" [placeholderText]=\"placeholderText\" [auxiliaryButtonAlignment]=\"auxiliaryButtonsAlignment\">\n    <div slot=\"secondaryView\">\n      <div *ngIf=\"secondaryButtonView;else secondaryButton\">\n        <ng-container *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 [placement]=\"auxilaryPlacement\" [popoverStyle]=\"popoverStyle\" >\n          <cometchat-action-sheet slot=\"content\" [actions]=\"composerActions\" [actionSheetStyle]=\"actionsheetStyle\" (cc-actionsheet-clicked)=\"handleActions($event)\">\n          </cometchat-action-sheet>\n            <cometchat-button #actionSheetRef slot=\"children\" (cc-button-clicked)=\"openActionSheet($event)\" [iconURL]=\"!showActionSheetItem || (showEmojiKeyboard && !showActionSheetItem)  ? attachmentIconURL  : closeIconURL\" [buttonStyle]=\"attachmentButtonStyle\"></cometchat-button>\n        </cometchat-popover>\n    </div>\n      </ng-template>\n    </div>\n\n      <div class=\"cc-message-composer__auxiliary\" slot=\"auxilaryView\">\n        <div class=\"cc-message-composer__custom-auxiliary-view\" *ngIf=\"auxilaryButtonView\">\n          <ng-container *ngTemplateOutlet=\"auxilaryButtonView;context:{ $implicit: user ?? group, composerId:composerId }\">\n          </ng-container>\n        </div>\n        <div class=\"cc-message-composer__stickerkeyboard\" *ngIf=\"enableStickerKeyboard\">\n          <cometchat-popover [popoverStyle]=\"stickerPopover\" [placement]=\"auxilaryPlacement\" >\n            <stickers-keyboard  slot=\"content\"  [stickerStyle]=\"stickerKeyboardStyle\" (cc-sticker-clicked)=\"sendSticker($event)\">\n            </stickers-keyboard>\n            <cometchat-button slot=\"children\" #stickerButtonRef  (cc-button-clicked)=\"openStickerKeyboard($event)\" [iconURL]=\" !showStickerKeyboard ? stickerButtonIconURL : closeIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n        <div class=\"cc-message-composer__emojikeyboard\">\n          <cometchat-popover  [placement]=\"auxilaryPlacement\" [popoverStyle]=\"emojiPopover\" >\n            <cometchat-emoji-keyboard slot=\"content\" [emojiKeyboardStyle]=\"emojiKeyboardStyle\" (cc-emoji-clicked)=\"appendEmoji($event)\">\n            </cometchat-emoji-keyboard>\n            <cometchat-button #emojiButtonRef slot=\"children\" (cc-button-clicked)=\"openEmojiKeyboard($event)\" [iconURL]=\" !showEmojiKeyboard  || (!showEmojiKeyboard && showActionSheetItem) ? emojiButtonIconURL : closeIconURL\" [buttonStyle]=\"emojiButtonStyle\"></cometchat-button>\n          </cometchat-popover>\n        </div>\n      </div>\n    <div slot=\"primaryView\">\n      <div *ngIf=\"sendButtonView;else sendButton\">\n      </div>\n      <ng-template #sendButton>\n        <div class=\"cc-message-composer__sendbutton\" *ngIf=\"showSendButton || hideLiveReaction\">\n  <cometchat-button [iconURL]=\"sendButtonIconURL\" [buttonStyle]=\"sendButtonStyle\" [hoverText]=\"localize('SEND_MESSAGE')\" (cc-button-clicked)=\"customSendMethod(messageText)\"></cometchat-button>\n        </div>\n        <div class=\"cc-message-composer__livereaction\" *ngIf=\"!hideLiveReaction && !showSendButton\">\n          <cometchat-button [iconURL]=\"LiveReactionIconURL\" [hoverText]=\"localize('LIVE_REACTION')\" [buttonStyle]=\"liveReactionStyle\" (cc-button-clicked)=\"sendReaction()\"></cometchat-button>\n          </div>\n      </ng-template>\n    </div>\n  </cometchat-message-input>\n</div>\n</div>\n\n<input class=\"cc-message-composer__mediainput\" #inputElement (change)=\"inputChangeHandler($event)\" />\n<cometchat-backdrop *ngIf=\"showCreatePolls\" [backdropStyle]=\"backdropStyle\">\n  <create-poll [user]=\"user\" [group]=\"group\" (cc-close-clicked)=\"closeCreatePolls()\" [createPollStyle]=\"createPollStyle\"></create-poll>\n</cometchat-backdrop>", styles: [".cc-message-composer__sendbutton,.cc-message-composer__livereaction{margin:0 5px}.cc-message-composer__wrapper{height:100%;width:100%;position:relative;padding:4px}.cc-message-composer__header-view{height:-moz-fit-content;height:fit-content;width:100%;bottom:120%}.cc-message-composer__mediainput{display:none}.cc-message-composer__auxiliary{display:flex;gap:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { inputElementRef: [{
                 type: ViewChild,
                 args: ["inputElement", { static: false }]
@@ -9657,7 +9771,7 @@ class CometChatThreadedMessagesComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -9697,7 +9811,7 @@ class CometChatThreadedMessagesComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -9779,10 +9893,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" }, 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-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n<div class=\"cc-threaded-messages__header\">\n<div class=\"cc-threaded-messages__title\">\n<cometchat-label [text]=\"title\" [labelStyle]=\"titleStyle\"></cometchat-label>\n</div>\n<div  class=\"cc-threaded-messages__close\">\n<cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\" (cc-button-clicked)=\"closeView()\"></cometchat-button>\n</div>\n</div>\n<div class=\"cc-threaded-messages__bubble-view\">\n  <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n</div>\n<div class=\"cc-threaded-messages__action-view\">\n  <ng-container *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\" [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n</div>\n<div class=\"cc-threaded-messages__list\">\n  <cometchat-message-list #messageListRef [parentMessageId]=\"parentMessage!.getId()\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.messageTypes\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef [parentMessageId]=\"parentMessage!.getId()\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n</div>\n </div>", 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:-moz-fit-content;width:fit-content}.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", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError"] }, { 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", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle"] }], 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", messageComposerConfiguration: "messageComposerConfiguration", threadedMessagesStyle: "threadedMessagesStyle" }, 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-threaded-messages__wrapper\" [ngStyle]=\"wrapperStyle()\">\n<div class=\"cc-threaded-messages__header\">\n<div class=\"cc-threaded-messages__title\">\n<cometchat-label [text]=\"title\" [labelStyle]=\"titleStyle\"></cometchat-label>\n</div>\n<div  class=\"cc-threaded-messages__close\">\n<cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\" (cc-button-clicked)=\"closeView()\"></cometchat-button>\n</div>\n</div>\n<div class=\"cc-threaded-messages__bubble-view\">\n  <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n</div>\n<div class=\"cc-threaded-messages__action-view\">\n  <ng-container *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\" [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n</div>\n<div class=\"cc-threaded-messages__list\">\n  <cometchat-message-list #messageListRef [parentMessageId]=\"parentMessage!.getId()\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef [parentMessageId]=\"parentMessage!.getId()\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n</div>\n </div>", 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:-moz-fit-content;width:fit-content}.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", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError"] }, { 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", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle"] }], 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\" [labelStyle]=\"titleStyle\"></cometchat-label>\n</div>\n<div  class=\"cc-threaded-messages__close\">\n<cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\" (cc-button-clicked)=\"closeView()\"></cometchat-button>\n</div>\n</div>\n<div class=\"cc-threaded-messages__bubble-view\">\n  <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n</div>\n<div class=\"cc-threaded-messages__action-view\">\n  <ng-container *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\" [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n</div>\n<div class=\"cc-threaded-messages__list\">\n  <cometchat-message-list #messageListRef [parentMessageId]=\"parentMessage!.getId()\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.messageTypes\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef [parentMessageId]=\"parentMessage!.getId()\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n</div>\n </div>", 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:-moz-fit-content;width:fit-content}.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\" [labelStyle]=\"titleStyle\"></cometchat-label>\n</div>\n<div  class=\"cc-threaded-messages__close\">\n<cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"buttonStyle\" (cc-button-clicked)=\"closeView()\"></cometchat-button>\n</div>\n</div>\n<div class=\"cc-threaded-messages__bubble-view\">\n  <ng-container *ngTemplateOutlet=\"bubbleView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n</div>\n<div class=\"cc-threaded-messages__action-view\">\n  <ng-container *ngTemplateOutlet=\"messageActionView; context:{ $implicit: parentMessage }\">\n  </ng-container>\n <cometchat-button *ngIf=\"!messageActionView\" [text]=\"getThreadCount()\" [buttonStyle]=\"actionButtonStyle\"></cometchat-button>\n</div>\n<div class=\"cc-threaded-messages__list\">\n  <cometchat-message-list #messageListRef [parentMessageId]=\"parentMessage!.getId()\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder || requestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-threaded-messages__composer\">\n    <cometchat-message-composer #messageComposerRef [parentMessageId]=\"parentMessage!.getId()\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n</div>\n </div>", 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:-moz-fit-content;width:fit-content}.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: { messageComposerRef: [{
                 type: ViewChild,
                 args: ["messageComposerRef", { static: false }]
@@ -10049,13 +10163,17 @@ class CometChatGroupMembersComponent {
                             this.ref.detectChanges();
                         }
                     }, (error) => {
-                        console.log(error);
+                        if (this.onError) {
+                            this.onError(CometChatException(error));
+                        }
                         this.state = States.error;
                         this.ref.detectChanges();
                     });
                 }
                 catch (error) {
-                    console.log(error);
+                    if (this.onError) {
+                        this.onError(CometChatException(error));
+                    }
                     this.state = States.error;
                     this.ref.detectChanges();
                 }
@@ -10829,14 +10947,10 @@ class CometChatDetailsComponent {
         this.onError = (error) => {
             console.log(error);
         };
-        this.leaveButtonText = localize("TRANSFER_OWNERSHIP");
-        this.cancelButtonText = localize("CANCEL");
-        this.confirmDialogMessage = localize("TRANSFER_CONFIRM");
-        this.addMembersConfiguration = new AddMembersConfiguration({});
-        this.bannedMembersConfiguration = new BannedMembersConfiguration({});
-        this.groupMembersConfiguration = new GroupMembersConfiguration({});
-        this.transferOwnershipConfiguration = new TransferOwnershipConfiguration({});
-        this.leaveDialogStyle = {
+        this.leaveGroupConfirmButtonText = localize("LEAVE_GROUP");
+        this.leaveGroupCancelButtonText = localize("CANCEL");
+        this.leaveGroupDialogMessage = localize("LEAVE_CONFIRM");
+        this.leaveGroupDialogStyle = {
             confirmButtonBackground: "RGB(51, 153, 255)",
             cancelButtonBackground: "RGBA(20, 20, 20, 0.06)",
             confirmButtonTextColor: "white",
@@ -10849,14 +10963,32 @@ class CometChatDetailsComponent {
             messageTextColor: "RGBA(20, 20, 20, 0.58)",
             background: "white",
             border: "1px solid #F2F2F2",
-            height: "220px",
+            height: "180px",
             width: "360px"
         };
-        this.backiconurl = "assets/backbutton.svg";
-        this.statusIndicatorStyle = {
-            height: "10px",
-            width: "10px",
-            borderRadius: "16px",
+        this.deleteGroupConfirmButtonText = localize("DELETE");
+        this.deleteGroupDialogMessage = localize("DELETE_CONFIRM");
+        this.deleteGroupCancelButtonText = localize("CANCEL");
+        this.deleteGroupDialogStyle = {
+            height: "180px",
+            width: "360px"
+        };
+        this.transferOwnershipConfirmButtonText = localize("TRANSFER_OWNERSHIP");
+        this.transferOwnershipDialogMessage = localize("TRANSFER_CONFIRM");
+        this.transferOwnershipCancelButtonText = localize("CANCEL");
+        this.transferOwnershipDialogStyle = {
+            height: "180px",
+            width: "360px"
+        };
+        this.addMembersConfiguration = new AddMembersConfiguration({});
+        this.bannedMembersConfiguration = new BannedMembersConfiguration({});
+        this.groupMembersConfiguration = new GroupMembersConfiguration({});
+        this.transferOwnershipConfiguration = new TransferOwnershipConfiguration({});
+        this.backiconurl = "assets/backbutton.svg";
+        this.statusIndicatorStyle = {
+            height: "10px",
+            width: "10px",
+            borderRadius: "16px",
             border: ""
         };
         this.backdropStyle = {
@@ -10874,8 +11006,7 @@ class CometChatDetailsComponent {
             width: "100%",
             height: "100%",
             border: "",
-            borderRadius: "",
-            padding: "0 100px"
+            borderRadius: ""
         };
         this.listItemStyle = {
             height: "100%",
@@ -10889,10 +11020,7 @@ class CometChatDetailsComponent {
             hoverBackground: "transparent",
             separatorColor: "rgb(222 222 222 / 46%)"
         };
-        this.leaveGroupText = localize("LEAVE_GROUP");
-        this.leaveGroupMessage = localize("LEAVE_CONFIRM");
-        this.transferText = localize("TRANSFER_OWNERSHIP");
-        this.transferConfirm = localize("TRANSFER_CONFIRM");
+        this.showTransferDialog = false;
         this.defaultTemplate = [];
         this.loggedInUser = null;
         this.openViewMembersPage = false;
@@ -10928,6 +11056,7 @@ class CometChatDetailsComponent {
             height: "1px",
             width: "100%"
         };
+        this.deleteGroupModal = false;
         this.subtitleText = "";
         this.userListenerId = "userlist_" + new Date().getTime();
         this.checkStatusType = () => {
@@ -11013,7 +11142,6 @@ class CometChatDetailsComponent {
             };
         };
     }
-    //
     getTitleStyle() {
         return {
             textFont: this.detailsStyle.titleTextFont || fontHelper(this.themeService.theme.typography.title1),
@@ -11024,6 +11152,7 @@ class CometChatDetailsComponent {
         return option?.customView;
     }
     ngOnChanges(changes) {
+        console.log(this.detailsStyle);
         if (changes["user"] || changes["group"]) {
             if (this.loggedInUser) {
                 this.getTemplate();
@@ -11164,7 +11293,9 @@ class CometChatDetailsComponent {
             }
         }
         catch (error) {
-            console.log(error);
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
         }
     }
     getSectionHeaderStyle(template) {
@@ -11204,41 +11335,42 @@ class CometChatDetailsComponent {
                 this.leaveGroup();
                 break;
             case CometChatUIKitConstants.GroupOptions.delete:
-                this.deleteGroup();
+                this.showDeleteDialog();
                 break;
             default:
                 break;
         }
     }
-    onLeaveClick() {
+    onTransferClick() {
         if (this.group.getOwner() == this.loggedInUser?.getUid()) {
             this.openTransferOwnershipModal = true;
             this.confirmLeaveGroupModal = false;
+            this.showTransferDialog = false;
         }
-        else {
-            CometChat.leaveGroup(this.group.getGuid())
-                .then((response) => {
-                this.group.setMembersCount(this.group.getMembersCount() - 1);
-                this.group.setHasJoined(false);
-                this.updateSubtitle();
-                this.ref.detectChanges();
-                this.openTransferOwnershipModal = false;
-                this.confirmLeaveGroupModal = false;
-                if (this.onClose) {
-                    this.onClose();
-                }
-                CometChatGroupEvents.ccGroupLeft.next({
-                    userLeft: this.loggedInUser,
-                    leftGroup: this.group,
-                    message: this.createUserLeftAction(this.loggedInUser, CometChatUIKitConstants.groupMemberAction.LEFT)
-                });
-            })
-                .catch((error) => {
-                if (this.onError) {
-                    this.onError(error);
-                }
+    }
+    onLeaveClick() {
+        CometChat.leaveGroup(this.group.getGuid())
+            .then((response) => {
+            this.group.setMembersCount(this.group.getMembersCount() - 1);
+            this.group.setHasJoined(false);
+            this.updateSubtitle();
+            this.ref.detectChanges();
+            this.openTransferOwnershipModal = false;
+            this.confirmLeaveGroupModal = false;
+            if (this.onClose) {
+                this.onClose();
+            }
+            CometChatGroupEvents.ccGroupLeft.next({
+                userLeft: this.loggedInUser,
+                leftGroup: this.group,
+                message: this.createUserLeftAction(this.loggedInUser, CometChatUIKitConstants.groupMemberAction.LEFT)
             });
-        }
+        })
+            .catch((error) => {
+            if (this.onError) {
+                this.onError(error);
+            }
+        });
     }
     createActionMessage(actionOn, action) {
         let actionMessage = new CometChat.Action(this.group.getGuid(), CometChatUIKitConstants.MessageTypes.groupMember, CometChatUIKitConstants.MessageReceiverType.group, CometChatUIKitConstants.MessageCategory.action);
@@ -11271,6 +11403,8 @@ class CometChatDetailsComponent {
     }
     onCancelClick() {
         this.confirmLeaveGroupModal = false;
+        this.deleteGroupModal = false;
+        this.showTransferDialog = false;
     }
     blockUser() {
         // block user
@@ -11307,18 +11441,22 @@ class CometChatDetailsComponent {
     }
     leaveGroup() {
         if (this.group.getOwner() == this.loggedInUser?.getUid()) {
-            this.leaveButtonText = this.transferText;
-            this.confirmDialogMessage = this.transferConfirm;
+            this.showTransferDialog = true;
+            this.confirmLeaveGroupModal = false;
         }
         else {
-            this.leaveButtonText = this.leaveGroupText;
-            this.confirmDialogMessage = this.leaveGroupMessage;
+            this.showTransferDialog = false;
         }
         this.confirmLeaveGroupModal = true;
         this.ref.detectChanges();
     }
+    showDeleteDialog() {
+        this.deleteGroupModal = true;
+    }
     deleteGroup() {
+        this.deleteGroupModal = false;
         CometChat.deleteGroup(this.group?.getGuid()).then(() => {
+            this.deleteGroupModal = false;
             CometChatGroupEvents.ccGroupDeleted.next(this.group);
             if (this.onClose) {
                 this.onClose();
@@ -11369,7 +11507,26 @@ class CometChatDetailsComponent {
             border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
             borderRadius: "8px"
         });
-        this.leaveDialogStyle = { ...defaultStyle, ...this.leaveDialogStyle };
+        let defaultDeleteDialogStyle = 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: "350px",
+            border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
+            borderRadius: "8px"
+        });
+        this.leaveGroupDialogStyle = { ...defaultStyle, ...this.leaveGroupDialogStyle };
+        this.transferOwnershipDialogStyle = { ...defaultStyle, ...this.transferOwnershipDialogStyle };
+        this.deleteGroupDialogStyle = { ...defaultDeleteDialogStyle, ...this.deleteGroupDialogStyle };
     }
     setListItemStyle() {
         let defaultStyle = new ListItemStyle({
@@ -11431,10 +11588,10 @@ class CometChatDetailsComponent {
     }
 }
 CometChatDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatDetailsComponent, selector: "cometchat-details", inputs: { group: "group", user: "user", title: "title", closeButtonIconURL: "closeButtonIconURL", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", data: "data", disableUsersPresence: "disableUsersPresence", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", onError: "onError", onClose: "onClose", leaveButtonText: "leaveButtonText", cancelButtonText: "cancelButtonText", confirmDialogMessage: "confirmDialogMessage", addMembersConfiguration: "addMembersConfiguration", bannedMembersConfiguration: "bannedMembersConfiguration", groupMembersConfiguration: "groupMembersConfiguration", transferOwnershipConfiguration: "transferOwnershipConfiguration", leaveDialogStyle: "leaveDialogStyle", statusIndicatorStyle: "statusIndicatorStyle", backdropStyle: "backdropStyle", avatarStyle: "avatarStyle", detailsStyle: "detailsStyle", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\" (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\" [avatarName]=\"user?.getName() ?? this.group?.getName()\" [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\" [listItemStyle]=\"listItemStyle\"\n    [statusIndicatorColor]=\"checkStatusType()\" [statusIndicatorIcon]=\"checkGroupType()\" [title]=\"this.user?.getName() ?? this.group?.getName()\"  [hideSeparator]=\"false\"\n     [statusIndicatorStyle]=\"statusIndicatorStyle\" [avatarStyle]=\"avatarStyle\">\n   <div slot=\"subtitleView\">\n   <div *ngIf=\"!subtitleView; else subtitle\">\n   <cometchat-label [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n   </cometchat-label>\n   </div>\n   <ng-template #subtitle>\n     <ng-container *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\" *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\" [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n    </div>\n    <div class=\"cc-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n<div class=\"cc-details__options\"*ngFor=\"let option of getTemplateOptions(item)\" >\n<div class=\"cc-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\" (click)=\"onOptionClick(option)\">\n  <div class=\"cc-details__option-title\" >\n    <cometchat-button  [text]=\"option.title\" [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 [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  [backButtonIconURL]=\"addMembersConfiguration.backButtonIconURL\"\n  [closeButtonIconURL]=\"addMembersConfiguration.closeButtonIconURL\"\n  [options]=\"addMembersConfiguration.options\"\n  [menu]=\"addMembersConfiguration.menu\"\n  [disableUsersPresence]=\"addMembersConfiguration.disableUsersPresence\"\n  [subtitleView]=\"addMembersConfiguration.subtitleView\"\n  [group]=\"group\"\n   [selectionMode]=\"selectionmodeEnum\"\n   [onClose]=\"addMembersConfiguration.onClose ||onCloseClick\"\n   [onBack]=\"addMembersConfiguration.onBack || addMembers\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\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\"\n  [group]=\"group\" [onClose]=\"onCloseClick\" [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\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\" [onClose]=\" groupMembersConfiguration.onClose || onCloseClick\" [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"  [messageText]=\"confirmDialogMessage\" [cancelButtonText]=\"cancelButtonText\" [confirmButtonText]=\"leaveButtonText\" (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"leaveDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\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\"\n  [group]=\"group\" [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%}.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"] }, { 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", "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", "groupMemberStyle", "groupScopeStyle", "listItemStyle"] }, { 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", "groupMemberStyle", "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", 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\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\" (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\" [avatarName]=\"user?.getName() ?? this.group?.getName()\" [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\" [listItemStyle]=\"listItemStyle\"\n    [statusIndicatorColor]=\"checkStatusType()\" [statusIndicatorIcon]=\"checkGroupType()\" [title]=\"this.user?.getName() ?? this.group?.getName()\"  [hideSeparator]=\"false\"\n     [statusIndicatorStyle]=\"statusIndicatorStyle\" [avatarStyle]=\"avatarStyle\">\n   <div slot=\"subtitleView\">\n   <div *ngIf=\"!subtitleView; else subtitle\">\n   <cometchat-label [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n   </cometchat-label>\n   </div>\n   <ng-template #subtitle>\n     <ng-container *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\" *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\" [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n    </div>\n    <div class=\"cc-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n<div class=\"cc-details__options\"*ngFor=\"let option of getTemplateOptions(item)\" >\n<div class=\"cc-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\" (click)=\"onOptionClick(option)\">\n  <div class=\"cc-details__option-title\" >\n    <cometchat-button  [text]=\"option.title\" [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 [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  [backButtonIconURL]=\"addMembersConfiguration.backButtonIconURL\"\n  [closeButtonIconURL]=\"addMembersConfiguration.closeButtonIconURL\"\n  [options]=\"addMembersConfiguration.options\"\n  [menu]=\"addMembersConfiguration.menu\"\n  [disableUsersPresence]=\"addMembersConfiguration.disableUsersPresence\"\n  [subtitleView]=\"addMembersConfiguration.subtitleView\"\n  [group]=\"group\"\n   [selectionMode]=\"selectionmodeEnum\"\n   [onClose]=\"addMembersConfiguration.onClose ||onCloseClick\"\n   [onBack]=\"addMembersConfiguration.onBack || addMembers\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\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\"\n  [group]=\"group\" [onClose]=\"onCloseClick\" [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\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\" [onClose]=\" groupMembersConfiguration.onClose || onCloseClick\" [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"  [messageText]=\"leaveGroupDialogMessage\" [cancelButtonText]=\"leaveGroupCancelButtonText\" [confirmButtonText]=\"leaveGroupConfirmButtonText\" (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"  [messageText]=\"transferOwnershipDialogMessage\" [cancelButtonText]=\"transferOwnershipCancelButtonText\" [confirmButtonText]=\"transferOwnershipConfirmButtonText\" (cc-confirm-clicked)=\"onTransferClick()\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\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\"\n  [group]=\"group\" [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"  [messageText]=\"deleteGroupDialogMessage\" [cancelButtonText]=\"deleteGroupCancelButtonText\" [confirmButtonText]=\"deleteGroupConfirmButtonText\" (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%}.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", "groupMemberStyle", "groupScopeStyle", "listItemStyle"] }, { 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", "groupMemberStyle", "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\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\" (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\" [avatarName]=\"user?.getName() ?? this.group?.getName()\" [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\" [listItemStyle]=\"listItemStyle\"\n    [statusIndicatorColor]=\"checkStatusType()\" [statusIndicatorIcon]=\"checkGroupType()\" [title]=\"this.user?.getName() ?? this.group?.getName()\"  [hideSeparator]=\"false\"\n     [statusIndicatorStyle]=\"statusIndicatorStyle\" [avatarStyle]=\"avatarStyle\">\n   <div slot=\"subtitleView\">\n   <div *ngIf=\"!subtitleView; else subtitle\">\n   <cometchat-label [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n   </cometchat-label>\n   </div>\n   <ng-template #subtitle>\n     <ng-container *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\" *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\" [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n    </div>\n    <div class=\"cc-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n<div class=\"cc-details__options\"*ngFor=\"let option of getTemplateOptions(item)\" >\n<div class=\"cc-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\" (click)=\"onOptionClick(option)\">\n  <div class=\"cc-details__option-title\" >\n    <cometchat-button  [text]=\"option.title\" [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 [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  [backButtonIconURL]=\"addMembersConfiguration.backButtonIconURL\"\n  [closeButtonIconURL]=\"addMembersConfiguration.closeButtonIconURL\"\n  [options]=\"addMembersConfiguration.options\"\n  [menu]=\"addMembersConfiguration.menu\"\n  [disableUsersPresence]=\"addMembersConfiguration.disableUsersPresence\"\n  [subtitleView]=\"addMembersConfiguration.subtitleView\"\n  [group]=\"group\"\n   [selectionMode]=\"selectionmodeEnum\"\n   [onClose]=\"addMembersConfiguration.onClose ||onCloseClick\"\n   [onBack]=\"addMembersConfiguration.onBack || addMembers\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\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\"\n  [group]=\"group\" [onClose]=\"onCloseClick\" [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\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\" [onClose]=\" groupMembersConfiguration.onClose || onCloseClick\" [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"  [messageText]=\"confirmDialogMessage\" [cancelButtonText]=\"cancelButtonText\" [confirmButtonText]=\"leaveButtonText\" (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"leaveDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\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\"\n  [group]=\"group\" [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"] }]
+            args: [{ selector: "cometchat-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\" (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\" [avatarName]=\"user?.getName() ?? this.group?.getName()\" [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\" [listItemStyle]=\"listItemStyle\"\n    [statusIndicatorColor]=\"checkStatusType()\" [statusIndicatorIcon]=\"checkGroupType()\" [title]=\"this.user?.getName() ?? this.group?.getName()\"  [hideSeparator]=\"false\"\n     [statusIndicatorStyle]=\"statusIndicatorStyle\" [avatarStyle]=\"avatarStyle\">\n   <div slot=\"subtitleView\">\n   <div *ngIf=\"!subtitleView; else subtitle\">\n   <cometchat-label [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n   </cometchat-label>\n   </div>\n   <ng-template #subtitle>\n     <ng-container *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\" *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\" [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n    </div>\n    <div class=\"cc-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n<div class=\"cc-details__options\"*ngFor=\"let option of getTemplateOptions(item)\" >\n<div class=\"cc-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\" (click)=\"onOptionClick(option)\">\n  <div class=\"cc-details__option-title\" >\n    <cometchat-button  [text]=\"option.title\" [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 [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  [backButtonIconURL]=\"addMembersConfiguration.backButtonIconURL\"\n  [closeButtonIconURL]=\"addMembersConfiguration.closeButtonIconURL\"\n  [options]=\"addMembersConfiguration.options\"\n  [menu]=\"addMembersConfiguration.menu\"\n  [disableUsersPresence]=\"addMembersConfiguration.disableUsersPresence\"\n  [subtitleView]=\"addMembersConfiguration.subtitleView\"\n  [group]=\"group\"\n   [selectionMode]=\"selectionmodeEnum\"\n   [onClose]=\"addMembersConfiguration.onClose ||onCloseClick\"\n   [onBack]=\"addMembersConfiguration.onBack || addMembers\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\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\"\n  [group]=\"group\" [onClose]=\"onCloseClick\" [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\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\" [onClose]=\" groupMembersConfiguration.onClose || onCloseClick\" [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"  [messageText]=\"leaveGroupDialogMessage\" [cancelButtonText]=\"leaveGroupCancelButtonText\" [confirmButtonText]=\"leaveGroupConfirmButtonText\" (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"  [messageText]=\"transferOwnershipDialogMessage\" [cancelButtonText]=\"transferOwnershipCancelButtonText\" [confirmButtonText]=\"transferOwnershipConfirmButtonText\" (cc-confirm-clicked)=\"onTransferClick()\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\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\"\n  [group]=\"group\" [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"  [messageText]=\"deleteGroupDialogMessage\" [cancelButtonText]=\"deleteGroupCancelButtonText\" [confirmButtonText]=\"deleteGroupConfirmButtonText\" (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\" [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { group: [{
                 type: Input
             }], user: [{
@@ -11461,11 +11618,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], onClose: [{
                 type: Input
-            }], leaveButtonText: [{
+            }], leaveGroupConfirmButtonText: [{
                 type: Input
-            }], cancelButtonText: [{
+            }], leaveGroupCancelButtonText: [{
                 type: Input
-            }], confirmDialogMessage: [{
+            }], leaveGroupDialogMessage: [{
+                type: Input
+            }], leaveGroupDialogStyle: [{
+                type: Input
+            }], deleteGroupConfirmButtonText: [{
+                type: Input
+            }], deleteGroupDialogMessage: [{
+                type: Input
+            }], deleteGroupCancelButtonText: [{
+                type: Input
+            }], deleteGroupDialogStyle: [{
+                type: Input
+            }], transferOwnershipConfirmButtonText: [{
+                type: Input
+            }], transferOwnershipDialogMessage: [{
+                type: Input
+            }], transferOwnershipCancelButtonText: [{
+                type: Input
+            }], transferOwnershipDialogStyle: [{
                 type: Input
             }], addMembersConfiguration: [{
                 type: Input
@@ -11475,8 +11650,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], transferOwnershipConfiguration: [{
                 type: Input
-            }], leaveDialogStyle: [{
-                type: Input
             }], statusIndicatorStyle: [{
                 type: Input
             }], backdropStyle: [{
@@ -11752,7 +11925,7 @@ class CometChatMessagesComponent {
         }
         catch (error) {
             if (this.onError) {
-                this.onError(error);
+                this.onError(CometChatException(error));
             }
         }
     }
@@ -11818,10 +11991,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 }], 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", 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<div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n<div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n  <div *ngIf=\"messageHeaderView; else customHeaderView\" class=\"cc-messages__header-customview\">\n    <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n    </ng-container>\n  </div>\n  <ng-template #customHeaderView>\n    <cometchat-message-header [user]=\"user\" [group]=\"group\" [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n    [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\" [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\" [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\" [menu]=\"headerMenu\" [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n    [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\" [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\" [onError]=\"messageHeaderConfiguration.onError\" [onBack]=\"messageHeaderConfiguration.onBack\" [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\" [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n    [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\"\n    >\n    </cometchat-message-header>\n  </ng-template>\n</div>\n<div class=\"cc-messages__list\">\n  <cometchat-message-list #messageListRef [disableSoundForMessages]=\"disableSoundForMessages\" [customSoundForMessages]=\"customSoundForIncomingMessages\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.messageTypes\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [disableSoundForMessages]=\"disableSoundForMessages\"\n    [customSoundForMessages]=\"customSoundForOutgoingMessages\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [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\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (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{height:6%;width:100%}.cc-messages__list{height:84%;width:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{height:6%;width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "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", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError"] }, { 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", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "messageComposerConfiguration", "threadedMessagesStyle"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "onError", "onClose", "leaveButtonText", "cancelButtonText", "confirmDialogMessage", "addMembersConfiguration", "bannedMembersConfiguration", "groupMembersConfiguration", "transferOwnershipConfiguration", "leaveDialogStyle", "statusIndicatorStyle", "backdropStyle", "avatarStyle", "detailsStyle", "listItemStyle"] }, { type: CometChatCallButtonsComponent, selector: "cometchat-call-buttons", inputs: ["user", "group", "voiceCallIconURL", "voiceCallIconText", "voiceCallIconHoverText", "videoCallIconURL", "videoCallIconText", "videoCallIconHoverText", "onVoiceCallClick", "onVideoCallClick", "onError", "callButtonsStyle"] }], 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", 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<div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n<div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n  <div *ngIf=\"messageHeaderView; else customHeaderView\" class=\"cc-messages__header-customview\">\n    <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n    </ng-container>\n  </div>\n  <ng-template #customHeaderView>\n    <cometchat-message-header [user]=\"user\" [group]=\"group\" [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n    [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\" [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\" [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\" [menu]=\"headerMenu\" [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n    [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\" [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\" [onError]=\"messageHeaderConfiguration.onError\" [onBack]=\"messageHeaderConfiguration.onBack\" [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\" [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n    [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\"\n    >\n    </cometchat-message-header>\n  </ng-template>\n</div>\n<div class=\"cc-messages__list\">\n  <cometchat-message-list #messageListRef [disableSoundForMessages]=\"disableSoundForMessages\" [customSoundForMessages]=\"customSoundForIncomingMessages\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [templates]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [disableSoundForMessages]=\"disableSoundForMessages\"\n    [customSoundForMessages]=\"customSoundForOutgoingMessages\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [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\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (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{height:6%;width:100%}.cc-messages__list{height:80%;width:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{height:6%;width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"], components: [{ type: CometChatMessageHeaderComponent, selector: "cometchat-message-header", inputs: ["avatarStyle", "statusIndicatorStyle", "messageHeaderStyle", "listItemStyle", "subtitleView", "disableUsersPresence", "disableTyping", "protectedGroupIcon", "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", "alignment", "showAvatar", "datePattern", "timestampAlignment", "DateSeparatorPattern", "templates", "messagesRequestBuilder", "newMessageIndicatorText", "scrollToBottomOnNewMessages", "thresholdValue", "onThreadRepliesClick", "headerView", "footerView", "parentMessageId", "avatarStyle", "backdropStyle", "dateSeparatorStyle", "messageListStyle", "onError"] }, { 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", "messageComposerStyle", "onSendButtonClick", "onError", "backdropStyle"] }, { type: CometChatThreadedMessagesComponent, selector: "cometchat-threaded-messages", inputs: ["onClose", "onError", "parentMessage", "title", "closeIconURL", "bubbleView", "messageActionView", "messageListConfiguration", "messageComposerConfiguration", "threadedMessagesStyle"] }, { type: CometChatDetailsComponent, selector: "cometchat-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "data", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "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<div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n<div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n  <div *ngIf=\"messageHeaderView; else customHeaderView\" class=\"cc-messages__header-customview\">\n    <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n    </ng-container>\n  </div>\n  <ng-template #customHeaderView>\n    <cometchat-message-header [user]=\"user\" [group]=\"group\" [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n    [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\" [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\" [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\" [menu]=\"headerMenu\" [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n    [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\" [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\" [onError]=\"messageHeaderConfiguration.onError\" [onBack]=\"messageHeaderConfiguration.onBack\" [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\" [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n    [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\"\n    >\n    </cometchat-message-header>\n  </ng-template>\n</div>\n<div class=\"cc-messages__list\">\n  <cometchat-message-list #messageListRef [disableSoundForMessages]=\"disableSoundForMessages\" [customSoundForMessages]=\"customSoundForIncomingMessages\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [messageTypes]=\"messageListConfiguration.messageTypes\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [disableSoundForMessages]=\"disableSoundForMessages\"\n    [customSoundForMessages]=\"customSoundForOutgoingMessages\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [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\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (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{height:6%;width:100%}.cc-messages__list{height:84%;width:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{height:6%;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<div class=\"cc-messages\" [ngStyle]=\"chatListStyle()\" *ngIf=\"user || group\">\n<div class=\"cc-messages__header\" *ngIf=\"!hideMessageHeader\">\n  <div *ngIf=\"messageHeaderView; else customHeaderView\" class=\"cc-messages__header-customview\">\n    <ng-container *ngTemplateOutlet=\"messageHeaderView\">\n    </ng-container>\n  </div>\n  <ng-template #customHeaderView>\n    <cometchat-message-header [user]=\"user\" [group]=\"group\" [subtitleView]=\"messageHeaderConfiguration.subtitleView\"\n    [disableUsersPresence]=\"messageHeaderConfiguration.disableUsersPresence\" [protectedGroupIcon]=\"messageHeaderConfiguration.protectedGroupIcon\" [privateGroupIcon]=\"messageHeaderConfiguration.privateGroupIcon\" [menu]=\"headerMenu\" [messageHeaderStyle]=\"messageHeaderConfiguration.messageHeaderStyle\"\n    [backButtonIconURL]=\"messageHeaderConfiguration.backButtonIconURL\" [hideBackButton]=\"messageHeaderConfiguration.hideBackButton\" [onError]=\"messageHeaderConfiguration.onError\" [onBack]=\"messageHeaderConfiguration.onBack\" [listItemStyle]=\"messageHeaderConfiguration.listItemStyle\" [statusIndicatorStyle]=\"messageHeaderConfiguration.statusIndicatorStyle\"\n    [avatarStyle]=\"messageHeaderConfiguration.avatarStyle\"\n    >\n    </cometchat-message-header>\n  </ng-template>\n</div>\n<div class=\"cc-messages__list\">\n  <cometchat-message-list #messageListRef [disableSoundForMessages]=\"disableSoundForMessages\" [customSoundForMessages]=\"customSoundForIncomingMessages\" [emptyStateView]=\"messageListConfiguration.emptyStateView\" [loadingStateView]=\"messageListConfiguration.loadingStateView\"  [user]=\"user\" [group]=\"group\"\n  [errorStateView]=\"messageListConfiguration.errorStateView\" [disableReceipt]=\"messageListConfiguration.disableReceipt\" [readIcon]=\"messageListConfiguration.readIcon\" [deliveredIcon]=\"messageListConfiguration.deliveredIcon\" [sentIcon]=\"messageListConfiguration.sentIcon\" [waitIcon]=\"messageListConfiguration.waitIcon\"\n  [errorIcon]=\"messageListConfiguration.errorIcon\" [alignment]=\"messageListConfiguration.alignment\" [showAvatar]=\"messageListConfiguration.showAvatar\" [datePattern]=\"messageListConfiguration.datePattern\" [timestampAlignment]=\"messageListConfiguration.timestampAlignment\" [DateSeparatorPattern]=\"messageListConfiguration.DateSeparatorPattern\"\n  [templates]=\"messageListConfiguration.templates\" [messagesRequestBuilder]=\"messageListConfiguration.messagesRequestBuilder\" [thresholdValue]=\"messageListConfiguration.thresholdValue\" [onThreadRepliesClick]=\"messageListConfiguration.onThreadRepliesClick || openThreadView\" [headerView]=\"messageListConfiguration.headerView\" [footerView]=\"messageListConfiguration.footerView\"\n   [avatarStyle]=\"messageListConfiguration.avatarStyle\" [backdropStyle]=\"messageListConfiguration.backdropStyle\" [dateSeparatorStyle]=\"messageListConfiguration.dateSeparatorStyle\" [messageListStyle]=\"messageListConfiguration.messageListStyle\"  [onError]=\"messageListConfiguration.onError\"\n  >\n  </cometchat-message-list>\n</div>\n<div class=\"cc-messages__composer\" *ngIf=\"!hideMessageComposer\">\n  <div *ngIf=\"messageComposerView; else customComposerView\" class=\"cc-messages__composer--customview\">\n    <ng-container *ngTemplateOutlet=\"messageComposerView\">\n    </ng-container>\n  </div>\n  <ng-template #customComposerView>\n    <cometchat-message-composer #messageComposerRef [disableSoundForMessages]=\"disableSoundForMessages\"\n    [customSoundForMessages]=\"customSoundForOutgoingMessages\"\n    [user]=\"user\" [group]=\"group\" [text]=\"messageComposerConfiguration.text\" [headerView]=\"messageComposerConfiguration.headerView\" [onTextChange]=\"messageComposerConfiguration.onTextChange\" [attachmentIconURL]=\"messageComposerConfiguration.attachmentIconURL\"\n    [attachmentOptions]=\"messageComposerConfiguration.attachmentOptions\" [secondaryButtonView]=\"messageComposerConfiguration.secondaryButtonView\" [auxilaryButtonView]=\"messageComposerConfiguration.auxilaryButtonView\" [auxiliaryButtonsAlignment]=\"messageComposerConfiguration.auxiliaryButtonsAlignment\"\n    [sendButtonView]=\"messageComposerConfiguration.sendButtonView\" [hideLiveReaction]=\"messageComposerConfiguration.hideLiveReaction\" [LiveReactionIconURL]=\"messageComposerConfiguration.LiveReactionIconURL\" [messageComposerStyle]=\"messageComposerConfiguration.messageComposerStyle\" [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\"\n    [onSendButtonClick]=\"messageComposerConfiguration.onSendButtonClick\" [onError]=\"messageComposerConfiguration.onError\"\n    >\n    </cometchat-message-composer>\n  </ng-template>\n</div>\n </div>\n <div class=\"cc-messages__livereaction\">\n  <cometchat-live-reaction *ngIf=\"liveReaction\" [reactionIconURL]=\"reactionName\"></cometchat-live-reaction>\n</div>\n<div *ngIf=\"openThreadedMessages\" class=\"cc-messages__threadedmessages\">\n<cometchat-threaded-messages [onClose]=\"closeThreadView\" [threadedMessagesStyle]=\"threadedMessageConfiguration.threadedMessagesStyle\" [messageActionView]=\"threadedMessageConfiguration.messageActionView\" [closeIconURL]=\"threadedMessageConfiguration.closeIconURL\" [onError]=\"threadedMessageConfiguration.onError\" [bubbleView]=\"threadedMessageConfiguration.bubbleView || parentBubbleView\" [parentMessage]=\"threadMessageObject\" [user]=\"user\" [group]=\"group\"></cometchat-threaded-messages>\n</div>\n<div *ngIf=\"openDetails\" class=\"cc-messages__details\">\n  <cometchat-details [backdropStyle]=\"detailsConfiguration.backdropStyle\"  [transferOwnershipConfiguration]=\"detailsConfiguration.transferOwnershipConfiguration\" [groupMembersConfiguration]=\"detailsConfiguration.groupMembersConfiguration\" [bannedMembersConfiguration]=\"detailsConfiguration.bannedMembersConfiguration\" [addMembersConfiguration]=\"detailsConfiguration.addMembersConfiguration\"  [onClose]=\"detailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"detailsConfiguration.listItemStyle\" [detailsStyle]=\"detailsConfiguration.detailsStyle\" [avatarStyle]=\"detailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"detailsConfiguration.statusIndicatorStyle\" [leaveDialogStyle]=\"detailsConfiguration.leaveDialogStyle\" [data]=\"detailsConfiguration.data\" [customProfileView]=\"detailsConfiguration.customProfileView\" [subtitleView]=\"detailsConfiguration.subtitleView\" [hideProfile]=\"detailsConfiguration.hideProfile\" [onError]=\"detailsConfiguration.onError\" [closeButtonIconURL]=\"detailsConfiguration.closeButtonIconURL\"  [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\" *ngIf=\"getAuxilaryView(); else elseBlock\">\n  <ng-container *ngTemplateOutlet=\"getAuxilaryView()\">\n  </ng-container>\n</div>\n    <ng-template #elseBlock>\n      <cometchat-call-buttons *ngIf=\"enableCalling\" voiceCallIconText=\"\" videoCallIconText=\"\" [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsStyle\">\n      </cometchat-call-buttons>\n    </ng-template>\n    <cometchat-button *ngIf=\"!hideDetails\" [iconURL]=\"infoIconStyle\" [buttonStyle]=\"detailsButtonStyle\" (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{height:6%;width:100%}.cc-messages__list{height:80%;width:100%}cometchat-threaded-messages{height:100%;display:flex}.cc-messages__composer{height:6%;width:100%;display:flex;flex-direction:column;justify-content:flex-end}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { messageComposerRef: [{
                 type: ViewChild,
                 args: ["messageComposerRef", { static: false }]
@@ -11938,11 +12111,13 @@ class CometChatConversationsWithMessagesComponent {
         if (changes["isMobileView"]) {
             if (this.isMobileView) {
                 this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = false;
+                this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 8px";
                 this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
                 this.messagesConfiguration = { ...this.messagesConfiguration };
             }
             else if (!this.isMobileView) {
                 this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = true;
+                this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 100px";
                 this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
                 this.messagesConfiguration = { ...this.messagesConfiguration };
             }
@@ -12383,29 +12558,7 @@ class CometChatGroupsComponent {
         this.groupsStyle = {
             width: "100%",
             height: "100%",
-            background: "",
-            border: "",
-            borderRadius: "",
-            titleTextFont: "",
-            titleTextColor: "",
-            subTitleTextFont: "",
-            subTitleTextColor: "",
-            searchPlaceholderTextFont: "",
-            searchPlaceholderTextColor: "",
-            searchTextFont: "",
-            searchTextColor: "",
-            emptyStateTextFont: "",
-            emptyStateTextColor: "",
-            errorStateTextFont: "",
-            errorStateTextColor: "",
-            loadingIconTint: "",
-            searchIconTint: "",
-            searchBorder: "",
-            searchBorderRadius: "",
-            searchBackground: "",
-            separatorColor: "rgb(222 222 222 / 46%)",
-            privateGroupIconBackground: "",
-            passwordGroupIconBackground: "",
+            separatorColor: "rgb(222 222 222 / 46%)"
         };
         this.listItemStyle = {};
         this.listStyle = {};
@@ -12458,11 +12611,17 @@ class CometChatGroupsComponent {
                             this.ref.detectChanges();
                         }
                     }, (error) => {
+                        if (this.onError) {
+                            this.onError(CometChatException(error));
+                        }
                         this.state = States.error;
                         this.ref.detectChanges();
                     });
                 }
                 catch (error) {
+                    if (this.onError) {
+                        this.onError(CometChatException(error));
+                    }
                     this.state = States.error;
                     this.ref.detectChanges();
                 }
@@ -12518,7 +12677,7 @@ class CometChatGroupsComponent {
             }
             catch (error) {
                 if (this.onError) {
-                    this.onError(error);
+                    this.onError(CometChatException(error));
                 }
             }
         };
@@ -13120,6 +13279,7 @@ class CometChatGroupsWithMessagesComponent {
         if (changes["isMobileView"]) {
             if (this.isMobileView) {
                 this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = false;
+                this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 8px";
                 this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
                 this.messagesConfiguration = { ...this.messagesConfiguration };
                 this.joinGroupConfiguration.messageHeaderConfiguration.hideBackButton = false;
@@ -13128,6 +13288,7 @@ class CometChatGroupsWithMessagesComponent {
             }
             else if (!this.isMobileView) {
                 this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = true;
+                this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 100px";
                 this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
                 this.messagesConfiguration = { ...this.messagesConfiguration };
                 this.joinGroupConfiguration.messageHeaderConfiguration.hideBackButton = true;
@@ -13447,11 +13608,13 @@ class CometChatUsersWithMessagesComponent {
     ngOnChanges(changes) {
         if (changes["isMobileView"]) {
             if (this.isMobileView) {
+                this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 8px";
                 this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = false;
                 this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
                 this.messagesConfiguration = { ...this.messagesConfiguration };
             }
             else if (!this.isMobileView) {
+                this.messagesConfiguration.detailsConfiguration.detailsStyle.padding = "0 100px";
                 this.messagesConfiguration.messageHeaderConfiguration.hideBackButton = true;
                 this.messagesConfiguration.messageHeaderConfiguration = { ...this.messagesConfiguration.messageHeaderConfiguration };
                 this.messagesConfiguration = { ...this.messagesConfiguration };
@@ -13574,6 +13737,1158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 }]
         }] });
 
+class CometChatTabsComponent {
+    constructor(ref) {
+        this.ref = ref;
+        this.tabAlignment = TabAlignment.bottom;
+        this.tabsStyle = {};
+        this.tabs = [];
+        this.openViewOnCLick = (tabItem) => {
+            this.childView = null;
+            let index = this.tabs.findIndex((item) => item.id === tabItem.id);
+            if (index > -1) {
+                this.activeTab = tabItem;
+                this.childView = this.tabs[index].childView;
+                this.ref.detectChanges();
+            }
+        };
+    }
+    ngOnInit() {
+    }
+    getButtonStyle(tab) {
+        const { style = {} } = tab || {};
+        const { id } = this.activeTab || {};
+        const active = id === tab?.id;
+        return {
+            background: active ? style.activeBackground ?? style.background : style.background,
+            buttonTextFont: active ? style.activeTitleTextFont ?? style.titleTextFont : style.titleTextFont,
+            buttonTextColor: active ? style.activeTitleTextColor ?? style.titleTextColor : style.titleTextColor,
+            buttonIconTint: active ? style.activeIconTint ?? style.iconTint : style.iconTint,
+            height: style.height,
+            width: style.width,
+            border: style.border,
+            borderRadius: style.borderRadius,
+            gap: "0",
+            padding: "0",
+        };
+    }
+    getTabsStyle() {
+        const position = (() => {
+            switch (this.tabAlignment) {
+                case TabAlignment.top:
+                case TabAlignment.left:
+                    return {
+                        top: "0",
+                        left: "0",
+                    };
+                case TabAlignment.bottom:
+                    return {
+                        bottom: "0",
+                        left: "0",
+                    };
+                default:
+                    return {
+                        top: "0",
+                        right: "0",
+                    };
+            }
+        })();
+        const { background } = this.tabsStyle ?? {};
+        return {
+            background,
+            ...position,
+        };
+    }
+    getTabsPlacement() {
+        let alignment = this.tabAlignment == TabAlignment.top || this.tabAlignment == TabAlignment.bottom ? "row" : "column";
+        return {
+            display: "flex",
+            flexDirection: alignment
+        };
+    }
+}
+CometChatTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CometChatTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatTabsComponent, selector: "cometchat-tabs", inputs: { tabAlignment: "tabAlignment", tabsStyle: "tabsStyle", tabs: "tabs" }, ngImport: i0, template: "<div class=\"cc-tabs-wrapper\">\n   <div class=\"cc-child-view\" *ngIf=\"childView\">\n      <ng-container [ngTemplateOutlet]=\"childView\" >\n\n      </ng-container>\n   </div>\n   <div class=\"cc-tabs\" [ngStyle]=\"getTabsStyle()\">\n      <cometchat-draggable [draggableStyle]=\"tabsStyle\">\n         <div class=\"cc__tab-item\" [ngStyle]=\"getTabsPlacement()\">\n            <cometchat-icon-button [alignment]=\"'column'\" *ngFor=\"let tab of tabs\" [iconURL]=\"tab.iconURL\" [text]=\"tab.title\" [buttonStyle]=\"getButtonStyle(tab)\" (cc-button-clicked)=\"openViewOnCLick(tab)\"></cometchat-icon-button>\n         </div>\n      </cometchat-draggable>\n    </div>\n</div>\n", styles: [".cc-tabs-wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-end}.cc-child-view{height:100%;width:100%}.cc-tabs{height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;position:absolute}.cc__tab-item{display:flex}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: CometChatTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cometchat-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-tabs-wrapper\">\n   <div class=\"cc-child-view\" *ngIf=\"childView\">\n      <ng-container [ngTemplateOutlet]=\"childView\" >\n\n      </ng-container>\n   </div>\n   <div class=\"cc-tabs\" [ngStyle]=\"getTabsStyle()\">\n      <cometchat-draggable [draggableStyle]=\"tabsStyle\">\n         <div class=\"cc__tab-item\" [ngStyle]=\"getTabsPlacement()\">\n            <cometchat-icon-button [alignment]=\"'column'\" *ngFor=\"let tab of tabs\" [iconURL]=\"tab.iconURL\" [text]=\"tab.title\" [buttonStyle]=\"getButtonStyle(tab)\" (cc-button-clicked)=\"openViewOnCLick(tab)\"></cometchat-icon-button>\n         </div>\n      </cometchat-draggable>\n    </div>\n</div>\n", styles: [".cc-tabs-wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-end}.cc-child-view{height:100%;width:100%}.cc-tabs{height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;position:absolute}.cc__tab-item{display:flex}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabAlignment: [{
+                type: Input
+            }], tabsStyle: [{
+                type: Input
+            }], tabs: [{
+                type: Input
+            }] } });
+
+/**
+*
+* CometChatCallHistory is a wrapper component which renders callhistory of the loggedinuser using CometChatListItem && CometChatList.
+*
+* @version 1.0.0
+* @author CometChatTeam
+* @copyright © 2022 CometChat Inc.
+*
+*/
+class CometChatCallHistoryComponent {
+    constructor(ref, themeService) {
+        this.ref = ref;
+        this.themeService = themeService;
+        this.hideSeparator = false;
+        this.selectionMode = SelectionMode$1.none;
+        this.hideError = false;
+        this.title = localize("CALLS");
+        this.onError = (error) => {
+            console.log(error);
+        };
+        this.loadingIconURL = "assets/Spinner.svg";
+        this.datePattern = DatePatterns.DayDateTime;
+        this.emptyStateText = localize("NO_callS_FOUND");
+        this.errorStateText = localize("SOMETHING_WRONG");
+        this.titleAlignment = TitleAlignment.left;
+        this.avatarStyle = {
+            borderRadius: "16px",
+            width: "32px",
+            height: "32px",
+        };
+        this.dateStyle = {};
+        this.callHistoryStyle = {
+            width: "100%",
+            height: "100%",
+            background: "",
+            border: "",
+            borderRadius: "",
+            titleTextFont: "",
+            titleTextColor: "",
+            subtitleTextFont: "",
+            subtitleTextColor: "",
+            emptyStateTextFont: "",
+            emptyStateTextColor: "",
+            errorStateTextFont: "",
+            errorStateTextColor: "",
+            loadingIconTint: "",
+            separatorColor: "rgb(222 222 222 / 46%)",
+        };
+        this.listItemStyle = {};
+        this.selectionmodeEnum = SelectionMode$1;
+        this.state = States.loading;
+        this.listStyle = {};
+        this.limit = 30;
+        this.callsList = [];
+        this.callsListenerId = "callsList_" + new Date().getTime();
+        this.loggedInUser = null;
+        this.onScrolledToBottom = null;
+        this.iconStyle = {
+            height: "16px",
+            width: "16px",
+            iconTint: "RGBA(20, 20, 20, 0.68)"
+        };
+        this.fetchNextcallList = () => {
+            this.onScrolledToBottom = null;
+            this.state = States.loading;
+            this.ref.detectChanges();
+            try {
+                this.callsRequest.fetchPrevious().then((callList) => {
+                    if (callList?.length > 0) {
+                        this.onScrolledToBottom = this.fetchNextcallList;
+                        this.ref.detectChanges();
+                    }
+                    if ((callList.length <= 0 && this.callsList?.length <= 0) || (callList.length === 0 && this.callsList?.length <= 0)) {
+                        this.state = States.empty;
+                        this.ref.detectChanges();
+                    }
+                    else {
+                        this.state = States.loaded;
+                        this.callsList = [...this.callsList, ...callList.reverse()];
+                        this.ref.detectChanges();
+                    }
+                }, (error) => {
+                    if (this.onError) {
+                        this.onError(CometChatException(error));
+                    }
+                    this.state = States.error;
+                    this.ref.detectChanges();
+                }).catch((error) => {
+                    if (this.onError) {
+                        this.onError(error);
+                    }
+                });
+            }
+            catch (error) {
+                this.state = States.error;
+                this.ref.detectChanges();
+                if (this.onError) {
+                    this.onError(CometChatException(error));
+                }
+            }
+        };
+        /**
+         * @param  {CometChat.Call} call
+         */
+        this.onClick = (call) => {
+            if (this.onItemClick) {
+                this.onItemClick(call);
+            }
+        };
+        /**
+         * @param  {CometChat.Call} call
+         */
+        /**
+         * @param  {CometChat.Call} call
+         */
+        this.getActiveCall = (call) => {
+            if (this.selectionMode == SelectionMode$1.none || !this.selectionMode) {
+                if (call.getId() == this.activeCall?.getId()) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return false;
+            }
+        };
+        this.callStyle = () => {
+            return {
+                height: this.callHistoryStyle.height,
+                width: this.callHistoryStyle.width,
+                background: this.callHistoryStyle.background,
+                border: this.callHistoryStyle.border,
+                borderRadius: this.callHistoryStyle.borderRadius
+            };
+        };
+        this.subtitleStyle = () => {
+            return {
+                font: this.callHistoryStyle.subtitleTextFont,
+                color: this.callHistoryStyle.subtitleTextColor
+            };
+        };
+        this.state = States.loading;
+    }
+    ngOnInit() {
+        this.setThemeStyle();
+        CometChat.getLoggedinUser().then((user) => {
+            this.loggedInUser = user;
+            this.callsRequest = this.getRequestBuilder();
+            this.fetchNextcallList();
+            this.attachListeners();
+            this.subscribeToEvents();
+        }).catch((error) => {
+            if (this.onError) {
+                this.onError(error);
+            }
+        });
+        this.state = States.loading;
+    }
+    callMenuOption(event, call) {
+        let onClick = event?.detail?.data?.onClick;
+        if (onClick) {
+            onClick(call);
+        }
+    }
+    subscribeToEvents() {
+        this.ccCallAccepted = CometChatCallEvents.ccCallAccepted.subscribe((call) => {
+            this.addCall(call);
+        });
+        this.ccCallRejected = CometChatCallEvents.ccCallRejected.subscribe((call) => {
+            this.addCall(call);
+        });
+        this.ccOutgoingCall = CometChatCallEvents.ccOutgoingCall.subscribe((call) => {
+            this.addCall(call);
+        });
+        this.ccCallEnded = CometChatCallEvents.ccCallEnded.subscribe((call) => {
+            if (call) {
+                this.addCall(call);
+            }
+        });
+    }
+    unsubscribeToEvents() {
+        this.ccCallAccepted?.unsubscribe();
+        this.ccCallRejected?.unsubscribe();
+        this.ccOutgoingCall?.unsubscribe();
+        this.ccCallEnded?.unsubscribe();
+    }
+    ngOnDestroy() {
+        this.callsRequest = null;
+        this.ref.detach();
+        this.removeListener();
+        this.unsubscribeToEvents();
+    }
+    /**
+     * @param  {CometChat.Call} call
+     */
+    /**
+     * @param  {CometChat.Call} call
+     */
+    attachListeners() {
+        CometChat.addCallListener(this.callsListenerId, new CometChat.CallListener({
+            onIncomingCallReceived: (call) => {
+                this.addCall(call);
+            },
+            onIncomingCallCancelled: (call) => {
+                this.addCall(call);
+            },
+            onOutgoingCallAccepted: (call) => {
+                this.addCall(call);
+            },
+            onOutgoingCallRejected: (call) => {
+                this.addCall(call);
+            },
+        }));
+    }
+    removeListener() {
+        CometChat.removeCallListener(this.callsListenerId);
+    }
+    getSubtitle(call) {
+        return CallingDetailsUtils.getCallStatus(call, this.loggedInUser);
+    }
+    getCallTypeIcon(call) {
+        if (call.getType() == CometChatUIKitConstants.MessageTypes.audio) {
+            return "assets/Audio-Call.svg";
+        }
+        else {
+            return "VideoCallIcon";
+        }
+    }
+    getCallerName(call) {
+        if (CallingDetailsUtils.isSentByMe(call, this.loggedInUser)) {
+            return call.getReceiver().getName();
+        }
+        return call.getSender().getName();
+    }
+    getRequestBuilder() {
+        if (this.messageRequestBuilder) {
+            return this.messageRequestBuilder
+                .build();
+        }
+        else {
+            return new CometChat.MessagesRequestBuilder()
+                .setLimit(this.limit)
+                .setTypes([CometChatUIKitConstants.MessageTypes.audio, CometChatUIKitConstants.MessageTypes.video])
+                .setCategories([CometChatUIKitConstants.MessageCategory.call])
+                .build();
+        }
+    }
+    /**
+     * addcall
+     * @param call
+     */
+    addCall(call) {
+        this.callsList.unshift(call);
+        this.ref.detectChanges();
+    }
+    setThemeStyle() {
+        this.iconStyle.iconTint = this.themeService.theme.palette.getAccent600();
+        this.setAvatarStyle();
+        this.setDateStyle();
+        this.setCallsStyle();
+        this.listStyle = {
+            titleTextFont: this.callHistoryStyle.titleTextFont,
+            titleTextColor: this.callHistoryStyle.titleTextColor,
+            emptyStateTextFont: this.callHistoryStyle.emptyStateTextFont,
+            emptyStateTextColor: this.callHistoryStyle.emptyStateTextColor,
+            errorStateTextFont: this.callHistoryStyle.errorStateTextFont,
+            errorStateTextColor: this.callHistoryStyle.errorStateTextColor,
+            loadingIconTint: this.callHistoryStyle.loadingIconTint,
+            separatorColor: this.callHistoryStyle.separatorColor,
+        };
+    }
+    setAvatarStyle() {
+        let defaultStyle = new AvatarStyle({
+            borderRadius: "24px",
+            width: "36px",
+            height: "36px",
+            border: "none",
+            backgroundColor: this.themeService.theme.palette.getAccent700(),
+            nameTextColor: this.themeService.theme.palette.getAccent900(),
+            backgroundSize: "cover",
+            nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
+            outerViewBorder: "",
+            outerViewBorderSpacing: "",
+        });
+        this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
+    }
+    setDateStyle() {
+        let defaultStyle = new DateStyle({
+            textFont: fontHelper(this.themeService.theme.typography.caption2),
+            textColor: this.themeService.theme.palette.getAccent600(),
+            background: "transparent"
+        });
+        this.dateStyle = { ...defaultStyle, ...this.dateStyle };
+    }
+    getListItemStyle(call) {
+        let defaultStyle = new ListItemStyle({
+            height: "45px",
+            width: "100%",
+            background: this.themeService.theme.palette.getBackground(),
+            activeBackground: this.themeService.theme.palette.getAccent100(),
+            borderRadius: "0",
+            titleFont: fontHelper(this.themeService.theme.typography.title2),
+            titleColor: CallingDetailsUtils.isMissedCall(call, this.loggedInUser) ? this.themeService.theme.palette.getError() : this.themeService.theme.palette.getAccent(),
+            border: "none",
+            separatorColor: this.themeService.theme.palette.getAccent200(),
+            hoverBackground: this.themeService.theme.palette.getAccent50()
+        });
+        return { ...defaultStyle, ...this.listItemStyle };
+    }
+    setCallsStyle() {
+        let defaultStyle = new CallHistoryStyle({
+            subtitleTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            subtitleTextColor: this.themeService.theme.palette.getAccent600(),
+            background: this.themeService.theme.palette.getBackground(),
+            border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
+            titleTextFont: fontHelper(this.themeService.theme.typography.title1),
+            titleTextColor: this.themeService.theme.palette.getAccent(),
+            emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
+            emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
+            errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
+            errorStateTextColor: this.themeService.theme.palette.getAccent600(),
+            loadingIconTint: this.themeService.theme.palette.getAccent600(),
+            separatorColor: this.themeService.theme.palette.getAccent400(),
+        });
+        this.callHistoryStyle = { ...this.callHistoryStyle, ...defaultStyle };
+    }
+}
+CometChatCallHistoryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallHistoryComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
+CometChatCallHistoryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallHistoryComponent, selector: "cometchat-call-history", inputs: { messageRequestBuilder: "messageRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", menu: "menu", options: "options", activeCall: "activeCall", hideSeparator: "hideSeparator", selectionMode: "selectionMode", hideError: "hideError", title: "title", onError: "onError", onSelect: "onSelect", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", datePattern: "datePattern", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", avatarStyle: "avatarStyle", dateStyle: "dateStyle", callHistoryStyle: "callHistoryStyle", listItemStyle: "listItemStyle", onItemClick: "onItemClick" }, ngImport: i0, template: "<div class=\"cc-call-history\" [ngStyle]=\"callStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n</div>\n  <cometchat-list [hideSearch]=\"true\" [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\"\n      [list]=\"callsList\" [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-call>\n      <cometchat-list-item [title]=\"getCallerName(call)\" [avatarURL]=\"call?.avatar\" [avatarName]=\"getCallerName(call)\"\n          [listItemStyle]=\"getListItemStyle(call)\" [avatarStyle]=\"avatarStyle\"\n          [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(call)\" [isActive]=\"getActiveCall(call)\">\n          <div slot=\"subtitleView\" class=\"cc-call-history__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-call-history__subtitle-view\">\n            <div class=\"cc-call__icon\">\n              <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"getCallTypeIcon(call)\"></cometchat-icon>\n            </div>\n            <div class=\"cc-call__type\">\n              {{getSubtitle(call)}}\n            </div>\n            </div>\n          </ng-template>\n          <div slot=\"menuView\" class=\"cc-call-history__options\" *ngIf=\"options\">\n            <cometchat-menu-list (cc-menu-clicked)=\"callMenuOption($event,call)\" [data]=\"options(call)\">\n            </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  class=\"cc-call-history__tail-view\">\n          <div class=\"tail__view\" *ngIf=\"selectionMode == selectionmodeEnum.none\">\n            <div class=\"cc-call-history__date\">\n              <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.sentAt\" [pattern]=\"datePattern\"></cometchat-date>\n            </div>\n          </div>\n          <div class=\"cc-call-history__selection-view\" *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 (cc-radio-button-changed)=\"onSelect ? onSelect(call) : null\"></cometchat-radio-button>\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n          <cometchat-checkbox (cc-checkbox-changed)=\"onSelect ? onSelect(call) : null\"></cometchat-checkbox>\n        </div>\n      </ng-template>\n  </ng-template>\n</div>", styles: [".cc-call-history{height:100%;width:100%;box-sizing:border-box;padding-bottom:24px}.cc-call-history__tail-view{position:relative}.cc-menus{position:absolute;right:12px;top:6px}.cc-call-history__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField"] }], 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: CometChatCallHistoryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cometchat-call-history", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-call-history\" [ngStyle]=\"callStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n</div>\n  <cometchat-list [hideSearch]=\"true\" [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\"\n      [list]=\"callsList\" [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-call>\n      <cometchat-list-item [title]=\"getCallerName(call)\" [avatarURL]=\"call?.avatar\" [avatarName]=\"getCallerName(call)\"\n          [listItemStyle]=\"getListItemStyle(call)\" [avatarStyle]=\"avatarStyle\"\n          [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(call)\" [isActive]=\"getActiveCall(call)\">\n          <div slot=\"subtitleView\" class=\"cc-call-history__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-call-history__subtitle-view\">\n            <div class=\"cc-call__icon\">\n              <cometchat-icon [iconStyle]=\"iconStyle\" [URL]=\"getCallTypeIcon(call)\"></cometchat-icon>\n            </div>\n            <div class=\"cc-call__type\">\n              {{getSubtitle(call)}}\n            </div>\n            </div>\n          </ng-template>\n          <div slot=\"menuView\" class=\"cc-call-history__options\" *ngIf=\"options\">\n            <cometchat-menu-list (cc-menu-clicked)=\"callMenuOption($event,call)\" [data]=\"options(call)\">\n            </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  class=\"cc-call-history__tail-view\">\n          <div class=\"tail__view\" *ngIf=\"selectionMode == selectionmodeEnum.none\">\n            <div class=\"cc-call-history__date\">\n              <cometchat-date [dateStyle]=\"dateStyle\" [timestamp]=\"call?.sentAt\" [pattern]=\"datePattern\"></cometchat-date>\n            </div>\n          </div>\n          <div class=\"cc-call-history__selection-view\" *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 (cc-radio-button-changed)=\"onSelect ? onSelect(call) : null\"></cometchat-radio-button>\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\">\n          <cometchat-checkbox (cc-checkbox-changed)=\"onSelect ? onSelect(call) : null\"></cometchat-checkbox>\n        </div>\n      </ng-template>\n  </ng-template>\n</div>", styles: [".cc-call-history{height:100%;width:100%;box-sizing:border-box;padding-bottom:24px}.cc-call-history__tail-view{position:relative}.cc-menus{position:absolute;right:12px;top:6px}.cc-call-history__subtitle-view{display:flex;align-items:center;justify-content:flex-start;gap:6px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { messageRequestBuilder: [{
+                type: Input
+            }], subtitleView: [{
+                type: Input
+            }], listItemView: [{
+                type: Input
+            }], menu: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], activeCall: [{
+                type: Input
+            }], hideSeparator: [{
+                type: Input
+            }], selectionMode: [{
+                type: Input
+            }], hideError: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], onError: [{
+                type: Input
+            }], onSelect: [{
+                type: Input
+            }], emptyStateView: [{
+                type: Input
+            }], errorStateView: [{
+                type: Input
+            }], loadingIconURL: [{
+                type: Input
+            }], datePattern: [{
+                type: Input
+            }], loadingStateView: [{
+                type: Input
+            }], emptyStateText: [{
+                type: Input
+            }], errorStateText: [{
+                type: Input
+            }], titleAlignment: [{
+                type: Input
+            }], avatarStyle: [{
+                type: Input
+            }], dateStyle: [{
+                type: Input
+            }], callHistoryStyle: [{
+                type: Input
+            }], listItemStyle: [{
+                type: Input
+            }], onItemClick: [{
+                type: Input
+            }] } });
+
+/**
+*
+* CometChatCallDetailsComponent renders details of user or group.
+*
+* @version 1.0.0
+* @author CometChatTeam
+* @copyright © 2022 CometChat Inc.
+*
+*/
+class CometChatCallDetailsComponent {
+    constructor(ref, themeService) {
+        this.ref = ref;
+        this.themeService = themeService;
+        this.title = localize("CALL_DETAILS");
+        this.closeButtonIconURL = "assets/close2x.svg";
+        this.hideProfile = false;
+        this.disableUsersPresence = false;
+        this.privateGroupIcon = "assets/Private.svg";
+        this.protectedGroupIcon = "assets/Locked.svg";
+        this.onError = (error) => {
+            console.log(error);
+        };
+        this.data = [];
+        this.statusIndicatorStyle = {
+            height: "10px",
+            width: "10px",
+            borderRadius: "16px",
+            border: ""
+        };
+        this.avatarStyle = {
+            borderRadius: "16px",
+            width: "28px",
+            height: "28px",
+            border: "none",
+        };
+        this.callDetailsStyle = {
+            width: "100%",
+            height: "100%",
+            padding: "0 100px"
+        };
+        this.callButtonsConfiguration = new CallButtonsConfiguration({});
+        this.listItemStyle = {
+            height: "100%",
+            width: "100%",
+            background: "",
+            activeBackground: "transparent",
+            borderRadius: "grey",
+            titleFont: "600 15px Inter",
+            titleColor: "black",
+            border: "",
+            hoverBackground: "transparent",
+            separatorColor: "rgb(222 222 222 / 46%)"
+        };
+        this.messagesList = [];
+        this.loggedInUser = null;
+        this.statusColor = {
+            private: "",
+            password: "#F7A500",
+            public: ""
+        };
+        this.closeButtonStyle = {
+            height: "24px",
+            width: "24px",
+            border: "none",
+            borderRadius: "0",
+            background: "transparent",
+            buttonIconTint: this.callDetailsStyle.closeButtonIconTint || this.themeService.theme.palette.getPrimary()
+        };
+        this.buttonStyle = {
+            height: "100%",
+            width: "100%",
+            border: "none",
+            borderRadius: "0",
+            background: "transparent",
+            buttonTextColor: this.themeService.theme.palette.getPrimary() || "rgba(51, 153, 255)",
+            buttonTextFont: "500 16px Inter"
+        };
+        this.dividerStyle = {
+            background: "rgb(222 222 222 / 46%)",
+            height: "1px",
+            width: "100%"
+        };
+        this.subtitleText = "";
+        this.userListenerId = "userlist_" + new Date().getTime();
+        this.limit = 5;
+        this.types = [];
+        this.categories = [];
+        this.checkStatusType = () => {
+            return this.user && !this.disableUsersPresence ? this.statusColor[this.user?.getStatus()] : this.statusColor[this.group?.getType()];
+        };
+        this.onCloseClick = () => {
+            if (this.onClose) {
+                this.onClose();
+            }
+        };
+        this.subtitleStyle = () => {
+            if (this.user && this.user.getStatus() == CometChatUIKitConstants.userStatusType.online) {
+                return {
+                    textFont: this.callDetailsStyle.subtitleTextFont,
+                    textColor: this.themeService.theme.palette.getPrimary()
+                };
+            }
+            else {
+                return {
+                    textFont: this.callDetailsStyle.subtitleTextFont,
+                    textColor: this.callDetailsStyle.subtitleTextColor
+                };
+            }
+        };
+        /**
+       * @param  {CometChat.Group} group
+       */
+        this.getGroupIcon = (group) => {
+            let status;
+            if (group) {
+                switch (group.getType()) {
+                    case CometChatUIKitConstants.GroupTypes.password:
+                        status = this.protectedGroupIcon;
+                        break;
+                    case CometChatUIKitConstants.GroupTypes.private:
+                        status = this.privateGroupIcon;
+                        break;
+                    default:
+                        status = null;
+                        break;
+                }
+            }
+            return status;
+        };
+        this.getTemplateOptions = (template) => {
+            if (template.options) {
+                return template.options(this.user, this.group, template.id);
+            }
+            else
+                return [];
+        };
+        this.wrapperStyle = () => {
+            return {
+                width: this.callDetailsStyle.width,
+                height: this.callDetailsStyle.height,
+                border: this.callDetailsStyle.border,
+                borderRadius: this.callDetailsStyle.borderRadius,
+                background: this.callDetailsStyle.background,
+            };
+        };
+        this.marginStyle = () => {
+            return {
+                padding: this.callDetailsStyle?.padding
+            };
+        };
+    }
+    //
+    getTitleStyle() {
+        return {
+            textFont: this.callDetailsStyle.titleTextFont || fontHelper(this.themeService.theme.typography.title1),
+            textColor: this.callDetailsStyle.titleTextColor || this.themeService.theme.palette.getAccent()
+        };
+    }
+    ngOnChanges(changes) {
+        if (changes["user"] || changes["group"]) {
+            this.updateSubtitle();
+        }
+    }
+    removeListener() {
+        CometChat.removeUserListener(this.userListenerId);
+    }
+    ngOnDestroy() {
+        this.removeListener();
+        if (this.onClose) {
+            this.onClose();
+        }
+        this.unsubscribeToEvents();
+    }
+    ngOnInit() {
+        this.setThemeStyle();
+        this.subscribeToEvents();
+        this.statusColor.online = this.callDetailsStyle.onlineStatusColor || this.themeService.theme.palette.getSuccess();
+        this.attachListeners();
+        this.updateSubtitle();
+    }
+    /**
+     * Compares two dates and sets Date on a a new day
+     */
+    /**
+     * @param  {number} firstDate
+     * @param  {number} secondDate
+     */
+    isDateDifferent(firstDate, secondDate) {
+        let firstDateObj, secondDateObj;
+        firstDateObj = new Date(firstDate * 1000);
+        secondDateObj = new Date(secondDate * 1000);
+        return firstDateObj.getDate() !== secondDateObj.getDate() ||
+            firstDateObj.getMonth() !== secondDateObj.getMonth() ||
+            firstDateObj.getFullYear() !== secondDateObj.getFullYear();
+    }
+    subscribeToEvents() {
+        this.ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((item) => {
+            this.group = item?.userAddedIn;
+            this.group = item?.userAddedIn;
+            this.updateSubtitle();
+            this.ref.detectChanges();
+        });
+        this.ccGroupMemberJoined = CometChatGroupEvents.ccGroupMemberJoined.subscribe((item) => {
+            this.group = item?.joinedGroup;
+            this.updateSubtitle();
+            this.ref.detectChanges();
+        });
+        this.ccGroupMemberKicked = CometChatGroupEvents.ccGroupMemberKicked.subscribe((item) => {
+            this.group = item?.kickedFrom;
+            this.updateSubtitle();
+            this.ref.detectChanges();
+        });
+        this.ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe((item) => {
+            this.group = item?.kickedFrom;
+            this.updateSubtitle();
+            this.ref.detectChanges();
+        });
+        this.ccOwnershipChanged = CometChatGroupEvents.ccOwnershipChanged.subscribe((item) => {
+            this.group = item?.group;
+            this.updateSubtitle();
+            this.ref.detectChanges();
+        });
+    }
+    unsubscribeToEvents() {
+        this.ccGroupMemberAdded?.unsubscribe();
+        this.ccGroupMemberJoined?.unsubscribe();
+        this.ccGroupMemberKicked?.unsubscribe();
+        this.ccGroupMemberBanned?.unsubscribe();
+        this.ccOwnershipChanged?.unsubscribe();
+    }
+    updateSubtitle() {
+        const count = this.group?.getMembersCount();
+        const membersText = localize(count > 1 ? "MEMBERS" : "MEMBER");
+        this.subtitleText = this.user ? this.user.getStatus() : `${count} ${membersText}`;
+        this.ref.detectChanges();
+    }
+    getButtonStyle(option) {
+        return {
+            height: "100%",
+            width: "100%",
+            border: "none",
+            borderRadius: "0",
+            buttonTextFont: option?.titleFont,
+            buttonTextColor: option?.titleColor,
+            background: option?.backgroundColor || "transparent"
+        };
+    }
+    checkGroupType() {
+        let image = "";
+        if (this.group) {
+            switch (this.group?.getType()) {
+                case CometChatUIKitConstants.GroupTypes.password:
+                    image = this.protectedGroupIcon;
+                    break;
+                case CometChatUIKitConstants.GroupTypes.private:
+                    image = this.privateGroupIcon;
+                    break;
+                default:
+                    image = "";
+                    break;
+            }
+        }
+        return image;
+    }
+    updateUserStatus(user) {
+        if (this.user && this.user.getUid() && this.user.getUid() === user.getUid()) {
+            this.user.setStatus(user.getStatus());
+            this.updateSubtitle();
+        }
+        // this.ref.detectChanges();
+    }
+    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);
+                    },
+                }));
+            }
+        }
+        catch (error) {
+            if (this.onError) {
+                this.onError(CometChatException(error));
+            }
+        }
+    }
+    getSectionHeaderStyle() {
+        return {
+            textFont: "500 15px Inter",
+            textColor: "lightgrey"
+        };
+    }
+    getCallStatusStyleStyle() {
+        return {
+            textFont: "400 15px Inter",
+            textColor: "black"
+        };
+    }
+    getDateStyle() {
+        return {
+            textFont: "400 15px Inter",
+            textColor: "lightgrey"
+        };
+    }
+    onCloseDetails() {
+        if (this.onClose) {
+            this.onClose();
+        }
+    }
+    /**
+ * @param  {CometChat.Group} group
+ */
+    getStatusIndicatorColor(group) {
+        return this.statusColor[group?.getType()];
+    }
+    getCustomOptionView(option) {
+        return option?.customView;
+    }
+    showDataSectionStyle(template) {
+        return {
+            textFont: template.titleFont,
+            textColor: template.titleColor
+        };
+    }
+    setThemeStyle() {
+        this.setDetailsStyle();
+        this.setAvatarStyle();
+        this.setStatusStyle();
+        this.setListItemStyle();
+        this.statusColor.private = this.callDetailsStyle.privateGroupIconBackground;
+        this.statusColor.online = this.callDetailsStyle.onlineStatusColor;
+        this.statusColor.password = this.callDetailsStyle.passwordGroupIconBackground;
+    }
+    setListItemStyle() {
+        let defaultStyle = new ListItemStyle({
+            height: "45px",
+            width: "100%",
+            background: this.themeService.theme.palette.getBackground(),
+            activeBackground: "transparent",
+            borderRadius: "0",
+            titleFont: fontHelper(this.themeService.theme.typography.title2),
+            titleColor: this.themeService.theme.palette.getAccent(),
+            border: "none",
+            separatorColor: this.themeService.theme.palette.getAccent200(),
+            hoverBackground: "transparent"
+        });
+        this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
+    }
+    setAvatarStyle() {
+        let defaultStyle = new AvatarStyle({
+            borderRadius: "24px",
+            width: "36px",
+            height: "36px",
+            border: "none",
+            backgroundColor: this.themeService.theme.palette.getAccent700(),
+            nameTextColor: this.themeService.theme.palette.getAccent900(),
+            backgroundSize: "cover",
+            nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
+            outerViewBorder: "",
+            outerViewBorderSpacing: "",
+        });
+        this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
+    }
+    setStatusStyle() {
+        let defaultStyle = {
+            height: "12px",
+            width: "12px",
+            border: "none",
+            borderRadius: "24px",
+        };
+        this.statusIndicatorStyle = { ...defaultStyle, ...this.statusIndicatorStyle };
+    }
+    setDetailsStyle() {
+        let defaultStyle = new DetailsStyle({
+            background: this.themeService.theme.palette.getBackground(),
+            border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
+            titleTextFont: fontHelper(this.themeService.theme.typography.title1),
+            titleTextColor: this.themeService.theme.palette.getAccent(),
+            onlineStatusColor: this.themeService.theme.palette.getSuccess(),
+            privateGroupIconBackground: this.themeService.theme.palette.getSuccess(),
+            passwordGroupIconBackground: "RGB(247, 165, 0)",
+            closeButtonIconTint: this.themeService.theme.palette.getPrimary(),
+            width: "100%",
+            height: "100%",
+            borderRadius: "",
+            subtitleTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
+            subtitleTextColor: this.themeService.theme.palette.getAccent600(),
+            padding: "0 100px"
+        });
+        this.callDetailsStyle = { ...defaultStyle, ...this.callDetailsStyle };
+    }
+}
+CometChatCallDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
+CometChatCallDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallDetailsComponent, selector: "cometchat-call-details", inputs: { group: "group", user: "user", title: "title", closeButtonIconURL: "closeButtonIconURL", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", disableUsersPresence: "disableUsersPresence", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", onError: "onError", data: "data", onClose: "onClose", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", callDetailsStyle: "callDetailsStyle", callButtonsConfiguration: "callButtonsConfiguration", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\" (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\" [avatarName]=\"user?.getName() ?? this.group?.getName()\" [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\" [listItemStyle]=\"listItemStyle\"\n    [statusIndicatorColor]=\"checkStatusType()\" [statusIndicatorIcon]=\"checkGroupType()\" [title]=\"this.user?.getName() ?? this.group?.getName()\"  [hideSeparator]=\"false\"\n     [statusIndicatorStyle]=\"statusIndicatorStyle\" [avatarStyle]=\"avatarStyle\">\n   <div slot=\"subtitleView\">\n   <div *ngIf=\"!subtitleView; else subtitle\">\n   <cometchat-label [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n   </cometchat-label>\n   </div>\n   <ng-template #subtitle>\n     <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n     </ng-container>\n   </ng-template>\n   </div>\n   </cometchat-list-item>\n  </div>\n<div class=\"cc-calldetails_primary-section\" *ngIf=\"!data || data.length == 0\">\n  <cometchat-call-buttons [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsConfiguration.callButtonsStyle\" [onVideoCallClick]=\"callButtonsConfiguration.onVideoCallClick\" [onVoiceCallClick]=\"callButtonsConfiguration.onVoiceCallClick\" [videoCallIconURL]=\"callButtonsConfiguration.videoCallIconURL\" [voiceCallIconURL]=\"callButtonsConfiguration.voiceCallIconURL\" ></cometchat-call-buttons>\n\n</div>\n<div class=\"cc-details__section-list\" *ngIf=\"data && data.length > 0\">\n  <div class=\"cc-details__section\" *ngFor=\"let item of data\" >\n    <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n      <cometchat-label [text]=\"item.title\" [labelStyle]=\"showDataSectionStyle(item)\"></cometchat-label>\n    </div>\n    <div class=\"cc-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n<div class=\"cc-details__options\"*ngFor=\"let option of getTemplateOptions(item)\" >\n<div class=\"cc-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\">\n  <div class=\"cc-details__option-title\" >\n    <cometchat-button  [text]=\"option.title\" [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 [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>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;min-height:220px}.cc-details__profile{margin-bottom:16px;height:8%}.cc-calldetails_primary-section{height:84%;width:100%;overflow-y:auto;overflow-x:hidden;margin-left:24px;margin-bottom:24px}.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;height:5%}.cc-details__options{margin:8px 0;display:flex;flex-direction:row;gap:10px;align-items:center}.cc-calldetails__date-container{margin:8px 0}.cc-details__option{display:flex;flex-direction:row;justify-content:flex-start;gap:16px;align-items:center}.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__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: 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"] }, { 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: CometChatCallDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cometchat-call-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\" [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\" (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\" [avatarName]=\"user?.getName() ?? this.group?.getName()\" [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\" [listItemStyle]=\"listItemStyle\"\n    [statusIndicatorColor]=\"checkStatusType()\" [statusIndicatorIcon]=\"checkGroupType()\" [title]=\"this.user?.getName() ?? this.group?.getName()\"  [hideSeparator]=\"false\"\n     [statusIndicatorStyle]=\"statusIndicatorStyle\" [avatarStyle]=\"avatarStyle\">\n   <div slot=\"subtitleView\">\n   <div *ngIf=\"!subtitleView; else subtitle\">\n   <cometchat-label [text]=\"subtitleText\" [labelStyle]=\"subtitleStyle()\">\n   </cometchat-label>\n   </div>\n   <ng-template #subtitle>\n     <ng-container *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n     </ng-container>\n   </ng-template>\n   </div>\n   </cometchat-list-item>\n  </div>\n<div class=\"cc-calldetails_primary-section\" *ngIf=\"!data || data.length == 0\">\n  <cometchat-call-buttons [user]=\"user\" [group]=\"group\" [callButtonsStyle]=\"callButtonsConfiguration.callButtonsStyle\" [onVideoCallClick]=\"callButtonsConfiguration.onVideoCallClick\" [onVoiceCallClick]=\"callButtonsConfiguration.onVoiceCallClick\" [videoCallIconURL]=\"callButtonsConfiguration.videoCallIconURL\" [voiceCallIconURL]=\"callButtonsConfiguration.voiceCallIconURL\" ></cometchat-call-buttons>\n\n</div>\n<div class=\"cc-details__section-list\" *ngIf=\"data && data.length > 0\">\n  <div class=\"cc-details__section\" *ngFor=\"let item of data\" >\n    <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n      <cometchat-label [text]=\"item.title\" [labelStyle]=\"showDataSectionStyle(item)\"></cometchat-label>\n    </div>\n    <div class=\"cc-details__options-wrapper\" *ngIf=\"getTemplateOptions(item)\">\n<div class=\"cc-details__options\"*ngFor=\"let option of getTemplateOptions(item)\" >\n<div class=\"cc-details__option\" *ngIf=\"!getCustomOptionView(option);else customView\">\n  <div class=\"cc-details__option-title\" >\n    <cometchat-button  [text]=\"option.title\" [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 [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>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;min-height:220px}.cc-details__profile{margin-bottom:16px;height:8%}.cc-calldetails_primary-section{height:84%;width:100%;overflow-y:auto;overflow-x:hidden;margin-left:24px;margin-bottom:24px}.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;height:5%}.cc-details__options{margin:8px 0;display:flex;flex-direction:row;gap:10px;align-items:center}.cc-calldetails__date-container{margin:8px 0}.cc-details__option{display:flex;flex-direction:row;justify-content:flex-start;gap:16px;align-items:center}.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__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { group: [{
+                type: Input
+            }], user: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], closeButtonIconURL: [{
+                type: Input
+            }], hideProfile: [{
+                type: Input
+            }], subtitleView: [{
+                type: Input
+            }], customProfileView: [{
+                type: Input
+            }], disableUsersPresence: [{
+                type: Input
+            }], privateGroupIcon: [{
+                type: Input
+            }], protectedGroupIcon: [{
+                type: Input
+            }], onError: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], onClose: [{
+                type: Input
+            }], statusIndicatorStyle: [{
+                type: Input
+            }], avatarStyle: [{
+                type: Input
+            }], callDetailsStyle: [{
+                type: Input
+            }], callButtonsConfiguration: [{
+                type: Input
+            }], listItemStyle: [{
+                type: Input
+            }] } });
+
+/**
+*
+* CometChatCallHistoryWithDetailsComponent is a wrapper component for CometChatCallDetailsComponent and CometChatCallHistorycomponent to show history and details of calls  in one screen
+*
+* @version 1.0.0
+* @author CometChatTeam
+* @copyright © 2022 CometChat Inc.
+*
+*/
+class CometChatCallHistoryWithDetailsComponent {
+    constructor(elementRef, ref, themeService) {
+        this.elementRef = elementRef;
+        this.ref = ref;
+        this.themeService = themeService;
+        this.isMobileView = false;
+        this.messageText = localize("NO_CALLS_SELECTED");
+        this.callHistoryWithDetailsStyle = {};
+        this.callDetailsConfiguration = new CallDetailsConfiguration({});
+        this.callHistoryConfiguration = new CallHistoryConfiguration({});
+        this.onError = (error) => {
+            console.log(error);
+        };
+        this.labelStyle = {
+            background: "transparent",
+            textFont: "700 22px Inter",
+            textColor: "rgba(20, 20, 20, 0.33)"
+        };
+        this.closeDetailsPage = () => {
+            this.activeCall = null;
+            this.user = null;
+            this.group = null;
+            this.ref.detectChanges();
+        };
+        this.onBack = () => {
+            this.user = null;
+            this.group = null;
+            this.activeCall = null;
+        };
+        this.onItemClick = (call) => {
+            this.call = call;
+            this.setActiveChat();
+        };
+        this.emptyMessageStyle = () => {
+            return {
+                background: this.callHistoryWithDetailsStyle.background || this.themeService.theme.palette.getBackground(),
+                height: this.callHistoryWithDetailsStyle.height,
+                width: `calc(${this.callHistoryWithDetailsStyle.width} - 280px)`,
+                border: this.callHistoryWithDetailsStyle.border,
+                borderRadius: this.callHistoryWithDetailsStyle.borderRadius,
+            };
+        };
+        this.chatsWrapperStyles = () => {
+            return {
+                height: this.callHistoryWithDetailsStyle.height,
+                width: this.callHistoryWithDetailsStyle.width,
+                border: this.callHistoryWithDetailsStyle.border,
+                borderRadius: this.callHistoryWithDetailsStyle.borderRadius,
+                background: this.callHistoryWithDetailsStyle.background || this.themeService.theme.palette.getBackground(),
+            };
+        };
+    }
+    ngOnChanges(changes) {
+        if (changes["user"] || changes["group"]) {
+            this.setActiveChat();
+        }
+    }
+    setWithDetailsStyle() {
+        let defaultStyle = new WithDetailsStyle({
+            width: "100%",
+            height: "100%",
+            background: this.themeService.theme.palette.getBackground(),
+            borderRadius: "none",
+            border: "none",
+            messageTextColor: this.themeService.theme.palette.getAccent600(),
+            messageTextFont: fontHelper(this.themeService.theme.typography.title1),
+        });
+        this.callHistoryWithDetailsStyle = {
+            ...defaultStyle,
+            ...this.callHistoryWithDetailsStyle
+        };
+        this.labelStyle.textFont = this.callHistoryWithDetailsStyle.messageTextFont;
+        this.labelStyle.textColor = this.callHistoryWithDetailsStyle.messageTextColor;
+    }
+    setActiveChat() {
+        this.activeCall = this.call;
+        if (this.call.getSender().getUid() == this.loggedInUser?.getUid()) {
+            if (this.call.getReceiverType() == CometChatUIKitConstants.MessageReceiverType.user) {
+                this.user = this.call.getReceiver();
+                this.group = null;
+            }
+            else {
+                this.user = null;
+                this.group = this.call.getReceiver();
+            }
+        }
+        else {
+            this.user = this.call.getSender();
+        }
+    }
+    ngOnInit() {
+        this.setWithDetailsStyle();
+        CometChat.getLoggedinUser()
+            .then((user) => {
+            this.loggedInUser = user;
+        })
+            .catch((error) => {
+            if (this.onError) {
+                this.onError(error);
+            }
+        });
+    }
+}
+CometChatCallHistoryWithDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallHistoryWithDetailsComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
+CometChatCallHistoryWithDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatCallHistoryWithDetailsComponent, selector: "cometchat-call-history-with-details", inputs: { call: "call", isMobileView: "isMobileView", messageText: "messageText", callHistoryWithDetailsStyle: "callHistoryWithDetailsStyle", callDetailsConfiguration: "callDetailsConfiguration", callHistoryConfiguration: "callHistoryConfiguration", 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-history\n    #conversationRef\n    [activeCall]=\"activeCall\"\n    [onItemClick]=\"callHistoryConfiguration.onItemClick || onItemClick\"\n    [conversationsStyle]=\"callHistoryConfiguration.callHistoryStyle\"\n    [subtitleView]=\"callHistoryConfiguration.subtitleView\"\n    [options]=\"callHistoryConfiguration.options\"\n    [conversationsRequestBuilder]=\"callHistoryConfiguration.messageRequestBuilder\"\n    [emptyStateView]=\"callHistoryConfiguration.emptyStateView\"\n    [onSelect]=\"callHistoryConfiguration.onSelect\"\n    [loadingIconURL]=\"callHistoryConfiguration.loadingIconURL\"\n    [errorStateView]=\"callHistoryConfiguration.errorStateView\"\n    [loadingStateView]=\"callHistoryConfiguration.loadingStateView\"\n    [titleAlignment]=\"callHistoryConfiguration.titleAlignment\"\n    [listItemView]=\"callHistoryConfiguration.listItemView\"\n    [menu]=\"callHistoryConfiguration.menu\"\n    [hideSeparator]=\"callHistoryConfiguration.hideSeparator\"\n    [hideError]=\"callHistoryConfiguration.hideError\"\n    [selectionMode]=\"callHistoryConfiguration.selectionMode\"\n    [listItemStyle]=\"callHistoryConfiguration.listItemStyle\"\n    [avatarStyle]=\"callHistoryConfiguration.avatarStyle\"\n    ></cometchat-call-history>\n  </div>\n  <div class=\"cc-with-details__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user || group\">\n    <!--call details Screen-->\n    <cometchat-call-details\n    #messagesRef\n    [user]=\"user!\"\n    [group]=\"group!\"\n    [callDetailsStyle]=\"callDetailsConfiguration.callDetailsStyle\"\n    [callButtonsConfiguration]=\"callDetailsConfiguration.callButtonsConfiguration\"\n [onClose]=\"callDetailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"callDetailsConfiguration.listItemStyle\"  [avatarStyle]=\"callDetailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"callDetailsConfiguration.statusIndicatorStyle\"  [customProfileView]=\"callDetailsConfiguration.customProfileView\" [subtitleView]=\"callDetailsConfiguration.subtitleView\" [hideProfile]=\"callDetailsConfiguration.hideProfile\" [onError]=\"callDetailsConfiguration.onError\" [closeButtonIconURL]=\"callDetailsConfiguration.closeButtonIconURL\"\n    >\n    </cometchat-call-details>\n    <!--call details Screen ENDS-->\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n", 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: CometChatCallHistoryComponent, selector: "cometchat-call-history", inputs: ["messageRequestBuilder", "subtitleView", "listItemView", "menu", "options", "activeCall", "hideSeparator", "selectionMode", "hideError", "title", "onError", "onSelect", "emptyStateView", "errorStateView", "loadingIconURL", "datePattern", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "avatarStyle", "dateStyle", "callHistoryStyle", "listItemStyle", "onItemClick"] }, { type: CometChatCallDetailsComponent, selector: "cometchat-call-details", inputs: ["group", "user", "title", "closeButtonIconURL", "hideProfile", "subtitleView", "customProfileView", "disableUsersPresence", "privateGroupIcon", "protectedGroupIcon", "onError", "data", "onClose", "statusIndicatorStyle", "avatarStyle", "callDetailsStyle", "callButtonsConfiguration", "listItemStyle"] }], 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: CometChatCallHistoryWithDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "cometchat-call-history-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-history\n    #conversationRef\n    [activeCall]=\"activeCall\"\n    [onItemClick]=\"callHistoryConfiguration.onItemClick || onItemClick\"\n    [conversationsStyle]=\"callHistoryConfiguration.callHistoryStyle\"\n    [subtitleView]=\"callHistoryConfiguration.subtitleView\"\n    [options]=\"callHistoryConfiguration.options\"\n    [conversationsRequestBuilder]=\"callHistoryConfiguration.messageRequestBuilder\"\n    [emptyStateView]=\"callHistoryConfiguration.emptyStateView\"\n    [onSelect]=\"callHistoryConfiguration.onSelect\"\n    [loadingIconURL]=\"callHistoryConfiguration.loadingIconURL\"\n    [errorStateView]=\"callHistoryConfiguration.errorStateView\"\n    [loadingStateView]=\"callHistoryConfiguration.loadingStateView\"\n    [titleAlignment]=\"callHistoryConfiguration.titleAlignment\"\n    [listItemView]=\"callHistoryConfiguration.listItemView\"\n    [menu]=\"callHistoryConfiguration.menu\"\n    [hideSeparator]=\"callHistoryConfiguration.hideSeparator\"\n    [hideError]=\"callHistoryConfiguration.hideError\"\n    [selectionMode]=\"callHistoryConfiguration.selectionMode\"\n    [listItemStyle]=\"callHistoryConfiguration.listItemStyle\"\n    [avatarStyle]=\"callHistoryConfiguration.avatarStyle\"\n    ></cometchat-call-history>\n  </div>\n  <div class=\"cc-with-details__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user || group\">\n    <!--call details Screen-->\n    <cometchat-call-details\n    #messagesRef\n    [user]=\"user!\"\n    [group]=\"group!\"\n    [callDetailsStyle]=\"callDetailsConfiguration.callDetailsStyle\"\n    [callButtonsConfiguration]=\"callDetailsConfiguration.callButtonsConfiguration\"\n [onClose]=\"callDetailsConfiguration.onClose || closeDetailsPage\" [listItemStyle]=\"callDetailsConfiguration.listItemStyle\"  [avatarStyle]=\"callDetailsConfiguration.avatarStyle\" [statusIndicatorStyle]=\"callDetailsConfiguration.statusIndicatorStyle\"  [customProfileView]=\"callDetailsConfiguration.customProfileView\" [subtitleView]=\"callDetailsConfiguration.subtitleView\" [hideProfile]=\"callDetailsConfiguration.hideProfile\" [onError]=\"callDetailsConfiguration.onError\" [closeButtonIconURL]=\"callDetailsConfiguration.closeButtonIconURL\"\n    >\n    </cometchat-call-details>\n    <!--call details Screen ENDS-->\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user && !group\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n", 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: { call: [{
+                type: Input
+            }], isMobileView: [{
+                type: Input
+            }], messageText: [{
+                type: Input
+            }], callHistoryWithDetailsStyle: [{
+                type: Input
+            }], callDetailsConfiguration: [{
+                type: Input
+            }], callHistoryConfiguration: [{
+                type: Input
+            }], onError: [{
+                type: Input
+            }] } });
+
+class CometChatCallHistory {
+}
+CometChatCallHistory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallHistory, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CometChatCallHistory.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallHistory, declarations: [CometChatCallHistoryComponent], imports: [CommonModule,
+        CometChatList], exports: [CometChatCallHistoryComponent] });
+CometChatCallHistory.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallHistory, imports: [[
+            CommonModule,
+            CometChatList,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallHistory, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CometChatCallHistoryComponent],
+                    imports: [
+                        CommonModule,
+                        CometChatList,
+                    ],
+                    exports: [CometChatCallHistoryComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+
+class CometChatCallDetails {
+}
+CometChatCallDetails.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallDetails, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CometChatCallDetails.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallDetails, declarations: [CometChatCallDetailsComponent], imports: [CommonModule,
+        CometChatCallButtons,
+        CometChatList], exports: [CometChatCallDetailsComponent] });
+CometChatCallDetails.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallDetails, imports: [[
+            CommonModule,
+            CometChatCallButtons,
+            CometChatList
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallDetails, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CometChatCallDetailsComponent],
+                    imports: [
+                        CommonModule,
+                        CometChatCallButtons,
+                        CometChatList
+                    ],
+                    exports: [CometChatCallDetailsComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+
+class CometChatCallHistoryWithDetails {
+}
+CometChatCallHistoryWithDetails.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallHistoryWithDetails, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CometChatCallHistoryWithDetails.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallHistoryWithDetails, declarations: [CometChatCallHistoryWithDetailsComponent], imports: [CommonModule,
+        CometChatCallHistory,
+        CometChatCallDetails,
+        BrowserModule,
+        BrowserAnimationsModule], exports: [CometChatCallHistoryWithDetailsComponent] });
+CometChatCallHistoryWithDetails.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallHistoryWithDetails, imports: [[
+            CommonModule,
+            CometChatCallHistory,
+            CometChatCallDetails,
+            BrowserModule,
+            BrowserAnimationsModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatCallHistoryWithDetails, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CometChatCallHistoryWithDetailsComponent],
+                    imports: [
+                        CommonModule,
+                        CometChatCallHistory,
+                        CometChatCallDetails,
+                        BrowserModule,
+                        BrowserAnimationsModule,
+                    ],
+                    exports: [CometChatCallHistoryWithDetailsComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+
+class CometChatTabs {
+}
+CometChatTabs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CometChatTabs.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, declarations: [CometChatTabsComponent], imports: [CommonModule,
+        CometChatConversationsWithMessages,
+        CometChatUsersWithMessages,
+        CometChatGroupsWithMessages,
+        CometChatCallHistoryWithDetails], exports: [CometChatTabsComponent] });
+CometChatTabs.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, imports: [[
+            CommonModule,
+            CometChatConversationsWithMessages,
+            CometChatUsersWithMessages,
+            CometChatGroupsWithMessages,
+            CometChatCallHistoryWithDetails
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CometChatTabsComponent],
+                    imports: [
+                        CommonModule,
+                        CometChatConversationsWithMessages,
+                        CometChatUsersWithMessages,
+                        CometChatGroupsWithMessages,
+                        CometChatCallHistoryWithDetails
+                    ],
+                    exports: [CometChatTabsComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+
 /*
  * Public API Surface of angular-chat-ui-kit
  */
@@ -13582,5 +14897,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CallingExtension, CallingExtensionDecorator, ChatConfigurator, CollaborativeDocumentExtension, CollaborativeDocumentExtensionDecorator, CollaborativeWhiteBoardExtension, CollaborativeWhiteBoardExtensionDecorator, CometChatAddMembers, CometChatAddMembersComponent, CometChatBannedMembers, CometChatBannedMembersComponent, CometChatCallButtons, CometChatCallButtonsComponent, CometChatConversations, CometChatConversationsComponent, CometChatConversationsWithMessages, CometChatConversationsWithMessagesComponent, CometChatDetails, CometChatDetailsComponent, CometChatGroupMembers, CometChatGroupMembersComponent, CometChatGroups, CometChatGroupsComponent, CometChatGroupsWithMessages, CometChatGroupsWithMessagesComponent, CometChatIncomingCall, CometChatIncomingCallComponent, CometChatList, CometChatMessageBubble, CometChatMessageBubbleComponent, CometChatMessageComposer, CometChatMessageComposerComponent, CometChatMessageHeader, CometChatMessageHeaderComponent, CometChatMessageList, CometChatMessageListComponent, CometChatMessages, CometChatMessagesComponent, CometChatOngoingCall, CometChatOngoingCallComponent, CometChatOutgoingCall, CometChatOutgoingCallComponent, CometChatThemeService, CometChatThreadedMessages, CometChatThreadedMessagesComponent, CometChatTransferOwnership, CometChatTransferOwnershipComponent, CometChatUIKit, CometChatUsers, CometChatUsersComponent, CometChatUsersWithMessages, CometChatUsersWithMessagesComponent, CometchatListComponent, DataSource, DataSourceDecorator, ExtensionsDataSource, ImageModerationExtension, ImageModerationExtensionDecorator, LinkPreviewExtension, LinkPreviewExtensionDecorator, MessageTranslationExtension, MessageTranslationExtensionDecorator, MessageUtils, PollsExtension, PollsExtensionDecorator, ReactionExtension, ReactionExtensionDecorator, SmartReplyExtension, SmartReplyExtensionDecorator, StickersExtension, StickersExtensionDecorator, TextModeratorExtension, TextModeratorExtensionDecorator, ThumbnailGenerationExtension, ThumbnailGenerationExtensionDecorator };
+export { CallingExtension, CallingExtensionDecorator, ChatConfigurator, CollaborativeDocumentExtension, CollaborativeDocumentExtensionDecorator, CollaborativeWhiteBoardExtension, CollaborativeWhiteBoardExtensionDecorator, CometChatAddMembers, CometChatAddMembersComponent, CometChatBannedMembers, CometChatBannedMembersComponent, CometChatCallButtons, CometChatCallButtonsComponent, CometChatConversations, CometChatConversationsComponent, CometChatConversationsWithMessages, CometChatConversationsWithMessagesComponent, CometChatDetails, CometChatDetailsComponent, CometChatGroupMembers, CometChatGroupMembersComponent, CometChatGroups, CometChatGroupsComponent, CometChatGroupsWithMessages, CometChatGroupsWithMessagesComponent, CometChatIncomingCall, CometChatIncomingCallComponent, CometChatList, CometChatMessageBubble, CometChatMessageBubbleComponent, CometChatMessageComposer, CometChatMessageComposerComponent, CometChatMessageHeader, CometChatMessageHeaderComponent, CometChatMessageList, CometChatMessageListComponent, CometChatMessages, CometChatMessagesComponent, CometChatOngoingCall, CometChatOngoingCallComponent, CometChatOutgoingCall, CometChatOutgoingCallComponent, CometChatTabs, CometChatTabsComponent, CometChatThemeService, CometChatThreadedMessages, CometChatThreadedMessagesComponent, CometChatTransferOwnership, CometChatTransferOwnershipComponent, CometChatUIKit, CometChatUsers, CometChatUsersComponent, CometChatUsersWithMessages, CometChatUsersWithMessagesComponent, CometchatListComponent, DataSource, DataSourceDecorator, ExtensionsDataSource, ImageModerationExtension, ImageModerationExtensionDecorator, LinkPreviewExtension, LinkPreviewExtensionDecorator, MessageTranslationExtension, MessageTranslationExtensionDecorator, MessageUtils, PollsExtension, PollsExtensionDecorator, ReactionExtension, ReactionExtensionDecorator, SmartReplyExtension, SmartReplyExtensionDecorator, StickersExtension, StickersExtensionDecorator, TextModeratorExtension, TextModeratorExtensionDecorator, ThumbnailGenerationExtension, ThumbnailGenerationExtensionDecorator };
 //# sourceMappingURL=cometchat-chat-uikit-angular.mjs.map