@cometchat/chat-uikit-angular 4.3.33 → 4.3.35

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

@@ -1,4 +1,4 @@
-import { ConversationUtils, CometChatMentionsFormatter, CometChatUIKitLoginListener, UserMentionStyle, CometChatUrlsFormatter, CallingDetailsUtils, ExtensionsDataSource as ExtensionsDataSource$1, CollaborativeDocumentConstants, ExtensionsId, CollaborativeWhiteboardConstants, PollsConstants, CometChatUIKitUtility, CometChatSoundManager, SmartRepliesConfiguration, StickersConstants, StickersConfiguration, CometChatUIKitSharedSettings, CometChatUIKitCalls, StorageUtils, InteractiveMessageUtils, OutgoingCallStyle, OutgoingCallConfiguration, CallScreenConfiguration, CallButtonsStyle, IncomingCallStyle, UsersStyle, AddMembersStyle, MessageHeaderStyle, ListStyle, BannedMembersStyle, MessageReceiptUtils, ConversationsStyle, MessageInformationStyle, ReactionsConfiguration, MessageInformationConfiguration, MessageTranslationConstants, MessageTranslationStyle, CalendarStyle, TimeSlotStyle, SchedulerBubbleStyle, ReactionsStyle, FormBubbleStyle, CardBubbleStyle, LinkPreviewConstants, ThumbnailGenerationConstants, MessageListStyle, LinkPreviewStyle, SmartRepliesConstants, ReactionListStyle, ReactionListConfiguration, ReactionInfoStyle, ReactionInfoConfiguration, GroupMemberUtils, GroupMembersStyle, UserMemberWrapperConfiguration, MessageComposerStyle, MessageListConfiguration, MessageComposerConfiguration, ThreadedMessagesStyle, TransferOwnershipStyle, AddMembersConfiguration, BannedMembersConfiguration, GroupMembersConfiguration, TransferOwnershipConfiguration, DetailsUtils, DetailsStyle, MessageHeaderConfiguration, ThreadedMessagesConfiguration, DetailsConfiguration, MessagesStyle, GroupsStyle, UsersConfiguration, GroupsConfiguration, ContactsStyle, TabItemStyle, MessagesConfiguration, ConversationsConfiguration, ContactsConfiguration, WithMessagesStyle, CreateGroupConfiguration, JoinGroupConfiguration, CallLogsStyle, CallLogParticipantsStyle, CallLogRecordingsStyle, CallLogHistoryStyle, CallButtonsConfiguration, CallLogParticipantsConfiguration, CallLogHistoryConfiguration, CallLogRecordingsConfiguration, CallLogDetailsStyle, CallLogDetailsConfiguration, CallLogsConfiguration, WithDetailsStyle } from '@cometchat/uikit-shared';
+import { ConversationUtils, CometChatMentionsFormatter, CometChatUIKitLoginListener, UserMentionStyle, CometChatUrlsFormatter, CallingDetailsUtils, ExtensionsDataSource as ExtensionsDataSource$1, CollaborativeDocumentConstants, ExtensionsId, CollaborativeWhiteboardConstants, PollsConstants, CometChatUIKitUtility, CometChatSoundManager, SmartRepliesConfiguration, StickersConstants, StickersConfiguration, CometChatUIKitSharedSettings, CometChatUIKitCalls, StorageUtils, InteractiveMessageUtils, OutgoingCallStyle, OutgoingCallConfiguration, CallScreenConfiguration, CallButtonsStyle, IncomingCallStyle, UsersStyle, SelectedUserPreviewStyle, AddMembersStyle, MessageHeaderStyle, ListStyle, BannedMembersStyle, MessageReceiptUtils, ConversationsStyle, MessageInformationStyle, ReactionsConfiguration, MessageInformationConfiguration, MessageTranslationConstants, MessageTranslationStyle, CalendarStyle, TimeSlotStyle, SchedulerBubbleStyle, ReactionsStyle, FormBubbleStyle, CardBubbleStyle, LinkPreviewConstants, ThumbnailGenerationConstants, MessageListStyle, LinkPreviewStyle, SmartRepliesConstants, ReactionListStyle, ReactionListConfiguration, ReactionInfoStyle, ReactionInfoConfiguration, GroupMemberUtils, GroupMembersStyle, UserMemberWrapperConfiguration, MessageComposerStyle, MessageListConfiguration, MessageComposerConfiguration, ThreadedMessagesStyle, TransferOwnershipStyle, AddMembersConfiguration, BannedMembersConfiguration, GroupMembersConfiguration, TransferOwnershipConfiguration, DetailsUtils, DetailsStyle, MessageHeaderConfiguration, ThreadedMessagesConfiguration, DetailsConfiguration, MessagesStyle, GroupsStyle, UsersConfiguration, GroupsConfiguration, ContactsStyle, TabItemStyle, MessagesConfiguration, ConversationsConfiguration, ContactsConfiguration, WithMessagesStyle, CreateGroupConfiguration, JoinGroupConfiguration, CallLogsStyle, CallLogParticipantsStyle, CallLogRecordingsStyle, CallLogHistoryStyle, CallButtonsConfiguration, CallLogParticipantsConfiguration, CallLogHistoryConfiguration, CallLogRecordingsConfiguration, CallLogDetailsStyle, CallLogDetailsConfiguration, CallLogsConfiguration, WithDetailsStyle } from '@cometchat/uikit-shared';
 export * from '@cometchat/uikit-shared';
 import { CometChatMessageOption, CometChatUIKitConstants, localize, fontHelper, CometChatMessageTemplate, CometChatMessageComposerAction, MentionsTargetElement, MessageBubbleAlignment, CometChatTheme, CometChatMessageEvents, MessageStatus, CometChatUIEvents, ChatSdkEventInitializer, CometChatLocalize, CallWorkflow, CometChatCallEvents, IconButtonAlignment, TitleAlignment, States, DatePatterns, SelectionMode, UserPresencePlacement, CometChatUserEvents, CometChatGroupEvents, CometChatConversationEvents, MessageListAlignment, Receipts, TimestampAlignment, DocumentIconAlignment, Placement, ActivePopover, UserMemberListType, AuxiliaryButtonAlignment, PreviewMessageMode, TabAlignment, TabsVisibility, CometChatCallDetailsTemplate, CometChatCallDetailsOption } from '@cometchat/uikit-resources';
 export * from '@cometchat/uikit-resources';
@@ -7,7 +7,7 @@ export { ActionSheetStyle, AvatarStyle, BackdropStyle, BadgeStyle, ButtonGroupSt
 import { __awaiter } from 'tslib';
 import { CometChat } from '@cometchat/chat-sdk-javascript';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewChild, Input, ChangeDetectionStrategy, NgModule, CUSTOM_ELEMENTS_SCHEMA, ViewChildren, EventEmitter, Output } from '@angular/core';
+import { Injectable, Component, ViewChild, Input, ChangeDetectionStrategy, NgModule, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChildren, EventEmitter, Output } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import { FormsModule } from '@angular/forms';
@@ -1943,7 +1943,7 @@ class CometChatUIKit {
         if (window) {
             window.CometChatUiKit = {
                 name: "@cometchat/chat-uikit-angular",
-                version: "4.3.33",
+                version: "4.3.35",
             };
         }
         if (CometChatUIKitSharedSettings) {
@@ -4029,6 +4029,8 @@ class CometChatUsersComponent {
             width: "28px",
             height: "28px",
         };
+        this.selectedUserPreviewStyle = {};
+        this.showSelectedUsersPreview = false;
         this.searchKeyword = "";
         this.userPresencePlacement = UserPresencePlacement.bottom;
         this.disableLoadingState = false;
@@ -4053,6 +4055,21 @@ class CometChatUsersComponent {
             checkedBackgroundColor: "#2196F3",
             uncheckedBackgroundColor: "#ccc"
         };
+        this.removeMemberButtonStyle = {
+            height: "16px",
+            width: "16px",
+            iconHeight: "16px",
+            iconWidth: "16px",
+            border: "none",
+            borderRadius: "50%",
+            background: "transparent",
+            buttonIconTint: "black"
+        };
+        this.selectedUsersPreviewWrapper = {};
+        // Bulk selection properties
+        this.lastSelectedIndex = -1;
+        this.isShiftPressed = false;
+        this.selectedUserPillStyle = {};
         this.onScrolledToBottom = null;
         this.fetchUsersOnSearchKeyWordChange = () => {
             if (this.fetchingUsers) {
@@ -4079,6 +4096,7 @@ class CometChatUsersComponent {
             if (this.onItemClick) {
                 this.onItemClick(user);
             }
+            this.onRowClicked(user.getUid());
         };
         /**
          * @param  {CometChat.User} user
@@ -4134,20 +4152,60 @@ class CometChatUsersComponent {
         this.addMembersToList = (user, event) => {
             var _a;
             let selected = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.checked;
-            if (this.selectionMode === this.selectionmodeEnum.single) {
-                this.userChecked = user.getUid();
-            }
-            if (this.onSelect) {
-                this.onSelect(user, selected);
-            }
-            if (selected) {
-                this.selectedUsers[user.getUid()] = user;
+            const currentIndex = this.usersList.findIndex(u => u.getUid() === user.getUid());
+            // Check if shift key was pressed for bulk selection
+            if (this.isShiftPressed && this.lastSelectedIndex !== -1 && currentIndex !== -1) {
+                this.handleBulkSelection(currentIndex, selected);
             }
             else {
-                delete this.selectedUsers[user.getUid()];
+                // Regular single selection
+                if (this.selectionMode === this.selectionmodeEnum.single) {
+                    this.userChecked = user.getUid();
+                }
+                if (this.onSelect) {
+                    this.onSelect(user, selected);
+                }
+                if (selected) {
+                    this.selectedUsers[user.getUid()] = user;
+                }
+                else {
+                    delete this.selectedUsers[user.getUid()];
+                }
+                this.lastSelectedIndex = currentIndex;
             }
             this.ref.detectChanges();
         };
+        /**
+         * Handle checkbox click to detect shift key
+         */
+        this.onCheckboxClick = (user, event) => {
+            this.isShiftPressed = event.shiftKey;
+        };
+        /**
+         * Handle checkbox changed event
+         */
+        this.onCheckboxChanged = (user, event) => {
+            this.addMembersToList(user, event);
+            // Reset shift flag after processing
+            this.isShiftPressed = false;
+        };
+        /**
+         * Handle keyboard events for accessibility
+         */
+        this.onKeyDown = (event) => {
+            // Track shift key state for keyboard navigation
+            if (event.key === 'Shift') {
+                this.isShiftPressed = true;
+            }
+        };
+        /**
+         * Handle keyboard events for accessibility
+         */
+        this.onKeyUp = (event) => {
+            if (event.key === 'Shift') {
+                this.isShiftPressed = false;
+            }
+        };
         this.fetchNextUsersList = (state = States.loading) => {
             var _a;
             this.onScrolledToBottom = null;
@@ -4165,6 +4223,7 @@ class CometChatUsersComponent {
                 try {
                     this.requestBuilder.fetchNext().then((userList) => {
                         var _a;
+                        console.log(userList);
                         if (userList.length <= 0) {
                             if (this.onEmpty) {
                                 this.onEmpty();
@@ -4238,7 +4297,8 @@ class CometChatUsersComponent {
                         this.usersList = [];
                         this.ref.detectChanges();
                     }
-                    if (!this.fetchingUsers) {
+                    if (!this.fetchingUsers || (this.fetchingUsers && key == "")) {
+                        this.usersList = [];
                         this.fetchNextUsersList();
                     }
                 }, 500);
@@ -4333,6 +4393,21 @@ class CometChatUsersComponent {
         return user.getUid() === this.userChecked
             || ((_a = this.selectedUsers) === null || _a === void 0 ? void 0 : _a[user.getUid()]);
     }
+    onRowClicked(uid) {
+        const userCheckbox = this.checkboxes.find(checkboxRef => uid === checkboxRef.nativeElement.getAttribute('data-uid'));
+        const userRadio = this.radios.find(radioRef => uid === radioRef.nativeElement.getAttribute('data-uid'));
+        let input = null;
+        if (userCheckbox && this.selectionMode === this.selectionmodeEnum.multiple) {
+            const root = userCheckbox.nativeElement.shadowRoot || userCheckbox.nativeElement;
+            input = root.querySelector('input[type="checkbox"]');
+        }
+        else if (userRadio && this.selectionMode === this.selectionmodeEnum.single) {
+            const root = userRadio.nativeElement.shadowRoot || userRadio.nativeElement;
+            input = root.querySelector('input[type="radio"]');
+        }
+        if (input)
+            input.click();
+    }
     attachConnectionListeners() {
         CometChat.addConnectionListener(this.connectionListenerId, new CometChat.ConnectionListener({
             onConnected: () => {
@@ -4369,6 +4444,92 @@ class CometChatUsersComponent {
         this.userListenerId = "";
         CometChat.removeConnectionListener(this.connectionListenerId);
     }
+    getUserNameStyle() {
+        return {
+            font: this.selectedUserPreviewStyle.textFont || fontHelper(this.themeService.theme.typography.name),
+            color: this.selectedUserPreviewStyle.textColor || this.themeService.theme.palette.getAccent(),
+        };
+    }
+    /**
+     * Handle bulk selection when shift+click is used
+     */
+    handleBulkSelection(currentIndex, selected) {
+        const startIndex = Math.min(this.lastSelectedIndex, currentIndex);
+        const endIndex = Math.max(this.lastSelectedIndex, currentIndex);
+        const shouldSelect = selected;
+        // Apply selection/deselection to all users in range
+        for (let i = startIndex; i <= endIndex; i++) {
+            const user = this.usersList[i];
+            if (user) {
+                const wasSelected = !!this.selectedUsers[user.getUid()];
+                if (shouldSelect && !wasSelected) {
+                    this.selectedUsers[user.getUid()] = user;
+                    if (this.onSelect) {
+                        this.onSelect(user, true);
+                    }
+                    this.updateCheckboxState(user.getUid(), true);
+                }
+                else if (!shouldSelect && wasSelected) {
+                    delete this.selectedUsers[user.getUid()];
+                    if (this.onSelect) {
+                        this.onSelect(user, false);
+                    }
+                    this.updateCheckboxState(user.getUid(), false);
+                }
+            }
+        }
+        this.lastSelectedIndex = currentIndex;
+    }
+    /**
+     * Update checkbox state programmatically
+     */
+    updateCheckboxState(userId, checked) {
+        setTimeout(() => {
+            if (this.checkboxes) {
+                const userCheckbox = this.checkboxes.find(checkboxRef => userId === checkboxRef.nativeElement.getAttribute('data-uid'));
+                if (userCheckbox) {
+                    const root = userCheckbox.nativeElement.shadowRoot || userCheckbox.nativeElement;
+                    const input = root.querySelector('input[type="checkbox"]');
+                    if (input && input.checked !== checked) {
+                        input.checked = checked;
+                        const changeEvent = new Event('change', { bubbles: true });
+                        input.dispatchEvent(changeEvent);
+                    }
+                }
+            }
+        }, 0);
+    }
+    /**
+     * Get array of selected users for preview
+     */
+    getSelectedUsersArray() {
+        return Object.values(this.selectedUsers);
+    }
+    /**
+     * Get count of selected users
+     */
+    getSelectedUsersCount() {
+        return Object.keys(this.selectedUsers).length;
+    }
+    /**
+     * Remove user from selection by triggering checkbox click
+     */
+    removeSelectedUser(user) {
+        const userCheckbox = this.checkboxes.find(checkboxRef => user.getUid() === checkboxRef.nativeElement.getAttribute('data-uid'));
+        if (userCheckbox) {
+            const root = userCheckbox.nativeElement.shadowRoot || userCheckbox.nativeElement;
+            const input = root.querySelector('input[type="checkbox"]');
+            if (input) {
+                input.click();
+            }
+        }
+    }
+    /**
+     * Track by function for ngFor performance
+     */
+    trackByUserId(index, user) {
+        return user.getUid();
+    }
     setRequestBuilder() {
         if (!this.searchKeyword) {
             this.previousSearchKeyword = "";
@@ -4396,6 +4557,7 @@ class CometChatUsersComponent {
         this.setListItemStyle();
         this.setAvatarStyle();
         this.setStatusStyle();
+        this.setSelectedUserStyle();
         this.listStyle = {
             titleTextFont: this.usersStyle.titleTextFont,
             titleTextColor: this.usersStyle.titleTextColor,
@@ -4488,12 +4650,40 @@ class CometChatUsersComponent {
             uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
         };
     }
+    setSelectedUserStyle() {
+        let defaultStyle = new SelectedUserPreviewStyle({
+            borderRadius: "1000px",
+            width: "140px",
+            height: "fit-content",
+            border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
+            textColor: this.themeService.theme.palette.getAccent(),
+            textFont: fontHelper(this.themeService.theme.typography.name),
+            background: this.themeService.theme.palette.getBackground(),
+            closeIconTint: this.themeService.theme.palette.getPrimary(),
+        });
+        this.selectedUserPreviewStyle = Object.assign(Object.assign({}, defaultStyle), this.selectedUserPreviewStyle);
+        this.removeMemberButtonStyle.buttonIconTint = this.selectedUserPreviewStyle.closeIconTint || this.themeService.theme.palette.getAccent600();
+        this.selectedUserPillStyle = {
+            borderRadius: this.selectedUserPreviewStyle.borderRadius || "1000px",
+            width: this.selectedUserPreviewStyle.width || "140px",
+            height: this.selectedUserPreviewStyle.height || "fit-content",
+            border: this.selectedUserPreviewStyle.border || `none`,
+            color: this.selectedUserPreviewStyle.textColor || this.themeService.theme.palette.getAccent(),
+            font: this.selectedUserPreviewStyle.textFont || fontHelper(this.themeService.theme.typography.name),
+            background: this.selectedUserPreviewStyle.background || this.themeService.theme.palette.getBackground(),
+        };
+        this.selectedUsersPreviewWrapper = {
+            borderTop: `1px solid ${this.themeService.theme.palette.getAccent100()}`,
+            borderBottom: `none`,
+            background: this.usersStyle.background || "transparent"
+        };
+    }
 }
 CometChatUsersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersComponent, selector: "cometchat-users", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", disableUsersPresence: "disableUsersPresence", listItemView: "listItemView", menu: "menu", options: "options", activeUser: "activeUser", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", emptyStateView: "emptyStateView", onSelect: "onSelect", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", usersStyle: "usersStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", onItemClick: "onItemClick", searchKeyword: "searchKeyword", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n</div>\n  <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n      [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n      [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n  </cometchat-list>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n          [userPresencePlacement]=\"userPresencePlacement\">\n          <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n              <ng-container  *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button  (cc-radio-button-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\"  (cc-checkbox-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatUsersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersComponent, selector: "cometchat-users", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", disableUsersPresence: "disableUsersPresence", listItemView: "listItemView", menu: "menu", options: "options", activeUser: "activeUser", hideSeparator: "hideSeparator", searchPlaceholder: "searchPlaceholder", hideError: "hideError", selectionMode: "selectionMode", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", emptyStateView: "emptyStateView", onSelect: "onSelect", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", usersStyle: "usersStyle", listItemStyle: "listItemStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", selectedUserPreviewStyle: "selectedUserPreviewStyle", showSelectedUsersPreview: "showSelectedUsersPreview", onItemClick: "onItemClick", searchKeyword: "searchKeyword", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState" }, viewQueries: [{ propertyName: "checkboxes", predicate: ["checkboxElement"], descendants: true, read: ElementRef }, { propertyName: "radios", predicate: ["radioElement"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\" (keydown)=\"onKeyDown($event)\" (keyup)=\"onKeyUp($event)\" tabindex=\"0\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n  </div>\n\n  <!-- Users List -->\n  <div class=\"cc-users__list\" [class.cc-users__list--with-selection]=\"getSelectedUsersCount() > 0\">\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n        [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n        [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n        [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n        [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n    </cometchat-list>\n  </div>\n\n  <!-- Selected Users Preview Section -->\n  <div class=\"cc-selected-users\" [style]=\"selectedUsersPreviewWrapper\" *ngIf=\"showSelectedUsersPreview && getSelectedUsersCount() > 0\">\n    <div class=\"cc-selected-users__list\">\n      <div class=\"cc-selected-user\" *ngFor=\"let user of getSelectedUsersArray(); trackBy: trackByUserId\" [style]=\"selectedUserPillStyle\">\n        <div class=\"cc-selected-user__avatar\">\n          <cometchat-avatar \n            [image]=\"user?.getAvatar() || ''\" \n            [name]=\"user?.getName()\" \n            [avatarStyle]=\"avatarStyle\">\n          </cometchat-avatar>\n        </div>\n        <div class=\"cc-selected-user__name\" [style]=\"getUserNameStyle()\">{{user?.getName()}}</div>\n        <div class=\"cc-selected-user__remove\" (click)=\"removeSelectedUser(user)\">\n          <cometchat-button \n            [iconURL]=\"'assets/close2x.svg'\" \n            [buttonStyle]=\"removeMemberButtonStyle\">\n          </cometchat-button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n          [userPresencePlacement]=\"userPresencePlacement\">\n          <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n              <ng-container  *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button [attr.data-uid]=\"user?.uid\" #radioElement (cc-radio-button-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox \n            [attr.data-uid]=\"user?.uid\" \n            #checkboxElement \n            [checkboxStyle]=\"checkboxStyle\"  \n            (cc-checkbox-changed)=\"onCheckboxChanged(user, $event)\"\n            (click)=\"onCheckboxClick(user, $event)\" \n            [checked]=\"isUserSelected(user)\">\n          </cometchat-checkbox>\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-selected-users{padding:12px;background:transparent;max-height:150px;overflow-x:hidden;overflow-y:auto}.cc-selected-users__list{display:flex;flex-wrap:wrap;gap:8px}.cc-selected-user{display:flex;align-items:center;border-radius:20px;padding:4px 8px 4px 4px;width:140px;animation:slideInUp .3s ease-out}.cc-selected-user__avatar{flex-shrink:0}.cc-selected-user__name{flex:1;margin:0 8px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-selected-user__remove{flex-shrink:0;cursor:pointer}.cc-selected-user__remove:hover{opacity:.7}.cc-users__list{flex:1;overflow:hidden}.cc-selected-users::-webkit-scrollbar{background:transparent;width:8px}.cc-selected-users::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-users__list--with-selection .cc-users__selection--multiple{position:relative}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], components: [{ type: CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { 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: CometChatUsersComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-users", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n\n</div>\n  <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n      [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n      [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n      [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n      [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n      [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n      [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n  </cometchat-list>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n          [userPresencePlacement]=\"userPresencePlacement\">\n          <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n              <ng-container  *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button  (cc-radio-button-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\"  (cc-checkbox-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\"></cometchat-checkbox>\n\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}\n"] }]
+            args: [{ selector: "cometchat-users", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-users\" [ngStyle]=\"userStyle()\" (keydown)=\"onKeyDown($event)\" (keyup)=\"onKeyUp($event)\" tabindex=\"0\">\n  <div class=\"cc-menus\" *ngIf=\"menu\">\n    <ng-container *ngTemplateOutlet=\"menu\">\n    </ng-container>\n  </div>\n\n  <!-- Users List -->\n  <div class=\"cc-users__list\" [class.cc-users__list--with-selection]=\"getSelectedUsersCount() > 0\">\n    <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\" [onSearch]=\"onSearch\"\n        [list]=\"usersList\" [searchText]=\"searchKeyword\" [searchPlaceholderText]=\"searchPlaceholder\"\n        [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\" [hideError]=\"hideError\" [title]=\"title\"\n        [sectionHeaderField]=\"sectionHeaderField\" [showSectionHeader]=\"showSectionHeader\"\n        [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n        [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n        [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n    </cometchat-list>\n  </div>\n\n  <!-- Selected Users Preview Section -->\n  <div class=\"cc-selected-users\" [style]=\"selectedUsersPreviewWrapper\" *ngIf=\"showSelectedUsersPreview && getSelectedUsersCount() > 0\">\n    <div class=\"cc-selected-users__list\">\n      <div class=\"cc-selected-user\" *ngFor=\"let user of getSelectedUsersArray(); trackBy: trackByUserId\" [style]=\"selectedUserPillStyle\">\n        <div class=\"cc-selected-user__avatar\">\n          <cometchat-avatar \n            [image]=\"user?.getAvatar() || ''\" \n            [name]=\"user?.getName()\" \n            [avatarStyle]=\"avatarStyle\">\n          </cometchat-avatar>\n        </div>\n        <div class=\"cc-selected-user__name\" [style]=\"getUserNameStyle()\">{{user?.getName()}}</div>\n        <div class=\"cc-selected-user__remove\" (click)=\"removeSelectedUser(user)\">\n          <cometchat-button \n            [iconURL]=\"'assets/close2x.svg'\" \n            [buttonStyle]=\"removeMemberButtonStyle\">\n          </cometchat-button>\n        </div>\n      </div>\n    </div>\n  </div>\n  <ng-template #listItem let-user>\n      <cometchat-list-item [title]=\"user?.name\" [avatarURL]=\"user?.avatar\" [avatarName]=\"user?.name\"\n          [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\" [statusIndicatorStyle]=\"getStatusIndicatorStyle(user)\"\n          [statusIndicatorColor]=\"getStatusIndicatorColor(user)\" [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(user)\" [isActive]=\"getActiveUser(user)\"\n          [userPresencePlacement]=\"userPresencePlacement\">\n          <div slot=\"subtitleView\" *ngIf=\"subtitleView\">\n              <ng-container  *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user }\">\n              </ng-container>\n          </div>\n\n          <div slot=\"menuView\" class=\"cc-users__options\" *ngIf=\"options\">\n              <cometchat-menu-list [data]=\"options(user)\">\n\n              </cometchat-menu-list>\n        </div>\n        <div slot=\"tailView\"  *ngIf=\"selectionMode != selectionmodeEnum.none\" class=\"cc-users__tail-view\">\n          <ng-container *ngTemplateOutlet=\"tailView\">\n          </ng-container>\n      </div>\n      <ng-template #tailView>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-users__selection--single\">\n          <cometchat-radio-button [attr.data-uid]=\"user?.uid\" #radioElement (cc-radio-button-changed)=\"addMembersToList(user,$event)\" [checked]=\"isUserSelected(user)\" ></cometchat-radio-button>\n\n        </div>\n        <div  *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-users__selection--multiple\">\n          <cometchat-checkbox \n            [attr.data-uid]=\"user?.uid\" \n            #checkboxElement \n            [checkboxStyle]=\"checkboxStyle\"  \n            (cc-checkbox-changed)=\"onCheckboxChanged(user, $event)\"\n            (click)=\"onCheckboxClick(user, $event)\" \n            [checked]=\"isUserSelected(user)\">\n          </cometchat-checkbox>\n        </div>\n      </ng-template>\n      </cometchat-list-item>\n\n  </ng-template>\n</div>\n", styles: [".cc-users{height:100%;width:100%;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden}.cc-menus{position:absolute;right:12px;padding:12px;cursor:pointer}.cc-selected-users{padding:12px;background:transparent;max-height:150px;overflow-x:hidden;overflow-y:auto}.cc-selected-users__list{display:flex;flex-wrap:wrap;gap:8px}.cc-selected-user{display:flex;align-items:center;border-radius:20px;padding:4px 8px 4px 4px;width:140px;animation:slideInUp .3s ease-out}.cc-selected-user__avatar{flex-shrink:0}.cc-selected-user__name{flex:1;margin:0 8px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cc-selected-user__remove{flex-shrink:0;cursor:pointer}.cc-selected-user__remove:hover{opacity:.7}.cc-users__list{flex:1;overflow:hidden}.cc-selected-users::-webkit-scrollbar{background:transparent;width:8px}.cc-selected-users::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-users__list--with-selection .cc-users__selection--multiple{position:relative}@keyframes slideInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { usersRequestBuilder: [{
                 type: Input
             }], searchRequestBuilder: [{
@@ -4554,6 +4744,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], avatarStyle: [{
                 type: Input
+            }], selectedUserPreviewStyle: [{
+                type: Input
+            }], showSelectedUsersPreview: [{
+                type: Input
             }], onItemClick: [{
                 type: Input
             }], searchKeyword: [{
@@ -4564,6 +4758,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], disableLoadingState: [{
                 type: Input
+            }], checkboxes: [{
+                type: ViewChildren,
+                args: ['checkboxElement', { read: ElementRef }]
+            }], radios: [{
+                type: ViewChildren,
+                args: ['radioElement', { read: ElementRef }]
             }] } });
 
 /**
@@ -4604,6 +4804,8 @@ class CometChatAddMembersComponent {
         this.titleAlignmentEnum = TitleAlignment;
         this.selectionmodeEnum = SelectionMode;
         this.addMembersStyle = {};
+        this.showSelectedMembersPreview = false;
+        this.selectedMemberPreviewStyle = {};
         /**
          * @deprecated This property is deprecated as of version 4.3.14. Use `statusIndicatorStyle` instead.
          */
@@ -4845,10 +5047,10 @@ class CometChatAddMembersComponent {
     }
 }
 CometChatAddMembersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatAddMembersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatAddMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: { usersRequestBuilder: "usersRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", hideError: "hideError", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", onBack: "onBack", onClose: "onClose", onSelect: "onSelect", buttonText: "buttonText", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", listItemStyle: "listItemStyle", showSectionHeader: "showSectionHeader", sectionHeaderField: "sectionHeaderField", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", onAddMembersButtonClick: "onAddMembersButtonClick", titleAlignment: "titleAlignment", addMembersStyle: "addMembersStyle", StatusIndicatorStyle: "StatusIndicatorStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle" }, ngImport: i0, template: "<div class=\"cc-add-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-back-button\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\"  (cc-button-clicked)=\"backClicked()\" *ngIf=\"showBackButton\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-add-members__wrapper\" [ngStyle]=\"addMembersStyles()\">\n   <div class=\"cc-users\">\n    <cometchat-users [searchPlaceholder]=\"searchPlaceholder\" [usersRequestBuilder]=\"usersRequestBuilder\"\n    [hideSearch]=\"hideSearch\"\n    [statusIndicatorStyle]=\"statusIndicatorStyle\"\n    [avatarStyle]=\"avatarStyle\"\n    [searchIconURL]=\"searchIconURL\"\n    [searchRequestBuilder]=\"searchRequestBuilder\"\n    [usersStyle]=\"usersStyle\"\n    [subtitleView]=\"subtitleView\"\n    [options]=\"options\"\n    [usersRequestBuilder]=\"usersRequestBuilder\"\n    [emptyStateView]=\"emptyStateView\"\n    [onSelect]=\" addRemoveUsers\"\n    [sectionHeaderField]=\"sectionHeaderField\"\n    [loadingIconURL]=\"loadingIconURL\"\n    [errorStateView]=\"errorStateView\"\n    [loadingStateView]=\"loadingStateView\"\n    [titleAlignment]=\"titleAlignment\"\n    [showSectionHeader]=\"showSectionHeader\"\n    [listItemView]=\"listItemView\"\n    [menu]=\"menu\"\n    [hideSeparator]=\"hideSeparator\"\n    [hideError]=\"hideError\"\n    [selectionMode]=\" selectionMode\"\n    [listItemStyle]=\"listItemStyle\"\n    [title]=\"title\"  >\n\n    </cometchat-users>\n   </div>\n    <div class=\"cc-add-members__buttons\">\n      <cometchat-button class=\"cc-add-members__buttons--add\" [text]=\"buttonText\" [buttonStyle]=\"addMemberButtonStyle\" (click)=\"addMembersToGroup()\" ></cometchat-button>\n\n    </div>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>", styles: [".cc-add-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-add-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-users{height:90%}.cc-add-members__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-add-members__buttons--add{height:42px;width:100%}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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", showSelectedMembersPreview: "showSelectedMembersPreview", selectedMemberPreviewStyle: "selectedMemberPreviewStyle", StatusIndicatorStyle: "StatusIndicatorStyle", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle" }, ngImport: i0, template: "<div class=\"cc-add-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-back-button\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\"  (cc-button-clicked)=\"backClicked()\" *ngIf=\"showBackButton\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-add-members__wrapper\" [ngStyle]=\"addMembersStyles()\">\n   <div class=\"cc-users\">\n    <cometchat-users [searchPlaceholder]=\"searchPlaceholder\" [usersRequestBuilder]=\"usersRequestBuilder\"\n    [hideSearch]=\"hideSearch\"\n    [statusIndicatorStyle]=\"statusIndicatorStyle\"\n    [avatarStyle]=\"avatarStyle\"\n    [searchIconURL]=\"searchIconURL\"\n    [searchRequestBuilder]=\"searchRequestBuilder\"\n    [usersStyle]=\"usersStyle\"\n    [subtitleView]=\"subtitleView\"\n    [options]=\"options\"\n    [usersRequestBuilder]=\"usersRequestBuilder\"\n    [emptyStateView]=\"emptyStateView\"\n    [onSelect]=\" addRemoveUsers\"\n    [sectionHeaderField]=\"sectionHeaderField\"\n    [loadingIconURL]=\"loadingIconURL\"\n    [errorStateView]=\"errorStateView\"\n    [loadingStateView]=\"loadingStateView\"\n    [titleAlignment]=\"titleAlignment\"\n    [showSectionHeader]=\"showSectionHeader\"\n    [listItemView]=\"listItemView\"\n    [menu]=\"menu\"\n    [hideSeparator]=\"hideSeparator\"\n    [hideError]=\"hideError\"\n    [selectionMode]=\" selectionMode\"\n    [listItemStyle]=\"listItemStyle\"\n    [title]=\"title\"  \n    [showSelectedUsersPreview]=\"showSelectedMembersPreview\"\n    [selectedUserPreviewStyle]=\"selectedMemberPreviewStyle\"\n    >\n\n    </cometchat-users>\n\n   </div>\n\n    <div class=\"cc-add-members__buttons\">\n      <cometchat-button [disabled]=\"!membersList || (membersList && membersList!.length <= 0)\" 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", "selectedUserPreviewStyle", "showSelectedUsersPreview", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatAddMembersComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-add-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-add-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-back-button\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\"  (cc-button-clicked)=\"backClicked()\" *ngIf=\"showBackButton\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-add-members__wrapper\" [ngStyle]=\"addMembersStyles()\">\n   <div class=\"cc-users\">\n    <cometchat-users [searchPlaceholder]=\"searchPlaceholder\" [usersRequestBuilder]=\"usersRequestBuilder\"\n    [hideSearch]=\"hideSearch\"\n    [statusIndicatorStyle]=\"statusIndicatorStyle\"\n    [avatarStyle]=\"avatarStyle\"\n    [searchIconURL]=\"searchIconURL\"\n    [searchRequestBuilder]=\"searchRequestBuilder\"\n    [usersStyle]=\"usersStyle\"\n    [subtitleView]=\"subtitleView\"\n    [options]=\"options\"\n    [usersRequestBuilder]=\"usersRequestBuilder\"\n    [emptyStateView]=\"emptyStateView\"\n    [onSelect]=\" addRemoveUsers\"\n    [sectionHeaderField]=\"sectionHeaderField\"\n    [loadingIconURL]=\"loadingIconURL\"\n    [errorStateView]=\"errorStateView\"\n    [loadingStateView]=\"loadingStateView\"\n    [titleAlignment]=\"titleAlignment\"\n    [showSectionHeader]=\"showSectionHeader\"\n    [listItemView]=\"listItemView\"\n    [menu]=\"menu\"\n    [hideSeparator]=\"hideSeparator\"\n    [hideError]=\"hideError\"\n    [selectionMode]=\" selectionMode\"\n    [listItemStyle]=\"listItemStyle\"\n    [title]=\"title\"  >\n\n    </cometchat-users>\n   </div>\n    <div class=\"cc-add-members__buttons\">\n      <cometchat-button class=\"cc-add-members__buttons--add\" [text]=\"buttonText\" [buttonStyle]=\"addMemberButtonStyle\" (click)=\"addMembersToGroup()\" ></cometchat-button>\n\n    </div>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\" (cc-button-clicked)=\"closeClicked()\">\n\n    </cometchat-button>\n  </div>\n</div>", styles: [".cc-add-members{display:flex;height:100%;width:100%;overflow:hidden}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-add-members__wrapper{height:100%;width:100%;padding:8px}.cc-close-button{position:absolute;right:8px;padding:12px 8px 8px}.cc-users{height:90%}.cc-add-members__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-add-members__buttons--add{height:42px;width:100%}\n"] }]
+            args: [{ selector: "cometchat-add-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-add-members\" [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-back-button\">\n    <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\"  (cc-button-clicked)=\"backClicked()\" *ngIf=\"showBackButton\">\n\n    </cometchat-button>\n  </div>\n  <div class=\"cc-add-members__wrapper\" [ngStyle]=\"addMembersStyles()\">\n   <div class=\"cc-users\">\n    <cometchat-users [searchPlaceholder]=\"searchPlaceholder\" [usersRequestBuilder]=\"usersRequestBuilder\"\n    [hideSearch]=\"hideSearch\"\n    [statusIndicatorStyle]=\"statusIndicatorStyle\"\n    [avatarStyle]=\"avatarStyle\"\n    [searchIconURL]=\"searchIconURL\"\n    [searchRequestBuilder]=\"searchRequestBuilder\"\n    [usersStyle]=\"usersStyle\"\n    [subtitleView]=\"subtitleView\"\n    [options]=\"options\"\n    [usersRequestBuilder]=\"usersRequestBuilder\"\n    [emptyStateView]=\"emptyStateView\"\n    [onSelect]=\" addRemoveUsers\"\n    [sectionHeaderField]=\"sectionHeaderField\"\n    [loadingIconURL]=\"loadingIconURL\"\n    [errorStateView]=\"errorStateView\"\n    [loadingStateView]=\"loadingStateView\"\n    [titleAlignment]=\"titleAlignment\"\n    [showSectionHeader]=\"showSectionHeader\"\n    [listItemView]=\"listItemView\"\n    [menu]=\"menu\"\n    [hideSeparator]=\"hideSeparator\"\n    [hideError]=\"hideError\"\n    [selectionMode]=\" selectionMode\"\n    [listItemStyle]=\"listItemStyle\"\n    [title]=\"title\"  \n    [showSelectedUsersPreview]=\"showSelectedMembersPreview\"\n    [selectedUserPreviewStyle]=\"selectedMemberPreviewStyle\"\n    >\n\n    </cometchat-users>\n\n   </div>\n\n    <div class=\"cc-add-members__buttons\">\n      <cometchat-button [disabled]=\"!membersList || (membersList && membersList!.length <= 0)\" 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: [{
@@ -4919,6 +5121,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], addMembersStyle: [{
                 type: Input
+            }], showSelectedMembersPreview: [{
+                type: Input
+            }], selectedMemberPreviewStyle: [{
+                type: Input
             }], StatusIndicatorStyle: [{
                 type: Input
             }], statusIndicatorStyle: [{
@@ -5179,7 +5385,8 @@ class CometChatMessageHeaderComponent {
             titleColor: this.themeService.theme.palette.getAccent(),
             border: "none",
             separatorColor: "",
-            hoverBackground: "transparent"
+            hoverBackground: "transparent",
+            cursor: 'default'
         });
         this.listItemStyle = Object.assign(Object.assign({}, defaultStyle), this.listItemStyle);
     }
@@ -13757,7 +13964,7 @@ class CometChatUserMemberWrapperComponent {
     }
 }
 CometChatUserMemberWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUserMemberWrapperComponent, deps: [{ token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatUserMemberWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUserMemberWrapperComponent, selector: "cometchat-user-member-wrapper", inputs: { userMemberListType: "userMemberListType", onItemClick: "onItemClick", listItemView: "listItemView", avatarStyle: "avatarStyle", statusIndicatorStyle: "statusIndicatorStyle", searchKeyword: "searchKeyword", group: "group", subtitleView: "subtitleView", usersRequestBuilder: "usersRequestBuilder", disableUsersPresence: "disableUsersPresence", userPresencePlacement: "userPresencePlacement", hideSeperator: "hideSeperator", loadingStateView: "loadingStateView", onEmpty: "onEmpty", onError: "onError", groupMemberRequestBuilder: "groupMemberRequestBuilder", loadingIconUrl: "loadingIconUrl", disableLoadingState: "disableLoadingState" }, ngImport: i0, template: "<div class=\"cc__wrapper\">\n  <cometchat-users *ngIf=\"userMemberListType == userMemberListTypeEnum.users\" [title]=\"''\" [hideSearch]=true\n  [hideSeparator]=hideSeperator [showSectionHeader]=false [onItemClick]=\"onItemClick\" [avatarStyle]=\"avatarStyle\"\n  [statusIndicatorStyle]=\"statusIndicatorStyle\" [searchKeyword]=\"searchKeyword\" [listItemView]=\"listItemView\"\n  [usersRequestBuilder]=\"usersRequestBuilder\" [subtitleView]=\"subtitleView\" [loadingStateView]=\"loadingStateView\"\n  [onEmpty]=\"onEmpty\" [loadingIconURL]=\"loadingIconUrl\" [userPresencePlacement]=\"userPresencePlacement\"\n  [disableLoadingState]=\"disableLoadingState\" [onError]=\"onError\" [listItemStyle]=\"listItemStyle\" [usersStyle]=\"getUsersStyle()\">\n\n</cometchat-users>\n\n<cometchat-group-members *ngIf=\"userMemberListType == userMemberListTypeEnum.groupmembers\" [group]=\"group\" [title]=\"''\"\n  [hideSearch]=true [showBackButton]=hideSeperator [hideSeparator]=false\n  [groupMemberRequestBuilder]=\"groupMemberRequestBuilder\" [onItemClick]=\"onItemClick\" [avatarStyle]=\"avatarStyle\"\n  [statusIndicatorStyle]=\"statusIndicatorStyle\" [listItemView]=\"listItemView\" [subtitleView]=\"subtitleView\"\n  [options]=null [tailView]=emptyTailView [closeButtonIconURL]=undefined [searchKeyword]=\"searchKeyword\"\n  [onEmpty]=\"onEmpty\" [userPresencePlacement]=\"userPresencePlacement\"\n  [disableLoadingState]=\"disableLoadingState\" [onError]=\"onError\" [listItemStyle]=\"listItemStyle\" [groupMembersStyle]=\"getGroupMemebersStyle()\">\n</cometchat-group-members>\n\n<ng-template #emptyTailView></ng-template>\n</div>", styles: ["*{height:100%;width:100%;margin:0;padding:0}.cc__wrapper{height:100%;width:100%;overflow:hidden}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+CometChatUserMemberWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUserMemberWrapperComponent, selector: "cometchat-user-member-wrapper", inputs: { userMemberListType: "userMemberListType", onItemClick: "onItemClick", listItemView: "listItemView", avatarStyle: "avatarStyle", statusIndicatorStyle: "statusIndicatorStyle", searchKeyword: "searchKeyword", group: "group", subtitleView: "subtitleView", usersRequestBuilder: "usersRequestBuilder", disableUsersPresence: "disableUsersPresence", userPresencePlacement: "userPresencePlacement", hideSeperator: "hideSeperator", loadingStateView: "loadingStateView", onEmpty: "onEmpty", onError: "onError", groupMemberRequestBuilder: "groupMemberRequestBuilder", loadingIconUrl: "loadingIconUrl", disableLoadingState: "disableLoadingState" }, ngImport: i0, template: "<div class=\"cc__wrapper\">\n  <cometchat-users *ngIf=\"userMemberListType == userMemberListTypeEnum.users\" [title]=\"''\" [hideSearch]=true\n  [hideSeparator]=hideSeperator [showSectionHeader]=false [onItemClick]=\"onItemClick\" [avatarStyle]=\"avatarStyle\"\n  [statusIndicatorStyle]=\"statusIndicatorStyle\" [searchKeyword]=\"searchKeyword\" [listItemView]=\"listItemView\"\n  [usersRequestBuilder]=\"usersRequestBuilder\" [subtitleView]=\"subtitleView\" [loadingStateView]=\"loadingStateView\"\n  [onEmpty]=\"onEmpty\" [loadingIconURL]=\"loadingIconUrl\" [userPresencePlacement]=\"userPresencePlacement\"\n  [disableLoadingState]=\"disableLoadingState\" [onError]=\"onError\" [listItemStyle]=\"listItemStyle\" [usersStyle]=\"getUsersStyle()\">\n\n</cometchat-users>\n\n<cometchat-group-members *ngIf=\"userMemberListType == userMemberListTypeEnum.groupmembers\" [group]=\"group\" [title]=\"''\"\n  [hideSearch]=true [showBackButton]=hideSeperator [hideSeparator]=false\n  [groupMemberRequestBuilder]=\"groupMemberRequestBuilder\" [onItemClick]=\"onItemClick\" [avatarStyle]=\"avatarStyle\"\n  [statusIndicatorStyle]=\"statusIndicatorStyle\" [listItemView]=\"listItemView\" [subtitleView]=\"subtitleView\"\n  [options]=null [tailView]=emptyTailView [closeButtonIconURL]=undefined [searchKeyword]=\"searchKeyword\"\n  [onEmpty]=\"onEmpty\" [userPresencePlacement]=\"userPresencePlacement\"\n  [disableLoadingState]=\"disableLoadingState\" [onError]=\"onError\" [listItemStyle]=\"listItemStyle\" [groupMembersStyle]=\"getGroupMemebersStyle()\">\n</cometchat-group-members>\n\n<ng-template #emptyTailView></ng-template>\n</div>", styles: ["*{height:100%;width:100%;margin:0;padding:0}.cc__wrapper{height:100%;width:100%;overflow:hidden}\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", "selectedUserPreviewStyle", "showSelectedUsersPreview", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUserMemberWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cometchat-user-member-wrapper', template: "<div class=\"cc__wrapper\">\n  <cometchat-users *ngIf=\"userMemberListType == userMemberListTypeEnum.users\" [title]=\"''\" [hideSearch]=true\n  [hideSeparator]=hideSeperator [showSectionHeader]=false [onItemClick]=\"onItemClick\" [avatarStyle]=\"avatarStyle\"\n  [statusIndicatorStyle]=\"statusIndicatorStyle\" [searchKeyword]=\"searchKeyword\" [listItemView]=\"listItemView\"\n  [usersRequestBuilder]=\"usersRequestBuilder\" [subtitleView]=\"subtitleView\" [loadingStateView]=\"loadingStateView\"\n  [onEmpty]=\"onEmpty\" [loadingIconURL]=\"loadingIconUrl\" [userPresencePlacement]=\"userPresencePlacement\"\n  [disableLoadingState]=\"disableLoadingState\" [onError]=\"onError\" [listItemStyle]=\"listItemStyle\" [usersStyle]=\"getUsersStyle()\">\n\n</cometchat-users>\n\n<cometchat-group-members *ngIf=\"userMemberListType == userMemberListTypeEnum.groupmembers\" [group]=\"group\" [title]=\"''\"\n  [hideSearch]=true [showBackButton]=hideSeperator [hideSeparator]=false\n  [groupMemberRequestBuilder]=\"groupMemberRequestBuilder\" [onItemClick]=\"onItemClick\" [avatarStyle]=\"avatarStyle\"\n  [statusIndicatorStyle]=\"statusIndicatorStyle\" [listItemView]=\"listItemView\" [subtitleView]=\"subtitleView\"\n  [options]=null [tailView]=emptyTailView [closeButtonIconURL]=undefined [searchKeyword]=\"searchKeyword\"\n  [onEmpty]=\"onEmpty\" [userPresencePlacement]=\"userPresencePlacement\"\n  [disableLoadingState]=\"disableLoadingState\" [onError]=\"onError\" [listItemStyle]=\"listItemStyle\" [groupMembersStyle]=\"getGroupMemebersStyle()\">\n</cometchat-group-members>\n\n<ng-template #emptyTailView></ng-template>\n</div>", styles: ["*{height:100%;width:100%;margin:0;padding:0}.cc__wrapper{height:100%;width:100%;overflow:hidden}\n"] }]
@@ -17178,10 +17385,10 @@ class CometChatDetailsComponent {
     }
 }
 CometChatDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatDetailsComponent, selector: "cometchat-details", inputs: { group: "group", user: "user", title: "title", closeButtonIconURL: "closeButtonIconURL", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", data: "data", disableUsersPresence: "disableUsersPresence", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", onError: "onError", onClose: "onClose", leaveGroupConfirmButtonText: "leaveGroupConfirmButtonText", leaveGroupCancelButtonText: "leaveGroupCancelButtonText", leaveGroupDialogMessage: "leaveGroupDialogMessage", leaveGroupDialogStyle: "leaveGroupDialogStyle", deleteGroupConfirmButtonText: "deleteGroupConfirmButtonText", deleteGroupDialogMessage: "deleteGroupDialogMessage", deleteGroupCancelButtonText: "deleteGroupCancelButtonText", deleteGroupDialogStyle: "deleteGroupDialogStyle", transferOwnershipConfirmButtonText: "transferOwnershipConfirmButtonText", transferOwnershipDialogMessage: "transferOwnershipDialogMessage", transferOwnershipCancelButtonText: "transferOwnershipCancelButtonText", transferOwnershipDialogStyle: "transferOwnershipDialogStyle", addMembersConfiguration: "addMembersConfiguration", bannedMembersConfiguration: "bannedMembersConfiguration", groupMembersConfiguration: "groupMembersConfiguration", transferOwnershipConfiguration: "transferOwnershipConfiguration", statusIndicatorStyle: "statusIndicatorStyle", backdropStyle: "backdropStyle", avatarStyle: "avatarStyle", detailsStyle: "detailsStyle", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"onBackForAddMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"], components: [{ type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onBack", "onClose", "onSelect", "buttonText", "group", "emptyStateView", "errorStateView", "loadingIconURL", "listItemStyle", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "onAddMembersButtonClick", "titleAlignment", "addMembersStyle", "StatusIndicatorStyle", "statusIndicatorStyle", "avatarStyle"] }, { type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: ["bannedMembersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "onBack", "onClose", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "unbanIconURL", "statusIndicatorStyle", "avatarStyle", "bannedMembersStyle", "listItemStyle"] }, { type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }, { type: CometChatTransferOwnershipComponent, selector: "cometchat-transfer-ownership", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "options", "closeButtonIconURL", "hideSeparator", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onClose", "onTransferOwnership", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "statusIndicatorStyle", "transferOwnershipStyle", "transferButtonText", "cancelButtonText", "avatarStyle", "groupMembersStyle", "listItemStyle", "titleAlignment"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatDetailsComponent, selector: "cometchat-details", inputs: { group: "group", user: "user", title: "title", closeButtonIconURL: "closeButtonIconURL", hideProfile: "hideProfile", subtitleView: "subtitleView", customProfileView: "customProfileView", data: "data", disableUsersPresence: "disableUsersPresence", privateGroupIcon: "privateGroupIcon", protectedGroupIcon: "protectedGroupIcon", passwordGroupIcon: "passwordGroupIcon", onError: "onError", onClose: "onClose", leaveGroupConfirmButtonText: "leaveGroupConfirmButtonText", leaveGroupCancelButtonText: "leaveGroupCancelButtonText", leaveGroupDialogMessage: "leaveGroupDialogMessage", leaveGroupDialogStyle: "leaveGroupDialogStyle", deleteGroupConfirmButtonText: "deleteGroupConfirmButtonText", deleteGroupDialogMessage: "deleteGroupDialogMessage", deleteGroupCancelButtonText: "deleteGroupCancelButtonText", deleteGroupDialogStyle: "deleteGroupDialogStyle", transferOwnershipConfirmButtonText: "transferOwnershipConfirmButtonText", transferOwnershipDialogMessage: "transferOwnershipDialogMessage", transferOwnershipCancelButtonText: "transferOwnershipCancelButtonText", transferOwnershipDialogStyle: "transferOwnershipDialogStyle", addMembersConfiguration: "addMembersConfiguration", bannedMembersConfiguration: "bannedMembersConfiguration", groupMembersConfiguration: "groupMembersConfiguration", transferOwnershipConfiguration: "transferOwnershipConfiguration", statusIndicatorStyle: "statusIndicatorStyle", backdropStyle: "backdropStyle", avatarStyle: "avatarStyle", detailsStyle: "detailsStyle", listItemStyle: "listItemStyle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"onBackForAddMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\"\n    [showSelectedMembersPreview]=\"addMembersConfiguration!.showSelectedMembersPreview\"\n    [selectedMemberPreviewStyle]=\"addMembersConfiguration!.selectedMemberPreviewStyle\"\n    >\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [listItemView]=\"groupMembersConfiguration?.listItemView!\"\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"], components: [{ type: CometChatAddMembersComponent, selector: "cometchat-add-members", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onBack", "onClose", "onSelect", "buttonText", "group", "emptyStateView", "errorStateView", "loadingIconURL", "listItemStyle", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "onAddMembersButtonClick", "titleAlignment", "addMembersStyle", "showSelectedMembersPreview", "selectedMemberPreviewStyle", "StatusIndicatorStyle", "statusIndicatorStyle", "avatarStyle"] }, { type: CometChatBannedMembersComponent, selector: "cometchat-banned-members", inputs: ["bannedMembersRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "onBack", "onClose", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "unbanIconURL", "statusIndicatorStyle", "avatarStyle", "bannedMembersStyle", "listItemStyle"] }, { type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "tailView", "disableUsersPresence", "menu", "options", "backButtonIconURL", "closeButtonIconURL", "showBackButton", "hideSeparator", "selectionMode", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "backdropStyle", "onBack", "onClose", "onSelect", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "dropdownIconURL", "statusIndicatorStyle", "avatarStyle", "groupMembersStyle", "groupScopeStyle", "listItemStyle", "onItemClick", "onEmpty", "userPresencePlacement", "disableLoadingState", "searchKeyword"] }, { type: CometChatTransferOwnershipComponent, selector: "cometchat-transfer-ownership", inputs: ["groupMemberRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "disableUsersPresence", "options", "closeButtonIconURL", "hideSeparator", "searchPlaceholder", "searchIconURL", "hideSearch", "title", "onError", "onClose", "onTransferOwnership", "group", "emptyStateView", "errorStateView", "loadingIconURL", "loadingStateView", "emptyStateText", "errorStateText", "statusIndicatorStyle", "transferOwnershipStyle", "transferButtonText", "cancelButtonText", "avatarStyle", "groupMembersStyle", "listItemStyle", "titleAlignment"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "cometchat-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"onBackForAddMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\">\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"] }]
+            args: [{ selector: "cometchat-details", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-details__wrapper\" *ngIf=\"user || group\"\n  [ngStyle]=\"wrapperStyle()\">\n  <div class=\"cc-details__header\">\n    <cometchat-label [text]=\"title\"\n      [labelStyle]=\"getTitleStyle()\"></cometchat-label>\n    <cometchat-button [iconURL]=\"closeButtonIconURL\"\n      class=\"cc-details__close-button\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"onCloseDetails()\"></cometchat-button>\n  </div>\n  <div class=\"cc-details\" [ngStyle]=\"marginStyle()\">\n    <div class=\"cc-details__profile\" *ngIf=\"!hideProfile\">\n      <cometchat-list-item *ngIf=\"!customProfileView;else listitem\"\n        [avatarName]=\"user?.getName() ?? this.group?.getName()\"\n        [avatarURL]=\"this.user?.getAvatar() ?? this.group?.getIcon()\"\n        [listItemStyle]=\"listItemStyle\"\n        [statusIndicatorColor]=\"checkStatusType()\"\n        [statusIndicatorIcon]=\"checkGroupType()\"\n        [title]=\"this.user?.getName() ?? this.group?.getName()\"\n        [hideSeparator]=\"false\" [statusIndicatorStyle]=\"statusIndicatorStyle\"\n        [avatarStyle]=\"avatarStyle\">\n        <div slot=\"subtitleView\">\n          <div *ngIf=\"!subtitleView; else subtitle\">\n            <cometchat-label [text]=\"subtitleText\"\n              [labelStyle]=\"subtitleStyle()\">\n            </cometchat-label>\n          </div>\n          <ng-template #subtitle>\n            <ng-container\n              *ngTemplateOutlet=\"subtitleView;context:{ $implicit: user ?? group }\">\n            </ng-container>\n          </ng-template>\n        </div>\n      </cometchat-list-item>\n    </div>\n    <div class=\"cc-details__section-list\"\n      *ngIf=\"defaultTemplate && defaultTemplate.length > 0\">\n      <div class=\"cc-details__section\" *ngFor=\"let item of defaultTemplate\">\n        <div class=\"cc-details__section-separator\" *ngIf=\"item.title\">\n          <cometchat-label [text]=\"item.title\"\n            [labelStyle]=\"getSectionHeaderStyle(item)\"></cometchat-label>\n        </div>\n        <div class=\"cc-details__options-wrapper\"\n          *ngIf=\"getTemplateOptions(item)\">\n          <div class=\"cc-details__options\"\n            *ngFor=\"let option of getTemplateOptions(item)\">\n            <div class=\"cc-details__option\"\n              *ngIf=\"!getCustomOptionView(option);else customView\"\n              (click)=\"onOptionClick(option)\">\n              <div class=\"cc-details__option-title\">\n                <cometchat-button [text]=\"option.title\"\n                  [buttonStyle]=\"getButtonStyle(option)\"></cometchat-button>\n                <div class=\"cc-details__option-tail\" *ngIf=\"option?.tail\">\n                  <ng-container *ngTemplateOutlet=\"option?.tail\"></ng-container>\n                </div>\n              </div>\n              <cometchat-divider\n                [dividerStyle]=\"dividerStyle\"></cometchat-divider>\n            </div>\n            <ng-template #customView>\n              <ng-container *ngTemplateOutlet=\"getCustomOptionView(option)\">\n              </ng-container>\n            </ng-template>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #listitem>\n  <ng-container *ngTemplateOutlet=\"customProfileView\">\n  </ng-container>\n</ng-template>\n<div class=\"cc-details__view\" *ngIf=\"openAddMembersPage\">\n  <cometchat-add-members\n    [titleAlignment]=\"addMembersConfiguration?.titleAlignment!\"\n    [listItemStyle]=\"addMembersConfiguration?.listItemStyle!\"\n    [addMembersStyle]=\"addMembersConfiguration?.addMembersStyle!\"\n    [avatarStyle]=\"addMembersConfiguration?.avatarStyle!\"\n    [statusIndicatorStyle]=\"addMembersConfiguration?.statusIndicatorStyle!\"\n    [loadingStateView]=\"addMembersConfiguration?.loadingStateView!\"\n    [loadingIconURL]=\"addMembersConfiguration?.loadingIconURL!\"\n    [errorStateView]=\"addMembersConfiguration?.errorStateView\"\n    [emptyStateView]=\"addMembersConfiguration?.emptyStateView\"\n    [onSelect]=\"addMembersConfiguration?.onSelect!\"\n    [onError]=\"addMembersConfiguration?.onError!\"\n    [hideError]=\"addMembersConfiguration?.hideError!\"\n    [hideSearch]=\"addMembersConfiguration?.hideSearch!\"\n    [searchIconURL]=\"addMembersConfiguration?.searchIconURL!\"\n    [selectionMode]=\"addMembersConfiguration?.selectionMode!\"\n    [hideSeparator]=\"addMembersConfiguration?.hideSeparator!\"\n    [showBackButton]=\"addMembersConfiguration?.showBackButton!\"\n    [showSectionHeader]=\"addMembersConfiguration?.showSectionHeader!\"\n    [onAddMembersButtonClick]=\"addMembersConfiguration?.onAddMembersButtonClick!\"\n    [usersConfiguration]=\"addMembersConfiguration?.usersConfiguration\"\n    [backButtonIconURL]=\"addMembersConfiguration?.backButtonIconURL!\"\n    [sectionHeaderField]=\"addMembersConfiguration?.sectionHeaderField!\"\n    [closeButtonIconURL]=\"addMembersConfiguration?.closeButtonIconURL!\"\n    [options]=\"addMembersConfiguration?.options!\"\n    [menu]=\"addMembersConfiguration?.menu\"\n    [disableUsersPresence]=\"addMembersConfiguration?.disableUsersPresence!\"\n    [subtitleView]=\"addMembersConfiguration?.subtitleView\" [group]=\"group\"\n    [selectionMode]=\"selectionmodeEnum\"\n    [onClose]=\"addMembersConfiguration?.onClose || onCloseDetails\"\n    [onBack]=\"onBackForAddMembers\"\n    [usersRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [searchRequestBuilder]=\"addMembersConfiguration?.usersRequestBuilder!\"\n    [listItemView]=\"addMembersConfiguration?.listItemView\"\n    [showSelectedMembersPreview]=\"addMembersConfiguration!.showSelectedMembersPreview\"\n    [selectedMemberPreviewStyle]=\"addMembersConfiguration!.selectedMemberPreviewStyle\"\n    >\n  </cometchat-add-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openBannedMembersPage\">\n  <cometchat-banned-members\n    [listItemView]=\"bannedMembersConfiguration?.listItemView\"\n    [bannedMembersRequestBuilder]=\"bannedMembersConfiguration?.bannedMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"bannedMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"bannedMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"bannedMembersConfiguration.listItemStyle\"\n    [bannedMembersStyle]=\"bannedMembersConfiguration.bannedMembersStyle\"\n    [avatarStyle]=\"bannedMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"bannedMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"bannedMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"bannedMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"bannedMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"bannedMembersConfiguration.emptyStateView\"\n    [onSelect]=\"bannedMembersConfiguration.onSelect\"\n    [onError]=\"bannedMembersConfiguration.onError\"\n    [hideError]=\"bannedMembersConfiguration.hideError\"\n    [hideSearch]=\"bannedMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"bannedMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"bannedMembersConfiguration.selectionMode\"\n    [hideSeparator]=\"bannedMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"bannedMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"bannedMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"bannedMembersConfiguration.closeButtonIconURL\"\n    [options]=\"bannedMembersConfiguration.options\"\n    [menu]=\"bannedMembersConfiguration.menu\"\n    [disableUsersPresence]=\"bannedMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"bannedMembersConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"onCloseDetails\"\n    [onBack]=\"bannedMembersConfiguration.onBack || bannedMembers\">\n  </cometchat-banned-members>\n</div>\n<div class=\"cc-details__view\" *ngIf=\"openViewMembersPage\">\n  <cometchat-group-members\n    [listItemView]=\"groupMembersConfiguration?.listItemView!\"\n    [groupMembersRequestBuilder]=\"groupMembersConfiguration?.groupMembersRequestBuilder!\"\n    [searchRequestBuilder]=\"groupMembersConfiguration?.searchRequestBuilder!\"\n    [titleAlignment]=\"groupMembersConfiguration.titleAlignment\"\n    [listItemStyle]=\"groupMembersConfiguration.listItemStyle\"\n    [groupMembersStyle]=\"groupMembersConfiguration.groupMembersStyle\"\n    [avatarStyle]=\"groupMembersConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"groupMembersConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"groupMembersConfiguration.loadingStateView\"\n    [loadingIconURL]=\"groupMembersConfiguration.loadingIconURL\"\n    [errorStateView]=\"groupMembersConfiguration.errorStateView\"\n    [emptyStateView]=\"groupMembersConfiguration.emptyStateView\"\n    [onSelect]=\"groupMembersConfiguration.onSelect\"\n    [onError]=\"groupMembersConfiguration.onError\"\n    [hideError]=\"groupMembersConfiguration.hideError\"\n    [hideSearch]=\"groupMembersConfiguration.hideSearch\"\n    [searchIconURL]=\"groupMembersConfiguration.searchIconURL\"\n    [selectionMode]=\"groupMembersConfiguration.selectionMode\"\n    [backdropStyle]=\"groupMembersConfiguration.backdropStyle\"\n    [hideSeparator]=\"groupMembersConfiguration.hideSeparator\"\n    [showBackButton]=\"groupMembersConfiguration.showBackButton\"\n    [backButtonIconURL]=\"groupMembersConfiguration.backButtonIconURL\"\n    [closeButtonIconURL]=\"groupMembersConfiguration.closeButtonIconURL\"\n    [options]=\"groupMembersConfiguration.options\"\n    [menu]=\"groupMembersConfiguration.menu\"\n    [disableUsersPresence]=\"groupMembersConfiguration.disableUsersPresence\"\n    [subtitleView]=\"groupMembersConfiguration.subtitleView\"\n    [groupScopeStyle]=\"groupMembersConfiguration.groupScopeStyle\"\n    [group]=\"group\"\n    [onClose]=\" groupMembersConfiguration.onClose || onCloseDetails\"\n    [onBack]=\"groupMembersConfiguration.onBack || viewMembers\">\n  </cometchat-group-members>\n</div>\n\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"confirmLeaveGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\" [messageText]=\"leaveGroupDialogMessage\"\n    [cancelButtonText]=\"leaveGroupCancelButtonText\"\n    [confirmButtonText]=\"leaveGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"onLeaveClick()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"leaveGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"showTransferDialog\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"transferOwnershipDialogMessage\"\n    [cancelButtonText]=\"transferOwnershipCancelButtonText\"\n    [confirmButtonText]=\"transferOwnershipConfirmButtonText\"\n    (cc-confirm-clicked)=\"onTransferClick()\"\n    (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"transferOwnershipDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\"\n  *ngIf=\"openTransferOwnershipModal\">\n  <cometchat-transfer-ownership\n    [groupMembersRequestBuilder]=\"transferOwnershipConfiguration?.groupMembersRequestBuilder\"\n    [transferOwnershipStyle]=\"transferOwnershipConfiguration.transferOwnershipStyle\"\n    [onTransferOwnership]=\"transferOwnershipConfiguration.onTransferOwnership\"\n    [titleAlignment]=\"transferOwnershipConfiguration.titleAlignment\"\n    [listItemStyle]=\"transferOwnershipConfiguration.listItemStyle\"\n    [avatarStyle]=\"transferOwnershipConfiguration.avatarStyle\"\n    [statusIndicatorStyle]=\"transferOwnershipConfiguration.statusIndicatorStyle\"\n    [loadingStateView]=\"transferOwnershipConfiguration.loadingStateView\"\n    [loadingIconURL]=\"transferOwnershipConfiguration.loadingIconURL\"\n    [errorStateView]=\"transferOwnershipConfiguration.errorStateView\"\n    [emptyStateView]=\"transferOwnershipConfiguration.emptyStateView\"\n    [onError]=\"transferOwnershipConfiguration.onError\"\n    [hideSearch]=\"transferOwnershipConfiguration.hideSearch\"\n    [searchIconURL]=\"transferOwnershipConfiguration.searchIconURL\"\n    [hideSeparator]=\"transferOwnershipConfiguration.hideSeparator\"\n    [closeButtonIconURL]=\"transferOwnershipConfiguration.closeButtonIconURL\"\n    [options]=\"transferOwnershipConfiguration.options\"\n    [disableUsersPresence]=\"transferOwnershipConfiguration.disableUsersPresence\"\n    [subtitleView]=\"transferOwnershipConfiguration.subtitleView\" [group]=\"group\"\n    [onClose]=\"transferOwnershipConfiguration.onClose || openTransferOwnership\">\n  </cometchat-transfer-ownership>\n</cometchat-backdrop>\n<cometchat-backdrop [backdropStyle]=\"backdropStyle\" *ngIf=\"deleteGroupModal\">\n  <cometchat-confirm-dialog [title]=\"''\"\n    [messageText]=\"deleteGroupDialogMessage\"\n    [cancelButtonText]=\"deleteGroupCancelButtonText\"\n    [confirmButtonText]=\"deleteGroupConfirmButtonText\"\n    (cc-confirm-clicked)=\"deleteGroup()\" (cc-cancel-clicked)=\"onCancelClick()\"\n    [confirmDialogStyle]=\"deleteGroupDialogStyle\">\n  </cometchat-confirm-dialog>\n</cometchat-backdrop>\n", styles: ["*{box-sizing:border-box;margin:0;padding:0}.cc-details__wrapper{padding:8px;border-radius:5px;height:100%;overflow:hidden}.cc-details__profile{margin-bottom:50px;height:8%}.cc-details__section-list{height:84%;width:100%;overflow-y:auto;overflow-x:hidden}.cc-details__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.cc-details__close-button{position:absolute;right:20px}.cc-details__section{margin-bottom:32px}.cc-details__section-separator{margin-bottom:16px;padding-left:6px;height:5%}.cc-details__options-wrapper{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}.cc-details__option{display:flex;flex-direction:column;justify-content:space-evenly;min-height:50px}.cc-details__option-title{padding-bottom:12px;display:flex;align-items:center;justify-content:space-between}.cc-details__view{position:absolute;top:0;left:0;height:100%;width:100%;max-height:100%;overflow-y:auto;overflow-x:hidden;max-width:100%;z-index:1}.cc-details__section-list::-webkit-scrollbar{background:transparent;width:8px}.cc-details__section-list::-webkit-scrollbar-thumb{background:#e8e5e5;border-radius:8px}.cc-details__leavedialog,.cc-details__transferownership{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:-moz-fit-content;height:fit-content;width:100%;z-index:2}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: CometChatThemeService }]; }, propDecorators: { group: [{
                 type: Input
             }], user: [{
@@ -18694,7 +18901,7 @@ class CometChatContactsComponent {
     }
 }
 CometChatContactsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatContactsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatContactsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatContactsComponent, selector: "cometchat-contacts", inputs: { title: "title", usersTabTitle: "usersTabTitle", groupsTabTitle: "groupsTabTitle", usersConfiguration: "usersConfiguration", groupsConfiguration: "groupsConfiguration", onSubmitButtonClick: "onSubmitButtonClick", closeIconURL: "closeIconURL", contactsStyle: "contactsStyle", selectionMode: "selectionMode", onClose: "onClose", onItemClick: "onItemClick", tabVisibility: "tabVisibility", selectionLimit: "selectionLimit", tabs: "tabs", hideSubmitButton: "hideSubmitButton", submitButtonText: "submitButtonText" }, viewQueries: [{ propertyName: "usersRef", first: true, predicate: ["usersRef"], descendants: true }, { propertyName: "groupsRef", first: true, predicate: ["groupsRef"], descendants: true }], ngImport: i0, template: "<div class=\"cc-contacts\" [ngStyle]=\"wrapperStyle\">\n  <div class=\"cc-contacts-title\">\n    <cometchat-label [text]=\"title\" [labelStyle]=\"titleStyle\"></cometchat-label>\n  </div>\n  <div class=\"cc-contacts-error\" *ngIf=\"isLimitReached\">\n    <cometchat-label [text]=\"'max limit has reached'\"\n      [labelStyle]=\"errorStyle\"></cometchat-label>\n  </div>\n  <div class=\"cc-contacts__wrapper\" [ngStyle]=\"contactsPadding\">\n    <div class=\"cc-tabs\">\n      <cometchat-tabs [tabs]=\"tabs\" [tabsStyle]=\"tabsStyle\" [keepAlive]=\"true\">\n        <ng-template #usersRef>\n          <cometchat-users [onItemClick]=\"usersConfiguration.onItemClick || userClicked\"\n            [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder || usersRequestBuilder\"\n            [hideSearch]=\"usersConfiguration.hideSearch\"\n            [StatusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n            [avatarStyle]=\"usersConfiguration.avatarStyle\"\n            [searchIconURL]=\"usersConfiguration.searchIconURL\"\n            [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder || usersSearchRequestBuilder\"\n            [usersStyle]=\"usersConfiguration.usersStyle\"\n            [subtitleView]=\"usersConfiguration.subtitleView\"\n            [options]=\"usersConfiguration.options\"\n            [emptyStateView]=\"usersConfiguration.emptyStateView\"\n            [onSelect]=\"usersConfiguration.onSelect || onUserSelected\"\n            [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n            [errorStateView]=\"usersConfiguration.errorStateView\"\n            [loadingStateView]=\"usersConfiguration.loadingStateView\"\n            [listItemView]=\"usersConfiguration.listItemView\"\n            [menu]=\"usersConfiguration.menu\"\n            [hideSeparator]=\"usersConfiguration.hideSeparator\"\n            [hideError]=\"usersConfiguration.hideError\"\n            [selectionMode]=\"selectionMode\" [title]=\"''\"\n            [disableUsersPresence]=\"usersConfiguration.disableUsersPresence\"\n            ></cometchat-users>\n        </ng-template>\n        <ng-template #groupsRef>\n          <cometchat-groups [onItemClick]=\"groupsConfiguration.onItemClick || groupClicked\"\n            [groupsRequestBuilder]=\"groupsConfiguration.groupsRequestBuilder || groupsRequestBuilder\"\n            [hideSearch]=\"groupsConfiguration.hideSearch\"\n            [StatusIndicatorStyle]=\"groupsConfiguration.statusIndicatorStyle\"\n            [avatarStyle]=\"groupsConfiguration.avatarStyle\"\n            [searchIconURL]=\"groupsConfiguration.searchIconURL\"\n            [searchRequestBuilder]=\"groupsConfiguration.searchRequestBuilder || groupsSearchRequestBuilder\"\n            [groupsStyle]=\"groupsConfiguration.groupsStyle\"\n            [subtitleView]=\"groupsConfiguration.subtitleView\"\n            [options]=\"groupsConfiguration.options\"\n            [emptyStateView]=\"groupsConfiguration.emptyStateView\"\n            [onSelect]=\"groupsConfiguration.onSelect || onGroupSelected\"\n            [loadingIconURL]=\"groupsConfiguration.loadingIconURL\"\n            [errorStateView]=\"groupsConfiguration.errorStateView\"\n            [loadingStateView]=\"groupsConfiguration.loadingStateView\"\n            [listItemView]=\"groupsConfiguration.listItemView\"\n            [menu]=\"groupsConfiguration.menu\"\n            [hideSeparator]=\"groupsConfiguration.hideSeparator\"\n            [hideError]=\"groupsConfiguration.hideError\"\n            [selectionMode]=\"selectionMode\" [title]=\"''\"></cometchat-groups>\n        </ng-template>\n      </cometchat-tabs>\n    </div>\n    <div class=\"cc-contacts__buttons\" *ngIf=\"selectionMode != selection.none && !hideSubmitButton\">\n      <cometchat-button [disabled]=\"isLimitReached\"\n        class=\"cc-contacts__buttons--add\" [text]=\"submitButtonText\"\n        [buttonStyle]=\"submitButtonStyle\"\n        (click)=\"submitClicked()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"closeClicked()\">\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-contacts{display:flex;height:100%;width:100%;overflow:hidden;flex-direction:column}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-contacts__wrapper{height:100%;padding:8px;overflow:hidden;display:flex;flex-direction:column}.cc-close-button{position:absolute;right:8px;padding:8px}.cc-contacts__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-contacts__buttons--add{height:42px;width:100%}.cc-tabs{display:flex;height:100%;width:100%;overflow:hidden}cometchat-tabs{height:100%;width:100%}.cc-contacts-title,.cc-contacts-error{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}\n"], components: [{ type: CometChatTabsComponent, selector: "cometchat-tabs", inputs: ["tabAlignment", "disableDragging", "tabsStyle", "tabs", "keepAlive"] }, { type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatGroupsComponent, selector: "cometchat-groups", inputs: ["groupsRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "menu", "options", "activeGroup", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "emptyStateView", "errorStateView", "loadingIconURL", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "statusIndicatorStyle", "avatarStyle", "groupsStyle", "listItemStyle", "onItemClick"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatContactsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatContactsComponent, selector: "cometchat-contacts", inputs: { title: "title", usersTabTitle: "usersTabTitle", groupsTabTitle: "groupsTabTitle", usersConfiguration: "usersConfiguration", groupsConfiguration: "groupsConfiguration", onSubmitButtonClick: "onSubmitButtonClick", closeIconURL: "closeIconURL", contactsStyle: "contactsStyle", selectionMode: "selectionMode", onClose: "onClose", onItemClick: "onItemClick", tabVisibility: "tabVisibility", selectionLimit: "selectionLimit", tabs: "tabs", hideSubmitButton: "hideSubmitButton", submitButtonText: "submitButtonText" }, viewQueries: [{ propertyName: "usersRef", first: true, predicate: ["usersRef"], descendants: true }, { propertyName: "groupsRef", first: true, predicate: ["groupsRef"], descendants: true }], ngImport: i0, template: "<div class=\"cc-contacts\" [ngStyle]=\"wrapperStyle\">\n  <div class=\"cc-contacts-title\">\n    <cometchat-label [text]=\"title\" [labelStyle]=\"titleStyle\"></cometchat-label>\n  </div>\n  <div class=\"cc-contacts-error\" *ngIf=\"isLimitReached\">\n    <cometchat-label [text]=\"'max limit has reached'\"\n      [labelStyle]=\"errorStyle\"></cometchat-label>\n  </div>\n  <div class=\"cc-contacts__wrapper\" [ngStyle]=\"contactsPadding\">\n    <div class=\"cc-tabs\">\n      <cometchat-tabs [tabs]=\"tabs\" [tabsStyle]=\"tabsStyle\" [keepAlive]=\"true\">\n        <ng-template #usersRef>\n          <cometchat-users [onItemClick]=\"usersConfiguration.onItemClick || userClicked\"\n            [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder || usersRequestBuilder\"\n            [hideSearch]=\"usersConfiguration.hideSearch\"\n            [StatusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n            [avatarStyle]=\"usersConfiguration.avatarStyle\"\n            [searchIconURL]=\"usersConfiguration.searchIconURL\"\n            [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder || usersSearchRequestBuilder\"\n            [usersStyle]=\"usersConfiguration.usersStyle\"\n            [subtitleView]=\"usersConfiguration.subtitleView\"\n            [options]=\"usersConfiguration.options\"\n            [emptyStateView]=\"usersConfiguration.emptyStateView\"\n            [onSelect]=\"usersConfiguration.onSelect || onUserSelected\"\n            [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n            [errorStateView]=\"usersConfiguration.errorStateView\"\n            [loadingStateView]=\"usersConfiguration.loadingStateView\"\n            [listItemView]=\"usersConfiguration.listItemView\"\n            [menu]=\"usersConfiguration.menu\"\n            [hideSeparator]=\"usersConfiguration.hideSeparator\"\n            [hideError]=\"usersConfiguration.hideError\"\n            [selectionMode]=\"selectionMode\" [title]=\"''\"\n            [disableUsersPresence]=\"usersConfiguration.disableUsersPresence\"\n            ></cometchat-users>\n        </ng-template>\n        <ng-template #groupsRef>\n          <cometchat-groups [onItemClick]=\"groupsConfiguration.onItemClick || groupClicked\"\n            [groupsRequestBuilder]=\"groupsConfiguration.groupsRequestBuilder || groupsRequestBuilder\"\n            [hideSearch]=\"groupsConfiguration.hideSearch\"\n            [StatusIndicatorStyle]=\"groupsConfiguration.statusIndicatorStyle\"\n            [avatarStyle]=\"groupsConfiguration.avatarStyle\"\n            [searchIconURL]=\"groupsConfiguration.searchIconURL\"\n            [searchRequestBuilder]=\"groupsConfiguration.searchRequestBuilder || groupsSearchRequestBuilder\"\n            [groupsStyle]=\"groupsConfiguration.groupsStyle\"\n            [subtitleView]=\"groupsConfiguration.subtitleView\"\n            [options]=\"groupsConfiguration.options\"\n            [emptyStateView]=\"groupsConfiguration.emptyStateView\"\n            [onSelect]=\"groupsConfiguration.onSelect || onGroupSelected\"\n            [loadingIconURL]=\"groupsConfiguration.loadingIconURL\"\n            [errorStateView]=\"groupsConfiguration.errorStateView\"\n            [loadingStateView]=\"groupsConfiguration.loadingStateView\"\n            [listItemView]=\"groupsConfiguration.listItemView\"\n            [menu]=\"groupsConfiguration.menu\"\n            [hideSeparator]=\"groupsConfiguration.hideSeparator\"\n            [hideError]=\"groupsConfiguration.hideError\"\n            [selectionMode]=\"selectionMode\" [title]=\"''\"></cometchat-groups>\n        </ng-template>\n      </cometchat-tabs>\n    </div>\n    <div class=\"cc-contacts__buttons\" *ngIf=\"selectionMode != selection.none && !hideSubmitButton\">\n      <cometchat-button [disabled]=\"isLimitReached\"\n        class=\"cc-contacts__buttons--add\" [text]=\"submitButtonText\"\n        [buttonStyle]=\"submitButtonStyle\"\n        (click)=\"submitClicked()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"closeClicked()\">\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-contacts{display:flex;height:100%;width:100%;overflow:hidden;flex-direction:column}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-contacts__wrapper{height:100%;padding:8px;overflow:hidden;display:flex;flex-direction:column}.cc-close-button{position:absolute;right:8px;padding:8px}.cc-contacts__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-contacts__buttons--add{height:42px;width:100%}.cc-tabs{display:flex;height:100%;width:100%;overflow:hidden}cometchat-tabs{height:100%;width:100%}.cc-contacts-title,.cc-contacts-error{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}\n"], components: [{ type: CometChatTabsComponent, selector: "cometchat-tabs", inputs: ["tabAlignment", "disableDragging", "tabsStyle", "tabs", "keepAlive"] }, { 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", "selectedUserPreviewStyle", "showSelectedUsersPreview", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatGroupsComponent, selector: "cometchat-groups", inputs: ["groupsRequestBuilder", "searchRequestBuilder", "subtitleView", "listItemView", "menu", "options", "activeGroup", "hideSeparator", "selectionMode", "searchPlaceholder", "hideError", "searchIconURL", "hideSearch", "title", "onError", "onSelect", "emptyStateView", "errorStateView", "loadingIconURL", "privateGroupIcon", "protectedGroupIcon", "passwordGroupIcon", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "statusIndicatorStyle", "avatarStyle", "groupsStyle", "listItemStyle", "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: CometChatContactsComponent, decorators: [{
             type: Component,
             args: [{ selector: "cometchat-contacts", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-contacts\" [ngStyle]=\"wrapperStyle\">\n  <div class=\"cc-contacts-title\">\n    <cometchat-label [text]=\"title\" [labelStyle]=\"titleStyle\"></cometchat-label>\n  </div>\n  <div class=\"cc-contacts-error\" *ngIf=\"isLimitReached\">\n    <cometchat-label [text]=\"'max limit has reached'\"\n      [labelStyle]=\"errorStyle\"></cometchat-label>\n  </div>\n  <div class=\"cc-contacts__wrapper\" [ngStyle]=\"contactsPadding\">\n    <div class=\"cc-tabs\">\n      <cometchat-tabs [tabs]=\"tabs\" [tabsStyle]=\"tabsStyle\" [keepAlive]=\"true\">\n        <ng-template #usersRef>\n          <cometchat-users [onItemClick]=\"usersConfiguration.onItemClick || userClicked\"\n            [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder || usersRequestBuilder\"\n            [hideSearch]=\"usersConfiguration.hideSearch\"\n            [StatusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n            [avatarStyle]=\"usersConfiguration.avatarStyle\"\n            [searchIconURL]=\"usersConfiguration.searchIconURL\"\n            [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder || usersSearchRequestBuilder\"\n            [usersStyle]=\"usersConfiguration.usersStyle\"\n            [subtitleView]=\"usersConfiguration.subtitleView\"\n            [options]=\"usersConfiguration.options\"\n            [emptyStateView]=\"usersConfiguration.emptyStateView\"\n            [onSelect]=\"usersConfiguration.onSelect || onUserSelected\"\n            [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n            [errorStateView]=\"usersConfiguration.errorStateView\"\n            [loadingStateView]=\"usersConfiguration.loadingStateView\"\n            [listItemView]=\"usersConfiguration.listItemView\"\n            [menu]=\"usersConfiguration.menu\"\n            [hideSeparator]=\"usersConfiguration.hideSeparator\"\n            [hideError]=\"usersConfiguration.hideError\"\n            [selectionMode]=\"selectionMode\" [title]=\"''\"\n            [disableUsersPresence]=\"usersConfiguration.disableUsersPresence\"\n            ></cometchat-users>\n        </ng-template>\n        <ng-template #groupsRef>\n          <cometchat-groups [onItemClick]=\"groupsConfiguration.onItemClick || groupClicked\"\n            [groupsRequestBuilder]=\"groupsConfiguration.groupsRequestBuilder || groupsRequestBuilder\"\n            [hideSearch]=\"groupsConfiguration.hideSearch\"\n            [StatusIndicatorStyle]=\"groupsConfiguration.statusIndicatorStyle\"\n            [avatarStyle]=\"groupsConfiguration.avatarStyle\"\n            [searchIconURL]=\"groupsConfiguration.searchIconURL\"\n            [searchRequestBuilder]=\"groupsConfiguration.searchRequestBuilder || groupsSearchRequestBuilder\"\n            [groupsStyle]=\"groupsConfiguration.groupsStyle\"\n            [subtitleView]=\"groupsConfiguration.subtitleView\"\n            [options]=\"groupsConfiguration.options\"\n            [emptyStateView]=\"groupsConfiguration.emptyStateView\"\n            [onSelect]=\"groupsConfiguration.onSelect || onGroupSelected\"\n            [loadingIconURL]=\"groupsConfiguration.loadingIconURL\"\n            [errorStateView]=\"groupsConfiguration.errorStateView\"\n            [loadingStateView]=\"groupsConfiguration.loadingStateView\"\n            [listItemView]=\"groupsConfiguration.listItemView\"\n            [menu]=\"groupsConfiguration.menu\"\n            [hideSeparator]=\"groupsConfiguration.hideSeparator\"\n            [hideError]=\"groupsConfiguration.hideError\"\n            [selectionMode]=\"selectionMode\" [title]=\"''\"></cometchat-groups>\n        </ng-template>\n      </cometchat-tabs>\n    </div>\n    <div class=\"cc-contacts__buttons\" *ngIf=\"selectionMode != selection.none && !hideSubmitButton\">\n      <cometchat-button [disabled]=\"isLimitReached\"\n        class=\"cc-contacts__buttons--add\" [text]=\"submitButtonText\"\n        [buttonStyle]=\"submitButtonStyle\"\n        (click)=\"submitClicked()\"></cometchat-button>\n    </div>\n  </div>\n  <div class=\"cc-close-button\">\n    <cometchat-button [iconURL]=\"closeIconURL\" [buttonStyle]=\"closeButtonStyle\"\n      (cc-button-clicked)=\"closeClicked()\">\n    </cometchat-button>\n  </div>\n</div>\n", styles: [".cc-contacts{display:flex;height:100%;width:100%;overflow:hidden;flex-direction:column}.cc-back-button{position:absolute;left:8px;padding:12px 8px 8px}.cc-contacts__wrapper{height:100%;padding:8px;overflow:hidden;display:flex;flex-direction:column}.cc-close-button{position:absolute;right:8px;padding:8px}.cc-contacts__buttons{height:10%;width:100%;display:flex;align-items:center;justify-content:center}.button__icon{display:flex;justify-content:flex-end}.cc-contacts__buttons--add{height:42px;width:100%}.cc-tabs{display:flex;height:100%;width:100%;overflow:hidden}cometchat-tabs{height:100%;width:100%}.cc-contacts-title,.cc-contacts-error{display:flex;align-items:center;justify-content:center;height:-moz-fit-content;height:fit-content;width:100%;padding:8px 0}\n"] }]
@@ -20147,7 +20354,7 @@ class CometChatUsersWithMessagesComponent {
     }
 }
 CometChatUsersWithMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersWithMessagesComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-CometChatUsersWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersWithMessagesComponent, selector: "cometchat-users-with-messages", inputs: { user: "user", isMobileView: "isMobileView", messageText: "messageText", usersWithMessagesStyle: "usersWithMessagesStyle", messagesConfiguration: "messagesConfiguration", usersConfiguration: "usersConfiguration", onError: "onError" }, viewQueries: [{ propertyName: "userRef", first: true, predicate: ["usersRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messagesRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"usersWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-users\n    #usersRef\n    [activeUser]=\"user\"\n    [hideSearch]=\"usersConfiguration.hideSearch\"\n    [searchIconURL]=\"usersConfiguration.searchIconURL\"\n    [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder\"\n    [onItemClick]=\"usersConfiguration.onItemClick || onItemClick\"\n    [usersStyle]=\"usersConfiguration.usersStyle\"\n    [subtitleView]=\"usersConfiguration.subtitleView\"\n    [options]=\"usersConfiguration.options\"\n    [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder\"\n    [emptyStateView]=\"usersConfiguration.emptyStateView\"\n    [onSelect]=\"usersConfiguration.onSelect\"\n    [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n    [errorStateView]=\"usersConfiguration.errorStateView\"\n    [loadingStateView]=\"usersConfiguration.loadingStateView\"\n    [titleAlignment]=\"usersConfiguration.titleAlignment\"\n    [showSectionHeader]=\"usersConfiguration.showSectionHeader\"\n    [listItemView]=\"usersConfiguration.listItemView\"\n    [menu]=\"usersConfiguration.menu\"\n    [hideSeparator]=\"usersConfiguration.hideSeparator\"\n    [hideError]=\"usersConfiguration.hideError\"\n    [selectionMode]=\"usersConfiguration.selectionMode\"\n    [listItemStyle]=\"usersConfiguration.listItemStyle\"\n    [statusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n    ></cometchat-users>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n    [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n    [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n    [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n    [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n    [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n    [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n    [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n    [disableTyping]=\"messagesConfiguration.disableTyping\"\n    [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n    [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n    [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n    [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n    [messageListView]=\"messagesConfiguration.messageListView\"\n    [hideDetails]=\"messagesConfiguration.hideDetails!\"\n    [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\"\n    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n</div>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CometChatUsersWithMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatUsersWithMessagesComponent, selector: "cometchat-users-with-messages", inputs: { user: "user", isMobileView: "isMobileView", messageText: "messageText", usersWithMessagesStyle: "usersWithMessagesStyle", messagesConfiguration: "messagesConfiguration", usersConfiguration: "usersConfiguration", onError: "onError" }, viewQueries: [{ propertyName: "userRef", first: true, predicate: ["usersRef"], descendants: true }, { propertyName: "messageListRef", first: true, predicate: ["messagesRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"usersWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-users\n    #usersRef\n    [activeUser]=\"user\"\n    [hideSearch]=\"usersConfiguration.hideSearch\"\n    [searchIconURL]=\"usersConfiguration.searchIconURL\"\n    [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder\"\n    [onItemClick]=\"usersConfiguration.onItemClick || onItemClick\"\n    [usersStyle]=\"usersConfiguration.usersStyle\"\n    [subtitleView]=\"usersConfiguration.subtitleView\"\n    [options]=\"usersConfiguration.options\"\n    [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder\"\n    [emptyStateView]=\"usersConfiguration.emptyStateView\"\n    [onSelect]=\"usersConfiguration.onSelect\"\n    [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n    [errorStateView]=\"usersConfiguration.errorStateView\"\n    [loadingStateView]=\"usersConfiguration.loadingStateView\"\n    [titleAlignment]=\"usersConfiguration.titleAlignment\"\n    [showSectionHeader]=\"usersConfiguration.showSectionHeader\"\n    [listItemView]=\"usersConfiguration.listItemView\"\n    [menu]=\"usersConfiguration.menu\"\n    [hideSeparator]=\"usersConfiguration.hideSeparator\"\n    [hideError]=\"usersConfiguration.hideError\"\n    [selectionMode]=\"usersConfiguration.selectionMode\"\n    [listItemStyle]=\"usersConfiguration.listItemStyle\"\n    [statusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n    ></cometchat-users>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n    [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n    [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n    [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n    [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n    [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n    [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n    [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n    [disableTyping]=\"messagesConfiguration.disableTyping\"\n    [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n    [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n    [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n    [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n    [messageListView]=\"messagesConfiguration.messageListView\"\n    [hideDetails]=\"messagesConfiguration.hideDetails!\"\n    [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\"\n    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n</div>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"], components: [{ type: CometChatUsersComponent, selector: "cometchat-users", inputs: ["usersRequestBuilder", "searchRequestBuilder", "subtitleView", "disableUsersPresence", "listItemView", "menu", "options", "activeUser", "hideSeparator", "searchPlaceholder", "hideError", "selectionMode", "searchIconURL", "hideSearch", "title", "onError", "emptyStateView", "onSelect", "errorStateView", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "loadingStateView", "emptyStateText", "errorStateText", "titleAlignment", "usersStyle", "listItemStyle", "statusIndicatorStyle", "avatarStyle", "selectedUserPreviewStyle", "showSelectedUsersPreview", "onItemClick", "searchKeyword", "onEmpty", "userPresencePlacement", "disableLoadingState"] }, { type: CometChatMessagesComponent, selector: "cometchat-messages", inputs: ["user", "group", "currentAskAIBot", "hideMessageComposer", "disableTyping", "messageHeaderConfiguration", "messageListConfiguration", "messageComposerConfiguration", "threadedMessageConfiguration", "detailsConfiguration", "customSoundForIncomingMessages", "customSoundForOutgoingMessages", "disableSoundForMessages", "messagesStyle", "messageHeaderView", "messageComposerView", "messageListView", "hideMessageHeader", "hideDetails", "auxiliaryMenu"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatUsersWithMessagesComponent, decorators: [{
             type: Component,
             args: [{ selector: "cometchat-users-with-messages", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-with-messages__wrapper\" [ngStyle]=\"usersWrapperStyles()\">\n  <div class=\"cc-with-messages__sidebar\" [ngClass]=\"{mobile : isMobileView}\" [ngStyle]=\"sideBarStyle\">\n    <cometchat-users\n    #usersRef\n    [activeUser]=\"user\"\n    [hideSearch]=\"usersConfiguration.hideSearch\"\n    [searchIconURL]=\"usersConfiguration.searchIconURL\"\n    [searchRequestBuilder]=\"usersConfiguration.searchRequestBuilder\"\n    [onItemClick]=\"usersConfiguration.onItemClick || onItemClick\"\n    [usersStyle]=\"usersConfiguration.usersStyle\"\n    [subtitleView]=\"usersConfiguration.subtitleView\"\n    [options]=\"usersConfiguration.options\"\n    [usersRequestBuilder]=\"usersConfiguration.usersRequestBuilder\"\n    [emptyStateView]=\"usersConfiguration.emptyStateView\"\n    [onSelect]=\"usersConfiguration.onSelect\"\n    [loadingIconURL]=\"usersConfiguration.loadingIconURL\"\n    [errorStateView]=\"usersConfiguration.errorStateView\"\n    [loadingStateView]=\"usersConfiguration.loadingStateView\"\n    [titleAlignment]=\"usersConfiguration.titleAlignment\"\n    [showSectionHeader]=\"usersConfiguration.showSectionHeader\"\n    [listItemView]=\"usersConfiguration.listItemView\"\n    [menu]=\"usersConfiguration.menu\"\n    [hideSeparator]=\"usersConfiguration.hideSeparator\"\n    [hideError]=\"usersConfiguration.hideError\"\n    [selectionMode]=\"usersConfiguration.selectionMode\"\n    [listItemStyle]=\"usersConfiguration.listItemStyle\"\n    [statusIndicatorStyle]=\"usersConfiguration.statusIndicatorStyle\"\n    ></cometchat-users>\n  </div>\n  <div class=\"cc-with-messages__main\" [ngClass]=\"{mobile : isMobileView}\" *ngIf=\"user\">\n    <!--Message List Screen-->\n    <cometchat-messages\n    #messagesRef\n    [user]=\"user!\"\n    [messageHeaderConfiguration]=\"messagesConfiguration.messageHeaderConfiguration\"\n    [messageListConfiguration]=\"messagesConfiguration.messageListConfiguration\"\n    [messageComposerConfiguration]=\"messagesConfiguration.messageComposerConfiguration\"\n    [messagesStyle]=\"messagesConfiguration.messagesStyle\"\n    [customSoundForIncomingMessages]=\"messagesConfiguration.customSoundForIncomingMessages\"\n    [customSoundForOutgoingMessages]=\"messagesConfiguration.customSoundForOutgoingMessages\"\n    [detailsConfiguration]=\"messagesConfiguration.detailsConfiguration\"\n    [disableSoundForMessages]=\"messagesConfiguration.disableSoundForMessages\"\n    [disableTyping]=\"messagesConfiguration.disableTyping\"\n    [hideMessageComposer]=\"messagesConfiguration.hideMessageComposer\"\n    [hideMessageHeader]=\"messagesConfiguration.hideMessageHeader\"\n    [messageComposerView]=\"messagesConfiguration.messageComposerView\"\n    [messageHeaderView]=\"messagesConfiguration.messageHeaderView\"\n    [messageListView]=\"messagesConfiguration.messageListView\"\n    [hideDetails]=\"messagesConfiguration.hideDetails!\"\n    [threadedMessageConfiguration]=\"messagesConfiguration.threadedMessageConfiguration\"\n    >\n    </cometchat-messages>\n    <!--Message List Screen ENDS-->\n  </div>\n  <div class=\"cc-decorator__message--empty\" *ngIf=\"!user\" [ngStyle]=\"emptyMessageStyle()\">\n    <cometchat-label [text]=\"messageText\" [labelStyle]=\"labelStyle\"></cometchat-label>\n   </div>\n</div>", styles: [".cc-with-messages__wrapper{display:flex;height:100%;width:100%;box-sizing:border-box}.cc-with-messages__sidebar{width:280px;height:100%;position:relative}.cc-with-messages__main{width:calc(100% - 280px);height:100%}.mobile{width:100%!important;height:100%;position:absolute}.cc-decorator__message--empty{display:flex;justify-content:center;align-items:center}\n"] }]