@cometchat/chat-uikit-angular
Version:
Ready-to-use Chat UI Components for Angular (JavaScript/Web)
711 lines • 154 kB
JavaScript
import { Component, Input, ChangeDetectionStrategy, } from "@angular/core";
import '@cometchat/uikit-elements';
import { AvatarStyle, ConfirmDialogStyle, ListItemStyle, } from '@cometchat/uikit-elements';
import { AddMembersConfiguration, BannedMembersConfiguration, CometChatUIKitUtility, DetailsStyle, DetailsUtils, GroupMembersConfiguration, TransferOwnershipConfiguration, } from "@cometchat/uikit-shared";
import { fontHelper, localize, CometChatGroupEvents, CometChatUIKitConstants, CometChatUserEvents, SelectionMode } from '@cometchat/uikit-resources';
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatException } from "../../Shared/Utils/ComeChatException";
import { MessageUtils } from "../../Shared/Utils/MessageUtils";
import * as i0 from "@angular/core";
import * as i1 from "../../CometChatTheme.service";
import * as i2 from "../../CometChatAddMembers/cometchat-add-members/cometchat-add-members.component";
import * as i3 from "../../CometChatBannedMembers/cometchat-banned-members/cometchat-banned-members.component";
import * as i4 from "../../CometChatGroupMembers/cometchat-group-members/cometchat-group-members.component";
import * as i5 from "../../CometChatTransferOwnership/cometchat-transfer-ownership/cometchat-transfer-ownership.component";
import * as i6 from "@angular/common";
/**
*
* CometChatDetailsComponent renders details of user or group.
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
export class CometChatDetailsComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.title = localize("DETAILS");
this.closeButtonIconURL = "assets/close2x.svg";
this.hideProfile = false;
this.disableUsersPresence = false;
this.privateGroupIcon = "assets/Private.svg";
/**
* @deprecated
*
* This property is deprecated as of version 4.3.7 due to newer property 'passwordGroupIcon'. It will be removed in subsequent versions.
*/
this.protectedGroupIcon = "assets/Locked.svg";
this.passwordGroupIcon = undefined;
this.onError = (error) => {
console.log(error);
};
this.leaveGroupConfirmButtonText = localize("LEAVE_GROUP");
this.leaveGroupCancelButtonText = localize("CANCEL");
this.leaveGroupDialogMessage = localize("LEAVE_CONFIRM");
this.leaveGroupDialogStyle = {
confirmButtonBackground: "RGB(51, 153, 255)",
cancelButtonBackground: "RGBA(20, 20, 20, 0.06)",
confirmButtonTextColor: "white",
confirmButtonTextFont: "600 15px Inter",
cancelButtonTextColor: "black",
cancelButtonTextFont: "600 15px Inter",
titleFont: "",
titleColor: "",
messageTextFont: "400 13px Inter",
messageTextColor: "RGBA(20, 20, 20, 0.58)",
background: "white",
border: "1px solid #F2F2F2",
height: "180px",
width: "360px"
};
this.deleteGroupConfirmButtonText = localize("DELETE");
this.deleteGroupDialogMessage = localize("DELETE_CONFIRM");
this.deleteGroupCancelButtonText = localize("CANCEL");
this.deleteGroupDialogStyle = {
height: "180px",
width: "360px"
};
this.transferOwnershipConfirmButtonText = localize("TRANSFER_OWNERSHIP");
this.transferOwnershipDialogMessage = localize("TRANSFER_CONFIRM");
this.transferOwnershipCancelButtonText = localize("CANCEL");
this.transferOwnershipDialogStyle = {
height: "180px",
width: "360px"
};
this.addMembersConfiguration = new AddMembersConfiguration({});
this.bannedMembersConfiguration = new BannedMembersConfiguration({});
this.groupMembersConfiguration = new GroupMembersConfiguration({});
this.transferOwnershipConfiguration = new TransferOwnershipConfiguration({});
this.backiconurl = "assets/backbutton.svg";
this.statusIndicatorStyle = {
height: "10px",
width: "10px",
borderRadius: "16px",
border: ""
};
this.backdropStyle = {
height: "100%",
width: "100%",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed"
};
this.avatarStyle = {
borderRadius: "16px",
width: "28px",
height: "28px",
border: "none",
};
this.detailsStyle = {
width: "100%",
height: "100%",
border: "",
borderRadius: ""
};
this.listItemStyle = {
height: "100%",
width: "100%",
background: "",
activeBackground: "transparent",
borderRadius: "grey",
titleFont: "600 15px Inter",
titleColor: "black",
border: "",
hoverBackground: "transparent",
separatorColor: "rgb(222 222 222 / 46%)"
};
this.showTransferDialog = false;
this.defaultTemplate = [];
this.loggedInUser = null;
this.openViewMembersPage = false;
this.openBannedMembersPage = false;
this.openAddMembersPage = false;
this.confirmLeaveGroupModal = false;
this.openTransferOwnershipModal = false;
this.selectionmodeEnum = SelectionMode.multiple;
this.statusColor = {
private: "",
password: "#F7A500",
public: ""
};
this.closeButtonStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.detailsStyle.closeButtonIconTint || this.themeService.theme.palette.getPrimary()
};
this.buttonStyle = {
height: "100%",
width: "100%",
border: "none",
borderRadius: "0",
background: "transparent",
buttonTextColor: this.themeService.theme.palette.getPrimary() || "rgba(51, 153, 255)",
buttonTextFont: "500 16px Inter"
};
this.dividerStyle = {
background: "rgb(222 222 222 / 46%)",
height: "1px",
width: "100%"
};
this.deleteGroupModal = false;
this.subtitleText = "";
this.userListenerId = "userlist_" + new Date().getTime();
this.membersListenerId = "memberlist_" + new Date().getTime();
this.checkStatusType = () => {
if (this.user) {
let userStatusVisibility = !this.disableUsersPresence && !new MessageUtils().getUserStatusVisibility(this.user);
return userStatusVisibility ? this.statusColor[this.user?.getStatus()] : null;
}
else if (this.group) {
return this.statusColor[this.group?.getType()];
}
else
return null;
};
this.viewMembers = () => {
this.openViewMembersPage = !this.openViewMembersPage;
this.openBannedMembersPage = false;
this.openAddMembersPage = false;
this.ref.detectChanges();
};
this.addMembers = () => {
this.openAddMembersPage = !this.openAddMembersPage;
this.openBannedMembersPage = false;
this.openViewMembersPage = false;
this.ref.detectChanges();
};
this.bannedMembers = () => {
this.openAddMembersPage = false;
this.openViewMembersPage = false;
this.openBannedMembersPage = !this.openBannedMembersPage;
this.ref.detectChanges();
};
this.onBackForAddMembers = () => {
this.addMembers();
if (this.addMembersConfiguration?.onBack) {
this.addMembersConfiguration?.onBack();
}
};
this.openTransferOwnership = () => {
this.openTransferOwnershipModal = !this.openTransferOwnershipModal;
this.confirmLeaveGroupModal = false;
};
this.onCloseDetails = () => {
if (this.onClose) {
this.onClose();
}
};
this.subtitleStyle = () => {
let hideUserStatus = this.user ? new MessageUtils().getUserStatusVisibility(this.user) : true;
if (!this.disableUsersPresence && !hideUserStatus) {
return {
textFont: this.detailsStyle.subtitleTextFont,
textColor: this.themeService.theme.palette.getPrimary()
};
}
else {
return {
textFont: this.detailsStyle.subtitleTextFont,
textColor: this.detailsStyle.subtitleTextColor
};
}
};
/**
* @param {CometChat.Group} group
*/
this.getGroupIcon = (group) => {
let status;
if (group) {
switch (group.getType()) {
case CometChatUIKitConstants.GroupTypes.password:
status = this.passwordGroupIcon || this.protectedGroupIcon;
break;
case CometChatUIKitConstants.GroupTypes.private:
status = this.privateGroupIcon;
break;
default:
status = null;
break;
}
}
return status;
};
this.getTemplateOptions = (template) => {
if (template.options) {
return template.options(this.user, this.group, template.id);
}
else
return [];
};
this.wrapperStyle = () => {
return {
width: this.detailsStyle.width,
height: this.detailsStyle.height,
border: this.detailsStyle.border,
borderRadius: this.detailsStyle.borderRadius,
background: this.detailsStyle.background,
};
};
this.marginStyle = () => {
return {
padding: this.detailsStyle?.padding
};
};
}
getTitleStyle() {
return {
textFont: this.detailsStyle.titleTextFont || fontHelper(this.themeService.theme.typography.title1),
textColor: this.detailsStyle.titleTextColor || this.themeService.theme.palette.getAccent()
};
}
getCustomOptionView(option) {
return option?.customView;
}
ngOnChanges(changes) {
if (changes["user"] || changes["group"]) {
if (this.loggedInUser) {
this.getTemplate();
}
else {
CometChat.getLoggedinUser().then((user) => {
this.loggedInUser = user;
this.getTemplate();
}).catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
}
}
getTemplate() {
if (this.data) {
this.defaultTemplate = this.data;
this.ref.detectChanges();
}
else {
this.defaultTemplate = DetailsUtils.getDefaultDetailsTemplate(this.loggedInUser, this.user, this.group, this.themeService.theme);
this.ref.detectChanges();
}
}
removeListener() {
CometChat.removeUserListener(this.userListenerId);
CometChat.removeGroupListener(this.membersListenerId);
}
ngOnDestroy() {
this.removeListener();
this.defaultTemplate = [];
this.onCloseDetails();
this.unsubscribeToEvents();
}
ngOnInit() {
this.setThemeStyle();
this.subscribeToEvents();
this.statusColor.online = this.detailsStyle.onlineStatusColor || this.themeService.theme.palette.getSuccess();
this.attachListeners();
this.updateSubtitle();
}
subscribeToEvents() {
this.ccGroupMemberAdded = CometChatGroupEvents.ccGroupMemberAdded.subscribe((item) => {
this.group = item?.userAddedIn;
this.group = item?.userAddedIn;
this.updateSubtitle();
this.ref.detectChanges();
});
this.ccGroupMemberJoined = CometChatGroupEvents.ccGroupMemberJoined.subscribe((item) => {
this.group = item?.joinedGroup;
this.updateSubtitle();
this.ref.detectChanges();
});
this.ccGroupMemberKicked = CometChatGroupEvents.ccGroupMemberKicked.subscribe((item) => {
this.group = item?.kickedFrom;
this.updateSubtitle();
this.ref.detectChanges();
});
this.ccGroupMemberBanned = CometChatGroupEvents.ccGroupMemberBanned.subscribe((item) => {
this.group = item?.kickedFrom;
this.updateSubtitle();
this.ref.detectChanges();
});
this.ccOwnershipChanged = CometChatGroupEvents.ccOwnershipChanged.subscribe((item) => {
this.group = item?.group;
this.updateSubtitle();
this.confirmLeaveGroupModal = false;
this.openTransferOwnershipModal = false;
this.ref.detectChanges();
});
}
unsubscribeToEvents() {
this.ccGroupMemberAdded?.unsubscribe();
this.ccGroupMemberJoined?.unsubscribe();
this.ccGroupMemberKicked?.unsubscribe();
this.ccGroupMemberBanned?.unsubscribe();
this.ccOwnershipChanged?.unsubscribe();
}
updateSubtitle() {
const count = this.group?.getMembersCount();
const membersText = localize(count > 1 ? "MEMBERS" : "MEMBER");
if (this.user) {
let userStatusVisibility = !this.disableUsersPresence && !this.user.getBlockedByMe() && !this.user.getHasBlockedMe();
this.subtitleText = userStatusVisibility ? this.user.getStatus() : "";
}
else if (this.group) {
this.subtitleText = `${count} ${membersText}`;
}
this.ref.detectChanges();
}
getButtonStyle(option) {
return {
height: "100%",
width: "100%",
border: "none",
borderRadius: "0",
buttonTextFont: option?.titleFont,
buttonTextColor: option?.titleColor,
background: option?.backgroundColor || "transparent"
};
}
checkGroupType() {
let image = "";
if (this.group) {
switch (this.group?.getType()) {
case CometChatUIKitConstants.GroupTypes.password:
image = this.passwordGroupIcon || this.protectedGroupIcon;
break;
case CometChatUIKitConstants.GroupTypes.private:
image = this.privateGroupIcon;
break;
default:
image = "";
break;
}
}
return image;
}
updateUserStatus(user) {
if (this.user && this.user.getUid() && this.user.getUid() === user.getUid()) {
this.user.setStatus(user.getStatus());
this.updateSubtitle();
}
// this.ref.detectChanges();
}
attachListeners() {
try {
if (!this.disableUsersPresence) {
CometChat.addUserListener(this.userListenerId, new CometChat.UserListener({
onUserOnline: (onlineUser) => {
/* when someuser/friend comes online, user will be received here */
this.updateUserStatus(onlineUser);
},
onUserOffline: (offlineUser) => {
/* when someuser/friend went offline, user will be received here */
this.updateUserStatus(offlineUser);
},
}));
}
CometChat.addGroupListener(this.membersListenerId, new CometChat.GroupListener({
onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
if (changedUser.getUid() == this.loggedInUser?.getUid()) {
changedGroup.setScope(newScope);
this.group = changedGroup;
this.getTemplate();
}
},
}));
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
}
}
getSectionHeaderStyle(template) {
return {
textFont: template.titleFont,
textColor: template.titleColor
};
}
onOptionClick(option) {
const { onClick, id } = option;
if (onClick) {
onClick(this.user ?? this.group);
return;
}
switch (id) {
case CometChatUIKitConstants.UserOptions.viewProfile:
if (this.user?.getLink()) {
window.location.href = this.user.getLink();
}
break;
case CometChatUIKitConstants.UserOptions.block:
this.blockUser();
break;
case CometChatUIKitConstants.UserOptions.unblock:
this.unBlockUser();
break;
case CometChatUIKitConstants.GroupOptions.viewMembers:
this.viewMembers();
break;
case CometChatUIKitConstants.GroupOptions.addMembers:
this.addMembers();
break;
case CometChatUIKitConstants.GroupOptions.bannedMembers:
this.bannedMembers();
break;
case CometChatUIKitConstants.GroupOptions.leave:
this.leaveGroup();
break;
case CometChatUIKitConstants.GroupOptions.delete:
this.showDeleteDialog();
break;
default:
break;
}
}
onTransferClick() {
if (this.group.getOwner() == this.loggedInUser?.getUid()) {
this.openTransferOwnershipModal = true;
this.confirmLeaveGroupModal = false;
this.showTransferDialog = false;
}
}
onLeaveClick() {
CometChat.leaveGroup(this.group.getGuid())
.then((response) => {
this.group.setMembersCount(this.group.getMembersCount() - 1);
this.group.setHasJoined(false);
this.updateSubtitle();
this.ref.detectChanges();
this.openTransferOwnershipModal = false;
this.confirmLeaveGroupModal = false;
this.onCloseDetails();
CometChatGroupEvents.ccGroupLeft.next({
userLeft: this.loggedInUser,
leftGroup: this.group,
message: this.createUserLeftAction(this.loggedInUser, CometChatUIKitConstants.groupMemberAction.LEFT)
});
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
createActionMessage(actionOn, action) {
let actionMessage = new CometChat.Action(this.group.getGuid(), CometChatUIKitConstants.MessageTypes.groupMember, CometChatUIKitConstants.MessageReceiverType.group, CometChatUIKitConstants.MessageCategory.action);
actionMessage.setAction(action);
actionMessage.setActionBy(this.loggedInUser);
actionMessage.setActionFor(this.group);
actionMessage.setActionOn(actionOn);
actionMessage.setReceiver(this.group);
actionMessage.setSender(this.loggedInUser);
actionMessage.setConversationId("group_" + this.group.getGuid());
actionMessage.setMuid(CometChatUIKitUtility.ID());
actionMessage.setMessage(`${this.loggedInUser?.getName()} ${action} ${actionOn.getName()}`);
actionMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
actionMessage.setNewScope(actionOn.getScope());
actionMessage.setReceiverType(CometChatUIKitConstants.MessageReceiverType.group);
return actionMessage;
}
createUserLeftAction(actionOn, action) {
let actionMessage = new CometChat.Action(this.group.getGuid(), CometChatUIKitConstants.MessageTypes.groupMember, CometChatUIKitConstants.MessageReceiverType.group, CometChatUIKitConstants.MessageCategory.action);
actionMessage.setAction(action);
actionMessage.setActionBy(this.loggedInUser);
actionMessage.setActionFor(this.group);
actionMessage.setActionOn(actionOn);
actionMessage.setReceiver(this.group);
actionMessage.setSender(this.loggedInUser);
actionMessage.setConversationId("group_" + this.group.getGuid());
actionMessage.setMuid(CometChatUIKitUtility.ID());
actionMessage.setSentAt(CometChatUIKitUtility.getUnixTimestamp());
actionMessage.setReceiverType(CometChatUIKitConstants.MessageReceiverType.group);
let message = CometChatUIKitConstants.groupMemberAction.LEFT ? `${this.loggedInUser?.getName()} ${action}` : `${this.loggedInUser?.getName()} ${action} ${actionOn.getName()}`;
actionMessage.setMessage(message);
return actionMessage;
}
onCancelClick() {
this.confirmLeaveGroupModal = false;
this.deleteGroupModal = false;
this.showTransferDialog = false;
}
blockUser() {
// block user
if (this.user && !this.user.getBlockedByMe()) {
CometChat.blockUsers([this.user.getUid()]).then(() => {
this.user.setBlockedByMe(true);
CometChatUserEvents.ccUserBlocked.next(this.user);
this.updateSubtitle();
this.getTemplate();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
}
unBlockUser() {
// unblock user
if (this.user && this.user.getBlockedByMe()) {
CometChat.unblockUsers([this.user.getUid()]).then(() => {
this.user.setBlockedByMe(false);
CometChatUserEvents.ccUserUnblocked.next(this.user);
this.getTemplate();
this.updateSubtitle();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
}
leaveGroup() {
if (this.group.getOwner() == this.loggedInUser?.getUid()) {
this.showTransferDialog = true;
this.confirmLeaveGroupModal = false;
}
else {
this.showTransferDialog = false;
}
this.confirmLeaveGroupModal = true;
this.ref.detectChanges();
}
showDeleteDialog() {
this.deleteGroupModal = true;
}
deleteGroup() {
this.deleteGroupModal = false;
CometChat.deleteGroup(this.group?.getGuid()).then(() => {
this.deleteGroupModal = false;
CometChatGroupEvents.ccGroupDeleted.next(this.group);
this.onCloseDetails();
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
/**
* @param {CometChat.Group} group
*/
getStatusIndicatorColor(group) {
return this.statusColor[group?.getType()];
}
setThemeStyle() {
this.setDetailsStyle();
this.setAvatarStyle();
this.setStatusStyle();
this.setListItemStyle();
this.setConfirmDialogStyle();
this.statusColor.private = this.detailsStyle.privateGroupIconBackground;
this.statusColor.online = this.detailsStyle.onlineStatusColor;
this.statusColor.password = this.detailsStyle.passwordGroupIconBackground;
}
setConfirmDialogStyle() {
let defaultStyle = new ConfirmDialogStyle({
confirmButtonBackground: this.themeService.theme.palette.getPrimary(),
cancelButtonBackground: this.themeService.theme.palette.getSecondary(),
confirmButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
confirmButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
cancelButtonTextColor: this.themeService.theme.palette.getAccent900("dark"),
cancelButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
messageTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
messageTextColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
height: "100%",
width: "350px",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
borderRadius: "8px"
});
let defaultDeleteDialogStyle = new ConfirmDialogStyle({
confirmButtonBackground: this.themeService.theme.palette.getError(),
cancelButtonBackground: this.themeService.theme.palette.getSecondary(),
confirmButtonTextColor: this.themeService.theme.palette.getAccent900("light"),
confirmButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
cancelButtonTextColor: this.themeService.theme.palette.getAccent900("dark"),
cancelButtonTextFont: fontHelper(this.themeService.theme.typography.text2),
titleFont: fontHelper(this.themeService.theme.typography.title1),
titleColor: this.themeService.theme.palette.getAccent(),
messageTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
messageTextColor: this.themeService.theme.palette.getAccent600(),
background: this.themeService.theme.palette.getBackground(),
height: "100%",
width: "350px",
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
borderRadius: "8px"
});
this.leaveGroupDialogStyle = { ...defaultStyle, ...this.leaveGroupDialogStyle };
this.transferOwnershipDialogStyle = { ...defaultStyle, ...this.transferOwnershipDialogStyle };
this.deleteGroupDialogStyle = { ...defaultDeleteDialogStyle, ...this.deleteGroupDialogStyle };
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: "transparent",
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: "transparent"
});
this.listItemStyle = { ...defaultStyle, ...this.listItemStyle };
}
setAvatarStyle() {
let defaultStyle = new AvatarStyle({
borderRadius: "24px",
width: "36px",
height: "36px",
border: "none",
backgroundColor: this.themeService.theme.palette.getAccent700(),
nameTextColor: this.themeService.theme.palette.getAccent900(),
backgroundSize: "cover",
nameTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
outerViewBorderSpacing: "",
});
this.avatarStyle = { ...defaultStyle, ...this.avatarStyle };
}
setStatusStyle() {
let defaultStyle = {
height: "12px",
width: "12px",
border: "none",
borderRadius: "24px",
};
this.statusIndicatorStyle = { ...defaultStyle, ...this.statusIndicatorStyle };
}
setDetailsStyle() {
let defaultStyle = new DetailsStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
privateGroupIconBackground: this.themeService.theme.palette.getSuccess(),
passwordGroupIconBackground: "RGB(247, 165, 0)",
closeButtonIconTint: this.themeService.theme.palette.getPrimary(),
width: "100%",
height: "100%",
borderRadius: "",
subtitleTextFont: fontHelper(this.themeService.theme.typography.subtitle2),
subtitleTextColor: this.themeService.theme.palette.getAccent600(),
padding: "0 100px"
});
this.detailsStyle = { ...defaultStyle, ...this.detailsStyle };
}
}
CometChatDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatDetailsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.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: i2.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: i3.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: i4.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: i5.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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.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