@cometchat/chat-uikit-angular 4.3.20 → 4.3.22

package/esm2020/Shared/Views/AIAssistBotMessageList/aiassist-bot-message-list/aiassist-bot-message-list.component.mjs

@@ -244,9 +244,9 @@ export class AIAssistBotMessageListComponent {
         };
     }
 }
-AIAssistBotMessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIAssistBotMessageListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
-AIAssistBotMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AIAssistBotMessageListComponent, selector: "aiassist-bot-message-list", inputs: { hideSearch: "hideSearch", footerView: "footerView", user: "user", group: "group", currentAskAIBot: "currentAskAIBot", subtitleText: "subtitleText", sendIconUrl: "sendIconUrl", waitIcon: "waitIcon", errorIcon: "errorIcon", botFirstMessageText: "botFirstMessageText", closeButtonIconURL: "closeButtonIconURL", sendButtonIconURL: "sendButtonIconURL", avatarStyle: "avatarStyle", aiBotChatHeaderStyle: "aiBotChatHeaderStyle", aiBotChatContainerStyle: "aiBotChatContainerStyle", datePattern: "datePattern", alignment: "alignment" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"cc-ai-assist-message-list__wrapper\"\n  [ngStyle]=\"aiBotChatContainerStyle\">\n  <div class=\"cc-ai-assist-message-list__header-view\"\n    [ngStyle]=\"aiBotChatHeaderStyle\">\n    <div class=\"cc-ai-assist-message-list__header-avatar\">\n      <cometchat-avatar [image]=\"currentAskAIBot?.iconURL\"\n        [avatarStyle]=\"avatarStyle\">\n      </cometchat-avatar>\n      <div class=\"cc-ai-assist-message-list__header-bot-name\">\n\n\n        <div [ngStyle]=\"getBotTitleStyle()\">\n          {{currentAskAIBot?.title}}\n        </div>\n        <div [ngStyle]=\"getBotSubtitleStyle()\">\n          {{subtitleText}}\n        </div>\n      </div>\n\n    </div>\n\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-ai-assist-message-list\">\n    <cometchat-list [listItemView]=\"listItem\" [list]=\"botMessagesList\"\n      [hideSearch]=\"hideSearch\">\n    </cometchat-list>\n    <ng-template #listItem let-message>\n      <cometchat-message-bubble [bottomView]=\"null\"\n        [statusInfoView]=\"statusInfoView\" [threadView]=\"null\"\n        [contentView]=\"contentView\"\n        [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n        [alignment]=\"getBubbleAlignment(message)\" [leadingView]=\"leadingView\"\n        [headerView]=\"bubbleHeader\">\n        <ng-template #contentView>\n          <div class=\"cc-ai-assist-message\">\n            {{message.data.text}}\n          </div>\n        </ng-template>\n        <ng-template #leadingView>\n\n        </ng-template>\n        <ng-template #bubbleHeader>\n\n        </ng-template>\n        <ng-template #statusInfoView>\n          <div class=\"cc__assist-bot__statusinfo\">\n\n            <cometchat-date [pattern]=\"datePattern\"\n              [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"bubbleDateStyle\"></cometchat-date>\n            <cometchat-receipt\n              *ngIf=\"message?.receiverId !==currentAskAIBot.id && message?.getId()===currentMessageObject?.getId()\"\n              [receipt]=\"receipts\" [waitIcon]=\"waitIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </cometchat-message-bubble>\n      <hr>\n    </ng-template>\n  </div>\n\n  <div class=\"cc-ai-assist__input-wrapper\">\n    <div class=\"cc-ai-assist__input\">\n      <cometchat-text-input [textInputStyle]=\"textInputStyle\" #inputRef\n        (cc-text-input-changed)=\"messageInputChanged($event)\"\n        (cc-text-input-entered)=\"handleClick()\"></cometchat-text-input>\n      <cometchat-button [iconURL]=\"sendIconUrl\"\n        (cc-button-clicked)=\"handleClick()\"\n        [buttonStyle]=\"sendButtonStyle\"></cometchat-button>\n    </div>\n  </div>\n</div>\n", styles: [".cc-ai-assist-message-list__wrapper{position:absolute;right:0;top:0;background-color:#fff;width:50%;height:100%}.cc-ai-assist-message-list__header-view{display:flex;justify-content:space-between;align-items:center;height:5%;padding:5px;background-color:#14141426}.cc-ai-assist-message-list__header-avatar{display:flex;align-items:center;gap:8px}.cc-ai-assist-message-list__header-bot-name{display:flex;flex-direction:column}.cc-ai-assist-message-list__header-bot-name>small{color:#14141494;font-family:inter}.cc-ai-assist-message-list{height:85%;border-bottom:1px solid RGB(229,231,233)}.cc-ai-assist-message{padding:8px 12px}.cc-ai-assist__input-wrapper{width:100%;height:7%;position:absolute;bottom:0;padding-left:7px}.cc-ai-assist__input{display:flex;width:98%;align-items:center}cometchat-text-input{width:95%}.cc__assist-bot__statusinfo{display:flex;justify-content:flex-end;align-items:center;width:100%;padding:0 4px;box-sizing:border-box}cometchat-date{margin-top:-2px}\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"] }, { type: i3.CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "statusInfoView", "moreIconURL", "topMenuSize"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIAssistBotMessageListComponent, decorators: [{
+AIAssistBotMessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.CometChatThemeService }], target: i0.ɵɵFactoryTarget.Component });
+AIAssistBotMessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AIAssistBotMessageListComponent, selector: "aiassist-bot-message-list", inputs: { hideSearch: "hideSearch", footerView: "footerView", user: "user", group: "group", currentAskAIBot: "currentAskAIBot", subtitleText: "subtitleText", sendIconUrl: "sendIconUrl", waitIcon: "waitIcon", errorIcon: "errorIcon", botFirstMessageText: "botFirstMessageText", closeButtonIconURL: "closeButtonIconURL", sendButtonIconURL: "sendButtonIconURL", avatarStyle: "avatarStyle", aiBotChatHeaderStyle: "aiBotChatHeaderStyle", aiBotChatContainerStyle: "aiBotChatContainerStyle", datePattern: "datePattern", alignment: "alignment" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div class=\"cc-ai-assist-message-list__wrapper\"\n  [ngStyle]=\"aiBotChatContainerStyle\">\n  <div class=\"cc-ai-assist-message-list__header-view\"\n    [ngStyle]=\"aiBotChatHeaderStyle\">\n    <div class=\"cc-ai-assist-message-list__header-avatar\">\n      <cometchat-avatar [image]=\"currentAskAIBot?.iconURL\"\n        [avatarStyle]=\"avatarStyle\">\n      </cometchat-avatar>\n      <div class=\"cc-ai-assist-message-list__header-bot-name\">\n\n\n        <div [ngStyle]=\"getBotTitleStyle()\">\n          {{currentAskAIBot?.title}}\n        </div>\n        <div [ngStyle]=\"getBotSubtitleStyle()\">\n          {{subtitleText}}\n        </div>\n      </div>\n\n    </div>\n\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-ai-assist-message-list\">\n    <cometchat-list [listItemView]=\"listItem\" [list]=\"botMessagesList\"\n      [hideSearch]=\"hideSearch\">\n    </cometchat-list>\n    <ng-template #listItem let-message>\n      <cometchat-message-bubble [bottomView]=\"null\"\n        [statusInfoView]=\"statusInfoView\" [threadView]=\"null\"\n        [contentView]=\"contentView\"\n        [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n        [alignment]=\"getBubbleAlignment(message)\" [leadingView]=\"leadingView\"\n        [headerView]=\"bubbleHeader\">\n        <ng-template #contentView>\n          <div class=\"cc-ai-assist-message\">\n            {{message.data.text}}\n          </div>\n        </ng-template>\n        <ng-template #leadingView>\n\n        </ng-template>\n        <ng-template #bubbleHeader>\n\n        </ng-template>\n        <ng-template #statusInfoView>\n          <div class=\"cc__assist-bot__statusinfo\">\n\n            <cometchat-date [pattern]=\"datePattern\"\n              [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"bubbleDateStyle\"></cometchat-date>\n            <cometchat-receipt\n              *ngIf=\"message?.receiverId !==currentAskAIBot.id && message?.getId()===currentMessageObject?.getId()\"\n              [receipt]=\"receipts\" [waitIcon]=\"waitIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </cometchat-message-bubble>\n      <hr>\n    </ng-template>\n  </div>\n\n  <div class=\"cc-ai-assist__input-wrapper\">\n    <div class=\"cc-ai-assist__input\">\n      <cometchat-text-input [textInputStyle]=\"textInputStyle\" #inputRef\n        (cc-text-input-changed)=\"messageInputChanged($event)\"\n        (cc-text-input-entered)=\"handleClick()\"></cometchat-text-input>\n      <cometchat-button [iconURL]=\"sendIconUrl\"\n        (cc-button-clicked)=\"handleClick()\"\n        [buttonStyle]=\"sendButtonStyle\"></cometchat-button>\n    </div>\n  </div>\n</div>\n", styles: [".cc-ai-assist-message-list__wrapper{position:absolute;right:0;top:0;background-color:#fff;width:50%;height:100%}.cc-ai-assist-message-list__header-view{display:flex;justify-content:space-between;align-items:center;height:5%;padding:5px;background-color:#14141426}.cc-ai-assist-message-list__header-avatar{display:flex;align-items:center;gap:8px}.cc-ai-assist-message-list__header-bot-name{display:flex;flex-direction:column}.cc-ai-assist-message-list__header-bot-name>small{color:#14141494;font-family:inter}.cc-ai-assist-message-list{height:85%;border-bottom:1px solid RGB(229,231,233)}.cc-ai-assist-message{padding:8px 12px}.cc-ai-assist__input-wrapper{width:100%;height:7%;position:absolute;bottom:0;padding-left:7px}.cc-ai-assist__input{display:flex;width:98%;align-items:center}cometchat-text-input{width:95%}.cc__assist-bot__statusinfo{display:flex;justify-content:flex-end;align-items:center;width:100%;padding:0 4px;box-sizing:border-box}cometchat-date{margin-top:-2px}\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"] }, { type: i3.CometChatMessageBubbleComponent, selector: "cometchat-message-bubble", inputs: ["messageBubbleStyle", "alignment", "options", "id", "leadingView", "headerView", "replyView", "contentView", "threadView", "footerView", "bottomView", "statusInfoView", "moreIconURL", "topMenuSize"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageListComponent, decorators: [{
             type: Component,
             args: [{ selector: "aiassist-bot-message-list", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"cc-ai-assist-message-list__wrapper\"\n  [ngStyle]=\"aiBotChatContainerStyle\">\n  <div class=\"cc-ai-assist-message-list__header-view\"\n    [ngStyle]=\"aiBotChatHeaderStyle\">\n    <div class=\"cc-ai-assist-message-list__header-avatar\">\n      <cometchat-avatar [image]=\"currentAskAIBot?.iconURL\"\n        [avatarStyle]=\"avatarStyle\">\n      </cometchat-avatar>\n      <div class=\"cc-ai-assist-message-list__header-bot-name\">\n\n\n        <div [ngStyle]=\"getBotTitleStyle()\">\n          {{currentAskAIBot?.title}}\n        </div>\n        <div [ngStyle]=\"getBotSubtitleStyle()\">\n          {{subtitleText}}\n        </div>\n      </div>\n\n    </div>\n\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-ai-assist-message-list\">\n    <cometchat-list [listItemView]=\"listItem\" [list]=\"botMessagesList\"\n      [hideSearch]=\"hideSearch\">\n    </cometchat-list>\n    <ng-template #listItem let-message>\n      <cometchat-message-bubble [bottomView]=\"null\"\n        [statusInfoView]=\"statusInfoView\" [threadView]=\"null\"\n        [contentView]=\"contentView\"\n        [messageBubbleStyle]=\"setMessageBubbleStyle(message)\"\n        [alignment]=\"getBubbleAlignment(message)\" [leadingView]=\"leadingView\"\n        [headerView]=\"bubbleHeader\">\n        <ng-template #contentView>\n          <div class=\"cc-ai-assist-message\">\n            {{message.data.text}}\n          </div>\n        </ng-template>\n        <ng-template #leadingView>\n\n        </ng-template>\n        <ng-template #bubbleHeader>\n\n        </ng-template>\n        <ng-template #statusInfoView>\n          <div class=\"cc__assist-bot__statusinfo\">\n\n            <cometchat-date [pattern]=\"datePattern\"\n              [timestamp]=\"message?.getSentAt()\"\n              [dateStyle]=\"bubbleDateStyle\"></cometchat-date>\n            <cometchat-receipt\n              *ngIf=\"message?.receiverId !==currentAskAIBot.id && message?.getId()===currentMessageObject?.getId()\"\n              [receipt]=\"receipts\" [waitIcon]=\"waitIcon\"\n              [errorIcon]=\"errorIcon\"></cometchat-receipt>\n          </div>\n        </ng-template>\n      </cometchat-message-bubble>\n      <hr>\n    </ng-template>\n  </div>\n\n  <div class=\"cc-ai-assist__input-wrapper\">\n    <div class=\"cc-ai-assist__input\">\n      <cometchat-text-input [textInputStyle]=\"textInputStyle\" #inputRef\n        (cc-text-input-changed)=\"messageInputChanged($event)\"\n        (cc-text-input-entered)=\"handleClick()\"></cometchat-text-input>\n      <cometchat-button [iconURL]=\"sendIconUrl\"\n        (cc-button-clicked)=\"handleClick()\"\n        [buttonStyle]=\"sendButtonStyle\"></cometchat-button>\n    </div>\n  </div>\n</div>\n", styles: [".cc-ai-assist-message-list__wrapper{position:absolute;right:0;top:0;background-color:#fff;width:50%;height:100%}.cc-ai-assist-message-list__header-view{display:flex;justify-content:space-between;align-items:center;height:5%;padding:5px;background-color:#14141426}.cc-ai-assist-message-list__header-avatar{display:flex;align-items:center;gap:8px}.cc-ai-assist-message-list__header-bot-name{display:flex;flex-direction:column}.cc-ai-assist-message-list__header-bot-name>small{color:#14141494;font-family:inter}.cc-ai-assist-message-list{height:85%;border-bottom:1px solid RGB(229,231,233)}.cc-ai-assist-message{padding:8px 12px}.cc-ai-assist__input-wrapper{width:100%;height:7%;position:absolute;bottom:0;padding-left:7px}.cc-ai-assist__input{display:flex;width:98%;align-items:center}cometchat-text-input{width:95%}.cc__assist-bot__statusinfo{display:flex;justify-content:flex-end;align-items:center;width:100%;padding:0 4px;box-sizing:border-box}cometchat-date{margin-top:-2px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.CometChatThemeService }]; }, propDecorators: { hideSearch: [{

package/esm2020/Shared/Views/AIAssistBotMessageList/aiassist-bot-message-list.module.mjs

@@ -7,10 +7,10 @@ import { FormsModule } from "@angular/forms";
 import * as i0 from "@angular/core";
 export class AIAssistBotMessageList {
 }
-AIAssistBotMessageList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIAssistBotMessageList, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AIAssistBotMessageList.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIAssistBotMessageList, declarations: [AIAssistBotMessageListComponent], imports: [CommonModule, CometChatList, CometChatMessageBubble, FormsModule], exports: [AIAssistBotMessageListComponent] });
-AIAssistBotMessageList.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIAssistBotMessageList, imports: [[CommonModule, CometChatList, CometChatMessageBubble, FormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIAssistBotMessageList, decorators: [{
+AIAssistBotMessageList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageList, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AIAssistBotMessageList.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageList, declarations: [AIAssistBotMessageListComponent], imports: [CommonModule, CometChatList, CometChatMessageBubble, FormsModule], exports: [AIAssistBotMessageListComponent] });
+AIAssistBotMessageList.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageList, imports: [[CommonModule, CometChatList, CometChatMessageBubble, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AIAssistBotMessageList, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AIAssistBotMessageListComponent],

package/esm2020/Shared/Views/CometChatTabs/cometchat-tabs/cometchat-tabs.component.mjs

@@ -105,11 +105,11 @@ export class CometChatTabsComponent {
         };
     }
 }
-CometChatTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CometChatTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CometChatTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CometChatTabsComponent, selector: "cometchat-tabs", inputs: { tabAlignment: "tabAlignment", disableDragging: "disableDragging", tabsStyle: "tabsStyle", tabs: "tabs", keepAlive: "keepAlive" }, usesOnChanges: true, ngImport: i0, template: " <div class=\"cc-tabs-wrapper\" [ngStyle]=\"getWrapperStyle()\">\n   <div class=\"cc-tabs\" [ngStyle]=\"getTabsStyle()\">\n      <cometchat-draggable [draggableStyle]=\"tabsStyle\" *ngIf=\"!disableDragging; else fixedTabs\">\n         <ng-container *ngTemplateOutlet=\"tabsContainer\">\n         </ng-container>\n      </cometchat-draggable>\n      <ng-template #fixedTabs>\n         <ng-container *ngTemplateOutlet=\"tabsContainer\">\n         </ng-container>\n      </ng-template>\n    </div>\n    <div class=\"cc-child-view\" *ngIf=\"!keepAlive; else aliveTabs\">\n\n\n      <ng-container [ngTemplateOutlet]=\"childView\" >\n\n      </ng-container>\n   </div>\n\n\n</div>\n<ng-template #previousChild>\n   <ng-container [ngTemplateOutlet]=\"previousTab.childView\" >\n\n   </ng-container>\n</ng-template>\n<ng-template #tabsContainer>\n   <div class=\"cc__tab-item\" [ngStyle]=\"getTabsPlacement()\">\n      <cometchat-icon-button [alignment]=\"'column'\" *ngFor=\"let tab of tabs\" [iconURL]=\"tab.iconURL\" [text]=\"tab.title\" [buttonStyle]=\"getButtonStyle(tab)\" (cc-button-clicked)=\"openViewOnCLick(tab)\"></cometchat-icon-button>\n   </div>\n\n</ng-template>\n\n<ng-template #aliveTabs>\n   <div class=\"cc-child-view\" >\n      <div [ngStyle]=\"showTabs(tab)\" class=\"cc-child-container\" *ngFor=\"let tab of tabs\">\n        <ng-container [ngTemplateOutlet]=\"tab.childView\" >\n\n        </ng-container>\n      </div>\n\n        </div>\n</ng-template>", styles: [".cc-tabs-wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-start}.cc-child-view{height:100%;width:100%;overflow:hidden}.cc-tabs{height:fit-content;margin:8px 0 12px}.cc__tab-item{display:flex;height:100%;width:100%}cometchat-icon-button{height:inherit;width:inherit}.cc-child-container{height:100%;width:100%;display:none}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CometChatTabsComponent, decorators: [{
+CometChatTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CometChatTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CometChatTabsComponent, selector: "cometchat-tabs", inputs: { tabAlignment: "tabAlignment", disableDragging: "disableDragging", tabsStyle: "tabsStyle", tabs: "tabs", keepAlive: "keepAlive" }, usesOnChanges: true, ngImport: i0, template: " <div class=\"cc-tabs-wrapper\" [ngStyle]=\"getWrapperStyle()\">\n   <div class=\"cc-tabs\" [ngStyle]=\"getTabsStyle()\">\n      <cometchat-draggable [draggableStyle]=\"tabsStyle\" *ngIf=\"!disableDragging; else fixedTabs\">\n         <ng-container *ngTemplateOutlet=\"tabsContainer\">\n         </ng-container>\n      </cometchat-draggable>\n      <ng-template #fixedTabs>\n         <ng-container *ngTemplateOutlet=\"tabsContainer\">\n         </ng-container>\n      </ng-template>\n    </div>\n    <div class=\"cc-child-view\" *ngIf=\"!keepAlive; else aliveTabs\">\n\n\n      <ng-container [ngTemplateOutlet]=\"childView\" >\n\n      </ng-container>\n   </div>\n\n\n</div>\n<ng-template #previousChild>\n   <ng-container [ngTemplateOutlet]=\"previousTab.childView\" >\n\n   </ng-container>\n</ng-template>\n<ng-template #tabsContainer>\n   <div class=\"cc__tab-item\" [ngStyle]=\"getTabsPlacement()\">\n      <cometchat-icon-button [alignment]=\"'column'\" *ngFor=\"let tab of tabs\" [iconURL]=\"tab.iconURL\" [text]=\"tab.title\" [buttonStyle]=\"getButtonStyle(tab)\" (cc-button-clicked)=\"openViewOnCLick(tab)\"></cometchat-icon-button>\n   </div>\n\n</ng-template>\n\n<ng-template #aliveTabs>\n   <div class=\"cc-child-view\" >\n      <div [ngStyle]=\"showTabs(tab)\" class=\"cc-child-container\" *ngFor=\"let tab of tabs\">\n        <ng-container [ngTemplateOutlet]=\"tab.childView\" >\n\n        </ng-container>\n      </div>\n\n        </div>\n</ng-template>", styles: [".cc-tabs-wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-start}.cc-child-view{height:100%;width:100%;overflow:hidden}.cc-tabs{height:-moz-fit-content;height:fit-content;margin:8px 0 12px}.cc__tab-item{display:flex;height:100%;width:100%}cometchat-icon-button{height:inherit;width:inherit}.cc-child-container{height:100%;width:100%;display:none}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cometchat-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: " <div class=\"cc-tabs-wrapper\" [ngStyle]=\"getWrapperStyle()\">\n   <div class=\"cc-tabs\" [ngStyle]=\"getTabsStyle()\">\n      <cometchat-draggable [draggableStyle]=\"tabsStyle\" *ngIf=\"!disableDragging; else fixedTabs\">\n         <ng-container *ngTemplateOutlet=\"tabsContainer\">\n         </ng-container>\n      </cometchat-draggable>\n      <ng-template #fixedTabs>\n         <ng-container *ngTemplateOutlet=\"tabsContainer\">\n         </ng-container>\n      </ng-template>\n    </div>\n    <div class=\"cc-child-view\" *ngIf=\"!keepAlive; else aliveTabs\">\n\n\n      <ng-container [ngTemplateOutlet]=\"childView\" >\n\n      </ng-container>\n   </div>\n\n\n</div>\n<ng-template #previousChild>\n   <ng-container [ngTemplateOutlet]=\"previousTab.childView\" >\n\n   </ng-container>\n</ng-template>\n<ng-template #tabsContainer>\n   <div class=\"cc__tab-item\" [ngStyle]=\"getTabsPlacement()\">\n      <cometchat-icon-button [alignment]=\"'column'\" *ngFor=\"let tab of tabs\" [iconURL]=\"tab.iconURL\" [text]=\"tab.title\" [buttonStyle]=\"getButtonStyle(tab)\" (cc-button-clicked)=\"openViewOnCLick(tab)\"></cometchat-icon-button>\n   </div>\n\n</ng-template>\n\n<ng-template #aliveTabs>\n   <div class=\"cc-child-view\" >\n      <div [ngStyle]=\"showTabs(tab)\" class=\"cc-child-container\" *ngFor=\"let tab of tabs\">\n        <ng-container [ngTemplateOutlet]=\"tab.childView\" >\n\n        </ng-container>\n      </div>\n\n        </div>\n</ng-template>", styles: [".cc-tabs-wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-start}.cc-child-view{height:100%;width:100%;overflow:hidden}.cc-tabs{height:fit-content;margin:8px 0 12px}.cc__tab-item{display:flex;height:100%;width:100%}cometchat-icon-button{height:inherit;width:inherit}.cc-child-container{height:100%;width:100%;display:none}\n"] }]
+            args: [{ selector: 'cometchat-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: " <div class=\"cc-tabs-wrapper\" [ngStyle]=\"getWrapperStyle()\">\n   <div class=\"cc-tabs\" [ngStyle]=\"getTabsStyle()\">\n      <cometchat-draggable [draggableStyle]=\"tabsStyle\" *ngIf=\"!disableDragging; else fixedTabs\">\n         <ng-container *ngTemplateOutlet=\"tabsContainer\">\n         </ng-container>\n      </cometchat-draggable>\n      <ng-template #fixedTabs>\n         <ng-container *ngTemplateOutlet=\"tabsContainer\">\n         </ng-container>\n      </ng-template>\n    </div>\n    <div class=\"cc-child-view\" *ngIf=\"!keepAlive; else aliveTabs\">\n\n\n      <ng-container [ngTemplateOutlet]=\"childView\" >\n\n      </ng-container>\n   </div>\n\n\n</div>\n<ng-template #previousChild>\n   <ng-container [ngTemplateOutlet]=\"previousTab.childView\" >\n\n   </ng-container>\n</ng-template>\n<ng-template #tabsContainer>\n   <div class=\"cc__tab-item\" [ngStyle]=\"getTabsPlacement()\">\n      <cometchat-icon-button [alignment]=\"'column'\" *ngFor=\"let tab of tabs\" [iconURL]=\"tab.iconURL\" [text]=\"tab.title\" [buttonStyle]=\"getButtonStyle(tab)\" (cc-button-clicked)=\"openViewOnCLick(tab)\"></cometchat-icon-button>\n   </div>\n\n</ng-template>\n\n<ng-template #aliveTabs>\n   <div class=\"cc-child-view\" >\n      <div [ngStyle]=\"showTabs(tab)\" class=\"cc-child-container\" *ngFor=\"let tab of tabs\">\n        <ng-container [ngTemplateOutlet]=\"tab.childView\" >\n\n        </ng-container>\n      </div>\n\n        </div>\n</ng-template>", styles: [".cc-tabs-wrapper{height:100%;width:100%;display:flex;flex-direction:column;justify-content:flex-start}.cc-child-view{height:100%;width:100%;overflow:hidden}.cc-tabs{height:-moz-fit-content;height:fit-content;margin:8px 0 12px}.cc__tab-item{display:flex;height:100%;width:100%}cometchat-icon-button{height:inherit;width:inherit}.cc-child-container{height:100%;width:100%;display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabAlignment: [{
                 type: Input
             }], disableDragging: [{

package/esm2020/Shared/Views/CometChatTabs/cometchat-tabs.module.mjs

@@ -4,12 +4,12 @@ import { CometChatTabsComponent } from './cometchat-tabs/cometchat-tabs.componen
 import * as i0 from "@angular/core";
 export class CometChatTabs {
 }
-CometChatTabs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CometChatTabs, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-CometChatTabs.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CometChatTabs, declarations: [CometChatTabsComponent], imports: [CommonModule], exports: [CometChatTabsComponent] });
-CometChatTabs.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CometChatTabs, imports: [[
+CometChatTabs.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CometChatTabs.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, declarations: [CometChatTabsComponent], imports: [CommonModule], exports: [CometChatTabsComponent] });
+CometChatTabs.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, imports: [[
             CommonModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CometChatTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CometChatTabs, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [CometChatTabsComponent],

package/examples/sample-app/README.md

@@ -4,7 +4,14 @@
 
 # Angular Sample App by CometChat
 
-This is a reference application showcasing the integration of [**CometChat's Angular UI Kit**](https://www.cometchat.com/docs/v4/angular-uikit/overview) within an Angular framework. It provides developers with examples of implementing real-time messaging and voice and video calling features in their own Angular-based applications.
+This is a reference application showcasing the integration of [CometChat's Angular UI Kit](https://www.cometchat.com/docs/v4/angular-uikit/overview) within an Angular framework. It provides developers with examples of implementing real-time messaging and voice and video calling features in their own Angular-based applications.
+
+<div style="
+    display: flex;
+    align-items: center;
+    justify-content: center;">
+   <img src="./Screenshots/overview_cometchat_screens.png" />
+</div>
 
 ## Prerequisites
 
@@ -37,9 +44,6 @@ This is a reference application showcasing the integration of [**CometChat's Ang
     ```
     npm run start
     ```
-<p align="left">
-  <img max-width="100%" height="600px" src="./Screenshots/login-page.png">
-</p>
 
 
 ## Help and Support