@cometchat/chat-uikit-angular
Version:
Ready-to-use Chat UI Components for Angular (JavaScript/Web)
807 lines • 130 kB
JavaScript
import { AvatarStyle, ChangeScopeStyle, ListItemStyle, MenuListStyle, } from "@cometchat/uikit-elements";
import { CometChatUIKitUtility, GroupMemberUtils, GroupMembersStyle, } from "@cometchat/uikit-shared";
import { ChangeDetectionStrategy, Component, Input, } from "@angular/core";
import { CometChatGroupEvents, CometChatUIKitConstants, SelectionMode, States, TitleAlignment, UserPresencePlacement, fontHelper, localize, } 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 "../../CometChatList/cometchat-list.component";
import * as i3 from "@angular/common";
/**
*
* CometChatGroupMembersComponent is used to render list of group members
*
* @version 1.0.0
* @author CometChatTeam
* @copyright © 2022 CometChat Inc.
*
*/
export class CometChatGroupMembersComponent {
constructor(ref, themeService) {
this.ref = ref;
this.themeService = themeService;
this.disableUsersPresence = false;
this.backButtonIconURL = "assets/backbutton.svg";
this.closeButtonIconURL = "assets/close2x.svg";
this.showBackButton = true;
this.hideSeparator = false;
this.selectionMode = SelectionMode.none;
this.searchPlaceholder = "Search Members";
this.searchIconURL = "assets/search.svg";
this.hideSearch = true;
this.title = localize("MEMBERS");
this.onError = (error) => {
console.log(error);
};
this.backdropStyle = {
height: "100%",
width: "100%",
background: "rgba(0, 0, 0, 0.5)",
position: "fixed",
};
this.loadingIconURL = "assets/Spinner.svg";
this.emptyStateText = localize("NO_USERS_FOUND");
this.errorStateText = localize("SOMETHING_WRONG");
this.titleAlignment = TitleAlignment.center;
this.dropdownIconURL = "assets/down-arrow.svg";
this.statusIndicatorStyle = {
height: "10px",
width: "10px",
borderRadius: "16px",
border: "",
};
this.avatarStyle = {
borderRadius: "16px",
width: "32px",
height: "32px",
};
this.groupMembersStyle = {
width: "100%",
height: "100%",
border: "",
borderRadius: "",
};
this.groupScopeStyle = new ChangeScopeStyle({
height: "200px",
width: "280px",
closeIconTint: "",
buttonBackground: "",
});
this.listItemStyle = {
height: "100%",
width: "100%",
background: "",
activeBackground: "transparent",
borderRadius: "grey",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "",
hoverBackground: "transparent",
separatorColor: "rgba(222 222 222 / 46%)",
};
this.userPresencePlacement = UserPresencePlacement.bottom;
this.disableLoadingState = false;
this.listStyle = {};
this.menuListStyle = {
width: "",
height: "",
border: "none",
borderRadius: "8px",
background: "white",
submenuWidth: "100%",
submenuHeight: "100%",
submenuBorder: "1px solid #e8e8e8",
submenuBorderRadius: "8px",
submenuBackground: "white",
moreIconTint: "rgb(51, 153, 255)",
};
this.modalStyle = {
height: "212px",
width: "360px",
background: "white",
borderRadius: "12px",
border: "none",
};
this.limit = 30;
this.moreIconURL = "assets/moreicon.svg";
this.searchKeyword = "";
this.onScrolledToBottom = null;
this.isString = (data) => typeof data == "string";
this.isArray = (data) => typeof data == "object" && data?.length > 0;
this.getOptions = (member) => {
let options = GroupMemberUtils.getViewMemberOptions(member, this.group, this.loggedInUser?.getUid(), this.themeService.theme);
return options;
};
this.titleAlignmentEnum = TitleAlignment;
this.selectionmodeEnum = SelectionMode;
this.state = States.loading;
this.groupMembers = [];
this.scopes = [];
this.membersListenerId = "memberlist_" + new Date().getTime();
this.changeScope = false;
this.fetchingGroups = false;
this.previousSearchKeyword = "";
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: "#2196F3",
uncheckedBackgroundColor: "#ccc"
};
this.memberScope = [];
this.membersList = [];
this.onClick = (groupMember) => {
if (this.onItemClick) {
this.onItemClick(groupMember);
}
};
this.searchKeyWordUpdated = () => {
if (this.fetchingGroups) {
clearTimeout(this.fetchTimeOut);
this.fetchTimeOut = setTimeout(() => {
this.searchForGroupMembers();
}, 800);
}
else {
this.searchForGroupMembers();
}
};
this.searchForGroupMembers = () => {
const request = this.searchRequestBuilder
? this.searchRequestBuilder.setSearchKeyword(this.searchKeyword).build()
: this.getRequestBuilder();
this.groupsRequest = request;
if (!this.disableLoadingState) {
this.groupMembers = [];
}
this.fetchNextGroupMembers();
};
/**
* @param {CometChat.GroupMember} member
*/
this.getStatusIndicatorColor = (member) => {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(member) || this.disableUsersPresence;
if (!userStatusVisibility) {
return this.groupMembersStyle.onlineStatusColor ?? this.themeService.theme.palette.getSuccess();
}
return null;
};
/**
* @param {CometChat.GroupMember} member
*/
this.getStatusIndicatorStyle = (member) => {
let userStatusVisibility = new MessageUtils().getUserStatusVisibility(member) || this.disableUsersPresence;
if (!userStatusVisibility) {
return (this.statusIndicatorStyle);
}
return null;
};
this.handleMenuAction = (menu, groupMember) => {
if (menu?.detail?.data?.onClick) {
menu?.detail?.data?.onClick(groupMember);
return;
}
let id = menu?.detail?.data?.id;
this.selectedMember = groupMember;
this.memberScope = GroupMemberUtils.allowScopeChange(this.group, groupMember);
if (id == CometChatUIKitConstants.GroupMemberOptions.changeScope) {
this.changeScope = true;
this.scopes = [];
}
else if (id == CometChatUIKitConstants.GroupMemberOptions.ban) {
this.changeScope = false;
this.blockMember(groupMember);
}
else if (id == CometChatUIKitConstants.GroupMemberOptions.kick) {
this.kickMember(groupMember);
}
};
this.blockMember = (member) => {
CometChat.banGroupMember(this.group.getGuid(), member.getUid()).then(() => {
this.group.setMembersCount(this.group.getMembersCount() - 1);
this.addRemoveMember(member);
CometChatGroupEvents.ccGroupMemberBanned.next({
kickedBy: this.loggedInUser,
kickedFrom: this.group,
kickedUser: member,
message: this.createActionMessage(member, CometChatUIKitConstants.groupMemberAction.BANNED),
});
});
};
this.kickMember = (member) => {
CometChat.kickGroupMember(this.group.getGuid(), member.getUid())
.then(() => {
this.group.setMembersCount(this.group.getMembersCount() - 1);
this.addRemoveMember(member);
CometChatGroupEvents.ccGroupMemberKicked.next({
kickedBy: this.loggedInUser,
kickedFrom: this.group,
kickedUser: member,
message: this.createActionMessage(member, CometChatUIKitConstants.groupMemberAction.KICKED),
});
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
};
/**
* @param {CometChat.User} member
*/
this.updateMemberStatus = (member) => {
let memberlist = [...this.groupMembers];
//search for user
let userKey = memberlist.findIndex((u, k) => u.getUid() == member.getUid());
//if found in the list, update user object
if (userKey > -1) {
let user = memberlist[userKey];
user.setStatus(member.getStatus());
memberlist.splice(userKey, 1, user);
this.groupMembers = [...memberlist];
this.ref.detectChanges();
}
};
this.updateMember = (member) => {
let memberlist = [...this.groupMembers];
//search for user
let userKey = memberlist.findIndex((u, k) => u.getUid() == member.getUid());
//if found in the list, update user object
if (userKey > -1) {
let user = memberlist[userKey];
memberlist.splice(userKey, 1, user);
this.groupMembers = [...memberlist];
this.ref.detectChanges();
}
};
this.addRemoveMember = (member) => {
let memberlist = [...this.groupMembers];
//search for user
let memberKey = memberlist.findIndex((u, k) => u.getUid() == member.getUid());
//if found in the list, update user object
if (memberKey > -1) {
memberlist.splice(memberKey, 1);
this.groupMembers = [...memberlist];
this.ref.detectChanges();
}
else {
this.groupMembers.push(member);
this.ref.detectChanges();
}
};
this.fetchNextGroupMembers = () => {
this.onScrolledToBottom = null;
if (this.groupsRequest &&
this.groupsRequest.pagination &&
(this.groupsRequest.pagination.current_page == 0 ||
this.groupsRequest.pagination.current_page !=
this.groupsRequest.pagination.total_pages)) {
this.fetchingGroups = true;
this.onScrolledToBottom = this.fetchNextGroupMembers;
try {
this.groupsRequest.fetchNext().then((groupMembers) => {
if (!this.disableLoadingState) {
this.state = States.loading;
}
if (groupMembers.length <= 0) {
if (this.onEmpty) {
this.onEmpty();
this.previousSearchKeyword = '';
}
}
if (groupMembers.length <= 0 &&
(this.groupMembers?.length <= 0)) {
this.state = States.empty;
this.ref.detectChanges();
}
else {
if (!this.disableLoadingState) {
this.groupMembers = [...this.groupMembers, ...groupMembers];
}
else {
if (this.searchKeyword != this.previousSearchKeyword ||
[0, 1].includes(this.groupsRequest.pagination.current_page)) {
this.previousSearchKeyword = this.searchKeyword;
this.groupMembers = groupMembers;
}
else {
this.groupMembers = [...this.groupMembers, ...groupMembers];
}
}
this.state = States.loaded;
this.ref.detectChanges();
}
this.fetchingGroups = false;
this.previousSearchKeyword = this.searchKeyword;
}, (error) => {
if (this.onError) {
this.onError(CometChatException(error));
}
this.state = States.error;
this.ref.detectChanges();
this.fetchingGroups = false;
});
}
catch (error) {
if (this.onError) {
this.onError(CometChatException(error));
}
this.state = States.error;
this.ref.detectChanges();
this.fetchingGroups = false;
}
}
else {
this.state = States.loaded;
return;
}
};
/**
* @param {string} key
*/
this.onSearch = (key) => {
this.searchKeyword = key;
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
const request = this.getRequestBuilder();
this.groupsRequest = request;
if (!this.disableLoadingState) {
this.groupMembers = [];
}
this.fetchNextGroupMembers();
}, 500);
};
this.membersStyle = () => {
return {
padding: this.groupMembersStyle.padding,
};
};
// styles
this.backButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.groupMembersStyle.backButtonIconTint ||
this.themeService.theme.palette.getPrimary(),
};
};
this.closeButtonStyle = () => {
return {
height: "24px",
width: "24px",
border: "none",
borderRadius: "0",
background: "transparent",
buttonIconTint: this.groupMembersStyle.closeButtonIconTint ||
this.themeService.theme.palette.getPrimary(),
};
};
this.wrapperStyle = () => {
return {
height: this.groupMembersStyle.height,
width: this.groupMembersStyle.width,
background: this.groupMembersStyle.background ||
this.themeService.theme.palette.getBackground(),
border: this.groupMembersStyle.border,
borderRadius: this.groupMembersStyle.borderRadius,
};
};
this.getScopeStyle = () => {
return {
textFont: this.groupScopeStyle.textFont,
textColor: this.groupScopeStyle.textColor,
};
};
}
closeClicked() {
if (this.onClose) {
this.onClose();
}
}
backClicked() {
if (this.onBack) {
this.onBack();
}
}
onMemberSelected(member, event) {
let selected = event?.detail?.checked;
if (this.onSelect) {
this.onSelect(member, selected);
}
}
ngOnInit() {
this.onScrolledToBottom = this.fetchNextGroupMembers;
this.setThemeStyle();
this.attachListeners();
CometChat.getLoggedinUser()
.then((user) => {
this.loggedInUser = user;
this.groupsRequest = this.getRequestBuilder();
if (!this.fetchingGroups) {
this.fetchNextGroupMembers();
}
})
.catch((error) => {
if (this.onError) {
this.onError(error);
}
});
}
ngOnChanges(changes) {
if (changes["searchKeyword"]) {
this.searchKeyWordUpdated();
}
}
ngOnDestroy() {
this.removeListener();
}
changeMemberScope(event) {
CometChat.updateGroupMemberScope(this.group.getGuid(), this.selectedMember.getUid(), event?.detail?.value)
.then((member) => {
let scope = event?.detail?.value;
this.changeScope = false;
this.selectedMember?.setScope(scope);
this.updateMember(this.selectedMember);
CometChatGroupEvents.ccGroupMemberScopeChanged.next({
scopeChangedFrom: this.selectedMember?.getScope(),
scopeChangedTo: scope,
message: this.createActionMessage(this.selectedMember, CometChatUIKitConstants.groupMemberAction.SCOPE_CHANGE),
group: this.group,
updatedUser: this.selectedMember,
});
this.selectedMember = null;
this.changeScope = false;
})
.catch((err) => {
this.changeScope = false;
this.selectedMember = null;
});
}
createActionMessage(actionOn, action) {
const messageUtils = new MessageUtils();
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);
actionMessage.data = {
extras: {
scope: {
new: actionOn.getScope(),
},
},
};
actionMessage.setNewScope(actionOn.getScope());
actionMessage.setMessage(messageUtils.getActionMessage(actionMessage));
return actionMessage;
}
attachListeners() {
//Attaching User Listeners to dynamilcally update when a user comes online and goes offline
CometChat.addUserListener(this.membersListenerId, new CometChat.UserListener({
onUserOnline: (onlineUser) => {
/* when someuser/friend comes online, user will be received here */
this.updateMemberStatus(onlineUser);
},
onUserOffline: (offlineUser) => {
/* when someuser/friend went offline, user will be received here */
this.updateMemberStatus(offlineUser);
},
}));
CometChat.addGroupListener(this.membersListenerId, new CometChat.GroupListener({
onGroupMemberScopeChanged: (message, changedUser, newScope, oldScope, changedGroup) => {
if (changedUser.getUid() == this.loggedInUser?.getUid()) {
changedGroup.setScope(newScope);
}
this.updateMember(changedUser);
},
onGroupMemberKicked: (message, kickedUser, kickedBy, kickedFrom) => {
this.addRemoveMember(kickedUser);
},
onGroupMemberBanned: (message, bannedUser, bannedBy, bannedFrom) => {
this.addRemoveMember(bannedUser);
},
onGroupMemberUnbanned: (message, unbannedUser, unbannedBy, unbannedFrom) => {
if (unbannedUser.getUid() == this.loggedInUser?.getUid()) {
unbannedFrom.setHasJoined(false);
}
this.addRemoveMember(unbannedUser);
},
onMemberAddedToGroup: (message, userAdded, userAddedBy, userAddedIn) => {
let member = new CometChat.GroupMember(userAdded.getUid(), CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT);
member.setName(userAdded.getName());
member.setGuid(this.group.getGuid());
member.setUid(userAdded.getUid());
if (userAdded.getUid() == this.loggedInUser?.getUid()) {
userAddedIn.setHasJoined(true);
}
this.addRemoveMember(member);
},
onGroupMemberLeft: (message, leavingUser, group) => {
if (leavingUser.getUid() == this.loggedInUser?.getUid()) {
group.setHasJoined(false);
}
this.addRemoveMember(leavingUser);
},
onGroupMemberJoined: (message, joinedUser, joinedGroup) => {
this.addRemoveMember(joinedUser);
},
}));
}
removeListener() {
CometChat.removeUserListener(this.membersListenerId);
this.membersListenerId = "";
}
getRequestBuilder() {
if (!this.searchKeyword) {
this.previousSearchKeyword = "";
}
if (this.searchRequestBuilder) {
return this.searchRequestBuilder
.setSearchKeyword(this.searchKeyword)
.build();
}
else if (this.groupMemberRequestBuilder) {
return this.groupMemberRequestBuilder
.setSearchKeyword(this.searchKeyword)
.build();
}
else {
return new CometChat.GroupMembersRequestBuilder(this.group.getGuid())
.setLimit(this.limit)
.setSearchKeyword(this.searchKeyword)
.build();
}
}
setThemeStyle() {
this.setGroupMembersStyle();
this.setScopeStyle();
this.setListItemStyle();
this.setAvatarStyle();
this.setStatusStyle();
this.menuListStyle = new MenuListStyle({
border: "none",
borderRadius: "8px",
background: "transparent",
submenuWidth: "100%",
submenuHeight: "100%",
submenuBorder: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
submenuBorderRadius: "8px",
submenuBackground: this.themeService.theme.palette.getBackground(),
moreIconTint: this.themeService.theme.palette.getPrimary(),
});
this.modalStyle.boxShadow = `0px 0px 1px ${this.themeService.theme.palette.getAccent600()}`;
this.modalStyle.background =
this.themeService.theme.palette.getBackground();
this.groupScopeStyle.closeIconTint =
this.groupScopeStyle.closeIconTint || this.themeService.theme.palette.getPrimary();
this.groupScopeStyle.buttonBackground =
this.groupScopeStyle.buttonBackground || this.themeService.theme.palette.getPrimary();
}
setGroupMembersStyle() {
let defaultStyle = new GroupMembersStyle({
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent50()}`,
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
emptyStateTextFont: fontHelper(this.themeService.theme.typography.title1),
emptyStateTextColor: this.themeService.theme.palette.getAccent600(),
errorStateTextFont: fontHelper(this.themeService.theme.typography.title1),
errorStateTextColor: this.themeService.theme.palette.getAccent600(),
loadingIconTint: this.themeService.theme.palette.getAccent600(),
onlineStatusColor: this.themeService.theme.palette.getSuccess(),
separatorColor: this.themeService.theme.palette.getAccent400(),
width: "100%",
height: "100%",
borderRadius: "none",
searchIconTint: this.themeService.theme.palette.getAccent600(),
searchPlaceholderTextColor: this.themeService.theme.palette.getAccent600(),
searchBackground: this.themeService.theme.palette.getAccent100(),
searchPlaceholderTextFont: fontHelper(this.themeService.theme.typography.text3),
searchTextColor: this.themeService.theme.palette.getAccent600(),
searchTextFont: fontHelper(this.themeService.theme.typography.text3),
searchBorderRadius: "8px",
closeButtonIconTint: this.themeService.theme.palette.getPrimary(),
backButtonIconTint: this.themeService.theme.palette.getPrimary(),
padding: "0 100px",
});
this.groupMembersStyle = { ...defaultStyle, ...this.groupMembersStyle };
this.listStyle = {
titleTextFont: this.groupMembersStyle.titleTextFont ||
fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.groupMembersStyle.titleTextColor ||
this.themeService.theme.palette.getAccent(),
emptyStateTextFont: this.groupMembersStyle.emptyStateTextFont,
emptyStateTextColor: this.groupMembersStyle.emptyStateTextColor,
errorStateTextFont: this.groupMembersStyle.errorStateTextFont,
errorStateTextColor: this.groupMembersStyle.errorStateTextColor,
loadingIconTint: this.groupMembersStyle.loadingIconTint,
separatorColor: this.groupMembersStyle.separatorColor,
searchIconTint: this.groupMembersStyle.searchIconTint,
searchBorder: this.groupMembersStyle.searchBorder,
searchBorderRadius: this.groupMembersStyle.searchBorderRadius,
searchBackground: this.groupMembersStyle.searchBackground,
searchPlaceholderTextFont: this.groupMembersStyle.searchPlaceholderTextFont,
searchPlaceholderTextColor: this.groupMembersStyle.searchPlaceholderTextColor,
searchTextFont: this.groupMembersStyle.searchTextFont,
searchTextColor: this.groupMembersStyle.searchTextColor,
};
this.checkboxStyle = {
height: "24px",
width: "24px",
border: "none",
borderRadius: "4px",
checkedBackgroundColor: this.themeService.theme.palette.getPrimary(),
uncheckedBackgroundColor: this.themeService.theme.palette.getAccent400()
};
}
setListItemStyle() {
let defaultStyle = new ListItemStyle({
height: "45px",
width: "100%",
background: this.themeService.theme.palette.getBackground(),
activeBackground: "",
borderRadius: "0",
titleFont: fontHelper(this.themeService.theme.typography.title2),
titleColor: this.themeService.theme.palette.getAccent(),
border: "none",
separatorColor: this.themeService.theme.palette.getAccent200(),
hoverBackground: "",
});
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,
};
}
setScopeStyle() {
let defaultStyle = new ChangeScopeStyle({
titleTextFont: fontHelper(this.themeService.theme.typography.title1),
titleTextColor: this.themeService.theme.palette.getAccent(),
activeTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
activeTextColor: this.themeService.theme.palette.getAccent(),
activeTextBackground: this.themeService.theme.palette.getAccent200(),
arrowIconTint: this.themeService.theme.palette.getAccent900(),
textFont: fontHelper(this.themeService.theme.typography.subtitle1),
textColor: this.themeService.theme.palette.getAccent600(),
optionBackground: this.themeService.theme.palette.getBackground(),
optionBorder: "none",
optionBorderRadius: "0",
hoverTextFont: fontHelper(this.themeService.theme.typography.subtitle1),
hoverTextColor: this.themeService.theme.palette.getAccent900(),
hoverTextBackground: this.themeService.theme.palette.getAccent100(),
buttonTextFont: fontHelper(this.themeService.theme.typography.title2),
buttonTextColor: this.themeService.theme.palette.getAccent("dark"),
buttonBackground: this.themeService.theme.palette.getPrimary(),
closeIconTint: this.themeService.theme.palette.getPrimary(),
background: this.themeService.theme.palette.getBackground(),
border: `1px solid ${this.themeService.theme.palette.getAccent200()}`,
borderRadius: "8px",
height: "200px",
width: "280px",
});
this.groupScopeStyle = { ...defaultStyle, ...this.groupScopeStyle };
}
}
CometChatGroupMembersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupMembersComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
CometChatGroupMembersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatGroupMembersComponent, selector: "cometchat-group-members", inputs: { groupMemberRequestBuilder: "groupMemberRequestBuilder", searchRequestBuilder: "searchRequestBuilder", subtitleView: "subtitleView", listItemView: "listItemView", tailView: "tailView", disableUsersPresence: "disableUsersPresence", menu: "menu", options: "options", backButtonIconURL: "backButtonIconURL", closeButtonIconURL: "closeButtonIconURL", showBackButton: "showBackButton", hideSeparator: "hideSeparator", selectionMode: "selectionMode", searchPlaceholder: "searchPlaceholder", searchIconURL: "searchIconURL", hideSearch: "hideSearch", title: "title", onError: "onError", backdropStyle: "backdropStyle", onBack: "onBack", onClose: "onClose", onSelect: "onSelect", group: "group", emptyStateView: "emptyStateView", errorStateView: "errorStateView", loadingIconURL: "loadingIconURL", loadingStateView: "loadingStateView", emptyStateText: "emptyStateText", errorStateText: "errorStateText", titleAlignment: "titleAlignment", dropdownIconURL: "dropdownIconURL", statusIndicatorStyle: "statusIndicatorStyle", avatarStyle: "avatarStyle", groupMembersStyle: "groupMembersStyle", groupScopeStyle: "groupScopeStyle", listItemStyle: "listItemStyle", onItemClick: "onItemClick", onEmpty: "onEmpty", userPresencePlacement: "userPresencePlacement", disableLoadingState: "disableLoadingState", searchKeyword: "searchKeyword" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-group-members__back\">\n <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"\n (cc-button-clicked)=\"backClicked()\">\n\n </cometchat-button>\n </div>\n <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n <div class=\"cc-group-members__menus\">\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n </div>\n <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\"\n [onSearch]=\"onSearch\" [list]=\"groupMembers\" [searchText]=\"searchKeyword\"\n [searchPlaceholderText]=\"searchPlaceholder\" [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"\n [title]=\"title\" [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n <ng-template #listItem let-groupMember>\n <cometchat-list-item [title]=\"groupMember?.name\" [avatarURL]=\"groupMember?.avatar\"\n [avatarName]=\"groupMember?.name\" [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [statusIndicatorStyle]=\"getStatusIndicatorStyle(groupMember)\" [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\"\n [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(groupMember)\"\n [userPresencePlacement]=\"userPresencePlacement\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-group-members__subtitle-view\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <div slot=\"menuView\" class=\"cc-group-members__options\" *ngIf=\" !tailView && options\">\n <cometchat-menu-list [data]=\"options(groupMember)\" [menuListStyle]=\"menuListStyle\"\n (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n </div>\n <div slot=\"tailView\" class=\"cc-group-members__tail-view\">\n\n <div *ngIf=\"tailView\">\n <ng-container *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n </ng-container>\n\n </div>\n <div *ngIf=\"selectionMode != selectionmodeEnum.none\">\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-group-members__selection--single\">\n <cometchat-radio-button (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\">\n </cometchat-radio-button>\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-group-members__selection--multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n </div>\n </div>\n <div *ngIf=\"!tailView\">\n <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n <cometchat-menu-list [moreIconURL]=\"moreIconURL\" *ngIf=\"isArray(getOptions(groupMember))\"\n [topMenuSize]=\"0\" [data]=\"getOptions(groupMember)\"\n (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\" [menuListStyle]=\"menuListStyle\">\n </cometchat-menu-list>\n <cometchat-label *ngIf=\" isString(getOptions(groupMember))\" [text]=\"getOptions(groupMember)\"\n [labelStyle]=\"getScopeStyle()\">\n\n </cometchat-label>\n\n </div>\n </div>\n </div>\n </cometchat-list-item>\n\n </ng-template>\n </div>\n <div class=\"cc-group-members__close\" *ngIf=\"closeButtonIconURL\">\n <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\"\n (cc-button-clicked)=\"closeClicked()\">\n\n </cometchat-button>\n </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\" [backdropStyle]=\"backdropStyle\">\n <cometchat-change-scope [changeScopeStyle]=\"groupScopeStyle\" [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\"\n (cc-changescope-close-clicked)=\"changeScope = false;\" (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n </cometchat-change-scope>\n</cometchat-backdrop>", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden;box-sizing:border-box}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right:8px}\n"], components: [{ type: i2.CometchatListComponent, selector: "cometchat-list", inputs: ["listItemView", "onScrolledToBottom", "onScrolledToTop", "list", "onSearch", "getSectionHeader", "searchText", "searchIconURL", "listStyle", "searchPlaceholderText", "hideSearch", "hideError", "title", "titleAlignment", "errorStateView", "loadingStateView", "emptyStateView", "state", "errorStateText", "emptyStateText", "loadingIconURL", "showSectionHeader", "sectionHeaderField", "DateSeparatorPattern", "dateSeparatorStyle"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatGroupMembersComponent, decorators: [{
type: Component,
args: [{ selector: "cometchat-group-members", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-group-members\" [ngStyle]=\"wrapperStyle()\">\n <div class=\"cc-group-members__back\">\n <cometchat-button [iconURL]=\"backButtonIconURL\" [buttonStyle]=\"backButtonStyle()\" *ngIf=\"showBackButton\"\n (cc-button-clicked)=\"backClicked()\">\n\n </cometchat-button>\n </div>\n <div class=\"cc-group-members__wrapper\" [ngStyle]=\"membersStyle()\">\n <div class=\"cc-group-members__menus\">\n <ng-container *ngTemplateOutlet=\"menu\">\n </ng-container>\n </div>\n <cometchat-list [listItemView]=\"listItemView ? listItemView : listItem\" [onScrolledToBottom]=\"onScrolledToBottom\"\n [onSearch]=\"onSearch\" [list]=\"groupMembers\" [searchText]=\"searchKeyword\"\n [searchPlaceholderText]=\"searchPlaceholder\" [searchIconURL]=\"searchIconURL\" [hideSearch]=\"hideSearch\"\n [title]=\"title\" [emptyStateText]=\"emptyStateText\" [loadingIconURL]=\"loadingIconURL\"\n [titleAlignment]=\"titleAlignment\" [loadingStateView]=\"loadingStateView\" [emptyStateView]=\"emptyStateView\"\n [errorStateText]=\"errorStateText\" [errorStateView]=\"errorStateView\" [listStyle]=\"listStyle\" [state]=\"state\">\n </cometchat-list>\n <ng-template #listItem let-groupMember>\n <cometchat-list-item [title]=\"groupMember?.name\" [avatarURL]=\"groupMember?.avatar\"\n [avatarName]=\"groupMember?.name\" [listItemStyle]=\"listItemStyle\" [avatarStyle]=\"avatarStyle\"\n [statusIndicatorStyle]=\"getStatusIndicatorStyle(groupMember)\" [statusIndicatorColor]=\"getStatusIndicatorColor(groupMember)\"\n [hideSeparator]=\"hideSeparator\" (cc-listitem-clicked)=\"onClick(groupMember)\"\n [userPresencePlacement]=\"userPresencePlacement\">\n <div slot=\"subtitleView\" *ngIf=\"subtitleView\" class=\"cc-group-members__subtitle-view\">\n <ng-container *ngTemplateOutlet=\"subtitleView\">\n </ng-container>\n </div>\n <div slot=\"menuView\" class=\"cc-group-members__options\" *ngIf=\" !tailView && options\">\n <cometchat-menu-list [data]=\"options(groupMember)\" [menuListStyle]=\"menuListStyle\"\n (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\"></cometchat-menu-list>\n </div>\n <div slot=\"tailView\" class=\"cc-group-members__tail-view\">\n\n <div *ngIf=\"tailView\">\n <ng-container *ngTemplateOutlet=\"tailView;context:{ $implicit: groupMember }\">\n </ng-container>\n\n </div>\n <div *ngIf=\"selectionMode != selectionmodeEnum.none\">\n <div *ngIf=\"selectionMode == selectionmodeEnum.single\" class=\"cc-group-members__selection--single\">\n <cometchat-radio-button (cc-radio-button-changed)=\"onMemberSelected(groupMember,$event)\">\n </cometchat-radio-button>\n </div>\n <div *ngIf=\"selectionMode == selectionmodeEnum.multiple\" class=\"cc-group-members__selection--multiple\">\n <cometchat-checkbox [checkboxStyle]=\"checkboxStyle\" (cc-checkbox-changed)=\"onMemberSelected(groupMember,$event)\"></cometchat-checkbox>\n </div>\n </div>\n <div *ngIf=\"!tailView\">\n <div class=\"cc-group-members__scopechange\" slot=\"tailView\">\n\n <cometchat-menu-list [moreIconURL]=\"moreIconURL\" *ngIf=\"isArray(getOptions(groupMember))\"\n [topMenuSize]=\"0\" [data]=\"getOptions(groupMember)\"\n (cc-menu-clicked)=\"handleMenuAction($event, groupMember)\" [menuListStyle]=\"menuListStyle\">\n </cometchat-menu-list>\n <cometchat-label *ngIf=\" isString(getOptions(groupMember))\" [text]=\"getOptions(groupMember)\"\n [labelStyle]=\"getScopeStyle()\">\n\n </cometchat-label>\n\n </div>\n </div>\n </div>\n </cometchat-list-item>\n\n </ng-template>\n </div>\n <div class=\"cc-group-members__close\" *ngIf=\"closeButtonIconURL\">\n <cometchat-button [iconURL]=\"closeButtonIconURL\" [buttonStyle]=\"closeButtonStyle()\"\n (cc-button-clicked)=\"closeClicked()\">\n\n </cometchat-button>\n </div>\n</div>\n<cometchat-backdrop *ngIf=\"changeScope && memberScope.length > 0\" [backdropStyle]=\"backdropStyle\">\n <cometchat-change-scope [changeScopeStyle]=\"groupScopeStyle\" [options]=\"memberScope\" [arrowIconURL]=\"dropdownIconURL\"\n (cc-changescope-close-clicked)=\"changeScope = false;\" (cc-changescope-changed)=\"changeMemberScope($event)\">\n\n </cometchat-change-scope>\n</cometchat-backdrop>", styles: [".cc-group-members{display:flex;height:100%;width:100%;overflow:hidden;box-sizing:border-box}.cc-group-members__back{position:absolute;left:8px;padding:12px 8px 8px}.cc-group-members__wrapper{height:100%;padding:8px;width:100%}.cc-group-members__close{position:absolute;right:8px;padding:8px}.cc-group-members__tail-view{position:relative;display:flex;gap:8px;justify-content:flex-end;align-items:center}.cc-group-members__menus{position:absolute;right:12px;padding:12px;cursor:pointer}.scope__changed{height:100%;width:-moz-fit-content;width:fit-content;position:absolute;right:8px}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.CometChatThemeService }]; }, propDecorators: { groupMemberRequestBuilder: [{
type: Input
}], searchRequestBuilder: [{
type: Input
}], subtitleView: [{
type: Input
}], listItemView: [{
type: Input
}], tailView: [{
type: Input
}], disableUsersPresence: [{
type: Input
}], menu: [{
type: Input
}], options: [{
type: Input
}], backButtonIconURL: [{
type: Input
}], closeButtonIconURL: [{
type: Input
}], showBackButton: [{
type: Input
}], hideSeparator: [{
type: Input
}], selectionMode: [{
type: Input
}], searchPlaceholder: [{
type: Input
}], searchIconURL: [{
type: Input
}], hideSearch: [{
type: Input
}], title: [{
type: Input
}], onError: [{
type: Input
}], backdropStyle: [{
type: Input
}], onBack: [{
type: Input
}], onClose: [{
type: Input
}], onSelect: [{
type: Input
}], group: [{
type: Input
}], emptyStateView: [{
type: Input
}], errorStateView: [{
type: Input
}], loadingIconURL: [{
type: Input
}], loadingStateView: [{
type: Input
}], emptyStateText: [{
type: Input
}], errorStateText: [{
type: Input
}], titleAlignment: [{
type: Input
}], dropdownIconURL: [{
type: Input
}], statusIndicatorStyle: [{
type: Input
}], avatarStyle: [{
type: Input
}], groupMembersStyle: [{
type: Input
}], groupScopeStyle: [{
type: Input
}], listItemStyle: [{
type: Input
}], onItemClick: [{
type: Input
}], onEmpty: [{
type: Input
}], userPresencePlacement: [{
type: Input
}], disableLoadingState: [{
type: Input
}], searchKeyword: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tZXRjaGF0LWdyb3VwLW1lbWJlcnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2hhdC11aWtpdC1hbmd1bGFyL3NyYy9Db21ldENoYXRHcm91cE1lbWJlcnMvY29tZXRjaGF0LWdyb3VwLW1lbWJlcnMvY29tZXRjaGF0LWdyb3VwLW1lbWJlcnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2hhdC11aWtpdC1hbmd1bGFyL3NyYy9Db21ldENoYXRHcm91cE1lbWJlcnMvY29tZXRjaGF0LWdyb3VwLW1lbWJlcnMvY29tZXRjaGF0LWdyb3VwLW1lbWJlcnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLFdBQVcsRUFFWCxnQkFBZ0IsRUFFaEIsYUFBYSxFQUNiLGFBQWEsR0FDZCxNQUFNLDJCQUEyQixDQUFDO0FBQ25DLE9BQU8sRUFFTCxxQkFBcUIsRUFDckIsZ0JBQWdCLEVBQ2hCLGlCQUFpQixHQUVsQixNQUFNLHlCQUF5QixDQUFDO0FBQ2pDLE9BQU8sRUFDTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULEtBQUssR0FLTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0wsb0JBQW9CLEVBR3BCLHVCQUF1QixFQUN2QixhQUFhLEVBQ2IsTUFBTSxFQUNOLGNBQWMsRUFDZCxxQkFBcUIsRUFDckIsVUFBVSxFQUNWLFFBQVEsR0FDVCxNQUFNLDRCQUE0QixDQUFDO0FBR3BDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUMzRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUUxRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUNBQWlDLENBQUM7Ozs7O0FBRS9EOzs7Ozs7OztHQVFHO0FBT0gsTUFBTSxPQUFPLDhCQUE4QjtJQWlKekMsWUFDVSxHQUFzQixFQUN0QixZQUFtQztRQURuQyxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQUN0QixpQkFBWSxHQUFaLFlBQVksQ0FBdUI7UUE3SXBDLHlCQUFvQixHQUFZLEtBQUssQ0FBQztRQUt0QyxzQkFBaUIsR0FBVyx1QkFBdUIsQ0FBQztRQUNwRCx1QkFBa0IsR0FBdUIsb0JBQW9CLENBQUM7UUFDOUQsbUJBQWMsR0FBWSxJQUFJLENBQUM7UUFDL0Isa0JBQWEsR0FBWSxLQUFLLENBQUM7UUFDL0Isa0JBQWEsR0FBa0IsYUFBYSxDQUFDLElBQUksQ0FBQztRQUNsRCxzQkFBaUIsR0FBVyxnQkFBZ0IsQ0FBQztRQUM3QyxrQkFBYSxHQUFXLG1CQUFtQixDQUFDO1FBQzVDLGVBQVUsR0FBWSxJQUFJLENBQUM7UUFDM0IsVUFBSyxHQUFXLFFBQVEsQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNwQyxZQUFPLEdBQTRELENBQzFFLEtBQW1DLEVBQ25DLEVBQUU7WUFDRixPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3JCLENBQUMsQ0FBQztRQUNPLGtCQUFhLEdBQWtCO1lBQ3RDLE1BQU0sRUFBRSxNQUFNO1lBQ2QsS0FBSyxFQUFFLE1BQU07WUFDYixVQUFVLEVBQUUsb0JBQW9CO1lBQ2hDLFFBQVEsRUFBRSxPQUFPO1NBQ2xCLENBQUM7UUFVTyxtQkFBYyxHQUFXLG9CQUFvQixDQUFDO1FBRTlDLG1CQUFjLEdBQVcsUUFBUSxDQUFDLGdCQUFnQixDQUFDLENBQUM7UUFDcEQsbUJBQWMsR0FBVyxRQUFRLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUNyRCxtQkFBYyxHQUFtQixjQUFjLENBQUMsTUFBTSxDQUFDO1FBQ3ZELG9CQUFlLEdBQVcsdUJBQXVCLENBQUM7UUFDbEQseUJBQW9CLEdBQVE7WUFDbkMsTUFBTSxFQUFFLE1BQU07WUFDZCxLQUFLLEVBQUUsTUFBTTtZQUNiLFlBQVksRUFBRSxNQUFNO1lBQ3BCLE1BQU0sRUFBRSxFQUFFO1NBQ1gsQ0FBQztRQUNPLGdCQUFXLEdBQWdCO1lBQ2xDLFlBQVksRUFBRSxNQUFNO1lBQ3BCLEtBQUssRUFBRSxNQUFNO1lBQ2IsTUFBTSxFQUFFLE1BQU07U0FDZixDQUFDO1FBQ08sc0JBQWlCLEdBQXNCO1lBQzlDLEtBQUssRUFBRSxNQUFNO1lBQ2IsTUFBTSxFQUFFLE1BQU07WUFDZCxNQUFNLEVBQUUsRUFBRTtZQUNWLFlBQVksRUFBRSxFQUFFO1NBQ2pCLENBQUM7UUFDTyxvQkFBZSxHQUFxQixJQUFJLGdCQUFnQixDQUFDO1lBQ2hFLE1BQU0sRUFBRSxPQUFPO1lBQ2YsS0FBSyxFQUFFLE9BQU87WUFDZCxhQUFhLEVBQUMsRUFBRTtZQUNoQixnQkFBZ0IsRUFBQyxFQUFFO1NBQ3BCLENBQUMsQ0FBQztRQUNNLGtCQUFhLEdBQWtCO1lBQ3RDLE1B