@amc-technology/ui-library 1.0.98 → 1.0.99

package/bundles/amc-technology-ui-library.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/elements'), require('@angular/platform-browser'), require('elements-zone-strategy')) :
-    typeof define === 'function' && define.amd ? define('@amc-technology/ui-library', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/elements', '@angular/platform-browser', 'elements-zone-strategy'], factory) :
-    (global = global || self, factory((global['amc-technology'] = global['amc-technology'] || {}, global['amc-technology']['ui-library'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.elements, global.ng.platformBrowser, global.elementsZoneStrategy));
-}(this, (function (exports, core, common, forms, elements, platformBrowser, elementsZoneStrategy) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/elements'), require('@angular/platform-browser'), require('elements-zone-strategy'), require('rxjs/operators'), require('rxjs'), require('@angular/material/tabs')) :
+    typeof define === 'function' && define.amd ? define('@amc-technology/ui-library', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/elements', '@angular/platform-browser', 'elements-zone-strategy', 'rxjs/operators', 'rxjs', '@angular/material/tabs'], factory) :
+    (global = global || self, factory((global['amc-technology'] = global['amc-technology'] || {}, global['amc-technology']['ui-library'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.elements, global.ng.platformBrowser, global.elementsZoneStrategy, global.rxjs.operators, global.rxjs, global.ng.material.tabs));
+}(this, (function (exports, core, common, forms, elements, platformBrowser, elementsZoneStrategy, operators, rxjs, tabs) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -283,6 +283,16 @@
                 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([
             core.Input()
         ], InteractionComponent.prototype, "interaction", void 0);
@@ -301,8 +311,8 @@
         InteractionComponent = __decorate([
             core.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;
@@ -727,6 +737,7 @@
             }
             catch (e) { }
             finally {
+                this.scrollToBottom();
             }
         };
         ChatBoxComponent.prototype.ngAfterViewChecked = function () {
@@ -754,7 +765,6 @@
             return message.type && message.type === exports.IChatMessageType.AGENT;
         };
         ChatBoxComponent.prototype.sendNewMessage = function (event) {
-            this.scrollToBottom();
             event.preventDefault();
             if (this.newMessageText) {
                 this.newMessage.emit(this.newMessageText);
@@ -815,8 +825,8 @@
         ChatBoxComponent = __decorate([
             core.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;
@@ -916,7 +926,7 @@
             core.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;
@@ -1049,8 +1059,6 @@
             if (!loginForm.controls[field.name].valid) {
                 field.isInvalid = true;
             }
-            // console.log(loginForm);
-            // console.log(field);
         };
         __decorate([
             core.Input()
@@ -1062,12 +1070,506 @@
             core.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 core.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([
+            core.Output()
+        ], CreateComponent.prototype, "CreateNewEntity", void 0);
+        __decorate([
+            core.Input()
+        ], CreateComponent.prototype, "Entities", void 0);
+        CreateComponent = __decorate([
+            core.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 core.EventEmitter();
+            this.debouncer = new rxjs.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(operators.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([
+            core.Input()
+        ], RecentActivityComponent.prototype, "ActivityDetails", void 0);
+        __decorate([
+            core.Input()
+        ], RecentActivityComponent.prototype, "isInConsoleView", void 0);
+        __decorate([
+            core.Input()
+        ], RecentActivityComponent.prototype, "quickCommentList", void 0);
+        __decorate([
+            core.Input()
+        ], RecentActivityComponent.prototype, "workingScenarioID", void 0);
+        __decorate([
+            core.Input()
+        ], RecentActivityComponent.prototype, "idx", void 0);
+        __decorate([
+            core.Input()
+        ], RecentActivityComponent.prototype, "last", void 0);
+        __decorate([
+            core.Input()
+        ], RecentActivityComponent.prototype, "WhoObjectList", void 0);
+        __decorate([
+            core.Input()
+        ], RecentActivityComponent.prototype, "WhatObjectList", void 0);
+        __decorate([
+            core.Output()
+        ], RecentActivityComponent.prototype, "EventEmitter", void 0);
+        RecentActivityComponent = __decorate([
+            core.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 core.EventEmitter();
+            this.debouncer = new rxjs.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(operators.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([
+            core.Input()
+        ], CurrentActivityComponent.prototype, "ActivityDetails", void 0);
+        __decorate([
+            core.Input()
+        ], CurrentActivityComponent.prototype, "quickCommentList", void 0);
+        __decorate([
+            core.Input()
+        ], CurrentActivityComponent.prototype, "isAutoSave", void 0);
+        __decorate([
+            core.Input()
+        ], CurrentActivityComponent.prototype, "enableDiscard", void 0);
+        __decorate([
+            core.Input()
+        ], CurrentActivityComponent.prototype, "autoSaveTimer", void 0);
+        __decorate([
+            core.Input()
+        ], CurrentActivityComponent.prototype, "quickCommentOptionRequiredCadArray", void 0);
+        __decorate([
+            core.Input()
+        ], CurrentActivityComponent.prototype, "WhoObjectList", void 0);
+        __decorate([
+            core.Input()
+        ], CurrentActivityComponent.prototype, "WhatObjectList", void 0);
+        __decorate([
+            core.Input()
+        ], CurrentActivityComponent.prototype, "scenarioToCADMap", void 0);
+        __decorate([
+            core.Output()
+        ], CurrentActivityComponent.prototype, "EventEmitter", void 0);
+        CurrentActivityComponent = __decorate([
+            core.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 core.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([
+            core.Input()
+        ], SearchInformationComponent.prototype, "ActivityDetails", void 0);
+        __decorate([
+            core.Input()
+        ], SearchInformationComponent.prototype, "searchLayout", void 0);
+        __decorate([
+            core.Input()
+        ], SearchInformationComponent.prototype, "searchRecordList", void 0);
+        __decorate([
+            core.Output()
+        ], SearchInformationComponent.prototype, "agentSelectedCallerInformation", void 0);
+        SearchInformationComponent = __decorate([
+            core.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;
@@ -1100,7 +1602,7 @@
         ]; };
         UILibraryModule = __decorate([
             core.NgModule({
-                imports: [platformBrowser.BrowserModule, common.CommonModule, forms.FormsModule],
+                imports: [platformBrowser.BrowserModule, common.CommonModule, forms.FormsModule, tabs.MatTabsModule],
                 declarations: [
                     InteractionComponent,
                     ScenarioComponent,
@@ -1112,11 +1614,16 @@
                     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;
@@ -1135,6 +1642,10 @@
     exports.ɵi = DispositionComponent;
     exports.ɵj = ActivityComponent;
     exports.ɵk = LoginComponent;
+    exports.ɵl = CreateComponent;
+    exports.ɵm = RecentActivityComponent;
+    exports.ɵn = CurrentActivityComponent;
+    exports.ɵo = SearchInformationComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });