@amc-technology/ui-library 1.0.37 → 1.0.38
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.
- package/amc-technology-ui-library.metadata.json +1 -1
- package/bundles/amc-technology-ui-library.umd.js +13 -8
- package/bundles/amc-technology-ui-library.umd.js.map +1 -1
- package/bundles/amc-technology-ui-library.umd.min.js +1 -1
- package/bundles/amc-technology-ui-library.umd.min.js.map +1 -1
- package/esm2015/projects/UILibrary/src/app/components/chat-box/chat-box.component.js +11 -6
- package/esm2015/projects/UILibrary/src/app/components/chat-message/chat-message.component.js +3 -3
- package/esm2015/projects/UILibrary/src/app/components/interaction/interaction.component.js +2 -2
- package/esm5/projects/UILibrary/src/app/components/chat-box/chat-box.component.js +11 -6
- package/esm5/projects/UILibrary/src/app/components/chat-message/chat-message.component.js +3 -3
- package/esm5/projects/UILibrary/src/app/components/interaction/interaction.component.js +2 -2
- package/fesm2015/amc-technology-ui-library.js +13 -8
- package/fesm2015/amc-technology-ui-library.js.map +1 -1
- package/fesm5/amc-technology-ui-library.js +13 -8
- package/fesm5/amc-technology-ui-library.js.map +1 -1
- package/package.json +1 -1
- package/projects/UILibrary/src/app/components/chat-box/chat-box.component.d.ts +2 -1
- package/webcomponents/webcomponents.js +1 -1
|
@@ -11,7 +11,7 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
11
11
|
this.newMessageText = '';
|
|
12
12
|
this.usernameToColor = {};
|
|
13
13
|
this.colors = [
|
|
14
|
-
'#
|
|
14
|
+
'#c2c4c4',
|
|
15
15
|
'#ffab91',
|
|
16
16
|
'#f48fb1',
|
|
17
17
|
'#29b6f6',
|
|
@@ -22,7 +22,7 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
22
22
|
'#cddc39',
|
|
23
23
|
];
|
|
24
24
|
this.colorsIndex = 0;
|
|
25
|
-
this.agentColor = '#
|
|
25
|
+
this.agentColor = '#2db0e0';
|
|
26
26
|
}
|
|
27
27
|
ngAfterViewChecked() {
|
|
28
28
|
if (this.lastCount !== this.messages.length) {
|
|
@@ -48,11 +48,13 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
48
48
|
shouldAlignRight(message) {
|
|
49
49
|
return message.type && message.type === IChatMessageType.AGENT;
|
|
50
50
|
}
|
|
51
|
-
sendNewMessage() {
|
|
51
|
+
sendNewMessage(event) {
|
|
52
|
+
event.preventDefault();
|
|
52
53
|
if (this.newMessageText) {
|
|
53
54
|
this.newMessage.emit(this.newMessageText);
|
|
54
55
|
this.newMessageText = '';
|
|
55
56
|
}
|
|
57
|
+
this.searchElement.nativeElement.focus();
|
|
56
58
|
}
|
|
57
59
|
onNewMessageFocus(event) {
|
|
58
60
|
const isTyping = event && this.newMessageText.length > 0;
|
|
@@ -93,12 +95,15 @@ __decorate([
|
|
|
93
95
|
__decorate([
|
|
94
96
|
ViewChild('MessagesContainer', { static: true })
|
|
95
97
|
], ChatBoxComponent.prototype, "messagesContainer", void 0);
|
|
98
|
+
__decorate([
|
|
99
|
+
ViewChild('NewMessageText')
|
|
100
|
+
], ChatBoxComponent.prototype, "searchElement", void 0);
|
|
96
101
|
ChatBoxComponent = __decorate([
|
|
97
102
|
Component({
|
|
98
103
|
selector: 'app-chat-box',
|
|
99
|
-
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
|
|
100
|
-
styles: [".chat-box{background-color:#
|
|
104
|
+
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 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",
|
|
105
|
+
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}}"]
|
|
101
106
|
})
|
|
102
107
|
], ChatBoxComponent);
|
|
103
108
|
export { ChatBoxComponent };
|
|
104
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
109
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1ib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFtYy10ZWNobm9sb2d5L3VpLWxpYnJhcnkvIiwic291cmNlcyI6WyJwcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2NoYXQtYm94L2NoYXQtYm94LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQWdDLE1BQU0sZUFBZSxDQUFDO0FBQ2hILE9BQU8sRUFBZ0IsZ0JBQWdCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQVEzRSxJQUFhLGdCQUFnQixHQUE3QixNQUFhLGdCQUFnQjtJQStCM0I7UUE3QlMsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUdsQixjQUFTLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFFdkIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFDYixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFFNUMsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDbEQsbUJBQWMsR0FBRyxFQUFFLENBQUM7UUFLcEIsb0JBQWUsR0FBbUMsRUFBRSxDQUFDO1FBQ3JELFdBQU0sR0FBRztZQUNQLFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztTQUNWLENBQUM7UUFDRixnQkFBVyxHQUFHLENBQUMsQ0FBQztRQUNoQixlQUFVLEdBQUcsU0FBUyxDQUFDO0lBRVAsQ0FBQztJQUVqQixrQkFBa0I7UUFDaEIsSUFBSSxJQUFJLENBQUMsU0FBUyxLQUFLLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxFQUFFO1lBQzNDLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUM7WUFDdEMsSUFBSSxD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QWQ1QyxnQkFBZ0I7SUFMNUIsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLGNBQWM7UUFDeEIsMnRDQUF3Qzs7S0FFekMsQ0FBQztHQUNXLGdCQUFnQixDQXlGNUI7U0F6RlksZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFZpZXdDaGlsZCwgRWxlbWVudFJlZiwgQWZ0ZXJWaWV3Q2hlY2tlZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJQ2hhdE1lc3NhZ2UsIElDaGF0TWVzc2FnZVR5cGUgfSBmcm9tICcuLi8uLi9tb2RlbHMvY2hhdC5tZXNzYWdlJztcclxuaW1wb3J0IHsgSUNoYXRTZXR0aW5ncyB9IGZyb20gJy4uLy4uL21vZGVscy9jaGF0LnNldHRpbmdzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLWNoYXQtYm94JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2hhdC1ib3guY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NoYXQtYm94LmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDaGF0Qm94Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3Q2hlY2tlZCB7XHJcbiAgQElucHV0KCkgc2V0dGluZ3M6IElDaGF0U2V0dGluZ3M7XHJcbiAgQElucHV0KCkgaXNUeXBpbmcgPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KCkgbWVzc2FnZXM6IElDaGF0TWVzc2FnZVtdO1xyXG4gIHByaXZhdGUgbGFzdENvdW50ID0gLTE7XHJcblxyXG4gIF9pc0FnZW50VHlwaW5nID0gZmFsc2U7XHJcbiAgQE91dHB1dCgpIGlzQWdlbnRUeXBpbmcgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIEBPdXRwdXQoKSBuZXdNZXNzYWdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcbiAgbmV3TWVzc2FnZVRleHQgPSAnJztcclxuXHJcbiAgQFZpZXdDaGlsZCgnTWVzc2FnZXNDb250YWluZXInLCB7IHN0YXRpYzogdHJ1ZSB9KSBtZXNzYWdlc0NvbnRhaW5lcjogRWxlbWVudFJlZjtcclxuICBAVmlld0NoaWxkKCdOZXdNZXNzYWdlVGV4dCcpIHNlYXJjaEVsZW1lbnQ6IEVsZW1lbnRSZWY7XHJcblxyXG4gIHVzZXJuYW1lVG9Db2xvcjogeyBbdXNlcm5hbWU6IHN0cmluZ106IHN0cmluZyB9ID0ge307XHJcbiAgY29sb3JzID0gW1xyXG4gICAgJyNjMmM0YzQnLFxyXG4gICAgJyNmZmFiOTEnLFxyXG4gICAgJyNmNDhmYjEnLFxyXG4gICAgJyMyOWI2ZjYnLFxyXG4gICAgJyNlMWJlZTcnLFxyXG4gICAgJyM5Y2NjNjUnLFxyXG4gICAgJyNmZmMxMDcnLFxyXG4gICAgJyMyNmM2ZGEnLFxyXG4gICAgJyNjZGRjMzknLFxyXG4gIF07XHJcbiAgY29sb3JzSW5kZXggPSAwO1xyXG4gIGFnZW50Q29sb3IgPSAnIzJkYjBlMCc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3Q2hlY2tlZCgpIHtcclxuICAgIGlmICh0aGlzLmxhc3RDb3VudCAhPT0gdGhpcy5tZXNzYWdlcy5sZW5ndGgpIHtcclxuICAgICAgdGhpcy5sYXN0Q291bnQgPSB0aGlzLm1lc3NhZ2VzLmxlbmd0aDtcclxuICAgICAgdGhpcy5zY3JvbGxUb0JvdHRvbSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgZ2V0Q29sb3IobWVzc2FnZTogSUNoYXRNZXNzYWdlKSB7XHJcbiAgICBpZiAobWVzc2FnZS50eXBlICYmIG1lc3NhZ2UudHlwZSA9PT0gSUNoYXRNZXNzYWdlVHlwZS5BR0VOVCkge1xyXG4gICAgICByZXR1cm4gdGhpcy5hZ2VudENvbG9yO1xyXG4gICAgfSBlbHNlIGlmIChtZXNzYWdlLnVzZXJuYW1lKSB7XHJcbiAgICAgIGlmICghdGhpcy51c2VybmFtZVRvQ29sb3JbbWVzc2FnZS51c2VybmFtZV0pIHtcclxuICAgICAgICB0aGlzLnVzZXJuYW1lVG9Db2xvclttZXNzYWdlLnVzZXJuYW1lXSA9IHRoaXMuY29sb3JzW3RoaXMuY29sb3JzSW5kZXhdO1xyXG4gICAgICAgIHRoaXMuY29sb3JzSW5kZXggPSAodGhpcy5jb2xvcnNJbmRleCArIDEpICUgdGhpcy5jb2xvcnMubGVuZ3RoO1xyXG4gICAgICB9XHJcbiAgICAgIHJldHVybiB0aGlzLnVzZXJuYW1lVG9Db2xvclttZXNzYWdlLnVzZXJuYW1lXTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHJldHVybiB0aGlzLmNvbG9yc1swXTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHNob3VsZEFsaWduUmlnaHQobWVzc2FnZTogSUNoYXRNZXNzYWdlKSB7XHJcbiAgICByZXR1cm4gbWVzc2FnZS50eXBlICYmIG1lc3NhZ2UudHlwZSA9PT0gSUNoYXRNZXNzYWdlVHlwZS5BR0VOVDtcclxuICB9XHJcblxyXG4gIHNlbmROZXdNZXNzYWdlKGV2ZW50KSB7XHJcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgaWYgKHRoaXMubmV3TWVzc2FnZVRleHQpIHtcclxuICAgICAgdGhpcy5uZXdNZXNzYWdlLmVtaXQodGhpcy5uZXdNZXNzYWdlVGV4dCk7XHJcbiAgICAgIHRoaXMubmV3TWVzc2FnZVRleHQgPSAnJztcclxuICAgIH1cclxuICAgIHRoaXMuc2VhcmNoRWxlbWVudC5uYXRpdmVFbGVtZW50LmZvY3VzKCk7XHJcbiAgfVxyXG5cclxuICBvbk5ld01lc3NhZ2VGb2N1cyhldmVudDogYm9vbGVhbikge1xyXG4gICAgY29uc3QgaXNUeXBpbmcgPSBldmVudCAmJiB0aGlzLm5ld01lc3NhZ2VUZXh0Lmxlbmd0aCA+IDA7XHJcbiAgICBpZiAoaXNUeXBpbmcgIT09IHRoaXMuX2lzQWdlbnRUeXBpbmcpIHtcclxuICAgICAgdGhpcy5faXNBZ2VudFR5cGluZyA9IGlzVHlwaW5nO1xyXG4gICAgICB0aGlzLmlzQWdlbnRUeXBpbmcuZW1pdChpc1R5cGluZyk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBvbktleXVwKCkge1xyXG4gICAgY29uc3QgaXNUeXBpbmcgPSB0aGlzLm5ld01lc3NhZ2VUZXh0Lmxlbmd0aCA+IDA7XHJcbiAgICBpZiAoaXNUeXBpbmcgIT09IHRoaXMuX2lzQWdlbnRUeXBpbmcpIHtcclxuICAgICAgdGhpcy5faXNBZ2VudFR5cGluZyA9IGlzVHlwaW5nO1xyXG4gICAgICB0aGlzLmlzQWdlbnRUeXBpbmcuZW1pdChpc1R5cGluZyk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzY3JvbGxUb0JvdHRvbSgpIHtcclxuICAgIHRyeSB7XHJcbiAgICAgIHRoaXMubWVzc2FnZXNDb250YWluZXIubmF0aXZlRWxlbWVudC5zY3JvbGxUb3AgPSB0aGlzLm1lc3NhZ2VzQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQuc2Nyb2xsSGVpZ2h0O1xyXG4gICAgfVxyXG4gICAgY2F0Y2ggKGUpIHsgfVxyXG4gIH1cclxufVxyXG4iXX0=
|
package/esm2015/projects/UILibrary/src/app/components/chat-message/chat-message.component.js
CHANGED
|
@@ -31,9 +31,9 @@ __decorate([
|
|
|
31
31
|
ChatMessageComponent = __decorate([
|
|
32
32
|
Component({
|
|
33
33
|
selector: 'app-chat-message',
|
|
34
|
-
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
|
|
35
|
-
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
|
|
34
|
+
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",
|
|
35
|
+
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}"]
|
|
36
36
|
})
|
|
37
37
|
], ChatMessageComponent);
|
|
38
38
|
export { ChatMessageComponent };
|
|
39
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
39
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1tZXNzYWdlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BhbWMtdGVjaG5vbG9neS91aS1saWJyYXJ5LyIsInNvdXJjZXMiOlsicHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9jaGF0LW1lc3NhZ2UvY2hhdC1tZXNzYWdlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFPekQsSUFBYSxvQkFBb0IsR0FBakMsTUFBYSxvQkFBb0I7SUFTL0I7UUFQUyxlQUFVLEdBQUcsS0FBSyxDQUFDO0lBT1osQ0FBQztJQUVqQixRQUFRO0lBQ1IsQ0FBQztDQUVGLENBQUE7QUFiVTtJQUFSLEtBQUssRUFBRTtxREFBaUI7QUFDaEI7SUFBUixLQUFLLEVBQUU7d0RBQW9CO0FBQ25CO0lBQVIsS0FBSyxFQUFFO3NEQUFrQjtBQUNqQjtJQUFSLEtBQUssRUFBRTttREFBZTtBQUNkO0lBQVIsS0FBSyxFQUFFO3VEQUFtQjtBQUNsQjtJQUFSLEtBQUssRUFBRTttREFBZTtBQUNkO0lBQVIsS0FBSyxFQUFFOzJEQUF1QjtBQVBwQixvQkFBb0I7SUFMaEMsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLGtCQUFrQjtRQUM1Qix1cUJBQTRDOztLQUU3QyxDQUFDO0dBQ1csb0JBQW9CLENBY2hDO1NBZFksb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1jaGF0LW1lc3NhZ2UnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGF0LW1lc3NhZ2UuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NoYXQtbWVzc2FnZS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDaGF0TWVzc2FnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KCkgbWVzc2FnZTogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGFsaWduUmlnaHQgPSBmYWxzZTtcclxuICBASW5wdXQoKSB1c2VybmFtZTogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGNvbG9yOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgdGltZXN0YW1wOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgaW1hZ2U6IHN0cmluZztcclxuICBASW5wdXQoKSBmYWxsYmFja0ltYWdlOiBzdHJpbmc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gIH1cclxuXHJcbn1cclxuIl19
|
|
@@ -72,9 +72,9 @@ __decorate([
|
|
|
72
72
|
InteractionComponent = __decorate([
|
|
73
73
|
Component({
|
|
74
74
|
selector: 'amc-interaction',
|
|
75
|
-
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
|
|
75
|
+
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",
|
|
76
76
|
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}"]
|
|
77
77
|
})
|
|
78
78
|
], InteractionComponent);
|
|
79
79
|
export { InteractionComponent };
|
|
80
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJhY3Rpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFtYy10ZWNobm9sb2d5L3VpLWxpYnJhcnkvIiwic291cmNlcyI6WyJwcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2ludGVyYWN0aW9uL2ludGVyYWN0aW9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUcvRTs7R0FFRztBQU1ILElBQWEsb0JBQW9CLEdBQWpDLE1BQWEsb0JBQW9CO0lBa0IvQjs7T0FFRztJQUNIO1FBbEJVLHFCQUFnQixHQUEwQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQzdELGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUM1QyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQWlCaEQsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDMUIsQ0FBQztJQWJELElBQUksVUFBVSxDQUFDLEtBQUs7UUFDbEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7UUFDdkIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBQ0QsSUFBSSxVQUFVO1FBQ1osT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3hCLENBQUM7SUFTRDs7T0FFRztJQUNILFFBQVE7SUFDUixDQUFDO0lBRUQ7O09BRUc7SUFDSCxRQUFRO1FBQ04sSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7SUFDekIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsUUFBUTtRQUNOLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzFCLENBQUM7SUFFRDs7T0FFRztJQUNILGdCQUFnQjtRQUNkLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNuRSxPQUFPLElBQUksQ0FBQztTQUNiO1FBQ0QsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBb0I7UUFDbkMsSUFBSSxLQUFLLENBQUMsSUFBSSxLQUFLLE9BQU8sRUFBRTtZQUMxQixJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7U0FDakI7SUFDSCxDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQW9CO1FBQ2pDLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLEVBQUU7WUFDMUIsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1NBQ2pCO0lBQ0gsQ0FBQztDQUVGLENBQUE7QUFqRVU7SUFBUixLQUFLLEVBQUU7eURBQTJCO0FBQ3pCO0lBQVQsTUFBTSxFQUFFOzhEQUE4RDtBQUM3RDtJQUFULE1BQU0sRUFBRTsyREFBNkM7QUFDNUM7SUFBVCxNQUFNLEVBQUU7d0RBQXlDO0FBTHZDLG9CQUFvQjtJQUxoQyxTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsaUJBQWlCO1FBQzNCLGd0TEFBMkM7O0tBRTVDLENBQUM7R0FDVyxvQkFBb0IsQ0FtRWhDO1NBbkVZLG9CQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgSUludGVyYWN0aW9uIH0gZnJvbSAnLi4vLi4vbW9kZWxzL3VpbGlicmFyeS5tb2RlbCc7XHJcblxyXG4vKipcclxuICogQGlnbm9yZVxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhbWMtaW50ZXJhY3Rpb24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9pbnRlcmFjdGlvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vaW50ZXJhY3Rpb24uY29tcG9uZW50LnNjc3MnLCAnLi8uLi91aWxpYnJhcnkubW9kdWxlLnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgSW50ZXJhY3Rpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBASW5wdXQoKSBpbnRlcmFjdGlvbjogSUludGVyYWN0aW9uO1xyXG4gIEBPdXRwdXQoKSBtaW5pbWl6ZWRDaGFuZ2VkOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIGlzQWdlbnRUeXBpbmcgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcbiAgQE91dHB1dCgpIG5ld01lc3NhZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuICAvKipcclxuICAgKiBAaWdub3JlXHJcbiAgICovXHJcbiAgbWluaW1pemVkOiBib29sZWFuO1xyXG4gIHNldCBfbWluaW1pemVkKHZhbHVlKSB7XHJcbiAgICB0aGlzLm1pbmltaXplZCA9IHZhbHVlO1xyXG4gICAgdGhpcy5taW5pbWl6ZWRDaGFuZ2VkLmVtaXQodmFsdWUpO1xyXG4gIH1cclxuICBnZXQgX21pbmltaXplZCgpIHtcclxuICAgIHJldHVybiB0aGlzLm1pbmltaXplZDtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEBpZ25vcmVcclxuICAgKi9cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICAgIHRoaXMuX21pbmltaXplZCA9IGZhbHNlO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogQGlnbm9yZVxyXG4gICAqL1xyXG4gIG5nT25Jbml0KCkge1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogQGlnbm9yZVxyXG4gICAqL1xyXG4gIG1pbmltaXplKCk6IHZvaWQge1xyXG4gICAgdGhpcy5fbWluaW1pemVkID0gdHJ1ZTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEBpZ25vcmVcclxuICAgKi9cclxuICBtYXhpbWl6ZSgpOiB2b2lkIHtcclxuICAgIHRoaXMuX21pbmltaXplZCA9IGZhbHNlO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogQGlnbm9yZVxyXG4gICAqL1xyXG4gIGlzQ29uZmVyZW5jZUNhbGwoKTogYm9vbGVhbiB7XHJcbiAgICBpZiAodGhpcy5pbnRlcmFjdGlvbi5wYXJ0aWVzICYmIHRoaXMuaW50ZXJhY3Rpb24ucGFydGllcy5sZW5ndGggPiAxKSB7XHJcbiAgICAgIHJldHVybiB0cnVlO1xyXG4gICAgfVxyXG4gICAgcmV0dXJuIGZhbHNlO1xyXG4gIH1cclxuXHJcbiAgY29sbGFwc2VLZXlwcmVzcyhldmVudDogS2V5Ym9hcmRFdmVudCkge1xyXG4gICAgaWYgKGV2ZW50LmNvZGUgPT09ICdFbnRlcicpIHtcclxuICAgICAgdGhpcy5taW5pbWl6ZSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgZXhwYW5kS2V5cHJlc3MoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcclxuICAgIGlmIChldmVudC5jb2RlID09PSAnRW50ZXInKSB7XHJcbiAgICAgIHRoaXMubWF4aW1pemUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG59XHJcbiJdfQ==
|
|
@@ -11,7 +11,7 @@ var ChatBoxComponent = /** @class */ (function () {
|
|
|
11
11
|
this.newMessageText = '';
|
|
12
12
|
this.usernameToColor = {};
|
|
13
13
|
this.colors = [
|
|
14
|
-
'#
|
|
14
|
+
'#c2c4c4',
|
|
15
15
|
'#ffab91',
|
|
16
16
|
'#f48fb1',
|
|
17
17
|
'#29b6f6',
|
|
@@ -22,7 +22,7 @@ var ChatBoxComponent = /** @class */ (function () {
|
|
|
22
22
|
'#cddc39',
|
|
23
23
|
];
|
|
24
24
|
this.colorsIndex = 0;
|
|
25
|
-
this.agentColor = '#
|
|
25
|
+
this.agentColor = '#2db0e0';
|
|
26
26
|
}
|
|
27
27
|
ChatBoxComponent.prototype.ngAfterViewChecked = function () {
|
|
28
28
|
if (this.lastCount !== this.messages.length) {
|
|
@@ -48,11 +48,13 @@ var ChatBoxComponent = /** @class */ (function () {
|
|
|
48
48
|
ChatBoxComponent.prototype.shouldAlignRight = function (message) {
|
|
49
49
|
return message.type && message.type === IChatMessageType.AGENT;
|
|
50
50
|
};
|
|
51
|
-
ChatBoxComponent.prototype.sendNewMessage = function () {
|
|
51
|
+
ChatBoxComponent.prototype.sendNewMessage = function (event) {
|
|
52
|
+
event.preventDefault();
|
|
52
53
|
if (this.newMessageText) {
|
|
53
54
|
this.newMessage.emit(this.newMessageText);
|
|
54
55
|
this.newMessageText = '';
|
|
55
56
|
}
|
|
57
|
+
this.searchElement.nativeElement.focus();
|
|
56
58
|
};
|
|
57
59
|
ChatBoxComponent.prototype.onNewMessageFocus = function (event) {
|
|
58
60
|
var isTyping = event && this.newMessageText.length > 0;
|
|
@@ -92,14 +94,17 @@ var ChatBoxComponent = /** @class */ (function () {
|
|
|
92
94
|
__decorate([
|
|
93
95
|
ViewChild('MessagesContainer', { static: true })
|
|
94
96
|
], ChatBoxComponent.prototype, "messagesContainer", void 0);
|
|
97
|
+
__decorate([
|
|
98
|
+
ViewChild('NewMessageText')
|
|
99
|
+
], ChatBoxComponent.prototype, "searchElement", void 0);
|
|
95
100
|
ChatBoxComponent = __decorate([
|
|
96
101
|
Component({
|
|
97
102
|
selector: 'app-chat-box',
|
|
98
|
-
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
|
|
99
|
-
styles: [".chat-box{background-color:#
|
|
103
|
+
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 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",
|
|
104
|
+
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}}"]
|
|
100
105
|
})
|
|
101
106
|
], ChatBoxComponent);
|
|
102
107
|
return ChatBoxComponent;
|
|
103
108
|
}());
|
|
104
109
|
export { ChatBoxComponent };
|
|
105
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
110
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1ib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFtYy10ZWNobm9sb2d5L3VpLWxpYnJhcnkvIiwic291cmNlcyI6WyJwcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2NoYXQtYm94L2NoYXQtYm94LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQWdDLE1BQU0sZUFBZSxDQUFDO0FBQ2hILE9BQU8sRUFBZ0IsZ0JBQWdCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQVEzRTtJQStCRTtRQTdCUyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBR2xCLGNBQVMsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUV2QixtQkFBYyxHQUFHLEtBQUssQ0FBQztRQUNiLGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUU1QyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUNsRCxtQkFBYyxHQUFHLEVBQUUsQ0FBQztRQUtwQixvQkFBZSxHQUFtQyxFQUFFLENBQUM7UUFDckQsV0FBTSxHQUFHO1lBQ1AsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1NBQ1YsQ0FBQztRQUNGLGdCQUFXLEdBQUcsQ0FBQyxDQUFDO1FBQ2hCLGVBQVUsR0FBRyxTQUFTLENBQUM7SUFFUCxDQUFDO0lBRWpCLDZDQUFrQixHQUFsQjtRQUNFLElBQUksSUFBSSxDQUFDLFNBQVMsS0FBSyxJQUFJLENBQUMsUUFBUSxDQUFDLE1BQU0sRUFBRTtZQUMzQyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDO1lBQ3RDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztTQUN2QjtJ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O0lBZDVDLGdCQUFnQjtRQUw1QixTQUFTLENBQUM7WUFDVCxRQUFRLEVBQUUsY0FBYztZQUN4QiwydENBQXdDOztTQUV6QyxDQUFDO09BQ1csZ0JBQWdCLENBeUY1QjtJQUFELHVCQUFDO0NBQUEsQUF6RkQsSUF5RkM7U0F6RlksZ0JBQWdCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIsIFZpZXdDaGlsZCwgRWxlbWVudFJlZiwgQWZ0ZXJWaWV3Q2hlY2tlZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJQ2hhdE1lc3NhZ2UsIElDaGF0TWVzc2FnZVR5cGUgfSBmcm9tICcuLi8uLi9tb2RlbHMvY2hhdC5tZXNzYWdlJztcclxuaW1wb3J0IHsgSUNoYXRTZXR0aW5ncyB9IGZyb20gJy4uLy4uL21vZGVscy9jaGF0LnNldHRpbmdzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLWNoYXQtYm94JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2hhdC1ib3guY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NoYXQtYm94LmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDaGF0Qm94Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3Q2hlY2tlZCB7XHJcbiAgQElucHV0KCkgc2V0dGluZ3M6IElDaGF0U2V0dGluZ3M7XHJcbiAgQElucHV0KCkgaXNUeXBpbmcgPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KCkgbWVzc2FnZXM6IElDaGF0TWVzc2FnZVtdO1xyXG4gIHByaXZhdGUgbGFzdENvdW50ID0gLTE7XHJcblxyXG4gIF9pc0FnZW50VHlwaW5nID0gZmFsc2U7XHJcbiAgQE91dHB1dCgpIGlzQWdlbnRUeXBpbmcgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIEBPdXRwdXQoKSBuZXdNZXNzYWdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcbiAgbmV3TWVzc2FnZVRleHQgPSAnJztcclxuXHJcbiAgQFZpZXdDaGlsZCgnTWVzc2FnZXNDb250YWluZXInLCB7IHN0YXRpYzogdHJ1ZSB9KSBtZXNzYWdlc0NvbnRhaW5lcjogRWxlbWVudFJlZjtcclxuICBAVmlld0NoaWxkKCdOZXdNZXNzYWdlVGV4dCcpIHNlYXJjaEVsZW1lbnQ6IEVsZW1lbnRSZWY7XHJcblxyXG4gIHVzZXJuYW1lVG9Db2xvcjogeyBbdXNlcm5hbWU6IHN0cmluZ106IHN0cmluZyB9ID0ge307XHJcbiAgY29sb3JzID0gW1xyXG4gICAgJyNjMmM0YzQnLFxyXG4gICAgJyNmZmFiOTEnLFxyXG4gICAgJyNmNDhmYjEnLFxyXG4gICAgJyMyOWI2ZjYnLFxyXG4gICAgJyNlMWJlZTcnLFxyXG4gICAgJyM5Y2NjNjUnLFxyXG4gICAgJyNmZmMxMDcnLFxyXG4gICAgJyMyNmM2ZGEnLFxyXG4gICAgJyNjZGRjMzknLFxyXG4gIF07XHJcbiAgY29sb3JzSW5kZXggPSAwO1xyXG4gIGFnZW50Q29sb3IgPSAnIzJkYjBlMCc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3Q2hlY2tlZCgpIHtcclxuICAgIGlmICh0aGlzLmxhc3RDb3VudCAhPT0gdGhpcy5tZXNzYWdlcy5sZW5ndGgpIHtcclxuICAgICAgdGhpcy5sYXN0Q291bnQgPSB0aGlzLm1lc3NhZ2VzLmxlbmd0aDtcclxuICAgICAgdGhpcy5zY3JvbGxUb0JvdHRvbSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgZ2V0Q29sb3IobWVzc2FnZTogSUNoYXRNZXNzYWdlKSB7XHJcbiAgICBpZiAobWVzc2FnZS50eXBlICYmIG1lc3NhZ2UudHlwZSA9PT0gSUNoYXRNZXNzYWdlVHlwZS5BR0VOVCkge1xyXG4gICAgICByZXR1cm4gdGhpcy5hZ2VudENvbG9yO1xyXG4gICAgfSBlbHNlIGlmIChtZXNzYWdlLnVzZXJuYW1lKSB7XHJcbiAgICAgIGlmICghdGhpcy51c2VybmFtZVRvQ29sb3JbbWVzc2FnZS51c2VybmFtZV0pIHtcclxuICAgICAgICB0aGlzLnVzZXJuYW1lVG9Db2xvclttZXNzYWdlLnVzZXJuYW1lXSA9IHRoaXMuY29sb3JzW3RoaXMuY29sb3JzSW5kZXhdO1xyXG4gICAgICAgIHRoaXMuY29sb3JzSW5kZXggPSAodGhpcy5jb2xvcnNJbmRleCArIDEpICUgdGhpcy5jb2xvcnMubGVuZ3RoO1xyXG4gICAgICB9XHJcbiAgICAgIHJldHVybiB0aGlzLnVzZXJuYW1lVG9Db2xvclttZXNzYWdlLnVzZXJuYW1lXTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHJldHVybiB0aGlzLmNvbG9yc1swXTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHNob3VsZEFsaWduUmlnaHQobWVzc2FnZTogSUNoYXRNZXNzYWdlKSB7XHJcbiAgICByZXR1cm4gbWVzc2FnZS50eXBlICYmIG1lc3NhZ2UudHlwZSA9PT0gSUNoYXRNZXNzYWdlVHlwZS5BR0VOVDtcclxuICB9XHJcblxyXG4gIHNlbmROZXdNZXNzYWdlKGV2ZW50KSB7XHJcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgaWYgKHRoaXMubmV3TWVzc2FnZVRleHQpIHtcclxuICAgICAgdGhpcy5uZXdNZXNzYWdlLmVtaXQodGhpcy5uZXdNZXNzYWdlVGV4dCk7XHJcbiAgICAgIHRoaXMubmV3TWVzc2FnZVRleHQgPSAnJztcclxuICAgIH1cclxuICAgIHRoaXMuc2VhcmNoRWxlbWVudC5uYXRpdmVFbGVtZW50LmZvY3VzKCk7XHJcbiAgfVxyXG5cclxuICBvbk5ld01lc3NhZ2VGb2N1cyhldmVudDogYm9vbGVhbikge1xyXG4gICAgY29uc3QgaXNUeXBpbmcgPSBldmVudCAmJiB0aGlzLm5ld01lc3NhZ2VUZXh0Lmxlbmd0aCA+IDA7XHJcbiAgICBpZiAoaXNUeXBpbmcgIT09IHRoaXMuX2lzQWdlbnRUeXBpbmcpIHtcclxuICAgICAgdGhpcy5faXNBZ2VudFR5cGluZyA9IGlzVHlwaW5nO1xyXG4gICAgICB0aGlzLmlzQWdlbnRUeXBpbmcuZW1pdChpc1R5cGluZyk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBvbktleXVwKCkge1xyXG4gICAgY29uc3QgaXNUeXBpbmcgPSB0aGlzLm5ld01lc3NhZ2VUZXh0Lmxlbmd0aCA+IDA7XHJcbiAgICBpZiAoaXNUeXBpbmcgIT09IHRoaXMuX2lzQWdlbnRUeXBpbmcpIHtcclxuICAgICAgdGhpcy5faXNBZ2VudFR5cGluZyA9IGlzVHlwaW5nO1xyXG4gICAgICB0aGlzLmlzQWdlbnRUeXBpbmcuZW1pdChpc1R5cGluZyk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzY3JvbGxUb0JvdHRvbSgpIHtcclxuICAgIHRyeSB7XHJcbiAgICAgIHRoaXMubWVzc2FnZXNDb250YWluZXIubmF0aXZlRWxlbWVudC5zY3JvbGxUb3AgPSB0aGlzLm1lc3NhZ2VzQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQuc2Nyb2xsSGVpZ2h0O1xyXG4gICAgfVxyXG4gICAgY2F0Y2ggKGUpIHsgfVxyXG4gIH1cclxufVxyXG4iXX0=
|
|
@@ -30,11 +30,11 @@ var ChatMessageComponent = /** @class */ (function () {
|
|
|
30
30
|
ChatMessageComponent = __decorate([
|
|
31
31
|
Component({
|
|
32
32
|
selector: 'app-chat-message',
|
|
33
|
-
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
|
|
34
|
-
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
|
|
33
|
+
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",
|
|
34
|
+
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}"]
|
|
35
35
|
})
|
|
36
36
|
], ChatMessageComponent);
|
|
37
37
|
return ChatMessageComponent;
|
|
38
38
|
}());
|
|
39
39
|
export { ChatMessageComponent };
|
|
40
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
40
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1tZXNzYWdlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BhbWMtdGVjaG5vbG9neS91aS1saWJyYXJ5LyIsInNvdXJjZXMiOlsicHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9jaGF0LW1lc3NhZ2UvY2hhdC1tZXNzYWdlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFPekQ7SUFTRTtRQVBTLGVBQVUsR0FBRyxLQUFLLENBQUM7SUFPWixDQUFDO0lBRWpCLHVDQUFRLEdBQVI7SUFDQSxDQUFDO0lBWFE7UUFBUixLQUFLLEVBQUU7eURBQWlCO0lBQ2hCO1FBQVIsS0FBSyxFQUFFOzREQUFvQjtJQUNuQjtRQUFSLEtBQUssRUFBRTswREFBa0I7SUFDakI7UUFBUixLQUFLLEVBQUU7dURBQWU7SUFDZDtRQUFSLEtBQUssRUFBRTsyREFBbUI7SUFDbEI7UUFBUixLQUFLLEVBQUU7dURBQWU7SUFDZDtRQUFSLEtBQUssRUFBRTsrREFBdUI7SUFQcEIsb0JBQW9CO1FBTGhDLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSxrQkFBa0I7WUFDNUIsdXFCQUE0Qzs7U0FFN0MsQ0FBQztPQUNXLG9CQUFvQixDQWNoQztJQUFELDJCQUFDO0NBQUEsQUFkRCxJQWNDO1NBZFksb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2FwcC1jaGF0LW1lc3NhZ2UnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGF0LW1lc3NhZ2UuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NoYXQtbWVzc2FnZS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDaGF0TWVzc2FnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KCkgbWVzc2FnZTogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGFsaWduUmlnaHQgPSBmYWxzZTtcclxuICBASW5wdXQoKSB1c2VybmFtZTogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGNvbG9yOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgdGltZXN0YW1wOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgaW1hZ2U6IHN0cmluZztcclxuICBASW5wdXQoKSBmYWxsYmFja0ltYWdlOiBzdHJpbmc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gIH1cclxuXHJcbn1cclxuIl19
|
|
@@ -75,11 +75,11 @@ var InteractionComponent = /** @class */ (function () {
|
|
|
75
75
|
InteractionComponent = __decorate([
|
|
76
76
|
Component({
|
|
77
77
|
selector: 'amc-interaction',
|
|
78
|
-
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
|
|
78
|
+
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",
|
|
79
79
|
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}"]
|
|
80
80
|
})
|
|
81
81
|
], InteractionComponent);
|
|
82
82
|
return InteractionComponent;
|
|
83
83
|
}());
|
|
84
84
|
export { InteractionComponent };
|
|
85
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
85
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJhY3Rpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFtYy10ZWNobm9sb2d5L3VpLWxpYnJhcnkvIiwic291cmNlcyI6WyJwcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2ludGVyYWN0aW9uL2ludGVyYWN0aW9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUcvRTs7R0FFRztBQU1IO0lBa0JFOztPQUVHO0lBQ0g7UUFsQlUscUJBQWdCLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFDN0Qsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBQzVDLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBaUJoRCxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUMxQixDQUFDO0lBYkQsc0JBQUksNENBQVU7YUFJZDtZQUNFLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztRQUN4QixDQUFDO2FBTkQsVUFBZSxLQUFLO1lBQ2xCLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDcEMsQ0FBQzs7O09BQUE7SUFZRDs7T0FFRztJQUNILHVDQUFRLEdBQVI7SUFDQSxDQUFDO0lBRUQ7O09BRUc7SUFDSCx1Q0FBUSxHQUFSO1FBQ0UsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7SUFDekIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsdUNBQVEsR0FBUjtRQUNFLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzFCLENBQUM7SUFFRDs7T0FFRztJQUNILCtDQUFnQixHQUFoQjtRQUNFLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNuRSxPQUFPLElBQUksQ0FBQztTQUNiO1FBQ0QsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDO0lBRUQsK0NBQWdCLEdBQWhCLFVBQWlCLEtBQW9CO1FBQ25DLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLEVBQUU7WUFDMUIsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1NBQ2pCO0lBQ0gsQ0FBQztJQUVELDZDQUFjLEdBQWQsVUFBZSxLQUFvQjtRQUNqQyxJQUFJLEtBQUssQ0FBQyxJQUFJLEtBQUssT0FBTyxFQUFFO1lBQzFCLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztTQUNqQjtJQUNILENBQUM7SUEvRFE7UUFBUixLQUFLLEVBQUU7NkRBQTJCO0lBQ3pCO1FBQVQsTUFBTSxFQUFFO2tFQUE4RDtJQUM3RDtRQUFULE1BQU0sRUFBRTsrREFBNkM7SUFDNUM7UUFBVCxNQUFNLEVBQUU7NERBQXlDO0lBTHZDLG9CQUFvQjtRQUxoQyxTQUFTLENBQUM7WUFDVCxRQUFRLEVBQUUsaUJBQWlCO1lBQzNCLGd0TEFBMkM7O1NBRTVDLENBQUM7T0FDVyxvQkFBb0IsQ0FtRWhDO0lBQUQsMkJBQUM7Q0FBQSxBQW5FRCxJQW1FQztTQW5FWSxvQkFBb0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IElJbnRlcmFjdGlvbiB9IGZyb20gJy4uLy4uL21vZGVscy91aWxpYnJhcnkubW9kZWwnO1xyXG5cclxuLyoqXHJcbiAqIEBpZ25vcmVcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYW1jLWludGVyYWN0aW9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vaW50ZXJhY3Rpb24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2ludGVyYWN0aW9uLmNvbXBvbmVudC5zY3NzJywgJy4vLi4vdWlsaWJyYXJ5Lm1vZHVsZS5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIEludGVyYWN0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KCkgaW50ZXJhY3Rpb246IElJbnRlcmFjdGlvbjtcclxuICBAT3V0cHV0KCkgbWluaW1pemVkQ2hhbmdlZDogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSBpc0FnZW50VHlwaW5nID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG4gIEBPdXRwdXQoKSBuZXdNZXNzYWdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcbiAgLyoqXHJcbiAgICogQGlnbm9yZVxyXG4gICAqL1xyXG4gIG1pbmltaXplZDogYm9vbGVhbjtcclxuICBzZXQgX21pbmltaXplZCh2YWx1ZSkge1xyXG4gICAgdGhpcy5taW5pbWl6ZWQgPSB2YWx1ZTtcclxuICAgIHRoaXMubWluaW1pemVkQ2hhbmdlZC5lbWl0KHZhbHVlKTtcclxuICB9XHJcbiAgZ2V0IF9taW5pbWl6ZWQoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5taW5pbWl6ZWQ7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBAaWdub3JlXHJcbiAgICovXHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgICB0aGlzLl9taW5pbWl6ZWQgPSBmYWxzZTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEBpZ25vcmVcclxuICAgKi9cclxuICBuZ09uSW5pdCgpIHtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEBpZ25vcmVcclxuICAgKi9cclxuICBtaW5pbWl6ZSgpOiB2b2lkIHtcclxuICAgIHRoaXMuX21pbmltaXplZCA9IHRydWU7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBAaWdub3JlXHJcbiAgICovXHJcbiAgbWF4aW1pemUoKTogdm9pZCB7XHJcbiAgICB0aGlzLl9taW5pbWl6ZWQgPSBmYWxzZTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEBpZ25vcmVcclxuICAgKi9cclxuICBpc0NvbmZlcmVuY2VDYWxsKCk6IGJvb2xlYW4ge1xyXG4gICAgaWYgKHRoaXMuaW50ZXJhY3Rpb24ucGFydGllcyAmJiB0aGlzLmludGVyYWN0aW9uLnBhcnRpZXMubGVuZ3RoID4gMSkge1xyXG4gICAgICByZXR1cm4gdHJ1ZTtcclxuICAgIH1cclxuICAgIHJldHVybiBmYWxzZTtcclxuICB9XHJcblxyXG4gIGNvbGxhcHNlS2V5cHJlc3MoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcclxuICAgIGlmIChldmVudC5jb2RlID09PSAnRW50ZXInKSB7XHJcbiAgICAgIHRoaXMubWluaW1pemUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGV4cGFuZEtleXByZXNzKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XHJcbiAgICBpZiAoZXZlbnQuY29kZSA9PT0gJ0VudGVyJykge1xyXG4gICAgICB0aGlzLm1heGltaXplKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=
|
|
@@ -78,7 +78,7 @@ __decorate([
|
|
|
78
78
|
InteractionComponent = __decorate([
|
|
79
79
|
Component({
|
|
80
80
|
selector: 'amc-interaction',
|
|
81
|
-
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
|
|
81
|
+
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",
|
|
82
82
|
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}"]
|
|
83
83
|
})
|
|
84
84
|
], InteractionComponent);
|
|
@@ -458,7 +458,7 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
458
458
|
this.newMessageText = '';
|
|
459
459
|
this.usernameToColor = {};
|
|
460
460
|
this.colors = [
|
|
461
|
-
'#
|
|
461
|
+
'#c2c4c4',
|
|
462
462
|
'#ffab91',
|
|
463
463
|
'#f48fb1',
|
|
464
464
|
'#29b6f6',
|
|
@@ -469,7 +469,7 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
469
469
|
'#cddc39',
|
|
470
470
|
];
|
|
471
471
|
this.colorsIndex = 0;
|
|
472
|
-
this.agentColor = '#
|
|
472
|
+
this.agentColor = '#2db0e0';
|
|
473
473
|
}
|
|
474
474
|
ngAfterViewChecked() {
|
|
475
475
|
if (this.lastCount !== this.messages.length) {
|
|
@@ -495,11 +495,13 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
495
495
|
shouldAlignRight(message) {
|
|
496
496
|
return message.type && message.type === IChatMessageType.AGENT;
|
|
497
497
|
}
|
|
498
|
-
sendNewMessage() {
|
|
498
|
+
sendNewMessage(event) {
|
|
499
|
+
event.preventDefault();
|
|
499
500
|
if (this.newMessageText) {
|
|
500
501
|
this.newMessage.emit(this.newMessageText);
|
|
501
502
|
this.newMessageText = '';
|
|
502
503
|
}
|
|
504
|
+
this.searchElement.nativeElement.focus();
|
|
503
505
|
}
|
|
504
506
|
onNewMessageFocus(event) {
|
|
505
507
|
const isTyping = event && this.newMessageText.length > 0;
|
|
@@ -540,11 +542,14 @@ __decorate([
|
|
|
540
542
|
__decorate([
|
|
541
543
|
ViewChild('MessagesContainer', { static: true })
|
|
542
544
|
], ChatBoxComponent.prototype, "messagesContainer", void 0);
|
|
545
|
+
__decorate([
|
|
546
|
+
ViewChild('NewMessageText')
|
|
547
|
+
], ChatBoxComponent.prototype, "searchElement", void 0);
|
|
543
548
|
ChatBoxComponent = __decorate([
|
|
544
549
|
Component({
|
|
545
550
|
selector: 'app-chat-box',
|
|
546
|
-
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
|
|
547
|
-
styles: [".chat-box{background-color:#
|
|
551
|
+
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 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",
|
|
552
|
+
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}}"]
|
|
548
553
|
})
|
|
549
554
|
], ChatBoxComponent);
|
|
550
555
|
|
|
@@ -579,8 +584,8 @@ __decorate([
|
|
|
579
584
|
ChatMessageComponent = __decorate([
|
|
580
585
|
Component({
|
|
581
586
|
selector: 'app-chat-message',
|
|
582
|
-
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
|
|
583
|
-
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
|
|
587
|
+
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",
|
|
588
|
+
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}"]
|
|
584
589
|
})
|
|
585
590
|
], ChatMessageComponent);
|
|
586
591
|
|