@amc-technology/ui-library 1.0.28 → 1.0.33

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

@@ -1,1579 +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';
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @ignore
- */
-class InteractionComponent {
-    /**
-     * @ignore
-     */
-    constructor() {
-        this.minimizedChanged = new EventEmitter();
-        this.isAgentTyping = new EventEmitter();
-        this.newMessage = new EventEmitter();
-        this._minimized = false;
-    }
-    /**
-     * @param {?} value
-     * @return {?}
-     */
-    set _minimized(value) {
-        this.minimized = value;
-        this.minimizedChanged.emit(value);
-    }
-    /**
-     * @return {?}
-     */
-    get _minimized() {
-        return this.minimized;
-    }
-    /**
-     * @ignore
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-    /**
-     * @ignore
-     * @return {?}
-     */
-    minimize() {
-        this._minimized = true;
-    }
-    /**
-     * @ignore
-     * @return {?}
-     */
-    maximize() {
-        this._minimized = false;
-    }
-    /**
-     * @ignore
-     * @return {?}
-     */
-    isConferenceCall() {
-        if (this.interaction.parties && this.interaction.parties.length > 1) {
-            return true;
-        }
-        return false;
-    }
-}
-InteractionComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-interaction',
-                template: `<div class="AnswerCallFocused">
-  <div class="editor callHeaderTop">
-    <img class="statusImage" [src]="interaction.UIHeadersData.statusUrl" (click)="interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)" />
-    <label class="statusText">
-      <b>{{interaction.UIHeadersData.statusText}}</b>
-    </label>
-    <label class="verticalDivider">|</label>
-    <label class="directionText" *ngIf="!interaction.UIHeadersData.displayHoldCounter">{{interaction.UIHeadersData.directionText}}</label>
-    <div class="holdCallDurationDiv" *ngIf="interaction.UIHeadersData.displayHoldCounter">
-      <amc-holdtimer [holdCounterData]="interaction.UIHeadersData.holdCounterData"></amc-holdtimer>
-    </div>
-    <img class="ViewExpandImage" [src]="interaction.UIHeadersData.minimizeUrl" (click)="minimize()" *ngIf="!_minimized" />
-    <img class="ViewCollapseImage" [src]="interaction.UIHeadersData.maximizeUrl" (click)="maximize()" *ngIf="_minimized" />
-    <div class="DurationDiv" *ngIf="interaction.displayCallTimer">
-      <amc-duration [startTime]="interaction.startTime"></amc-duration>
-    </div>
-  </div>
-
-  <div *ngIf="!_minimized">
-
-    <div *ngIf="!isConferenceCall()">
-      <div class="editor container">
-        <input class="callImage" type="image" [src]="interaction.subheaderData.image.href" [title]="interaction.subheaderData.tooltip || ''">
-        <input class="editor phoneNumberValue" readonly type="text" [value]="interaction.subheaderData.value">
-      </div>
-
-      <div class="cadSection">
-        <ng-container *ngFor="let property of interaction.properties">
-          <ng-container *ngIf="property.visible">
-            <label class="col1" [title]="property.displayKey">{{property.displayKey}}</label>
-            <amc-property class="col2" [property]="property"> </amc-property>
-          </ng-container>
-        </ng-container>
-
-        <ng-container *ngFor="let property of interaction.associatedData">
-          <ng-container *ngIf="property.visible">
-            <div class="editor displayDiv">
-              <label class="displayLabels" [title]="property.displayKey">{{property.displayKey}}</label>
-              <amc-property class="col2" [property]="property"> </amc-property>
-            </div>
-          </ng-container>
-        </ng-container>
-      </div>
-
-      <app-chat-box *ngIf="interaction.chat" [isTyping]="interaction.chat.isCustomerTyping" [settings]="interaction.chat.settings"
-        [messages]="interaction.chat.messages" (isAgentTyping)="isAgentTyping.emit($event)" (newMessage)="newMessage.emit($event)"></app-chat-box>
-
-      <div [id]='interaction.interactionId'> </div>
-      <amc-operation [operations]="interaction.operations"></amc-operation>
-    </div>
-
-    <div *ngIf="isConferenceCall()">
-      <div *ngFor="let party of interaction.parties">
-        <div class="editor container">
-          <input class="callImage" type="image" [src]="party.header.image.href" [title]="party.header.tooltip || ''">
-          <input class="editor phoneNumberValue" readonly type="text" [value]="party.header.value">
-        </div>
-
-        <div class="grid-container">
-          <ng-container *ngFor="let property of party.properties">
-            <ng-container *ngIf="property.visible">
-              <label class="col1" [title]="property.displayKey">{{property.displayKey}}</label>
-              <amc-property class="col2" [property]="property"> </amc-property>
-            </ng-container>
-          </ng-container>
-        </div>
-        <amc-operation [operations]="party.operations"></amc-operation>
-        <div class="AnswerCallFocused"></div>
-      </div>
-      <amc-operation [operations]="interaction.operations"></amc-operation>
-    </div>
-
-  </div>
-</div>
-`,
-                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}`]
-            },] },
-];
-/** @nocollapse */
-InteractionComponent.ctorParameters = () => [];
-InteractionComponent.propDecorators = {
-    interaction: [{ type: Input }],
-    minimizedChanged: [{ type: Output }],
-    isAgentTyping: [{ type: Output }],
-    newMessage: [{ type: Output }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class ScenarioComponent {
-    constructor() {
-        this.minimizedChanged = new EventEmitter();
-        this.isAgentTyping = new EventEmitter();
-        this.newMessage = new EventEmitter();
-        this.afterViewChecked = new EventEmitter();
-    }
-    /**
-     * @return {?}
-     */
-    ngAfterViewChecked() {
-        this.afterViewChecked.emit();
-    }
-    /**
-     * @return {?}
-     */
-    onMinimizedChanged() {
-        this.minimizedChanged.emit();
-    }
-}
-ScenarioComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-scenario',
-                template: `<ng-container *ngIf="scenario && scenario.interactions">
-  <amc-interaction *ngFor="let interaction of scenario.interactions" [interaction]="interaction"
-    (minimizedChanged)="onMinimizedChanged()" (isAgentTyping)="isAgentTyping.emit($event)"
-    (newMessage)="newMessage.emit($event)">
-  </amc-interaction>
-</ng-container>
-`,
-                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}`]
-            },] },
-];
-/** @nocollapse */
-ScenarioComponent.ctorParameters = () => [];
-ScenarioComponent.propDecorators = {
-    scenario: [{ type: Input }],
-    minimizedChanged: [{ type: Output }],
-    isAgentTyping: [{ type: Output }],
-    newMessage: [{ type: Output }],
-    afterViewChecked: [{ type: Output }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @ignore
- */
-class OperationComponent {
-    /**
-     * @ignore
-     */
-    constructor() {
-    }
-    /**
-     * @ignore
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-OperationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-operation',
-                template: `<div class="callOptions">
-    <img class="AnswerCallImages" *ngFor="let operation of operations" [title]="operation.title" [src]="operation.icon" (click)="operation.handler(operation.operationName, operation.operationMetadata)"
-    />
-</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}`]
-            },] },
-];
-/** @nocollapse */
-OperationComponent.ctorParameters = () => [];
-OperationComponent.propDecorators = {
-    operations: [{ type: Input }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- */
-
-/** @enum {string} */
-const IChatMessageType = {
-    AGENT: 'AGENT',
-    OTHER_PERSON: 'OTHER_PERSON',
-    INFORMATION: 'INFORMATION',
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @record
- */
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * It is collection of Interaction which need to be displayed on scenario component.
- * @record
- */
-
-/**
- * @record
- */
-
-/**
- * @record
- */
-
-/**
- * @record
- */
-
-/**
- * @record
- */
-
-/**
- * This contains the main identifying information about the interaction.
- * @record
- */
-
-/**
- * It contains URLs for minimize, maximize, interaction specific icon urls for interaction.
- * And header number which needs to be displayed at top.
- * @record
- */
-
-/**
- * @record
- */
-
-/**
- * @record
- */
-
-/**
- * It contains Operation Icon URL and its hadlers which need to be displayed in Interaction.
- * @record
- */
-
-/**
- * It contains Operation Icon URL and its hadlers which need to be displayed in Interaction.
- * @record
- */
-
-/**
- * This contains properties and operations to be displayed for conference member.
- * @record
- */
-
-/**
- * key value pairs which can be used amongst other interfaces/classes to store metadata of those entities.
- * @record
- */
-
-/**
- * This interface contains key value pairs, some custom operation which generates display key and display value.
- * Also it includes custom operation handler for click event on properties.
- * @record
- */
-
-/**
- * A helper method to make instances of [IProperty]
- */
-class Property {
-    /**
-     *
-     * @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) {
-        /**
-         * Operation responsible for generating displayKey and dispkayValur from key and value.
-         */
-        this.displayOperation = (/**
-         * @return {?}
-         */
-        () => {
-            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();
-    }
-}
-/**
- * Interface which contains eventName and handler associated with it.
- * @record
- */
-
-/** @enum {number} */
-const ValueType = {
-    STRING: 0,
-    COUNTER: 1,
-};
-ValueType[ValueType.STRING] = 'STRING';
-ValueType[ValueType.COUNTER] = 'COUNTER';
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @param {?} seconds_in
- * @return {?}
- */
-function secondsToHms(seconds_in) {
-    seconds_in = Number(seconds_in);
-    /** @type {?} */
-    const h = Math.floor(seconds_in / 3600);
-    /** @type {?} */
-    const m = Math.floor(seconds_in % 3600 / 60);
-    /** @type {?} */
-    const s = Math.floor(seconds_in % 3600 % 60);
-    /** @type {?} */
-    const hDisplay = h > 0 ? h.toString() + ':' : '';
-    /** @type {?} */
-    const mDisplay = m > 0 ? ('0' + m.toString()).slice(-2) + ':' : '00:';
-    /** @type {?} */
-    const sDisplay = s > 0 ? ('0' + s.toString()).slice(-2) : '00';
-    return hDisplay + mDisplay + sDisplay;
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * @ignore
- */
-class PropertyComponent {
-    /**
-     * @ignore
-     */
-    constructor() {
-        this._timerId = null;
-        this.processedDisplayValue = '';
-    }
-    /**
-     * @ignore
-     * @return {?}
-     */
-    ngOnInit() {
-        this.initValues();
-    }
-    /**
-     * @ignore
-     * @return {?}
-     */
-    initValues() {
-        if (this.property.displayValueType === ValueType.COUNTER) {
-            this.startCallCounter();
-        }
-        else {
-            this.processedDisplayValue = this.property.displayValue;
-        }
-    }
-    /**
-     * @ignore
-     * @private
-     * @return {?}
-     */
-    startCallCounter() {
-        if (this._timerId == null) {
-            this._timerId = window.setInterval((/**
-             * @return {?}
-             */
-            () => {
-                /** @type {?} */
-                const callStartTime = this.property.displayValue;
-                /** @type {?} */
-                const currentTime = new Date().getTime() / 1000;
-                /** @type {?} */
-                const secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
-                this.processedDisplayValue = secondsToHms(secondsPassed);
-            }), 1000);
-        }
-    }
-    /**
-     * @ignore
-     * @return {?}
-     */
-    ngOnDestroy() {
-        if (this.property.displayValueType === ValueType.COUNTER) {
-            // clear the timer.
-            if (this._timerId != null) {
-                clearInterval(this._timerId);
-                this._timerId = null;
-            }
-        }
-    }
-}
-PropertyComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-property',
-                template: `<input [name]="processedDisplayValue" readonly [title]="processedDisplayValue" class="displayData" type="text" [value]="processedDisplayValue"
-  *ngIf="!property.customOperations" />
-<input class="cursor" [name]="processedDisplayValue" class="displayData" readonly [title]="processedDisplayValue" type="text" [value]="processedDisplayValue"
-  (click)="property.customOperations.handler(property.customOperations.eventName,property.customOperations.eventMetadata)"
-  *ngIf="property.customOperations" />
-`,
-                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}`]
-            },] },
-];
-/** @nocollapse */
-PropertyComponent.ctorParameters = () => [];
-PropertyComponent.propDecorators = {
-    property: [{ type: Input }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class HoldtimerComponent {
-    constructor() {
-        this.displayTime = '00:00/00:00';
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        this.startCallCounter();
-    }
-    /**
-     * @ignore
-     * @private
-     * @return {?}
-     */
-    startCallCounter() {
-        /** @type {?} */
-        const pastTimeInSeconds = this.CaculatePastHoldDuration();
-        if (this._timerId == null) {
-            this._timerId = window.setInterval((/**
-             * @return {?}
-             */
-            () => {
-                /** @type {?} */
-                const currentTime = new Date().getTime() / 1000;
-                /** @type {?} */
-                const secondsPassedCurrentCall = Math.floor((currentTime) - (this.holdCounterData.currentHoldStartTime / 1000));
-                this.displayTime = secondsToHms(secondsPassedCurrentCall) +
-                    '/' + secondsToHms(pastTimeInSeconds + secondsPassedCurrentCall);
-            }), 1000);
-        }
-    }
-    /**
-     * @private
-     * @return {?}
-     */
-    CaculatePastHoldDuration() {
-        /** @type {?} */
-        let pastTimeInSeconds = 0;
-        if (this.holdCounterData.pastCallDurations) {
-            this.holdCounterData.pastCallDurations.forEach((/**
-             * @param {?} holdTimerIterator
-             * @return {?}
-             */
-            (holdTimerIterator) => {
-                pastTimeInSeconds += (holdTimerIterator.endTime - holdTimerIterator.startTime) / 1000;
-            }));
-        }
-        return pastTimeInSeconds;
-    }
-    /**
-     * @ignore
-     * @return {?}
-     */
-    ngOnDestroy() {
-        // clear the timer.
-        if (this._timerId != null) {
-            clearInterval(this._timerId);
-            this._timerId = null;
-        }
-    }
-}
-HoldtimerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-holdtimer',
-                template: `<div class="holdCallDurationDiv">
-  <input class="holdCallDurationTimer" name="HoldCallDuration/TotalHoldCallDuration" type="text" [value]="displayTime"
-    readonly>
-</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}`]
-            },] },
-];
-/** @nocollapse */
-HoldtimerComponent.ctorParameters = () => [];
-HoldtimerComponent.propDecorators = {
-    holdCounterData: [{ type: Input }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class DurationComponent {
-    constructor() {
-        this.displayTime = '00:00/00:00';
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        this.startCallCounter();
-    }
-    /**
-     * @ignore
-     * @private
-     * @return {?}
-     */
-    startCallCounter() {
-        if (this._timerId == null) {
-            this._timerId = window.setInterval((/**
-             * @return {?}
-             */
-            () => {
-                /** @type {?} */
-                const callStartTime = this.startTime;
-                /** @type {?} */
-                const currentTime = new Date().getTime() / 1000;
-                /** @type {?} */
-                const secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
-                this.displayTime = Math.floor(secondsPassed / 60) + ':' + ('0' + (secondsPassed % 60)).slice(-2);
-            }), 1000);
-        }
-    }
-    /**
-     * @return {?}
-     */
-    ngOnDestroy() {
-        // clear the timer.
-        if (this._timerId != null) {
-            clearInterval(this._timerId);
-            this._timerId = null;
-        }
-    }
-}
-DurationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-duration',
-                template: `<div class="holdCallDurationDiv">
-  <input class="block durationInput" name="CallDuration" type="text" [value]="displayTime" readonly>
-</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}`]
-            },] },
-];
-/** @nocollapse */
-DurationComponent.ctorParameters = () => [];
-DurationComponent.propDecorators = {
-    startTime: [{ type: Input }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class ChatBoxComponent {
-    constructor() {
-        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';
-    }
-    /**
-     * @return {?}
-     */
-    ngAfterViewChecked() {
-        if (this.lastCount !== this.messages.length) {
-            this.lastCount = this.messages.length;
-            this.scrollToBottom();
-        }
-    }
-    /**
-     * @param {?} message
-     * @return {?}
-     */
-    getColor(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];
-        }
-    }
-    /**
-     * @param {?} message
-     * @return {?}
-     */
-    shouldAlignRight(message) {
-        return message.type && message.type === IChatMessageType.AGENT;
-    }
-    /**
-     * @return {?}
-     */
-    sendNewMessage() {
-        if (this.newMessageText) {
-            this.newMessage.emit(this.newMessageText);
-            this.newMessageText = '';
-        }
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    onNewMessageFocus(event) {
-        /** @type {?} */
-        const isTyping = event && this.newMessageText.length > 0;
-        if (isTyping !== this._isAgentTyping) {
-            this._isAgentTyping = isTyping;
-            this.isAgentTyping.emit(isTyping);
-        }
-    }
-    /**
-     * @return {?}
-     */
-    onKeyup() {
-        /** @type {?} */
-        const isTyping = this.newMessageText.length > 0;
-        if (isTyping !== this._isAgentTyping) {
-            this._isAgentTyping = isTyping;
-            this.isAgentTyping.emit(isTyping);
-        }
-    }
-    /**
-     * @return {?}
-     */
-    scrollToBottom() {
-        try {
-            this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;
-        }
-        catch (e) { }
-    }
-}
-ChatBoxComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-chat-box',
-                template: `<div class="chat-box">
-  <div #MessagesContainer class="messages" [style.max-height]='settings.maxHeight'>
-    <ng-container *ngFor="let message of messages">
-      <app-chat-message [alignRight]="shouldAlignRight(message)" [message]="message.text" [username]="message.username"
-        [timestamp]="message.timestamp" [image]="message.userIcon" [fallbackImage]="settings.fallbackUserIcon" [color]="getColor(message)">
-      </app-chat-message>
-    </ng-container>
-
-    <div *ngIf="isTyping" class="typing-indicator">
-      Someone is typing
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-  </div>
-
-  <div class="new-message">
-    <input #NewMessageText [(ngModel)]="newMessageText" type="text" placeholder="Type a message" (focus)="onNewMessageFocus(true)"
-      (blur)="onNewMessageFocus(false)" (keydown.enter)="sendNewMessage()" (keyup)='onKeyup()' [disabled]="settings.disableSendMessage">
-    <input type="image" [src]="settings.sendImage" (click)="sendNewMessage()" [disabled]="settings.disableSendMessage">
-  </div>
-</div>
-`,
-                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}}`],
-            },] },
-];
-/** @nocollapse */
-ChatBoxComponent.ctorParameters = () => [];
-ChatBoxComponent.propDecorators = {
-    settings: [{ type: Input }],
-    isTyping: [{ type: Input }],
-    messages: [{ type: Input }],
-    isAgentTyping: [{ type: Output }],
-    newMessage: [{ type: Output }],
-    messagesContainer: [{ type: ViewChild, args: ['MessagesContainer',] }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class ChatMessageComponent {
-    constructor() {
-        this.alignRight = false;
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-ChatMessageComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-chat-message',
-                template: `<div [class]="alignRight? 'message right-message' : 'message left-message'">
-  <div class="message-header">
-    <img *ngIf="image" class="image" [src]="image" (error)="image = fallbackImage" [style.border-color]="color" />
-    <span *ngIf="username" class="username">{{username}}</span>
-    <span *ngIf="timestamp" class="timestamp">{{timestamp}}</span>
-  </div>
-
-  <div class="message-body-container">
-    <div>
-      <div class="message-body" [style.background-color]="color" [style.border-color]="color">
-        <span [innerHTML]="message"></span>
-      </div>
-    </div>
-  </div>
-</div>
-`,
-                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}`]
-            },] },
-];
-/** @nocollapse */
-ChatMessageComponent.ctorParameters = () => [];
-ChatMessageComponent.propDecorators = {
-    message: [{ type: Input }],
-    alignRight: [{ type: Input }],
-    username: [{ type: Input }],
-    color: [{ type: Input }],
-    timestamp: [{ type: Input }],
-    image: [{ type: Input }],
-    fallbackImage: [{ type: Input }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class DispositionComponent {
-    constructor() {
-        this.selectedDisposition = new EventEmitter();
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-    /**
-     * @return {?}
-     */
-    submitDisposition() {
-        this.selectedDisposition.emit({ 'dispositionid': this.selectedDispositionValue,
-            dispositionName: this.disposition.get(this.selectedDispositionValue) });
-    }
-}
-DispositionComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-disposition',
-                template: `<div class="reasonCodeModalFrame">
-    <div>
-        <div>
-            <label class="reasonCodeLabelStyle">{{dispositionHeader}}</label>
-            <br />
-            <hr />
-        </div>
-        <ng-container *ngFor="let disp of disposition">
-            <div>
-              <input [required]="!selectedDispositionValue" type="radio" name="disposition_name" value="{{disp.key}}" [(ngModel)]="selectedDispositionValue"/>
-              <label class="reasonCodeLabelStyle">{{disp.value}}</label>
-            </div>
-        </ng-container>
-        <p>
-            <input type="image" src="https://engage.contactcanvas.com/MSCRMToolbar/Images/voice_check_normal.png" title="Submit Call Result"
-            (click)="submitDisposition()" style='float:right; margin-right:20px; margin-bottom:10px; width:20px; height:20px' />
-        </p>
-    </div>
-</div>
-`,
-                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}`]
-            },] },
-];
-/** @nocollapse */
-DispositionComponent.ctorParameters = () => [];
-DispositionComponent.propDecorators = {
-    dispositionHeader: [{ type: Input }],
-    disposition: [{ type: Input }],
-    selectedDisposition: [{ type: Output }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class ActivityComponent {
-    constructor() {
-        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';
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    onNameSelectChange(event) {
-        if (event.currentTarget.value !== '-1') {
-            this.activity.who = this.activity.whoList.find((/**
-             * @param {?} who
-             * @return {?}
-             */
-            who => who.entityId === event.currentTarget.value));
-            this.OnNameSelectChange.emit(this.activity);
-        }
-        else {
-            this.activity.who = null;
-            this.OnNameSelectChange.emit(this.activity);
-        }
-    }
-    /**
-     * @protected
-     * @param {?} who
-     * @return {?}
-     */
-    parseWho(who) {
-        return who.entityType + ': ' + who.entityName;
-    }
-    /**
-     * @protected
-     * @param {?} what
-     * @return {?}
-     */
-    parseWhat(what) {
-        return what.entityType + ': ' + what.entityName;
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    onRelatedToChange(event) {
-        if (event.currentTarget.value !== '-1') {
-            this.activity.what = this.activity.whatList.find((/**
-             * @param {?} what
-             * @return {?}
-             */
-            what => what.entityId === event.currentTarget.value));
-            this.OnRelatedToChange.emit(this.activity);
-        }
-        else {
-            this.activity.what = null;
-            this.OnRelatedToChange.emit(this.activity);
-        }
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    onSubjectChange(event) {
-        this.activity.subject = event.srcElement.value;
-        this.OnSubjectChange.emit(this.activity);
-    }
-    /**
-     * @param {?} event
-     * @return {?}
-     */
-    onCallNotesChange(event) {
-        this.activity.description = event.currentTarget.value;
-        this.OnCallNotesChange.emit(this.activity);
-    }
-    /**
-     * @protected
-     * @param {?} value
-     * @return {?}
-     */
-    loadQuickComment(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]);
-    }
-    /**
-     * @return {?}
-     */
-    activitySave() {
-        this.ActivitySave.emit(this.activity);
-    }
-}
-ActivityComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'amc-activity',
-                template: `<app-amc-collapsible-container>
-  <div role=headerExpand>
-    <label class="headerLabel">
-      <b>Activity Information</b>
-    </label>
-  </div>
-
-  <div role=headerCollapse>
-    <label class="headerLabel">
-      <b>Activity Information</b>
-    </label>
-  </div>
-
-  <div role="body">
-    <div class="activityFields">
-      <form>
-        <div class="editor displayDiv">
-          <label class="displayLabels" title="Call From">{{activity.nameFieldName}}</label>
-          <select class="dropDownListStyle displayData" data-resetperactivity="false" (change)="onNameSelectChange($event)">
-            <option *ngFor="let who of activity.whoList; let i = index" value="{{who.entityId}}" [selected]="i===0">{{parseWho(who)}}</option>
-            <option value="-1"></option>
-          </select>
-        </div>
-        <div class="editor displayDiv">
-          <label class="displayLabels" title="Related To">{{activity.relatedToFieldName}}</label>
-          <select class="dropDownListStyle displayData" (change)="onRelatedToChange($event)" data-resetperactivity="false">
-            <option *ngFor="let what of activity.whatList; let i = index" value="{{what.entityId}}" [selected]="i===0">{{parseWhat(what)}}</option>
-            <option value="-1"></option>
-          </select>
-        </div>
-        <div class="editor displayDiv">
-          <label class="displayLabels" title="Subject">{{activity.subjectFieldName}}</label>
-          <input class="activitySubjectTextBoxStyle displayData" (change)="onSubjectChange($event)" title="{{activity.subject}}"
-            type="text" value="{{activity.subject}}">
-        </div>
-        <div class="editor displayDiv">
-          <div class="callNotesSection">
-            <div class="textAreaDiv">
-              <textarea value="{{activity.description}}" placeholder="Click to add a comment" class="activityCommentsTextBoxStyle"
-                (change)="onCallNotesChange($event)" cols="20" rows="2" title=""></textarea>
-            </div>
-            <div class="notesButtonBorder">
-              <div class="commentsButtonDiv">
-                <div class="quickCommentsDiv">
-                  <input *ngFor="let quickComment of activity.quickCommentList ; let i = index;" class="quickNotesButton" type="button"
-                    value="{{i+1}}" (click)="loadQuickComment(i)" title="{{quickComment}}">
-                </div>
-                <div class="submitDiv">
-                  <input class="submitButton" type="button" value="Save" (click)="activitySave()">
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</app-amc-collapsible-container>
-`,
-                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}`]
-            },] },
-];
-/** @nocollapse */
-ActivityComponent.ctorParameters = () => [];
-ActivityComponent.propDecorators = {
-    activity: [{ type: Input }],
-    ActivitySave: [{ type: Output }],
-    OnNameSelectChange: [{ type: Output }],
-    OnRelatedToChange: [{ type: Output }],
-    OnSubjectChange: [{ type: Output }],
-    OnCallNotesChange: [{ type: Output }],
-    OnQuickCommentPress: [{ type: Output }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class CallerInformationComponent {
-    constructor() {
-        this.agentSelectedCallerInformation = new EventEmitter();
-        this.maximizeCallerInformation = true;
-        this.showAllCallers = false;
-        this.title = 'Caller Information';
-    }
-    /**
-     * @return {?}
-     */
-    ngOnChanges() {
-        this.showAllCallers = false;
-    }
-    /**
-     * @return {?}
-     */
-    expandCallerInfoResults() {
-        this.showAllCallers = true;
-    }
-    /**
-     * @return {?}
-     */
-    collapseCallerInfoResults() {
-        this.showAllCallers = false;
-    }
-    /**
-     * @param {?} i
-     * @return {?}
-     */
-    onAgentSelectedCallerInformation(i) {
-        this.agentSelectedCallerInformation.emit(i);
-    }
-}
-CallerInformationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-caller-information',
-                template: `<app-amc-collapsible-container>
-  <div role="headerExpand">
-    <label class="headerLabel">
-      <b>Caller Information</b>
-    </label>
-    <img title="Multiple Matches Available" *ngIf="callers.length > 1" src="../../assets/images/MultiMatchAlert.png" class="multiMatchImg"  />
-  </div>
-
-  <div role="headerCollapse">
-    <label class="headerLabel">
-      <b>Caller Information</b>
-    </label>
-    <img title="Multiple Matches Available" *ngIf="callers.length > 1" src="../../assets/images/MultiMatchAlert.png" class="multiMatchImg"  />
-  </div>
-
-  <div role="body">
-    <div *ngIf="this.callers.length > 1">
-      <span class="overflowWrapper">
-        <img class="CRMResultImageMultiMatch" src="{{ callers[0].imgUrl }}"/>
-        <input id="{{ this.callers[0].entityId }}" name="{{ this.callers[0].entityName }}" (click)="onAgentSelectedCallerInformation(this.callers[0])" readonly
-        class="multiMatchLabel" title="{{ this.callers[0].entityName }}" type="{{ callers[0].entityType }}" value="{{ this.callers[0].entityName }}"/>
-        <span class="positioning">
-          <img *ngIf="!this.showAllCallers" class="CRMExpandImage" src="../../assets/images/down-arrow.png" (click)="expandCallerInfoResults()"/>
-          <img *ngIf="this.showAllCallers" class="CRMExpandImage" src="../../assets/images/up-arrow.png" (click)="collapseCallerInfoResults()"/>
-        </span>
-      </span>
-      <div *ngIf="this.showAllCallers">
-        <div *ngFor="let i of this.callers | slice: 1; let index = index">
-          <span
-            class="overflowWrapper"
-          >
-          <img class="CRMResultImageMultiMatch" src="{{ i.imgUrl }}"/>
-            <input id="{{ i.entityId }}" name="{{ i.entityName }}" readonly class=" multiMatchLabel" (click)="onAgentSelectedCallerInformation(i)"
-              title="{{ i.entityName }}" type="text" value="{{ i.entityName }}"/>
-          </span>
-        </div>
-      </div>
-    </div>
-
-    <div *ngIf="callers.length === 1">
-      <div class="editorFull displayDiv" *ngFor="let i of this.callers | slice: 0:1; let index = index; let first = first">
-        <span class="overflowWrapper">
-          <img class="CRMResultImageMultiMatch" src="{{ i.imgUrl }}"/>
-            <input class="singleSearchResultSelect singleMatchFirstWrapper" id="{{ i.entityId }}" [class.firstSingleMatchResult]="first"
-              value="{{ i.entityName }}" title="{{ i.entityName }}" (click)="onAgentSelectedCallerInformation(i)" readonly/>
-        </span>
-      </div>
-      <div class="editorFull displayDiv" *ngFor="let i of this.callers | slice: 1; let index = index; let first = first">
-        <span class="overflowWrapper">
-          <label title="{{ i.entityName }}" class="displayLabelsTabbed">{{ i.entityName }}</label>
-            <input class="singleSearchResultSelect singleMatchTabbedItemsWrapper singleMatchLabel" id="{{ i.entityId }}" value="{{ i.entityName }}" title="{{ i.entityName }}" readonly />
-          </span>
-        </div>
-    </div>
-  </div>
-</app-amc-collapsible-container>
-`,
-                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%}`]
-            },] },
-];
-/** @nocollapse */
-CallerInformationComponent.ctorParameters = () => [];
-CallerInformationComponent.propDecorators = {
-    callers: [{ type: Input }],
-    agentSelectedCallerInformation: [{ type: Output }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class RecentActivitiesComponent {
-    constructor() {
-        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;
-    }
-    /**
-     * @param {?} isExpand
-     * @return {?}
-     */
-    expandAndCollapse(isExpand) {
-        this.collapseToggle = isExpand;
-    }
-    /**
-     * @protected
-     * @param {?} isExpand
-     * @param {?} interactionId
-     * @return {?}
-     */
-    expandAndCollapseRecentActivity(isExpand, interactionId) {
-        return (isExpand ? this.workingRecentInteractionId = interactionId : this.workingRecentInteractionId = null);
-    }
-    /**
-     * @protected
-     * @param {?} interactionId
-     * @return {?}
-     */
-    getIndexWho(interactionId) {
-        /** @type {?} */
-        const index = this.savedInteractions.get(interactionId).whoList.findIndex((/**
-         * @param {?} item
-         * @return {?}
-         */
-        item => item.entityId === this.savedInteractions.get(interactionId).who.entityId));
-        return index;
-    }
-    /**
-     * @protected
-     * @param {?} interactionId
-     * @return {?}
-     */
-    getIndexWhat(interactionId) {
-        /** @type {?} */
-        const index = this.savedInteractions.get(interactionId).whatList.findIndex((/**
-         * @param {?} item
-         * @return {?}
-         */
-        item => item.entityId === this.savedInteractions.get(interactionId).what.entityId));
-        return index;
-    }
-    /**
-     * @protected
-     * @param {?} interactionId
-     * @return {?}
-     */
-    onSubjectChange(interactionId) {
-        this.SubjectChange.emit({
-            interactionId,
-            Subject: this.savedInteractions.get(interactionId).subject
-        });
-    }
-    /**
-     * @protected
-     * @param {?} event
-     * @param {?} interactionId
-     * @return {?}
-     */
-    onNameChange(event, interactionId) {
-        if (event.currentTarget.value === '-1') {
-            this.NameChange.emit({
-                interactionId,
-                whoObject: null
-            });
-        }
-        else {
-            this.NameChange.emit({
-                interactionId,
-                whoObject: this.savedInteractions.get(interactionId).whoList[event.target.value]
-            });
-        }
-    }
-    /**
-     * @protected
-     * @param {?} event
-     * @param {?} interactionId
-     * @return {?}
-     */
-    onRelatedToChange(event, interactionId) {
-        if (event.currentTarget.value === '-1') {
-            this.RelatedToChange.emit({
-                interactionId,
-                whatObject: null
-            });
-        }
-        else {
-            this.RelatedToChange.emit({
-                interactionId,
-                whatObject: this.savedInteractions.get(interactionId).whatList[event.target.value]
-            });
-        }
-    }
-    /**
-     * @protected
-     * @param {?} interactionId
-     * @return {?}
-     */
-    onCallNotesChange(interactionId) {
-        this.CallNotesChange.emit({
-            interactionId,
-            Description: this.savedInteractions.get(interactionId).description
-        });
-    }
-    /**
-     * @protected
-     * @param {?} commentIndex
-     * @param {?} interactionId
-     * @return {?}
-     */
-    loadQuickComment(commentIndex, interactionId) {
-        this.QuickCommentChange.emit({
-            interactionId,
-            commentIndex
-        });
-    }
-    /**
-     * @protected
-     * @param {?} interactionId
-     * @return {?}
-     */
-    submitActivity(interactionId) {
-        this.SaveActivity.emit({
-            interactionId,
-        });
-    }
-    /**
-     * @protected
-     * @param {?} who
-     * @return {?}
-     */
-    parseWho(who) {
-        return ((who.entityType) ? who.entityType : 'Entity') + ': ' + who.entityName;
-    }
-    /**
-     * @protected
-     * @param {?} what
-     * @return {?}
-     */
-    parseWhat(what) {
-        return ((what.entityType) ? what.entityType : 'Entity') + ': ' + what.entityName;
-    }
-}
-RecentActivitiesComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-recent-activities',
-                template: `<app-amc-collapsible-container>
-  <div role="headerExpand">
-      <label class="headerLabel">
-        <b>Recent Activities</b>
-      </label>
-  </div>
-  <div role="body">
-    <div class="callBodyBorderless">
-      <div *ngFor="let interaction of interactionIds; let last = last">
-        <div *ngIf="this.workingRecentInteractionId === interaction">
-          <div (click)="expandAndCollapseRecentActivity(false, interaction)" class="editor callHeaderRecentActivitySelected">
-            <label class="headerLabelClickableLook">
-              <img src="/assets/images/Phone_Number_Icon.png" class="RecentCallsImg"/>
-              <b>{{ savedInteractions.get(interaction).subject }}</b>
-            </label>
-          </div>
-          <div class="recentBody">
-            <div class="activityFields">
-              <form>
-                <div class="editor displayDiv">
-                  <label class="displayLabels" title="Subject">Subject</label>
-                  <input class="activitySubjectTextBoxStyle displayData" type="text" value="{{ savedInteractions.get(interaction) }}" (change)="onSubjectChange(interaction)"
-                  (keyup)="onSubjectChange(interaction)" name="subject" [(ngModel)]="savedInteractions.get(interaction).subject" />
-                </div>
-                <div class="editor displayDiv">
-                  <label class="displayLabels" title="Name">Name</label>
-                  <select class="dropDownListStyle displayData" (change)="onNameChange($event, interaction)" name="whoItem">
-                    <option *ngFor="let whoItem of savedInteractions.get(interaction).whoList; let i = index" value="{{i}}" [selected]="i===getIndexWho(interaction)">{{ parseWho(whoItem) }}</option>
-                    <option value="-1"></option>
-                  </select>
-                </div>
-                <div class="editor displayDiv">
-                  <label class="displayLabels" title="Regarding">Related To</label>
-                  <select class="dropDownListStyle displayData" (change)="onRelatedToChange($event, interaction)" name="whatItem">
-                    <option *ngFor="let whatItem of savedInteractions.get(interaction).whatList; let i = index" value={{i}} [selected]="i===getIndexWhat(interaction)">{{ parseWhat(whatItem) }}</option>
-                    <option value="-1"></option>
-                  </select>
-                </div>
-                <div class="editor displayDiv">
-                  <div class="callNotesSection">
-                    <div class="callNotesTextArea">
-                      <textarea placeholder="Click to add a comment" (change)="onCallNotesChange(interaction)" class="activityCommentsTextBoxStyle" value="{{ savedInteractions.get(interaction) }}"
-                      (keyup)="onCallNotesChange(interaction)" name="description"  [(ngModel)]="savedInteractions.get(interaction).description" rows="5" title="">
-                      </textarea>
-                    </div>
-                    <div class="notesButtonBorder">
-                      <div class="commentsButtonDiv">
-                        <div class="quickCommentsDiv">
-                          <input *ngFor="let quickComment of savedInteractions.get(interaction).quickCommentList; let i = index;" class="quickNotesButton" type="button"
-                            value="{{i+1}}" (click)="loadQuickComment(i, interaction)" title="{{quickComment}}">
-                        </div>
-                        <div class="callNotesButtonsSection">
-                          <input class="submitButton" type="button" value="Save" (click)="submitActivity(interaction)"/>
-                        </div>
-                      </div>
-                     </div>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-        <div *ngIf="!(this.workingRecentInteractionId === interaction)">
-          <div [class.callHeaderBottomBorder]='last' (click)="expandAndCollapseRecentActivity(true, interaction)" class="editor callHeaderRecentActivityUnselected">
-            <label class="headerLabelClickableLook">
-              <img src="/assets/images/Phone_Number_Icon.png" class="RecentCallsImg"/>
-              <b>{{ savedInteractions.get(interaction).subject }}</b>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div role="headerCollapse">
-      <label class="headerLabel">
-        <b>Recent Activities</b>
-      </label>
-  </div>
-</app-amc-collapsible-container>
-`,
-                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}`]
-            },] },
-];
-/** @nocollapse */
-RecentActivitiesComponent.ctorParameters = () => [];
-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 }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class AmcCollapsibleContainerComponent {
-    constructor() {
-        this.isActivityMaximized = true;
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-    }
-}
-AmcCollapsibleContainerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'app-amc-collapsible-container',
-                template: `<div *ngIf="isActivityMaximized" class="callDisplay">
-  <div class="editor callHeader">
-    <img class="ViewResizeImage" src="/assets/images/section_collapse.png" (click)="isActivityMaximized = false" title="Collapse">
-    <ng-content select="div[role=headerExpand]"></ng-content>
-  </div>
-  <div class="callBody">
-    <ng-content select="div[role=body]"></ng-content>
-  </div>
-</div>
-
-<div *ngIf="!isActivityMaximized" class="callDisplay">
-  <div class="editor callHeader">
-    <img class="ViewResizeImage" src="assets/images/section_expand.png" (click)="isActivityMaximized = true" title="Expand">
-    <ng-content select="div[role=headerCollapse]"></ng-content>
-  </div>
-</div>
-`,
-                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}`]
-            },] },
-];
-/** @nocollapse */
-AmcCollapsibleContainerComponent.ctorParameters = () => [];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class UILibraryModule {
-    /**
-     * @param {?} injector
-     */
-    constructor(injector) {
-        this.injector = injector;
-    }
-    /**
-     * @param {?} app
-     * @return {?}
-     */
-    ngDoBootstrap(app) {
-        // Scenario Component
-        if (!customElements.get('amc-webcomponents-scenario')) {
-            /** @type {?} */
-            const strategyFactory = new ElementZoneStrategyFactory(ScenarioComponent, this.injector);
-            customElements.define('amc-webcomponents-scenario', createCustomElement(ScenarioComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-        // Activity Information
-        if (!customElements.get('amc-webcomponents-activity')) {
-            /** @type {?} */
-            const strategyFactory = new ElementZoneStrategyFactory(ActivityComponent, this.injector);
-            customElements.define('amc-webcomponents-activity', createCustomElement(ActivityComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-        // Caller Information
-        if (!customElements.get('amc-webcomponents-callerinfo')) {
-            /** @type {?} */
-            const strategyFactory = new ElementZoneStrategyFactory(CallerInformationComponent, this.injector);
-            customElements.define('amc-webcomponents-callerinfo', createCustomElement(CallerInformationComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-        // Recent Activities
-        if (!customElements.get('amc-webcomponents-recentactivity')) {
-            /** @type {?} */
-            const strategyFactory = new ElementZoneStrategyFactory(RecentActivitiesComponent, this.injector);
-            customElements.define('amc-webcomponents-recentactivity', createCustomElement(RecentActivitiesComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-        // Disposition
-        if (!customElements.get('amc-webcomponents-disposition')) {
-            /** @type {?} */
-            const strategyFactory = new ElementZoneStrategyFactory(DispositionComponent, this.injector);
-            customElements.define('amc-webcomponents-disposition', createCustomElement(DispositionComponent, {
-                injector: this.injector,
-                strategyFactory: strategyFactory
-            }));
-        }
-    }
-}
-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]
-            },] },
-];
-/** @nocollapse */
-UILibraryModule.ctorParameters = () => [
-    { type: Injector }
-];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/**
- * Generated bundle index. Do not edit.
- */
-
-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==