+ Conversations module helps you to list the recent conversations
+ between your users and groups. To learn more about its components
+ click here.
+
-
-
-
- Chats
-
- Conversations module helps you to list the recent conversations between your users and groups. To learn more about its components click here.
-
-
-
-
-
-
-
- Calls
-
- Calls module helps you to list the recent calls between your users and groups. To learn more about its components click here.
-
-
-
-
-
-
-
- Messages
-
- Messages module helps you to send and receive in a conversation between a user or group. To learn more about its components click here.
-
-
-
-
-
-
-
- Users
-
- Users module helps you list all the users available in your app. To learn more about its components click here.
-
-
-
-
-
-
-
- Groups
-
- Groups module helps you list all the groups you are part of in your app. To learn more about its components click here.
-
-
-
-
-
-
-
- Shared
-
- Share module contains several reusable components that are divided into Primary, Secondary and SDK derived components. To learn more about these components click here.
-
-
-
-
-
+
+
+
+
+
+ Calls
+
+
+ Calls module helps you to list the recent calls between your users
+ and groups. To learn more about its components click here.
+
-
+
+
+
+
+ Call Logs
+
+ Call Logs module helps you to list the recent calls between your
+ users and groups. To learn more about its components click here.
+
-
-
-
-
- UI Components {{pageName}}
-
+
+
+
+
+
+ Messages
+
+ Messages module helps you to send and receive in a conversation
+ between a user or group. To learn more about its components click
+ here.
+
-
-
-
+
+
+
+
+ Users
+
+ Users module helps you list all the users available in your app. To
+ learn more about its components click here.
+
+
+
+
+
+
+ Groups
+
+ Groups module helps you list all the groups you are part of in your
+ app. To learn more about its components click here.
+
+
+
+
+
+ Shared
+
+ Share module contains several reusable components that are divided
+ into Primary, Secondary and SDK derived components. To learn more
+ about these components click here.
+
- CometChatSoundManager allows you to play different types of audio which is required for incoming and outgoing events in UI Kit.
-
-
-
-
-
-
-
- Theme
-
- CometChatTheme is a style applied to every component and every view in the activity or component in the UI Kit.
-
-
-
-
-
-
-
- Localize
-
- CometChatLocalize allows you to detect the language of your users based on their browser or device settings and set the language accordingly.
-
-
-
-
-
-
Views
-
-
-
-
- List Item
-
- ListItem displays data on a tile and that tile may contain leading, trailing, title and subtitle widgets.To learn more about this component click here.
-
+
+
+
+
+ Sound Manager
+
+
+ CometChatSoundManager allows you to play different types of audio
+ which is required for incoming and outgoing events in UI Kit.
-
-
-
+
+
+
- Avatar
-
- CometChatAvatar component displays an image or user/group avatar with fallback to the first two letters of the user name/group name.
-
-
-
-
-
+ Theme
+
+ CometChatTheme is a style applied to every component and every view
+ in the activity or component in the UI Kit.
+
+
+
+
- Status Indicator
-
- StatusIndicator component indicates whether a user is online or offline.
-
+ Localize
+
+ CometChatLocalize allows you to detect the language of your users
+ based on their browser or device settings and set the language
+ accordingly.
+
+
-
-
-
-
- {{'Badge'}}
-
- CometChatBadgeCount is a custom component which is used to display the unread message count. It can be used in places like ConversationListItem, etc.
-
-
+
+ Views
-
-
-
+
+
+
- {{'Receipt'}}
-
- CometChatReceipt component renders the receipts such as sending, sent, delivered, read and error state indicator of a message.
-
-
-
-
-
+ List Item
+
+ ListItem displays data on a tile and that tile may contain leading,
+ trailing, title and subtitle widgets.To learn more about this
+ component click here.
+
+
+
+
- {{'Text Bubble'}}
-
- CometChatTextBubble component displays a text message to learn more about this component click here.
-
-
-
-
-
+ Avatar
+
+ CometChatAvatar component displays an image or user/group avatar
+ with fallback to the first two letters of the user name/group name.
+
+
+
+
- {{'Image Bubble'}}
-
- CometChatImageBubble component displays a media message containing an image to learn more about this component click here.
-
-
-
-
-
+ Status Indicator
+
+ StatusIndicator component indicates whether a user is online or
+ offline.
+
+
+
+
- {{'Video Bubble'}}
-
- CometChatVideoBubble component displays a media message containing a video to learn more about this component click here
-
+ {{
+ "Badge"
+ }}
+
+ CometChatBadgeCount is a custom component which is used to display
+ the unread message count. It can be used in places like
+ ConversationListItem, etc.
+
-
-
-
+
+
+
+
+ {{
+ "Receipt"
+ }}
+
+ CometChatReceipt component renders the receipts such as sending,
+ sent, delivered, read and error state indicator of a message.
+
+
+
+
- {{'Audio Bubble'}}
-
- CometChatAudioBubble displays a media message containing an audio.
-
+ {{
+ "Text Bubble"
+ }}
+
+ CometChatTextBubble component displays a text message to learn more
+ about this component click here.
+
-
-
-
+
+
+
+
+ {{
+ "Image Bubble"
+ }}
+
+ CometChatImageBubble component displays a media message containing
+ an image to learn more about this component click here.
+
+
+
+
- {{'File Bubble'}}
-
- CometChatFileBubble component displays a media message containing a file. Click here to view the component..
-
+ {{
+ "Video Bubble"
+ }}
+
+ CometChatVideoBubble component displays a media message containing a
+ video to learn more about this component click here
+
-
-
-
-
- {{'Form Bubble'}}
-
- The CometChatFormBubble component is used to render a form within a chat bubble.
- To learn more about this component tap here
+
+
+
+ {{
+ "Audio Bubble"
+ }}
+
+ CometChatAudioBubble displays a media message containing an audio.
+
-
-
-
-
-
- {{'Card Bubble'}}
-
- The CometChatCardBubble component is used to display a card within a
- chat bubble. To learn more about this component tap here.
+
+
+
+ {{
+ "File Bubble"
+ }}
+
+ CometChatFileBubble component displays a media message containing a
+ file. Click here to view the component..
+
+
-
-
-
-
+
-
-
-
-
-
-
-
-
+
+
+
-
-
+
-
-
+
-
-
+
-
-
-
-
-
-
-
-
+
+
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
-
-
-
-
diff --git a/src/app/shared/shared.component.ts b/src/app/shared/shared.component.ts
index 033c6d72..10c7c23f 100644
--- a/src/app/shared/shared.component.ts
+++ b/src/app/shared/shared.component.ts
@@ -1,56 +1,53 @@
-import { ActivatedRoute, Router } from '@angular/router';
import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
-import { CometChatTheme, CometChatThemeService, fontHelper, localize } from '@cometchat/chat-uikit-angular';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+ CometChatTheme,
+ CometChatThemeService,
+ fontHelper,
+ localize,
+} from '@cometchat/chat-uikit-angular';
@Component({
selector: 'cometchat-shared-wrapper',
templateUrl: './shared.component.html',
- styleUrls: ['./shared.component.scss']
+ styleUrls: ['./shared.component.scss'],
})
export class SharedComponent implements OnInit {
-
- public localize:any = localize
- public logoutIconURL:string="assets/logout.svg";
- public soundIconURL:string="assets/sound-small.png";
- public localizeIconURL:string="assets/localize.png";
- public themeIconURL:string="assets/theme.png";
- public conversationIconURL:string="assets/conversation.png";
- public avatarIconURL:string="assets/avatar.png";
- public statusIconURL:string="assets/status.png";
- public badgeIconURL:string="assets/badge.png";
- public receiptIconURL:string="assets/receipt.png";
- public textBubbleIcon:string = "assets/text-bubble.svg"
- public audioBubbleIcon:string = "assets/audio-bubble.svg"
- public videoBubbleIcon:string = "assets/video-bubble.svg"
- public imageBubbleIcon:string = "assets/image-bubble.svg"
- public fileBubbleIcon:string = "assets/file-bubble.svg"
- public formBubbleIcon:string = "assets/form-bubble.svg"
- public cardBubbleIcon:string = "assets/card-bubble.svg"
- public openDataItem:boolean=false;
- public openAvatar:boolean=false;
- public openBadgeCount:boolean=false;
- public openMessageReceipt:boolean=false;
- public openConversationListItem:boolean=false
- public openStatusIndicator:boolean = false;
- public openSoundManager:boolean=false;
- public openTheme:boolean=false;
- public openLocalize:boolean =false;
- public openTextBubble:boolean =false;
- public openAudioBubble:boolean =false;
- public openVideoBubble:boolean =false;
- public openFileBubble:boolean =false;
- public openImageBubble:boolean =false;
- public openFormBubble:boolean =false;
- public openCardBubble:boolean =false;
-
-
-
- constructor( private themeService:CometChatThemeService, private ref:ChangeDetectorRef) {
-
-
- }
-
- ngOnInit(): void {
- }
+ public localize: any = localize;
+ public logoutIconURL: string = 'assets/logout.svg';
+ public soundIconURL: string = 'assets/sound-small.png';
+ public localizeIconURL: string = 'assets/localize.png';
+ public themeIconURL: string = 'assets/theme.png';
+ public conversationIconURL: string = 'assets/conversation.png';
+ public avatarIconURL: string = 'assets/avatar.png';
+ public statusIconURL: string = 'assets/status.png';
+ public badgeIconURL: string = 'assets/badge.png';
+ public receiptIconURL: string = 'assets/receipt.png';
+ public textBubbleIcon: string = 'assets/text-bubble.svg';
+ public audioBubbleIcon: string = 'assets/audio-bubble.svg';
+ public videoBubbleIcon: string = 'assets/video-bubble.svg';
+ public imageBubbleIcon: string = 'assets/image-bubble.svg';
+ public fileBubbleIcon: string = 'assets/file-bubble.svg';
+ public openDataItem: boolean = false;
+ public openAvatar: boolean = false;
+ public openBadgeCount: boolean = false;
+ public openMessageReceipt: boolean = false;
+ public openConversationListItem: boolean = false;
+ public openStatusIndicator: boolean = false;
+ public openSoundManager: boolean = false;
+ public openTheme: boolean = false;
+ public openLocalize: boolean = false;
+ public openTextBubble: boolean = false;
+ public openAudioBubble: boolean = false;
+ public openVideoBubble: boolean = false;
+ public openFileBubble: boolean = false;
+ public openImageBubble: boolean = false;
+
+ constructor(
+ private themeService: CometChatThemeService,
+ private ref: ChangeDetectorRef
+ ) {}
+
+ ngOnInit(): void {}
openModal = (name: string) => {
switch (name) {
@@ -95,101 +92,87 @@ export class SharedComponent implements OnInit {
break;
case 'text':
this.openTextBubble = true;
- break;
- case 'form':
- this.openFormBubble = true;
- break;
- case 'card':
- this.openCardBubble = true;
- break;
+ break;
default:
- // Handle invalid modal name
+ // Handle invalid modal name
}
- }
+ };
- closeModal = ()=>{
+ closeModal = () => {
this.openDataItem = false;
- this.openBadgeCount = false
+ this.openBadgeCount = false;
this.openAvatar = false;
- this.openMessageReceipt=false;
- this.openConversationListItem=false;
+ this.openMessageReceipt = false;
+ this.openConversationListItem = false;
this.openStatusIndicator = false;
this.openSoundManager = false;
this.openTheme = false;
- this.openLocalize =false;
+ this.openLocalize = false;
this.openAudioBubble = false;
this.openVideoBubble = false;
this.openTextBubble = false;
this.openImageBubble = false;
this.openFileBubble = false;
- this.openFormBubble = false;
- this.openCardBubble = false;
- }
+ };
// styles
-style:any={
- sidebarStyle:()=>{
- return{
- background:this.themeService.theme.palette.getSecondary()
-
- }
- },
- headerTitleStyle:()=>{
- return{
- font: fontHelper(this.themeService.theme.typography.heading),
- color:this.themeService.theme.palette.getAccent()
- }
- },
- sectionHeaderStyle:()=>{
- return{
- font: fontHelper(this.themeService.theme.typography.subtitle2),
- color:this.themeService.theme.palette.getAccent400()
- }
- },
- cardTitleStyle:()=>{
- return{
- font: fontHelper(this.themeService.theme.typography.title2),
- color:this.themeService.theme.palette.getAccent()
- }
- },
- cardStyle:()=>{
- return{
- background:this.themeService.theme.palette.getBackground(),
- boxShadow: `${this.themeService.theme.palette.getAccent400()} 0px 0px 5px`
- }
- },
- cardDescriptionStyle:()=>{
- return{
- font: fontHelper(this.themeService.theme.typography.subtitle2),
- color:this.themeService.theme.palette.getAccent600()
-
- }
- },
- footerStyle:()=>{
- return{
- font: fontHelper(this.themeService.theme.typography.subtitle2),
- color:this.themeService.theme.palette.getAccent500()
-
- }
- },
- iconStyle:(icon:string)=>{
- return{
- WebkitMask: `url(${icon}) center center no-repeat`,
- background:this.themeService.theme.palette.getAccent() ,
- height:"28px",
- width:"fit-content"
-
- }
- },
- logoutIoncStyle:()=>{
- return{
- WebkitMask: `url(${this.logoutIconURL}) center center no-repeat`,
- background:"black",
- height:"24px",
- width:"24px"
-
- }
- },
-}
-
+ style: any = {
+ sidebarStyle: () => {
+ return {
+ background: this.themeService.theme.palette.getSecondary(),
+ };
+ },
+ headerTitleStyle: () => {
+ return {
+ font: fontHelper(this.themeService.theme.typography.heading),
+ color: this.themeService.theme.palette.getAccent(),
+ };
+ },
+ sectionHeaderStyle: () => {
+ return {
+ font: fontHelper(this.themeService.theme.typography.subtitle2),
+ color: this.themeService.theme.palette.getAccent400(),
+ };
+ },
+ cardTitleStyle: () => {
+ return {
+ font: fontHelper(this.themeService.theme.typography.title2),
+ color: this.themeService.theme.palette.getAccent(),
+ };
+ },
+ cardStyle: () => {
+ return {
+ background: this.themeService.theme.palette.getBackground(),
+ boxShadow: `${this.themeService.theme.palette.getAccent400()} 0px 0px 5px`,
+ };
+ },
+ cardDescriptionStyle: () => {
+ return {
+ font: fontHelper(this.themeService.theme.typography.subtitle2),
+ color: this.themeService.theme.palette.getAccent600(),
+ };
+ },
+ footerStyle: () => {
+ return {
+ font: fontHelper(this.themeService.theme.typography.subtitle2),
+ color: this.themeService.theme.palette.getAccent500(),
+ };
+ },
+ iconStyle: (icon: string) => {
+ return {
+ WebkitMask: `url(${icon}) center center no-repeat`,
+ background: this.themeService.theme.palette.getAccent(),
+ height: '28px',
+ width: 'fit-content',
+ };
+ },
+ logoutIoncStyle: () => {
+ return {
+ WebkitMask: `url(${this.logoutIconURL}) center center no-repeat`,
+ background: 'black',
+ height: '24px',
+ width: '24px',
+ };
+ },
+ };
}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 892e465f..697df94f 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -1,28 +1,36 @@
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { CometChatConversations, CometChatConversationsWithMessages, CometChatDetails, CometChatGroups, CometChatGroupsWithMessages, CometChatMessageComposer, CometChatMessageHeader, CometChatMessageList, CometChatMessages, CometChatUsers, CometChatUsersWithMessages } from '@cometchat/chat-uikit-angular';
-
-import { AudioBubbleDemoComponent } from './audio-bubble-demo/audio-bubble-demo.component';
-import { AvatarDemoComponent } from './avatar-demo/avatar-demo.component';
-import { BadgeComponent } from './badge-demo/badge-demo.component';
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BrowserModule } from '@angular/platform-browser';
-import { CardBubbleDemoComponent } from './card-bubble-demo/card-bubble-demo.component';
-import { DetailsDemoComponent } from './details-demo/details-demo.component';
-import { FileBubbleDemoComponent } from './file-bubble-demo/file-bubble-demo.component';
-import { FormBubbleDemoComponent } from './form-bubble-demo/form-bubble-demo.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SharedComponent } from './shared.component';
import { FormsModule } from '@angular/forms';
-import { ImageBubbleDemoComponent } from './image-bubble-demo/image-bubble-demo.component';
-import { ListItemDemoComponent } from './list-item-demo/list-item-demo.component';
+import { RouterModule } from '@angular/router';
+import { AvatarDemoComponent } from './avatar-demo/avatar-demo.component';
+import { BadgeComponent } from './badge-demo/badge-demo.component';
import { LocalizeDemoComponent } from './localize-demo/localize-demo.component';
+import { ThemeDemoComponent } from './theme-demo/theme-demo.component';
+import { StatusIndicatorDemoComponent } from './status-indicator-demo/status-indicator-demo.component';
import { ReceiptDemoComponent } from './message-receipt-demo/message-receipt-demo.component';
-import { RouterModule } from '@angular/router';
-import { SharedComponent } from './shared.component';
+import { ListItemDemoComponent } from './list-item-demo/list-item-demo.component';
import { SoundManagerDemoComponent } from './sound-manager-demo/sound-manager-demo.component';
-import { StatusIndicatorDemoComponent } from './status-indicator-demo/status-indicator-demo.component';
+import {
+ CometChatConversationsWithMessages,
+ CometChatConversations,
+ CometChatUsersWithMessages,
+ CometChatUsers,
+ CometChatGroups,
+ CometChatGroupsWithMessages,
+ CometChatMessages,
+ CometChatMessageList,
+ CometChatMessageHeader,
+ CometChatMessageComposer,
+ CometChatDetails,
+} from '@cometchat/chat-uikit-angular';
import { TextBubbleDemoComponent } from './text-bubble-demo/text-bubble-demo.component';
-import { ThemeDemoComponent } from './theme-demo/theme-demo.component';
+import { AudioBubbleDemoComponent } from './audio-bubble-demo/audio-bubble-demo.component';
import { VideoBubbleDemoComponent } from './video-bubble-demo/video-bubble-demo.component';
-
+import { FileBubbleDemoComponent } from './file-bubble-demo/file-bubble-demo.component';
+import { ImageBubbleDemoComponent } from './image-bubble-demo/image-bubble-demo.component';
+import { DetailsDemoComponent } from './details-demo/details-demo.component';
@NgModule({
declarations: [
SharedComponent,
@@ -40,8 +48,6 @@ import { VideoBubbleDemoComponent } from './video-bubble-demo/video-bubble-demo.
FileBubbleDemoComponent,
ImageBubbleDemoComponent,
DetailsDemoComponent,
- FormBubbleDemoComponent,
- CardBubbleDemoComponent
],
imports: [
BrowserModule,
@@ -64,6 +70,6 @@ import { VideoBubbleDemoComponent } from './video-bubble-demo/video-bubble-demo.
],
providers: [],
bootstrap: [SharedComponent],
- schemas:[CUSTOM_ELEMENTS_SCHEMA]
+ schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
-export class SharedModule { }
+export class SharedModule {}
diff --git a/src/assets/call-history.svg b/src/assets/call-history.svg
new file mode 100644
index 00000000..8139f258
--- /dev/null
+++ b/src/assets/call-history.svg
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/src/assets/call-log-detail.svg b/src/assets/call-log-detail.svg
new file mode 100644
index 00000000..36731d7c
--- /dev/null
+++ b/src/assets/call-log-detail.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/call-log-recording.svg b/src/assets/call-log-recording.svg
new file mode 100644
index 00000000..6583dba2
--- /dev/null
+++ b/src/assets/call-log-recording.svg
@@ -0,0 +1,12 @@
+
\ No newline at end of file
diff --git a/src/assets/call-logs.svg b/src/assets/call-logs.svg
new file mode 100644
index 00000000..3290228a
--- /dev/null
+++ b/src/assets/call-logs.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/assets/call-participants.svg b/src/assets/call-participants.svg
new file mode 100644
index 00000000..d738ac35
--- /dev/null
+++ b/src/assets/call-participants.svg
@@ -0,0 +1,5 @@
+
\ No newline at end of file