@amc-technology/ui-library 1.0.28 → 1.0.33

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

@@ -1,716 +1,16 @@
-import { Component, Input, Output, EventEmitter, ViewChild, NgModule, Injector } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { createCustomElement } from '@angular/elements';
-import { BrowserModule } from '@angular/platform-browser';
-import { ElementZoneStrategyFactory } from 'elements-zone-strategy';
-
-var InteractionComponent = /** @class */ (function () {
-    function InteractionComponent() {
-        this.minimizedChanged = new EventEmitter();
-        this.isAgentTyping = new EventEmitter();
-        this.newMessage = new EventEmitter();
-        this._minimized = false;
-    }
-    Object.defineProperty(InteractionComponent.prototype, "_minimized", {
-        get: function () {
-            return this.minimized;
-        },
-        set: function (value) {
-            this.minimized = value;
-            this.minimizedChanged.emit(value);
-        },
-        enumerable: true,
-        configurable: true
-    });
-    InteractionComponent.prototype.ngOnInit = function () {
-    };
-    InteractionComponent.prototype.minimize = function () {
-        this._minimized = true;
-    };
-    InteractionComponent.prototype.maximize = function () {
-        this._minimized = false;
-    };
-    InteractionComponent.prototype.isConferenceCall = function () {
-        if (this.interaction.parties && this.interaction.parties.length > 1) {
-            return true;
-        }
-        return false;
-    };
-    return InteractionComponent;
-}());
-InteractionComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-interaction',
-                template: "<div class=\"AnswerCallFocused\">\n  <div class=\"editor callHeaderTop\">\n    <img class=\"statusImage\" [src]=\"interaction.UIHeadersData.statusUrl\" (click)=\"interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)\" />\n    <label class=\"statusText\">\n      <b>{{interaction.UIHeadersData.statusText}}</b>\n    </label>\n    <label class=\"verticalDivider\">|</label>\n    <label class=\"directionText\" *ngIf=\"!interaction.UIHeadersData.displayHoldCounter\">{{interaction.UIHeadersData.directionText}}</label>\n    <div class=\"holdCallDurationDiv\" *ngIf=\"interaction.UIHeadersData.displayHoldCounter\">\n      <amc-holdtimer [holdCounterData]=\"interaction.UIHeadersData.holdCounterData\"></amc-holdtimer>\n    </div>\n    <img class=\"ViewExpandImage\" [src]=\"interaction.UIHeadersData.minimizeUrl\" (click)=\"minimize()\" *ngIf=\"!_minimized\" />\n    <img class=\"ViewCollapseImage\" [src]=\"interaction.UIHeadersData.maximizeUrl\" (click)=\"maximize()\" *ngIf=\"_minimized\" />\n    <div class=\"DurationDiv\" *ngIf=\"interaction.displayCallTimer\">\n      <amc-duration [startTime]=\"interaction.startTime\"></amc-duration>\n    </div>\n  </div>\n\n  <div *ngIf=\"!_minimized\">\n\n    <div *ngIf=\"!isConferenceCall()\">\n      <div class=\"editor container\">\n        <input class=\"callImage\" type=\"image\" [src]=\"interaction.subheaderData.image.href\" [title]=\"interaction.subheaderData.tooltip || ''\">\n        <input class=\"editor phoneNumberValue\" readonly type=\"text\" [value]=\"interaction.subheaderData.value\">\n      </div>\n\n      <div class=\"cadSection\">\n        <ng-container *ngFor=\"let property of interaction.properties\">\n          <ng-container *ngIf=\"property.visible\">\n            <label class=\"col1\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\n            <amc-property class=\"col2\" [property]=\"property\"> </amc-property>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let property of interaction.associatedData\">\n          <ng-container *ngIf=\"property.visible\">\n            <div class=\"editor displayDiv\">\n              <label class=\"displayLabels\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\n              <amc-property class=\"col2\" [property]=\"property\"> </amc-property>\n            </div>\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <app-chat-box *ngIf=\"interaction.chat\" [isTyping]=\"interaction.chat.isCustomerTyping\" [settings]=\"interaction.chat.settings\"\n        [messages]=\"interaction.chat.messages\" (isAgentTyping)=\"isAgentTyping.emit($event)\" (newMessage)=\"newMessage.emit($event)\"></app-chat-box>\n\n      <div [id]='interaction.interactionId'> </div>\n      <amc-operation [operations]=\"interaction.operations\"></amc-operation>\n    </div>\n\n    <div *ngIf=\"isConferenceCall()\">\n      <div *ngFor=\"let party of interaction.parties\">\n        <div class=\"editor container\">\n          <input class=\"callImage\" type=\"image\" [src]=\"party.header.image.href\" [title]=\"party.header.tooltip || ''\">\n          <input class=\"editor phoneNumberValue\" readonly type=\"text\" [value]=\"party.header.value\">\n        </div>\n\n        <div class=\"grid-container\">\n          <ng-container *ngFor=\"let property of party.properties\">\n            <ng-container *ngIf=\"property.visible\">\n              <label class=\"col1\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\n              <amc-property class=\"col2\" [property]=\"property\"> </amc-property>\n            </ng-container>\n          </ng-container>\n        </div>\n        <amc-operation [operations]=\"party.operations\"></amc-operation>\n        <div class=\"AnswerCallFocused\"></div>\n      </div>\n      <amc-operation [operations]=\"interaction.operations\"></amc-operation>\n    </div>\n\n  </div>\n</div>\n",
-                styles: [":host{display:block}.container{margin-left:5px!important;padding-left:0}.cadSection{margin-bottom:5px}.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}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:6px 0 0 5px;cursor:pointer}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-InteractionComponent.ctorParameters = function () { return []; };
-InteractionComponent.propDecorators = {
-    interaction: [{ type: Input }],
-    minimizedChanged: [{ type: Output }],
-    isAgentTyping: [{ type: Output }],
-    newMessage: [{ type: Output }]
-};
-var ScenarioComponent = /** @class */ (function () {
-    function ScenarioComponent() {
-        this.minimizedChanged = new EventEmitter();
-        this.isAgentTyping = new EventEmitter();
-        this.newMessage = new EventEmitter();
-        this.afterViewChecked = new EventEmitter();
-    }
-    ScenarioComponent.prototype.ngAfterViewChecked = function () {
-        this.afterViewChecked.emit();
-    };
-    ScenarioComponent.prototype.onMinimizedChanged = function () {
-        this.minimizedChanged.emit();
-    };
-    return ScenarioComponent;
-}());
-ScenarioComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-scenario',
-                template: "<ng-container *ngIf=\"scenario && scenario.interactions\">\n  <amc-interaction *ngFor=\"let interaction of scenario.interactions\" [interaction]=\"interaction\"\n    (minimizedChanged)=\"onMinimizedChanged()\" (isAgentTyping)=\"isAgentTyping.emit($event)\"\n    (newMessage)=\"newMessage.emit($event)\">\n  </amc-interaction>\n</ng-container>\n",
-                styles: ["", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:6px 0 0 5px;cursor:pointer}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-ScenarioComponent.ctorParameters = function () { return []; };
-ScenarioComponent.propDecorators = {
-    scenario: [{ type: Input }],
-    minimizedChanged: [{ type: Output }],
-    isAgentTyping: [{ type: Output }],
-    newMessage: [{ type: Output }],
-    afterViewChecked: [{ type: Output }]
-};
-var OperationComponent = /** @class */ (function () {
-    function OperationComponent() {
-    }
-    OperationComponent.prototype.ngOnInit = function () {
-    };
-    return OperationComponent;
-}());
-OperationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-operation',
-                template: "<div class=\"callOptions\">\n    <img class=\"AnswerCallImages\" *ngFor=\"let operation of operations\" [title]=\"operation.title\" [src]=\"operation.icon\" (click)=\"operation.handler(operation.operationName, operation.operationMetadata)\"\n    />\n</div>",
-                styles: ["", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:6px 0 0 5px;cursor:pointer}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-OperationComponent.ctorParameters = function () { return []; };
-OperationComponent.propDecorators = {
-    operations: [{ type: Input }]
-};
-var IChatMessageType = {
-    AGENT: 'AGENT',
-    OTHER_PERSON: 'OTHER_PERSON',
-    INFORMATION: 'INFORMATION',
-};
-var Property = /** @class */ (function () {
-    function Property(key, value, visible, valueType, customOperation) {
-        var _this = this;
-        this.displayOperation = (function () {
-            _this.displayKey = _this.key;
-            _this.displayValue = _this.value;
-        });
-        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();
-    }
-    return Property;
-}());
-var ValueType = {
-    STRING: 0,
-    COUNTER: 1,
-};
-ValueType[ValueType.STRING] = 'STRING';
-ValueType[ValueType.COUNTER] = 'COUNTER';
-function secondsToHms(seconds_in) {
-    seconds_in = Number(seconds_in);
-    var h = Math.floor(seconds_in / 3600);
-    var m = Math.floor(seconds_in % 3600 / 60);
-    var s = Math.floor(seconds_in % 3600 % 60);
-    var hDisplay = h > 0 ? h.toString() + ':' : '';
-    var mDisplay = m > 0 ? ('0' + m.toString()).slice(-2) + ':' : '00:';
-    var sDisplay = s > 0 ? ('0' + s.toString()).slice(-2) : '00';
-    return hDisplay + mDisplay + sDisplay;
-}
-var PropertyComponent = /** @class */ (function () {
-    function PropertyComponent() {
-        this._timerId = null;
-        this.processedDisplayValue = '';
-    }
-    PropertyComponent.prototype.ngOnInit = function () {
-        this.initValues();
-    };
-    PropertyComponent.prototype.initValues = function () {
-        if (this.property.displayValueType === ValueType.COUNTER) {
-            this.startCallCounter();
-        }
-        else {
-            this.processedDisplayValue = this.property.displayValue;
-        }
-    };
-    PropertyComponent.prototype.startCallCounter = function () {
-        var _this = this;
-        if (this._timerId == null) {
-            this._timerId = window.setInterval((function () {
-                var callStartTime = _this.property.displayValue;
-                var currentTime = new Date().getTime() / 1000;
-                var secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
-                _this.processedDisplayValue = secondsToHms(secondsPassed);
-            }), 1000);
-        }
-    };
-    PropertyComponent.prototype.ngOnDestroy = function () {
-        if (this.property.displayValueType === ValueType.COUNTER) {
-            if (this._timerId != null) {
-                clearInterval(this._timerId);
-                this._timerId = null;
-            }
-        }
-    };
-    return PropertyComponent;
-}());
-PropertyComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-property',
-                template: "<input [name]=\"processedDisplayValue\" readonly [title]=\"processedDisplayValue\" class=\"displayData\" type=\"text\" [value]=\"processedDisplayValue\"\n  *ngIf=\"!property.customOperations\" />\n<input class=\"cursor\" [name]=\"processedDisplayValue\" class=\"displayData\" readonly [title]=\"processedDisplayValue\" type=\"text\" [value]=\"processedDisplayValue\"\n  (click)=\"property.customOperations.handler(property.customOperations.eventName,property.customOperations.eventMetadata)\"\n  *ngIf=\"property.customOperations\" />\n",
-                styles: ["input{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:6px 0 0 5px;cursor:pointer}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-PropertyComponent.ctorParameters = function () { return []; };
-PropertyComponent.propDecorators = {
-    property: [{ type: Input }]
-};
-var HoldtimerComponent = /** @class */ (function () {
-    function HoldtimerComponent() {
-        this.displayTime = '00:00/00:00';
-    }
-    HoldtimerComponent.prototype.ngOnInit = function () {
-        this.startCallCounter();
-    };
-    HoldtimerComponent.prototype.startCallCounter = function () {
-        var _this = this;
-        var pastTimeInSeconds = this.CaculatePastHoldDuration();
-        if (this._timerId == null) {
-            this._timerId = window.setInterval((function () {
-                var currentTime = new Date().getTime() / 1000;
-                var secondsPassedCurrentCall = Math.floor((currentTime) - (_this.holdCounterData.currentHoldStartTime / 1000));
-                _this.displayTime = secondsToHms(secondsPassedCurrentCall) +
-                    '/' + secondsToHms(pastTimeInSeconds + secondsPassedCurrentCall);
-            }), 1000);
-        }
-    };
-    HoldtimerComponent.prototype.CaculatePastHoldDuration = function () {
-        var pastTimeInSeconds = 0;
-        if (this.holdCounterData.pastCallDurations) {
-            this.holdCounterData.pastCallDurations.forEach((function (holdTimerIterator) {
-                pastTimeInSeconds += (holdTimerIterator.endTime - holdTimerIterator.startTime) / 1000;
-            }));
-        }
-        return pastTimeInSeconds;
-    };
-    HoldtimerComponent.prototype.ngOnDestroy = function () {
-        if (this._timerId != null) {
-            clearInterval(this._timerId);
-            this._timerId = null;
-        }
-    };
-    return HoldtimerComponent;
-}());
-HoldtimerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-holdtimer',
-                template: "<div class=\"holdCallDurationDiv\">\n  <input class=\"holdCallDurationTimer\" name=\"HoldCallDuration/TotalHoldCallDuration\" type=\"text\" [value]=\"displayTime\"\n    readonly>\n</div>\n",
-                styles: ["", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:6px 0 0 5px;cursor:pointer}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-HoldtimerComponent.ctorParameters = function () { return []; };
-HoldtimerComponent.propDecorators = {
-    holdCounterData: [{ type: Input }]
-};
-var DurationComponent = /** @class */ (function () {
-    function DurationComponent() {
-        this.displayTime = '00:00/00:00';
-    }
-    DurationComponent.prototype.ngOnInit = function () {
-        this.startCallCounter();
-    };
-    DurationComponent.prototype.startCallCounter = function () {
-        var _this = this;
-        if (this._timerId == null) {
-            this._timerId = window.setInterval((function () {
-                var callStartTime = _this.startTime;
-                var currentTime = new Date().getTime() / 1000;
-                var secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
-                _this.displayTime = Math.floor(secondsPassed / 60) + ':' + ('0' + (secondsPassed % 60)).slice(-2);
-            }), 1000);
-        }
-    };
-    DurationComponent.prototype.ngOnDestroy = function () {
-        if (this._timerId != null) {
-            clearInterval(this._timerId);
-            this._timerId = null;
-        }
-    };
-    return DurationComponent;
-}());
-DurationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-duration',
-                template: "<div class=\"holdCallDurationDiv\">\n  <input class=\"block durationInput\" name=\"CallDuration\" type=\"text\" [value]=\"displayTime\" readonly>\n</div>\n",
-                styles: ["", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:6px 0 0 5px;cursor:pointer}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
-            },] },
-];
-DurationComponent.ctorParameters = function () { return []; };
-DurationComponent.propDecorators = {
-    startTime: [{ type: Input }]
-};
-var ChatBoxComponent = /** @class */ (function () {
-    function ChatBoxComponent() {
-        this.isTyping = false;
-        this.lastCount = -1;
-        this._isAgentTyping = false;
-        this.isAgentTyping = new EventEmitter();
-        this.newMessage = new EventEmitter();
-        this.newMessageText = '';
-        this.usernameToColor = {};
-        this.colors = [
-            '#81c784',
-            '#ffab91',
-            '#f48fb1',
-            '#29b6f6',
-            '#e1bee7',
-            '#9ccc65',
-            '#ffc107',
-            '#26c6da',
-            '#cddc39',
-        ];
-        this.colorsIndex = 0;
-        this.agentColor = '#29b6f6';
-    }
-    ChatBoxComponent.prototype.ngAfterViewChecked = function () {
-        if (this.lastCount !== this.messages.length) {
-            this.lastCount = this.messages.length;
-            this.scrollToBottom();
-        }
-    };
-    ChatBoxComponent.prototype.getColor = function (message) {
-        if (message.type && message.type === IChatMessageType.AGENT) {
-            return this.agentColor;
-        }
-        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 {
-            return this.colors[0];
-        }
-    };
-    ChatBoxComponent.prototype.shouldAlignRight = function (message) {
-        return message.type && message.type === IChatMessageType.AGENT;
-    };
-    ChatBoxComponent.prototype.sendNewMessage = function () {
-        if (this.newMessageText) {
-            this.newMessage.emit(this.newMessageText);
-            this.newMessageText = '';
-        }
-    };
-    ChatBoxComponent.prototype.onNewMessageFocus = function (event) {
-        var isTyping = event && this.newMessageText.length > 0;
-        if (isTyping !== this._isAgentTyping) {
-            this._isAgentTyping = isTyping;
-            this.isAgentTyping.emit(isTyping);
-        }
-    };
-    ChatBoxComponent.prototype.onKeyup = function () {
-        var isTyping = this.newMessageText.length > 0;
-        if (isTyping !== this._isAgentTyping) {
-            this._isAgentTyping = isTyping;
-            this.isAgentTyping.emit(isTyping);
-        }
-    };
-    ChatBoxComponent.prototype.scrollToBottom = function () {
-        try {
-            this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;
-        }
-        catch (e) { }
-    };
-    return ChatBoxComponent;
-}());
-ChatBoxComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-chat-box',
-                template: "<div class=\"chat-box\">\n  <div #MessagesContainer class=\"messages\" [style.max-height]='settings.maxHeight'>\n    <ng-container *ngFor=\"let message of messages\">\n      <app-chat-message [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\"\n        [timestamp]=\"message.timestamp\" [image]=\"message.userIcon\" [fallbackImage]=\"settings.fallbackUserIcon\" [color]=\"getColor(message)\">\n      </app-chat-message>\n    </ng-container>\n\n    <div *ngIf=\"isTyping\" class=\"typing-indicator\">\n      Someone is typing\n      <span></span>\n      <span></span>\n      <span></span>\n    </div>\n  </div>\n\n  <div class=\"new-message\">\n    <input #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" placeholder=\"Type a message\" (focus)=\"onNewMessageFocus(true)\"\n      (blur)=\"onNewMessageFocus(false)\" (keydown.enter)=\"sendNewMessage()\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\">\n    <input type=\"image\" [src]=\"settings.sendImage\" (click)=\"sendNewMessage()\" [disabled]=\"settings.disableSendMessage\">\n  </div>\n</div>\n",
-                styles: [".chat-box{background-color:#eceff1}.messages{padding:5px;overflow:auto;min-height:50px}.new-message{border-top:1px solid #000;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;height:25px}.new-message input[type=text]{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;background-color:#eceff1;border:none;min-width:0}.new-message input[type=image]{position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:20px;cursor:pointer}.new-message input[type=image]:disabled{opacity:.5;cursor:auto}.new-message input:focus{outline:0}.typing-indicator{font-size:1em;font-style:italic}.typing-indicator span{display:inline-block;height:10px;width:10px;border-radius:50%;background-color:#9e9e9e;margin:0 1px;opacity:.2}.typing-indicator span:nth-of-type(1){-webkit-animation:1.5s .33333s infinite blink;animation:1.5s .33333s infinite blink}.typing-indicator span:nth-of-type(2){-webkit-animation:1.5s .66666s infinite blink;animation:1.5s .66666s infinite blink}.typing-indicator span:nth-of-type(3){-webkit-animation:1.5s .99999s infinite blink;animation:1.5s .99999s infinite blink}@-webkit-keyframes blink{50%{opacity:1}}@keyframes blink{50%{opacity:1}}"],
-            },] },
-];
-ChatBoxComponent.ctorParameters = function () { return []; };
-ChatBoxComponent.propDecorators = {
-    settings: [{ type: Input }],
-    isTyping: [{ type: Input }],
-    messages: [{ type: Input }],
-    isAgentTyping: [{ type: Output }],
-    newMessage: [{ type: Output }],
-    messagesContainer: [{ type: ViewChild, args: ['MessagesContainer',] }]
-};
-var ChatMessageComponent = /** @class */ (function () {
-    function ChatMessageComponent() {
-        this.alignRight = false;
-    }
-    ChatMessageComponent.prototype.ngOnInit = function () {
-    };
-    return ChatMessageComponent;
-}());
-ChatMessageComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-chat-message',
-                template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\n  <div class=\"message-header\">\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\n    <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\n  </div>\n\n  <div class=\"message-body-container\">\n    <div>\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\n        <span [innerHTML]=\"message\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n",
-                styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.message-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;-webkit-box-align:center;-ms-flex-align:center;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{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image,.right-message>.message-header .username{margin-left:5px}.left-message>.message-header{margin-left:1px}.left-message>.message-header .image,.left-message>.message-header .username{margin-right:5px}.message-body-container{display:-webkit-box;display:-ms-flexbox;display:flex}.right-message>.message-body-container{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.message-body{display:inline-block;position:relative;border-radius:.4em;padding:3px;font-style:normal;font-size:1em;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;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.left-message .message-body:after{content:\"\";position:absolute;left:.8em;top:-.4em;border-bottom:.4em solid #000;border-bottom-color:inherit;border-left:.4em solid transparent;border-right:.4em solid transparent}.right-message .message-body:after{content:\"\";position:absolute;right:.8em;top:-.4em;border-bottom:.4em solid #000;border-bottom-color:inherit;border-left:.4em solid transparent;border-right:.4em solid transparent}"]
-            },] },
-];
-ChatMessageComponent.ctorParameters = function () { return []; };
-ChatMessageComponent.propDecorators = {
-    message: [{ type: Input }],
-    alignRight: [{ type: Input }],
-    username: [{ type: Input }],
-    color: [{ type: Input }],
-    timestamp: [{ type: Input }],
-    image: [{ type: Input }],
-    fallbackImage: [{ type: Input }]
-};
-var DispositionComponent = /** @class */ (function () {
-    function DispositionComponent() {
-        this.selectedDisposition = new EventEmitter();
-    }
-    DispositionComponent.prototype.ngOnInit = function () {
-    };
-    DispositionComponent.prototype.submitDisposition = function () {
-        this.selectedDisposition.emit({ 'dispositionid': this.selectedDispositionValue,
-            dispositionName: this.disposition.get(this.selectedDispositionValue) });
-    };
-    return DispositionComponent;
-}());
-DispositionComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-disposition',
-                template: "<div class=\"reasonCodeModalFrame\">\n    <div>\n        <div>\n            <label class=\"reasonCodeLabelStyle\">{{dispositionHeader}}</label>\n            <br />\n            <hr />\n        </div>\n        <ng-container *ngFor=\"let disp of disposition\">\n            <div>\n              <input [required]=\"!selectedDispositionValue\" type=\"radio\" name=\"disposition_name\" value=\"{{disp.key}}\" [(ngModel)]=\"selectedDispositionValue\"/>\n              <label class=\"reasonCodeLabelStyle\">{{disp.value}}</label>\n            </div>\n        </ng-container>\n        <p>\n            <input type=\"image\" src=\"https://engage.contactcanvas.com/MSCRMToolbar/Images/voice_check_normal.png\" title=\"Submit Call Result\"\n            (click)=\"submitDisposition()\" style='float:right; margin-right:20px; margin-bottom:10px; width:20px; height:20px' />\n        </p>\n    </div>\n</div>\n",
-                styles: [".reasonCodeModalFrame{background-color:#eef6ff;clear:none;border-radius:10px;margin:0;padding:0;white-space:nowrap;overflow:hidden!important}.reasonCodeLabelStyle{font-size:.95em!important;color:#000!important;font-family:Arial!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;width:90%;text-align:left;display:inline-block;vertical-align:middle}"]
-            },] },
-];
-DispositionComponent.ctorParameters = function () { return []; };
-DispositionComponent.propDecorators = {
-    dispositionHeader: [{ type: Input }],
-    disposition: [{ type: Input }],
-    selectedDisposition: [{ type: Output }]
-};
-var ActivityComponent = /** @class */ (function () {
-    function ActivityComponent() {
-        this.ActivitySave = new EventEmitter();
-        this.OnNameSelectChange = new EventEmitter();
-        this.OnRelatedToChange = new EventEmitter();
-        this.OnSubjectChange = new EventEmitter();
-        this.OnCallNotesChange = new EventEmitter();
-        this.OnQuickCommentPress = new EventEmitter();
-        this.title = 'Activity Information';
-    }
-    ActivityComponent.prototype.onNameSelectChange = function (event) {
-        if (event.currentTarget.value !== '-1') {
-            this.activity.who = this.activity.whoList.find((function (who) { return who.entityId === event.currentTarget.value; }));
-            this.OnNameSelectChange.emit(this.activity);
-        }
-        else {
-            this.activity.who = null;
-            this.OnNameSelectChange.emit(this.activity);
-        }
-    };
-    ActivityComponent.prototype.parseWho = function (who) {
-        return who.entityType + ': ' + who.entityName;
-    };
-    ActivityComponent.prototype.parseWhat = function (what) {
-        return what.entityType + ': ' + what.entityName;
-    };
-    ActivityComponent.prototype.onRelatedToChange = function (event) {
-        if (event.currentTarget.value !== '-1') {
-            this.activity.what = this.activity.whatList.find((function (what) { return what.entityId === event.currentTarget.value; }));
-            this.OnRelatedToChange.emit(this.activity);
-        }
-        else {
-            this.activity.what = null;
-            this.OnRelatedToChange.emit(this.activity);
-        }
-    };
-    ActivityComponent.prototype.onSubjectChange = function (event) {
-        this.activity.subject = event.srcElement.value;
-        this.OnSubjectChange.emit(this.activity);
-    };
-    ActivityComponent.prototype.onCallNotesChange = function (event) {
-        this.activity.description = event.currentTarget.value;
-        this.OnCallNotesChange.emit(this.activity);
-    };
-    ActivityComponent.prototype.loadQuickComment = function (value) {
-        if (this.activity.description) {
-            this.activity.description = this.activity.description + '\n' + this.activity.quickCommentList[value];
-        }
-        else {
-            this.activity.description = this.activity.quickCommentList[value];
-        }
-        this.OnQuickCommentPress.emit(this.activity.quickCommentList[value]);
-    };
-    ActivityComponent.prototype.activitySave = function () {
-        this.ActivitySave.emit(this.activity);
-    };
-    return ActivityComponent;
-}());
-ActivityComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-activity',
-                template: "<app-amc-collapsible-container>\n  <div role=headerExpand>\n    <label class=\"headerLabel\">\n      <b>Activity Information</b>\n    </label>\n  </div>\n\n  <div role=headerCollapse>\n    <label class=\"headerLabel\">\n      <b>Activity Information</b>\n    </label>\n  </div>\n\n  <div role=\"body\">\n    <div class=\"activityFields\">\n      <form>\n        <div class=\"editor displayDiv\">\n          <label class=\"displayLabels\" title=\"Call From\">{{activity.nameFieldName}}</label>\n          <select class=\"dropDownListStyle displayData\" data-resetperactivity=\"false\" (change)=\"onNameSelectChange($event)\">\n            <option *ngFor=\"let who of activity.whoList; let i = index\" value=\"{{who.entityId}}\" [selected]=\"i===0\">{{parseWho(who)}}</option>\n            <option value=\"-1\"></option>\n          </select>\n        </div>\n        <div class=\"editor displayDiv\">\n          <label class=\"displayLabels\" title=\"Related To\">{{activity.relatedToFieldName}}</label>\n          <select class=\"dropDownListStyle displayData\" (change)=\"onRelatedToChange($event)\" data-resetperactivity=\"false\">\n            <option *ngFor=\"let what of activity.whatList; let i = index\" value=\"{{what.entityId}}\" [selected]=\"i===0\">{{parseWhat(what)}}</option>\n            <option value=\"-1\"></option>\n          </select>\n        </div>\n        <div class=\"editor displayDiv\">\n          <label class=\"displayLabels\" title=\"Subject\">{{activity.subjectFieldName}}</label>\n          <input class=\"activitySubjectTextBoxStyle displayData\" (change)=\"onSubjectChange($event)\" title=\"{{activity.subject}}\"\n            type=\"text\" value=\"{{activity.subject}}\">\n        </div>\n        <div class=\"editor displayDiv\">\n          <div class=\"callNotesSection\">\n            <div class=\"textAreaDiv\">\n              <textarea value=\"{{activity.description}}\" placeholder=\"Click to add a comment\" class=\"activityCommentsTextBoxStyle\"\n                (change)=\"onCallNotesChange($event)\" cols=\"20\" rows=\"2\" title=\"\"></textarea>\n            </div>\n            <div class=\"notesButtonBorder\">\n              <div class=\"commentsButtonDiv\">\n                <div class=\"quickCommentsDiv\">\n                  <input *ngFor=\"let quickComment of activity.quickCommentList ; let i = index;\" class=\"quickNotesButton\" type=\"button\"\n                    value=\"{{i+1}}\" (click)=\"loadQuickComment(i)\" title=\"{{quickComment}}\">\n                </div>\n                <div class=\"submitDiv\">\n                  <input class=\"submitButton\" type=\"button\" value=\"Save\" (click)=\"activitySave()\">\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </form>\n    </div>\n  </div>\n</app-amc-collapsible-container>\n",
-                styles: [".submitDiv{text-align:right;padding-right:4px}.callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.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}.quickNotesButton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:30px;margin:2px;outline:0;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:0;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}.callBody{border:1px solid #939598;border-top:1px solid #939598;position:relative}.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}.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:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;margin:0 5px 0 0;padding-left:2px}.activityCommentsTextBoxStyle{border:none;color:#333!important;text-align:left!important;margin:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;resize:none;width:100%;height:95px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.displayLabels{margin-left:5px;width:25%;margin-right:2px;color:#333}.displayData{width:70%}.commentsButtonDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#f6f7fb}.quickCommentsDiv{text-align:left;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex;margin:2px}.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}.headerLabel{color:#333;margin-left:10px}input[type=button]:disabled{background-color:#d3d3d3;cursor:auto}.activityFields{position:relative;z-index:0}.textAreaDiv{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}"]
-            },] },
-];
-ActivityComponent.ctorParameters = function () { return []; };
-ActivityComponent.propDecorators = {
-    activity: [{ type: Input }],
-    ActivitySave: [{ type: Output }],
-    OnNameSelectChange: [{ type: Output }],
-    OnRelatedToChange: [{ type: Output }],
-    OnSubjectChange: [{ type: Output }],
-    OnCallNotesChange: [{ type: Output }],
-    OnQuickCommentPress: [{ type: Output }]
-};
-var CallerInformationComponent = /** @class */ (function () {
-    function CallerInformationComponent() {
-        this.agentSelectedCallerInformation = new EventEmitter();
-        this.maximizeCallerInformation = true;
-        this.showAllCallers = false;
-        this.title = 'Caller Information';
-    }
-    CallerInformationComponent.prototype.ngOnChanges = function () {
-        this.showAllCallers = false;
-    };
-    CallerInformationComponent.prototype.expandCallerInfoResults = function () {
-        this.showAllCallers = true;
-    };
-    CallerInformationComponent.prototype.collapseCallerInfoResults = function () {
-        this.showAllCallers = false;
-    };
-    CallerInformationComponent.prototype.onAgentSelectedCallerInformation = function (i) {
-        this.agentSelectedCallerInformation.emit(i);
-    };
-    return CallerInformationComponent;
-}());
-CallerInformationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-caller-information',
-                template: "<app-amc-collapsible-container>\n  <div role=\"headerExpand\">\n    <label class=\"headerLabel\">\n      <b>Caller Information</b>\n    </label>\n    <img title=\"Multiple Matches Available\" *ngIf=\"callers.length > 1\" src=\"../../assets/images/MultiMatchAlert.png\" class=\"multiMatchImg\"  />\n  </div>\n\n  <div role=\"headerCollapse\">\n    <label class=\"headerLabel\">\n      <b>Caller Information</b>\n    </label>\n    <img title=\"Multiple Matches Available\" *ngIf=\"callers.length > 1\" src=\"../../assets/images/MultiMatchAlert.png\" class=\"multiMatchImg\"  />\n  </div>\n\n  <div role=\"body\">\n    <div *ngIf=\"this.callers.length > 1\">\n      <span class=\"overflowWrapper\">\n        <img class=\"CRMResultImageMultiMatch\" src=\"{{ callers[0].imgUrl }}\"/>\n        <input id=\"{{ this.callers[0].entityId }}\" name=\"{{ this.callers[0].entityName }}\" (click)=\"onAgentSelectedCallerInformation(this.callers[0])\" readonly\n        class=\"multiMatchLabel\" title=\"{{ this.callers[0].entityName }}\" type=\"{{ callers[0].entityType }}\" value=\"{{ this.callers[0].entityName }}\"/>\n        <span class=\"positioning\">\n          <img *ngIf=\"!this.showAllCallers\" class=\"CRMExpandImage\" src=\"../../assets/images/down-arrow.png\" (click)=\"expandCallerInfoResults()\"/>\n          <img *ngIf=\"this.showAllCallers\" class=\"CRMExpandImage\" src=\"../../assets/images/up-arrow.png\" (click)=\"collapseCallerInfoResults()\"/>\n        </span>\n      </span>\n      <div *ngIf=\"this.showAllCallers\">\n        <div *ngFor=\"let i of this.callers | slice: 1; let index = index\">\n          <span\n            class=\"overflowWrapper\"\n          >\n          <img class=\"CRMResultImageMultiMatch\" src=\"{{ i.imgUrl }}\"/>\n            <input id=\"{{ i.entityId }}\" name=\"{{ i.entityName }}\" readonly class=\" multiMatchLabel\" (click)=\"onAgentSelectedCallerInformation(i)\"\n              title=\"{{ i.entityName }}\" type=\"text\" value=\"{{ i.entityName }}\"/>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"callers.length === 1\">\n      <div class=\"editorFull displayDiv\" *ngFor=\"let i of this.callers | slice: 0:1; let index = index; let first = first\">\n        <span class=\"overflowWrapper\">\n          <img class=\"CRMResultImageMultiMatch\" src=\"{{ i.imgUrl }}\"/>\n            <input class=\"singleSearchResultSelect singleMatchFirstWrapper\" id=\"{{ i.entityId }}\" [class.firstSingleMatchResult]=\"first\"\n              value=\"{{ i.entityName }}\" title=\"{{ i.entityName }}\" (click)=\"onAgentSelectedCallerInformation(i)\" readonly/>\n        </span>\n      </div>\n      <div class=\"editorFull displayDiv\" *ngFor=\"let i of this.callers | slice: 1; let index = index; let first = first\">\n        <span class=\"overflowWrapper\">\n          <label title=\"{{ i.entityName }}\" class=\"displayLabelsTabbed\">{{ i.entityName }}</label>\n            <input class=\"singleSearchResultSelect singleMatchTabbedItemsWrapper singleMatchLabel\" id=\"{{ i.entityId }}\" value=\"{{ i.entityName }}\" title=\"{{ i.entityName }}\" readonly />\n          </span>\n        </div>\n    </div>\n  </div>\n</app-amc-collapsible-container>\n",
-                styles: [".callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;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}.CRMResultImageMultiMatch{width:18px;height:18px;margin-right:2px;margin-left:5px;margin-top:-5px}.CRMExpandImage{width:6px;height:6px;cursor:pointer;margin-bottom:2px}.callBody{border:1px solid #939598;border-top:1px solid #939598;position:relative;padding-bottom:1px}.callDisplay{margin-bottom:8px;display:grid;background-color:#fff;display:grid}.overflowWrapper{width:100%;overflow-x:hidden;overflow-y:hidden}.singleSearchResultSelect{border:0 solid #939598!important;height:30px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0;outline:0}.singleMatchFirstWrapper{cursor:pointer;border:0;outline:0;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(100% - 30px)}.singleMatchTabbedItemsWrapper{width:70%}.displayLabelsTabbed{margin-left:5px;width:35%;font-weight:400;margin-bottom:0;margin-top:0;outline:0;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}.firstSingleMatchResult{font-weight:700;border:0 solid #939598!important;height:30px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0 0 5px;outline:0}.multiMatchLabel{border:0;cursor:pointer;outline:0;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(95% - 45px)}.singleMatchLabel{border:0;outline:0;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(65% - 13px)}.positioning{float:right;margin-right:4%}"]
-            },] },
-];
-CallerInformationComponent.ctorParameters = function () { return []; };
-CallerInformationComponent.propDecorators = {
-    callers: [{ type: Input }],
-    agentSelectedCallerInformation: [{ type: Output }]
-};
-var RecentActivitiesComponent = /** @class */ (function () {
-    function RecentActivitiesComponent() {
-        this.SubjectChange = new EventEmitter();
-        this.NameChange = new EventEmitter();
-        this.RelatedToChange = new EventEmitter();
-        this.CallNotesChange = new EventEmitter();
-        this.QuickCommentChange = new EventEmitter();
-        this.SaveActivity = new EventEmitter();
-        this.collapseToggle = true;
-        this.workingRecentInteractionId = null;
-        this.isActivityMaximized = true;
-    }
-    RecentActivitiesComponent.prototype.expandAndCollapse = function (isExpand) {
-        this.collapseToggle = isExpand;
-    };
-    RecentActivitiesComponent.prototype.expandAndCollapseRecentActivity = function (isExpand, interactionId) {
-        return (isExpand ? this.workingRecentInteractionId = interactionId : this.workingRecentInteractionId = null);
-    };
-    RecentActivitiesComponent.prototype.getIndexWho = function (interactionId) {
-        var _this = this;
-        var index = this.savedInteractions.get(interactionId).whoList.findIndex((function (item) { return item.entityId === _this.savedInteractions.get(interactionId).who.entityId; }));
-        return index;
-    };
-    RecentActivitiesComponent.prototype.getIndexWhat = function (interactionId) {
-        var _this = this;
-        var index = this.savedInteractions.get(interactionId).whatList.findIndex((function (item) { return item.entityId === _this.savedInteractions.get(interactionId).what.entityId; }));
-        return index;
-    };
-    RecentActivitiesComponent.prototype.onSubjectChange = function (interactionId) {
-        this.SubjectChange.emit({
-            interactionId: interactionId,
-            Subject: this.savedInteractions.get(interactionId).subject
-        });
-    };
-    RecentActivitiesComponent.prototype.onNameChange = function (event, interactionId) {
-        if (event.currentTarget.value === '-1') {
-            this.NameChange.emit({
-                interactionId: interactionId,
-                whoObject: null
-            });
-        }
-        else {
-            this.NameChange.emit({
-                interactionId: interactionId,
-                whoObject: this.savedInteractions.get(interactionId).whoList[event.target.value]
-            });
-        }
-    };
-    RecentActivitiesComponent.prototype.onRelatedToChange = function (event, interactionId) {
-        if (event.currentTarget.value === '-1') {
-            this.RelatedToChange.emit({
-                interactionId: interactionId,
-                whatObject: null
-            });
-        }
-        else {
-            this.RelatedToChange.emit({
-                interactionId: interactionId,
-                whatObject: this.savedInteractions.get(interactionId).whatList[event.target.value]
-            });
-        }
-    };
-    RecentActivitiesComponent.prototype.onCallNotesChange = function (interactionId) {
-        this.CallNotesChange.emit({
-            interactionId: interactionId,
-            Description: this.savedInteractions.get(interactionId).description
-        });
-    };
-    RecentActivitiesComponent.prototype.loadQuickComment = function (commentIndex, interactionId) {
-        this.QuickCommentChange.emit({
-            interactionId: interactionId,
-            commentIndex: commentIndex
-        });
-    };
-    RecentActivitiesComponent.prototype.submitActivity = function (interactionId) {
-        this.SaveActivity.emit({
-            interactionId: interactionId,
-        });
-    };
-    RecentActivitiesComponent.prototype.parseWho = function (who) {
-        return ((who.entityType) ? who.entityType : 'Entity') + ': ' + who.entityName;
-    };
-    RecentActivitiesComponent.prototype.parseWhat = function (what) {
-        return ((what.entityType) ? what.entityType : 'Entity') + ': ' + what.entityName;
-    };
-    return RecentActivitiesComponent;
-}());
-RecentActivitiesComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-recent-activities',
-                template: "<app-amc-collapsible-container>\n  <div role=\"headerExpand\">\n      <label class=\"headerLabel\">\n        <b>Recent Activities</b>\n      </label>\n  </div>\n  <div role=\"body\">\n    <div class=\"callBodyBorderless\">\n      <div *ngFor=\"let interaction of interactionIds; let last = last\">\n        <div *ngIf=\"this.workingRecentInteractionId === interaction\">\n          <div (click)=\"expandAndCollapseRecentActivity(false, interaction)\" class=\"editor callHeaderRecentActivitySelected\">\n            <label class=\"headerLabelClickableLook\">\n              <img src=\"/assets/images/Phone_Number_Icon.png\" class=\"RecentCallsImg\"/>\n              <b>{{ savedInteractions.get(interaction).subject }}</b>\n            </label>\n          </div>\n          <div class=\"recentBody\">\n            <div class=\"activityFields\">\n              <form>\n                <div class=\"editor displayDiv\">\n                  <label class=\"displayLabels\" title=\"Subject\">Subject</label>\n                  <input class=\"activitySubjectTextBoxStyle displayData\" type=\"text\" value=\"{{ savedInteractions.get(interaction) }}\" (change)=\"onSubjectChange(interaction)\"\n                  (keyup)=\"onSubjectChange(interaction)\" name=\"subject\" [(ngModel)]=\"savedInteractions.get(interaction).subject\" />\n                </div>\n                <div class=\"editor displayDiv\">\n                  <label class=\"displayLabels\" title=\"Name\">Name</label>\n                  <select class=\"dropDownListStyle displayData\" (change)=\"onNameChange($event, interaction)\" name=\"whoItem\">\n                    <option *ngFor=\"let whoItem of savedInteractions.get(interaction).whoList; let i = index\" value=\"{{i}}\" [selected]=\"i===getIndexWho(interaction)\">{{ parseWho(whoItem) }}</option>\n                    <option value=\"-1\"></option>\n                  </select>\n                </div>\n                <div class=\"editor displayDiv\">\n                  <label class=\"displayLabels\" title=\"Regarding\">Related To</label>\n                  <select class=\"dropDownListStyle displayData\" (change)=\"onRelatedToChange($event, interaction)\" name=\"whatItem\">\n                    <option *ngFor=\"let whatItem of savedInteractions.get(interaction).whatList; let i = index\" value={{i}} [selected]=\"i===getIndexWhat(interaction)\">{{ parseWhat(whatItem) }}</option>\n                    <option value=\"-1\"></option>\n                  </select>\n                </div>\n                <div class=\"editor displayDiv\">\n                  <div class=\"callNotesSection\">\n                    <div class=\"callNotesTextArea\">\n                      <textarea placeholder=\"Click to add a comment\" (change)=\"onCallNotesChange(interaction)\" class=\"activityCommentsTextBoxStyle\" value=\"{{ savedInteractions.get(interaction) }}\"\n                      (keyup)=\"onCallNotesChange(interaction)\" name=\"description\"  [(ngModel)]=\"savedInteractions.get(interaction).description\" rows=\"5\" title=\"\">\n                      </textarea>\n                    </div>\n                    <div class=\"notesButtonBorder\">\n                      <div class=\"commentsButtonDiv\">\n                        <div class=\"quickCommentsDiv\">\n                          <input *ngFor=\"let quickComment of savedInteractions.get(interaction).quickCommentList; let i = index;\" class=\"quickNotesButton\" type=\"button\"\n                            value=\"{{i+1}}\" (click)=\"loadQuickComment(i, interaction)\" title=\"{{quickComment}}\">\n                        </div>\n                        <div class=\"callNotesButtonsSection\">\n                          <input class=\"submitButton\" type=\"button\" value=\"Save\" (click)=\"submitActivity(interaction)\"/>\n                        </div>\n                      </div>\n                     </div>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!(this.workingRecentInteractionId === interaction)\">\n          <div [class.callHeaderBottomBorder]='last' (click)=\"expandAndCollapseRecentActivity(true, interaction)\" class=\"editor callHeaderRecentActivityUnselected\">\n            <label class=\"headerLabelClickableLook\">\n              <img src=\"/assets/images/Phone_Number_Icon.png\" class=\"RecentCallsImg\"/>\n              <b>{{ savedInteractions.get(interaction).subject }}</b>\n            </label>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div role=\"headerCollapse\">\n      <label class=\"headerLabel\">\n        <b>Recent Activities</b>\n      </label>\n  </div>\n</app-amc-collapsible-container>\n",
-                styles: [".callSection{margin-left:0;font-family:Arial;position:relative;margin-top:5px;background-color:#fff}.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}.quickCommentsDiv{text-align:left;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex;margin:2px}.quickNotesButton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:30px;margin:2px;outline:0;font-size:70%}.submitButton{border:0;float:right;margin-top:2px;outline:0;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}.commentsButtonDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#f6f7fb}.callNotesButtonsSection{text-align:right;padding-right:4px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.recentBody{border:1px solid #939598;border-top:1px solid #fff;position:relative}.callBodyBorderless{position:relative}.callDisplay{margin-bottom:8px;background-color:#fff}.editor{font-size:.9em;width:70%;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:5px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.dropDownListStyle{border:1px solid #939598!important;border-radius:3px!important;width:70%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 5px 0 0;cursor:pointer}.activitySubjectTextBoxStyle{border:1px solid #939598!important;border-radius:3px!important;width:70%!important;height:20px!important;text-align:left!important;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-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:-webkit-box;display:-ms-flexbox;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}.headerLabelClickableLook{cursor:pointer;display:inline-block;margin-left:10px;max-width:80%;overflow:hidden;text-overflow:ellipsis}input[type=button]:disabled{background-color:#d3d3d3;cursor:auto}"]
-            },] },
-];
-RecentActivitiesComponent.ctorParameters = function () { return []; };
-RecentActivitiesComponent.propDecorators = {
-    savedInteractions: [{ type: Input }],
-    interactionIds: [{ type: Input }],
-    SubjectChange: [{ type: Output }],
-    NameChange: [{ type: Output }],
-    RelatedToChange: [{ type: Output }],
-    CallNotesChange: [{ type: Output }],
-    QuickCommentChange: [{ type: Output }],
-    SaveActivity: [{ type: Output }]
-};
-var AmcCollapsibleContainerComponent = /** @class */ (function () {
-    function AmcCollapsibleContainerComponent() {
-        this.isActivityMaximized = true;
-    }
-    AmcCollapsibleContainerComponent.prototype.ngOnInit = function () {
-    };
-    return AmcCollapsibleContainerComponent;
-}());
-AmcCollapsibleContainerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-amc-collapsible-container',
-                template: "<div *ngIf=\"isActivityMaximized\" class=\"callDisplay\">\n  <div class=\"editor callHeader\">\n    <img class=\"ViewResizeImage\" src=\"/assets/images/section_collapse.png\" (click)=\"isActivityMaximized = false\" title=\"Collapse\">\n    <ng-content select=\"div[role=headerExpand]\"></ng-content>\n  </div>\n  <div class=\"callBody\">\n    <ng-content select=\"div[role=body]\"></ng-content>\n  </div>\n</div>\n\n<div *ngIf=\"!isActivityMaximized\" class=\"callDisplay\">\n  <div class=\"editor callHeader\">\n    <img class=\"ViewResizeImage\" src=\"assets/images/section_expand.png\" (click)=\"isActivityMaximized = true\" title=\"Expand\">\n    <ng-content select=\"div[role=headerCollapse]\"></ng-content>\n  </div>\n</div>\n",
-                styles: [".callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.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}.headerLabel{color:#333;margin-left:10px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.callBody{border:1px solid #939598;border-top:1px solid #939598;position:relative}"]
-            },] },
-];
-AmcCollapsibleContainerComponent.ctorParameters = function () { return []; };
-var UILibraryModule = /** @class */ (function () {
-    function UILibraryModule(injector) {
-        this.injector = injector;
-    }
-    UILibraryModule.prototype.ngDoBootstrap = function (app) {
-        if (!customElements.get('amc-webcomponents-scenario')) {
-            var strategyFactory = new ElementZoneStrategyFactory(ScenarioComponent, this.injector);
-            customElements.define('amc-webcomponents-scenario', createCustomElement(ScenarioComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-        if (!customElements.get('amc-webcomponents-activity')) {
-            var strategyFactory = new ElementZoneStrategyFactory(ActivityComponent, this.injector);
-            customElements.define('amc-webcomponents-activity', createCustomElement(ActivityComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-        if (!customElements.get('amc-webcomponents-callerinfo')) {
-            var strategyFactory = new ElementZoneStrategyFactory(CallerInformationComponent, this.injector);
-            customElements.define('amc-webcomponents-callerinfo', createCustomElement(CallerInformationComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-        if (!customElements.get('amc-webcomponents-recentactivity')) {
-            var strategyFactory = new ElementZoneStrategyFactory(RecentActivitiesComponent, this.injector);
-            customElements.define('amc-webcomponents-recentactivity', createCustomElement(RecentActivitiesComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-        if (!customElements.get('amc-webcomponents-disposition')) {
-            var strategyFactory = new ElementZoneStrategyFactory(DispositionComponent, this.injector);
-            customElements.define('amc-webcomponents-disposition', createCustomElement(DispositionComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-    };
-    return UILibraryModule;
-}());
-UILibraryModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [BrowserModule, CommonModule, FormsModule],
-                declarations: [
-                    InteractionComponent,
-                    ScenarioComponent,
-                    OperationComponent,
-                    PropertyComponent,
-                    HoldtimerComponent,
-                    DurationComponent,
-                    ChatBoxComponent,
-                    ChatMessageComponent,
-                    DispositionComponent,
-                    ActivityComponent,
-                    CallerInformationComponent,
-                    RecentActivitiesComponent,
-                    AmcCollapsibleContainerComponent
-                ],
-                entryComponents: [ScenarioComponent, ActivityComponent, CallerInformationComponent, RecentActivitiesComponent],
-                bootstrap: [],
-                exports: [ScenarioComponent, ActivityComponent, CallerInformationComponent, RecentActivitiesComponent]
-            },] },
-];
-UILibraryModule.ctorParameters = function () { return [
-    { type: Injector }
-]; };
-
-export { UILibraryModule, Property, ValueType, IChatMessageType, ActivityComponent as ɵj, AmcCollapsibleContainerComponent as ɵm, CallerInformationComponent as ɵk, ChatBoxComponent as ɵg, ChatMessageComponent as ɵh, DispositionComponent as ɵi, DurationComponent as ɵf, HoldtimerComponent as ɵe, InteractionComponent as ɵa, OperationComponent as ɵc, PropertyComponent as ɵd, RecentActivitiesComponent as ɵl, ScenarioComponent as ɵb };
-//# sourceMappingURL=amc-technology-ui-library.js.map
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public_api';
+export { ActivityComponent as ɵj } from './projects/UILibrary/src/app/components/activity/activity.component';
+export { ChatBoxComponent as ɵg } from './projects/UILibrary/src/app/components/chat-box/chat-box.component';
+export { ChatMessageComponent as ɵh } from './projects/UILibrary/src/app/components/chat-message/chat-message.component';
+export { DispositionComponent as ɵi } from './projects/UILibrary/src/app/components/disposition/disposition.component';
+export { DurationComponent as ɵf } from './projects/UILibrary/src/app/components/duration/duration.component';
+export { HoldtimerComponent as ɵe } from './projects/UILibrary/src/app/components/holdtimer/holdtimer.component';
+export { InteractionComponent as ɵa } from './projects/UILibrary/src/app/components/interaction/interaction.component';
+export { LoginComponent as ɵk } from './projects/UILibrary/src/app/components/login/login.component';
+export { OperationComponent as ɵc } from './projects/UILibrary/src/app/components/operation/operation.component';
+export { PropertyComponent as ɵd } from './projects/UILibrary/src/app/components/property/property.component';
+export { ScenarioComponent as ɵb } from './projects/UILibrary/src/app/components/scenario/scenario.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW1jLXRlY2hub2xvZ3ktdWktbGlicmFyeS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BhbWMtdGVjaG5vbG9neS91aS1saWJyYXJ5LyIsInNvdXJjZXMiOlsiYW1jLXRlY2hub2xvZ3ktdWktbGlicmFyeS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDO0FBRTdCLE9BQU8sRUFBQyxpQkFBaUIsSUFBSSxFQUFFLEVBQUMsTUFBTSxxRUFBcUUsQ0FBQztBQUM1RyxPQUFPLEVBQUMsZ0JBQWdCLElBQUksRUFBRSxFQUFDLE1BQU0scUVBQXFFLENBQUM7QUFDM0csT0FBTyxFQUFDLG9CQUFvQixJQUFJLEVBQUUsRUFBQyxNQUFNLDZFQUE2RSxDQUFDO0FBQ3ZILE9BQU8sRUFBQyxvQkFBb0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwyRUFBMkUsQ0FBQztBQUNySCxPQUFPLEVBQUMsaUJBQWlCLElBQUksRUFBRSxFQUFDLE1BQU0scUVBQXFFLENBQUM7QUFDNUcsT0FBTyxFQUFDLGtCQUFrQixJQUFJLEVBQUUsRUFBQyxNQUFNLHVFQUF1RSxDQUFDO0FBQy9HLE9BQU8sRUFBQyxvQkFBb0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwyRUFBMkUsQ0FBQztBQUNySCxPQUFPLEVBQUMsY0FBYyxJQUFJLEVBQUUsRUFBQyxNQUFNLCtEQUErRCxDQUFDO0FBQ25HLE9BQU8sRUFBQyxrQkFBa0IsSUFBSSxFQUFFLEVBQUMsTUFBTSx1RUFBdUUsQ0FBQztBQUMvRyxPQUFPLEVBQUMsaUJBQWlCLElBQUksRUFBRSxFQUFDLE1BQU0scUVBQXFFLENBQUM7QUFDNUcsT0FBTyxFQUFDLGlCQUFpQixJQUFJLEVBQUUsRUFBQyxNQUFNLHFFQUFxRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpY19hcGknO1xuXG5leHBvcnQge0FjdGl2aXR5Q29tcG9uZW50IGFzIMm1an0gZnJvbSAnLi9wcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2FjdGl2aXR5L2FjdGl2aXR5LmNvbXBvbmVudCc7XG5leHBvcnQge0NoYXRCb3hDb21wb25lbnQgYXMgybVnfSBmcm9tICcuL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL2NvbXBvbmVudHMvY2hhdC1ib3gvY2hhdC1ib3guY29tcG9uZW50JztcbmV4cG9ydCB7Q2hhdE1lc3NhZ2VDb21wb25lbnQgYXMgybVofSBmcm9tICcuL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL2NvbXBvbmVudHMvY2hhdC1tZXNzYWdlL2NoYXQtbWVzc2FnZS5jb21wb25lbnQnO1xuZXhwb3J0IHtEaXNwb3NpdGlvbkNvbXBvbmVudCBhcyDJtWl9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9kaXNwb3NpdGlvbi9kaXNwb3NpdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0IHtEdXJhdGlvbkNvbXBvbmVudCBhcyDJtWZ9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9kdXJhdGlvbi9kdXJhdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0IHtIb2xkdGltZXJDb21wb25lbnQgYXMgybVlfSBmcm9tICcuL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL2NvbXBvbmVudHMvaG9sZHRpbWVyL2hvbGR0aW1lci5jb21wb25lbnQnO1xuZXhwb3J0IHtJbnRlcmFjdGlvbkNvbXBvbmVudCBhcyDJtWF9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9pbnRlcmFjdGlvbi9pbnRlcmFjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0IHtMb2dpbkNvbXBvbmVudCBhcyDJtWt9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9sb2dpbi9sb2dpbi5jb21wb25lbnQnO1xuZXhwb3J0IHtPcGVyYXRpb25Db21wb25lbnQgYXMgybVjfSBmcm9tICcuL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL2NvbXBvbmVudHMvb3BlcmF0aW9uL29wZXJhdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0IHtQcm9wZXJ0eUNvbXBvbmVudCBhcyDJtWR9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9wcm9wZXJ0eS9wcm9wZXJ0eS5jb21wb25lbnQnO1xuZXhwb3J0IHtTY2VuYXJpb0NvbXBvbmVudCBhcyDJtWJ9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9zY2VuYXJpby9zY2VuYXJpby5jb21wb25lbnQnOyJdfQ==