@amc-technology/ui-library 1.0.101 → 1.0.103

package/fesm2022/amc-technology-ui-library.mjs

@@ -1,66 +1,88 @@
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { createCustomElement } from '@angular/elements';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { createCustomElement } from '@angular/elements';
 import { BrowserModule } from '@angular/platform-browser';
-import { debounceTime } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
 
-/**
- * @ignore
- */
-class OperationComponent {
-    statusText;
-    callId;
-    callType;
-    operations;
-    labelledByText = '';
-    describedByText = '';
-    /**
-     * @ignore
-     */
+class ActivityComponent {
+    isActivityMaximized;
+    activity;
+    ActivitySave = new EventEmitter();
+    OnNameSelectChange = new EventEmitter();
+    OnRelatedToChange = new EventEmitter();
+    OnSubjectChange = new EventEmitter();
+    OnCallNotesChange = new EventEmitter();
     constructor() {
+        this.isActivityMaximized = true;
     }
-    /**
-     * @ignore
-     */
     ngOnInit() {
-        if (this.statusText && this.callType) {
-            this.describedByText = `${this.statusText} ${this.callType}`;
-        }
-        else if (this.statusText) {
-            this.describedByText = this.statusText;
-        }
-        else if (this.callType) {
-            this.describedByText = this.callType;
-        }
-        if (this.callId) {
-            this.labelledByText = this.callId;
+    }
+    onNameSelectChange(event) {
+        this.activity.WhoObject = this.getWho(event.currentTarget.value);
+        this.OnNameSelectChange.emit(this.activity);
+    }
+    parseWhoObject(whoObject) {
+        return whoObject.objectType + ': ' + whoObject.objectName;
+    }
+    parseWhatObject(whatObject) {
+        return whatObject.objectType + ': ' + whatObject.objectName;
+    }
+    onRelatedToChange(event) {
+        this.activity.WhatObject = this.getWhat(event.currentTarget.value);
+        this.OnRelatedToChange.emit(this.activity);
+    }
+    onSubjectChange(event) {
+        this.activity.Subject = event.srcElement.value;
+        this.OnSubjectChange.emit(this.activity);
+    }
+    onCallNotesChange(event) {
+        this.activity.Subject = event.srcElement.value.trim();
+        this.OnCallNotesChange.emit(this.activity);
+    }
+    getWho(id) {
+        for (let i = 0; i < this.activity.whoList.length; i++) {
+            if (this.activity.whoList[i].objectId === id) {
+                return this.activity.whoList[i];
+            }
         }
     }
-    operationKeypress(event, operation) {
-        if (event.code === 'Enter') {
-            operation.handler(operation.operationName, operation.operationMetadata);
+    getWhat(id) {
+        for (let i = 0; i < this.activity.whatList.length; i++) {
+            if (this.activity.whatList[i].objectId === id) {
+                return this.activity.whatList[i];
+            }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: OperationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: OperationComponent, selector: "amc-operation", inputs: { statusText: "statusText", callId: "callId", callType: "callType", operations: "operations" }, ngImport: i0, template: "<div class=\"callOptions\">\r\n    <img\r\n     class=\"AnswerCallImages\"\r\n     tabindex=\"0\"\r\n     role=\"button\"\r\n     attr.aria-label=\"{{ operation.title }}\"\r\n     *ngFor=\"let operation of operations\"\r\n     [title]=\"operation.title\"\r\n     [src]=\"operation.icon\"\r\n     [attr.accesskey]=\"operation.accesskey || null\"\r\n     [attr.aria-labelledby]=\"labelledByText || null\"\r\n     [attr.aria-describedby]=\"describedByText || null\"\r\n     (click)=\"operation.handler(operation.operationName, operation.operationMetadata)\"\r\n     (keypress)=\"operationKeypress($event, operation)\"/>\r\n</div>\r\n", styles: [".AnswerCallImages:focus{outline:2px solid rgb(50,150,218);outline-offset:1px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    loadQuickComment(value) {
+        this.activity.Description = this.activity.Description + this.activity.quickCommentList[value];
+    }
+    activitySave(clearActivityFields) {
+        this.ActivitySave.emit(this.activity);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ActivityComponent, selector: "app-activity", inputs: { activity: "activity" }, outputs: { ActivitySave: "ActivitySave", OnNameSelectChange: "OnNameSelectChange", OnRelatedToChange: "OnRelatedToChange", OnSubjectChange: "OnSubjectChange", OnCallNotesChange: "OnCallNotesChange" }, ngImport: i0, 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\" title=\"Collapse\">\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=\"Call From\">{{activity.NameFieldName}}</label>\r\n          <select class=\"dropDownListStyle displayData\" data-resetperactivity=\"false\" (change)=\"onNameSelectChange($event)\">\r\n            <option *ngFor=\"let who of activity.whoList\" value=\"{{who.objectId}}\">{{parseWhoObject(who)}}</option>\r\n          </select>\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Related To\">{{activity.RelatedToFieldName}}</label>\r\n          <select class=\"dropDownListStyle displayData\" (change)=\"onRelatedToChange($event)\" data-resetperactivity=\"false\">\r\n            <option *ngFor=\"let what of activity.whatList\" value=\"{{what.objectId}}\">{{parseWhatObject(what)}}</option>\r\n          </select>\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Subject\">{{activity.SubjectFieldName}}</label>\r\n          <input class=\"activitySubjectTextBoxStyle displayData\" (change)=\"onSubjectChange($event)\" title=\"{{activity.Subject}}\"\r\n            type=\"text\" value=\"{{activity.Subject}}\">\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <div class=\"callNotesContainer\">\r\n            <div class=\"textAreaDiv\">\r\n              <textarea value=\"{{activity.Description}}\" placeholder=\"Click to add a comment\" class=\"activityCommentsTextBoxStyle\"\r\n                (change)=\"onCallNotesChange($event)\" cols=\"20\" rows=\"2\" title=\"\"></textarea>\r\n            </div>\r\n            <div class=\"notesButtonBorder\">\r\n              <div class=\"commentsButtonDiv\">\r\n                <div class=\"quickCommentsDiv\">\r\n                  <input *ngFor=\"let quickComment of activity.quickCommentList ; let i = index;\" class=\"quickNotesBotton\" type=\"button\"\r\n                    value=\"{{i+1}}\" (click)=\"loadQuickComment(i)\" title=\"{{quickComment}}\">\r\n                </div>\r\n                <div class=\"submitDiv\">\r\n                  <input class=\"submitButton\" type=\"button\" value=\"Submit\" (click)=\"activitySave(false)\">\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\" title=\"Expand\">\r\n  </div>\r\n", styles: [".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;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.callHeader{border:1px solid #939598;background-color:#f4f5fb;width:100%!important;margin-top:0!important}.headerLabel{margin-left:10px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.callBody{border-top:1px solid white!important;border:1px solid #939598;position:relative}.displayDiv{width:100%;display:flex;justify-content:space-between}.displayData{width:70%}.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{color:#333!important;text-align:left!important;margin:0 0% 0 0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;resize:none;width:100%;height:95px}.notesButtonBorder{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}.commentsButtonDiv{width:100%;display:flex;align-items:center;background-color:#f6f7fb}.quickNotesBotton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:20px;margin:2px;outline:none;font-size:70%}.quickCommentsDiv{text-align:left;flex:1 0 0;flex-wrap:wrap;display:flex;margin:2px}.submitDiv{text-align:right;padding-right:4px}.submitButton{border:0;float:right;margin-top:2px;outline:none;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}.textAreaDiv{margin-left:5px;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis;margin-right:2px}.callNotesContainer{padding-left:0;display:flex;flex-direction:column;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: OperationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ActivityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amc-operation', template: "<div class=\"callOptions\">\r\n    <img\r\n     class=\"AnswerCallImages\"\r\n     tabindex=\"0\"\r\n     role=\"button\"\r\n     attr.aria-label=\"{{ operation.title }}\"\r\n     *ngFor=\"let operation of operations\"\r\n     [title]=\"operation.title\"\r\n     [src]=\"operation.icon\"\r\n     [attr.accesskey]=\"operation.accesskey || null\"\r\n     [attr.aria-labelledby]=\"labelledByText || null\"\r\n     [attr.aria-describedby]=\"describedByText || null\"\r\n     (click)=\"operation.handler(operation.operationName, operation.operationMetadata)\"\r\n     (keypress)=\"operationKeypress($event, operation)\"/>\r\n</div>\r\n", styles: [".AnswerCallImages:focus{outline:2px solid rgb(50,150,218);outline-offset:1px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { statusText: [{
-                type: Input
-            }], callId: [{
-                type: Input
-            }], callType: [{
-                type: Input
-            }], operations: [{
+            args: [{ selector: 'app-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\" title=\"Collapse\">\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=\"Call From\">{{activity.NameFieldName}}</label>\r\n          <select class=\"dropDownListStyle displayData\" data-resetperactivity=\"false\" (change)=\"onNameSelectChange($event)\">\r\n            <option *ngFor=\"let who of activity.whoList\" value=\"{{who.objectId}}\">{{parseWhoObject(who)}}</option>\r\n          </select>\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Related To\">{{activity.RelatedToFieldName}}</label>\r\n          <select class=\"dropDownListStyle displayData\" (change)=\"onRelatedToChange($event)\" data-resetperactivity=\"false\">\r\n            <option *ngFor=\"let what of activity.whatList\" value=\"{{what.objectId}}\">{{parseWhatObject(what)}}</option>\r\n          </select>\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Subject\">{{activity.SubjectFieldName}}</label>\r\n          <input class=\"activitySubjectTextBoxStyle displayData\" (change)=\"onSubjectChange($event)\" title=\"{{activity.Subject}}\"\r\n            type=\"text\" value=\"{{activity.Subject}}\">\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <div class=\"callNotesContainer\">\r\n            <div class=\"textAreaDiv\">\r\n              <textarea value=\"{{activity.Description}}\" placeholder=\"Click to add a comment\" class=\"activityCommentsTextBoxStyle\"\r\n                (change)=\"onCallNotesChange($event)\" cols=\"20\" rows=\"2\" title=\"\"></textarea>\r\n            </div>\r\n            <div class=\"notesButtonBorder\">\r\n              <div class=\"commentsButtonDiv\">\r\n                <div class=\"quickCommentsDiv\">\r\n                  <input *ngFor=\"let quickComment of activity.quickCommentList ; let i = index;\" class=\"quickNotesBotton\" type=\"button\"\r\n                    value=\"{{i+1}}\" (click)=\"loadQuickComment(i)\" title=\"{{quickComment}}\">\r\n                </div>\r\n                <div class=\"submitDiv\">\r\n                  <input class=\"submitButton\" type=\"button\" value=\"Submit\" (click)=\"activitySave(false)\">\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\" title=\"Expand\">\r\n  </div>\r\n", styles: [".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;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.callHeader{border:1px solid #939598;background-color:#f4f5fb;width:100%!important;margin-top:0!important}.headerLabel{margin-left:10px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.callBody{border-top:1px solid white!important;border:1px solid #939598;position:relative}.displayDiv{width:100%;display:flex;justify-content:space-between}.displayData{width:70%}.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{color:#333!important;text-align:left!important;margin:0 0% 0 0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;resize:none;width:100%;height:95px}.notesButtonBorder{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}.commentsButtonDiv{width:100%;display:flex;align-items:center;background-color:#f6f7fb}.quickNotesBotton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:20px;margin:2px;outline:none;font-size:70%}.quickCommentsDiv{text-align:left;flex:1 0 0;flex-wrap:wrap;display:flex;margin:2px}.submitDiv{text-align:right;padding-right:4px}.submitButton{border:0;float:right;margin-top:2px;outline:none;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}.textAreaDiv{margin-left:5px;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis;margin-right:2px}.callNotesContainer{padding-left:0;display:flex;flex-direction:column;width:100%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { activity: [{
                 type: Input
+            }], ActivitySave: [{
+                type: Output
+            }], OnNameSelectChange: [{
+                type: Output
+            }], OnRelatedToChange: [{
+                type: Output
+            }], OnSubjectChange: [{
+                type: Output
+            }], OnCallNotesChange: [{
+                type: Output
             }] } });
 
 var IChatMessageType;
@@ -70,178 +92,495 @@ var IChatMessageType;
     IChatMessageType["INFORMATION"] = "INFORMATION";
 })(IChatMessageType || (IChatMessageType = {}));
 
-/**
- * A helper method to make instances of [IProperty]
- */
-class Property {
-    key;
-    value;
-    /**
-     * KEY value to be displayed on component.
-     */
-    displayKey;
-    /**
-     * VALUE to be displayed on component.
-     */
-    displayValue;
-    displayValueType;
-    propertyMetadata;
-    /**
-     * Click event handler for property.
-     */
-    customOperations;
-    /**
-     * This flag decides if PROPERTY will be displayed on component or not.
-     */
-    visible;
-    /**
-     * Operation responsible for generating displayKey and dispkayValur from key and value.
-     */
-    displayOperation = () => {
-        this.displayKey = this.key;
-        this.displayValue = this.value;
-    };
-    /**
-     *
-     * @param key
-     * @param value : if value type is COUNTER then value should be start time in MilliSeconds.
-     * @param visible
-     * @param valueType
-     * @param customOperation
-     */
-    constructor(key, value, visible, valueType, customOperation) {
-        this.key = key;
-        this.value = value;
-        visible != null ? (this.visible = visible) : (this.visible = true);
-        valueType != null
-            ? (this.displayValueType = valueType)
-            : (this.displayValueType = ValueType.STRING);
-        this.customOperations = customOperation;
-        this.displayOperation();
+class ChatMessageComponent {
+    message;
+    alignRight = false;
+    username;
+    color;
+    timestamp;
+    image;
+    fallbackImage;
+    focusOn = new EventEmitter();
+    constructor() { }
+    ngOnInit() {
+        this.focusOn.emit(true);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChatMessageComponent, selector: "app-chat-message", inputs: { message: "message", alignRight: "alignRight", username: "username", color: "color", timestamp: "timestamp", image: "image", fallbackImage: "fallbackImage" }, outputs: { focusOn: "focusOn" }, ngImport: i0, template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\r\n  <div class=\"message-header\">\r\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\r\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\r\n  </div>\r\n\r\n  <div class=\"message-body-container\">\r\n    <div>\r\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\r\n        <span [innerHTML]=\"message\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n</div>\r\n", styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.timestamp{font-size:10px;margin-right:30px;margin-left:30px}.message-header{display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image{margin-left:5px}.right-message>.message-header .username{margin-left:5px}.left-message>.message-header{margin-left:1px}.left-message>.message-header .image{margin-right:5px}.left-message>.message-header .username{margin-right:5px}.message-body-container{display:flex}.right-message>.message-body-container{flex-direction:row-reverse}.message-body{display:inline-block;position:relative;border-radius:1em;padding:6px;font-style:normal;font-size:.8em;text-align:start;min-width:2em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.left-message .message-body:after{content:\"\";position:absolute;border-left:10px solid black;border-color:inherit;border-right:10px solid transparent;border-bottom:10px solid transparent;left:1px;bottom:-2px}.right-message .message-body:after{content:\"\";position:absolute;border-left:10px solid transparent;border-top:10px solid black;border-top-color:inherit;border-bottom:0px solid transparent;right:1px;bottom:-2px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-/**
- * enum for Value types of PROPERTY.
- */
-var ValueType;
-(function (ValueType) {
-    ValueType[ValueType["STRING"] = 0] = "STRING";
-    ValueType[ValueType["COUNTER"] = 1] = "COUNTER";
-})(ValueType || (ValueType = {}));
-
-function secondsToHms(seconds_in) {
-    seconds_in = Number(seconds_in);
-    const h = Math.floor(seconds_in / 3600);
-    const m = Math.floor(seconds_in % 3600 / 60);
-    const s = Math.floor(seconds_in % 3600 % 60);
-    const hDisplay = h > 0 ? h.toString() + ':' : '';
-    const mDisplay = m > 0 ? ('0' + m.toString()).slice(-2) + ':' : '00:';
-    const sDisplay = s > 0 ? ('0' + s.toString()).slice(-2) : '00';
-    return hDisplay + mDisplay + sDisplay;
-}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chat-message', template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\r\n  <div class=\"message-header\">\r\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\r\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\r\n  </div>\r\n\r\n  <div class=\"message-body-container\">\r\n    <div>\r\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\r\n        <span [innerHTML]=\"message\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n</div>\r\n", styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.timestamp{font-size:10px;margin-right:30px;margin-left:30px}.message-header{display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image{margin-left:5px}.right-message>.message-header .username{margin-left:5px}.left-message>.message-header{margin-left:1px}.left-message>.message-header .image{margin-right:5px}.left-message>.message-header .username{margin-right:5px}.message-body-container{display:flex}.right-message>.message-body-container{flex-direction:row-reverse}.message-body{display:inline-block;position:relative;border-radius:1em;padding:6px;font-style:normal;font-size:.8em;text-align:start;min-width:2em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.left-message .message-body:after{content:\"\";position:absolute;border-left:10px solid black;border-color:inherit;border-right:10px solid transparent;border-bottom:10px solid transparent;left:1px;bottom:-2px}.right-message .message-body:after{content:\"\";position:absolute;border-left:10px solid transparent;border-top:10px solid black;border-top-color:inherit;border-bottom:0px solid transparent;right:1px;bottom:-2px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { message: [{
+                type: Input
+            }], alignRight: [{
+                type: Input
+            }], username: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], timestamp: [{
+                type: Input
+            }], image: [{
+                type: Input
+            }], fallbackImage: [{
+                type: Input
+            }], focusOn: [{
+                type: Output
+            }] } });
 
-/**
- * @ignore
- */
-class PropertyComponent {
-    statusText;
-    callId;
-    callType;
-    property;
-    labelledByText = '';
-    title = '';
-    /**
-     * @ignore
-     */
-    processedDisplayValue;
-    /**
-     * @ignore
-     */
-    _timerId;
-    /**
-     * @ignore
-     */
-    constructor() {
-        this._timerId = null;
-        this.processedDisplayValue = '';
+class ChatBoxComponent {
+    renderer;
+    iterableDiffers;
+    settings;
+    isTyping = false;
+    messages;
+    lastCount = -1;
+    _isAgentTyping = false;
+    isAgentTyping = new EventEmitter();
+    newMessage = new EventEmitter();
+    newMessageText = '';
+    messagesContainer;
+    autofocus;
+    usernameToColor = {};
+    colors = [
+        '#c2c4c4',
+        '#ffab91',
+        '#f48fb1',
+        '#29b6f6',
+        '#e1bee7',
+        '#9ccc65',
+        '#ffc107',
+        '#26c6da',
+        '#cddc39',
+    ];
+    colorsIndex = 0;
+    agentColor = '#2db0e0';
+    scrollAtBottom = true;
+    iterableDiffer;
+    sendButtonText;
+    constructor(renderer, iterableDiffers) {
+        this.renderer = renderer;
+        this.iterableDiffers = iterableDiffers;
+        this.iterableDiffer = this.iterableDiffers.find([]).create(null);
     }
-    /**
-     * @ignore
-     */
     ngOnInit() {
-        if (this.statusText && this.callType) {
-            this.labelledByText = `${this.statusText} ${this.callType}`;
+        this.sendButtonText = this.settings?.sendMessageText ?? 'Send';
+        this.renderer.selectRootElement('#autofocus').focus();
+    }
+    ngDoCheck() {
+        const changes = this.iterableDiffer.diff(this.messages);
+        if (changes) {
+            // Before adding a new message, check if the scroll is at the bottom
+            this.checkIfScrollAtBottom();
         }
-        else if (this.statusText) {
-            this.labelledByText = this.statusText;
+    }
+    ngAfterViewInit() {
+        this.renderer.selectRootElement('#autofocus').focus();
+    }
+    ngAfterViewChecked() {
+        if (this.lastCount !== this.messages.length) {
+            this.lastCount = this.messages.length;
+            if (this.scrollAtBottom) {
+                this.scrollToBottom();
+            }
         }
-        else if (this.callType) {
-            this.labelledByText = this.callType;
+    }
+    getColor(message) {
+        if (message.type && message.type === IChatMessageType.AGENT) {
+            return this.agentColor;
         }
-        if (this.callType && this.callId) {
-            this.title = `${this.callType} ${this.callId}`;
+        else if (message.username) {
+            if (!this.usernameToColor[message.username]) {
+                this.usernameToColor[message.username] = this.colors[this.colorsIndex];
+                this.colorsIndex = (this.colorsIndex + 1) % this.colors.length;
+            }
+            return this.usernameToColor[message.username];
         }
-        else if (this.callType) {
-            this.title = this.callType;
+        else {
+            return this.colors[0];
         }
-        else if (this.callId) {
-            this.title = this.callId;
+    }
+    shouldAlignRight(message) {
+        return message.type && message.type === IChatMessageType.AGENT;
+    }
+    sendNewMessage(event) {
+        event.preventDefault();
+        if (this.newMessageText) {
+            this.newMessage.emit(this.newMessageText);
+            this.newMessageText = '';
         }
-        this.initValues();
+        this.renderer.selectRootElement('#autofocus').focus();
+    }
+    setOnFocus(event) {
+        this.renderer.selectRootElement('#autofocus').focus();
+    }
+    onNewMessageFocus(event) {
+        const isTyping = event && this.newMessageText.length > 0;
+        if (isTyping !== this._isAgentTyping) {
+            this._isAgentTyping = isTyping;
+            this.isAgentTyping.emit(isTyping);
+        }
+    }
+    onKeyup() {
+        const isTyping = this.newMessageText.length > 0;
+        if (isTyping !== this._isAgentTyping) {
+            this._isAgentTyping = isTyping;
+            this.isAgentTyping.emit(isTyping);
+        }
+    }
+    scrollToBottom() {
+        try {
+            this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;
+        }
+        catch (e) { }
+    }
+    checkIfScrollAtBottom() {
+        try {
+            const element = this.messagesContainer.nativeElement;
+            const scrollLocation = element.scrollTop + element.clientHeight;
+            const scrollHeight = element.scrollHeight - 5; // There is a 5px margin of error for scroll at bottom
+            if (scrollLocation >= scrollHeight) {
+                this.scrollAtBottom = true;
+            }
+            else {
+                this.scrollAtBottom = false;
+            }
+        }
+        catch (e) {
+            console.error('error checking if scroll at bottom', e);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatBoxComponent, deps: [{ token: i0.Renderer2 }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChatBoxComponent, selector: "app-chat-box", inputs: { settings: "settings", isTyping: "isTyping", messages: "messages" }, outputs: { isAgentTyping: "isAgentTyping", newMessage: "newMessage" }, viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["MessagesContainer"], descendants: true, static: true }, { propertyName: "autofocus", first: true, predicate: ["autofocus"], descendants: true }], ngImport: i0, 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 messages\">\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 *ngIf=\"!settings.hideSendMessage\" 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\">{{ sendButtonText }}</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:none;border:none;outline:none!important;resize:none;font-family:inherit;font-size:1em;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;bottom:5px;right:5px;background:#1e72ba;border:none;color:#fff;font-size:10px;line-height:1;padding:6px 10px;border-radius:5px;outline:none!important;transition:background .2s ease;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:solid black 1px;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:none}.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 blink infinite .33333s}.typing-indicator span:nth-of-type(2){animation:1.5s blink infinite .66666s}.typing-indicator span:nth-of-type(3){animation:1.5s blink infinite .99999s}@keyframes blink{50%{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChatMessageComponent, selector: "app-chat-message", inputs: ["message", "alignRight", "username", "color", "timestamp", "image", "fallbackImage"], outputs: ["focusOn"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatBoxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-chat-box', 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 messages\">\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 *ngIf=\"!settings.hideSendMessage\" 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\">{{ sendButtonText }}</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:none;border:none;outline:none!important;resize:none;font-family:inherit;font-size:1em;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;bottom:5px;right:5px;background:#1e72ba;border:none;color:#fff;font-size:10px;line-height:1;padding:6px 10px;border-radius:5px;outline:none!important;transition:background .2s ease;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:solid black 1px;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:none}.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 blink infinite .33333s}.typing-indicator span:nth-of-type(2){animation:1.5s blink infinite .66666s}.typing-indicator span:nth-of-type(3){animation:1.5s blink infinite .99999s}@keyframes blink{50%{opacity:1}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.IterableDiffers }]; }, propDecorators: { settings: [{
+                type: Input
+            }], isTyping: [{
+                type: Input
+            }], messages: [{
+                type: Input
+            }], isAgentTyping: [{
+                type: Output
+            }], newMessage: [{
+                type: Output
+            }], messagesContainer: [{
+                type: ViewChild,
+                args: ['MessagesContainer', { static: true }]
+            }], autofocus: [{
+                type: ViewChild,
+                args: ['autofocus', { static: false }]
+            }] } });
+
+class CreateComponent {
+    CreateNewEntity = new EventEmitter();
+    isCreateMaximized;
+    Entities;
+    constructor() {
+        this.isCreateMaximized = true;
+    }
+    createNewEntity(type) {
+        this.CreateNewEntity.emit(type);
+    }
+    getEntities() {
+        return Object.keys(this.Entities);
+    }
+    getDisplay(entity) {
+        return entity.substring(0, entity.indexOf('|'));
+    }
+    getImage(entity) {
+        return entity.substring(entity.indexOf('|') + 1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CreateComponent, selector: "amc-create", inputs: { Entities: "Entities" }, outputs: { CreateNewEntity: "CreateNewEntity" }, ngImport: i0, 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;overflow:hidden;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-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{background-color:#fff;display:grid}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateComponent, decorators: [{
+            type: Component,
+            args: [{ 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;overflow:hidden;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-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{background-color:#fff;display:grid}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { CreateNewEntity: [{
+                type: Output
+            }], Entities: [{
+                type: Input
+            }] } });
+
+class CurrentActivityComponent {
+    ActivityDetails;
+    quickCommentList;
+    isAutoSave;
+    enableDiscard;
+    autoSaveTimer;
+    quickCommentOptionRequiredCadArray;
+    WhoObjectList;
+    WhatObjectList;
+    scenarioToCADMap;
+    EventEmitter;
+    eventList;
+    debouncer;
+    isActivityMaximized;
+    constructor() {
+        this.isActivityMaximized = true;
+        this.EventEmitter = new EventEmitter();
+        this.debouncer = new Subject();
+        this.eventList = new Set();
+    }
+    async ngOnInit() {
+        this.debouncer.pipe(debounceTime(500)).subscribe(() => {
+            const newEvent = {
+                eventName: Array.from(this.eventList).join('|'),
+                newValue: this.ActivityDetails
+            };
+            this.EventEmitter.emit(newEvent);
+            this.eventList.clear();
+        });
+    }
+    submitActivity() {
+        try {
+            this.ActivityDetails.IsProcessing = true;
+            this.EventEmitter.emit({
+                eventName: 'SubmitActivity',
+                newValue: this.ActivityDetails
+            });
+        }
+        catch (error) { }
+    }
+    triggerDiscardActivity() {
+        try {
+            this.EventEmitter.emit({
+                eventName: 'TriggerDiscardActivity',
+                newValue: this.ActivityDetails
+            });
+        }
+        catch (error) { }
+    }
+    onNameChange(event) {
+        try {
+            this.ActivityDetails.WhoObject = this.WhoObjectList.find((obj) => obj.objectId === event);
+            this.EventEmitter.emit({
+                eventName: 'ActivityWhoObjectChanged',
+                newValue: this.ActivityDetails
+            });
+        }
+        catch (error) { }
+    }
+    onRelatedToChange(event) {
+        try {
+            this.ActivityDetails.WhatObject = this.WhatObjectList.find((obj) => obj.objectId === event);
+            this.EventEmitter.emit({
+                eventName: 'ActivityWhatObjectChanged',
+                newValue: this.ActivityDetails
+            });
+        }
+        catch (error) { }
+    }
+    onSubjectChange() {
+        try {
+            this.eventList.add('ActivitySubjectChanged');
+            this.debouncer.next();
+        }
+        catch (error) { }
+    }
+    onSubjectKeyUp() {
+        try {
+            this.eventList.add('ActivitySubjectChanged');
+            this.debouncer.next();
+        }
+        catch (error) { }
+    }
+    onCallNotesChange() {
+        try {
+            this.eventList.add('ActivityCallNoteChanged');
+            this.debouncer.next();
+        }
+        catch (error) { }
+    }
+    onCallNotesKeyUp() {
+        try {
+            this.eventList.add('ActivityCallNoteChanged');
+            this.debouncer.next();
+        }
+        catch (error) { }
+    }
+    addQuickCommentToDescription(comment) {
+        try {
+            let descriptionToSet = comment;
+            if (this.quickCommentOptionRequiredCadArray[comment]) {
+                let cadFields = {};
+                if (this.ActivityDetails) {
+                    cadFields = this.scenarioToCADMap[this.ActivityDetails.ScenarioId];
+                }
+                for (let i = 0; i < this.quickCommentOptionRequiredCadArray[comment].length; i++) {
+                    let keyToCheckIfCADExists = this.quickCommentOptionRequiredCadArray[comment][i];
+                    const 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) { }
+    }
+    parseWhoObject(whoObject) {
+        try {
+            return whoObject.displayName + ': ' + whoObject.objectName;
+        }
+        catch (error) { }
+    }
+    parseWhatObject(whatObject) {
+        try {
+            return whatObject.displayName + ': ' + whatObject.objectName;
+        }
+        catch (error) { }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CurrentActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CurrentActivityComponent, selector: "amc-current-activity", inputs: { ActivityDetails: "ActivityDetails", quickCommentList: "quickCommentList", isAutoSave: "isAutoSave", enableDiscard: "enableDiscard", autoSaveTimer: "autoSaveTimer", quickCommentOptionRequiredCadArray: "quickCommentOptionRequiredCadArray", WhoObjectList: "WhoObjectList", WhatObjectList: "WhatObjectList", scenarioToCADMap: "scenarioToCADMap" }, outputs: { EventEmitter: "EventEmitter" }, ngImport: i0, 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:none;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:none;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;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;overflow:hidden;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 0% 0 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;font-family:\"Segoe UI\",Verdana,Helvetica,Sans-Serif;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}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CurrentActivityComponent, decorators: [{
+            type: Component,
+            args: [{ 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:none;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:none;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;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;overflow:hidden;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 0% 0 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;font-family:\"Segoe UI\",Verdana,Helvetica,Sans-Serif;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}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { ActivityDetails: [{
+                type: Input
+            }], quickCommentList: [{
+                type: Input
+            }], isAutoSave: [{
+                type: Input
+            }], enableDiscard: [{
+                type: Input
+            }], autoSaveTimer: [{
+                type: Input
+            }], quickCommentOptionRequiredCadArray: [{
+                type: Input
+            }], WhoObjectList: [{
+                type: Input
+            }], WhatObjectList: [{
+                type: Input
+            }], scenarioToCADMap: [{
+                type: Input
+            }], EventEmitter: [{
+                type: Output
+            }] } });
+
+class DispositionComponent {
+    disposition;
+    dispositionEmitter = new EventEmitter();
+    selectedDispositionValue = '';
+    dispositionName = '';
+    constructor() { }
+    ngOnInit() {
+        for (const metadata of this.disposition.dispositionMetadata) {
+            if (metadata.key === 'callId') {
+                this.dispositionName = `disposition_${metadata.value}`;
+                break;
+            }
+        }
+        if (this.disposition.checkedDisposition) {
+            this.selectedDispositionValue = this.disposition.checkedDisposition;
+        }
+    }
+    submitDisposition() {
+        const selectedDisposition = {
+            dispositionId: this.selectedDispositionValue,
+            dispositionName: this.disposition.disposition.get(this.selectedDispositionValue),
+            dispositionMetadata: this.disposition.dispositionMetadata
+        };
+        this.dispositionEmitter.emit(selectedDisposition);
+    }
+    selectAndSubmitDisposition(event, dispositionKey) {
+        if (event.code === 'Enter') {
+            this.selectedDispositionValue = dispositionKey;
+            this.submitDisposition();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DispositionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DispositionComponent, selector: "amc-disposition", inputs: { disposition: "disposition" }, outputs: { dispositionEmitter: "dispositionEmitter" }, ngImport: i0, 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: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{overflow-y:scroll;max-height:150px;padding:3px}.disposition-label:focus{outline:2px solid rgb(50,150,218);outline-offset:5px}.first-disposition{margin-top:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DispositionComponent, decorators: [{
+            type: Component,
+            args: [{ 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: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{overflow-y:scroll;max-height:150px;padding:3px}.disposition-label:focus{outline:2px solid rgb(50,150,218);outline-offset:5px}.first-disposition{margin-top:5px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { disposition: [{
+                type: Input
+            }], dispositionEmitter: [{
+                type: Output
+            }] } });
+
+class DurationComponent {
+    statusText;
+    callId;
+    startTime;
+    displayTime;
+    labelledByText = '';
+    _timerId;
+    constructor() {
+        this.displayTime = '00:00/00:00';
     }
-    /**
-     * @ignore
-     */
-    initValues() {
-        if (this.property.displayValueType === ValueType.COUNTER) {
-            this.startCallCounter();
+    ngOnInit() {
+        if (this.statusText && this.callId) {
+            this.labelledByText = `${this.statusText} ${this.callId}`;
         }
-        else {
-            this.processedDisplayValue = this.property.displayValue;
+        else if (this.statusText) {
+            this.labelledByText = this.statusText;
+        }
+        else if (this.callId) {
+            this.labelledByText = this.callId;
         }
+        this.startCallCounter();
     }
     /**
-     * @ignore
-     */
+   * @ignore
+   */
     startCallCounter() {
         if (this._timerId == null) {
             this._timerId = window.setInterval(() => {
-                const callStartTime = this.property.displayValue;
+                const callStartTime = this.startTime;
                 const currentTime = new Date().getTime() / 1000;
                 const secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
-                this.processedDisplayValue = secondsToHms(secondsPassed);
+                this.displayTime = Math.floor(secondsPassed / 60) + ':' + ('0' + (secondsPassed % 60)).slice(-2);
             }, 1000);
         }
     }
-    /**
-     * @ignore
-     */
     ngOnDestroy() {
-        if (this.property.displayValueType === ValueType.COUNTER) {
-            // clear the timer.
-            if (this._timerId != null) {
-                clearInterval(this._timerId);
-                this._timerId = null;
-            }
+        // clear the timer.
+        if (this._timerId != null) {
+            clearInterval(this._timerId);
+            this._timerId = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: PropertyComponent, selector: "amc-property", inputs: { statusText: "statusText", callId: "callId", callType: "callType", property: "property" }, ngImport: i0, template: "<input\r\n readonly\r\n *ngIf=\"!property.customOperations\"\r\n class=\"displayData\"\r\n tabindex=\"0\"\r\n type=\"text\"\r\n [name]=\"processedDisplayValue\"\r\n [title]=\"title || null\"\r\n [attr.aria-labelledby]=\"labelledByText || null\"\r\n [value]=\"processedDisplayValue\"/>\r\n\r\n <input\r\n  readonly\r\n  *ngIf=\"property.customOperations\"\r\n  class=\"cursor displayData\"\r\n  type=\"text\"\r\n  tabindex=\"0\"\r\n  [name]=\"processedDisplayValue\"\r\n  [title]=\"title || null\"\r\n  [value]=\"processedDisplayValue\"\r\n  [attr.aria-labelledby]=\"labelledByText || null\"\r\n  (click)=\"property.customOperations.handler(property.customOperations.eventName, property.customOperations.eventMetadata)\" />\r\n", styles: ["input{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DurationComponent, selector: "amc-duration", inputs: { statusText: "statusText", callId: "callId", startTime: "startTime" }, ngImport: i0, template: "<div class=\"holdCallDurationDiv\">\r\n  <input\r\n   readonly\r\n   class=\"block durationInput\"\r\n   name=\"CallDuration\"\r\n   type=\"text\"\r\n   tabindex=\"-1\"\r\n   title=\"Call Duration\"\r\n   [value]=\"displayTime\"\r\n   [attr.aria-labelledby]=\"labelledByText || null\">\r\n</div>\r\n", styles: [".durationInput:focus{outline-style:none}.durationInput{background-color:transparent;border:0px;width:100%;text-align:right}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: PropertyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DurationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amc-property', template: "<input\r\n readonly\r\n *ngIf=\"!property.customOperations\"\r\n class=\"displayData\"\r\n tabindex=\"0\"\r\n type=\"text\"\r\n [name]=\"processedDisplayValue\"\r\n [title]=\"title || null\"\r\n [attr.aria-labelledby]=\"labelledByText || null\"\r\n [value]=\"processedDisplayValue\"/>\r\n\r\n <input\r\n  readonly\r\n  *ngIf=\"property.customOperations\"\r\n  class=\"cursor displayData\"\r\n  type=\"text\"\r\n  tabindex=\"0\"\r\n  [name]=\"processedDisplayValue\"\r\n  [title]=\"title || null\"\r\n  [value]=\"processedDisplayValue\"\r\n  [attr.aria-labelledby]=\"labelledByText || null\"\r\n  (click)=\"property.customOperations.handler(property.customOperations.eventName, property.customOperations.eventMetadata)\" />\r\n", styles: ["input{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}\n"] }]
+            args: [{ selector: 'amc-duration', template: "<div class=\"holdCallDurationDiv\">\r\n  <input\r\n   readonly\r\n   class=\"block durationInput\"\r\n   name=\"CallDuration\"\r\n   type=\"text\"\r\n   tabindex=\"-1\"\r\n   title=\"Call Duration\"\r\n   [value]=\"displayTime\"\r\n   [attr.aria-labelledby]=\"labelledByText || null\">\r\n</div>\r\n", styles: [".durationInput:focus{outline-style:none}.durationInput{background-color:transparent;border:0px;width:100%;text-align:right}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { statusText: [{
                 type: Input
             }], callId: [{
                 type: Input
-            }], callType: [{
-                type: Input
-            }], property: [{
+            }], startTime: [{
                 type: Input
             }] } });
 
-class HoldtimerComponent {
+function secondsToHms(seconds_in) {
+    seconds_in = Number(seconds_in);
+    const h = Math.floor(seconds_in / 3600);
+    const m = Math.floor(seconds_in % 3600 / 60);
+    const s = Math.floor(seconds_in % 3600 % 60);
+    const hDisplay = h > 0 ? h.toString() + ':' : '';
+    const mDisplay = m > 0 ? ('0' + m.toString()).slice(-2) + ':' : '00:';
+    const sDisplay = s > 0 ? ('0' + s.toString()).slice(-2) : '00';
+    return hDisplay + mDisplay + sDisplay;
+}
+
+class HoldTimerComponent {
     holdCounterData;
     statusText;
     callId;
@@ -296,12 +635,12 @@ class HoldtimerComponent {
             this._timerId = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: HoldtimerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: HoldtimerComponent, selector: "amc-holdtimer", inputs: { holdCounterData: "holdCounterData", statusText: "statusText", callId: "callId" }, ngImport: i0, template: "<div class=\"holdCallDurationDiv\">\r\n  <input\r\n   readonly\r\n   class=\"holdCallDurationTimer\"\r\n   name=\"HoldCallDuration/TotalHoldCallDuration\"\r\n   type=\"text\"\r\n   tabindex=\"-1\"\r\n   title=\"Hold Duration\"\r\n   [attr.aria-labelledby]=\"labelledByText || null\"\r\n   [value]=\"displayTime\">\r\n</div>\r\n", styles: [".holdCallDurationTimer:focus{outline-style:none}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HoldTimerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HoldTimerComponent, selector: "amc-holdTimer", inputs: { holdCounterData: "holdCounterData", statusText: "statusText", callId: "callId" }, ngImport: i0, template: "<div class=\"holdCallDurationDiv\">\r\n  <input\r\n   readonly\r\n   class=\"holdCallDurationTimer\"\r\n   name=\"HoldCallDuration/TotalHoldCallDuration\"\r\n   type=\"text\"\r\n   tabindex=\"-1\"\r\n   title=\"Hold Duration\"\r\n   [attr.aria-labelledby]=\"labelledByText || null\"\r\n   [value]=\"displayTime\">\r\n</div>\r\n", styles: [".holdCallDurationTimer:focus{outline-style:none}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0px;width:100%}.verticalDivider{margin-left:2px;float:left}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: HoldtimerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HoldTimerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amc-holdtimer', template: "<div class=\"holdCallDurationDiv\">\r\n  <input\r\n   readonly\r\n   class=\"holdCallDurationTimer\"\r\n   name=\"HoldCallDuration/TotalHoldCallDuration\"\r\n   type=\"text\"\r\n   tabindex=\"-1\"\r\n   title=\"Hold Duration\"\r\n   [attr.aria-labelledby]=\"labelledByText || null\"\r\n   [value]=\"displayTime\">\r\n</div>\r\n", styles: [".holdCallDurationTimer:focus{outline-style:none}\n"] }]
+            args: [{ selector: 'amc-holdTimer', template: "<div class=\"holdCallDurationDiv\">\r\n  <input\r\n   readonly\r\n   class=\"holdCallDurationTimer\"\r\n   name=\"HoldCallDuration/TotalHoldCallDuration\"\r\n   type=\"text\"\r\n   tabindex=\"-1\"\r\n   title=\"Hold Duration\"\r\n   [attr.aria-labelledby]=\"labelledByText || null\"\r\n   [value]=\"displayTime\">\r\n</div>\r\n", styles: [".holdCallDurationTimer:focus{outline-style:none}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0px;width:100%}.verticalDivider{margin-left:2px;float:left}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { holdCounterData: [{
                 type: Input
             }], statusText: [{
@@ -310,228 +649,217 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Input
             }] } });
 
-class DurationComponent {
+/**
+ * @ignore
+ */
+class OperationComponent {
     statusText;
     callId;
-    startTime;
-    displayTime;
+    callType;
+    operations;
     labelledByText = '';
-    _timerId;
+    describedByText = '';
+    /**
+     * @ignore
+     */
     constructor() {
-        this.displayTime = '00:00/00:00';
     }
+    /**
+     * @ignore
+     */
     ngOnInit() {
-        if (this.statusText && this.callId) {
-            this.labelledByText = `${this.statusText} ${this.callId}`;
+        if (this.statusText && this.callType) {
+            this.describedByText = `${this.statusText} ${this.callType}`;
         }
         else if (this.statusText) {
-            this.labelledByText = this.statusText;
+            this.describedByText = this.statusText;
         }
-        else if (this.callId) {
-            this.labelledByText = this.callId;
+        else if (this.callType) {
+            this.describedByText = this.callType;
         }
-        this.startCallCounter();
-    }
-    /**
-   * @ignore
-   */
-    startCallCounter() {
-        if (this._timerId == null) {
-            this._timerId = window.setInterval(() => {
-                const callStartTime = this.startTime;
-                const currentTime = new Date().getTime() / 1000;
-                const secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
-                this.displayTime = Math.floor(secondsPassed / 60) + ':' + ('0' + (secondsPassed % 60)).slice(-2);
-            }, 1000);
+        if (this.callId) {
+            this.labelledByText = this.callId;
         }
     }
-    ngOnDestroy() {
-        // clear the timer.
-        if (this._timerId != null) {
-            clearInterval(this._timerId);
-            this._timerId = null;
+    operationKeypress(event, operation) {
+        if (event.code === 'Enter') {
+            operation.handler(operation.operationName, operation.operationMetadata);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: DurationComponent, selector: "amc-duration", inputs: { statusText: "statusText", callId: "callId", startTime: "startTime" }, ngImport: i0, template: "<div class=\"holdCallDurationDiv\">\r\n  <input\r\n   readonly\r\n   class=\"block durationInput\"\r\n   name=\"CallDuration\"\r\n   type=\"text\"\r\n   tabindex=\"-1\"\r\n   title=\"Call Duration\"\r\n   [value]=\"displayTime\"\r\n   [attr.aria-labelledby]=\"labelledByText || null\">\r\n</div>\r\n", styles: [".durationInput:focus{outline-style:none}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OperationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OperationComponent, selector: "amc-operation", inputs: { statusText: "statusText", callId: "callId", callType: "callType", operations: "operations" }, ngImport: i0, template: "<div class=\"callOptions\">\r\n    <img\r\n     class=\"AnswerCallImages\"\r\n     tabindex=\"0\"\r\n     role=\"button\"\r\n     attr.aria-label=\"{{ operation.title }}\"\r\n     *ngFor=\"let operation of operations\"\r\n     [title]=\"operation.title\"\r\n     [src]=\"operation.icon\"\r\n     [attr.accesskey]=\"operation.accesskey || null\"\r\n     [attr.aria-labelledby]=\"labelledByText || null\"\r\n     [attr.aria-describedby]=\"describedByText || null\"\r\n     (click)=\"operation.handler(operation.operationName, operation.operationMetadata)\"\r\n     (keypress)=\"operationKeypress($event, operation)\"/>\r\n</div>\r\n", styles: [".AnswerCallImages:focus{outline:2px solid rgb(50,150,218);outline-offset:1px}.AnswerCallImages{height:20px;margin:0 5px 2px}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DurationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OperationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'amc-duration', template: "<div class=\"holdCallDurationDiv\">\r\n  <input\r\n   readonly\r\n   class=\"block durationInput\"\r\n   name=\"CallDuration\"\r\n   type=\"text\"\r\n   tabindex=\"-1\"\r\n   title=\"Call Duration\"\r\n   [value]=\"displayTime\"\r\n   [attr.aria-labelledby]=\"labelledByText || null\">\r\n</div>\r\n", styles: [".durationInput:focus{outline-style:none}\n"] }]
+            args: [{ selector: 'amc-operation', template: "<div class=\"callOptions\">\r\n    <img\r\n     class=\"AnswerCallImages\"\r\n     tabindex=\"0\"\r\n     role=\"button\"\r\n     attr.aria-label=\"{{ operation.title }}\"\r\n     *ngFor=\"let operation of operations\"\r\n     [title]=\"operation.title\"\r\n     [src]=\"operation.icon\"\r\n     [attr.accesskey]=\"operation.accesskey || null\"\r\n     [attr.aria-labelledby]=\"labelledByText || null\"\r\n     [attr.aria-describedby]=\"describedByText || null\"\r\n     (click)=\"operation.handler(operation.operationName, operation.operationMetadata)\"\r\n     (keypress)=\"operationKeypress($event, operation)\"/>\r\n</div>\r\n", styles: [".AnswerCallImages:focus{outline:2px solid rgb(50,150,218);outline-offset:1px}.AnswerCallImages{height:20px;margin:0 5px 2px}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { statusText: [{
                 type: Input
             }], callId: [{
                 type: Input
-            }], startTime: [{
+            }], callType: [{
+                type: Input
+            }], operations: [{
                 type: Input
             }] } });
 
-class ChatMessageComponent {
-    message;
-    alignRight = false;
-    username;
-    color;
-    timestamp;
-    image;
-    fallbackImage;
-    focusOn = new EventEmitter();
-    constructor() { }
-    ngOnInit() {
-        this.focusOn.emit(true);
+/**
+ * A helper method to make instances of [IProperty]
+ */
+class Property {
+    key;
+    value;
+    /**
+     * KEY value to be displayed on component.
+     */
+    displayKey;
+    /**
+     * VALUE to be displayed on component.
+     */
+    displayValue;
+    displayValueType;
+    propertyMetadata;
+    /**
+     * Click event handler for property.
+     */
+    customOperations;
+    /**
+     * This flag decides if PROPERTY will be displayed on component or not.
+     */
+    visible;
+    /**
+     * Operation responsible for generating displayKey and dispkayValur from key and value.
+     */
+    displayOperation = () => {
+        this.displayKey = this.key;
+        this.displayValue = this.value;
+    };
+    /**
+     *
+     * @param key
+     * @param value : if value type is COUNTER then value should be start time in MilliSeconds.
+     * @param visible
+     * @param valueType
+     * @param customOperation
+     */
+    constructor(key, value, visible, valueType, customOperation) {
+        this.key = key;
+        this.value = value;
+        visible != null ? (this.visible = visible) : (this.visible = true);
+        valueType != null
+            ? (this.displayValueType = valueType)
+            : (this.displayValueType = ValueType.STRING);
+        this.customOperations = customOperation;
+        this.displayOperation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: ChatMessageComponent, selector: "app-chat-message", inputs: { message: "message", alignRight: "alignRight", username: "username", color: "color", timestamp: "timestamp", image: "image", fallbackImage: "fallbackImage" }, outputs: { focusOn: "focusOn" }, ngImport: i0, template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\r\n  <div class=\"message-header\">\r\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\r\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\r\n  </div>\r\n\r\n  <div class=\"message-body-container\">\r\n    <div>\r\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\r\n        <span [innerHTML]=\"message\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n</div>\r\n", styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.timestamp{font-size:10px;margin-right:30px;margin-left:30px}.message-header{display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image{margin-left:5px}.right-message>.message-header .username{margin-left:5px}.left-message>.message-header{margin-left:1px}.left-message>.message-header .image{margin-right:5px}.left-message>.message-header .username{margin-right:5px}.message-body-container{display:flex}.right-message>.message-body-container{flex-direction:row-reverse}.message-body{display:inline-block;position:relative;border-radius:1em;padding:6px;font-style:normal;font-size:.8em;text-align:start;min-width:2em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.left-message .message-body:after{content:\"\";position:absolute;border-left:10px solid black;border-color:inherit;border-right:10px solid transparent;border-bottom:10px solid transparent;left:1px;bottom:-2px}.right-message .message-body:after{content:\"\";position:absolute;border-left:10px solid transparent;border-top:10px solid black;border-top-color:inherit;border-bottom:0px solid transparent;right:1px;bottom:-2px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ChatMessageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-chat-message', template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\r\n  <div class=\"message-header\">\r\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\r\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\r\n  </div>\r\n\r\n  <div class=\"message-body-container\">\r\n    <div>\r\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\r\n        <span [innerHTML]=\"message\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n</div>\r\n", styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.timestamp{font-size:10px;margin-right:30px;margin-left:30px}.message-header{display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image{margin-left:5px}.right-message>.message-header .username{margin-left:5px}.left-message>.message-header{margin-left:1px}.left-message>.message-header .image{margin-right:5px}.left-message>.message-header .username{margin-right:5px}.message-body-container{display:flex}.right-message>.message-body-container{flex-direction:row-reverse}.message-body{display:inline-block;position:relative;border-radius:1em;padding:6px;font-style:normal;font-size:.8em;text-align:start;min-width:2em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.left-message .message-body:after{content:\"\";position:absolute;border-left:10px solid black;border-color:inherit;border-right:10px solid transparent;border-bottom:10px solid transparent;left:1px;bottom:-2px}.right-message .message-body:after{content:\"\";position:absolute;border-left:10px solid transparent;border-top:10px solid black;border-top-color:inherit;border-bottom:0px solid transparent;right:1px;bottom:-2px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { message: [{
-                type: Input
-            }], alignRight: [{
-                type: Input
-            }], username: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], timestamp: [{
-                type: Input
-            }], image: [{
-                type: Input
-            }], fallbackImage: [{
-                type: Input
-            }], focusOn: [{
-                type: Output
-            }] } });
+/**
+ * enum for Value types of PROPERTY.
+ */
+var ValueType;
+(function (ValueType) {
+    ValueType[ValueType["STRING"] = 0] = "STRING";
+    ValueType[ValueType["COUNTER"] = 1] = "COUNTER";
+})(ValueType || (ValueType = {}));
 
-class ChatBoxComponent {
-    renderer;
-    settings;
-    isTyping = false;
-    messages;
-    newMsgs;
-    lastCount = -1;
-    _isAgentTyping = false;
-    isAgentTyping = new EventEmitter();
-    newMessage = new EventEmitter();
-    newMessageText = '';
-    messagesContainer;
-    autofocus;
-    usernameToColor = {};
-    colors = [
-        '#c2c4c4',
-        '#ffab91',
-        '#f48fb1',
-        '#29b6f6',
-        '#e1bee7',
-        '#9ccc65',
-        '#ffc107',
-        '#26c6da',
-        '#cddc39',
-    ];
-    colorsIndex = 0;
-    agentColor = '#2db0e0';
-    constructor(renderer) {
-        this.renderer = renderer;
-    }
-    ngOnInit() {
-        this.renderer.selectRootElement('#autofocus').focus();
-    }
-    ngAfterViewInit() {
-        this.renderer.selectRootElement('#autofocus').focus();
-    }
-    updatedMessage() {
-        try {
-            if (typeof this.newMsgs !== 'undefined' && this.newMsgs.length > 0) {
-                return this.newMsgs;
-            }
-            else {
-                return this.messages;
-            }
+/**
+ * @ignore
+ */
+class PropertyComponent {
+    statusText;
+    callId;
+    callType;
+    property;
+    labelledByText = '';
+    title = '';
+    /**
+     * @ignore
+     */
+    processedDisplayValue;
+    /**
+     * @ignore
+     */
+    _timerId;
+    /**
+     * @ignore
+     */
+    constructor() {
+        this._timerId = null;
+        this.processedDisplayValue = '';
+    }
+    /**
+     * @ignore
+     */
+    ngOnInit() {
+        if (this.statusText && this.callType) {
+            this.labelledByText = `${this.statusText} ${this.callType}`;
         }
-        catch (e) { }
-        finally {
-            this.scrollToBottom();
+        else if (this.statusText) {
+            this.labelledByText = this.statusText;
         }
-    }
-    ngAfterViewChecked() {
-        if (this.lastCount !== this.messages.length) {
-            this.lastCount = this.messages.length;
-            this.scrollToBottom();
+        else if (this.callType) {
+            this.labelledByText = this.callType;
         }
-    }
-    getColor(message) {
-        if (message.type && message.type === IChatMessageType.AGENT) {
-            return this.agentColor;
+        if (this.callType && this.callId) {
+            this.title = `${this.callType} ${this.callId}`;
         }
-        else if (message.username) {
-            if (!this.usernameToColor[message.username]) {
-                this.usernameToColor[message.username] = this.colors[this.colorsIndex];
-                this.colorsIndex = (this.colorsIndex + 1) % this.colors.length;
-            }
-            return this.usernameToColor[message.username];
+        else if (this.callType) {
+            this.title = this.callType;
         }
-        else {
-            return this.colors[0];
+        else if (this.callId) {
+            this.title = this.callId;
         }
+        this.initValues();
     }
-    shouldAlignRight(message) {
-        return message.type && message.type === IChatMessageType.AGENT;
-    }
-    sendNewMessage(event) {
-        event.preventDefault();
-        if (this.newMessageText) {
-            this.newMessage.emit(this.newMessageText);
-            this.newMessageText = '';
+    /**
+     * @ignore
+     */
+    initValues() {
+        if (this.property.displayValueType === ValueType.COUNTER) {
+            this.startCallCounter();
         }
-        this.renderer.selectRootElement('#autofocus').focus();
-    }
-    setOnFocus(event) {
-        this.renderer.selectRootElement('#autofocus').focus();
-    }
-    onNewMessageFocus(event) {
-        const isTyping = event && this.newMessageText.length > 0;
-        if (isTyping !== this._isAgentTyping) {
-            this._isAgentTyping = isTyping;
-            this.isAgentTyping.emit(isTyping);
+        else {
+            this.processedDisplayValue = this.property.displayValue;
         }
     }
-    onKeyup() {
-        const isTyping = this.newMessageText.length > 0;
-        if (isTyping !== this._isAgentTyping) {
-            this._isAgentTyping = isTyping;
-            this.isAgentTyping.emit(isTyping);
+    /**
+     * @ignore
+     */
+    startCallCounter() {
+        if (this._timerId == null) {
+            this._timerId = window.setInterval(() => {
+                const callStartTime = this.property.displayValue;
+                const currentTime = new Date().getTime() / 1000;
+                const secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
+                this.processedDisplayValue = secondsToHms(secondsPassed);
+            }, 1000);
         }
     }
-    scrollToBottom() {
-        try {
-            this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;
+    /**
+     * @ignore
+     */
+    ngOnDestroy() {
+        if (this.property.displayValueType === ValueType.COUNTER) {
+            // clear the timer.
+            if (this._timerId != null) {
+                clearInterval(this._timerId);
+                this._timerId = null;
+            }
         }
-        catch (e) { }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ChatBoxComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: ChatBoxComponent, selector: "app-chat-box", inputs: { settings: "settings", isTyping: "isTyping", messages: "messages", newMsgs: "newMsgs" }, outputs: { isAgentTyping: "isAgentTyping", newMessage: "newMessage" }, viewQueries: [{ propertyName: "messagesContainer", first: true, predicate: ["MessagesContainer"], descendants: true, static: true }, { propertyName: "autofocus", first: true, predicate: ["autofocus"], descendants: true }], ngImport: i0, 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.toString()\" [fallbackImage]=\"settings.fallbackUserIcon.toString()\" [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:none;border:none;outline:none!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:none!important;transition:background .2s ease;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:solid black 1px;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:none}.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 blink infinite .33333s}.typing-indicator span:nth-of-type(2){animation:1.5s blink infinite .66666s}.typing-indicator span:nth-of-type(3){animation:1.5s blink infinite .99999s}@keyframes chat-box_blink{50%{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChatMessageComponent, selector: "app-chat-message", inputs: ["message", "alignRight", "username", "color", "timestamp", "image", "fallbackImage"], outputs: ["focusOn"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PropertyComponent, selector: "amc-property", inputs: { statusText: "statusText", callId: "callId", callType: "callType", property: "property" }, ngImport: i0, template: "<input\r\n readonly\r\n *ngIf=\"!property.customOperations\"\r\n class=\"displayData\"\r\n tabindex=\"0\"\r\n type=\"text\"\r\n [name]=\"processedDisplayValue\"\r\n [title]=\"title || null\"\r\n [attr.aria-labelledby]=\"labelledByText || null\"\r\n [value]=\"processedDisplayValue\"/>\r\n\r\n <input\r\n  readonly\r\n  *ngIf=\"property.customOperations\"\r\n  class=\"cursor displayData\"\r\n  type=\"text\"\r\n  tabindex=\"0\"\r\n  [name]=\"processedDisplayValue\"\r\n  [title]=\"title || null\"\r\n  [value]=\"processedDisplayValue\"\r\n  [attr.aria-labelledby]=\"labelledByText || null\"\r\n  (click)=\"property.customOperations.handler(property.customOperations.eventName, property.customOperations.eventMetadata)\" />\r\n", styles: ["input{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}.displayData{border:0;outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ChatBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PropertyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-chat-box', 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.toString()\" [fallbackImage]=\"settings.fallbackUserIcon.toString()\" [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:none;border:none;outline:none!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:none!important;transition:background .2s ease;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:solid black 1px;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:none}.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 blink infinite .33333s}.typing-indicator span:nth-of-type(2){animation:1.5s blink infinite .66666s}.typing-indicator span:nth-of-type(3){animation:1.5s blink infinite .99999s}@keyframes chat-box_blink{50%{opacity:1}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { settings: [{
+            args: [{ selector: 'amc-property', template: "<input\r\n readonly\r\n *ngIf=\"!property.customOperations\"\r\n class=\"displayData\"\r\n tabindex=\"0\"\r\n type=\"text\"\r\n [name]=\"processedDisplayValue\"\r\n [title]=\"title || null\"\r\n [attr.aria-labelledby]=\"labelledByText || null\"\r\n [value]=\"processedDisplayValue\"/>\r\n\r\n <input\r\n  readonly\r\n  *ngIf=\"property.customOperations\"\r\n  class=\"cursor displayData\"\r\n  type=\"text\"\r\n  tabindex=\"0\"\r\n  [name]=\"processedDisplayValue\"\r\n  [title]=\"title || null\"\r\n  [value]=\"processedDisplayValue\"\r\n  [attr.aria-labelledby]=\"labelledByText || null\"\r\n  (click)=\"property.customOperations.handler(property.customOperations.eventName, property.customOperations.eventMetadata)\" />\r\n", styles: ["input{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}.displayData{border:0;outline:none}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { statusText: [{
                 type: Input
-            }], isTyping: [{
+            }], callId: [{
                 type: Input
-            }], messages: [{
+            }], callType: [{
                 type: Input
-            }], newMsgs: [{
+            }], property: [{
                 type: Input
-            }], isAgentTyping: [{
-                type: Output
-            }], newMessage: [{
-                type: Output
-            }], messagesContainer: [{
-                type: ViewChild,
-                args: ['MessagesContainer', { static: true }]
-            }], autofocus: [{
-                type: ViewChild,
-                args: ['autofocus', { static: false }]
             }] } });
 
 /**
@@ -539,7 +867,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  */
 class InteractionComponent {
     interaction;
-    newMsgs;
     minimizedChanged = new EventEmitter();
     isAgentTyping = new EventEmitter();
     newMessage = new EventEmitter();
@@ -569,210 +896,56 @@ class InteractionComponent {
      * @ignore
      */
     minimize() {
-        this._minimized = true;
-    }
-    /**
-     * @ignore
-     */
-    maximize() {
-        this._minimized = false;
-    }
-    /**
-     * @ignore
-     */
-    isConferenceCall() {
-        if (this.interaction.parties && this.interaction.parties.length > 1) {
-            return true;
-        }
-        return false;
-    }
-    collapseKeypress(event) {
-        if (event.code === 'Enter') {
-            this.minimize();
-        }
-    }
-    expandKeypress(event) {
-        if (event.code === 'Enter') {
-            this.maximize();
-        }
-    }
-    clickEvent(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);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InteractionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: InteractionComponent, selector: "amc-interaction", inputs: { interaction: "interaction", newMsgs: "newMsgs" }, outputs: { minimizedChanged: "minimizedChanged", isAgentTyping: "isAgentTyping", newMessage: "newMessage" }, ngImport: i0, 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:2px solid rgb(50,150,218);outline-offset:0px}.ViewCollapseImage{margin:3px}.ViewCollapseImage:focus{outline:2px solid rgb(50,150,218);outline-offset:0px}.callImage{cursor:default}.phoneNumberValue:focus{outline-style:none}#call123{border:4px!important}.success{border:2px solid #00adbb!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OperationComponent, selector: "amc-operation", inputs: ["statusText", "callId", "callType", "operations"] }, { kind: "component", type: PropertyComponent, selector: "amc-property", inputs: ["statusText", "callId", "callType", "property"] }, { kind: "component", type: HoldtimerComponent, selector: "amc-holdtimer", inputs: ["holdCounterData", "statusText", "callId"] }, { kind: "component", type: DurationComponent, selector: "amc-duration", inputs: ["statusText", "callId", "startTime"] }, { kind: "component", type: ChatBoxComponent, selector: "app-chat-box", inputs: ["settings", "isTyping", "messages", "newMsgs"], outputs: ["isAgentTyping", "newMessage"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: InteractionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'amc-interaction', 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:2px solid rgb(50,150,218);outline-offset:0px}.ViewCollapseImage{margin:3px}.ViewCollapseImage:focus{outline:2px solid rgb(50,150,218);outline-offset:0px}.callImage{cursor:default}.phoneNumberValue:focus{outline-style:none}#call123{border:4px!important}.success{border:2px solid #00adbb!important}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { interaction: [{
-                type: Input
-            }], newMsgs: [{
-                type: Input
-            }], minimizedChanged: [{
-                type: Output
-            }], isAgentTyping: [{
-                type: Output
-            }], newMessage: [{
-                type: Output
-            }] } });
-
-class ScenarioComponent {
-    scenario;
-    newMsgs;
-    minimizedChanged = new EventEmitter();
-    isAgentTyping = new EventEmitter();
-    newMessage = new EventEmitter();
-    afterViewChecked = new EventEmitter();
-    constructor() { }
-    ngAfterViewChecked() {
-        this.afterViewChecked.emit();
-    }
-    onMinimizedChanged() {
-        this.minimizedChanged.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ScenarioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: ScenarioComponent, selector: "amc-scenario", inputs: { scenario: "scenario", newMsgs: "newMsgs" }, outputs: { minimizedChanged: "minimizedChanged", isAgentTyping: "isAgentTyping", newMessage: "newMessage", afterViewChecked: "afterViewChecked" }, ngImport: i0, template: "<ng-container *ngIf=\"scenario && scenario.interactions\">\r\n  <amc-interaction *ngFor=\"let interaction of scenario.interactions\" [interaction]=\"interaction\" [newMsgs]=\"newMsgs\"\r\n    (minimizedChanged)=\"onMinimizedChanged()\" (isAgentTyping)=\"isAgentTyping.emit($event)\"\r\n    (newMessage)=\"newMessage.emit($event)\">\r\n  </amc-interaction>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InteractionComponent, selector: "amc-interaction", inputs: ["interaction", "newMsgs"], outputs: ["minimizedChanged", "isAgentTyping", "newMessage"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ScenarioComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'amc-scenario', template: "<ng-container *ngIf=\"scenario && scenario.interactions\">\r\n  <amc-interaction *ngFor=\"let interaction of scenario.interactions\" [interaction]=\"interaction\" [newMsgs]=\"newMsgs\"\r\n    (minimizedChanged)=\"onMinimizedChanged()\" (isAgentTyping)=\"isAgentTyping.emit($event)\"\r\n    (newMessage)=\"newMessage.emit($event)\">\r\n  </amc-interaction>\r\n</ng-container>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { scenario: [{
-                type: Input
-            }], newMsgs: [{
-                type: Input
-            }], minimizedChanged: [{
-                type: Output
-            }], isAgentTyping: [{
-                type: Output
-            }], newMessage: [{
-                type: Output
-            }], afterViewChecked: [{
-                type: Output
-            }] } });
-
-class DispositionComponent {
-    disposition;
-    dispositionEmitter = new EventEmitter();
-    selectedDispositionValue = '';
-    dispositionName = '';
-    constructor() { }
-    ngOnInit() {
-        for (const metadata of this.disposition.dispositionMetadata) {
-            if (metadata.key === 'callId') {
-                this.dispositionName = `disposition_${metadata.value}`;
-                break;
-            }
-        }
-        if (this.disposition.checkedDisposition) {
-            this.selectedDispositionValue = this.disposition.checkedDisposition;
-        }
-    }
-    submitDisposition() {
-        const selectedDisposition = {
-            dispositionId: this.selectedDispositionValue,
-            dispositionName: this.disposition.disposition.get(this.selectedDispositionValue),
-            dispositionMetadata: this.disposition.dispositionMetadata
-        };
-        this.dispositionEmitter.emit(selectedDisposition);
-    }
-    selectAndSubmitDisposition(event, dispositionKey) {
-        if (event.code === 'Enter') {
-            this.selectedDispositionValue = dispositionKey;
-            this.submitDisposition();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DispositionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: DispositionComponent, selector: "amc-disposition", inputs: { disposition: "disposition" }, outputs: { dispositionEmitter: "dispositionEmitter" }, ngImport: i0, 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: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{overflow-y:scroll;max-height:150px;padding:3px}.disposition-label:focus{outline:2px solid rgb(50,150,218);outline-offset:5px}.first-disposition{margin-top:5px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: DispositionComponent, decorators: [{
-            type: Component,
-            args: [{ 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: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{overflow-y:scroll;max-height:150px;padding:3px}.disposition-label:focus{outline:2px solid rgb(50,150,218);outline-offset:5px}.first-disposition{margin-top:5px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { disposition: [{
-                type: Input
-            }], dispositionEmitter: [{
-                type: Output
-            }] } });
-
-class ActivityComponent {
-    isActivityMaximized;
-    activity;
-    ActivitySave = new EventEmitter();
-    OnNameSelectChange = new EventEmitter();
-    OnRelatedToChange = new EventEmitter();
-    OnSubjectChange = new EventEmitter();
-    OnCallNotesChange = new EventEmitter();
-    constructor() {
-        this.isActivityMaximized = true;
-    }
-    ngOnInit() {
-    }
-    onNameSelectChange(event) {
-        this.activity.WhoObject = this.getWho(event.currentTarget.value);
-        this.OnNameSelectChange.emit(this.activity);
-    }
-    parseWhoObject(whoObject) {
-        return whoObject.objectType + ': ' + whoObject.objectName;
-    }
-    parseWhatObject(whatObject) {
-        return whatObject.objectType + ': ' + whatObject.objectName;
-    }
-    onRelatedToChange(event) {
-        this.activity.WhatObject = this.getWhat(event.currentTarget.value);
-        this.OnRelatedToChange.emit(this.activity);
-    }
-    onSubjectChange(event) {
-        this.activity.Subject = event.srcElement.value;
-        this.OnSubjectChange.emit(this.activity);
+        this._minimized = true;
     }
-    onCallNotesChange(event) {
-        this.activity.Subject = event.srcElement.value.trim();
-        this.OnCallNotesChange.emit(this.activity);
+    /**
+     * @ignore
+     */
+    maximize() {
+        this._minimized = false;
     }
-    getWho(id) {
-        for (let i = 0; i < this.activity.whoList.length; i++) {
-            if (this.activity.whoList[i].objectId === id) {
-                return this.activity.whoList[i];
-            }
+    /**
+     * @ignore
+     */
+    isConferenceCall() {
+        if (this.interaction.parties && this.interaction.parties.length > 1) {
+            return true;
         }
+        return false;
     }
-    getWhat(id) {
-        for (let i = 0; i < this.activity.whatList.length; i++) {
-            if (this.activity.whatList[i].objectId === id) {
-                return this.activity.whatList[i];
-            }
+    collapseKeypress(event) {
+        if (event.code === 'Enter') {
+            this.minimize();
         }
     }
-    loadQuickComment(value) {
-        this.activity.Description = this.activity.Description + this.activity.quickCommentList[value];
+    expandKeypress(event) {
+        if (event.code === 'Enter') {
+            this.maximize();
+        }
     }
-    activitySave(clearActivityFields) {
-        this.ActivitySave.emit(this.activity);
+    clickEvent(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);
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: ActivityComponent, selector: "app-activity", inputs: { activity: "activity" }, outputs: { ActivitySave: "ActivitySave", OnNameSelectChange: "OnNameSelectChange", OnRelatedToChange: "OnRelatedToChange", OnSubjectChange: "OnSubjectChange", OnCallNotesChange: "OnCallNotesChange" }, ngImport: i0, 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\" title=\"Collapse\">\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=\"Call From\">{{activity.NameFieldName}}</label>\r\n          <select class=\"dropDownListStyle displayData\" data-resetperactivity=\"false\" (change)=\"onNameSelectChange($event)\">\r\n            <option *ngFor=\"let who of activity.whoList\" value=\"{{who.objectId}}\">{{parseWhoObject(who)}}</option>\r\n          </select>\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Related To\">{{activity.RelatedToFieldName}}</label>\r\n          <select class=\"dropDownListStyle displayData\" (change)=\"onRelatedToChange($event)\" data-resetperactivity=\"false\">\r\n            <option *ngFor=\"let what of activity.whatList\" value=\"{{what.objectId}}\">{{parseWhatObject(what)}}</option>\r\n          </select>\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Subject\">{{activity.SubjectFieldName}}</label>\r\n          <input class=\"activitySubjectTextBoxStyle displayData\" (change)=\"onSubjectChange($event)\" title=\"{{activity.Subject}}\"\r\n            type=\"text\" value=\"{{activity.Subject}}\">\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <div class=\"callNotesContainer\">\r\n            <div class=\"textAreaDiv\">\r\n              <textarea value=\"{{activity.Description}}\" placeholder=\"Click to add a comment\" class=\"activityCommentsTextBoxStyle\"\r\n                (change)=\"onCallNotesChange($event)\" cols=\"20\" rows=\"2\" title=\"\"></textarea>\r\n            </div>\r\n            <div class=\"notesButtonBorder\">\r\n              <div class=\"commentsButtonDiv\">\r\n                <div class=\"quickCommentsDiv\">\r\n                  <input *ngFor=\"let quickComment of activity.quickCommentList ; let i = index;\" class=\"quickNotesBotton\" type=\"button\"\r\n                    value=\"{{i+1}}\" (click)=\"loadQuickComment(i)\" title=\"{{quickComment}}\">\r\n                </div>\r\n                <div class=\"submitDiv\">\r\n                  <input class=\"submitButton\" type=\"button\" value=\"Submit\" (click)=\"activitySave(false)\">\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\" title=\"Expand\">\r\n  </div>\r\n", styles: [".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}.callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important}.headerLabel{margin-left:10px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.callBody{border-top:0;position:relative}.displayDiv{width:100%;display:flex}.displayLabels{margin-left:5px;width:25%;margin-right:2px}.displayData{width:70%}.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 0% 0 0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;resize:none;width:100%;height:95px}.notesButtonBorder{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}.commentsButtonDiv{width:100%;display:flex;align-items:center}.quickNotesBotton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:20px;margin:2px;outline:none;font-size:70%}.quickCommentsDiv{text-align:left;flex:1 0 0;flex-wrap:wrap;display:flex;margin:2px}.submitDiv{text-align:right;padding-right:4px}.submitButton{border:0;float:right;margin-top:2px;outline:none;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InteractionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InteractionComponent, selector: "amc-interaction", inputs: { interaction: "interaction" }, outputs: { minimizedChanged: "minimizedChanged", isAgentTyping: "isAgentTyping", newMessage: "newMessage" }, ngImport: i0, 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\" (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;width:20px;height:20px;float:right;cursor:pointer}.ViewExpandImage:focus{outline:2px solid rgb(50,150,218);outline-offset:0px}.ViewCollapseImage{margin:3px;width:20px;height:20px;float:right}.ViewCollapseImage:focus{outline:2px solid rgb(50,150,218);outline-offset:0px}.callImage{cursor:default;height:20px}.phoneNumberValue:focus{outline-style:none}#call123{border:4px!important}.success{border:2px solid #00adbb!important}.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}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.displayDiv{width:100%;display:flex}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.verticalDivider{margin-left:2px;float:left}.directionText{font-size:.8em;margin-left:2px}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OperationComponent, selector: "amc-operation", inputs: ["statusText", "callId", "callType", "operations"] }, { kind: "component", type: PropertyComponent, selector: "amc-property", inputs: ["statusText", "callId", "callType", "property"] }, { kind: "component", type: HoldTimerComponent, selector: "amc-holdTimer", inputs: ["holdCounterData", "statusText", "callId"] }, { kind: "component", type: DurationComponent, selector: "amc-duration", inputs: ["statusText", "callId", "startTime"] }, { kind: "component", type: ChatBoxComponent, selector: "app-chat-box", inputs: ["settings", "isTyping", "messages"], outputs: ["isAgentTyping", "newMessage"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: ActivityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InteractionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-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\" title=\"Collapse\">\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=\"Call From\">{{activity.NameFieldName}}</label>\r\n          <select class=\"dropDownListStyle displayData\" data-resetperactivity=\"false\" (change)=\"onNameSelectChange($event)\">\r\n            <option *ngFor=\"let who of activity.whoList\" value=\"{{who.objectId}}\">{{parseWhoObject(who)}}</option>\r\n          </select>\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Related To\">{{activity.RelatedToFieldName}}</label>\r\n          <select class=\"dropDownListStyle displayData\" (change)=\"onRelatedToChange($event)\" data-resetperactivity=\"false\">\r\n            <option *ngFor=\"let what of activity.whatList\" value=\"{{what.objectId}}\">{{parseWhatObject(what)}}</option>\r\n          </select>\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <label class=\"displayLabels\" title=\"Subject\">{{activity.SubjectFieldName}}</label>\r\n          <input class=\"activitySubjectTextBoxStyle displayData\" (change)=\"onSubjectChange($event)\" title=\"{{activity.Subject}}\"\r\n            type=\"text\" value=\"{{activity.Subject}}\">\r\n        </div>\r\n        <div class=\"editor displayDiv\">\r\n          <div class=\"callNotesContainer\">\r\n            <div class=\"textAreaDiv\">\r\n              <textarea value=\"{{activity.Description}}\" placeholder=\"Click to add a comment\" class=\"activityCommentsTextBoxStyle\"\r\n                (change)=\"onCallNotesChange($event)\" cols=\"20\" rows=\"2\" title=\"\"></textarea>\r\n            </div>\r\n            <div class=\"notesButtonBorder\">\r\n              <div class=\"commentsButtonDiv\">\r\n                <div class=\"quickCommentsDiv\">\r\n                  <input *ngFor=\"let quickComment of activity.quickCommentList ; let i = index;\" class=\"quickNotesBotton\" type=\"button\"\r\n                    value=\"{{i+1}}\" (click)=\"loadQuickComment(i)\" title=\"{{quickComment}}\">\r\n                </div>\r\n                <div class=\"submitDiv\">\r\n                  <input class=\"submitButton\" type=\"button\" value=\"Submit\" (click)=\"activitySave(false)\">\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\" title=\"Expand\">\r\n  </div>\r\n", styles: [".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}.callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important}.headerLabel{margin-left:10px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.callBody{border-top:0;position:relative}.displayDiv{width:100%;display:flex}.displayLabels{margin-left:5px;width:25%;margin-right:2px}.displayData{width:70%}.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 0% 0 0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;resize:none;width:100%;height:95px}.notesButtonBorder{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}.commentsButtonDiv{width:100%;display:flex;align-items:center}.quickNotesBotton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:20px;margin:2px;outline:none;font-size:70%}.quickCommentsDiv{text-align:left;flex:1 0 0;flex-wrap:wrap;display:flex;margin:2px}.submitDiv{text-align:right;padding-right:4px}.submitButton{border:0;float:right;margin-top:2px;outline:none;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { activity: [{
+            args: [{ selector: 'amc-interaction', 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\" (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;width:20px;height:20px;float:right;cursor:pointer}.ViewExpandImage:focus{outline:2px solid rgb(50,150,218);outline-offset:0px}.ViewCollapseImage{margin:3px;width:20px;height:20px;float:right}.ViewCollapseImage:focus{outline:2px solid rgb(50,150,218);outline-offset:0px}.callImage{cursor:default;height:20px}.phoneNumberValue:focus{outline-style:none}#call123{border:4px!important}.success{border:2px solid #00adbb!important}.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}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.displayDiv{width:100%;display:flex}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.verticalDivider{margin-left:2px;float:left}.directionText{font-size:.8em;margin-left:2px}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { interaction: [{
                 type: Input
-            }], ActivitySave: [{
-                type: Output
-            }], OnNameSelectChange: [{
-                type: Output
-            }], OnRelatedToChange: [{
+            }], minimizedChanged: [{
                 type: Output
-            }], OnSubjectChange: [{
+            }], isAgentTyping: [{
                 type: Output
-            }], OnCallNotesChange: [{
+            }], newMessage: [{
                 type: Output
             }] } });
 
@@ -801,49 +974,18 @@ class LoginComponent {
             field.isInvalid = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: LoginComponent, selector: "amc-login", inputs: { loginData: "loginData" }, outputs: { loginDetailsProvided: "loginDetailsProvided" }, ngImport: i0, 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: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:all .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:2px solid rgb(50,150,218);outline-offset:5px}.invalid-input{margin:0;padding:0;color:#a94442;font-size:x-small}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LoginComponent, selector: "amc-login", inputs: { loginData: "loginData" }, outputs: { loginDetailsProvided: "loginDetailsProvided" }, ngImport: i0, 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{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.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:all .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:2px solid rgb(50,150,218);outline-offset:5px}.invalid-input{margin:0;padding:0;color:#a94442;font-size:x-small}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: LoginComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
-            args: [{ 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: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:all .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:2px solid rgb(50,150,218);outline-offset:5px}.invalid-input{margin:0;padding:0;color:#a94442;font-size:x-small}\n"] }]
+            args: [{ 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{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.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:all .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:2px solid rgb(50,150,218);outline-offset:5px}.invalid-input{margin:0;padding:0;color:#a94442;font-size:x-small}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { loginData: [{
                 type: Input
             }], loginDetailsProvided: [{
                 type: Output
             }] } });
 
-class CreateComponent {
-    CreateNewEntity = new EventEmitter();
-    isCreateMaximized;
-    Entities;
-    constructor() {
-        this.isCreateMaximized = true;
-    }
-    createNewEntity(type) {
-        this.CreateNewEntity.emit(type);
-    }
-    getEntities() {
-        return Object.keys(this.Entities);
-    }
-    getDisplay(entity) {
-        return entity.substring(0, entity.indexOf('|'));
-    }
-    getImage(entity) {
-        return entity.substring(entity.indexOf('|') + 1);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CreateComponent, selector: "amc-create", inputs: { Entities: "Entities" }, outputs: { CreateNewEntity: "CreateNewEntity" }, ngImport: i0, 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-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{background-color:#fff;display:grid}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CreateComponent, decorators: [{
-            type: Component,
-            args: [{ 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-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{background-color:#fff;display:grid}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { CreateNewEntity: [{
-                type: Output
-            }], Entities: [{
-                type: Input
-            }] } });
-
 class RecentActivityComponent {
     ActivityDetails;
     isInConsoleView;
@@ -956,12 +1098,12 @@ class RecentActivityComponent {
             newValue: this.ActivityDetails
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RecentActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: RecentActivityComponent, selector: "amc-recent-activity", inputs: { ActivityDetails: "ActivityDetails", isInConsoleView: "isInConsoleView", quickCommentList: "quickCommentList", workingScenarioID: "workingScenarioID", idx: "idx", last: "last", WhoObjectList: "WhoObjectList", WhatObjectList: "WhatObjectList" }, outputs: { EventEmitter: "EventEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"ActivityDetails.ScenarioId === workingScenarioID\">\r\n  <div (click)=\"expandAndCollapseRecentActivity(false);\" class=\"editor callHeaderRecentActivitySelected\">\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 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:none;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:none;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:white;opacity:.7;filter:alpha(opacity=70);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%)}.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 #ffffff;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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecentActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RecentActivityComponent, selector: "amc-recent-activity", inputs: { ActivityDetails: "ActivityDetails", isInConsoleView: "isInConsoleView", quickCommentList: "quickCommentList", workingScenarioID: "workingScenarioID", idx: "idx", last: "last", WhoObjectList: "WhoObjectList", WhatObjectList: "WhatObjectList" }, outputs: { EventEmitter: "EventEmitter" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"ActivityDetails.ScenarioId === workingScenarioID\">\r\n  <div (click)=\"expandAndCollapseRecentActivity(false);\" class=\"editor callHeaderRecentActivitySelected\">\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 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:none;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:none;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;filter:alpha(opacity=70);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%)}.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 #ffffff;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;overflow:hidden;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}.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}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: RecentActivityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RecentActivityComponent, decorators: [{
             type: Component,
-            args: [{ 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]=\"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 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:none;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:none;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:white;opacity:.7;filter:alpha(opacity=70);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%)}.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 #ffffff;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}\n"] }]
+            args: [{ 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]=\"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 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:none;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:none;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;filter:alpha(opacity=70);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%)}.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 #ffffff;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;overflow:hidden;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}.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}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { ActivityDetails: [{
                 type: Input
             }], isInConsoleView: [{
@@ -982,167 +1124,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Output
             }] } });
 
-class CurrentActivityComponent {
-    ActivityDetails;
-    quickCommentList;
-    isAutoSave;
-    enableDiscard;
-    autoSaveTimer;
-    quickCommentOptionRequiredCadArray;
-    WhoObjectList;
-    WhatObjectList;
-    scenarioToCADMap;
-    EventEmitter;
-    eventList;
-    debouncer;
-    isActivityMaximized;
-    constructor() {
-        this.isActivityMaximized = true;
-        this.EventEmitter = new EventEmitter();
-        this.debouncer = new Subject();
-        this.eventList = new Set();
-    }
-    async ngOnInit() {
-        this.debouncer.pipe(debounceTime(500)).subscribe(() => {
-            const newEvent = {
-                eventName: Array.from(this.eventList).join('|'),
-                newValue: this.ActivityDetails
-            };
-            this.EventEmitter.emit(newEvent);
-            this.eventList.clear();
-        });
-    }
-    submitActivity() {
-        try {
-            this.ActivityDetails.IsProcessing = true;
-            this.EventEmitter.emit({
-                eventName: 'SubmitActivity',
-                newValue: this.ActivityDetails
-            });
-        }
-        catch (error) { }
-    }
-    triggerDiscardActivity() {
-        try {
-            this.EventEmitter.emit({
-                eventName: 'TriggerDiscardActivity',
-                newValue: this.ActivityDetails
-            });
-        }
-        catch (error) { }
-    }
-    onNameChange(event) {
-        try {
-            this.ActivityDetails.WhoObject = this.WhoObjectList.find((obj) => obj.objectId === event);
-            this.EventEmitter.emit({
-                eventName: 'ActivityWhoObjectChanged',
-                newValue: this.ActivityDetails
-            });
-        }
-        catch (error) { }
-    }
-    onRelatedToChange(event) {
-        try {
-            this.ActivityDetails.WhatObject = this.WhatObjectList.find((obj) => obj.objectId === event);
-            this.EventEmitter.emit({
-                eventName: 'ActivityWhatObjectChanged',
-                newValue: this.ActivityDetails
-            });
-        }
-        catch (error) { }
-    }
-    onSubjectChange() {
-        try {
-            this.eventList.add('ActivitySubjectChanged');
-            this.debouncer.next();
-        }
-        catch (error) { }
-    }
-    onSubjectKeyUp() {
-        try {
-            this.eventList.add('ActivitySubjectChanged');
-            this.debouncer.next();
-        }
-        catch (error) { }
-    }
-    onCallNotesChange() {
-        try {
-            this.eventList.add('ActivityCallNoteChanged');
-            this.debouncer.next();
-        }
-        catch (error) { }
-    }
-    onCallNotesKeyUp() {
-        try {
-            this.eventList.add('ActivityCallNoteChanged');
-            this.debouncer.next();
-        }
-        catch (error) { }
-    }
-    addQuickCommentToDescription(comment) {
-        try {
-            let descriptionToSet = comment;
-            if (this.quickCommentOptionRequiredCadArray[comment]) {
-                let cadFields = {};
-                if (this.ActivityDetails) {
-                    cadFields = this.scenarioToCADMap[this.ActivityDetails.ScenarioId];
-                }
-                for (let i = 0; i < this.quickCommentOptionRequiredCadArray[comment].length; i++) {
-                    let keyToCheckIfCADExists = this.quickCommentOptionRequiredCadArray[comment][i];
-                    const 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) { }
-    }
-    parseWhoObject(whoObject) {
-        try {
-            return whoObject.displayName + ': ' + whoObject.objectName;
-        }
-        catch (error) { }
+class ScenarioComponent {
+    scenario;
+    minimizedChanged = new EventEmitter();
+    isAgentTyping = new EventEmitter();
+    newMessage = new EventEmitter();
+    afterViewChecked = new EventEmitter();
+    constructor() { }
+    ngAfterViewChecked() {
+        this.afterViewChecked.emit();
     }
-    parseWhatObject(whatObject) {
-        try {
-            return whatObject.displayName + ': ' + whatObject.objectName;
-        }
-        catch (error) { }
+    onMinimizedChanged() {
+        this.minimizedChanged.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CurrentActivityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: CurrentActivityComponent, selector: "amc-current-activity", inputs: { ActivityDetails: "ActivityDetails", quickCommentList: "quickCommentList", isAutoSave: "isAutoSave", enableDiscard: "enableDiscard", autoSaveTimer: "autoSaveTimer", quickCommentOptionRequiredCadArray: "quickCommentOptionRequiredCadArray", WhoObjectList: "WhoObjectList", WhatObjectList: "WhatObjectList", scenarioToCADMap: "scenarioToCADMap" }, outputs: { EventEmitter: "EventEmitter" }, ngImport: i0, 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:none;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:none;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;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 0% 0 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;font-family:\"Segoe UI\",Verdana,Helvetica,Sans-Serif;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}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScenarioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScenarioComponent, selector: "amc-scenario", inputs: { scenario: "scenario" }, outputs: { minimizedChanged: "minimizedChanged", isAgentTyping: "isAgentTyping", newMessage: "newMessage", afterViewChecked: "afterViewChecked" }, ngImport: i0, template: "<ng-container *ngIf=\"scenario && scenario.interactions\">\r\n  <amc-interaction *ngFor=\"let interaction of scenario.interactions\" [interaction]=\"interaction\"\r\n    (minimizedChanged)=\"onMinimizedChanged()\" (isAgentTyping)=\"isAgentTyping.emit($event)\"\r\n    (newMessage)=\"newMessage.emit($event)\">\r\n  </amc-interaction>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InteractionComponent, selector: "amc-interaction", inputs: ["interaction"], outputs: ["minimizedChanged", "isAgentTyping", "newMessage"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: CurrentActivityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScenarioComponent, decorators: [{
             type: Component,
-            args: [{ 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:none;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:none;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;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 0% 0 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;font-family:\"Segoe UI\",Verdana,Helvetica,Sans-Serif;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}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { ActivityDetails: [{
-                type: Input
-            }], quickCommentList: [{
-                type: Input
-            }], isAutoSave: [{
-                type: Input
-            }], enableDiscard: [{
-                type: Input
-            }], autoSaveTimer: [{
-                type: Input
-            }], quickCommentOptionRequiredCadArray: [{
-                type: Input
-            }], WhoObjectList: [{
-                type: Input
-            }], WhatObjectList: [{
-                type: Input
-            }], scenarioToCADMap: [{
+            args: [{ selector: 'amc-scenario', template: "<ng-container *ngIf=\"scenario && scenario.interactions\">\r\n  <amc-interaction *ngFor=\"let interaction of scenario.interactions\" [interaction]=\"interaction\"\r\n    (minimizedChanged)=\"onMinimizedChanged()\" (isAgentTyping)=\"isAgentTyping.emit($event)\"\r\n    (newMessage)=\"newMessage.emit($event)\">\r\n  </amc-interaction>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { scenario: [{
                 type: Input
-            }], EventEmitter: [{
+            }], minimizedChanged: [{
+                type: Output
+            }], isAgentTyping: [{
+                type: Output
+            }], newMessage: [{
+                type: Output
+            }], afterViewChecked: [{
                 type: Output
             }] } });
 
@@ -1287,12 +1296,12 @@ class SearchInformationComponent {
         catch (error) { }
         return layoutInfo;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SearchInformationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: SearchInformationComponent, selector: "amc-search-information", inputs: { ActivityDetails: "ActivityDetails", searchLayout: "searchLayout", searchRecordList: "searchRecordList" }, outputs: { agentSelectedCallerInformation: "agentSelectedCallerInformation" }, usesOnChanges: true, ngImport: i0, 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-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{margin-bottom:8px;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:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 0;outline:none}.wrapper{width:79%!important}.singleMatchFirstWrapper{cursor:pointer;border:0px;outline:none;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:none;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:none}.displayLabelsTabbed{margin-left:5px;width:35%;font-weight:400;margin-bottom:0;margin-top:0;outline:none;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:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 5px;outline:none}.multiMatchLabel{border:0px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(95% - 45px)}.singleMatchLabel{border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(65% - 13px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInformationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchInformationComponent, selector: "amc-search-information", inputs: { ActivityDetails: "ActivityDetails", searchLayout: "searchLayout", searchRecordList: "searchRecordList" }, outputs: { agentSelectedCallerInformation: "agentSelectedCallerInformation" }, usesOnChanges: true, ngImport: i0, 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;overflow:hidden;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-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{margin-bottom:8px;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:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 0;outline:none}.wrapper{width:79%!important}.singleMatchFirstWrapper{cursor:pointer;border:0px;outline:none;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:none;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:none}.displayLabelsTabbed{margin-left:5px;width:35%;font-weight:400;margin-bottom:0;margin-top:0;outline:none;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:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 5px;outline:none}.multiMatchLabel{border:0px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(95% - 45px)}.singleMatchLabel{border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(65% - 13px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: SearchInformationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInformationComponent, decorators: [{
             type: Component,
-            args: [{ 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-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{margin-bottom:8px;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:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 0;outline:none}.wrapper{width:79%!important}.singleMatchFirstWrapper{cursor:pointer;border:0px;outline:none;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:none;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:none}.displayLabelsTabbed{margin-left:5px;width:35%;font-weight:400;margin-bottom:0;margin-top:0;outline:none;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:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 5px;outline:none}.multiMatchLabel{border:0px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(95% - 45px)}.singleMatchLabel{border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(65% - 13px)}\n"] }]
+            args: [{ 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;overflow:hidden;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-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{margin-bottom:8px;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:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 0;outline:none}.wrapper{width:79%!important}.singleMatchFirstWrapper{cursor:pointer;border:0px;outline:none;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:none;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:none}.displayLabelsTabbed{margin-left:5px;width:35%;font-weight:400;margin-bottom:0;margin-top:0;outline:none;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:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 5px;outline:none}.multiMatchLabel{border:0px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(95% - 45px)}.singleMatchLabel{border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(65% - 13px)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { ActivityDetails: [{
                 type: Input
             }], searchLayout: [{
@@ -1303,6 +1312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Output
             }] } });
 
+//import { ElementZoneStrategyFactory } from 'elements-zone-strategy';
 class UILibraryModule {
     injector;
     constructor(injector) {
@@ -1340,12 +1350,12 @@ class UILibraryModule {
             }));
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: UILibraryModule, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: UILibraryModule, declarations: [InteractionComponent,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UILibraryModule, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UILibraryModule, declarations: [InteractionComponent,
             ScenarioComponent,
             OperationComponent,
             PropertyComponent,
-            HoldtimerComponent,
+            HoldTimerComponent,
             DurationComponent,
             ChatBoxComponent,
             ChatMessageComponent,
@@ -1356,9 +1366,9 @@ class UILibraryModule {
             RecentActivityComponent,
             CurrentActivityComponent,
             SearchInformationComponent], imports: [BrowserModule, CommonModule, FormsModule, MatLegacyTabsModule], exports: [ScenarioComponent, DispositionComponent, LoginComponent, CreateComponent, RecentActivityComponent, CurrentActivityComponent, SearchInformationComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: UILibraryModule, imports: [BrowserModule, CommonModule, FormsModule, MatLegacyTabsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UILibraryModule, imports: [BrowserModule, CommonModule, FormsModule, MatLegacyTabsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: UILibraryModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UILibraryModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [BrowserModule, CommonModule, FormsModule, MatLegacyTabsModule],
@@ -1367,7 +1377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         ScenarioComponent,
                         OperationComponent,
                         PropertyComponent,
-                        HoldtimerComponent,
+                        HoldTimerComponent,
                         DurationComponent,
                         ChatBoxComponent,
                         ChatMessageComponent,