npm - @amc-technology/ui-library - Versions diffs - 1.0.37 → 1.0.40 - Mend

@amc-technology/ui-library 1.0.37 → 1.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/fesm2015/amc-technology-ui-library.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { __decorate } from 'tslib';
-import { EventEmitter, Input, Output, Component, ViewChild, Injector, NgModule } from '@angular/core';
+import { EventEmitter, Input, Output, Component, Renderer2, ViewChild, Injector, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { createCustomElement } from '@angular/elements';
@@ -78,8 +78,8 @@ __decorate([
 InteractionComponent = __decorate([
     Component({
         selector: 'amc-interaction',
-        template: "<div class=\"AnswerCallFocused\">\r\n  <div class=\"editor callHeaderTop\">\r\n    <img class=\"statusImage\" aria-hidden=\"true\" [src]=\"interaction.UIHeadersData.statusUrl\" (click)=\"interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)\" />\r\n    <label class=\"statusText\">\r\n      <b [id]=\"interaction.UIHeadersData.statusText\">{{ interaction.UIHeadersData.statusText }}</b>\r\n    </label>\r\n    <label class=\"verticalDivider\">|</label>\r\n    <label class=\"directionText\" *ngIf=\"!interaction.UIHeadersData.displayHoldCounter\">{{ interaction.UIHeadersData.directionText }}</label>\r\n    <div class=\"holdCallDurationDiv\" *ngIf=\"interaction.UIHeadersData.displayHoldCounter\">\r\n      <amc-holdtimer [holdCounterData]=\"interaction.UIHeadersData.holdCounterData\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\"></amc-holdtimer>\r\n    </div>\r\n    <img class=\"ViewExpandImage\" [src]=\"interaction.UIHeadersData.minimizeUrl\" alt=\"Minimize\" (click)=\"minimize()\" (keypress)=\"collapseKeypress($event)\" *ngIf=\"!_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"collapse Call Section\">\r\n    <img class=\"ViewCollapseImage\" [src]=\"interaction.UIHeadersData.maximizeUrl\" alt=\"Maximize\" (click)=\"maximize()\" (keypress)=\"expandKeypress($event)\" *ngIf=\"_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"expand Call Section\">\r\n    <div class=\"DurationDiv\" *ngIf=\"interaction.displayCallTimer\">\r\n      <amc-duration [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [startTime]=\"interaction.startTime\"></amc-duration>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!_minimized\">\r\n\r\n    <div *ngIf=\"!isConferenceCall()\">\r\n      <div class=\"editor phoneNumberContainer\">\r\n        <input class=\"callImage\" type=\"image\" [src]=\"interaction.subheaderData.image.href\" [title]=\"interaction.subheaderData.tooltip || ''\" tabindex=\"-1\">\r\n        <input class=\"editor phoneNumberValue\" [attr.aria-labelledby]=\"interaction.UIHeadersData.statusText + ' ' + interaction.subheaderData.value\" readonly type=\"text\" [value]=\"interaction.subheaderData.value\" [id]=\"interaction.subheaderData.value\" tabindex=\"-1\">\r\n      </div>\r\n\r\n      <div class=\"cadSection\">\r\n        <ng-container *ngFor=\"let property of interaction.properties\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <label class=\"col1\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n            <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let property of interaction.associatedData\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <div class=\"editor displayDiv\">\r\n              <label class=\"displayLabels\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <app-chat-box *ngIf=\"interaction.chat\" [isTyping]=\"interaction.chat.isCustomerTyping\" [settings]=\"interaction.chat.settings\"\r\n        [messages]=\"interaction.chat.messages\" (isAgentTyping)=\"isAgentTyping.emit($event)\" (newMessage)=\"newMessage.emit($event)\"></app-chat-box>\r\n\r\n      <div [id]='interaction.interactionId'> </div>\r\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n    <div *ngIf=\"isConferenceCall()\">\r\n      <div *ngFor=\"let party of interaction.parties\">\r\n        <div class=\"editor phoneNumberContainer\">\r\n          <input class=\"callImage\" type=\"image\" [src]=\"party.header.image.href\" [title]=\"party.header.tooltip || ''\" tabindex=\"-1\">\r\n          <input class=\"editor phoneNumberValue\" readonly type=\"text\" [value]=\"party.header.value\" tabindex=\"-1\">\r\n        </div>\r\n\r\n        <div class=\"grid-container\">\r\n          <ng-container *ngFor=\"let property of party.properties\">\r\n            <ng-container *ngIf=\"property.visible\">\r\n              <label class=\"col1\" [title]=\"property.displayKey\">{{ property.displayKey }}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" [operations]=\"party.operations\"></amc-operation>\r\n        <div class=\"AnswerCallFocused\"></div>\r\n      </div>\r\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
-        styles: [":host{display:block}.phoneNumberContainer{margin-left:5px!important;padding-left:0;display:flex;align-items:center}.cadSection{margin-bottom:5px}.grid-container{margin-left:5px;display:grid;grid-template-columns:auto 1fr;grid-column-gap:10px;max-width:calc(100% - 5px);overflow:hidden}.col1{grid-column:1/2}.col2{grid-column:2/3}.ViewExpandImage{margin:3px}.ViewExpandImage:focus{outline:#3296da solid 2px;outline-offset:0}.ViewCollapseImage{margin:3px}.ViewCollapseImage:focus{outline:#3296da solid 2px;outline-offset:0}.callImage{cursor:default}.phoneNumberValue:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
+        template: "<div class=\"AnswerCallFocused\">\r\n  <div class=\"editor callHeaderTop\">\r\n    <img class=\"statusImage\" aria-hidden=\"true\" [src]=\"interaction.UIHeadersData.statusUrl\" (click)=\"interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)\" />\r\n    <label class=\"statusText\">\r\n      <b [id]=\"interaction.UIHeadersData.statusText\">{{ interaction.UIHeadersData.statusText }}</b>\r\n    </label>\r\n    <label class=\"verticalDivider\">|</label>\r\n    <label class=\"directionText\" *ngIf=\"!interaction.UIHeadersData.displayHoldCounter\">{{ interaction.UIHeadersData.directionText }}</label>\r\n    <div class=\"holdCallDurationDiv\" *ngIf=\"interaction.UIHeadersData.displayHoldCounter\">\r\n      <amc-holdtimer [holdCounterData]=\"interaction.UIHeadersData.holdCounterData\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\"></amc-holdtimer>\r\n    </div>\r\n    <img class=\"ViewExpandImage\" [src]=\"interaction.UIHeadersData.minimizeUrl\" alt=\"Minimize\" (click)=\"minimize()\" (keypress)=\"collapseKeypress($event)\" *ngIf=\"!_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"collapse Call Section\">\r\n    <img class=\"ViewCollapseImage\" [src]=\"interaction.UIHeadersData.maximizeUrl\" alt=\"Maximize\" (click)=\"maximize()\" (keypress)=\"expandKeypress($event)\" *ngIf=\"_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"expand Call Section\">\r\n    <div class=\"DurationDiv\" *ngIf=\"interaction.displayCallTimer\">\r\n      <amc-duration [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [startTime]=\"interaction.startTime\"></amc-duration>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!_minimized\">\r\n\r\n    <div *ngIf=\"!isConferenceCall()\">\r\n      <div class=\"editor phoneNumberContainer\">\r\n        <input class=\"callImage\" type=\"image\" [src]=\"interaction.subheaderData.image.href\" [title]=\"interaction.subheaderData.tooltip || ''\" tabindex=\"-1\">\r\n        <input class=\"editor phoneNumberValue\" [attr.aria-labelledby]=\"interaction.UIHeadersData.statusText + ' ' + interaction.subheaderData.value\" readonly type=\"text\" [value]=\"interaction.subheaderData.value\" [id]=\"interaction.subheaderData.value\" tabindex=\"-1\">\r\n      </div>\r\n\r\n      <div class=\"cadSection\">\r\n        <ng-container *ngFor=\"let property of interaction.properties\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <label class=\"col1\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n            <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let property of interaction.associatedData\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <div class=\"editor displayDiv\">\r\n              <label class=\"displayLabels\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n      <amc-operation *ngIf=\"interaction.chat\" id=\"close-chat\" [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n      <app-chat-box *ngIf=\"interaction.chat\" [isTyping]=\"interaction.chat.isCustomerTyping\" [settings]=\"interaction.chat.settings\"\r\n        [messages]=\"interaction.chat.messages\" (isAgentTyping)=\"isAgentTyping.emit($event)\" (newMessage)=\"newMessage.emit($event)\"></app-chat-box>\r\n\r\n      <div [id]='interaction.interactionId'> </div>\r\n      <amc-operation *ngIf=\"!interaction.chat\" [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n    <div *ngIf=\"isConferenceCall()\">\r\n      <div *ngFor=\"let party of interaction.parties\">\r\n        <div class=\"editor phoneNumberContainer\">\r\n          <input class=\"callImage\" type=\"image\" [src]=\"party.header.image.href\" [title]=\"party.header.tooltip || ''\" tabindex=\"-1\">\r\n          <input class=\"editor phoneNumberValue\" readonly type=\"text\" [value]=\"party.header.value\" tabindex=\"-1\">\r\n        </div>\r\n\r\n        <div class=\"grid-container\">\r\n          <ng-container *ngFor=\"let property of party.properties\">\r\n            <ng-container *ngIf=\"property.visible\">\r\n              <label class=\"col1\" [title]=\"property.displayKey\">{{ property.displayKey }}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" [operations]=\"party.operations\"></amc-operation>\r\n        <div class=\"AnswerCallFocused\"></div>\r\n      </div>\r\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+        styles: [":host{display:block}.phoneNumberContainer{margin-left:5px!important;padding-left:0;display:flex;align-items:center}.cadSection{margin-bottom:5px}#close-chat{-moz-text-align-last:end;text-align-last:end}.grid-container{margin-left:5px;display:grid;grid-template-columns:auto 1fr;grid-column-gap:10px;max-width:calc(100% - 5px);overflow:hidden}.col1{grid-column:1/2}.col2{grid-column:2/3}.ViewExpandImage{margin:3px}.ViewExpandImage:focus{outline:#3296da solid 2px;outline-offset:0}.ViewCollapseImage{margin:3px}.ViewCollapseImage:focus{outline:#3296da solid 2px;outline-offset:0}.callImage{cursor:default}.phoneNumberValue:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
     })
 ], InteractionComponent);
@@ -449,7 +449,8 @@ DurationComponent = __decorate([
 ], DurationComponent);
 let ChatBoxComponent = class ChatBoxComponent {
-    constructor() {
+    constructor(renderer) {
+        this.renderer = renderer;
         this.isTyping = false;
         this.lastCount = -1;
         this._isAgentTyping = false;
@@ -458,7 +459,7 @@ let ChatBoxComponent = class ChatBoxComponent {
         this.newMessageText = '';
         this.usernameToColor = {};
         this.colors = [
-            '#81c784',
+            '#c2c4c4',
             '#ffab91',
             '#f48fb1',
             '#29b6f6',
@@ -469,7 +470,10 @@ let ChatBoxComponent = class ChatBoxComponent {
             '#cddc39',
         ];
         this.colorsIndex = 0;
-        this.agentColor = '#29b6f6';
+        this.agentColor = '#2db0e0';
+    }
+    ngOnInit() {
+        this.renderer.selectRootElement('#autofocus').focus();
     }
     ngAfterViewChecked() {
         if (this.lastCount !== this.messages.length) {
@@ -495,11 +499,13 @@ let ChatBoxComponent = class ChatBoxComponent {
     shouldAlignRight(message) {
         return message.type && message.type === IChatMessageType.AGENT;
     }
-    sendNewMessage() {
+    sendNewMessage(event) {
+        event.preventDefault();
         if (this.newMessageText) {
             this.newMessage.emit(this.newMessageText);
             this.newMessageText = '';
         }
+        this.renderer.selectRootElement('#autofocus').focus();
     }
     onNewMessageFocus(event) {
         const isTyping = event && this.newMessageText.length > 0;
@@ -522,6 +528,9 @@ let ChatBoxComponent = class ChatBoxComponent {
         catch (e) { }
     }
 };
+ChatBoxComponent.ctorParameters = () => [
+    { type: Renderer2 }
+];
 __decorate([
     Input()
 ], ChatBoxComponent.prototype, "settings", void 0);
@@ -540,11 +549,14 @@ __decorate([
 __decorate([
     ViewChild('MessagesContainer', { static: true })
 ], ChatBoxComponent.prototype, "messagesContainer", void 0);
+__decorate([
+    ViewChild('autofocus', { static: false })
+], ChatBoxComponent.prototype, "autofocus", void 0);
 ChatBoxComponent = __decorate([
     Component({
         selector: 'app-chat-box',
-        template: "<div class=\"chat-box\">\r\n  <div #MessagesContainer class=\"messages\" [style.max-height]='settings.maxHeight'>\r\n    <ng-container *ngFor=\"let message of messages\">\r\n      <app-chat-message [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\"\r\n        [timestamp]=\"message.timestamp\" [image]=\"message.userIcon\" [fallbackImage]=\"settings.fallbackUserIcon\" [color]=\"getColor(message)\">\r\n      </app-chat-message>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isTyping\" class=\"typing-indicator\">\r\n      Someone is typing\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"new-message\">\r\n    <input #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" placeholder=\"Type a message\" (focus)=\"onNewMessageFocus(true)\"\r\n      (blur)=\"onNewMessageFocus(false)\" (keydown.enter)=\"sendNewMessage()\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\">\r\n    <input type=\"image\" [src]=\"settings.sendImage\" (click)=\"sendNewMessage()\" [disabled]=\"settings.disableSendMessage\">\r\n  </div>\r\n</div>\r\n",
-        styles: [".chat-box{background-color:#eceff1}.messages{padding:5px;overflow:auto;min-height:50px}.new-message{border-top:1px solid #000;display:flex;align-content:center;height:25px}.new-message input[type=text]{flex:1 1 0;background-color:#eceff1;border:none;min-width:0}.new-message input[type=image]{position:relative;top:50%;transform:translateY(-50%);height:20px;cursor:pointer}.new-message input[type=image]:disabled{opacity:.5;cursor:auto}.new-message input:focus{outline:0}.typing-indicator{font-size: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}}"]
+        template: "<div class=\"chat-box\">\r\n  <div #MessagesContainer class=\"messages\" [style.max-height]='settings.maxHeight'>\r\n    <ng-container *ngFor=\"let message of messages\">\r\n      <app-chat-message class=\"chat-line\" [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\"\r\n        [timestamp]=\"message.timestamp\" [image]=\"message.userIcon\" [fallbackImage]=\"settings.fallbackUserIcon\" [color]=\"getColor(message)\">\r\n      </app-chat-message>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isTyping\" class=\"typing-indicator\">\r\n      Someone is typing\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n<div class=\"message-box\">\r\n  <textarea id=\"autofocus\" #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" class=\"message-input scroll\" placeholder=\"Type a message...\"\r\n  (focus)=\"onNewMessageFocus(true)\" (keydown.enter)=\"sendNewMessage($event)\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\" ></textarea>\r\n  <button type=\"submit\" class=\"message-submit\" (click)=\"sendNewMessage($event)\" [disabled]=\"settings.disableSendMessage\">Send</button>\r\n</div>\r\n</div>\r\n",
+        styles: [".message-box{flex:1 1 0;width:99%;background:#fff;margin:auto;position:relative;border-radius:5px;height:100%;border:1px solid #ccc}.message-box .message-input{background:0 0;border:none;outline:0!important;resize:none;font-family:inherit;font-size:.8rem;height:100%;margin:0;padding:10px 7px;width:89%;color:#444}.message-box textarea:focus:-webkit-placeholder{color:transparent}.message-box .message-submit{position:absolute;z-index:1;top:26px;right:5px;background:#1e72ba;border:none;color:#fff;font-size:10px;line-height:1;padding:6px 10px;border-radius:5px;outline:0!important;transition:background .2s;cursor:pointer}.scroll::-webkit-scrollbar{display:none}.chat-box{background-color:#f4f5fb;padding:5px}.messages{padding:5px;overflow:auto;min-height:50px}.chat-line{margin-bottom:15px}.new-message{border-top:1px solid #000;display:flex;align-content:center;height:25px}.new-message input[type=text]{flex:1 1 0;background-color:#f4f5fb;border:none;min-width:0}.new-message input[type=image]{position:relative;top:50%;transform:translateY(-50%);height:20px;cursor:pointer}.new-message input[type=image]:disabled{opacity:.5;cursor:auto}.new-message input:focus{outline:0}.typing-indicator{font-size:.8em;font-style:italic}.typing-indicator span{display:inline-block;height:4px;width:4px;border-radius:50%;background-color:#9e9e9e;margin:0 1px;opacity:.2}.typing-indicator span:nth-of-type(1){-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);
@@ -579,8 +591,8 @@ __decorate([
 ChatMessageComponent = __decorate([
     Component({
         selector: 'app-chat-message',
-        template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\r\n  <div class=\"message-header\">\r\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\r\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\r\n    <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n  </div>\r\n\r\n  <div class=\"message-body-container\">\r\n    <div>\r\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\r\n        <span [innerHTML]=\"message\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-        styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.message-header{display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image,.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:flex}.right-message>.message-body-container{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;-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}"]
+        template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\r\n  <div class=\"message-header\">\r\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\r\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\r\n  </div>\r\n\r\n  <div class=\"message-body-container\">\r\n    <div>\r\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\r\n        <span [innerHTML]=\"message\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n</div>\r\n",
+        styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.timestamp{font-size:10px;margin-right:30px;margin-left:30px}.message-header{display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image,.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:flex}.right-message>.message-body-container{flex-direction:row-reverse}.message-body{display:inline-block;position:relative;border-radius:1em;padding:6px;font-style:normal;font-size:.8em;text-align:start;min-width:2em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.left-message .message-body:after{content:\"\";position:absolute;border-left:10px solid #000;border-color:inherit;border-right:10px solid transparent;border-bottom:10px solid transparent;left:1px;bottom:-2px}.right-message .message-body:after{content:\"\";position:absolute;border-left:10px solid transparent;border-top:10px solid #000;border-top-color:inherit;border-bottom:0 solid transparent;right:1px;bottom:-2px}"]
     })
 ], ChatMessageComponent);

package/fesm2015/amc-technology-ui-library.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"amc-technology-ui-library.js","sources":["ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/interaction/interaction.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/scenario/scenario.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/operation/operation.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/models/chat.message.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/models/uilibrary.model.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/Helpers.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/property/property.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/holdtimer/holdtimer.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/duration/duration.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/chat-box/chat-box.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/chat-message/chat-message.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/disposition/disposition.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/activity/activity.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/login/login.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/uilibrary.module.ts","ng://@amc-technology/ui-library/amc-technology-ui-library.ts"],"sourcesContent":["import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\r\nimport { IInteraction } from '../../models/uilibrary.model';\r\n\r\n/*\r\n @ignore\r\n /\r\n@Component({\r\n selector: 'amc-interaction',\r\n templateUrl: './interaction.component.html',\r\n styleUrls: ['./interaction.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class InteractionComponent implements OnInit {\r\n\r\n @Input() interaction: IInteraction;\r\n @Output() minimizedChanged: EventEmitter<boolean> = new EventEmitter();\r\n @Output() isAgentTyping = new EventEmitter<boolean>();\r\n @Output() newMessage = new EventEmitter<string>();\r\n /\r\n @ignore\r\n /\r\n minimized: boolean;\r\n set _minimized(value) {\r\n this.minimized = value;\r\n this.minimizedChanged.emit(value);\r\n }\r\n get _minimized() {\r\n return this.minimized;\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n constructor() {\r\n this._minimized = false;\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n ngOnInit() {\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n minimize(): void {\r\n this._minimized = true;\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n maximize(): void {\r\n this._minimized = false;\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n isConferenceCall(): boolean {\r\n if (this.interaction.parties && this.interaction.parties.length > 1) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n collapseKeypress(event: KeyboardEvent) {\r\n if (event.code === 'Enter') {\r\n this.minimize();\r\n }\r\n }\r\n\r\n expandKeypress(event: KeyboardEvent) {\r\n if (event.code === 'Enter') {\r\n this.maximize();\r\n }\r\n }\r\n\r\n}\r\n","import {\r\n Component,\r\n Input,\r\n Output,\r\n EventEmitter,\r\n AfterViewInit,\r\n AfterViewChecked\r\n} from '@angular/core';\r\nimport { IScenario } from '../../models/uilibrary.model';\r\n\r\n@Component({\r\n selector: 'amc-scenario',\r\n templateUrl: './scenario.component.html',\r\n styleUrls: ['./scenario.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class ScenarioComponent implements AfterViewChecked {\r\n @Input() scenario: IScenario;\r\n @Output() minimizedChanged = new EventEmitter();\r\n @Output() isAgentTyping = new EventEmitter<boolean>();\r\n @Output() newMessage = new EventEmitter<string>();\r\n @Output() afterViewChecked = new EventEmitter();\r\n\r\n constructor() {}\r\n\r\n ngAfterViewChecked() {\r\n this.afterViewChecked.emit();\r\n }\r\n\r\n onMinimizedChanged() {\r\n this.minimizedChanged.emit();\r\n }\r\n}\r\n","import { Component, OnInit, Input } from '@angular/core';\r\nimport { IOperation } from '../../models/uilibrary.model';\r\n\r\n/\r\n @ignore\r\n /\r\n@Component({\r\n selector: 'amc-operation',\r\n templateUrl: './operation.component.html',\r\n styleUrls: ['./operation.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class OperationComponent implements OnInit {\r\n @Input() statusText: string;\r\n @Input() callId: string;\r\n @Input() callType: string;\r\n @Input() operations: IOperation[];\r\n\r\n labelledByText = '';\r\n describedByText = '';\r\n\r\n /\r\n @ignore\r\n /\r\n constructor() {\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n ngOnInit() {\r\n if (this.statusText && this.callType) {\r\n this.describedByText = `${this.statusText} ${this.callType}`;\r\n } else if (this.statusText) {\r\n this.describedByText = this.statusText;\r\n } else if (this.callType) {\r\n this.describedByText = this.callType\r\n }\r\n\r\n if (this.callId) {\r\n this.labelledByText = this.callId;\r\n }\r\n }\r\n\r\n operationKeypress(event: KeyboardEvent, operation: IOperation) {\r\n if (event.code === 'Enter') {\r\n operation.handler(operation.operationName, operation.operationMetadata);\r\n }\r\n }\r\n}\r\n","export interface IChatMessage {\r\n username?: string;\r\n text: string;\r\n /\r\n What type of chat message. Defaults to OTHER_PERSON\r\n /\r\n type?: IChatMessageType;\r\n timestamp?: string;\r\n userIcon?: URL;\r\n}\r\n\r\nexport enum IChatMessageType {\r\n AGENT = 'AGENT',\r\n OTHER_PERSON = 'OTHER_PERSON',\r\n INFORMATION = 'INFORMATION'\r\n}\r\n","import { IChatSettings } from './chat.settings';\r\nimport { IChatMessage } from './chat.message';\r\n\r\nexport from './chat.message';\r\nexport * from './chat.settings';\r\n\r\n/*\r\n It is collection of Interaction which need to be displayed on scenario component.\r\n /\r\nexport interface IScenario {\r\n interactions: IInteraction[];\r\n}\r\n\r\nexport interface IInteraction {\r\n /\r\n Unique id for the interaction.\r\n * Note: this interactionId is also used to provide id for the div element.\r\n /\r\n interactionId: string;\r\n properties?: Property[];\r\n associatedData?: Property[];\r\n startTime: number;\r\n displayCallTimer: boolean;\r\n /\r\n parties is supposed to contain data about all the participants in call except agent himself.\r\n /\r\n parties?: IParty[];\r\n /\r\n Operations/buttons which needs to be displayed in interaction and its handlers.\r\n /\r\n operations?: IOperation[];\r\n\r\n /\r\n It contains URLs for minimize, maximize, interaction specific icon urls for interaction.\r\n * And header number which needs to be displayed at top.\r\n /\r\n UIHeadersData: IInteractionUIHeaders;\r\n\r\n /\r\n Should contain identifying information about the main party in the interaction.\r\n /\r\n subheaderData: IPartyHeader;\r\n\r\n /\r\n This enables and configures the chat UI\r\n /\r\n chat?: {\r\n settings: IChatSettings;\r\n messages: IChatMessage[];\r\n isCustomerTyping?: boolean;\r\n };\r\n}\r\n\r\nexport interface IActivity {\r\n interactionId: string;\r\n WhoObject: IActivityDetails;\r\n WhatObject: IActivityDetails;\r\n whoList: IActivityDetails[];\r\n whatList: IActivityDetails[];\r\n CallType: string;\r\n CallDurationInSeconds: string;\r\n Subject: string;\r\n SubjectFieldName: string;\r\n NameFieldName: string;\r\n RelatedToFieldName: string;\r\n Description: string;\r\n Status: string;\r\n ActivityDate: string;\r\n TimeStamp: Date;\r\n ActivityId: string;\r\n quickCommentList: string[];\r\n}\r\n\r\nexport interface IActivityDetails {\r\n objectType: string;\r\n displayName: string;\r\n objectName: string;\r\n objectId: string;\r\n url: string;\r\n}\r\n\r\n/\r\n This contains the main identifying information about the interaction.\r\n /\r\nexport interface IPartyHeader {\r\n /\r\n Image that identifies the type of interaction\r\n * or the type of the identifying information(ex: phone icon for phone number)\r\n /\r\n image?: URL;\r\n /\r\n The tooltip to be displayed when the image is hovered over\r\n /\r\n tooltip?: string;\r\n /\r\n The value to be displayed\r\n /\r\n value: string;\r\n}\r\n\r\n/\r\n It contains URLs for minimize, maximize, interaction specific icon urls for interaction.\r\n * And header number which needs to be displayed at top.\r\n /\r\nexport interface IInteractionUIHeaders {\r\n /\r\n Minimize icon url.\r\n /\r\n minimizeUrl: URL;\r\n\r\n /\r\n Maximize Icon url.\r\n /\r\n maximizeUrl: URL;\r\n\r\n /\r\n This is the URL for the status image.\r\n * @memberof IInteractionUIHeaders\r\n /\r\n statusUrl: URL;\r\n\r\n /\r\n This is the handler for focus(Triggered on click of status).\r\n * @memberof IInteractionUIHeaders\r\n /\r\n focusHandler?: IFocus;\r\n\r\n /\r\n This is the text which is going to be displayed for status of the call.\r\n \r\n @memberof IInteractionUIHeaders\r\n /\r\n statusText: string;\r\n\r\n /\r\n This member will contain the text related to the direction of the call. E.g Inbound, Outbound etc.\r\n * @memberof IInteractionUIHeaders\r\n /\r\n directionText: string;\r\n\r\n /\r\n This data will be used to display hold counter whihc will be the combination of the current hold time and complete hold time.\r\n * @memberof IInteractionUIHeaders\r\n /\r\n holdCounterData?: IHoldCounterData;\r\n\r\n /\r\n If this value is set to true then hold counter is displayed based on the holdCounterData.\r\n * @memberof IInteractionUIHeaders\r\n /\r\n displayHoldCounter: boolean;\r\n}\r\nexport interface ICallDuration {\r\n startTime: number;\r\n endTime: number;\r\n}\r\nexport interface IHoldCounterData {\r\n pastCallDurations?: ICallDuration[];\r\n currentHoldStartTime: number;\r\n}\r\n\r\n/\r\n It contains Operation Icon URL and its hadlers which need to be displayed in Interaction.\r\n /\r\nexport interface IFocus {\r\n /\r\n metadata related to operation.\r\n /\r\n operationMetadata?: IMetadata[];\r\n /\r\n name of the operation.\r\n /\r\n operationName: string;\r\n /\r\n Handler which needs to be invoked when someone clicks on the operation icon.\r\n /\r\n handler: (operationName: string, operationMetadata?: IMetadata[]) => void;\r\n}\r\n\r\n/\r\n It contains Operation Icon URL and its hadlers which need to be displayed in Interaction.\r\n /\r\nexport interface IOperation {\r\n /\r\n metadata related to operation.\r\n /\r\n operationMetadata?: IMetadata[];\r\n /\r\n name of the operation.\r\n /\r\n operationName: string;\r\n /\r\n URL for the icon of operations.\r\n /\r\n icon: URL;\r\n /\r\n Title which needs to be doisplayed when someone hovers over the icon.\r\n /\r\n title: string;\r\n /\r\n Handler which needs to be invoked when someone clicks on the operation icon.\r\n /\r\n handler: (operationName: string, operationMetadata?: IMetadata[]) => void;\r\n /\r\n Browser accesskey to jump instantly to this operation Should conform to AMC norms and consist of a single printable character.\r\n /\r\n accesskey?: string\r\n}\r\n\r\n/\r\n This contains properties and operations to be displayed for conference member.\r\n /\r\nexport interface IParty {\r\n header: IPartyHeader;\r\n properties: Property[];\r\n operations: IOperation[];\r\n}\r\n\r\n/\r\n key value pairs which can be used amongst other interfaces/classes to store metadata of those entities.\r\n /\r\n\r\nexport interface IMetadata {\r\n key: string;\r\n value: string;\r\n}\r\n\r\n/\r\n This interface contains key value pairs, some custom operation which generates display key and display value.\r\n * Also it includes custom operation handler for click event on properties.\r\n /\r\nexport interface IProperty {\r\n /\r\n KEY value to be displayed on component.\r\n /\r\n displayKey?: string;\r\n\r\n /\r\n VALUE to be displayed on component.\r\n /\r\n displayValue?: any;\r\n displayValueType: ValueType;\r\n propertyMetadata?: IMetadata[];\r\n\r\n /\r\n Click event handler for property.\r\n /\r\n customOperations?: IEventHandler;\r\n /\r\n This flag decides if PROPERTY will be displayed on component or not.\r\n /\r\n visible: boolean;\r\n}\r\n\r\n/\r\n A helper method to make instances of [IProperty]\r\n /\r\nexport class Property implements IProperty {\r\n private key: string;\r\n private value: any;\r\n /\r\n KEY value to be displayed on component.\r\n /\r\n displayKey?: string;\r\n\r\n /\r\n VALUE to be displayed on component.\r\n /\r\n displayValue?: any;\r\n displayValueType: ValueType;\r\n propertyMetadata?: IMetadata[];\r\n\r\n /\r\n Click event handler for property.\r\n /\r\n customOperations?: IEventHandler;\r\n /\r\n This flag decides if PROPERTY will be displayed on component or not.\r\n /\r\n visible: boolean;\r\n\r\n /\r\n Operation responsible for generating displayKey and dispkayValur from key and value.\r\n /\r\n displayOperation: () => void = () => {\r\n this.displayKey = this.key;\r\n this.displayValue = this.value;\r\n }\r\n\r\n /\r\n \r\n * @param key\r\n * @param value : if value type is COUNTER then value should be start time in MilliSeconds.\r\n * @param visible\r\n * @param valueType\r\n * @param customOperation\r\n /\r\n constructor(\r\n key: string,\r\n value: any,\r\n visible?: boolean,\r\n valueType?: ValueType,\r\n customOperation?: IEventHandler\r\n ) {\r\n this.key = key;\r\n this.value = value;\r\n visible != null ? (this.visible = visible) : (this.visible = true);\r\n valueType != null\r\n ? (this.displayValueType = valueType)\r\n : (this.displayValueType = ValueType.STRING);\r\n this.customOperations = customOperation;\r\n this.displayOperation();\r\n }\r\n}\r\n\r\n/\r\n Interface which contains eventName and handler associated with it.\r\n /\r\nexport interface IEventHandler {\r\n eventName: string;\r\n handler: (eventName: string, eventMetadata?: IMetadata[]) => void;\r\n eventMetadata?: IMetadata[];\r\n}\r\n\r\n/\r\n enum for Value types of PROPERTY.\r\n /\r\nexport enum ValueType {\r\n STRING,\r\n COUNTER\r\n}\r\n","export function secondsToHms(seconds_in: number): string {\r\n seconds_in = Number(seconds_in);\r\n const h = Math.floor(seconds_in / 3600);\r\n const m = Math.floor(seconds_in % 3600 / 60);\r\n const s = Math.floor(seconds_in % 3600 % 60);\r\n\r\n const hDisplay = h > 0 ? h.toString() + ':' : '';\r\n const mDisplay = m > 0 ? ('0' + m.toString()).slice(-2) + ':' : '00:';\r\n const sDisplay = s > 0 ? ('0' + s.toString()).slice(-2) : '00';\r\n return hDisplay + mDisplay + sDisplay;\r\n}\r\n","import { Component, OnInit, Input, OnDestroy } from '@angular/core';\r\nimport { ValueType, IProperty } from '../../models/uilibrary.model';\r\nimport { secondsToHms } from '../../Helpers';\r\n\r\n/\r\n @ignore\r\n /\r\n@Component({\r\n selector: 'amc-property',\r\n templateUrl: './property.component.html',\r\n styleUrls: ['./property.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class PropertyComponent implements OnInit, OnDestroy {\r\n\r\n @Input() statusText: string;\r\n @Input() callId: string;\r\n @Input() callType: string;\r\n @Input() property: IProperty;\r\n\r\n labelledByText = '';\r\n title = '';\r\n\r\n /\r\n @ignore\r\n /\r\n processedDisplayValue: string;\r\n\r\n /\r\n @ignore\r\n /\r\n private _timerId?: number;\r\n\r\n /\r\n @ignore\r\n /\r\n constructor() {\r\n\r\n this._timerId = null;\r\n this.processedDisplayValue = '';\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n ngOnInit() {\r\n if (this.statusText && this.callType) {\r\n this.labelledByText = `${this.statusText} ${this.callType}`;\r\n } else if (this.statusText) {\r\n this.labelledByText = this.statusText;\r\n } else if (this.callType) {\r\n this.labelledByText = this.callType\r\n }\r\n\r\n if (this.callType && this.callId) {\r\n this.title = `${this.callType} ${this.callId}`\r\n } else if (this.callType) {\r\n this.title = this.callType;\r\n } else if (this.callId) {\r\n this.title = this.callId;\r\n }\r\n\r\n this.initValues();\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n initValues(): void {\r\n if (this.property.displayValueType === ValueType.COUNTER) {\r\n this.startCallCounter();\r\n } else {\r\n this.processedDisplayValue = this.property.displayValue;\r\n }\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n private startCallCounter(): void {\r\n if (this._timerId == null) {\r\n this._timerId = window.setInterval(() => {\r\n const callStartTime: number = this.property.displayValue;\r\n const currentTime: number = new Date().getTime() / 1000;\r\n const secondsPassed: number = Math.floor((currentTime) - (callStartTime / 1000));\r\n this.processedDisplayValue = secondsToHms(secondsPassed);\r\n }, 1000);\r\n }\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n ngOnDestroy(): void {\r\n if (this.property.displayValueType === ValueType.COUNTER) {\r\n // clear the timer.\r\n if (this._timerId != null) {\r\n clearInterval(this._timerId);\r\n this._timerId = null;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, OnInit, Input, OnDestroy } from '@angular/core';\r\nimport { IHoldCounterData, ICallDuration } from '../../models/uilibrary.model';\r\nimport { secondsToHms } from '../../Helpers';\r\n\r\n@Component({\r\n selector: 'amc-holdtimer',\r\n templateUrl: './holdtimer.component.html',\r\n styleUrls: ['./holdtimer.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class HoldtimerComponent implements OnInit, OnDestroy {\r\n @Input() holdCounterData: IHoldCounterData;\r\n @Input() statusText: string;\r\n @Input() callId: string;\r\n\r\n displayTime: string;\r\n labelledByText = '';\r\n\r\n private _timerId?: number;\r\n constructor() {\r\n this.displayTime = '00:00/00:00';\r\n }\r\n\r\n ngOnInit() {\r\n if (this.statusText && this.callId) {\r\n this.labelledByText = `${this.statusText} ${this.callId}`;\r\n } else if (this.statusText) {\r\n this.labelledByText = this.statusText;\r\n } else if (this.callId) {\r\n this.labelledByText = this.callId\r\n }\r\n\r\n this.startCallCounter();\r\n }\r\n /\r\n @ignore\r\n /\r\n private startCallCounter(): void {\r\n const pastTimeInSeconds = this.CaculatePastHoldDuration();\r\n if (this._timerId == null) {\r\n this._timerId = window.setInterval(() => {\r\n const currentTime: number = new Date().getTime() / 1000;\r\n const secondsPassedCurrentCall: number = Math.floor((currentTime) - (this.holdCounterData.currentHoldStartTime / 1000));\r\n this.displayTime = secondsToHms(secondsPassedCurrentCall) +\r\n '/' + secondsToHms(pastTimeInSeconds + secondsPassedCurrentCall);\r\n }, 1000);\r\n }\r\n }\r\n\r\n private CaculatePastHoldDuration(): number {\r\n let pastTimeInSeconds = 0;\r\n if (this.holdCounterData.pastCallDurations) {\r\n this.holdCounterData.pastCallDurations.forEach((holdTimerIterator: ICallDuration) => {\r\n pastTimeInSeconds += (holdTimerIterator.endTime - holdTimerIterator.startTime) / 1000;\r\n });\r\n }\r\n return pastTimeInSeconds;\r\n\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n ngOnDestroy(): void {\r\n // clear the timer.\r\n if (this._timerId != null) {\r\n clearInterval(this._timerId);\r\n this._timerId = null;\r\n }\r\n }\r\n\r\n}\r\n","import { Component, Input, OnInit, OnDestroy } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'amc-duration',\r\n templateUrl: './duration.component.html',\r\n styleUrls: ['./duration.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class DurationComponent implements OnInit, OnDestroy {\r\n @Input() statusText: string;\r\n @Input() callId: string;\r\n @Input() startTime: number;\r\n\r\n displayTime: string;\r\n labelledByText = '';\r\n\r\n private _timerId?: number;\r\n\r\n constructor() {\r\n this.displayTime = '00:00/00:00';\r\n }\r\n\r\n ngOnInit() {\r\n if (this.statusText && this.callId) {\r\n this.labelledByText = `${this.statusText} ${this.callId}`;\r\n } else if (this.statusText) {\r\n this.labelledByText = this.statusText;\r\n } else if (this.callId) {\r\n this.labelledByText = this.callId\r\n }\r\n\r\n this.startCallCounter();\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n private startCallCounter(): void {\r\n if (this._timerId == null) {\r\n this._timerId = window.setInterval(() => {\r\n const callStartTime: number = this.startTime;\r\n const currentTime: number = new Date().getTime() / 1000;\r\n const secondsPassed: number = Math.floor((currentTime) - (callStartTime / 1000));\r\n this.displayTime = Math.floor(secondsPassed / 60) + ':' + ('0' + (secondsPassed % 60)).slice(-2);\r\n }, 1000);\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n // clear the timer.\r\n if (this._timerId != null) {\r\n clearInterval(this._timerId);\r\n this._timerId = null;\r\n }\r\n }\r\n\r\n}\r\n","import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';\r\nimport { IChatMessage, IChatMessageType } from '../../models/chat.message';\r\nimport { IChatSettings } from '../../models/chat.settings';\r\n\r\n@Component({\r\n selector: 'app-chat-box',\r\n templateUrl: './chat-box.component.html',\r\n styleUrls: ['./chat-box.component.scss'],\r\n})\r\nexport class ChatBoxComponent implements AfterViewChecked {\r\n @Input() settings: IChatSettings;\r\n @Input() isTyping = false;\r\n\r\n @Input() messages: IChatMessage[];\r\n private lastCount = -1;\r\n\r\n _isAgentTyping = false;\r\n @Output() isAgentTyping = new EventEmitter<boolean>();\r\n\r\n @Output() newMessage = new EventEmitter<string>();\r\n newMessageText = '';\r\n\r\n @ViewChild('MessagesContainer', { static: true }) messagesContainer: ElementRef;\r\n\r\n usernameToColor: { [username: string]: string } = {};\r\n colors = [\r\n '#81c784',\r\n '#ffab91',\r\n '#f48fb1',\r\n '#29b6f6',\r\n '#e1bee7',\r\n '#9ccc65',\r\n '#ffc107',\r\n '#26c6da',\r\n '#cddc39',\r\n ];\r\n colorsIndex = 0;\r\n agentColor = '#29b6f6';\r\n\r\n constructor() { }\r\n\r\n ngAfterViewChecked() {\r\n if (this.lastCount !== this.messages.length) {\r\n this.lastCount = this.messages.length;\r\n this.scrollToBottom();\r\n }\r\n }\r\n\r\n getColor(message: IChatMessage) {\r\n if (message.type && message.type === IChatMessageType.AGENT) {\r\n return this.agentColor;\r\n } else if (message.username) {\r\n if (!this.usernameToColor[message.username]) {\r\n this.usernameToColor[message.username] = this.colors[this.colorsIndex];\r\n this.colorsIndex = (this.colorsIndex + 1) % this.colors.length;\r\n }\r\n return this.usernameToColor[message.username];\r\n } else {\r\n return this.colors[0];\r\n }\r\n }\r\n\r\n shouldAlignRight(message: IChatMessage) {\r\n return message.type && message.type === IChatMessageType.AGENT;\r\n }\r\n\r\n sendNewMessage() {\r\n if (this.newMessageText) {\r\n this.newMessage.emit(this.newMessageText);\r\n this.newMessageText = '';\r\n }\r\n }\r\n\r\n onNewMessageFocus(event: boolean) {\r\n const isTyping = event && this.newMessageText.length > 0;\r\n if (isTyping !== this._isAgentTyping) {\r\n this._isAgentTyping = isTyping;\r\n this.isAgentTyping.emit(isTyping);\r\n }\r\n }\r\n\r\n onKeyup() {\r\n const isTyping = this.newMessageText.length > 0;\r\n if (isTyping !== this._isAgentTyping) {\r\n this._isAgentTyping = isTyping;\r\n this.isAgentTyping.emit(isTyping);\r\n }\r\n }\r\n\r\n scrollToBottom() {\r\n try {\r\n this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;\r\n }\r\n catch (e) { }\r\n }\r\n}\r\n","import { Component, OnInit, Input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-chat-message',\r\n templateUrl: './chat-message.component.html',\r\n styleUrls: ['./chat-message.component.scss']\r\n})\r\nexport class ChatMessageComponent implements OnInit {\r\n @Input() message: string;\r\n @Input() alignRight = false;\r\n @Input() username: string;\r\n @Input() color: string;\r\n @Input() timestamp: string;\r\n @Input() image: string;\r\n @Input() fallbackImage: string;\r\n\r\n constructor() { }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n}\r\n","import { IDisposition, IDispositionResult } from './../../models/disposition.interface';\r\nimport { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'amc-disposition',\r\n templateUrl: './disposition.component.html',\r\n styleUrls: ['./disposition.component.css']\r\n})\r\nexport class DispositionComponent implements OnInit {\r\n @Input() disposition: IDisposition;\r\n\r\n @Output() dispositionEmitter = new EventEmitter<IDispositionResult>();\r\n\r\n selectedDispositionValue: string = '';\r\n dispositionName: string = '';\r\n\r\n constructor() { }\r\n\r\n ngOnInit() {\r\n for (const metadata of this.disposition.dispositionMetadata) {\r\n if (metadata.key === 'callId') {\r\n this.dispositionName = `disposition_${metadata.value}`;\r\n\r\n break;\r\n }\r\n }\r\n\r\n if (this.disposition.checkedDisposition) {\r\n this.selectedDispositionValue = this.disposition.checkedDisposition;\r\n }\r\n }\r\n\r\n submitDisposition() {\r\n const selectedDisposition: IDispositionResult = {\r\n dispositionId: this.selectedDispositionValue,\r\n dispositionName: this.disposition.disposition.get(this.selectedDispositionValue),\r\n dispositionMetadata: this.disposition.dispositionMetadata\r\n };\r\n\r\n this.dispositionEmitter.emit(selectedDisposition);\r\n }\r\n\r\n selectAndSubmitDisposition(event: KeyboardEvent, dispositionKey: string) {\r\n if (event.code === 'Enter') {\r\n this.selectedDispositionValue = dispositionKey;\r\n this.submitDisposition();\r\n }\r\n }\r\n}\r\n","import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\r\nimport { IActivity, IActivityDetails } from '../../models/uilibrary.model';\r\n\r\n@Component({\r\n selector: 'app-activity',\r\n templateUrl: './activity.component.html',\r\n styleUrls: ['./activity.component.css']\r\n})\r\nexport class ActivityComponent implements OnInit {\r\n\r\nisActivityMaximized: boolean;\r\n@Input() activity: IActivity;\r\n@Output() ActivitySave: EventEmitter<IActivity> = new EventEmitter<IActivity>();\r\n@Output() OnNameSelectChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();\r\n@Output() OnRelatedToChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();\r\n@Output() OnSubjectChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();\r\n@Output() OnCallNotesChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();\r\n\r\n constructor() {\r\n this.isActivityMaximized = true;\r\n }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n public onNameSelectChange(event) {\r\n this.activity.WhoObject = this.getWho(event.currentTarget.value);\r\n this.OnNameSelectChange.emit(this.activity);\r\n }\r\n\r\n public parseWhoObject(whoObject: IActivityDetails): string {\r\n return whoObject.objectType + ': ' + whoObject.objectName;\r\n }\r\n\r\n public parseWhatObject(whatObject: IActivityDetails): string {\r\n return whatObject.objectType + ': ' + whatObject.objectName;\r\n }\r\n\r\n public onRelatedToChange(event) {\r\n this.activity.WhatObject = this.getWhat(event.currentTarget.value);\r\n this.OnRelatedToChange.emit(this.activity);\r\n }\r\n\r\n public onSubjectChange(event) {\r\n this.activity.Subject = event.srcElement.value;\r\n this.OnSubjectChange.emit(this.activity);\r\n }\r\n public onCallNotesChange(event) {\r\n this.activity.Subject = event.srcElement.value.trim();\r\n this.OnCallNotesChange.emit(this.activity);\r\n }\r\n\r\n public getWho(id): IActivityDetails {\r\n for (let i = 0; i < this.activity.whoList.length; i++) {\r\n if (this.activity.whoList[i].objectId === id) {\r\n return this.activity.whoList[i];\r\n }\r\n }\r\n }\r\n public getWhat(id): IActivityDetails {\r\n for (let i = 0; i < this.activity.whatList.length; i++) {\r\n if (this.activity.whatList[i].objectId === id) {\r\n return this.activity.whatList[i];\r\n }\r\n }\r\n }\r\n\r\n public loadQuickComment(value) {\r\n this.activity.Description = this.activity.Description + this.activity.quickCommentList[value];\r\n }\r\n\r\n public activitySave(clearActivityFields) {\r\n this.ActivitySave.emit(this.activity);\r\n }\r\n}\r\n","import { ILoginData } from './../../models/login.interface';\r\nimport { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\r\nimport { NgForm } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'amc-login',\r\n templateUrl: './login.component.html',\r\n styleUrls: ['./login.component.css']\r\n})\r\nexport class LoginComponent implements OnInit {\r\n @Input() loginData: ILoginData;\r\n @Output() loginDetailsProvided = new EventEmitter<ILoginData>();\r\n\r\n constructor() { }\r\n\r\n ngOnInit() {\r\n if (!this.loginData.header) {\r\n this.loginData.header = 'Login';\r\n }\r\n\r\n for (let field of this.loginData.fields) {\r\n if (!field.isInvalid) {\r\n field.isInvalid = false;\r\n }\r\n }\r\n }\r\n\r\n onLogin(loginForm: NgForm) {\r\n for (const field of this.loginData.fields) {\r\n field.value = loginForm.value[field.name];\r\n }\r\n\r\n this.loginDetailsProvided.emit(this.loginData);\r\n }\r\n\r\n focusOutOfInput(loginForm: NgForm, field) {\r\n if (!loginForm.controls[field.name].valid) {\r\n field.isInvalid = true;\r\n }\r\n\r\n // console.log(loginForm);\r\n // console.log(field);\r\n }\r\n}\r\n","import { NgModule, Injector } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { InteractionComponent } from './components/interaction/interaction.component';\r\nimport { ScenarioComponent } from './components/scenario/scenario.component';\r\nimport { OperationComponent } from './components/operation/operation.component';\r\nimport { PropertyComponent } from './components/property/property.component';\r\nimport { HoldtimerComponent } from './components/holdtimer/holdtimer.component';\r\nimport { DurationComponent } from './components/duration/duration.component';\r\nimport { ChatBoxComponent } from './components/chat-box/chat-box.component';\r\nimport { ChatMessageComponent } from './components/chat-message/chat-message.component';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { createCustomElement } from '@angular/elements';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { ElementZoneStrategyFactory } from 'elements-zone-strategy';\r\nimport { DispositionComponent } from './components/disposition/disposition.component';\r\nimport { ActivityComponent } from './components/activity/activity.component';\r\nimport { LoginComponent } from './components/login/login.component';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, CommonModule, FormsModule],\r\n declarations: [\r\n InteractionComponent,\r\n ScenarioComponent,\r\n OperationComponent,\r\n PropertyComponent,\r\n HoldtimerComponent,\r\n DurationComponent,\r\n ChatBoxComponent,\r\n ChatMessageComponent,\r\n DispositionComponent,\r\n ActivityComponent,\r\n LoginComponent\r\n ],\r\n entryComponents: [ScenarioComponent, DispositionComponent, LoginComponent],\r\n bootstrap: [],\r\n exports: [ScenarioComponent, DispositionComponent, LoginComponent]\r\n})\r\nexport class UILibraryModule {\r\n constructor(private injector: Injector) { }\r\n\r\n ngDoBootstrap(app) {\r\n if (!customElements.get('amc-webcomponents-scenario')) {\r\n const strategyFactory = new ElementZoneStrategyFactory(\r\n ScenarioComponent,\r\n this.injector\r\n );\r\n customElements.define(\r\n 'amc-webcomponents-scenario',\r\n createCustomElement(ScenarioComponent, {\r\n injector: this.injector,\r\n strategyFactory: strategyFactory\r\n })\r\n );\r\n }\r\n if (!customElements.get('amc-webcomponents-disposition')) {\r\n const strategyFactory = new ElementZoneStrategyFactory(\r\n DispositionComponent,\r\n this.injector\r\n );\r\n customElements.define(\r\n 'amc-webcomponents-disposition',\r\n createCustomElement(DispositionComponent, {\r\n injector: this.injector,\r\n strategyFactory: strategyFactory\r\n })\r\n );\r\n }\r\n if (!customElements.get('amc-webcomponents-login')) {\r\n const strategyFactory = new ElementZoneStrategyFactory(\r\n LoginComponent,\r\n this.injector\r\n );\r\n customElements.define(\r\n 'amc-webcomponents-login',\r\n createCustomElement(LoginComponent, {\r\n injector: this.injector,\r\n strategyFactory: strategyFactory\r\n })\r\n );\r\n }\r\n }\r\n}\r\n\r\nexport from './models/uilibrary.model';\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n\nexport {ActivityComponent as ɵj} from './projects/UILibrary/src/app/components/activity/activity.component';\nexport {ChatBoxComponent as ɵg} from './projects/UILibrary/src/app/components/chat-box/chat-box.component';\nexport {ChatMessageComponent as ɵh} from './projects/UILibrary/src/app/components/chat-message/chat-message.component';\nexport {DispositionComponent as ɵi} from './projects/UILibrary/src/app/components/disposition/disposition.component';\nexport {DurationComponent as ɵf} from './projects/UILibrary/src/app/components/duration/duration.component';\nexport {HoldtimerComponent as ɵe} from './projects/UILibrary/src/app/components/holdtimer/holdtimer.component';\nexport {InteractionComponent as ɵa} from './projects/UILibrary/src/app/components/interaction/interaction.component';\nexport {LoginComponent as ɵk} from './projects/UILibrary/src/app/components/login/login.component';\nexport {OperationComponent as ɵc} from './projects/UILibrary/src/app/components/operation/operation.component';\nexport {PropertyComponent as ɵd} from './projects/UILibrary/src/app/components/property/property.component';\nexport {ScenarioComponent as ɵb} from './projects/UILibrary/src/app/components/scenario/scenario.component';"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"amc-technology-ui-library.js","sources":["ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/interaction/interaction.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/scenario/scenario.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/operation/operation.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/models/chat.message.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/models/uilibrary.model.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/Helpers.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/property/property.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/holdtimer/holdtimer.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/duration/duration.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/chat-box/chat-box.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/chat-message/chat-message.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/disposition/disposition.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/activity/activity.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/components/login/login.component.ts","ng://@amc-technology/ui-library/projects/UILibrary/src/app/uilibrary.module.ts","ng://@amc-technology/ui-library/amc-technology-ui-library.ts"],"sourcesContent":["import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\r\nimport { IInteraction } from '../../models/uilibrary.model';\r\n\r\n/*\r\n @ignore\r\n /\r\n@Component({\r\n selector: 'amc-interaction',\r\n templateUrl: './interaction.component.html',\r\n styleUrls: ['./interaction.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class InteractionComponent implements OnInit {\r\n\r\n @Input() interaction: IInteraction;\r\n @Output() minimizedChanged: EventEmitter<boolean> = new EventEmitter();\r\n @Output() isAgentTyping = new EventEmitter<boolean>();\r\n @Output() newMessage = new EventEmitter<string>();\r\n /\r\n @ignore\r\n /\r\n minimized: boolean;\r\n set _minimized(value) {\r\n this.minimized = value;\r\n this.minimizedChanged.emit(value);\r\n }\r\n get _minimized() {\r\n return this.minimized;\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n constructor() {\r\n this._minimized = false;\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n ngOnInit() {\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n minimize(): void {\r\n this._minimized = true;\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n maximize(): void {\r\n this._minimized = false;\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n isConferenceCall(): boolean {\r\n if (this.interaction.parties && this.interaction.parties.length > 1) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n collapseKeypress(event: KeyboardEvent) {\r\n if (event.code === 'Enter') {\r\n this.minimize();\r\n }\r\n }\r\n\r\n expandKeypress(event: KeyboardEvent) {\r\n if (event.code === 'Enter') {\r\n this.maximize();\r\n }\r\n }\r\n\r\n}\r\n","import {\r\n Component,\r\n Input,\r\n Output,\r\n EventEmitter,\r\n AfterViewInit,\r\n AfterViewChecked\r\n} from '@angular/core';\r\nimport { IScenario } from '../../models/uilibrary.model';\r\n\r\n@Component({\r\n selector: 'amc-scenario',\r\n templateUrl: './scenario.component.html',\r\n styleUrls: ['./scenario.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class ScenarioComponent implements AfterViewChecked {\r\n @Input() scenario: IScenario;\r\n @Output() minimizedChanged = new EventEmitter();\r\n @Output() isAgentTyping = new EventEmitter<boolean>();\r\n @Output() newMessage = new EventEmitter<string>();\r\n @Output() afterViewChecked = new EventEmitter();\r\n\r\n constructor() {}\r\n\r\n ngAfterViewChecked() {\r\n this.afterViewChecked.emit();\r\n }\r\n\r\n onMinimizedChanged() {\r\n this.minimizedChanged.emit();\r\n }\r\n}\r\n","import { Component, OnInit, Input } from '@angular/core';\r\nimport { IOperation } from '../../models/uilibrary.model';\r\n\r\n/\r\n @ignore\r\n /\r\n@Component({\r\n selector: 'amc-operation',\r\n templateUrl: './operation.component.html',\r\n styleUrls: ['./operation.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class OperationComponent implements OnInit {\r\n @Input() statusText: string;\r\n @Input() callId: string;\r\n @Input() callType: string;\r\n @Input() operations: IOperation[];\r\n\r\n labelledByText = '';\r\n describedByText = '';\r\n\r\n /\r\n @ignore\r\n /\r\n constructor() {\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n ngOnInit() {\r\n if (this.statusText && this.callType) {\r\n this.describedByText = `${this.statusText} ${this.callType}`;\r\n } else if (this.statusText) {\r\n this.describedByText = this.statusText;\r\n } else if (this.callType) {\r\n this.describedByText = this.callType\r\n }\r\n\r\n if (this.callId) {\r\n this.labelledByText = this.callId;\r\n }\r\n }\r\n\r\n operationKeypress(event: KeyboardEvent, operation: IOperation) {\r\n if (event.code === 'Enter') {\r\n operation.handler(operation.operationName, operation.operationMetadata);\r\n }\r\n }\r\n}\r\n","export interface IChatMessage {\r\n username?: string;\r\n text: string;\r\n /\r\n What type of chat message. Defaults to OTHER_PERSON\r\n /\r\n type?: IChatMessageType;\r\n timestamp?: string;\r\n userIcon?: URL;\r\n}\r\n\r\nexport enum IChatMessageType {\r\n AGENT = 'AGENT',\r\n OTHER_PERSON = 'OTHER_PERSON',\r\n INFORMATION = 'INFORMATION'\r\n}\r\n","import { IChatSettings } from './chat.settings';\r\nimport { IChatMessage } from './chat.message';\r\n\r\nexport from './chat.message';\r\nexport * from './chat.settings';\r\n\r\n/*\r\n It is collection of Interaction which need to be displayed on scenario component.\r\n /\r\nexport interface IScenario {\r\n interactions: IInteraction[];\r\n}\r\n\r\nexport interface IInteraction {\r\n /\r\n Unique id for the interaction.\r\n * Note: this interactionId is also used to provide id for the div element.\r\n /\r\n interactionId: string;\r\n properties?: Property[];\r\n associatedData?: Property[];\r\n startTime: number;\r\n displayCallTimer: boolean;\r\n /\r\n parties is supposed to contain data about all the participants in call except agent himself.\r\n /\r\n parties?: IParty[];\r\n /\r\n Operations/buttons which needs to be displayed in interaction and its handlers.\r\n /\r\n operations?: IOperation[];\r\n\r\n /\r\n It contains URLs for minimize, maximize, interaction specific icon urls for interaction.\r\n * And header number which needs to be displayed at top.\r\n /\r\n UIHeadersData: IInteractionUIHeaders;\r\n\r\n /\r\n Should contain identifying information about the main party in the interaction.\r\n /\r\n subheaderData: IPartyHeader;\r\n\r\n /\r\n This enables and configures the chat UI\r\n /\r\n chat?: {\r\n settings: IChatSettings;\r\n messages: IChatMessage[];\r\n isCustomerTyping?: boolean;\r\n };\r\n}\r\n\r\nexport interface IActivity {\r\n interactionId: string;\r\n WhoObject: IActivityDetails;\r\n WhatObject: IActivityDetails;\r\n whoList: IActivityDetails[];\r\n whatList: IActivityDetails[];\r\n CallType: string;\r\n CallDurationInSeconds: string;\r\n Subject: string;\r\n SubjectFieldName: string;\r\n NameFieldName: string;\r\n RelatedToFieldName: string;\r\n Description: string;\r\n Status: string;\r\n ActivityDate: string;\r\n TimeStamp: Date;\r\n ActivityId: string;\r\n quickCommentList: string[];\r\n}\r\n\r\nexport interface IActivityDetails {\r\n objectType: string;\r\n displayName: string;\r\n objectName: string;\r\n objectId: string;\r\n url: string;\r\n}\r\n\r\n/\r\n This contains the main identifying information about the interaction.\r\n /\r\nexport interface IPartyHeader {\r\n /\r\n Image that identifies the type of interaction\r\n * or the type of the identifying information(ex: phone icon for phone number)\r\n /\r\n image?: URL;\r\n /\r\n The tooltip to be displayed when the image is hovered over\r\n /\r\n tooltip?: string;\r\n /\r\n The value to be displayed\r\n /\r\n value: string;\r\n}\r\n\r\n/\r\n It contains URLs for minimize, maximize, interaction specific icon urls for interaction.\r\n * And header number which needs to be displayed at top.\r\n /\r\nexport interface IInteractionUIHeaders {\r\n /\r\n Minimize icon url.\r\n /\r\n minimizeUrl: URL;\r\n\r\n /\r\n Maximize Icon url.\r\n /\r\n maximizeUrl: URL;\r\n\r\n /\r\n This is the URL for the status image.\r\n * @memberof IInteractionUIHeaders\r\n /\r\n statusUrl: URL;\r\n\r\n /\r\n This is the handler for focus(Triggered on click of status).\r\n * @memberof IInteractionUIHeaders\r\n /\r\n focusHandler?: IFocus;\r\n\r\n /\r\n This is the text which is going to be displayed for status of the call.\r\n \r\n @memberof IInteractionUIHeaders\r\n /\r\n statusText: string;\r\n\r\n /\r\n This member will contain the text related to the direction of the call. E.g Inbound, Outbound etc.\r\n * @memberof IInteractionUIHeaders\r\n /\r\n directionText: string;\r\n\r\n /\r\n This data will be used to display hold counter whihc will be the combination of the current hold time and complete hold time.\r\n * @memberof IInteractionUIHeaders\r\n /\r\n holdCounterData?: IHoldCounterData;\r\n\r\n /\r\n If this value is set to true then hold counter is displayed based on the holdCounterData.\r\n * @memberof IInteractionUIHeaders\r\n /\r\n displayHoldCounter: boolean;\r\n}\r\nexport interface ICallDuration {\r\n startTime: number;\r\n endTime: number;\r\n}\r\nexport interface IHoldCounterData {\r\n pastCallDurations?: ICallDuration[];\r\n currentHoldStartTime: number;\r\n}\r\n\r\n/\r\n It contains Operation Icon URL and its hadlers which need to be displayed in Interaction.\r\n /\r\nexport interface IFocus {\r\n /\r\n metadata related to operation.\r\n /\r\n operationMetadata?: IMetadata[];\r\n /\r\n name of the operation.\r\n /\r\n operationName: string;\r\n /\r\n Handler which needs to be invoked when someone clicks on the operation icon.\r\n /\r\n handler: (operationName: string, operationMetadata?: IMetadata[]) => void;\r\n}\r\n\r\n/\r\n It contains Operation Icon URL and its hadlers which need to be displayed in Interaction.\r\n /\r\nexport interface IOperation {\r\n /\r\n metadata related to operation.\r\n /\r\n operationMetadata?: IMetadata[];\r\n /\r\n name of the operation.\r\n /\r\n operationName: string;\r\n /\r\n URL for the icon of operations.\r\n /\r\n icon: URL;\r\n /\r\n Title which needs to be doisplayed when someone hovers over the icon.\r\n /\r\n title: string;\r\n /\r\n Handler which needs to be invoked when someone clicks on the operation icon.\r\n /\r\n handler: (operationName: string, operationMetadata?: IMetadata[]) => void;\r\n /\r\n Browser accesskey to jump instantly to this operation Should conform to AMC norms and consist of a single printable character.\r\n /\r\n accesskey?: string\r\n}\r\n\r\n/\r\n This contains properties and operations to be displayed for conference member.\r\n /\r\nexport interface IParty {\r\n header: IPartyHeader;\r\n properties: Property[];\r\n operations: IOperation[];\r\n}\r\n\r\n/\r\n key value pairs which can be used amongst other interfaces/classes to store metadata of those entities.\r\n /\r\n\r\nexport interface IMetadata {\r\n key: string;\r\n value: string;\r\n}\r\n\r\n/\r\n This interface contains key value pairs, some custom operation which generates display key and display value.\r\n * Also it includes custom operation handler for click event on properties.\r\n /\r\nexport interface IProperty {\r\n /\r\n KEY value to be displayed on component.\r\n /\r\n displayKey?: string;\r\n\r\n /\r\n VALUE to be displayed on component.\r\n /\r\n displayValue?: any;\r\n displayValueType: ValueType;\r\n propertyMetadata?: IMetadata[];\r\n\r\n /\r\n Click event handler for property.\r\n /\r\n customOperations?: IEventHandler;\r\n /\r\n This flag decides if PROPERTY will be displayed on component or not.\r\n /\r\n visible: boolean;\r\n}\r\n\r\n/\r\n A helper method to make instances of [IProperty]\r\n /\r\nexport class Property implements IProperty {\r\n private key: string;\r\n private value: any;\r\n /\r\n KEY value to be displayed on component.\r\n /\r\n displayKey?: string;\r\n\r\n /\r\n VALUE to be displayed on component.\r\n /\r\n displayValue?: any;\r\n displayValueType: ValueType;\r\n propertyMetadata?: IMetadata[];\r\n\r\n /\r\n Click event handler for property.\r\n /\r\n customOperations?: IEventHandler;\r\n /\r\n This flag decides if PROPERTY will be displayed on component or not.\r\n /\r\n visible: boolean;\r\n\r\n /\r\n Operation responsible for generating displayKey and dispkayValur from key and value.\r\n /\r\n displayOperation: () => void = () => {\r\n this.displayKey = this.key;\r\n this.displayValue = this.value;\r\n }\r\n\r\n /\r\n \r\n * @param key\r\n * @param value : if value type is COUNTER then value should be start time in MilliSeconds.\r\n * @param visible\r\n * @param valueType\r\n * @param customOperation\r\n /\r\n constructor(\r\n key: string,\r\n value: any,\r\n visible?: boolean,\r\n valueType?: ValueType,\r\n customOperation?: IEventHandler\r\n ) {\r\n this.key = key;\r\n this.value = value;\r\n visible != null ? (this.visible = visible) : (this.visible = true);\r\n valueType != null\r\n ? (this.displayValueType = valueType)\r\n : (this.displayValueType = ValueType.STRING);\r\n this.customOperations = customOperation;\r\n this.displayOperation();\r\n }\r\n}\r\n\r\n/\r\n Interface which contains eventName and handler associated with it.\r\n /\r\nexport interface IEventHandler {\r\n eventName: string;\r\n handler: (eventName: string, eventMetadata?: IMetadata[]) => void;\r\n eventMetadata?: IMetadata[];\r\n}\r\n\r\n/\r\n enum for Value types of PROPERTY.\r\n /\r\nexport enum ValueType {\r\n STRING,\r\n COUNTER\r\n}\r\n","export function secondsToHms(seconds_in: number): string {\r\n seconds_in = Number(seconds_in);\r\n const h = Math.floor(seconds_in / 3600);\r\n const m = Math.floor(seconds_in % 3600 / 60);\r\n const s = Math.floor(seconds_in % 3600 % 60);\r\n\r\n const hDisplay = h > 0 ? h.toString() + ':' : '';\r\n const mDisplay = m > 0 ? ('0' + m.toString()).slice(-2) + ':' : '00:';\r\n const sDisplay = s > 0 ? ('0' + s.toString()).slice(-2) : '00';\r\n return hDisplay + mDisplay + sDisplay;\r\n}\r\n","import { Component, OnInit, Input, OnDestroy } from '@angular/core';\r\nimport { ValueType, IProperty } from '../../models/uilibrary.model';\r\nimport { secondsToHms } from '../../Helpers';\r\n\r\n/\r\n @ignore\r\n /\r\n@Component({\r\n selector: 'amc-property',\r\n templateUrl: './property.component.html',\r\n styleUrls: ['./property.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class PropertyComponent implements OnInit, OnDestroy {\r\n\r\n @Input() statusText: string;\r\n @Input() callId: string;\r\n @Input() callType: string;\r\n @Input() property: IProperty;\r\n\r\n labelledByText = '';\r\n title = '';\r\n\r\n /\r\n @ignore\r\n /\r\n processedDisplayValue: string;\r\n\r\n /\r\n @ignore\r\n /\r\n private _timerId?: number;\r\n\r\n /\r\n @ignore\r\n /\r\n constructor() {\r\n\r\n this._timerId = null;\r\n this.processedDisplayValue = '';\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n ngOnInit() {\r\n if (this.statusText && this.callType) {\r\n this.labelledByText = `${this.statusText} ${this.callType}`;\r\n } else if (this.statusText) {\r\n this.labelledByText = this.statusText;\r\n } else if (this.callType) {\r\n this.labelledByText = this.callType\r\n }\r\n\r\n if (this.callType && this.callId) {\r\n this.title = `${this.callType} ${this.callId}`\r\n } else if (this.callType) {\r\n this.title = this.callType;\r\n } else if (this.callId) {\r\n this.title = this.callId;\r\n }\r\n\r\n this.initValues();\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n initValues(): void {\r\n if (this.property.displayValueType === ValueType.COUNTER) {\r\n this.startCallCounter();\r\n } else {\r\n this.processedDisplayValue = this.property.displayValue;\r\n }\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n private startCallCounter(): void {\r\n if (this._timerId == null) {\r\n this._timerId = window.setInterval(() => {\r\n const callStartTime: number = this.property.displayValue;\r\n const currentTime: number = new Date().getTime() / 1000;\r\n const secondsPassed: number = Math.floor((currentTime) - (callStartTime / 1000));\r\n this.processedDisplayValue = secondsToHms(secondsPassed);\r\n }, 1000);\r\n }\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n ngOnDestroy(): void {\r\n if (this.property.displayValueType === ValueType.COUNTER) {\r\n // clear the timer.\r\n if (this._timerId != null) {\r\n clearInterval(this._timerId);\r\n this._timerId = null;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, OnInit, Input, OnDestroy } from '@angular/core';\r\nimport { IHoldCounterData, ICallDuration } from '../../models/uilibrary.model';\r\nimport { secondsToHms } from '../../Helpers';\r\n\r\n@Component({\r\n selector: 'amc-holdtimer',\r\n templateUrl: './holdtimer.component.html',\r\n styleUrls: ['./holdtimer.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class HoldtimerComponent implements OnInit, OnDestroy {\r\n @Input() holdCounterData: IHoldCounterData;\r\n @Input() statusText: string;\r\n @Input() callId: string;\r\n\r\n displayTime: string;\r\n labelledByText = '';\r\n\r\n private _timerId?: number;\r\n constructor() {\r\n this.displayTime = '00:00/00:00';\r\n }\r\n\r\n ngOnInit() {\r\n if (this.statusText && this.callId) {\r\n this.labelledByText = `${this.statusText} ${this.callId}`;\r\n } else if (this.statusText) {\r\n this.labelledByText = this.statusText;\r\n } else if (this.callId) {\r\n this.labelledByText = this.callId\r\n }\r\n\r\n this.startCallCounter();\r\n }\r\n /\r\n @ignore\r\n /\r\n private startCallCounter(): void {\r\n const pastTimeInSeconds = this.CaculatePastHoldDuration();\r\n if (this._timerId == null) {\r\n this._timerId = window.setInterval(() => {\r\n const currentTime: number = new Date().getTime() / 1000;\r\n const secondsPassedCurrentCall: number = Math.floor((currentTime) - (this.holdCounterData.currentHoldStartTime / 1000));\r\n this.displayTime = secondsToHms(secondsPassedCurrentCall) +\r\n '/' + secondsToHms(pastTimeInSeconds + secondsPassedCurrentCall);\r\n }, 1000);\r\n }\r\n }\r\n\r\n private CaculatePastHoldDuration(): number {\r\n let pastTimeInSeconds = 0;\r\n if (this.holdCounterData.pastCallDurations) {\r\n this.holdCounterData.pastCallDurations.forEach((holdTimerIterator: ICallDuration) => {\r\n pastTimeInSeconds += (holdTimerIterator.endTime - holdTimerIterator.startTime) / 1000;\r\n });\r\n }\r\n return pastTimeInSeconds;\r\n\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n ngOnDestroy(): void {\r\n // clear the timer.\r\n if (this._timerId != null) {\r\n clearInterval(this._timerId);\r\n this._timerId = null;\r\n }\r\n }\r\n\r\n}\r\n","import { Component, Input, OnInit, OnDestroy } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'amc-duration',\r\n templateUrl: './duration.component.html',\r\n styleUrls: ['./duration.component.scss', './../uilibrary.module.scss']\r\n})\r\nexport class DurationComponent implements OnInit, OnDestroy {\r\n @Input() statusText: string;\r\n @Input() callId: string;\r\n @Input() startTime: number;\r\n\r\n displayTime: string;\r\n labelledByText = '';\r\n\r\n private _timerId?: number;\r\n\r\n constructor() {\r\n this.displayTime = '00:00/00:00';\r\n }\r\n\r\n ngOnInit() {\r\n if (this.statusText && this.callId) {\r\n this.labelledByText = `${this.statusText} ${this.callId}`;\r\n } else if (this.statusText) {\r\n this.labelledByText = this.statusText;\r\n } else if (this.callId) {\r\n this.labelledByText = this.callId\r\n }\r\n\r\n this.startCallCounter();\r\n }\r\n\r\n /\r\n @ignore\r\n /\r\n private startCallCounter(): void {\r\n if (this._timerId == null) {\r\n this._timerId = window.setInterval(() => {\r\n const callStartTime: number = this.startTime;\r\n const currentTime: number = new Date().getTime() / 1000;\r\n const secondsPassed: number = Math.floor((currentTime) - (callStartTime / 1000));\r\n this.displayTime = Math.floor(secondsPassed / 60) + ':' + ('0' + (secondsPassed % 60)).slice(-2);\r\n }, 1000);\r\n }\r\n }\r\n\r\n ngOnDestroy(): void {\r\n // clear the timer.\r\n if (this._timerId != null) {\r\n clearInterval(this._timerId);\r\n this._timerId = null;\r\n }\r\n }\r\n\r\n}\r\n","import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, OnInit, Renderer2 } from '@angular/core';\r\nimport { IChatMessage, IChatMessageType } from '../../models/chat.message';\r\nimport { IChatSettings } from '../../models/chat.settings';\r\n\r\n@Component({\r\n selector: 'app-chat-box',\r\n templateUrl: './chat-box.component.html',\r\n styleUrls: ['./chat-box.component.scss'],\r\n})\r\nexport class ChatBoxComponent implements AfterViewChecked, OnInit {\r\n @Input() settings: IChatSettings;\r\n @Input() isTyping = false;\r\n\r\n @Input() messages: IChatMessage[];\r\n private lastCount = -1;\r\n\r\n _isAgentTyping = false;\r\n @Output() isAgentTyping = new EventEmitter<boolean>();\r\n\r\n @Output() newMessage = new EventEmitter<string>();\r\n newMessageText = '';\r\n\r\n @ViewChild('MessagesContainer', { static: true }) messagesContainer: ElementRef;\r\n @ViewChild('autofocus', { static: false }) autofocus: ElementRef;\r\n\r\n usernameToColor: { [username: string]: string } = {};\r\n colors = [\r\n '#c2c4c4',\r\n '#ffab91',\r\n '#f48fb1',\r\n '#29b6f6',\r\n '#e1bee7',\r\n '#9ccc65',\r\n '#ffc107',\r\n '#26c6da',\r\n '#cddc39',\r\n ];\r\n colorsIndex = 0;\r\n agentColor = '#2db0e0';\r\n\r\n constructor(private renderer:Renderer2) { }\r\n ngOnInit(): void {\r\n this.renderer.selectRootElement('#autofocus').focus();\r\n }\r\n\r\n\r\n ngAfterViewChecked() {\r\n if (this.lastCount !== this.messages.length) {\r\n this.lastCount = this.messages.length;\r\n this.scrollToBottom();\r\n }\r\n }\r\n\r\n getColor(message: IChatMessage) {\r\n if (message.type && message.type === IChatMessageType.AGENT) {\r\n return this.agentColor;\r\n } else if (message.username) {\r\n if (!this.usernameToColor[message.username]) {\r\n this.usernameToColor[message.username] = this.colors[this.colorsIndex];\r\n this.colorsIndex = (this.colorsIndex + 1) % this.colors.length;\r\n }\r\n return this.usernameToColor[message.username];\r\n } else {\r\n return this.colors[0];\r\n }\r\n }\r\n\r\n shouldAlignRight(message: IChatMessage) {\r\n return message.type && message.type === IChatMessageType.AGENT;\r\n }\r\n\r\n sendNewMessage(event) {\r\n event.preventDefault();\r\n if (this.newMessageText) {\r\n this.newMessage.emit(this.newMessageText);\r\n this.newMessageText = '';\r\n }\r\n this.renderer.selectRootElement('#autofocus').focus();\r\n }\r\n\r\n onNewMessageFocus(event: boolean) {\r\n const isTyping = event && this.newMessageText.length > 0;\r\n if (isTyping !== this._isAgentTyping) {\r\n this._isAgentTyping = isTyping;\r\n this.isAgentTyping.emit(isTyping);\r\n }\r\n }\r\n\r\n onKeyup() {\r\n const isTyping = this.newMessageText.length > 0;\r\n if (isTyping !== this._isAgentTyping) {\r\n this._isAgentTyping = isTyping;\r\n this.isAgentTyping.emit(isTyping);\r\n }\r\n }\r\n\r\n scrollToBottom() {\r\n try {\r\n this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;\r\n }\r\n catch (e) { }\r\n }\r\n}\r\n","import { Component, OnInit, Input } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-chat-message',\r\n templateUrl: './chat-message.component.html',\r\n styleUrls: ['./chat-message.component.scss']\r\n})\r\nexport class ChatMessageComponent implements OnInit {\r\n @Input() message: string;\r\n @Input() alignRight = false;\r\n @Input() username: string;\r\n @Input() color: string;\r\n @Input() timestamp: string;\r\n @Input() image: string;\r\n @Input() fallbackImage: string;\r\n\r\n constructor() { }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n}\r\n","import { IDisposition, IDispositionResult } from './../../models/disposition.interface';\r\nimport { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'amc-disposition',\r\n templateUrl: './disposition.component.html',\r\n styleUrls: ['./disposition.component.css']\r\n})\r\nexport class DispositionComponent implements OnInit {\r\n @Input() disposition: IDisposition;\r\n\r\n @Output() dispositionEmitter = new EventEmitter<IDispositionResult>();\r\n\r\n selectedDispositionValue: string = '';\r\n dispositionName: string = '';\r\n\r\n constructor() { }\r\n\r\n ngOnInit() {\r\n for (const metadata of this.disposition.dispositionMetadata) {\r\n if (metadata.key === 'callId') {\r\n this.dispositionName = `disposition_${metadata.value}`;\r\n\r\n break;\r\n }\r\n }\r\n\r\n if (this.disposition.checkedDisposition) {\r\n this.selectedDispositionValue = this.disposition.checkedDisposition;\r\n }\r\n }\r\n\r\n submitDisposition() {\r\n const selectedDisposition: IDispositionResult = {\r\n dispositionId: this.selectedDispositionValue,\r\n dispositionName: this.disposition.disposition.get(this.selectedDispositionValue),\r\n dispositionMetadata: this.disposition.dispositionMetadata\r\n };\r\n\r\n this.dispositionEmitter.emit(selectedDisposition);\r\n }\r\n\r\n selectAndSubmitDisposition(event: KeyboardEvent, dispositionKey: string) {\r\n if (event.code === 'Enter') {\r\n this.selectedDispositionValue = dispositionKey;\r\n this.submitDisposition();\r\n }\r\n }\r\n}\r\n","import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';\r\nimport { IActivity, IActivityDetails } from '../../models/uilibrary.model';\r\n\r\n@Component({\r\n selector: 'app-activity',\r\n templateUrl: './activity.component.html',\r\n styleUrls: ['./activity.component.css']\r\n})\r\nexport class ActivityComponent implements OnInit {\r\n\r\nisActivityMaximized: boolean;\r\n@Input() activity: IActivity;\r\n@Output() ActivitySave: EventEmitter<IActivity> = new EventEmitter<IActivity>();\r\n@Output() OnNameSelectChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();\r\n@Output() OnRelatedToChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();\r\n@Output() OnSubjectChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();\r\n@Output() OnCallNotesChange: EventEmitter<IActivity> = new EventEmitter<IActivity>();\r\n\r\n constructor() {\r\n this.isActivityMaximized = true;\r\n }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n public onNameSelectChange(event) {\r\n this.activity.WhoObject = this.getWho(event.currentTarget.value);\r\n this.OnNameSelectChange.emit(this.activity);\r\n }\r\n\r\n public parseWhoObject(whoObject: IActivityDetails): string {\r\n return whoObject.objectType + ': ' + whoObject.objectName;\r\n }\r\n\r\n public parseWhatObject(whatObject: IActivityDetails): string {\r\n return whatObject.objectType + ': ' + whatObject.objectName;\r\n }\r\n\r\n public onRelatedToChange(event) {\r\n this.activity.WhatObject = this.getWhat(event.currentTarget.value);\r\n this.OnRelatedToChange.emit(this.activity);\r\n }\r\n\r\n public onSubjectChange(event) {\r\n this.activity.Subject = event.srcElement.value;\r\n this.OnSubjectChange.emit(this.activity);\r\n }\r\n public onCallNotesChange(event) {\r\n this.activity.Subject = event.srcElement.value.trim();\r\n this.OnCallNotesChange.emit(this.activity);\r\n }\r\n\r\n public getWho(id): IActivityDetails {\r\n for (let i = 0; i < this.activity.whoList.length; i++) {\r\n if (this.activity.whoList[i].objectId === id) {\r\n return this.activity.whoList[i];\r\n }\r\n }\r\n }\r\n public getWhat(id): IActivityDetails {\r\n for (let i = 0; i < this.activity.whatList.length; i++) {\r\n if (this.activity.whatList[i].objectId === id) {\r\n return this.activity.whatList[i];\r\n }\r\n }\r\n }\r\n\r\n public loadQuickComment(value) {\r\n this.activity.Description = this.activity.Description + this.activity.quickCommentList[value];\r\n }\r\n\r\n public activitySave(clearActivityFields) {\r\n this.ActivitySave.emit(this.activity);\r\n }\r\n}\r\n","import { ILoginData } from './../../models/login.interface';\r\nimport { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\r\nimport { NgForm } from '@angular/forms';\r\n\r\n@Component({\r\n selector: 'amc-login',\r\n templateUrl: './login.component.html',\r\n styleUrls: ['./login.component.css']\r\n})\r\nexport class LoginComponent implements OnInit {\r\n @Input() loginData: ILoginData;\r\n @Output() loginDetailsProvided = new EventEmitter<ILoginData>();\r\n\r\n constructor() { }\r\n\r\n ngOnInit() {\r\n if (!this.loginData.header) {\r\n this.loginData.header = 'Login';\r\n }\r\n\r\n for (let field of this.loginData.fields) {\r\n if (!field.isInvalid) {\r\n field.isInvalid = false;\r\n }\r\n }\r\n }\r\n\r\n onLogin(loginForm: NgForm) {\r\n for (const field of this.loginData.fields) {\r\n field.value = loginForm.value[field.name];\r\n }\r\n\r\n this.loginDetailsProvided.emit(this.loginData);\r\n }\r\n\r\n focusOutOfInput(loginForm: NgForm, field) {\r\n if (!loginForm.controls[field.name].valid) {\r\n field.isInvalid = true;\r\n }\r\n\r\n // console.log(loginForm);\r\n // console.log(field);\r\n }\r\n}\r\n","import { NgModule, Injector } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { InteractionComponent } from './components/interaction/interaction.component';\r\nimport { ScenarioComponent } from './components/scenario/scenario.component';\r\nimport { OperationComponent } from './components/operation/operation.component';\r\nimport { PropertyComponent } from './components/property/property.component';\r\nimport { HoldtimerComponent } from './components/holdtimer/holdtimer.component';\r\nimport { DurationComponent } from './components/duration/duration.component';\r\nimport { ChatBoxComponent } from './components/chat-box/chat-box.component';\r\nimport { ChatMessageComponent } from './components/chat-message/chat-message.component';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { createCustomElement } from '@angular/elements';\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { ElementZoneStrategyFactory } from 'elements-zone-strategy';\r\nimport { DispositionComponent } from './components/disposition/disposition.component';\r\nimport { ActivityComponent } from './components/activity/activity.component';\r\nimport { LoginComponent } from './components/login/login.component';\r\n\r\n@NgModule({\r\n imports: [BrowserModule, CommonModule, FormsModule],\r\n declarations: [\r\n InteractionComponent,\r\n ScenarioComponent,\r\n OperationComponent,\r\n PropertyComponent,\r\n HoldtimerComponent,\r\n DurationComponent,\r\n ChatBoxComponent,\r\n ChatMessageComponent,\r\n DispositionComponent,\r\n ActivityComponent,\r\n LoginComponent\r\n ],\r\n entryComponents: [ScenarioComponent, DispositionComponent, LoginComponent],\r\n bootstrap: [],\r\n exports: [ScenarioComponent, DispositionComponent, LoginComponent]\r\n})\r\nexport class UILibraryModule {\r\n constructor(private injector: Injector) { }\r\n\r\n ngDoBootstrap(app) {\r\n if (!customElements.get('amc-webcomponents-scenario')) {\r\n const strategyFactory = new ElementZoneStrategyFactory(\r\n ScenarioComponent,\r\n this.injector\r\n );\r\n customElements.define(\r\n 'amc-webcomponents-scenario',\r\n createCustomElement(ScenarioComponent, {\r\n injector: this.injector,\r\n strategyFactory: strategyFactory\r\n })\r\n );\r\n }\r\n if (!customElements.get('amc-webcomponents-disposition')) {\r\n const strategyFactory = new ElementZoneStrategyFactory(\r\n DispositionComponent,\r\n this.injector\r\n );\r\n customElements.define(\r\n 'amc-webcomponents-disposition',\r\n createCustomElement(DispositionComponent, {\r\n injector: this.injector,\r\n strategyFactory: strategyFactory\r\n })\r\n );\r\n }\r\n if (!customElements.get('amc-webcomponents-login')) {\r\n const strategyFactory = new ElementZoneStrategyFactory(\r\n LoginComponent,\r\n this.injector\r\n );\r\n customElements.define(\r\n 'amc-webcomponents-login',\r\n createCustomElement(LoginComponent, {\r\n injector: this.injector,\r\n strategyFactory: strategyFactory\r\n })\r\n );\r\n }\r\n }\r\n}\r\n\r\nexport from './models/uilibrary.model';\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n\nexport {ActivityComponent as ɵj} from './projects/UILibrary/src/app/components/activity/activity.component';\nexport {ChatBoxComponent as ɵg} from './projects/UILibrary/src/app/components/chat-box/chat-box.component';\nexport {ChatMessageComponent as ɵh} from './projects/UILibrary/src/app/components/chat-message/chat-message.component';\nexport {DispositionComponent as ɵi} from './projects/UILibrary/src/app/components/disposition/disposition.component';\nexport {DurationComponent as ɵf} from './projects/UILibrary/src/app/components/duration/duration.component';\nexport {HoldtimerComponent as ɵe} from './projects/UILibrary/src/app/components/holdtimer/holdtimer.component';\nexport {InteractionComponent as ɵa} from './projects/UILibrary/src/app/components/interaction/interaction.component';\nexport {LoginComponent as ɵk} from './projects/UILibrary/src/app/components/login/login.component';\nexport {OperationComponent as ɵc} from './projects/UILibrary/src/app/components/operation/operation.component';\nexport {PropertyComponent as ɵd} from './projects/UILibrary/src/app/components/property/property.component';\nexport {ScenarioComponent as ɵb} from './projects/UILibrary/src/app/components/scenario/scenario.component';"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { __decorate, __values } from 'tslib';
-import { EventEmitter, Input, Output, Component, ViewChild, Injector, NgModule } from '@angular/core';
+import { EventEmitter, Input, Output, Component, Renderer2, ViewChild, Injector, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { createCustomElement } from '@angular/elements';
@@ -81,8 +81,8 @@ var InteractionComponent = /** @class */ (function () {
     InteractionComponent = __decorate([
         Component({
             selector: 'amc-interaction',
-            template: "<div class=\"AnswerCallFocused\">\r\n  <div class=\"editor callHeaderTop\">\r\n    <img class=\"statusImage\" aria-hidden=\"true\" [src]=\"interaction.UIHeadersData.statusUrl\" (click)=\"interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)\" />\r\n    <label class=\"statusText\">\r\n      <b [id]=\"interaction.UIHeadersData.statusText\">{{ interaction.UIHeadersData.statusText }}</b>\r\n    </label>\r\n    <label class=\"verticalDivider\">|</label>\r\n    <label class=\"directionText\" *ngIf=\"!interaction.UIHeadersData.displayHoldCounter\">{{ interaction.UIHeadersData.directionText }}</label>\r\n    <div class=\"holdCallDurationDiv\" *ngIf=\"interaction.UIHeadersData.displayHoldCounter\">\r\n      <amc-holdtimer [holdCounterData]=\"interaction.UIHeadersData.holdCounterData\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\"></amc-holdtimer>\r\n    </div>\r\n    <img class=\"ViewExpandImage\" [src]=\"interaction.UIHeadersData.minimizeUrl\" alt=\"Minimize\" (click)=\"minimize()\" (keypress)=\"collapseKeypress($event)\" *ngIf=\"!_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"collapse Call Section\">\r\n    <img class=\"ViewCollapseImage\" [src]=\"interaction.UIHeadersData.maximizeUrl\" alt=\"Maximize\" (click)=\"maximize()\" (keypress)=\"expandKeypress($event)\" *ngIf=\"_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"expand Call Section\">\r\n    <div class=\"DurationDiv\" *ngIf=\"interaction.displayCallTimer\">\r\n      <amc-duration [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [startTime]=\"interaction.startTime\"></amc-duration>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!_minimized\">\r\n\r\n    <div *ngIf=\"!isConferenceCall()\">\r\n      <div class=\"editor phoneNumberContainer\">\r\n        <input class=\"callImage\" type=\"image\" [src]=\"interaction.subheaderData.image.href\" [title]=\"interaction.subheaderData.tooltip || ''\" tabindex=\"-1\">\r\n        <input class=\"editor phoneNumberValue\" [attr.aria-labelledby]=\"interaction.UIHeadersData.statusText + ' ' + interaction.subheaderData.value\" readonly type=\"text\" [value]=\"interaction.subheaderData.value\" [id]=\"interaction.subheaderData.value\" tabindex=\"-1\">\r\n      </div>\r\n\r\n      <div class=\"cadSection\">\r\n        <ng-container *ngFor=\"let property of interaction.properties\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <label class=\"col1\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n            <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let property of interaction.associatedData\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <div class=\"editor displayDiv\">\r\n              <label class=\"displayLabels\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <app-chat-box *ngIf=\"interaction.chat\" [isTyping]=\"interaction.chat.isCustomerTyping\" [settings]=\"interaction.chat.settings\"\r\n        [messages]=\"interaction.chat.messages\" (isAgentTyping)=\"isAgentTyping.emit($event)\" (newMessage)=\"newMessage.emit($event)\"></app-chat-box>\r\n\r\n      <div [id]='interaction.interactionId'> </div>\r\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n    <div *ngIf=\"isConferenceCall()\">\r\n      <div *ngFor=\"let party of interaction.parties\">\r\n        <div class=\"editor phoneNumberContainer\">\r\n          <input class=\"callImage\" type=\"image\" [src]=\"party.header.image.href\" [title]=\"party.header.tooltip || ''\" tabindex=\"-1\">\r\n          <input class=\"editor phoneNumberValue\" readonly type=\"text\" [value]=\"party.header.value\" tabindex=\"-1\">\r\n        </div>\r\n\r\n        <div class=\"grid-container\">\r\n          <ng-container *ngFor=\"let property of party.properties\">\r\n            <ng-container *ngIf=\"property.visible\">\r\n              <label class=\"col1\" [title]=\"property.displayKey\">{{ property.displayKey }}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" [operations]=\"party.operations\"></amc-operation>\r\n        <div class=\"AnswerCallFocused\"></div>\r\n      </div>\r\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
-            styles: [":host{display:block}.phoneNumberContainer{margin-left:5px!important;padding-left:0;display:flex;align-items:center}.cadSection{margin-bottom:5px}.grid-container{margin-left:5px;display:grid;grid-template-columns:auto 1fr;grid-column-gap:10px;max-width:calc(100% - 5px);overflow:hidden}.col1{grid-column:1/2}.col2{grid-column:2/3}.ViewExpandImage{margin:3px}.ViewExpandImage:focus{outline:#3296da solid 2px;outline-offset:0}.ViewCollapseImage{margin:3px}.ViewCollapseImage:focus{outline:#3296da solid 2px;outline-offset:0}.callImage{cursor:default}.phoneNumberValue:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
+            template: "<div class=\"AnswerCallFocused\">\r\n  <div class=\"editor callHeaderTop\">\r\n    <img class=\"statusImage\" aria-hidden=\"true\" [src]=\"interaction.UIHeadersData.statusUrl\" (click)=\"interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)\" />\r\n    <label class=\"statusText\">\r\n      <b [id]=\"interaction.UIHeadersData.statusText\">{{ interaction.UIHeadersData.statusText }}</b>\r\n    </label>\r\n    <label class=\"verticalDivider\">|</label>\r\n    <label class=\"directionText\" *ngIf=\"!interaction.UIHeadersData.displayHoldCounter\">{{ interaction.UIHeadersData.directionText }}</label>\r\n    <div class=\"holdCallDurationDiv\" *ngIf=\"interaction.UIHeadersData.displayHoldCounter\">\r\n      <amc-holdtimer [holdCounterData]=\"interaction.UIHeadersData.holdCounterData\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\"></amc-holdtimer>\r\n    </div>\r\n    <img class=\"ViewExpandImage\" [src]=\"interaction.UIHeadersData.minimizeUrl\" alt=\"Minimize\" (click)=\"minimize()\" (keypress)=\"collapseKeypress($event)\" *ngIf=\"!_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"collapse Call Section\">\r\n    <img class=\"ViewCollapseImage\" [src]=\"interaction.UIHeadersData.maximizeUrl\" alt=\"Maximize\" (click)=\"maximize()\" (keypress)=\"expandKeypress($event)\" *ngIf=\"_minimized\" tabindex=\"0\" role=\"button\" aria-label=\"expand Call Section\">\r\n    <div class=\"DurationDiv\" *ngIf=\"interaction.displayCallTimer\">\r\n      <amc-duration [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [startTime]=\"interaction.startTime\"></amc-duration>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"!_minimized\">\r\n\r\n    <div *ngIf=\"!isConferenceCall()\">\r\n      <div class=\"editor phoneNumberContainer\">\r\n        <input class=\"callImage\" type=\"image\" [src]=\"interaction.subheaderData.image.href\" [title]=\"interaction.subheaderData.tooltip || ''\" tabindex=\"-1\">\r\n        <input class=\"editor phoneNumberValue\" [attr.aria-labelledby]=\"interaction.UIHeadersData.statusText + ' ' + interaction.subheaderData.value\" readonly type=\"text\" [value]=\"interaction.subheaderData.value\" [id]=\"interaction.subheaderData.value\" tabindex=\"-1\">\r\n      </div>\r\n\r\n      <div class=\"cadSection\">\r\n        <ng-container *ngFor=\"let property of interaction.properties\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <label class=\"col1\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n            <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n          </ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngFor=\"let property of interaction.associatedData\">\r\n          <ng-container *ngIf=\"property.visible\">\r\n            <div class=\"editor displayDiv\">\r\n              <label class=\"displayLabels\" [title]=\"property.displayKey\">{{property.displayKey}}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n      <amc-operation *ngIf=\"interaction.chat\" id=\"close-chat\" [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n      <app-chat-box *ngIf=\"interaction.chat\" [isTyping]=\"interaction.chat.isCustomerTyping\" [settings]=\"interaction.chat.settings\"\r\n        [messages]=\"interaction.chat.messages\" (isAgentTyping)=\"isAgentTyping.emit($event)\" (newMessage)=\"newMessage.emit($event)\"></app-chat-box>\r\n\r\n      <div [id]='interaction.interactionId'> </div>\r\n      <amc-operation *ngIf=\"!interaction.chat\" [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n    <div *ngIf=\"isConferenceCall()\">\r\n      <div *ngFor=\"let party of interaction.parties\">\r\n        <div class=\"editor phoneNumberContainer\">\r\n          <input class=\"callImage\" type=\"image\" [src]=\"party.header.image.href\" [title]=\"party.header.tooltip || ''\" tabindex=\"-1\">\r\n          <input class=\"editor phoneNumberValue\" readonly type=\"text\" [value]=\"party.header.value\" tabindex=\"-1\">\r\n        </div>\r\n\r\n        <div class=\"grid-container\">\r\n          <ng-container *ngFor=\"let property of party.properties\">\r\n            <ng-container *ngIf=\"property.visible\">\r\n              <label class=\"col1\" [title]=\"property.displayKey\">{{ property.displayKey }}</label>\r\n              <amc-property [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" class=\"col2\" [property]=\"property\"> </amc-property>\r\n            </ng-container>\r\n          </ng-container>\r\n        </div>\r\n        <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"party.header.value\" [operations]=\"party.operations\"></amc-operation>\r\n        <div class=\"AnswerCallFocused\"></div>\r\n      </div>\r\n      <amc-operation [callType]=\"interaction.UIHeadersData.directionText\" [statusText]=\"interaction.UIHeadersData.statusText\" [callId]=\"interaction.subheaderData.value\" [operations]=\"interaction.operations\"></amc-operation>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n",
+            styles: [":host{display:block}.phoneNumberContainer{margin-left:5px!important;padding-left:0;display:flex;align-items:center}.cadSection{margin-bottom:5px}#close-chat{-moz-text-align-last:end;text-align-last:end}.grid-container{margin-left:5px;display:grid;grid-template-columns:auto 1fr;grid-column-gap:10px;max-width:calc(100% - 5px);overflow:hidden}.col1{grid-column:1/2}.col2{grid-column:2/3}.ViewExpandImage{margin:3px}.ViewExpandImage:focus{outline:#3296da solid 2px;outline-offset:0}.ViewCollapseImage{margin:3px}.ViewCollapseImage:focus{outline:#3296da solid 2px;outline-offset:0}.callImage{cursor:default}.phoneNumberValue:focus{outline-style:none}", "body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.callOptions{background-color:#f6f7fb;bottom:0;width:100%;text-align:center}.directionText{font-size:.8em;margin-left:2px}.phoneNumberValue{font-weight:700;font-size:1em;margin-left:5px}.durationInput{background-color:transparent;border:0;width:100%;text-align:right}.topBorder{border-top:1px solid #939598}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0;width:100%}.verticalDivider{margin-left:2px;float:left}.callImage{height:20px}"]
         })
     ], InteractionComponent);
     return InteractionComponent;
@@ -464,7 +464,8 @@ var DurationComponent = /** @class */ (function () {
 }());
 var ChatBoxComponent = /** @class */ (function () {
-    function ChatBoxComponent() {
+    function ChatBoxComponent(renderer) {
+        this.renderer = renderer;
         this.isTyping = false;
         this.lastCount = -1;
         this._isAgentTyping = false;
@@ -473,7 +474,7 @@ var ChatBoxComponent = /** @class */ (function () {
         this.newMessageText = '';
         this.usernameToColor = {};
         this.colors = [
-            '#81c784',
+            '#c2c4c4',
             '#ffab91',
             '#f48fb1',
             '#29b6f6',
@@ -484,8 +485,11 @@ var ChatBoxComponent = /** @class */ (function () {
             '#cddc39',
         ];
         this.colorsIndex = 0;
-        this.agentColor = '#29b6f6';
+        this.agentColor = '#2db0e0';
     }
+    ChatBoxComponent.prototype.ngOnInit = function () {
+        this.renderer.selectRootElement('#autofocus').focus();
+    };
     ChatBoxComponent.prototype.ngAfterViewChecked = function () {
         if (this.lastCount !== this.messages.length) {
             this.lastCount = this.messages.length;
@@ -510,11 +514,13 @@ var ChatBoxComponent = /** @class */ (function () {
     ChatBoxComponent.prototype.shouldAlignRight = function (message) {
         return message.type && message.type === IChatMessageType.AGENT;
     };
-    ChatBoxComponent.prototype.sendNewMessage = function () {
+    ChatBoxComponent.prototype.sendNewMessage = function (event) {
+        event.preventDefault();
         if (this.newMessageText) {
             this.newMessage.emit(this.newMessageText);
             this.newMessageText = '';
         }
+        this.renderer.selectRootElement('#autofocus').focus();
     };
     ChatBoxComponent.prototype.onNewMessageFocus = function (event) {
         var isTyping = event && this.newMessageText.length > 0;
@@ -536,6 +542,9 @@ var ChatBoxComponent = /** @class */ (function () {
         }
         catch (e) { }
     };
+    ChatBoxComponent.ctorParameters = function () { return [
+        { type: Renderer2 }
+    ]; };
     __decorate([
         Input()
     ], ChatBoxComponent.prototype, "settings", void 0);
@@ -554,11 +563,14 @@ var ChatBoxComponent = /** @class */ (function () {
     __decorate([
         ViewChild('MessagesContainer', { static: true })
     ], ChatBoxComponent.prototype, "messagesContainer", void 0);
+    __decorate([
+        ViewChild('autofocus', { static: false })
+    ], ChatBoxComponent.prototype, "autofocus", void 0);
     ChatBoxComponent = __decorate([
         Component({
             selector: 'app-chat-box',
-            template: "<div class=\"chat-box\">\r\n  <div #MessagesContainer class=\"messages\" [style.max-height]='settings.maxHeight'>\r\n    <ng-container *ngFor=\"let message of messages\">\r\n      <app-chat-message [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\"\r\n        [timestamp]=\"message.timestamp\" [image]=\"message.userIcon\" [fallbackImage]=\"settings.fallbackUserIcon\" [color]=\"getColor(message)\">\r\n      </app-chat-message>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isTyping\" class=\"typing-indicator\">\r\n      Someone is typing\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"new-message\">\r\n    <input #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" placeholder=\"Type a message\" (focus)=\"onNewMessageFocus(true)\"\r\n      (blur)=\"onNewMessageFocus(false)\" (keydown.enter)=\"sendNewMessage()\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\">\r\n    <input type=\"image\" [src]=\"settings.sendImage\" (click)=\"sendNewMessage()\" [disabled]=\"settings.disableSendMessage\">\r\n  </div>\r\n</div>\r\n",
-            styles: [".chat-box{background-color:#eceff1}.messages{padding:5px;overflow:auto;min-height:50px}.new-message{border-top:1px solid #000;display:flex;align-content:center;height:25px}.new-message input[type=text]{flex:1 1 0;background-color:#eceff1;border:none;min-width:0}.new-message input[type=image]{position:relative;top:50%;transform:translateY(-50%);height:20px;cursor:pointer}.new-message input[type=image]:disabled{opacity:.5;cursor:auto}.new-message input:focus{outline:0}.typing-indicator{font-size: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}}"]
+            template: "<div class=\"chat-box\">\r\n  <div #MessagesContainer class=\"messages\" [style.max-height]='settings.maxHeight'>\r\n    <ng-container *ngFor=\"let message of messages\">\r\n      <app-chat-message class=\"chat-line\" [alignRight]=\"shouldAlignRight(message)\" [message]=\"message.text\" [username]=\"message.username\"\r\n        [timestamp]=\"message.timestamp\" [image]=\"message.userIcon\" [fallbackImage]=\"settings.fallbackUserIcon\" [color]=\"getColor(message)\">\r\n      </app-chat-message>\r\n    </ng-container>\r\n\r\n    <div *ngIf=\"isTyping\" class=\"typing-indicator\">\r\n      Someone is typing\r\n      <span></span>\r\n      <span></span>\r\n      <span></span>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n<div class=\"message-box\">\r\n  <textarea id=\"autofocus\" #NewMessageText [(ngModel)]=\"newMessageText\" type=\"text\" class=\"message-input scroll\" placeholder=\"Type a message...\"\r\n  (focus)=\"onNewMessageFocus(true)\" (keydown.enter)=\"sendNewMessage($event)\" (keyup)='onKeyup()' [disabled]=\"settings.disableSendMessage\" ></textarea>\r\n  <button type=\"submit\" class=\"message-submit\" (click)=\"sendNewMessage($event)\" [disabled]=\"settings.disableSendMessage\">Send</button>\r\n</div>\r\n</div>\r\n",
+            styles: [".message-box{flex:1 1 0;width:99%;background:#fff;margin:auto;position:relative;border-radius:5px;height:100%;border:1px solid #ccc}.message-box .message-input{background:0 0;border:none;outline:0!important;resize:none;font-family:inherit;font-size:.8rem;height:100%;margin:0;padding:10px 7px;width:89%;color:#444}.message-box textarea:focus:-webkit-placeholder{color:transparent}.message-box .message-submit{position:absolute;z-index:1;top:26px;right:5px;background:#1e72ba;border:none;color:#fff;font-size:10px;line-height:1;padding:6px 10px;border-radius:5px;outline:0!important;transition:background .2s;cursor:pointer}.scroll::-webkit-scrollbar{display:none}.chat-box{background-color:#f4f5fb;padding:5px}.messages{padding:5px;overflow:auto;min-height:50px}.chat-line{margin-bottom:15px}.new-message{border-top:1px solid #000;display:flex;align-content:center;height:25px}.new-message input[type=text]{flex:1 1 0;background-color:#f4f5fb;border:none;min-width:0}.new-message input[type=image]{position:relative;top:50%;transform:translateY(-50%);height:20px;cursor:pointer}.new-message input[type=image]:disabled{opacity:.5;cursor:auto}.new-message input:focus{outline:0}.typing-indicator{font-size:.8em;font-style:italic}.typing-indicator span{display:inline-block;height:4px;width:4px;border-radius:50%;background-color:#9e9e9e;margin:0 1px;opacity:.2}.typing-indicator span:nth-of-type(1){-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);
     return ChatBoxComponent;
@@ -594,8 +606,8 @@ var ChatMessageComponent = /** @class */ (function () {
     ChatMessageComponent = __decorate([
         Component({
             selector: 'app-chat-message',
-            template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\r\n  <div class=\"message-header\">\r\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\r\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\r\n    <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n  </div>\r\n\r\n  <div class=\"message-body-container\">\r\n    <div>\r\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\r\n        <span [innerHTML]=\"message\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-            styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.message-header{display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image,.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:flex}.right-message>.message-body-container{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;-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}"]
+            template: "<div [class]=\"alignRight? 'message right-message' : 'message left-message'\">\r\n  <div class=\"message-header\">\r\n    <img *ngIf=\"image\" class=\"image\" [src]=\"image\" (error)=\"image = fallbackImage\" [style.border-color]=\"color\" />\r\n    <span *ngIf=\"username\" class=\"username\">{{username}}</span>\r\n  </div>\r\n\r\n  <div class=\"message-body-container\">\r\n    <div>\r\n      <div class=\"message-body\" [style.background-color]=\"color\" [style.border-color]=\"color\">\r\n        <span [innerHTML]=\"message\"></span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <span *ngIf=\"timestamp\" class=\"timestamp\">{{timestamp}}</span>\r\n</div>\r\n",
+            styles: [":host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.timestamp{font-size:10px;margin-right:30px;margin-left:30px}.message-header{display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image,.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:flex}.right-message>.message-body-container{flex-direction:row-reverse}.message-body{display:inline-block;position:relative;border-radius:1em;padding:6px;font-style:normal;font-size:.8em;text-align:start;min-width:2em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}.left-message .message-body:after{content:\"\";position:absolute;border-left:10px solid #000;border-color:inherit;border-right:10px solid transparent;border-bottom:10px solid transparent;left:1px;bottom:-2px}.right-message .message-body:after{content:\"\";position:absolute;border-left:10px solid transparent;border-top:10px solid #000;border-top-color:inherit;border-bottom:0 solid transparent;right:1px;bottom:-2px}"]
         })
     ], ChatMessageComponent);
     return ChatMessageComponent;