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

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

@@ -1,6 +1,6 @@
-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, 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 } 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';
@@ -13737,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
  */
@@ -13745,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