@amc-technology/ui-library 1.0.97 → 1.0.99

package/fesm5/amc-technology-ui-library.js

@@ -1,10 +1,13 @@
-import { __decorate, __values } from 'tslib';
+import { __decorate, __values, __awaiter, __generator } from 'tslib';
 import { EventEmitter, Input, Output, Component, Renderer2, ViewChild, Injector, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { createCustomElement } from '@angular/elements';
 import { BrowserModule } from '@angular/platform-browser';
 import { ElementZoneStrategyFactory } from 'elements-zone-strategy';
+import { debounceTime } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { MatTabsModule } from '@angular/material/tabs';
 
 /**
  * @ignore
@@ -66,6 +69,16 @@ var InteractionComponent = /** @class */ (function () {
             this.maximize();
         }
     };
+    InteractionComponent.prototype.clickEvent = function (id) {
+        document.getElementById(id).className = 'success';
+        if (localStorage.getItem('focusedPanel') === null) {
+            localStorage.setItem('focusedPanel', id);
+        }
+        else if (localStorage.getItem('focusedPanel') != id) {
+            document.getElementById(localStorage.getItem('focusedPanel')).className = 'AnswerCallFocused';
+            localStorage.setItem('focusedPanel', id);
+        }
+    };
     __decorate([
         Input()
     ], InteractionComponent.prototype, "interaction", void 0);
@@ -84,8 +97,8 @@ var InteractionComponent = /** @class */ (function () {
     InteractionComponent = __decorate([
         Component({
             selector: 'amc-interaction',
-            template: "<div class=\"AnswerCallFocused\">\r\n  <div class=\"editor callHeaderTop\">\r\n    <img class=\"statusImage\" aria-hidden=\"true\" [src]=\"interaction.UIHeadersData.statusUrl\" (click)=\"interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)\" />\r\n    <label class=\"statusText\">\r\n      <b [id]=\"interaction.UIHeadersData.statusText\">{{ interaction.UIHeadersData.statusText }}</b>\r\n    </label>\r\n    <label class=\"verticalDivider\">|</label>\r\n    <label class=\"directionText\" *ngIf=\"!interaction.UIHeadersData.displayHoldCounter\">{{ interaction.UIHeadersData.directionText }}</label>\r\n    <div class=\"holdCallDurationDiv\" *ngIf=\"interaction.UIHeadersData.displayHoldCounter\">\r\n      <amc-holdtimer [holdCounterData]=\"interaction.UIHeadersData.holdCounterData\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\"></amc-holdtimer>\r\n    </div>\r\n    <img class=\"ViewExpandImage\" [src]=\"interaction.UIHeadersData.minimizeUrl\" alt=\"Minimize\" (click)=\"minimize()\" (keypress)=\"collapseKeypress($event)\" *ngIf=\"!_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"collapse Call Section\">\r\n    <img class=\"ViewCollapseImage\" [src]=\"interaction.UIHeadersData.maximizeUrl\" alt=\"Maximize\" (click)=\"maximize()\" (keypress)=\"expandKeypress($event)\" *ngIf=\"_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"expand Call Section\">\r\n    <div class=\"DurationDiv\" *ngIf=\"interaction.displayCallTimer\">\r\n      <amc-duration [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [startTime]=\"interaction.startTime\"></amc-duration>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!_minimized\">\r\n\r\n    <div *ngIf=\"!isConferenceCall()\">\r\n      <div class=\"editor phoneNumberContainer\">\r\n        <input class=\"callImage\" type=\"image\" [src]=\"interaction.subheaderData.image.href\" [title]=\"interaction.subheaderData.tooltip || ''\" tabindex=\"-1\">\r\n        <input class=\"editor phoneNumberValue\" [attr.aria-labelledby]=\"interaction.UIHeadersData.statusText + ' ' + interaction.subheaderData.value\" readonly type=\"text\" [value]=\"interaction.subheaderData.value\" [id]=\"interaction.subheaderData.value\" tabindex=\"-1\">\r\n      </div>\r\n\r\n      <div class=\"cadSection\">\r\n        <ng-container *ngFor=\"let property of interaction.properties\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <label class=\"col1\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n            <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let property of interaction.associatedData\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <div class=\"editor displayDiv\">\r\n              <label class=\"displayLabels\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n      <amc-operation *ngIf=\"interaction.chat\" id=\"close-chat\" [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n      <app-chat-box *ngIf=\"interaction.chat\" [isTyping]=\"interaction.chat.isCustomerTyping\" [settings]=\"interaction.chat.settings\"\r\n        [messages]=\"interaction.chat.messages\" [newMsgs]=\"newMsgs\" (isAgentTyping)=\"isAgentTyping.emit($event)\" (newMessage)=\"newMessage.emit($event)\"></app-chat-box>\r\n\r\n      <div [id]='interaction.interactionId'> </div>\r\n      <amc-operation *ngIf=\"!interaction.chat\" [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n    <div *ngIf=\"isConferenceCall()\">\r\n      <div *ngFor=\"let party of interaction.parties\">\r\n        <div class=\"editor phoneNumberContainer\">\r\n          <input class=\"callImage\" type=\"image\" [src]=\"party.header.image.href\" [title]=\"party.header.tooltip || ''\" tabindex=\"-1\">\r\n          <input class=\"editor phoneNumberValue\" readonly type=\"text\" [value]=\"party.header.value\" tabindex=\"-1\">\r\n        </div>\r\n\r\n        <div class=\"grid-container\">\r\n          <ng-container *ngFor=\"let property of party.properties\">\r\n            <ng-container *ngIf=\"property.visible\">\r\n              <label class=\"col1\" [title]=\"property.displayKey\">{{ property.displayKey }}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" [operations]=\"party.operations\"></amc-operation>\r\n        <div class=\"AnswerCallFocused\"></div>\r\n      </div>\r\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
-            styles: [":host{display:block}.phoneNumberContainer{margin-left:5px!important;padding-left:0;display:flex;align-items:center}.cadSection{margin-bottom:5px}#close-chat{-moz-text-align-last:end;text-align-last:end}.grid-container{margin-left:5px;display:grid;grid-template-columns:auto 1fr;grid-column-gap:10px;max-width:calc(100% - 5px);overflow:hidden}.col1{grid-column:1/2}.col2{grid-column:2/3}.ViewExpandImage{margin:3px}.ViewExpandImage:focus{outline:#3296da solid 2px;outline-offset:0}.ViewCollapseImage{margin:3px}.ViewCollapseImage:focus{outline:#3296da solid 2px;outline-offset:0}.callImage{cursor:default}.phoneNumberValue:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:0 5px 2px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
+            template: "<div class=\"AnswerCallFocused\" [id]=\"interaction.interactionId\">\r\n  <div class=\"editor callHeaderTop\" (click)=\"clickEvent(interaction.interactionId)\">\r\n    <img class=\"statusImage\" aria-hidden=\"true\" [src]=\"interaction.UIHeadersData.statusUrl\" (click)=\"interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)\" />\r\n    <label class=\"statusText\">\r\n      <b [id]=\"interaction.UIHeadersData.statusText\">{{ interaction.UIHeadersData.statusText }}</b>\r\n    </label>\r\n    <label class=\"verticalDivider\">|</label>\r\n    <label class=\"directionText\" *ngIf=\"!interaction.UIHeadersData.displayHoldCounter\">{{ interaction.UIHeadersData.directionText }}</label>\r\n    <div class=\"holdCallDurationDiv\" *ngIf=\"interaction.UIHeadersData.displayHoldCounter\">\r\n      <amc-holdtimer [holdCounterData]=\"interaction.UIHeadersData.holdCounterData\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\"></amc-holdtimer>\r\n    </div>\r\n    <img class=\"ViewExpandImage\" [src]=\"interaction.UIHeadersData.minimizeUrl\" alt=\"Minimize\" (click)=\"minimize()\" (keypress)=\"collapseKeypress($event)\" *ngIf=\"!_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"collapse Call Section\">\r\n    <img class=\"ViewCollapseImage\" [src]=\"interaction.UIHeadersData.maximizeUrl\" alt=\"Maximize\" (click)=\"maximize()\" (keypress)=\"expandKeypress($event)\" *ngIf=\"_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"expand Call Section\">\r\n    <div class=\"DurationDiv\" *ngIf=\"interaction.displayCallTimer\">\r\n      <amc-duration [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [startTime]=\"interaction.startTime\"></amc-duration>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!_minimized\">\r\n\r\n    <div *ngIf=\"!isConferenceCall()\">\r\n      <div class=\"editor phoneNumberContainer\">\r\n        <input class=\"callImage\" type=\"image\" [src]=\"interaction.subheaderData.image.href\" [title]=\"interaction.subheaderData.tooltip || ''\" tabindex=\"-1\">\r\n        <input class=\"editor phoneNumberValue\" [attr.aria-labelledby]=\"interaction.UIHeadersData.statusText + ' ' + interaction.subheaderData.value\" readonly type=\"text\" [value]=\"interaction.subheaderData.value\" [id]=\"interaction.subheaderData.value\" tabindex=\"-1\">\r\n      </div>\r\n\r\n      <div class=\"cadSection\">\r\n        <ng-container *ngFor=\"let property of interaction.properties\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <label class=\"col1\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n            <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let property of interaction.associatedData\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <div class=\"editor displayDiv\">\r\n              <label class=\"displayLabels\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n      <amc-operation *ngIf=\"interaction.chat\" id=\"close-chat\" [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n      <app-chat-box *ngIf=\"interaction.chat\" [isTyping]=\"interaction.chat.isCustomerTyping\" [settings]=\"interaction.chat.settings\"\r\n        [messages]=\"interaction.chat.messages\" [newMsgs]=\"newMsgs\" (isAgentTyping)=\"isAgentTyping.emit($event)\" (newMessage)=\"newMessage.emit($event)\"></app-chat-box>\r\n\r\n      <div [id]='interaction.interactionId'> </div>\r\n      <amc-operation *ngIf=\"!interaction.chat\" [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n    <div *ngIf=\"isConferenceCall()\">\r\n      <div *ngFor=\"let party of interaction.parties\">\r\n        <div class=\"editor phoneNumberContainer\">\r\n          <input class=\"callImage\" type=\"image\" [src]=\"party.header.image.href\" [title]=\"party.header.tooltip || ''\" tabindex=\"-1\">\r\n          <input class=\"editor phoneNumberValue\" readonly type=\"text\" [value]=\"party.header.value\" tabindex=\"-1\">\r\n        </div>\r\n\r\n        <div class=\"grid-container\">\r\n          <ng-container *ngFor=\"let property of party.properties\">\r\n            <ng-container *ngIf=\"property.visible\">\r\n              <label class=\"col1\" [title]=\"property.displayKey\">{{ property.displayKey }}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" [operations]=\"party.operations\"></amc-operation>\r\n        <div class=\"AnswerCallFocused\"></div>\r\n      </div>\r\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+            styles: [":host{display:block}.phoneNumberContainer{margin-left:5px!important;padding-left:0;display:flex;align-items:center}.cadSection{margin-bottom:5px}#close-chat{-moz-text-align-last:end;text-align-last:end}.grid-container{margin-left:5px;display:grid;grid-template-columns:auto 1fr;grid-column-gap:10px;max-width:calc(100% - 5px);overflow:hidden}.col1{grid-column:1/2}.col2{grid-column:2/3}.ViewExpandImage{margin:3px}.ViewExpandImage:focus{outline:#3296da solid 2px;outline-offset:0}.ViewCollapseImage{margin:3px}.ViewCollapseImage:focus{outline:#3296da solid 2px;outline-offset:0}.callImage{cursor:default}.phoneNumberValue:focus{outline-style:none}#call123{border:4px!important}.success{border:2px solid #00adbb!important}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:0 5px 2px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
         })
     ], InteractionComponent);
     return InteractionComponent;
@@ -474,8 +487,6 @@ var ChatBoxComponent = /** @class */ (function () {
         this.renderer = renderer;
         this.isTyping = false;
         this.lastCount = -1;
-        this.lastScrollTop = 0;
-        this.newMessageSent = false;
         this._isAgentTyping = false;
         this.isAgentTyping = new EventEmitter();
         this.newMessage = new EventEmitter();
@@ -512,11 +523,13 @@ var ChatBoxComponent = /** @class */ (function () {
         }
         catch (e) { }
         finally {
+            this.scrollToBottom();
         }
     };
     ChatBoxComponent.prototype.ngAfterViewChecked = function () {
         if (this.lastCount !== this.messages.length) {
             this.lastCount = this.messages.length;
+            this.scrollToBottom();
         }
     };
     ChatBoxComponent.prototype.getColor = function (message) {
@@ -538,8 +551,6 @@ var ChatBoxComponent = /** @class */ (function () {
         return message.type && message.type === IChatMessageType.AGENT;
     };
     ChatBoxComponent.prototype.sendNewMessage = function (event) {
-        this.scrollToBottom();
-        this.newMessageSent = true;
         event.preventDefault();
         if (this.newMessageText) {
             this.newMessage.emit(this.newMessageText);
@@ -600,8 +611,8 @@ var ChatBoxComponent = /** @class */ (function () {
     ChatBoxComponent = __decorate([
         Component({
             selector: 'app-chat-box',
-            template: "<div class=\"chat-box\">\r\n  <div #MessagesContainer id=\"msgScroll\" class=\"messages\" [style.max-height]='settings.maxHeight'>\r\n    <div>\r\n      <ng-container *ngFor=\"let message of updatedMessage()\">\r\n        <app-chat-message class=\"chat-line\" [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\" (focusOn)=\"setOnFocus($event)\"\r\n          [timestamp]=\"message.timestamp\" [image]=\"message.userIcon\" [fallbackImage]=\"settings.fallbackUserIcon\" [color]=\"getColor(message)\">\r\n        </app-chat-message>\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div *ngIf=\"isTyping\" class=\"typing-indicator\">\r\n      Someone is typing\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n<div class=\"message-box\">\r\n  <textarea id=\"autofocus\" tabindex=\"1\" #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" class=\"message-input scroll\" placeholder=\"Type a message...\"\r\n  (focus)=\"onNewMessageFocus(true)\" (keydown.enter)=\"sendNewMessage($event)\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\" ></textarea>\r\n  <button type=\"submit\" class=\"message-submit\" (click)=\"sendNewMessage($event)\" [disabled]=\"settings.disableSendMessage\">Send</button>\r\n</div>\r\n</div>\r\n",
-            styles: [".message-box{flex:1 1 0;width:99%;background:#fff;margin:auto;position:relative;border-radius:5px;height:100%;border:1px solid #ccc}.message-box .message-input{background:0 0;border:none;outline:0!important;resize:none;font-family:inherit;font-size:.8rem;height:100%;margin:0;padding:10px 7px;width:89%;color:#444}.message-box textarea:focus:-webkit-placeholder{color:transparent}.message-box .message-submit{position:absolute;z-index:1;top:26px;right:5px;background:#1e72ba;border:none;color:#fff;font-size:10px;line-height:1;padding:6px 10px;border-radius:5px;outline:0!important;transition:background .2s;cursor:pointer}.scroll::-webkit-scrollbar{display:none}.chat-box{background-color:#f4f5fb;padding:5px}.messages{padding:5px;display:flex;flex-direction:column-reverse;overflow:auto;min-height:50px}.chat-line{margin-bottom:15px}.new-message{border-top:1px solid #000;display:flex;align-content:center;height:25px}.new-message input[type=text]{flex:1 1 0;background-color:#f4f5fb;border:none;min-width:0}.new-message input[type=image]{position:relative;top:50%;transform:translateY(-50%);height:20px;cursor:pointer}.new-message input[type=image]:disabled{opacity:.5;cursor:auto}.new-message input:focus{outline:0}.typing-indicator{font-size:.8em;font-style:italic}.typing-indicator span{display:inline-block;height:4px;width:4px;border-radius:50%;background-color:#9e9e9e;margin:0 1px;opacity:.2}.typing-indicator span:nth-of-type(1){-webkit-animation:1.5s .33333s infinite blink;animation:1.5s .33333s infinite blink}.typing-indicator span:nth-of-type(2){-webkit-animation:1.5s .66666s infinite blink;animation:1.5s .66666s infinite blink}.typing-indicator span:nth-of-type(3){-webkit-animation:1.5s .99999s infinite blink;animation:1.5s .99999s infinite blink}@-webkit-keyframes blink{50%{opacity:1}}@keyframes blink{50%{opacity:1}}"]
+            template: "<div class=\"chat-box\">\r\n  <div #MessagesContainer id=\"msgScroll\" class=\"messages\" [style.max-height]='settings.maxHeight'>\r\n    <ng-container *ngFor=\"let message of updatedMessage()\">\r\n      <app-chat-message class=\"chat-line\" [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\" (focusOn)=\"setOnFocus($event)\"\r\n        [timestamp]=\"message.timestamp\" [image]=\"message.userIcon\" [fallbackImage]=\"settings.fallbackUserIcon\" [color]=\"getColor(message)\">\r\n      </app-chat-message>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isTyping\" class=\"typing-indicator\">\r\n      Someone is typing\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n<div class=\"message-box\">\r\n  <textarea id=\"autofocus\" tabindex=\"1\" #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" class=\"message-input scroll\" placeholder=\"Type a message...\"\r\n  (focus)=\"onNewMessageFocus(true)\" (keydown.enter)=\"sendNewMessage($event)\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\" ></textarea>\r\n  <button type=\"submit\" class=\"message-submit\" (click)=\"sendNewMessage($event)\" [disabled]=\"settings.disableSendMessage\">Send</button>\r\n</div>\r\n</div>\r\n",
+            styles: [".message-box{flex:1 1 0;width:99%;background:#fff;margin:auto;position:relative;border-radius:5px;height:100%;border:1px solid #ccc}.message-box .message-input{background:0 0;border:none;outline:0!important;resize:none;font-family:inherit;font-size:.8rem;height:100%;margin:0;padding:10px 7px;width:89%;color:#444}.message-box textarea:focus:-webkit-placeholder{color:transparent}.message-box .message-submit{position:absolute;z-index:1;top:26px;right:5px;background:#1e72ba;border:none;color:#fff;font-size:10px;line-height:1;padding:6px 10px;border-radius:5px;outline:0!important;transition:background .2s;cursor:pointer}.scroll::-webkit-scrollbar{display:none}.chat-box{background-color:#f4f5fb;padding:5px}.messages{padding:5px;overflow:auto;min-height:50px}.chat-line{margin-bottom:15px}.new-message{border-top:1px solid #000;display:flex;align-content:center;height:25px}.new-message input[type=text]{flex:1 1 0;background-color:#f4f5fb;border:none;min-width:0}.new-message input[type=image]{position:relative;top:50%;transform:translateY(-50%);height:20px;cursor:pointer}.new-message input[type=image]:disabled{opacity:.5;cursor:auto}.new-message input:focus{outline:0}.typing-indicator{font-size:.8em;font-style:italic}.typing-indicator span{display:inline-block;height:4px;width:4px;border-radius:50%;background-color:#9e9e9e;margin:0 1px;opacity:.2}.typing-indicator span:nth-of-type(1){animation:1.5s .33333s infinite blink}.typing-indicator span:nth-of-type(2){animation:1.5s .66666s infinite blink}.typing-indicator span:nth-of-type(3){animation:1.5s .99999s infinite blink}@keyframes blink{50%{opacity:1}}"]
         })
     ], ChatBoxComponent);
     return ChatBoxComponent;
@@ -701,7 +712,7 @@ var DispositionComponent = /** @class */ (function () {
         Component({
             selector: 'amc-disposition',
             template: "<div class=\"disposition-container\">\r\n  <div class=\"header-container\">\r\n      <label class=\"disposition-header\" attr.aria-label=\"set disposition\">{{disposition.dispositionHeader}}</label>\r\n  </div>\r\n\r\n  <div class=\"dispositions-container\">\r\n      <div class=\"disposition\" *ngFor=\"let disp of disposition.disposition | keyvalue; let i = index\">\r\n        <label\r\n         class=\"disposition-label\"\r\n         tabindex=\"0\"\r\n         [id]=\"disp.key\"\r\n         [ngClass]=\"{'disposition-label-selected' : selectedDispositionValue === disp.key, 'first-disposition': i === 0}\"\r\n         (keypress)=\"selectAndSubmitDisposition($event, disp.key)\">\r\n\r\n          <input\r\n           class=\"disposition-input\"\r\n           type=\"radio\"\r\n           value=\"{{disp.key}}\"\r\n           tabindex=\"-1\"\r\n           attr.aria-label=\"{{disp.value}}\"\r\n           [required]=\"!selectedDispositionValue\"\r\n           [name]=\"dispositionName\"\r\n           (change)=\"submitDisposition()\"\r\n           [(ngModel)]=\"selectedDispositionValue\">\r\n\r\n          {{disp.value}}\r\n        </label>\r\n      </div>\r\n  </div>\r\n</div>\r\n",
-            styles: [".disposition-container{border:1px solid #939598;white-space:nowrap;font-family:Arial;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;text-overflow:ellipsis;position:relative;font-size:.9em;max-height:180px;overflow-x:hidden;overflow-y:hidden}.header-container{border-bottom:1px solid #939598;background-color:#f4f5fb;width:100%;white-space:nowrap;height:28px;position:-webkit-sticky;position:sticky;overflow-x:hidden;overflow-y:hidden}.disposition-header{margin-top:auto;margin-left:7px;padding:5px;white-space:nowrap;text-overflow:ellipsis;font-weight:700;font-size:.9em;font-family:Arial;overflow-x:hidden}.disposition{margin-left:5px;padding-left:5px;white-space:nowrap}.disposition-label{text-overflow:ellipsis;font-weight:400;white-space:nowrap;font-size:.9em;overflow-x:hidden}.disposition-label-selected{text-overflow:ellipsis;font-weight:700;white-space:nowrap;font-size:.9em}.dispositions-container{padding:3px;overflow-y:scroll;max-height:150px}.disposition-label:focus{outline:#3296da solid 2px;outline-offset:5px}.first-disposition{margin-top:5px}"]
+            styles: [".disposition-container{border:1px solid #939598;white-space:nowrap;font-family:Arial;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;text-overflow:ellipsis;position:relative;font-size:.9em;max-height:180px;overflow-x:hidden;overflow-y:hidden}.header-container{border-bottom:1px solid #939598;background-color:#f4f5fb;width:100%;white-space:nowrap;height:28px;position:sticky;overflow-x:hidden;overflow-y:hidden}.disposition-header{margin-top:auto;margin-left:7px;padding:5px;white-space:nowrap;text-overflow:ellipsis;font-weight:700;font-size:.9em;font-family:Arial;overflow-x:hidden}.disposition{margin-left:5px;padding-left:5px;white-space:nowrap}.disposition-label{text-overflow:ellipsis;font-weight:400;white-space:nowrap;font-size:.9em;overflow-x:hidden}.disposition-label-selected{text-overflow:ellipsis;font-weight:700;white-space:nowrap;font-size:.9em}.dispositions-container{padding:3px;overflow-y:scroll;max-height:150px}.disposition-label:focus{outline:#3296da solid 2px;outline-offset:5px}.first-disposition{margin-top:5px}"]
         })
     ], DispositionComponent);
     return DispositionComponent;
@@ -834,8 +845,6 @@ var LoginComponent = /** @class */ (function () {
         if (!loginForm.controls[field.name].valid) {
             field.isInvalid = true;
         }
-        // console.log(loginForm);
-        // console.log(field);
     };
     __decorate([
         Input()
@@ -847,12 +856,506 @@ var LoginComponent = /** @class */ (function () {
         Component({
             selector: 'amc-login',
             template: "<div class=\"login-container\">\r\n  <form (ngSubmit)=\"onLogin(loginForm)\"class=\"login-form\" id=\"login-form\" #loginForm=\"ngForm\">\r\n    <div class=\"header-container\">\r\n      <label class=\"login-header\" attr.aria-label=\"login\">{{ loginData.header }}</label>\r\n    </div>\r\n    <div class=\"fields-container\">\r\n      <div *ngFor=\"let field of loginData.fields\" class=\"field\">\r\n        <label class=\"field-label\">\r\n          {{ field.name }}:\r\n        </label>\r\n\r\n        <input\r\n         ngModel\r\n         class=\"field-input\"\r\n         attr.aria-label=\"{{ field.name }}\"\r\n         [name]=\"field.name\"\r\n         [type]=\"field.type\"\r\n         [value]=\"field.value\"\r\n         [placeholder]=\"field.placeholder || ''\"\r\n         [required]=\"field.isRequired || false\"\r\n         (focusout)=\"focusOutOfInput(loginForm, field)\"/>\r\n\r\n         <p class=\"invalid-input\" *ngIf=\"field.isInvalid\">{{ field.invalidMessage }}</p>\r\n      </div>\r\n\r\n      <button\r\n        type=\"submit\"\r\n        class=\"form-submit\"\r\n        form=\"login-form\"\r\n        tabindex=\"0\"\r\n        attr.aria-label=\"send\"\r\n        [disabled]=\"!loginForm.valid\">Login</button>\r\n    </div>\r\n\r\n  </form>\r\n</div>\r\n",
-            styles: [".login-container{border:1px solid #939598;white-space:nowrap;font-family:Arial;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;text-overflow:ellipsis;position:relative;font-size:.9em;overflow-x:hidden;overflow-y:hidden}.header-container{border-bottom:1px solid #939598;background-color:#f4f5fb;width:100%;height:28px;position:-webkit-sticky;position:sticky}.login-header{margin-top:auto;margin-left:7px;padding:5px;font-weight:700;font-size:.9em}.fields-container{overflow-y:auto;font-size:.9em;padding:5px}.field{display:table-row;margin:5px}.field-label{padding:10px;display:table-cell}.field-input{display:table-cell;border:1px solid #939598;border-radius:5px}.field-input:focus{box-shadow:0 0 5px #38badf}.form-submit{margin:15px 10px 10px;display:table-row;border:1px solid #00a4b0;border-radius:5px;background-color:#00a4b0;color:#f7f7f7;width:10em;height:2em;transition:.2s;font-size:1.1em;position:relative;top:50%;left:50%;transform:translate(-50%,-50%)}.form-submit:hover{background-color:#01858f}.form-submit:disabled{background-color:silver;border-color:silver;color:#fff}input.ng-invalid.ng-touched[required]{border-color:#a94442}.form-submit:focus{outline:#3296da solid 2px;outline-offset:5px}.invalid-input{margin:0;padding:0;color:#a94442;font-size:x-small}"]
+            styles: [".login-container{border:1px solid #939598;white-space:nowrap;font-family:Arial;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;text-overflow:ellipsis;position:relative;font-size:.9em;overflow-x:hidden;overflow-y:hidden}.header-container{border-bottom:1px solid #939598;background-color:#f4f5fb;width:100%;height:28px;position:sticky}.login-header{margin-top:auto;margin-left:7px;padding:5px;font-weight:700;font-size:.9em}.fields-container{overflow-y:auto;font-size:.9em;padding:5px}.field{display:table-row;margin:5px}.field-label{padding:10px;display:table-cell}.field-input{display:table-cell;border:1px solid #939598;border-radius:5px}.field-input:focus{box-shadow:0 0 5px #38badf}.form-submit{margin:15px 10px 10px;display:table-row;border:1px solid #00a4b0;border-radius:5px;background-color:#00a4b0;color:#f7f7f7;width:10em;height:2em;transition:.2s;font-size:1.1em;position:relative;top:50%;left:50%;transform:translate(-50%,-50%)}.form-submit:hover{background-color:#01858f}.form-submit:disabled{background-color:silver;border-color:silver;color:#fff}input.ng-invalid.ng-touched[required]{border-color:#a94442}.form-submit:focus{outline:#3296da solid 2px;outline-offset:5px}.invalid-input{margin:0;padding:0;color:#a94442;font-size:x-small}"]
         })
     ], LoginComponent);
     return LoginComponent;
 }());
 
+var CreateComponent = /** @class */ (function () {
+    function CreateComponent() {
+        this.CreateNewEntity = new EventEmitter();
+        this.isCreateMaximized = true;
+    }
+    CreateComponent.prototype.createNewEntity = function (type) {
+        this.CreateNewEntity.emit(type);
+    };
+    CreateComponent.prototype.getEntities = function () {
+        return Object.keys(this.Entities);
+    };
+    CreateComponent.prototype.getDisplay = function (entity) {
+        return entity.substring(0, entity.indexOf('|'));
+    };
+    CreateComponent.prototype.getImage = function (entity) {
+        return entity.substring(entity.indexOf('|') + 1);
+    };
+    __decorate([
+        Output()
+    ], CreateComponent.prototype, "CreateNewEntity", void 0);
+    __decorate([
+        Input()
+    ], CreateComponent.prototype, "Entities", void 0);
+    CreateComponent = __decorate([
+        Component({
+            selector: 'amc-create',
+            template: "<div *ngIf=\"isCreateMaximized\" class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n    <label class=\"headerLabel\">\r\n      <b>Create New</b>\r\n    </label>\r\n    <img class=\"ViewResizeImage\" src=\"/assets/images/section_collapse.png\" (click)=\"isCreateMaximized = false\"\r\n      title=\"Collapse\" />\r\n  </div>\r\n  <div class=\"callBody\">\r\n    <div *ngIf=\"Entities\" class=\"container\">\r\n      <div *ngFor=\"let entity of getEntities()\" class=\"createNewLabel\" (click)=\"createNewEntity(entity)\"\r\n        title=\"{{ getDisplay(Entities[entity]) }}\">\r\n        <img class=\"createEntityImages\" src=\"{{ getImage(Entities[entity]) }}\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"!isCreateMaximized\" class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n    <label class=\"headerLabel\">\r\n      <b>Create New</b>\r\n    </label>\r\n    <img class=\"ViewResizeImage\" src=\"/assets/images/section_expand.png\" (click)=\"isCreateMaximized = true\"\r\n      title=\"Expand\" />\r\n  </div>\r\n</div>\r\n",
+            styles: [".callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.editor{font-size:.9em;width:70%;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.createEntityImages{width:30px;height:25px;margin-bottom:5px;margin-top:5px;cursor:pointer;padding-left:5px}.createNewLabel{display:inline-block;margin-left:5%;margin-right:5%}.container{padding-right:0;padding-left:0;font-size:10px;text-align:center}.callBody{border:1px solid #939598;border-top:1px solid #939598;position:relative}.callDisplay{display:grid;background-color:#fff;display:grid}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}"]
+        })
+    ], CreateComponent);
+    return CreateComponent;
+}());
+
+var RecentActivityComponent = /** @class */ (function () {
+    function RecentActivityComponent() {
+        this.EventEmitter = new EventEmitter();
+        this.debouncer = new Subject();
+        this.eventList = new Set();
+    }
+    RecentActivityComponent.prototype.ngOnChanges = function () {
+    };
+    RecentActivityComponent.prototype.getIcon = function (scenario) {
+        switch (scenario) {
+            case 'Telephony':
+                return '../../assets/images/Phone_Number_Icon.png';
+            case 'Email':
+                return '../../assets/images/emailTab.png';
+            default:
+                return '../../assets/images/chat.png';
+        }
+    };
+    RecentActivityComponent.prototype.ngOnInit = function () {
+        var _this = this;
+        this.debouncer.pipe(debounceTime(500)).subscribe(function () {
+            var newEvent = {
+                eventName: Array.from(_this.eventList).join('|'),
+                idx: _this.idx,
+                newValue: _this.ActivityDetails
+            };
+            _this.EventEmitter.emit(newEvent);
+            _this.eventList.clear();
+        });
+    };
+    RecentActivityComponent.prototype.ngOnDestroy = function () { };
+    RecentActivityComponent.prototype.expandAndCollapseRecentActivity = function (isExpand) {
+        if (isExpand) {
+            this.EventEmitter.emit({
+                eventName: 'WorkingEvtivityChanged',
+                idx: this.idx,
+                newValue: this.ActivityDetails
+            });
+        }
+        else {
+            this.EventEmitter.emit({
+                eventName: 'WorkingEvtivityChanged',
+                idx: -1,
+                newValue: this.ActivityDetails
+            });
+        }
+    };
+    RecentActivityComponent.prototype.openActivity = function () {
+        this.EventEmitter.emit({
+            eventName: 'OpenCallActivity',
+            idx: this.idx,
+            newValue: this.ActivityDetails
+        });
+    };
+    RecentActivityComponent.prototype.onSubjectChange = function () {
+        this.eventList.add('ActivitySubjectChanged');
+        this.debouncer.next();
+    };
+    RecentActivityComponent.prototype.onSubjectKeyUp = function () {
+        this.eventList.add('ActivitySubjectChanged');
+        this.debouncer.next();
+    };
+    RecentActivityComponent.prototype.onWhoObjectChange = function (event) {
+        this.ActivityDetails.WhoObject = this.WhoObjectList.find(function (obj) { return obj.objectId === event; });
+        this.EventEmitter.emit({
+            eventName: 'ActivityWhoObjectChanged',
+            idx: this.idx,
+            newValue: this.ActivityDetails
+        });
+    };
+    RecentActivityComponent.prototype.onRelatedToChange = function (event) {
+        this.ActivityDetails.WhatObject = this.WhatObjectList.find(function (obj) { return obj.objectId === event; });
+        this.EventEmitter.emit({
+            eventName: 'ActivityWhatObjectChanged',
+            idx: this.idx,
+            newValue: this.ActivityDetails
+        });
+    };
+    RecentActivityComponent.prototype.onCallNotesChange = function () {
+        this.eventList.add('ActivityCallNoteChanged');
+        this.debouncer.next();
+    };
+    RecentActivityComponent.prototype.onCallNotesKeyUp = function () {
+        this.eventList.add('ActivityCallNoteChanged');
+        this.debouncer.next();
+    };
+    RecentActivityComponent.prototype.addQuickCommentToDescription = function (comment) {
+        if (this.ActivityDetails.Description) {
+            this.ActivityDetails.Description += '\n';
+        }
+        this.ActivityDetails.Description += comment;
+        this.eventList.add('ActivityCallNoteChanged');
+        this.debouncer.next();
+    };
+    RecentActivityComponent.prototype.submitActivity = function () {
+        this.ActivityDetails.IsProcessing = true;
+        this.EventEmitter.emit({
+            eventName: 'SubmitActivity',
+            idx: this.idx,
+            newValue: this.ActivityDetails
+        });
+    };
+    __decorate([
+        Input()
+    ], RecentActivityComponent.prototype, "ActivityDetails", void 0);
+    __decorate([
+        Input()
+    ], RecentActivityComponent.prototype, "isInConsoleView", void 0);
+    __decorate([
+        Input()
+    ], RecentActivityComponent.prototype, "quickCommentList", void 0);
+    __decorate([
+        Input()
+    ], RecentActivityComponent.prototype, "workingScenarioID", void 0);
+    __decorate([
+        Input()
+    ], RecentActivityComponent.prototype, "idx", void 0);
+    __decorate([
+        Input()
+    ], RecentActivityComponent.prototype, "last", void 0);
+    __decorate([
+        Input()
+    ], RecentActivityComponent.prototype, "WhoObjectList", void 0);
+    __decorate([
+        Input()
+    ], RecentActivityComponent.prototype, "WhatObjectList", void 0);
+    __decorate([
+        Output()
+    ], RecentActivityComponent.prototype, "EventEmitter", void 0);
+    RecentActivityComponent = __decorate([
+        Component({
+            selector: 'amc-recent-activity',
+            template: "<div *ngIf=\"ActivityDetails.ScenarioId === workingScenarioID\">\r\n  <div (click)=\"expandAndCollapseRecentActivity(false);\" class=\"editor callHeaderRecentActivitySelected\">\r\n    <label class=\"headerLabelClickableLook\">\r\n      <img src=\"../../assets/images/Phone_Number_Icon.png\" class=\"RecentCallsImg\" />\r\n      <b>{{ ActivityDetails.Subject }}</b>\r\n    </label>\r\n    <img *ngIf=\"ActivityDetails.ActivityId\" class=\"RecentCallsImgForActivity\" src=\"../../assets/images/open_activity.png\"\r\n      title=\"Open Activity\" (click)=\"openActivity();$event.stopPropagation();\" />\r\n    <label *ngIf=\"ActivityDetails.IsUnSaved && isInConsoleView\" class=\"unsavedText\">unsaved</label>\r\n  </div>\r\n  <div class=\"callBody\">\r\n    <div class=\"gray-out\" *ngIf=\"ActivityDetails.IsRecentWorkItemLoading\">\r\n      <div class=\"spinner-container\">\r\n        <img class=\"spinner\" src=\"../../assets/images/view_progress.gif\" />\r\n      </div>\r\n    </div>\r\n    <div class=\"activityFields\">\r\n      <!-- <form> -->\r\n      <div class=\"editor displayDiv\">\r\n        <label class=\"displayLabels\" title=\"Subject\">Subject</label>\r\n        <input class=\"activitySubjectTextBoxStyle displayData\" type=\"text\" (change)=\"onSubjectChange();\"\r\n          (keyup)=\"onSubjectKeyUp()\" name=\"subject\" [(ngModel)]=\"ActivityDetails.Subject\" />\r\n      </div>\r\n      <div class=\"editor displayDiv\">\r\n        <label class=\"displayLabels\" title=\"Name\">Name</label>\r\n        <select class=\"dropDownListStyle displayData\" [ngModel]=\"ActivityDetails.WhoObject.objectId\"\r\n          (ngModelChange)=\"onWhoObjectChange($event)\" name=\"whoItem\">\r\n          <option *ngFor=\"let whoItem of WhoObjectList\" [ngValue]=\"whoItem.objectId\">\r\n            {{(whoItem.displayName && whoItem.objectName) ? (whoItem.displayName + ': ' + whoItem.objectName) : \"\" }}</option>\r\n          <!-- <option value=\"UserSelectedForEmptyRecord\"></option> -->\r\n        </select>\r\n      </div>\r\n      <div class=\"editor displayDiv\">\r\n        <label class=\"displayLabels\" title=\"Regarding\">Related To</label>\r\n        <select class=\"dropDownListStyle displayData\" [ngModel]=\"ActivityDetails.WhatObject.objectId\"\r\n          (ngModelChange)=\"onRelatedToChange($event)\" name=\"whatItem\">\r\n          <option *ngFor=\"let whatItem of WhatObjectList;\" [ngValue]=\"whatItem.objectId\">\r\n            {{ (whatItem.displayName && whatItem.objectName) ? (whatItem.displayName + ': ' + whatItem.objectName) : \"\" }}</option>\r\n          <!-- <option value=\"UserSelectedForEmptyRecord\"></option> -->\r\n        </select>\r\n      </div>\r\n      <div class=\"editor displayDiv\">\r\n        <div class=\"callNotesSection\">\r\n          <div class=\"callNotesTextArea\">\r\n            <textarea placeholder=\"Click to add a comment\" class=\"activityCommentsTextBoxStyle\"\r\n              (change)=\"onCallNotesChange();\" (keyup)=\"onCallNotesKeyUp()\" name=\"description\" rows=\"5\" title=\"\"\r\n              [(ngModel)]=\"ActivityDetails.Description\">\r\n            </textarea>\r\n          </div>\r\n          <div class=\"notesBottonBorder\">\r\n            <div class=\"commentsButtonDiv\">\r\n              <div class=\"quickCommentsDiv\">\r\n                <input *ngFor=\"let quickComment of quickCommentList; let i = index;\" class=\"quickNotesBotton\"\r\n                  type=\"button\" value=\"{{i+1}}\" (click)=\"addQuickCommentToDescription(quickComment)\"\r\n                  title=\"{{quickComment}}\">\r\n              </div>\r\n              <div class=\"callNotesButtonsSection\">\r\n                <input class=\"submitButton\" type=\"button\" value=\"Save\" (click)=\"submitActivity()\"\r\n                  [disabled]=\"!ActivityDetails.IsUnSaved\" />\r\n                <!-- <input *ngIf=\"recentScenario.IsProcessing\" class=\"submitButton\" type=\"button\" value=\"Save\" (click)=\"submitActivity(idx)\" [disabled]=\"!recentScenario.IsUnSaved\"/> -->\r\n                <img *ngIf=\"ActivityDetails.IsProcessing\" class=\"loadingIcon\" src=\"../../assets/images/loading.gif\"\r\n                  title=\"Updating Activity\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- </form> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"ActivityDetails.ScenarioId !== workingScenarioID \">\r\n  <div [class.callHeaderBottomBorder]='last' (click)=\"expandAndCollapseRecentActivity(true)\"\r\n    class=\"editor callHeaderRecentActivityUnselected\">\r\n    <label class=\"headerLabelClickableLook\">\r\n      <img [src]=\"getIcon(ActivityDetails.ChannelType)\" class=\"RecentCallsImg\" />\r\n      <b>{{ ActivityDetails.Subject }}</b>\r\n    </label>\r\n    <img *ngIf=\"ActivityDetails.ActivityId\" class=\"RecentCallsImgForActivity\" src=\"../../assets/images/open_activity.png\"\r\n      title=\"Open Activity\" (click)=\"openActivity();$event.stopPropagation();\" />\r\n    <label *ngIf=\"ActivityDetails.IsUnSaved && isInConsoleView\" class=\"unsavedText\">unsaved</label>\r\n  </div>\r\n</div>\r\n\r\n",
+            styles: [".callSection{margin-left:0;font-family:Arial;position:relative;margin-top:5px;background-color:#fff}.notesBottonBorder{background-color:#fff;border-left:1px solid #939598;border-bottom:1px solid #939598;border-right:1px solid #939598;border-bottom-left-radius:3px!important;border-bottom-right-radius:3px!important;height:auto}.quickCommentsDiv{text-align:left;flex:1 0 0;flex-wrap:wrap;display:flex;margin:2px}.unsavedText{float:right;margin-right:5px;color:gray;font-style:italic}.quickNotesBotton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:20px;margin:2px;outline:0;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:0;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}.commentsButtonDiv{width:100%;display:flex;align-items:center;background-color:#f6f7fb}.gray-out{top:0;left:0;position:absolute;z-index:2000;background:#fff;opacity:.7;width:100%;height:100%}.spinner-container{position:relative;width:-moz-fit-content;width:fit-content;top:50%;left:50%;transform:translate(-50%,-50%)}.spinner{height:80px;width:80px;border:0;position:relative;left:50%;transform:translate(-50%,0)}.callNotesButtonsSection{text-align:right;padding-right:4px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.callBody{border:1px solid #939598;border-top:1px solid #fff;position:relative}.callBodyBorderless{position:relative}.callDisplay{margin-bottom:8px;background-color:#fff}.editor{font-size:.9em;width:70%;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:5px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.dropDownListStyle{border:1px solid #939598!important;border-radius:3px!important;width:70%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 5px 0 0;cursor:pointer}.activitySubjectTextBoxStyle{border:1px solid #939598!important;border-radius:3px!important;width:70%!important;height:20px!important;text-align:left!important;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0 5px 0 0;padding-left:2px}.activityCommentsTextBoxStyle{color:#333!important;text-align:left!important;margin:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;resize:none;width:100%;height:100%;border:none}.displayDiv{width:100%;display:flex}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{width:70%}.headerLabel{margin-left:10px}.activityFields{position:relative;z-index:0}.callNotesTextArea{background-color:#fff;border-bottom:1px solid #939598;border-top:1px solid #939598;border-top-left-radius:3px!important;border-top-right-radius:3px!important}.callNotesSection{float:left;height:100%;width:100%;background-color:#f6f7fb}.callHeaderRecentActivitySelected{cursor:pointer;border-left:1px solid #939598!important;border-right:1px solid #939598!important;background-color:#cfecf2!important;width:100%!important;margin-top:0!important}.callHeaderRecentActivityUnselected{cursor:pointer;border-left:1px solid #939598!important;border-right:1px solid #939598!important;background-color:#e6f4f7!important;width:100%!important;margin-top:0!important}.callHeader{border:1px solid #939598!important;background-color:#f4f5fb!important;width:100%!important;margin-top:0!important}.callHeaderBottomBorder{cursor:pointer;border-bottom:1px solid #939598!important;border-left:1px solid #939598!important;border-right:1px solid #939598!important;background-color:#e6f4f7!important;width:100%!important;margin-top:0!important}.RecentCallsImg{height:15px;vertical-align:text-bottom}.RecentCallsImgForActivity{height:15px;vertical-align:super;margin-right:5px}.headerLabelClickableLook{cursor:pointer;display:inline-block;margin-left:10px;max-width:80%;overflow:hidden;text-overflow:ellipsis}.loadingIcon{margin-left:auto;margin-right:5px;height:10px;width:30px;margin-top:5px;padding-bottom:0}input[type=button]:disabled{background-color:#d3d3d3;cursor:auto}"]
+        })
+    ], RecentActivityComponent);
+    return RecentActivityComponent;
+}());
+
+var CurrentActivityComponent = /** @class */ (function () {
+    function CurrentActivityComponent() {
+        this.isActivityMaximized = true;
+        this.EventEmitter = new EventEmitter();
+        this.debouncer = new Subject();
+        this.eventList = new Set();
+    }
+    CurrentActivityComponent.prototype.ngOnInit = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                this.debouncer.pipe(debounceTime(500)).subscribe(function () {
+                    var newEvent = {
+                        eventName: Array.from(_this.eventList).join('|'),
+                        newValue: _this.ActivityDetails
+                    };
+                    _this.EventEmitter.emit(newEvent);
+                    _this.eventList.clear();
+                });
+                return [2 /*return*/];
+            });
+        });
+    };
+    CurrentActivityComponent.prototype.submitActivity = function () {
+        try {
+            this.ActivityDetails.IsProcessing = true;
+            this.EventEmitter.emit({
+                eventName: 'SubmitActivity',
+                newValue: this.ActivityDetails
+            });
+        }
+        catch (error) { }
+    };
+    CurrentActivityComponent.prototype.triggerDiscardActivity = function () {
+        try {
+            this.EventEmitter.emit({
+                eventName: 'TriggerDiscardActivity',
+                newValue: this.ActivityDetails
+            });
+        }
+        catch (error) { }
+    };
+    CurrentActivityComponent.prototype.onNameChange = function (event) {
+        try {
+            this.ActivityDetails.WhoObject = this.WhoObjectList.find(function (obj) { return obj.objectId === event; });
+            this.EventEmitter.emit({
+                eventName: 'ActivityWhoObjectChanged',
+                newValue: this.ActivityDetails
+            });
+        }
+        catch (error) { }
+    };
+    CurrentActivityComponent.prototype.onRelatedToChange = function (event) {
+        try {
+            this.ActivityDetails.WhatObject = this.WhatObjectList.find(function (obj) { return obj.objectId === event; });
+            this.EventEmitter.emit({
+                eventName: 'ActivityWhatObjectChanged',
+                newValue: this.ActivityDetails
+            });
+        }
+        catch (error) { }
+    };
+    CurrentActivityComponent.prototype.onSubjectChange = function () {
+        try {
+            this.eventList.add('ActivitySubjectChanged');
+            this.debouncer.next();
+        }
+        catch (error) { }
+    };
+    CurrentActivityComponent.prototype.onSubjectKeyUp = function () {
+        try {
+            this.eventList.add('ActivitySubjectChanged');
+            this.debouncer.next();
+        }
+        catch (error) { }
+    };
+    CurrentActivityComponent.prototype.onCallNotesChange = function () {
+        try {
+            this.eventList.add('ActivityCallNoteChanged');
+            this.debouncer.next();
+        }
+        catch (error) { }
+    };
+    CurrentActivityComponent.prototype.onCallNotesKeyUp = function () {
+        try {
+            this.eventList.add('ActivityCallNoteChanged');
+            this.debouncer.next();
+        }
+        catch (error) { }
+    };
+    CurrentActivityComponent.prototype.addQuickCommentToDescription = function (comment) {
+        try {
+            var descriptionToSet = comment;
+            if (this.quickCommentOptionRequiredCadArray[comment]) {
+                var cadFields = {};
+                if (this.ActivityDetails) {
+                    cadFields = this.scenarioToCADMap[this.ActivityDetails.ScenarioId];
+                }
+                for (var i = 0; i < this.quickCommentOptionRequiredCadArray[comment].length; i++) {
+                    var keyToCheckIfCADExists = this.quickCommentOptionRequiredCadArray[comment][i];
+                    var stringToBeReplaced = this.quickCommentOptionRequiredCadArray[comment][i];
+                    keyToCheckIfCADExists = keyToCheckIfCADExists.replace('{{', '');
+                    keyToCheckIfCADExists = keyToCheckIfCADExists.replace('}}', '');
+                    if (cadFields[keyToCheckIfCADExists]) {
+                        descriptionToSet = descriptionToSet.replace(stringToBeReplaced, cadFields[keyToCheckIfCADExists].Value);
+                    }
+                }
+            }
+            if (this.ActivityDetails.Description) {
+                this.ActivityDetails.Description += '\n';
+            }
+            this.ActivityDetails.Description += descriptionToSet;
+            this.eventList.add('ActivityCallNoteChanged');
+            this.debouncer.next();
+        }
+        catch (error) { }
+    };
+    CurrentActivityComponent.prototype.parseWhoObject = function (whoObject) {
+        try {
+            return whoObject.displayName + ': ' + whoObject.objectName;
+        }
+        catch (error) { }
+    };
+    CurrentActivityComponent.prototype.parseWhatObject = function (whatObject) {
+        try {
+            return whatObject.displayName + ': ' + whatObject.objectName;
+        }
+        catch (error) { }
+    };
+    __decorate([
+        Input()
+    ], CurrentActivityComponent.prototype, "ActivityDetails", void 0);
+    __decorate([
+        Input()
+    ], CurrentActivityComponent.prototype, "quickCommentList", void 0);
+    __decorate([
+        Input()
+    ], CurrentActivityComponent.prototype, "isAutoSave", void 0);
+    __decorate([
+        Input()
+    ], CurrentActivityComponent.prototype, "enableDiscard", void 0);
+    __decorate([
+        Input()
+    ], CurrentActivityComponent.prototype, "autoSaveTimer", void 0);
+    __decorate([
+        Input()
+    ], CurrentActivityComponent.prototype, "quickCommentOptionRequiredCadArray", void 0);
+    __decorate([
+        Input()
+    ], CurrentActivityComponent.prototype, "WhoObjectList", void 0);
+    __decorate([
+        Input()
+    ], CurrentActivityComponent.prototype, "WhatObjectList", void 0);
+    __decorate([
+        Input()
+    ], CurrentActivityComponent.prototype, "scenarioToCADMap", void 0);
+    __decorate([
+        Output()
+    ], CurrentActivityComponent.prototype, "EventEmitter", void 0);
+    CurrentActivityComponent = __decorate([
+        Component({
+            selector: 'amc-current-activity',
+            template: "<div *ngIf=\"isActivityMaximized\" class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n      <label class=\"headerLabel\">\r\n          <b>Activity Information</b>\r\n      </label>\r\n      <img class=\"ViewResizeImage\" src=\"/assets/images/section_collapse.png\" (click)=\"isActivityMaximized = false\"\r\n          title=\"Collapse\"><img *ngIf=\"enableDiscard\" class=\"DiscardImage\" src=\"assets/images/Discard.png\"\r\n          (click)=\"triggerDiscardActivity()\" title=\"Discard\">\r\n  </div>\r\n  <div class=\"callBody\">\r\n      <div class=\"activityFields\">\r\n          <form>\r\n              <div class=\"editor displayDiv\">\r\n                  <label class=\"displayLabels\" title=\"Name\">Name</label>\r\n                  <select class=\"dropDownListStyle displayData\" [ngModel]=\"ActivityDetails.WhoObject.objectId\" (ngModelChange)=\"onNameChange($event)\" name=\"whoItem\">\r\n                      <option *ngFor=\"let whoItem of WhoObjectList\" [ngValue]=\"whoItem.objectId\">{{ (whoItem.displayName && whoItem.objectName) ? (whoItem.displayName + ': ' +\r\n                          whoItem.objectName) : \"\"}}</option>\r\n                      <!-- <option value=\"UserSelectedForEmptyRecord\"></option> -->\r\n                  </select>\r\n              </div>\r\n              <div class=\"editor displayDiv\"\r\n                  *ngIf='(ActivityDetails.WhoObject && ActivityDetails.WhoObject.objectType !== \"Lead\")'>\r\n                  <label class=\"displayLabels\" title=\"Related To\">Related To</label>\r\n                  <select class=\"dropDownListStyle displayData\" (ngModelChange)=\"onRelatedToChange($event)\"\r\n                      [ngModel]=\"ActivityDetails.WhatObject.objectId\" name=\"whatItem\">\r\n                      <option *ngFor=\"let whatItem of WhatObjectList;\" [ngValue]=\"whatItem.objectId\">\r\n                          {{ (whatItem.displayName && whatItem.objectName) ? (whatItem.displayName + ': ' + whatItem.objectName) : \"\" }}</option>\r\n                      <!-- <option value=\"UserSelectedForEmptyRecord\"></option> -->\r\n                  </select>\r\n              </div>\r\n              <div class=\"editor displayDiv\">\r\n                  <label class=\"displayLabels\" title=\"Subject\">Subject</label>\r\n                  <input class=\"activitySubjectTextBoxStyle displayData\" (change)=\"onSubjectChange()\" type=\"text\"\r\n                      name=\"subject\" (keyup)=\"onSubjectKeyUp()\" [(ngModel)]=\"ActivityDetails.Subject\">\r\n              </div>\r\n              <div class=\"editor displayDiv\">\r\n                  <div class=\"callNotesSection\">\r\n                      <div class=\"callNotesTextArea\">\r\n                          <textarea [(ngModel)]=\"ActivityDetails.Description\" placeholder=\"Click to add a comment\"\r\n                              class=\"activityCommentsTextBoxStyle\" (change)=\"onCallNotesChange()\" name=\"description\"\r\n                              (keyup)=\"onCallNotesKeyUp()\" cols=\"20\" rows=\"2\" title=\"\"></textarea>\r\n                      </div>\r\n                      <div class=\"notesBottonBorder\">\r\n                          <div class=\"commentsButtonDiv\">\r\n                              <div class=\"quickCommentsDiv\">\r\n                                  <input *ngFor=\"let quickComment of quickCommentList; let i = index;\"\r\n                                      class=\"quickNotesBotton\" type=\"button\" value=\"{{i+1}}\"\r\n                                      (click)=\"addQuickCommentToDescription(quickComment)\" title=\"{{quickComment}}\">\r\n                              </div>\r\n                              <div class=\"callNotesButtonsSection\">\r\n                                  <input class=\"submitButton\" type=\"button\" value=\"Save\"\r\n                                      (click)=\"submitActivity()\" [disabled]=\"!ActivityDetails.IsUnSaved\" />\r\n                                  <!-- TOsDO check this Isprocessing -->\r\n                                  <!-- <input *ngIf=\"!storageService.getActivity().IsProcessing\" class=\"submitButton\" type=\"button\" value=\"Save\" (click)=\"submitActivity(storageService.getActivity().ScenarioId)\" [disabled]=\"!isChangesUnSaved(this.scenarioId)\" /> -->\r\n                                  <img *ngIf=\"ActivityDetails.IsProcessing\" class=\"loadingIcon\"\r\n                                      src=\"assets/images/loading.gif\" title=\"Updating Activity\" />\r\n                              </div>\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n          </form>\r\n      </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"!isActivityMaximized\" class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n      <label class=\"headerLabel\">\r\n          <b>Activity Information</b>\r\n      </label>\r\n      <img class=\"ViewResizeImage\" src=\"assets/images/section_expand.png\" (click)=\"isActivityMaximized = true\"\r\n          title=\"Expand\">\r\n  </div>\r\n</div>\r\n",
+            styles: [".imageExpandCollapse{float:right;width:20px;height:20px}.miscSection{position:relative;margin-top:20px;background-color:#e5e6f2}.callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.notesBottonBorder{background-color:#fff;border-left:1px solid #939598;border-bottom:1px solid #939598;border-right:1px solid #939598;border-bottom-left-radius:3px!important;border-bottom-right-radius:3px!important;height:auto}.quickNotesBotton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:20px;margin:2px;outline:0;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:0;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}.callBody{border:1px solid #939598;border-top:1px solid #939598;position:relative}.miscIcons{width:20px;height:20px;float:right;margin-top:4px;margin-right:5px;margin-left:5px}.amcIcon{width:50%;height:20px;margin-top:5px;margin-left:10px}.callDisplay{display:grid;margin-bottom:8px;background-color:#fff}.editor{font-size:.9em;width:70%;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{width:28px;height:20px;margin:6px 0 0 5px}.dropDownListStyle{border:1px solid #939598!important;border-radius:3px!important;width:71%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 5px 0 0;cursor:pointer}.activitySubjectTextBoxStyle{border:1px solid #939598!important;border-radius:3px!important;width:71%!important;height:20px!important;text-align:left!important;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0 5px 0 0;padding-left:2px}.activityCommentsTextBoxStyle{border:none;color:#333!important;text-align:left!important;margin:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;resize:none;width:100%;height:95px}.displayDiv{width:100%;display:flex}.displayLabels{margin-left:5px;width:25%;margin-right:2px}.displayData{width:70%}.commentsButtonDiv{width:100%;display:flex;align-items:center;background-color:#f6f7fb}.quickCommentsDiv{text-align:left;flex:1 0 0;flex-wrap:wrap;display:flex;margin:2px}.callNotesButtonsSection{text-align:right;padding-right:4px}.newEntityImages{width:25px;height:25px;margin-top:2px;cursor:pointer;padding-left:5px}body{font-size:.85em;color:#232323;background-color:#fff;font-family:Arial}.callNotesSection{float:left;height:100%;width:100%;margin-right:5px;margin-left:5px;margin-bottom:5px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.DiscardImage{padding-top:2px;width:15px;height:18px;float:right;cursor:pointer}.headerLabel{margin-left:10px}.callNotesTextArea{background-color:#fff;border-left:1px solid #939598;border-bottom:1px solid #939598;border-right:1px solid #939598;border-top:1px solid #939598;border-top-left-radius:3px!important;border-top-right-radius:3px!important}.loadingIcon{float:right;margin-right:5px;height:10px;width:30px;margin-top:8px;padding-bottom:0}input[type=button]:disabled{background-color:#d3d3d3;cursor:auto}"]
+        })
+    ], CurrentActivityComponent);
+    return CurrentActivityComponent;
+}());
+
+var SearchInformationComponent = /** @class */ (function () {
+    function SearchInformationComponent() {
+        this.isSearchInformationMaximized = true;
+        this.singleMatchData = null;
+        this.multiMatchData = [];
+        this.agentSelectedCallerInformation = new EventEmitter();
+    }
+    SearchInformationComponent.prototype.ngOnChanges = function () {
+        this.renderData();
+    };
+    SearchInformationComponent.prototype.renderData = function () {
+        try {
+            this.singleMatchData = null;
+            this.multiMatchData = [];
+            this.shouldShowAllMultiMatchOptions = false;
+            if (this.searchRecordList.length === 1) {
+                this.singleMatchData = this.parseSearchRecordForNameSingleMatch(this.searchRecordList[0]);
+            }
+            else if (this.searchRecordList.length > 1) {
+                for (var i = 0; i < this.searchRecordList.length; i++) {
+                    this.multiMatchData.push(this.parseSearchRecordForNameMultiMatch(this.searchRecordList[i]));
+                }
+            }
+        }
+        catch (error) { }
+    };
+    SearchInformationComponent.prototype.onAgentSelectedCallerInformation = function (event) {
+        try {
+            this.agentSelectedCallerInformation.emit({
+                id: event.target.id,
+                value: event.target.value
+            });
+        }
+        catch (error) { }
+    };
+    SearchInformationComponent.prototype.parseSearchRecordForNameSingleMatch = function (searchRecord) {
+        var results = [];
+        try {
+            var src = this.getEntityImgToDisplay(searchRecord);
+            this.singleMatchIconSrc = src;
+            var sLayoutInfo = this.getSearchLayoutInfoForDisplay(searchRecord);
+            for (var j = 0; j < sLayoutInfo.DisplayFields.length; j++) {
+                if (sLayoutInfo.DisplayFields && sLayoutInfo.DisplayFields[j].DevName) {
+                    var nameKey = sLayoutInfo.DisplayFields[j].DevName;
+                    var keys = Object.keys(searchRecord.fields);
+                    for (var i = 0; i < keys.length; i++) {
+                        if (searchRecord.fields[keys[i]] &&
+                            searchRecord.fields[keys[i]].DevName === nameKey) {
+                            var displayRecord = searchRecord.fields[keys[i]].Value;
+                            if (j === 0) {
+                                displayRecord = searchRecord.displayName
+                                    ? [searchRecord.displayName, displayRecord]
+                                    : [searchRecord.type, displayRecord];
+                            }
+                            else {
+                                displayRecord = sLayoutInfo.DisplayFields[j].DisplayName
+                                    ? [sLayoutInfo.DisplayFields[j].DisplayName, displayRecord]
+                                    : [sLayoutInfo.DisplayFields[j].DevName, displayRecord];
+                            }
+                            results.push(displayRecord);
+                        }
+                    }
+                }
+            }
+        }
+        catch (error) { }
+        return results;
+    };
+    SearchInformationComponent.prototype.parseSearchRecordForNameMultiMatch = function (searchRecord) {
+        var results = [];
+        try {
+            var src = this.getEntityImgToDisplay(searchRecord);
+            var sLayoutInfo = this.getSearchLayoutInfoForDisplay(searchRecord);
+            for (var j = 0; j < sLayoutInfo.DisplayFields.length; j++) {
+                if (sLayoutInfo.DisplayFields && sLayoutInfo.DisplayFields[j].DevName) {
+                    var nameKey = sLayoutInfo.DisplayFields[j].DevName;
+                    var keys = Object.keys(searchRecord.fields);
+                    for (var i = 0; i < keys.length; i++) {
+                        if (searchRecord.fields[keys[i]] &&
+                            searchRecord.fields[keys[i]].DevName === nameKey) {
+                            var displayRecord = searchRecord.fields[keys[i]].Value;
+                            if (j === 0) {
+                                displayRecord = searchRecord.displayName
+                                    ? [searchRecord.displayName, displayRecord]
+                                    : [searchRecord.type, displayRecord];
+                            }
+                            else {
+                                displayRecord = sLayoutInfo.DisplayFields[j].DisplayName
+                                    ? [sLayoutInfo.DisplayFields[j].DisplayName, displayRecord]
+                                    : [sLayoutInfo.DisplayFields[j].DevName, displayRecord];
+                            }
+                            displayRecord.push(src);
+                            results.push(displayRecord);
+                            return results;
+                        }
+                    }
+                }
+            }
+        }
+        catch (error) { }
+        return results;
+    };
+    SearchInformationComponent.prototype.getEntityImgToDisplay = function (searchRecord) {
+        var src = '';
+        try {
+            if (searchRecord.type) {
+                if (searchRecord.type.toUpperCase() === 'CONTACT') {
+                    src = '../../assets/images/Icon_Contact.png';
+                }
+                else if (searchRecord.type.toUpperCase() === 'ACCOUNT') {
+                    src = '../../assets/images/Icon_Account.png';
+                }
+                else if (searchRecord.type.toUpperCase() === 'LEAD') {
+                    src = '../../assets/images/Icon_Lead.png';
+                }
+                else {
+                    src = '../../assets/images/Miscellaneous_Icon.png';
+                }
+            }
+        }
+        catch (error) { }
+        return src;
+    };
+    SearchInformationComponent.prototype.getSearchLayoutInfoForDisplay = function (searchRecord) {
+        var layoutInfo;
+        try {
+            layoutInfo = this.searchLayout.layouts[0][this.ActivityDetails.CallType].find(function (i) { return i.DevName === searchRecord.type; });
+        }
+        catch (error) { }
+        return layoutInfo;
+    };
+    __decorate([
+        Input()
+    ], SearchInformationComponent.prototype, "ActivityDetails", void 0);
+    __decorate([
+        Input()
+    ], SearchInformationComponent.prototype, "searchLayout", void 0);
+    __decorate([
+        Input()
+    ], SearchInformationComponent.prototype, "searchRecordList", void 0);
+    __decorate([
+        Output()
+    ], SearchInformationComponent.prototype, "agentSelectedCallerInformation", void 0);
+    SearchInformationComponent = __decorate([
+        Component({
+            selector: 'amc-search-information',
+            template: "<div class=\"callDisplay\">\r\n  <div class=\"editor callHeader\">\r\n    <label class=\"headerLabel\">\r\n      <b>Caller Information</b>\r\n    </label>\r\n    <img\r\n      title=\"Multiple Matches Available\"\r\n      *ngIf=\"this.searchRecordList.length > 1\"\r\n      src=\"../../assets/images/MultiMatchAlert.png\"\r\n      class=\"multiMatchImg\"\r\n    />\r\n    <img\r\n      *ngIf=\"isSearchInformationMaximized\"\r\n      class=\"ViewResizeImage\"\r\n      src=\"assets/images/section_collapse.png\"\r\n      (click)=\"isSearchInformationMaximized = false\"\r\n      title=\"Collapse\"\r\n    />\r\n    <img\r\n      *ngIf=\"!isSearchInformationMaximized\"\r\n      class=\"ViewResizeImage\"\r\n      src=\"assets/images/section_expand.png\"\r\n      (click)=\"isSearchInformationMaximized = true\"\r\n      title=\"Expand\"\r\n    />\r\n  </div>\r\n  <div class=\"callBody\" *ngIf=\"isSearchInformationMaximized\">\r\n    <div *ngIf=\"this.searchRecordList.length > 1\">\r\n      <span class=\"overflowWrapper\">\r\n        <img\r\n          class=\"CRMResultImageMultiMatch\"\r\n          src=\"{{ this.multiMatchData[0][0][2] }}\"\r\n        />\r\n        <input\r\n          id=\"{{ this.searchRecordList[0].id }}\"\r\n          name=\"{{ this.multiMatchData[0][0][1] }}\"\r\n          (click)=\"onAgentSelectedCallerInformation($event)\"\r\n          readonly\r\n          class=\"multiMatchLabel\"\r\n          title=\"{{ this.multiMatchData[0][0][1] }}\"\r\n          type=\"text\"\r\n          value=\"{{ this.multiMatchData[0][0][1] }}\"\r\n        />\r\n        <span style=\"float: right; margin-right: 4%;\">\r\n          <img\r\n            *ngIf=\"!this.shouldShowAllMultiMatchOptions\"\r\n            class=\"CRMExpandImage\"\r\n            src=\"../../assets/images/down-arrow.png\"\r\n            (click)=\"shouldShowAllMultiMatchOptions = true\"\r\n          />\r\n          <img\r\n            *ngIf=\"this.shouldShowAllMultiMatchOptions\"\r\n            class=\"CRMExpandImage\"\r\n            src=\"../../assets/images/up-arrow.png\"\r\n            (click)=\"shouldShowAllMultiMatchOptions = false\"\r\n          />\r\n        </span>\r\n      </span>\r\n      <div *ngIf=\"this.shouldShowAllMultiMatchOptions\">\r\n      <div *ngFor=\"let i of this.multiMatchData | slice: 1; let index = index\">\r\n        <span\r\n          class=\"overflowWrapper\"\r\n        >\r\n          <img class=\"CRMResultImageMultiMatch\" src=\"{{ i[0][2] }}\" />\r\n          <input\r\n            id=\"{{ this.searchRecordList[index + 1].id }}\"\r\n            name=\"{{ i[0][1] }}\"\r\n            readonly\r\n            class=\"multiMatchLabel\"\r\n            (click)=\"onAgentSelectedCallerInformation($event)\"\r\n            title=\"{{ i[0][1] }}\"\r\n            type=\"text\"\r\n            value=\"{{ i[0][1] }}\"\r\n          />\r\n        </span>\r\n      </div>\r\n      </div>\r\n    </div>\r\n    <!-- Below is the HTML loaded on Single Match -->\r\n    <div *ngIf=\"this.searchRecordList.length === 1\">\r\n      <div\r\n        class=\"editorFull displayDiv\"\r\n        *ngFor=\"\r\n          let i of this.singleMatchData | slice: 0:1;\r\n          let index = index;\r\n          let first = first\r\n        \"\r\n      >\r\n        <span class=\"overflowWrapper\">\r\n            <img\r\n              id=\"EntityIcon\"\r\n              src=\"{{ this.singleMatchIconSrc }}\"\r\n              class=\"CRMResultImage\"\r\n            />\r\n            <input\r\n              class=\"singleSearchResultSelect singleMatchFirstWrapper \"\r\n              id=\"{{ this.searchRecordList[0].id }}\"\r\n              [class.firstSingleMatchResult]=\"first\"\r\n              value=\"{{ i[1] }}\"\r\n              title=\"{{ i[1] }}\"\r\n              (click)=\"onAgentSelectedCallerInformation($event)\"\r\n              readonly\r\n            />\r\n        </span>\r\n      </div>\r\n      <div\r\n        class=\"editorFull displayDiv\"\r\n        *ngFor=\"\r\n          let i of this.singleMatchData | slice: 1;\r\n          let index = index;\r\n          let first = first\r\n        \"\r\n      >\r\n        <span class=\"overflowWrapper\">\r\n          <label title=\"{{ i[0] }}\" class=\"displayLabelsTabbed\">{{\r\n            i[0]\r\n          }}</label>\r\n            <input\r\n              class=\"singleSearchResultSelect singleMatchTabbedItemsWrapper singleMatchLabel\"\r\n              id=\"{{ this.searchRecordList[0].id }}\"\r\n              value=\"{{ i[1] }}\"\r\n              title=\"{{ i[1] }}\"\r\n              readonly\r\n            />\r\n          </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
+            styles: [".callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.displayDiv{width:100%;display:flex}.multiMatchImg{height:18px;margin-left:5px}.editor{font-size:.9em;width:70%;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editorFull{font-size:.9em;width:100%;text-align:left;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.CRMResultImage{width:18px;height:18px;margin-right:-5px;margin-top:-5px;margin-left:5px}.CRMResultImageMultiMatch{width:18px;height:18px;margin-right:2px;margin-left:5px;margin-top:-5px}.CRMExpandImage{width:6px;height:6px;cursor:pointer;margin-bottom:2px}.callBody{border:1px solid #939598;border-top:1px solid #939598;position:relative}.callDisplay{margin-bottom:8px;display:grid;background-color:#fff;display:grid}.multipleSearchResultSelect{border:1px solid #939598!important;border-radius:3px!important;width:96%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:5px 0 5px 6px;cursor:pointer}.overflowWrapper{width:100%;overflow-x:hidden;overflow-y:hidden}.singleSearchResultSelect{border:0 solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0;outline:0}.wrapper{width:79%!important}.singleMatchFirstWrapper{cursor:pointer;border:0;outline:0;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(100% - 30px)}.singleMatchTabbedItemsWrapper{width:70%}.displayLabels{margin-left:5px;width:calc(20% + 5px);font-weight:400;margin-bottom:0;margin-top:0;outline:0;overflow:hidden;max-width:100px;vertical-align:middle}.displayLabelsMultiMatch{margin-left:5px;width:calc(20% + 5px);font-weight:400;margin-bottom:0;margin-top:0;outline:0}.displayLabelsTabbed{margin-left:5px;width:35%;font-weight:400;margin-bottom:0;margin-top:0;outline:0;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.matchedRecordsMargin{margin-top:1%}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}.firstSingleMatchResult{font-weight:700;border:0 solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0 0 5px;outline:0}.multiMatchLabel{border:0;cursor:pointer;outline:0;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(95% - 45px)}.singleMatchLabel{border:0;outline:0;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(65% - 13px)}"]
+        })
+    ], SearchInformationComponent);
+    return SearchInformationComponent;
+}());
+
 var UILibraryModule = /** @class */ (function () {
     function UILibraryModule(injector) {
         this.injector = injector;
@@ -885,7 +1388,7 @@ var UILibraryModule = /** @class */ (function () {
     ]; };
     UILibraryModule = __decorate([
         NgModule({
-            imports: [BrowserModule, CommonModule, FormsModule],
+            imports: [BrowserModule, CommonModule, FormsModule, MatTabsModule],
             declarations: [
                 InteractionComponent,
                 ScenarioComponent,
@@ -897,11 +1400,16 @@ var UILibraryModule = /** @class */ (function () {
                 ChatMessageComponent,
                 DispositionComponent,
                 ActivityComponent,
-                LoginComponent
+                LoginComponent,
+                CreateComponent,
+                RecentActivityComponent,
+                CurrentActivityComponent,
+                SearchInformationComponent
             ],
-            entryComponents: [ScenarioComponent, DispositionComponent, LoginComponent],
+            providers: [],
+            entryComponents: [ScenarioComponent, DispositionComponent, LoginComponent, CreateComponent, RecentActivityComponent, CurrentActivityComponent, SearchInformationComponent],
             bootstrap: [],
-            exports: [ScenarioComponent, DispositionComponent, LoginComponent]
+            exports: [ScenarioComponent, DispositionComponent, LoginComponent, CreateComponent, RecentActivityComponent, CurrentActivityComponent, SearchInformationComponent]
         })
     ], UILibraryModule);
     return UILibraryModule;
@@ -911,5 +1419,5 @@ var UILibraryModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { IChatMessageType, Property, UILibraryModule, ValueType, InteractionComponent as ɵa, ScenarioComponent as ɵb, OperationComponent as ɵc, PropertyComponent as ɵd, HoldtimerComponent as ɵe, DurationComponent as ɵf, ChatBoxComponent as ɵg, ChatMessageComponent as ɵh, DispositionComponent as ɵi, ActivityComponent as ɵj, LoginComponent as ɵk };
+export { IChatMessageType, Property, UILibraryModule, ValueType, InteractionComponent as ɵa, ScenarioComponent as ɵb, OperationComponent as ɵc, PropertyComponent as ɵd, HoldtimerComponent as ɵe, DurationComponent as ɵf, ChatBoxComponent as ɵg, ChatMessageComponent as ɵh, DispositionComponent as ɵi, ActivityComponent as ɵj, LoginComponent as ɵk, CreateComponent as ɵl, RecentActivityComponent as ɵm, CurrentActivityComponent as ɵn, SearchInformationComponent as ɵo };
 //# sourceMappingURL=amc-technology-ui-library.js.map