@amc-technology/ui-library 1.0.38 → 1.0.41
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 +14 -7
- 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 +14 -7
- package/esm2015/projects/UILibrary/src/app/components/interaction/interaction.component.js +3 -3
- package/esm5/projects/UILibrary/src/app/components/chat-box/chat-box.component.js +14 -7
- package/esm5/projects/UILibrary/src/app/components/interaction/interaction.component.js +3 -3
- package/fesm2015/amc-technology-ui-library.js +15 -8
- package/fesm2015/amc-technology-ui-library.js.map +1 -1
- package/fesm5/amc-technology-ui-library.js +15 -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 +6 -4
- package/webcomponents/webcomponents.js +1 -1
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
|
|
2
|
+
import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnInit, Renderer2 } from '@angular/core';
|
|
3
3
|
import { IChatMessageType } from '../../models/chat.message';
|
|
4
4
|
let ChatBoxComponent = class ChatBoxComponent {
|
|
5
|
-
constructor() {
|
|
5
|
+
constructor(renderer) {
|
|
6
|
+
this.renderer = renderer;
|
|
6
7
|
this.isTyping = false;
|
|
7
8
|
this.lastCount = -1;
|
|
8
9
|
this._isAgentTyping = false;
|
|
@@ -24,6 +25,9 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
24
25
|
this.colorsIndex = 0;
|
|
25
26
|
this.agentColor = '#2db0e0';
|
|
26
27
|
}
|
|
28
|
+
ngAfterViewInit() {
|
|
29
|
+
this.renderer.selectRootElement('#autofocus').focus();
|
|
30
|
+
}
|
|
27
31
|
ngAfterViewChecked() {
|
|
28
32
|
if (this.lastCount !== this.messages.length) {
|
|
29
33
|
this.lastCount = this.messages.length;
|
|
@@ -54,7 +58,7 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
54
58
|
this.newMessage.emit(this.newMessageText);
|
|
55
59
|
this.newMessageText = '';
|
|
56
60
|
}
|
|
57
|
-
this.
|
|
61
|
+
this.renderer.selectRootElement('#autofocus').focus();
|
|
58
62
|
}
|
|
59
63
|
onNewMessageFocus(event) {
|
|
60
64
|
const isTyping = event && this.newMessageText.length > 0;
|
|
@@ -77,6 +81,9 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
77
81
|
catch (e) { }
|
|
78
82
|
}
|
|
79
83
|
};
|
|
84
|
+
ChatBoxComponent.ctorParameters = () => [
|
|
85
|
+
{ type: Renderer2 }
|
|
86
|
+
];
|
|
80
87
|
__decorate([
|
|
81
88
|
Input()
|
|
82
89
|
], ChatBoxComponent.prototype, "settings", void 0);
|
|
@@ -96,14 +103,14 @@ __decorate([
|
|
|
96
103
|
ViewChild('MessagesContainer', { static: true })
|
|
97
104
|
], ChatBoxComponent.prototype, "messagesContainer", void 0);
|
|
98
105
|
__decorate([
|
|
99
|
-
ViewChild('
|
|
100
|
-
], ChatBoxComponent.prototype, "
|
|
106
|
+
ViewChild('autofocus', { static: false })
|
|
107
|
+
], ChatBoxComponent.prototype, "autofocus", void 0);
|
|
101
108
|
ChatBoxComponent = __decorate([
|
|
102
109
|
Component({
|
|
103
110
|
selector: 'app-chat-box',
|
|
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",
|
|
111
|
+
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",
|
|
105
112
|
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}}"]
|
|
106
113
|
})
|
|
107
114
|
], ChatBoxComponent);
|
|
108
115
|
export { ChatBoxComponent };
|
|
109
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
116
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1ib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFtYy10ZWNobm9sb2d5L3VpLWxpYnJhcnkvIiwic291cmNlcyI6WyJwcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2NoYXQtYm94L2NoYXQtYm94LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLGFBQWEsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2xKLE9BQU8sRUFBZ0IsZ0JBQWdCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQVEzRSxJQUFhLGdCQUFnQixHQUE3QixNQUFhLGdCQUFnQjtJQStCM0IsWUFBb0IsUUFBa0I7UUFBbEIsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQTdCN0IsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUdsQixjQUFTLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFFdkIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFDYixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFFNUMsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDbEQsbUJBQWMsR0FBRyxFQUFFLENBQUM7UUFLcEIsb0JBQWUsR0FBbUMsRUFBRSxDQUFDO1FBQ3JELFdBQU0sR0FBRztZQUNQLFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztTQUNWLENBQUM7UUFDRixnQkFBVyxHQUFHLENBQUMsQ0FBQztRQUNoQixlQUFVLEdBQUcsU0FBUyxDQUFDO0lBRW1CLENBQUM7SUFDM0MsZUFBZTtRQUNiLElBQUksQ0FBQyxRQUFRLENBQUMsaUJBQWlCLENBQUMsWUFB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QUssRUFBRTtrREFBa0I7QUFFakI7SUFBUixLQUFLLEVBQUU7a0RBQTBCO0FBSXhCO0lBQVQsTUFBTSxFQUFFO3VEQUE2QztBQUU1QztJQUFULE1BQU0sRUFBRTtvREFBeUM7QUFHQTtJQUFqRCxTQUFTLENBQUMsbUJBQW1CLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFLENBQUM7MkRBQStCO0FBQ3JDO0lBQTFDLFNBQVMsQ0FBQyxXQUFXLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLENBQUM7bURBQXVCO0FBZHRELGdCQUFnQjtJQUw1QixTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsY0FBYztRQUN4QixrdUNBQXdDOztLQUV6QyxDQUFDO0dBQ1csZ0JBQWdCLENBNEY1QjtTQTVGWSxnQkFBZ0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgVmlld0NoaWxkLCBFbGVtZW50UmVmLCBBZnRlclZpZXdDaGVja2VkLCBBZnRlclZpZXdJbml0LCBPbkluaXQsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJQ2hhdE1lc3NhZ2UsIElDaGF0TWVzc2FnZVR5cGUgfSBmcm9tICcuLi8uLi9tb2RlbHMvY2hhdC5tZXNzYWdlJztcclxuaW1wb3J0IHsgSUNoYXRTZXR0aW5ncyB9IGZyb20gJy4uLy4uL21vZGVscy9jaGF0LnNldHRpbmdzJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYXBwLWNoYXQtYm94JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vY2hhdC1ib3guY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2NoYXQtYm94LmNvbXBvbmVudC5zY3NzJ10sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBDaGF0Qm94Q29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3Q2hlY2tlZCwgQWZ0ZXJWaWV3SW5pdCB7XHJcbiAgQElucHV0KCkgc2V0dGluZ3M6IElDaGF0U2V0dGluZ3M7XHJcbiAgQElucHV0KCkgaXNUeXBpbmcgPSBmYWxzZTtcclxuXHJcbiAgQElucHV0KCkgbWVzc2FnZXM6IElDaGF0TWVzc2FnZVtdO1xyXG4gIHByaXZhdGUgbGFzdENvdW50ID0gLTE7XHJcblxyXG4gIF9pc0FnZW50VHlwaW5nID0gZmFsc2U7XHJcbiAgQE91dHB1dCgpIGlzQWdlbnRUeXBpbmcgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcblxyXG4gIEBPdXRwdXQoKSBuZXdNZXNzYWdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcbiAgbmV3TWVzc2FnZVRleHQgPSAnJztcclxuXHJcbiAgQFZpZXdDaGlsZCgnTWVzc2FnZXNDb250YWluZXInLCB7IHN0YXRpYzogdHJ1ZSB9KSBtZXNzYWdlc0NvbnRhaW5lcjogRWxlbWVudFJlZjtcclxuICBAVmlld0NoaWxkKCdhdXRvZm9jdXMnLCB7IHN0YXRpYzogZmFsc2UgfSkgYXV0b2ZvY3VzOiBFbGVtZW50UmVmO1xyXG5cclxuICB1c2VybmFtZVRvQ29sb3I6IHsgW3VzZXJuYW1lOiBzdHJpbmddOiBzdHJpbmcgfSA9IHt9O1xyXG4gIGNvbG9ycyA9IFtcclxuICAgICcjYzJjNGM0JyxcclxuICAgICcjZmZhYjkxJyxcclxuICAgICcjZjQ4ZmIxJyxcclxuICAgICcjMjliNmY2JyxcclxuICAgICcjZTFiZWU3JyxcclxuICAgICcjOWNjYzY1JyxcclxuICAgICcjZmZjMTA3JyxcclxuICAgICcjMjZjNmRhJyxcclxuICAgICcjY2RkYzM5JyxcclxuICBdO1xyXG4gIGNvbG9yc0luZGV4ID0gMDtcclxuICBhZ2VudENvbG9yID0gJyMyZGIwZTAnO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIHJlbmRlcmVyOlJlbmRlcmVyMikgeyB9XHJcbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xyXG4gICAgdGhpcy5yZW5kZXJlci5zZWxlY3RSb290RWxlbWVudCgnI2F1dG9mb2N1cycpLmZvY3VzKCk7XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0NoZWNrZWQoKSB7XHJcbiAgICBpZiAodGhpcy5sYXN0Q291bnQgIT09IHRoaXMubWVzc2FnZXMubGVuZ3RoKSB7XHJcbiAgICAgIHRoaXMubGFzdENvdW50ID0gdGhpcy5tZXNzYWdlcy5sZW5ndGg7XHJcbiAgICAgIHRoaXMuc2Nyb2xsVG9Cb3R0b20oKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGdldENvbG9yKG1lc3NhZ2U6IElDaGF0TWVzc2FnZSkge1xyXG4gICAgaWYgKG1lc3NhZ2UudHlwZSAmJiBtZXNzYWdlLnR5cGUgPT09IElDaGF0TWVzc2FnZVR5cGUuQUdFTlQpIHtcclxuICAgICAgcmV0dXJuIHRoaXMuYWdlbnRDb2xvcjtcclxuICAgIH0gZWxzZSBpZiAobWVzc2FnZS51c2VybmFtZSkge1xyXG4gICAgICBpZiAoIXRoaXMudXNlcm5hbWVUb0NvbG9yW21lc3NhZ2UudXNlcm5hbWVdKSB7XHJcbiAgICAgICAgdGhpcy51c2VybmFtZVRvQ29sb3JbbWVzc2FnZS51c2VybmFtZV0gPSB0aGlzLmNvbG9yc1t0aGlzLmNvbG9yc0luZGV4XTtcclxuICAgICAgICB0aGlzLmNvbG9yc0luZGV4ID0gKHRoaXMuY29sb3JzSW5kZXggKyAxKSAlIHRoaXMuY29sb3JzLmxlbmd0aDtcclxuICAgICAgfVxyXG4gICAgICByZXR1cm4gdGhpcy51c2VybmFtZVRvQ29sb3JbbWVzc2FnZS51c2VybmFtZV07XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICByZXR1cm4gdGhpcy5jb2xvcnNbMF07XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzaG91bGRBbGlnblJpZ2h0KG1lc3NhZ2U6IElDaGF0TWVzc2FnZSkge1xyXG4gICAgcmV0dXJuIG1lc3NhZ2UudHlwZSAmJiBtZXNzYWdlLnR5cGUgPT09IElDaGF0TWVzc2FnZVR5cGUuQUdFTlQ7XHJcbiAgfVxyXG5cclxuICBzZW5kTmV3TWVzc2FnZShldmVudCkge1xyXG4gICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcclxuICAgIGlmICh0aGlzLm5ld01lc3NhZ2VUZXh0KSB7XHJcbiAgICAgIHRoaXMubmV3TWVzc2FnZS5lbWl0KHRoaXMubmV3TWVzc2FnZVRleHQpO1xyXG4gICAgICB0aGlzLm5ld01lc3NhZ2VUZXh0ID0gJyc7XHJcbiAgICB9XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNlbGVjdFJvb3RFbGVtZW50KCcjYXV0b2ZvY3VzJykuZm9jdXMoKTtcclxuICB9XHJcblxyXG4gIG9uTmV3TWVzc2FnZUZvY3VzKGV2ZW50OiBib29sZWFuKSB7XHJcbiAgICBjb25zdCBpc1R5cGluZyA9IGV2ZW50ICYmIHRoaXMubmV3TWVzc2FnZVRleHQubGVuZ3RoID4gMDtcclxuICAgIGlmIChpc1R5cGluZyAhPT0gdGhpcy5faXNBZ2VudFR5cGluZykge1xyXG4gICAgICB0aGlzLl9pc0FnZW50VHlwaW5nID0gaXNUeXBpbmc7XHJcbiAgICAgIHRoaXMuaXNBZ2VudFR5cGluZy5lbWl0KGlzVHlwaW5nKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG9uS2V5dXAoKSB7XHJcbiAgICBjb25zdCBpc1R5cGluZyA9IHRoaXMubmV3TWVzc2FnZVRleHQubGVuZ3RoID4gMDtcclxuICAgIGlmIChpc1R5cGluZyAhPT0gdGhpcy5faXNBZ2VudFR5cGluZykge1xyXG4gICAgICB0aGlzLl9pc0FnZW50VHlwaW5nID0gaXNUeXBpbmc7XHJcbiAgICAgIHRoaXMuaXNBZ2VudFR5cGluZy5lbWl0KGlzVHlwaW5nKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHNjcm9sbFRvQm90dG9tKCkge1xyXG4gICAgdHJ5IHtcclxuICAgICAgdGhpcy5tZXNzYWdlc0NvbnRhaW5lci5uYXRpdmVFbGVtZW50LnNjcm9sbFRvcCA9IHRoaXMubWVzc2FnZXNDb250YWluZXIubmF0aXZlRWxlbWVudC5zY3JvbGxIZWlnaHQ7XHJcbiAgICB9XHJcbiAgICBjYXRjaCAoZSkgeyB9XHJcbiAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -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
|
|
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}"]
|
|
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 <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",
|
|
76
|
+
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}"]
|
|
77
77
|
})
|
|
78
78
|
], InteractionComponent);
|
|
79
79
|
export { InteractionComponent };
|
|
80
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJhY3Rpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFtYy10ZWNobm9sb2d5L3VpLWxpYnJhcnkvIiwic291cmNlcyI6WyJwcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2ludGVyYWN0aW9uL2ludGVyYWN0aW9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUcvRTs7R0FFRztBQU1ILElBQWEsb0JBQW9CLEdBQWpDLE1BQWEsb0JBQW9CO0lBa0IvQjs7T0FFRztJQUNIO1FBbEJVLHFCQUFnQixHQUEwQixJQUFJLFlBQVksRUFBRSxDQUFDO1FBQzdELGtCQUFhLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUM1QyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQWlCaEQsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDMUIsQ0FBQztJQWJELElBQUksVUFBVSxDQUFDLEtBQUs7UUFDbEIsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7UUFDdkIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBQ0QsSUFBSSxVQUFVO1FBQ1osT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQ3hCLENBQUM7SUFTRDs7T0FFRztJQUNILFFBQVE7SUFDUixDQUFDO0lBRUQ7O09BRUc7SUFDSCxRQUFRO1FBQ04sSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7SUFDekIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsUUFBUTtRQUNOLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzFCLENBQUM7SUFFRDs7T0FFRztJQUNILGdCQUFnQjtRQUNkLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNuRSxPQUFPLElBQUksQ0FBQztTQUNiO1FBQ0QsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsS0FBb0I7UUFDbkMsSUFBSSxLQUFLLENBQUMsSUFBSSxLQUFLLE9BQU8sRUFBRTtZQUMxQixJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7U0FDakI7SUFDSCxDQUFDO0lBRUQsY0FBYyxDQUFDLEtBQW9CO1FBQ2pDLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLEVBQUU7WUFDMUIsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1NBQ2pCO0lBQ0gsQ0FBQztDQUVGLENBQUE7QUFqRVU7SUFBUixLQUFLLEVBQUU7eURBQTJCO0FBQ3pCO0lBQVQsTUFBTSxFQUFFOzhEQUE4RDtBQUM3RDtJQUFULE1BQU0sRUFBRTsyREFBNkM7QUFDNUM7SUFBVCxNQUFNLEVBQUU7d0RBQXlDO0FBTHZDLG9CQUFvQjtJQUxoQyxTQUFTLENBQUM7UUFDVCxRQUFRLEVBQUUsaUJBQWlCO1FBQzNCLHUvTEFBMkM7O0tBRTVDLENBQUM7R0FDVyxvQkFBb0IsQ0FtRWhDO1NBbkVZLG9CQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgSUludGVyYWN0aW9uIH0gZnJvbSAnLi4vLi4vbW9kZWxzL3VpbGlicmFyeS5tb2RlbCc7XHJcblxyXG4vKipcclxuICogQGlnbm9yZVxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhbWMtaW50ZXJhY3Rpb24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9pbnRlcmFjdGlvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vaW50ZXJhY3Rpb24uY29tcG9uZW50LnNjc3MnLCAnLi8uLi91aWxpYnJhcnkubW9kdWxlLnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgSW50ZXJhY3Rpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBASW5wdXQoKSBpbnRlcmFjdGlvbjogSUludGVyYWN0aW9uO1xyXG4gIEBPdXRwdXQoKSBtaW5pbWl6ZWRDaGFuZ2VkOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcbiAgQE91dHB1dCgpIGlzQWdlbnRUeXBpbmcgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XHJcbiAgQE91dHB1dCgpIG5ld01lc3NhZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuICAvKipcclxuICAgKiBAaWdub3JlXHJcbiAgICovXHJcbiAgbWluaW1pemVkOiBib29sZWFuO1xyXG4gIHNldCBfbWluaW1pemVkKHZhbHVlKSB7XHJcbiAgICB0aGlzLm1pbmltaXplZCA9IHZhbHVlO1xyXG4gICAgdGhpcy5taW5pbWl6ZWRDaGFuZ2VkLmVtaXQodmFsdWUpO1xyXG4gIH1cclxuICBnZXQgX21pbmltaXplZCgpIHtcclxuICAgIHJldHVybiB0aGlzLm1pbmltaXplZDtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEBpZ25vcmVcclxuICAgKi9cclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICAgIHRoaXMuX21pbmltaXplZCA9IGZhbHNlO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogQGlnbm9yZVxyXG4gICAqL1xyXG4gIG5nT25Jbml0KCkge1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogQGlnbm9yZVxyXG4gICAqL1xyXG4gIG1pbmltaXplKCk6IHZvaWQge1xyXG4gICAgdGhpcy5fbWluaW1pemVkID0gdHJ1ZTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEBpZ25vcmVcclxuICAgKi9cclxuICBtYXhpbWl6ZSgpOiB2b2lkIHtcclxuICAgIHRoaXMuX21pbmltaXplZCA9IGZhbHNlO1xyXG4gIH1cclxuXHJcbiAgLyoqXHJcbiAgICogQGlnbm9yZVxyXG4gICAqL1xyXG4gIGlzQ29uZmVyZW5jZUNhbGwoKTogYm9vbGVhbiB7XHJcbiAgICBpZiAodGhpcy5pbnRlcmFjdGlvbi5wYXJ0aWVzICYmIHRoaXMuaW50ZXJhY3Rpb24ucGFydGllcy5sZW5ndGggPiAxKSB7XHJcbiAgICAgIHJldHVybiB0cnVlO1xyXG4gICAgfVxyXG4gICAgcmV0dXJuIGZhbHNlO1xyXG4gIH1cclxuXHJcbiAgY29sbGFwc2VLZXlwcmVzcyhldmVudDogS2V5Ym9hcmRFdmVudCkge1xyXG4gICAgaWYgKGV2ZW50LmNvZGUgPT09ICdFbnRlcicpIHtcclxuICAgICAgdGhpcy5taW5pbWl6ZSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgZXhwYW5kS2V5cHJlc3MoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcclxuICAgIGlmIChldmVudC5jb2RlID09PSAnRW50ZXInKSB7XHJcbiAgICAgIHRoaXMubWF4aW1pemUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG59XHJcbiJdfQ==
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
|
|
2
|
+
import { Component, Input, Output, EventEmitter, ViewChild, ElementRef, AfterViewChecked, AfterViewInit, OnInit, Renderer2 } from '@angular/core';
|
|
3
3
|
import { IChatMessageType } from '../../models/chat.message';
|
|
4
4
|
var ChatBoxComponent = /** @class */ (function () {
|
|
5
|
-
function ChatBoxComponent() {
|
|
5
|
+
function ChatBoxComponent(renderer) {
|
|
6
|
+
this.renderer = renderer;
|
|
6
7
|
this.isTyping = false;
|
|
7
8
|
this.lastCount = -1;
|
|
8
9
|
this._isAgentTyping = false;
|
|
@@ -24,6 +25,9 @@ var ChatBoxComponent = /** @class */ (function () {
|
|
|
24
25
|
this.colorsIndex = 0;
|
|
25
26
|
this.agentColor = '#2db0e0';
|
|
26
27
|
}
|
|
28
|
+
ChatBoxComponent.prototype.ngAfterViewInit = function () {
|
|
29
|
+
this.renderer.selectRootElement('#autofocus').focus();
|
|
30
|
+
};
|
|
27
31
|
ChatBoxComponent.prototype.ngAfterViewChecked = function () {
|
|
28
32
|
if (this.lastCount !== this.messages.length) {
|
|
29
33
|
this.lastCount = this.messages.length;
|
|
@@ -54,7 +58,7 @@ var ChatBoxComponent = /** @class */ (function () {
|
|
|
54
58
|
this.newMessage.emit(this.newMessageText);
|
|
55
59
|
this.newMessageText = '';
|
|
56
60
|
}
|
|
57
|
-
this.
|
|
61
|
+
this.renderer.selectRootElement('#autofocus').focus();
|
|
58
62
|
};
|
|
59
63
|
ChatBoxComponent.prototype.onNewMessageFocus = function (event) {
|
|
60
64
|
var isTyping = event && this.newMessageText.length > 0;
|
|
@@ -76,6 +80,9 @@ var ChatBoxComponent = /** @class */ (function () {
|
|
|
76
80
|
}
|
|
77
81
|
catch (e) { }
|
|
78
82
|
};
|
|
83
|
+
ChatBoxComponent.ctorParameters = function () { return [
|
|
84
|
+
{ type: Renderer2 }
|
|
85
|
+
]; };
|
|
79
86
|
__decorate([
|
|
80
87
|
Input()
|
|
81
88
|
], ChatBoxComponent.prototype, "settings", void 0);
|
|
@@ -95,16 +102,16 @@ var ChatBoxComponent = /** @class */ (function () {
|
|
|
95
102
|
ViewChild('MessagesContainer', { static: true })
|
|
96
103
|
], ChatBoxComponent.prototype, "messagesContainer", void 0);
|
|
97
104
|
__decorate([
|
|
98
|
-
ViewChild('
|
|
99
|
-
], ChatBoxComponent.prototype, "
|
|
105
|
+
ViewChild('autofocus', { static: false })
|
|
106
|
+
], ChatBoxComponent.prototype, "autofocus", void 0);
|
|
100
107
|
ChatBoxComponent = __decorate([
|
|
101
108
|
Component({
|
|
102
109
|
selector: 'app-chat-box',
|
|
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",
|
|
110
|
+
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",
|
|
104
111
|
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}}"]
|
|
105
112
|
})
|
|
106
113
|
], ChatBoxComponent);
|
|
107
114
|
return ChatBoxComponent;
|
|
108
115
|
}());
|
|
109
116
|
export { ChatBoxComponent };
|
|
110
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
117
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1ib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFtYy10ZWNobm9sb2d5L3VpLWxpYnJhcnkvIiwic291cmNlcyI6WyJwcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2NoYXQtYm94L2NoYXQtYm94LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLGFBQWEsRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2xKLE9BQU8sRUFBZ0IsZ0JBQWdCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQVEzRTtJQStCRSwwQkFBb0IsUUFBa0I7UUFBbEIsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQTdCN0IsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUdsQixjQUFTLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFFdkIsbUJBQWMsR0FBRyxLQUFLLENBQUM7UUFDYixrQkFBYSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFFNUMsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFDbEQsbUJBQWMsR0FBRyxFQUFFLENBQUM7UUFLcEIsb0JBQWUsR0FBbUMsRUFBRSxDQUFDO1FBQ3JELFdBQU0sR0FBRztZQUNQLFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztTQUNWLENBQUM7UUFDRixnQkFBVyxHQUFHLENBQUMsQ0FBQztRQUNoQixlQUFVLEdBQUcsU0FBUyxDQUFDO0lBRW1CLENBQUM7SUFDM0MsMENBQWUsR0FBZjtRQUNFLElBQUksQ0FBQyxRQUFRLENBQUMsaUJBQWlCLENBQUMsWUFBWSxDQUFDLENBQUMsS0FBSyxFQUFFLENB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eEI7UUFBUixLQUFLLEVBQUU7c0RBQWtCO0lBRWpCO1FBQVIsS0FBSyxFQUFFO3NEQUEwQjtJQUl4QjtRQUFULE1BQU0sRUFBRTsyREFBNkM7SUFFNUM7UUFBVCxNQUFNLEVBQUU7d0RBQXlDO0lBR0E7UUFBakQsU0FBUyxDQUFDLG1CQUFtQixFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxDQUFDOytEQUErQjtJQUNyQztRQUExQyxTQUFTLENBQUMsV0FBVyxFQUFFLEVBQUUsTUFBTSxFQUFFLEtBQUssRUFBRSxDQUFDO3VEQUF1QjtJQWR0RCxnQkFBZ0I7UUFMNUIsU0FBUyxDQUFDO1lBQ1QsUUFBUSxFQUFFLGNBQWM7WUFDeEIsa3VDQUF3Qzs7U0FFekMsQ0FBQztPQUNXLGdCQUFnQixDQTRGNUI7SUFBRCx1QkFBQztDQUFBLEFBNUZELElBNEZDO1NBNUZZLGdCQUFnQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBWaWV3Q2hpbGQsIEVsZW1lbnRSZWYsIEFmdGVyVmlld0NoZWNrZWQsIEFmdGVyVmlld0luaXQsIE9uSW5pdCwgUmVuZGVyZXIyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IElDaGF0TWVzc2FnZSwgSUNoYXRNZXNzYWdlVHlwZSB9IGZyb20gJy4uLy4uL21vZGVscy9jaGF0Lm1lc3NhZ2UnO1xyXG5pbXBvcnQgeyBJQ2hhdFNldHRpbmdzIH0gZnJvbSAnLi4vLi4vbW9kZWxzL2NoYXQuc2V0dGluZ3MnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdhcHAtY2hhdC1ib3gnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGF0LWJveC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vY2hhdC1ib3guY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIENoYXRCb3hDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdDaGVja2VkLCBBZnRlclZpZXdJbml0IHtcclxuICBASW5wdXQoKSBzZXR0aW5nczogSUNoYXRTZXR0aW5ncztcclxuICBASW5wdXQoKSBpc1R5cGluZyA9IGZhbHNlO1xyXG5cclxuICBASW5wdXQoKSBtZXNzYWdlczogSUNoYXRNZXNzYWdlW107XHJcbiAgcHJpdmF0ZSBsYXN0Q291bnQgPSAtMTtcclxuXHJcbiAgX2lzQWdlbnRUeXBpbmcgPSBmYWxzZTtcclxuICBAT3V0cHV0KCkgaXNBZ2VudFR5cGluZyA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcclxuXHJcbiAgQE91dHB1dCgpIG5ld01lc3NhZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcclxuICBuZXdNZXNzYWdlVGV4dCA9ICcnO1xyXG5cclxuICBAVmlld0NoaWxkKCdNZXNzYWdlc0NvbnRhaW5lcicsIHsgc3RhdGljOiB0cnVlIH0pIG1lc3NhZ2VzQ29udGFpbmVyOiBFbGVtZW50UmVmO1xyXG4gIEBWaWV3Q2hpbGQoJ2F1dG9mb2N1cycsIHsgc3RhdGljOiBmYWxzZSB9KSBhdXRvZm9jdXM6IEVsZW1lbnRSZWY7XHJcblxyXG4gIHVzZXJuYW1lVG9Db2xvcjogeyBbdXNlcm5hbWU6IHN0cmluZ106IHN0cmluZyB9ID0ge307XHJcbiAgY29sb3JzID0gW1xyXG4gICAgJyNjMmM0YzQnLFxyXG4gICAgJyNmZmFiOTEnLFxyXG4gICAgJyNmNDhmYjEnLFxyXG4gICAgJyMyOWI2ZjYnLFxyXG4gICAgJyNlMWJlZTcnLFxyXG4gICAgJyM5Y2NjNjUnLFxyXG4gICAgJyNmZmMxMDcnLFxyXG4gICAgJyMyNmM2ZGEnLFxyXG4gICAgJyNjZGRjMzknLFxyXG4gIF07XHJcbiAgY29sb3JzSW5kZXggPSAwO1xyXG4gIGFnZW50Q29sb3IgPSAnIzJkYjBlMCc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcmVuZGVyZXI6UmVuZGVyZXIyKSB7IH1cclxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNlbGVjdFJvb3RFbGVtZW50KCcjYXV0b2ZvY3VzJykuZm9jdXMoKTtcclxuICB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3Q2hlY2tlZCgpIHtcclxuICAgIGlmICh0aGlzLmxhc3RDb3VudCAhPT0gdGhpcy5tZXNzYWdlcy5sZW5ndGgpIHtcclxuICAgICAgdGhpcy5sYXN0Q291bnQgPSB0aGlzLm1lc3NhZ2VzLmxlbmd0aDtcclxuICAgICAgdGhpcy5zY3JvbGxUb0JvdHRvbSgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgZ2V0Q29sb3IobWVzc2FnZTogSUNoYXRNZXNzYWdlKSB7XHJcbiAgICBpZiAobWVzc2FnZS50eXBlICYmIG1lc3NhZ2UudHlwZSA9PT0gSUNoYXRNZXNzYWdlVHlwZS5BR0VOVCkge1xyXG4gICAgICByZXR1cm4gdGhpcy5hZ2VudENvbG9yO1xyXG4gICAgfSBlbHNlIGlmIChtZXNzYWdlLnVzZXJuYW1lKSB7XHJcbiAgICAgIGlmICghdGhpcy51c2VybmFtZVRvQ29sb3JbbWVzc2FnZS51c2VybmFtZV0pIHtcclxuICAgICAgICB0aGlzLnVzZXJuYW1lVG9Db2xvclttZXNzYWdlLnVzZXJuYW1lXSA9IHRoaXMuY29sb3JzW3RoaXMuY29sb3JzSW5kZXhdO1xyXG4gICAgICAgIHRoaXMuY29sb3JzSW5kZXggPSAodGhpcy5jb2xvcnNJbmRleCArIDEpICUgdGhpcy5jb2xvcnMubGVuZ3RoO1xyXG4gICAgICB9XHJcbiAgICAgIHJldHVybiB0aGlzLnVzZXJuYW1lVG9Db2xvclttZXNzYWdlLnVzZXJuYW1lXTtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIHJldHVybiB0aGlzLmNvbG9yc1swXTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHNob3VsZEFsaWduUmlnaHQobWVzc2FnZTogSUNoYXRNZXNzYWdlKSB7XHJcbiAgICByZXR1cm4gbWVzc2FnZS50eXBlICYmIG1lc3NhZ2UudHlwZSA9PT0gSUNoYXRNZXNzYWdlVHlwZS5BR0VOVDtcclxuICB9XHJcblxyXG4gIHNlbmROZXdNZXNzYWdlKGV2ZW50KSB7XHJcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gICAgaWYgKHRoaXMubmV3TWVzc2FnZVRleHQpIHtcclxuICAgICAgdGhpcy5uZXdNZXNzYWdlLmVtaXQodGhpcy5uZXdNZXNzYWdlVGV4dCk7XHJcbiAgICAgIHRoaXMubmV3TWVzc2FnZVRleHQgPSAnJztcclxuICAgIH1cclxuICAgIHRoaXMucmVuZGVyZXIuc2VsZWN0Um9vdEVsZW1lbnQoJyNhdXRvZm9jdXMnKS5mb2N1cygpO1xyXG4gIH1cclxuXHJcbiAgb25OZXdNZXNzYWdlRm9jdXMoZXZlbnQ6IGJvb2xlYW4pIHtcclxuICAgIGNvbnN0IGlzVHlwaW5nID0gZXZlbnQgJiYgdGhpcy5uZXdNZXNzYWdlVGV4dC5sZW5ndGggPiAwO1xyXG4gICAgaWYgKGlzVHlwaW5nICE9PSB0aGlzLl9pc0FnZW50VHlwaW5nKSB7XHJcbiAgICAgIHRoaXMuX2lzQWdlbnRUeXBpbmcgPSBpc1R5cGluZztcclxuICAgICAgdGhpcy5pc0FnZW50VHlwaW5nLmVtaXQoaXNUeXBpbmcpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgb25LZXl1cCgpIHtcclxuICAgIGNvbnN0IGlzVHlwaW5nID0gdGhpcy5uZXdNZXNzYWdlVGV4dC5sZW5ndGggPiAwO1xyXG4gICAgaWYgKGlzVHlwaW5nICE9PSB0aGlzLl9pc0FnZW50VHlwaW5nKSB7XHJcbiAgICAgIHRoaXMuX2lzQWdlbnRUeXBpbmcgPSBpc1R5cGluZztcclxuICAgICAgdGhpcy5pc0FnZW50VHlwaW5nLmVtaXQoaXNUeXBpbmcpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgc2Nyb2xsVG9Cb3R0b20oKSB7XHJcbiAgICB0cnkge1xyXG4gICAgICB0aGlzLm1lc3NhZ2VzQ29udGFpbmVyLm5hdGl2ZUVsZW1lbnQuc2Nyb2xsVG9wID0gdGhpcy5tZXNzYWdlc0NvbnRhaW5lci5uYXRpdmVFbGVtZW50LnNjcm9sbEhlaWdodDtcclxuICAgIH1cclxuICAgIGNhdGNoIChlKSB7IH1cclxuICB9XHJcbn1cclxuIl19
|
|
@@ -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
|
|
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}"]
|
|
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 <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",
|
|
79
|
+
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}"]
|
|
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW50ZXJhY3Rpb24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGFtYy10ZWNobm9sb2d5L3VpLWxpYnJhcnkvIiwic291cmNlcyI6WyJwcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2ludGVyYWN0aW9uL2ludGVyYWN0aW9uLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUcvRTs7R0FFRztBQU1IO0lBa0JFOztPQUVHO0lBQ0g7UUFsQlUscUJBQWdCLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7UUFDN0Qsa0JBQWEsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBQzVDLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBaUJoRCxJQUFJLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQztJQUMxQixDQUFDO0lBYkQsc0JBQUksNENBQVU7YUFJZDtZQUNFLE9BQU8sSUFBSSxDQUFDLFNBQVMsQ0FBQztRQUN4QixDQUFDO2FBTkQsVUFBZSxLQUFLO1lBQ2xCLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDcEMsQ0FBQzs7O09BQUE7SUFZRDs7T0FFRztJQUNILHVDQUFRLEdBQVI7SUFDQSxDQUFDO0lBRUQ7O09BRUc7SUFDSCx1Q0FBUSxHQUFSO1FBQ0UsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUM7SUFDekIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsdUNBQVEsR0FBUjtRQUNFLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO0lBQzFCLENBQUM7SUFFRDs7T0FFRztJQUNILCtDQUFnQixHQUFoQjtRQUNFLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLElBQUksSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtZQUNuRSxPQUFPLElBQUksQ0FBQztTQUNiO1FBQ0QsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDO0lBRUQsK0NBQWdCLEdBQWhCLFVBQWlCLEtBQW9CO1FBQ25DLElBQUksS0FBSyxDQUFDLElBQUksS0FBSyxPQUFPLEVBQUU7WUFDMUIsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1NBQ2pCO0lBQ0gsQ0FBQztJQUVELDZDQUFjLEdBQWQsVUFBZSxLQUFvQjtRQUNqQyxJQUFJLEtBQUssQ0FBQyxJQUFJLEtBQUssT0FBTyxFQUFFO1lBQzFCLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztTQUNqQjtJQUNILENBQUM7SUEvRFE7UUFBUixLQUFLLEVBQUU7NkRBQTJCO0lBQ3pCO1FBQVQsTUFBTSxFQUFFO2tFQUE4RDtJQUM3RDtRQUFULE1BQU0sRUFBRTsrREFBNkM7SUFDNUM7UUFBVCxNQUFNLEVBQUU7NERBQXlDO0lBTHZDLG9CQUFvQjtRQUxoQyxTQUFTLENBQUM7WUFDVCxRQUFRLEVBQUUsaUJBQWlCO1lBQzNCLHUvTEFBMkM7O1NBRTVDLENBQUM7T0FDVyxvQkFBb0IsQ0FtRWhDO0lBQUQsMkJBQUM7Q0FBQSxBQW5FRCxJQW1FQztTQW5FWSxvQkFBb0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IElJbnRlcmFjdGlvbiB9IGZyb20gJy4uLy4uL21vZGVscy91aWxpYnJhcnkubW9kZWwnO1xyXG5cclxuLyoqXHJcbiAqIEBpZ25vcmVcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnYW1jLWludGVyYWN0aW9uJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vaW50ZXJhY3Rpb24uY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2ludGVyYWN0aW9uLmNvbXBvbmVudC5zY3NzJywgJy4vLi4vdWlsaWJyYXJ5Lm1vZHVsZS5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIEludGVyYWN0aW9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KCkgaW50ZXJhY3Rpb246IElJbnRlcmFjdGlvbjtcclxuICBAT3V0cHV0KCkgbWluaW1pemVkQ2hhbmdlZDogRXZlbnRFbWl0dGVyPGJvb2xlYW4+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xyXG4gIEBPdXRwdXQoKSBpc0FnZW50VHlwaW5nID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xyXG4gIEBPdXRwdXQoKSBuZXdNZXNzYWdlID0gbmV3IEV2ZW50RW1pdHRlcjxzdHJpbmc+KCk7XHJcbiAgLyoqXHJcbiAgICogQGlnbm9yZVxyXG4gICAqL1xyXG4gIG1pbmltaXplZDogYm9vbGVhbjtcclxuICBzZXQgX21pbmltaXplZCh2YWx1ZSkge1xyXG4gICAgdGhpcy5taW5pbWl6ZWQgPSB2YWx1ZTtcclxuICAgIHRoaXMubWluaW1pemVkQ2hhbmdlZC5lbWl0KHZhbHVlKTtcclxuICB9XHJcbiAgZ2V0IF9taW5pbWl6ZWQoKSB7XHJcbiAgICByZXR1cm4gdGhpcy5taW5pbWl6ZWQ7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBAaWdub3JlXHJcbiAgICovXHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgICB0aGlzLl9taW5pbWl6ZWQgPSBmYWxzZTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEBpZ25vcmVcclxuICAgKi9cclxuICBuZ09uSW5pdCgpIHtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEBpZ25vcmVcclxuICAgKi9cclxuICBtaW5pbWl6ZSgpOiB2b2lkIHtcclxuICAgIHRoaXMuX21pbmltaXplZCA9IHRydWU7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBAaWdub3JlXHJcbiAgICovXHJcbiAgbWF4aW1pemUoKTogdm9pZCB7XHJcbiAgICB0aGlzLl9taW5pbWl6ZWQgPSBmYWxzZTtcclxuICB9XHJcblxyXG4gIC8qKlxyXG4gICAqIEBpZ25vcmVcclxuICAgKi9cclxuICBpc0NvbmZlcmVuY2VDYWxsKCk6IGJvb2xlYW4ge1xyXG4gICAgaWYgKHRoaXMuaW50ZXJhY3Rpb24ucGFydGllcyAmJiB0aGlzLmludGVyYWN0aW9uLnBhcnRpZXMubGVuZ3RoID4gMSkge1xyXG4gICAgICByZXR1cm4gdHJ1ZTtcclxuICAgIH1cclxuICAgIHJldHVybiBmYWxzZTtcclxuICB9XHJcblxyXG4gIGNvbGxhcHNlS2V5cHJlc3MoZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcclxuICAgIGlmIChldmVudC5jb2RlID09PSAnRW50ZXInKSB7XHJcbiAgICAgIHRoaXMubWluaW1pemUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIGV4cGFuZEtleXByZXNzKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XHJcbiAgICBpZiAoZXZlbnQuY29kZSA9PT0gJ0VudGVyJykge1xyXG4gICAgICB0aGlzLm1heGltaXplKCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
|
-
import { EventEmitter, Input, Output, Component, ViewChild, Injector, NgModule } from '@angular/core';
|
|
2
|
+
import { EventEmitter, Input, Output, Component, Renderer2, ViewChild, Injector, NgModule } from '@angular/core';
|
|
3
3
|
import { CommonModule } from '@angular/common';
|
|
4
4
|
import { FormsModule } from '@angular/forms';
|
|
5
5
|
import { createCustomElement } from '@angular/elements';
|
|
@@ -78,8 +78,8 @@ __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
|
|
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}"]
|
|
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 <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",
|
|
82
|
+
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}"]
|
|
83
83
|
})
|
|
84
84
|
], InteractionComponent);
|
|
85
85
|
|
|
@@ -449,7 +449,8 @@ DurationComponent = __decorate([
|
|
|
449
449
|
], DurationComponent);
|
|
450
450
|
|
|
451
451
|
let ChatBoxComponent = class ChatBoxComponent {
|
|
452
|
-
constructor() {
|
|
452
|
+
constructor(renderer) {
|
|
453
|
+
this.renderer = renderer;
|
|
453
454
|
this.isTyping = false;
|
|
454
455
|
this.lastCount = -1;
|
|
455
456
|
this._isAgentTyping = false;
|
|
@@ -471,6 +472,9 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
471
472
|
this.colorsIndex = 0;
|
|
472
473
|
this.agentColor = '#2db0e0';
|
|
473
474
|
}
|
|
475
|
+
ngAfterViewInit() {
|
|
476
|
+
this.renderer.selectRootElement('#autofocus').focus();
|
|
477
|
+
}
|
|
474
478
|
ngAfterViewChecked() {
|
|
475
479
|
if (this.lastCount !== this.messages.length) {
|
|
476
480
|
this.lastCount = this.messages.length;
|
|
@@ -501,7 +505,7 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
501
505
|
this.newMessage.emit(this.newMessageText);
|
|
502
506
|
this.newMessageText = '';
|
|
503
507
|
}
|
|
504
|
-
this.
|
|
508
|
+
this.renderer.selectRootElement('#autofocus').focus();
|
|
505
509
|
}
|
|
506
510
|
onNewMessageFocus(event) {
|
|
507
511
|
const isTyping = event && this.newMessageText.length > 0;
|
|
@@ -524,6 +528,9 @@ let ChatBoxComponent = class ChatBoxComponent {
|
|
|
524
528
|
catch (e) { }
|
|
525
529
|
}
|
|
526
530
|
};
|
|
531
|
+
ChatBoxComponent.ctorParameters = () => [
|
|
532
|
+
{ type: Renderer2 }
|
|
533
|
+
];
|
|
527
534
|
__decorate([
|
|
528
535
|
Input()
|
|
529
536
|
], ChatBoxComponent.prototype, "settings", void 0);
|
|
@@ -543,12 +550,12 @@ __decorate([
|
|
|
543
550
|
ViewChild('MessagesContainer', { static: true })
|
|
544
551
|
], ChatBoxComponent.prototype, "messagesContainer", void 0);
|
|
545
552
|
__decorate([
|
|
546
|
-
ViewChild('
|
|
547
|
-
], ChatBoxComponent.prototype, "
|
|
553
|
+
ViewChild('autofocus', { static: false })
|
|
554
|
+
], ChatBoxComponent.prototype, "autofocus", void 0);
|
|
548
555
|
ChatBoxComponent = __decorate([
|
|
549
556
|
Component({
|
|
550
557
|
selector: 'app-chat-box',
|
|
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",
|
|
558
|
+
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",
|
|
552
559
|
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}}"]
|
|
553
560
|
})
|
|
554
561
|
], ChatBoxComponent);
|