@amc-technology/ui-library 1.0.31 → 1.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/amc-technology-ui-library.metadata.json +1 -1
  2. package/bundles/amc-technology-ui-library.umd.js +1078 -747
  3. package/bundles/amc-technology-ui-library.umd.js.map +1 -56
  4. package/bundles/amc-technology-ui-library.umd.min.js +16 -2
  5. package/bundles/amc-technology-ui-library.umd.min.js.map +1 -274
  6. package/esm2015/amc-technology-ui-library.js +16 -1417
  7. package/esm2015/projects/UILibrary/src/app/Helpers.js +11 -0
  8. package/esm2015/projects/UILibrary/src/app/components/activity/activity.component.js +83 -0
  9. package/esm2015/projects/UILibrary/src/app/components/chat-box/chat-box.component.js +104 -0
  10. package/esm2015/projects/UILibrary/src/app/components/chat-message/chat-message.component.js +39 -0
  11. package/esm2015/projects/UILibrary/src/app/components/disposition/disposition.component.js +49 -0
  12. package/esm2015/projects/UILibrary/src/app/components/duration/duration.component.js +58 -0
  13. package/esm2015/projects/UILibrary/src/app/components/holdtimer/holdtimer.component.js +72 -0
  14. package/esm2015/projects/UILibrary/src/app/components/interaction/interaction.component.js +80 -0
  15. package/esm2015/projects/UILibrary/src/app/components/login/login.component.js +45 -0
  16. package/esm2015/projects/UILibrary/src/app/components/operation/operation.component.js +57 -0
  17. package/esm2015/projects/UILibrary/src/app/components/property/property.component.js +99 -0
  18. package/esm2015/projects/UILibrary/src/app/components/scenario/scenario.component.js +40 -0
  19. package/esm2015/projects/UILibrary/src/app/models/chat.message.js +7 -0
  20. package/esm2015/projects/UILibrary/src/app/models/chat.settings.js +1 -0
  21. package/esm2015/projects/UILibrary/src/app/models/disposition.interface.js +1 -0
  22. package/esm2015/projects/UILibrary/src/app/models/login.interface.js +1 -0
  23. package/esm2015/projects/UILibrary/src/app/models/uilibrary.model.js +40 -0
  24. package/esm2015/projects/UILibrary/src/app/uilibrary.module.js +73 -0
  25. package/esm2015/public_api.js +2 -0
  26. package/esm5/amc-technology-ui-library.js +16 -714
  27. package/esm5/projects/UILibrary/src/app/Helpers.js +11 -0
  28. package/esm5/projects/UILibrary/src/app/components/activity/activity.component.js +84 -0
  29. package/esm5/projects/UILibrary/src/app/components/chat-box/chat-box.component.js +105 -0
  30. package/esm5/projects/UILibrary/src/app/components/chat-message/chat-message.component.js +40 -0
  31. package/esm5/projects/UILibrary/src/app/components/disposition/disposition.component.js +61 -0
  32. package/esm5/projects/UILibrary/src/app/components/duration/duration.component.js +60 -0
  33. package/esm5/projects/UILibrary/src/app/components/holdtimer/holdtimer.component.js +74 -0
  34. package/esm5/projects/UILibrary/src/app/components/interaction/interaction.component.js +85 -0
  35. package/esm5/projects/UILibrary/src/app/components/login/login.component.js +68 -0
  36. package/esm5/projects/UILibrary/src/app/components/operation/operation.component.js +58 -0
  37. package/esm5/projects/UILibrary/src/app/components/property/property.component.js +101 -0
  38. package/esm5/projects/UILibrary/src/app/components/scenario/scenario.component.js +41 -0
  39. package/esm5/projects/UILibrary/src/app/models/chat.message.js +7 -0
  40. package/esm5/projects/UILibrary/src/app/models/chat.settings.js +1 -0
  41. package/esm5/projects/UILibrary/src/app/models/disposition.interface.js +1 -0
  42. package/esm5/projects/UILibrary/src/app/models/login.interface.js +1 -0
  43. package/esm5/projects/UILibrary/src/app/models/uilibrary.model.js +43 -0
  44. package/esm5/projects/UILibrary/src/app/uilibrary.module.js +74 -0
  45. package/esm5/public_api.js +2 -0
  46. package/fesm2015/amc-technology-ui-library.js +813 -0
  47. package/fesm2015/amc-technology-ui-library.js.map +1 -0
  48. package/fesm5/amc-technology-ui-library.js +867 -0
  49. package/fesm5/amc-technology-ui-library.js.map +1 -0
  50. package/package.json +14 -67
  51. package/projects/UILibrary/src/app/components/activity/activity.component.d.ts +10 -10
  52. package/projects/UILibrary/src/app/components/interaction/interaction.component.d.ts +2 -1
  53. package/projects/UILibrary/src/app/components/scenario/scenario.component.d.ts +2 -2
  54. package/webcomponents/webcomponents.js +3 -3
  55. package/esm2015/amc-technology-ui-library.js.map +0 -40
  56. package/esm5/amc-technology-ui-library.js.map +0 -42
@@ -1,1417 +1,16 @@
1
- import { Component, Input, Output, EventEmitter, ViewChild, NgModule, Injector } from '@angular/core';
2
- import { CommonModule } from '@angular/common';
3
- import { FormsModule } from '@angular/forms';
4
- import { createCustomElement } from '@angular/elements';
5
- import { BrowserModule } from '@angular/platform-browser';
6
- import { ElementZoneStrategyFactory } from 'elements-zone-strategy';
7
-
8
- /**
9
- * @fileoverview added by tsickle
10
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
11
- */
12
- /**
13
- * @ignore
14
- */
15
- class InteractionComponent {
16
- /**
17
- * @ignore
18
- */
19
- constructor() {
20
- this.minimizedChanged = new EventEmitter();
21
- this.isAgentTyping = new EventEmitter();
22
- this.newMessage = new EventEmitter();
23
- this._minimized = false;
24
- }
25
- /**
26
- * @param {?} value
27
- * @return {?}
28
- */
29
- set _minimized(value) {
30
- this.minimized = value;
31
- this.minimizedChanged.emit(value);
32
- }
33
- /**
34
- * @return {?}
35
- */
36
- get _minimized() {
37
- return this.minimized;
38
- }
39
- /**
40
- * @ignore
41
- * @return {?}
42
- */
43
- ngOnInit() {
44
- }
45
- /**
46
- * @ignore
47
- * @return {?}
48
- */
49
- minimize() {
50
- this._minimized = true;
51
- }
52
- /**
53
- * @ignore
54
- * @return {?}
55
- */
56
- maximize() {
57
- this._minimized = false;
58
- }
59
- /**
60
- * @ignore
61
- * @return {?}
62
- */
63
- isConferenceCall() {
64
- if (this.interaction.parties && this.interaction.parties.length > 1) {
65
- return true;
66
- }
67
- return false;
68
- }
69
- /**
70
- * @param {?} event
71
- * @return {?}
72
- */
73
- collapseKeypress(event) {
74
- if (event.code === 'Enter') {
75
- this.minimize();
76
- }
77
- }
78
- /**
79
- * @param {?} event
80
- * @return {?}
81
- */
82
- expandKeypress(event) {
83
- if (event.code === 'Enter') {
84
- this.maximize();
85
- }
86
- }
87
- }
88
- InteractionComponent.decorators = [
89
- { type: Component, args: [{
90
- selector: 'amc-interaction',
91
- template: `<div class="AnswerCallFocused">
92
- <div class="editor callHeaderTop">
93
- <img class="statusImage" aria-hidden="true" [src]="interaction.UIHeadersData.statusUrl" (click)="interaction.UIHeadersData.focusHandler.handler(interaction.UIHeadersData.focusHandler.operationName, interaction.UIHeadersData.focusHandler.operationMetadata)" />
94
- <label class="statusText">
95
- <b [id]="interaction.UIHeadersData.statusText">{{ interaction.UIHeadersData.statusText }}</b>
96
- </label>
97
- <label class="verticalDivider">|</label>
98
- <label class="directionText" *ngIf="!interaction.UIHeadersData.displayHoldCounter">{{ interaction.UIHeadersData.directionText }}</label>
99
- <div class="holdCallDurationDiv" *ngIf="interaction.UIHeadersData.displayHoldCounter">
100
- <amc-holdtimer [holdCounterData]="interaction.UIHeadersData.holdCounterData" [statusText]="interaction.UIHeadersData.statusText" [callId]="interaction.subheaderData.value"></amc-holdtimer>
101
- </div>
102
- <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">
103
- <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">
104
- <div class="DurationDiv" *ngIf="interaction.displayCallTimer">
105
- <amc-duration [statusText]="interaction.UIHeadersData.statusText" [callId]="interaction.subheaderData.value" [startTime]="interaction.startTime"></amc-duration>
106
- </div>
107
- </div>
108
-
109
- <div *ngIf="!_minimized">
110
-
111
- <div *ngIf="!isConferenceCall()">
112
- <div class="editor phoneNumberContainer">
113
- <input class="callImage" type="image" [src]="interaction.subheaderData.image.href" [title]="interaction.subheaderData.tooltip || ''" tabindex="-1">
114
- <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">
115
- </div>
116
-
117
- <div class="cadSection">
118
- <ng-container *ngFor="let property of interaction.properties">
119
- <ng-container *ngIf="property.visible">
120
- <label class="col1" [title]="property.displayKey">{{property.displayKey}}</label>
121
- <amc-property [callType]="interaction.UIHeadersData.directionText" [statusText]="interaction.UIHeadersData.statusText" [callId]="interaction.subheaderData.value" class="col2" [property]="property"> </amc-property>
122
- </ng-container>
123
- </ng-container>
124
-
125
- <ng-container *ngFor="let property of interaction.associatedData">
126
- <ng-container *ngIf="property.visible">
127
- <div class="editor displayDiv">
128
- <label class="displayLabels" [title]="property.displayKey">{{property.displayKey}}</label>
129
- <amc-property [callType]="interaction.UIHeadersData.directionText" [statusText]="interaction.UIHeadersData.statusText" [callId]="interaction.subheaderData.value" class="col2" [property]="property"> </amc-property>
130
- </div>
131
- </ng-container>
132
- </ng-container>
133
- </div>
134
-
135
- <app-chat-box *ngIf="interaction.chat" [isTyping]="interaction.chat.isCustomerTyping" [settings]="interaction.chat.settings"
136
- [messages]="interaction.chat.messages" (isAgentTyping)="isAgentTyping.emit($event)" (newMessage)="newMessage.emit($event)"></app-chat-box>
137
-
138
- <div [id]='interaction.interactionId'> </div>
139
- <amc-operation [callType]="interaction.UIHeadersData.directionText" [statusText]="interaction.UIHeadersData.statusText" [callId]="interaction.subheaderData.value" [operations]="interaction.operations"></amc-operation>
140
- </div>
141
-
142
- <div *ngIf="isConferenceCall()">
143
- <div *ngFor="let party of interaction.parties">
144
- <div class="editor phoneNumberContainer">
145
- <input class="callImage" type="image" [src]="party.header.image.href" [title]="party.header.tooltip || ''" tabindex="-1">
146
- <input class="editor phoneNumberValue" readonly type="text" [value]="party.header.value" tabindex="-1">
147
- </div>
148
-
149
- <div class="grid-container">
150
- <ng-container *ngFor="let property of party.properties">
151
- <ng-container *ngIf="property.visible">
152
- <label class="col1" [title]="property.displayKey">{{ property.displayKey }}</label>
153
- <amc-property [callType]="interaction.UIHeadersData.directionText" [statusText]="interaction.UIHeadersData.statusText" [callId]="party.header.value" class="col2" [property]="property"> </amc-property>
154
- </ng-container>
155
- </ng-container>
156
- </div>
157
- <amc-operation [callType]="interaction.UIHeadersData.directionText" [statusText]="interaction.UIHeadersData.statusText" [callId]="party.header.value" [operations]="party.operations"></amc-operation>
158
- <div class="AnswerCallFocused"></div>
159
- </div>
160
- <amc-operation [callType]="interaction.UIHeadersData.directionText" [statusText]="interaction.UIHeadersData.statusText" [callId]="interaction.subheaderData.value" [operations]="interaction.operations"></amc-operation>
161
- </div>
162
-
163
- </div>
164
- </div>
165
- `,
166
- styles: [`:host{display:block}.phoneNumberContainer{margin-left:5px!important;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;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%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.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}`]
167
- },] },
168
- ];
169
- /** @nocollapse */
170
- InteractionComponent.ctorParameters = () => [];
171
- InteractionComponent.propDecorators = {
172
- interaction: [{ type: Input }],
173
- minimizedChanged: [{ type: Output }],
174
- isAgentTyping: [{ type: Output }],
175
- newMessage: [{ type: Output }]
176
- };
177
-
178
- /**
179
- * @fileoverview added by tsickle
180
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
181
- */
182
- class ScenarioComponent {
183
- constructor() {
184
- this.minimizedChanged = new EventEmitter();
185
- this.isAgentTyping = new EventEmitter();
186
- this.newMessage = new EventEmitter();
187
- this.afterViewChecked = new EventEmitter();
188
- }
189
- /**
190
- * @return {?}
191
- */
192
- ngAfterViewChecked() {
193
- this.afterViewChecked.emit();
194
- }
195
- /**
196
- * @return {?}
197
- */
198
- onMinimizedChanged() {
199
- this.minimizedChanged.emit();
200
- }
201
- }
202
- ScenarioComponent.decorators = [
203
- { type: Component, args: [{
204
- selector: 'amc-scenario',
205
- template: `<ng-container *ngIf="scenario && scenario.interactions">
206
- <amc-interaction *ngFor="let interaction of scenario.interactions" [interaction]="interaction"
207
- (minimizedChanged)="onMinimizedChanged()" (isAgentTyping)="isAgentTyping.emit($event)"
208
- (newMessage)="newMessage.emit($event)">
209
- </amc-interaction>
210
- </ng-container>
211
- `,
212
- styles: [``, `body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.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}`]
213
- },] },
214
- ];
215
- /** @nocollapse */
216
- ScenarioComponent.ctorParameters = () => [];
217
- ScenarioComponent.propDecorators = {
218
- scenario: [{ type: Input }],
219
- minimizedChanged: [{ type: Output }],
220
- isAgentTyping: [{ type: Output }],
221
- newMessage: [{ type: Output }],
222
- afterViewChecked: [{ type: Output }]
223
- };
224
-
225
- /**
226
- * @fileoverview added by tsickle
227
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
228
- */
229
- /**
230
- * @ignore
231
- */
232
- class OperationComponent {
233
- /**
234
- * @ignore
235
- */
236
- constructor() {
237
- this.labelledByText = '';
238
- this.describedByText = '';
239
- }
240
- /**
241
- * @ignore
242
- * @return {?}
243
- */
244
- ngOnInit() {
245
- if (this.statusText && this.callType) {
246
- this.describedByText = `${this.statusText} ${this.callType}`;
247
- }
248
- else if (this.statusText) {
249
- this.describedByText = this.statusText;
250
- }
251
- else if (this.callType) {
252
- this.describedByText = this.callType;
253
- }
254
- if (this.callId) {
255
- this.labelledByText = this.callId;
256
- }
257
- }
258
- /**
259
- * @param {?} event
260
- * @param {?} operation
261
- * @return {?}
262
- */
263
- operationKeypress(event, operation) {
264
- if (event.code === 'Enter') {
265
- operation.handler(operation.operationName, operation.operationMetadata);
266
- }
267
- }
268
- }
269
- OperationComponent.decorators = [
270
- { type: Component, args: [{
271
- selector: 'amc-operation',
272
- template: `<div class="callOptions">
273
- <img
274
- class="AnswerCallImages"
275
- tabindex="0"
276
- role="button"
277
- attr.aria-label="{{ operation.title }}"
278
- *ngFor="let operation of operations"
279
- [title]="operation.title"
280
- [src]="operation.icon"
281
- [attr.accesskey]="operation.accesskey || null"
282
- [attr.aria-labelledby]="labelledByText || null"
283
- [attr.aria-describedby]="describedByText || null"
284
- (click)="operation.handler(operation.operationName, operation.operationMetadata)"
285
- (keypress)="operationKeypress($event, operation)"/>
286
- </div>
287
- `,
288
- styles: [`.AnswerCallImages:focus{outline:#3296da solid 2px;outline-offset:1px}`, `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%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.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}`]
289
- },] },
290
- ];
291
- /** @nocollapse */
292
- OperationComponent.ctorParameters = () => [];
293
- OperationComponent.propDecorators = {
294
- statusText: [{ type: Input }],
295
- callId: [{ type: Input }],
296
- callType: [{ type: Input }],
297
- operations: [{ type: Input }]
298
- };
299
-
300
- /**
301
- * @fileoverview added by tsickle
302
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
303
- */
304
- /**
305
- * @record
306
- */
307
-
308
- /** @enum {string} */
309
- const IChatMessageType = {
310
- AGENT: 'AGENT',
311
- OTHER_PERSON: 'OTHER_PERSON',
312
- INFORMATION: 'INFORMATION',
313
- };
314
-
315
- /**
316
- * @fileoverview added by tsickle
317
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
318
- */
319
- /**
320
- * @record
321
- */
322
-
323
- /**
324
- * @fileoverview added by tsickle
325
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
326
- */
327
- /**
328
- * It is collection of Interaction which need to be displayed on scenario component.
329
- * @record
330
- */
331
-
332
- /**
333
- * @record
334
- */
335
-
336
- /**
337
- * @record
338
- */
339
-
340
- /**
341
- * @record
342
- */
343
-
344
- /**
345
- * This contains the main identifying information about the interaction.
346
- * @record
347
- */
348
-
349
- /**
350
- * It contains URLs for minimize, maximize, interaction specific icon urls for interaction.
351
- * And header number which needs to be displayed at top.
352
- * @record
353
- */
354
-
355
- /**
356
- * @record
357
- */
358
-
359
- /**
360
- * @record
361
- */
362
-
363
- /**
364
- * It contains Operation Icon URL and its hadlers which need to be displayed in Interaction.
365
- * @record
366
- */
367
-
368
- /**
369
- * It contains Operation Icon URL and its hadlers which need to be displayed in Interaction.
370
- * @record
371
- */
372
-
373
- /**
374
- * This contains properties and operations to be displayed for conference member.
375
- * @record
376
- */
377
-
378
- /**
379
- * key value pairs which can be used amongst other interfaces/classes to store metadata of those entities.
380
- * @record
381
- */
382
-
383
- /**
384
- * This interface contains key value pairs, some custom operation which generates display key and display value.
385
- * Also it includes custom operation handler for click event on properties.
386
- * @record
387
- */
388
-
389
- /**
390
- * A helper method to make instances of [IProperty]
391
- */
392
- class Property {
393
- /**
394
- *
395
- * @param {?} key
396
- * @param {?} value : if value type is COUNTER then value should be start time in MilliSeconds.
397
- * @param {?=} visible
398
- * @param {?=} valueType
399
- * @param {?=} customOperation
400
- */
401
- constructor(key, value, visible, valueType, customOperation) {
402
- /**
403
- * Operation responsible for generating displayKey and dispkayValur from key and value.
404
- */
405
- this.displayOperation = (/**
406
- * @return {?}
407
- */
408
- () => {
409
- this.displayKey = this.key;
410
- this.displayValue = this.value;
411
- });
412
- this.key = key;
413
- this.value = value;
414
- visible != null ? (this.visible = visible) : (this.visible = true);
415
- valueType != null
416
- ? (this.displayValueType = valueType)
417
- : (this.displayValueType = ValueType.STRING);
418
- this.customOperations = customOperation;
419
- this.displayOperation();
420
- }
421
- }
422
- /**
423
- * Interface which contains eventName and handler associated with it.
424
- * @record
425
- */
426
-
427
- /** @enum {number} */
428
- const ValueType = {
429
- STRING: 0,
430
- COUNTER: 1,
431
- };
432
- ValueType[ValueType.STRING] = 'STRING';
433
- ValueType[ValueType.COUNTER] = 'COUNTER';
434
-
435
- /**
436
- * @fileoverview added by tsickle
437
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
438
- */
439
- /**
440
- * @param {?} seconds_in
441
- * @return {?}
442
- */
443
- function secondsToHms(seconds_in) {
444
- seconds_in = Number(seconds_in);
445
- /** @type {?} */
446
- const h = Math.floor(seconds_in / 3600);
447
- /** @type {?} */
448
- const m = Math.floor(seconds_in % 3600 / 60);
449
- /** @type {?} */
450
- const s = Math.floor(seconds_in % 3600 % 60);
451
- /** @type {?} */
452
- const hDisplay = h > 0 ? h.toString() + ':' : '';
453
- /** @type {?} */
454
- const mDisplay = m > 0 ? ('0' + m.toString()).slice(-2) + ':' : '00:';
455
- /** @type {?} */
456
- const sDisplay = s > 0 ? ('0' + s.toString()).slice(-2) : '00';
457
- return hDisplay + mDisplay + sDisplay;
458
- }
459
-
460
- /**
461
- * @fileoverview added by tsickle
462
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
463
- */
464
- /**
465
- * @ignore
466
- */
467
- class PropertyComponent {
468
- /**
469
- * @ignore
470
- */
471
- constructor() {
472
- this.labelledByText = '';
473
- this.title = '';
474
- this._timerId = null;
475
- this.processedDisplayValue = '';
476
- }
477
- /**
478
- * @ignore
479
- * @return {?}
480
- */
481
- ngOnInit() {
482
- if (this.statusText && this.callType) {
483
- this.labelledByText = `${this.statusText} ${this.callType}`;
484
- }
485
- else if (this.statusText) {
486
- this.labelledByText = this.statusText;
487
- }
488
- else if (this.callType) {
489
- this.labelledByText = this.callType;
490
- }
491
- if (this.callType && this.callId) {
492
- this.title = `${this.callType} ${this.callId}`;
493
- }
494
- else if (this.callType) {
495
- this.title = this.callType;
496
- }
497
- else if (this.callId) {
498
- this.title = this.callId;
499
- }
500
- this.initValues();
501
- }
502
- /**
503
- * @ignore
504
- * @return {?}
505
- */
506
- initValues() {
507
- if (this.property.displayValueType === ValueType.COUNTER) {
508
- this.startCallCounter();
509
- }
510
- else {
511
- this.processedDisplayValue = this.property.displayValue;
512
- }
513
- }
514
- /**
515
- * @ignore
516
- * @private
517
- * @return {?}
518
- */
519
- startCallCounter() {
520
- if (this._timerId == null) {
521
- this._timerId = window.setInterval((/**
522
- * @return {?}
523
- */
524
- () => {
525
- /** @type {?} */
526
- const callStartTime = this.property.displayValue;
527
- /** @type {?} */
528
- const currentTime = new Date().getTime() / 1000;
529
- /** @type {?} */
530
- const secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
531
- this.processedDisplayValue = secondsToHms(secondsPassed);
532
- }), 1000);
533
- }
534
- }
535
- /**
536
- * @ignore
537
- * @return {?}
538
- */
539
- ngOnDestroy() {
540
- if (this.property.displayValueType === ValueType.COUNTER) {
541
- // clear the timer.
542
- if (this._timerId != null) {
543
- clearInterval(this._timerId);
544
- this._timerId = null;
545
- }
546
- }
547
- }
548
- }
549
- PropertyComponent.decorators = [
550
- { type: Component, args: [{
551
- selector: 'amc-property',
552
- template: `<input
553
- readonly
554
- *ngIf="!property.customOperations"
555
- class="displayData"
556
- tabindex="0"
557
- type="text"
558
- [name]="processedDisplayValue"
559
- [title]="title || null"
560
- [attr.aria-labelledby]="labelledByText || null"
561
- [value]="processedDisplayValue"/>
562
-
563
- <input
564
- readonly
565
- *ngIf="property.customOperations"
566
- class="cursor displayData"
567
- type="text"
568
- tabindex="0"
569
- [name]="processedDisplayValue"
570
- [title]="title || null"
571
- [value]="processedDisplayValue"
572
- [attr.aria-labelledby]="labelledByText || null"
573
- (click)="property.customOperations.handler(property.customOperations.eventName, property.customOperations.eventMetadata)" />
574
- `,
575
- styles: [`input{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}`, `body{padding-top:5px;padding-bottom:5px;margin:0}.login{width:20px;height:20px;display:block;margin-top:2px;margin-left:auto;margin-right:auto}.editor{font-size:.9em;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editor .standalone-line{width:90%!important;text-align:center!important}.editorHyperLink label{font-size:.95em;float:left;width:30%;margin-left:2%;text-align:left;color:#000;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:0;padding-top:0}.editorHyperLink input[type=text]{font-size:.95em;width:60%;text-align:left;margin:0 5% 0 0;color:#318fc5;cursor:pointer;font-family:Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;padding-top:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.AnswerCallImages{height:20px;margin:5px}.AnswerCallFocused{border:1px solid #939598;margin-left:0;font-family:Arial;position:relative;background-color:#fff;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.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}`]
576
- },] },
577
- ];
578
- /** @nocollapse */
579
- PropertyComponent.ctorParameters = () => [];
580
- PropertyComponent.propDecorators = {
581
- statusText: [{ type: Input }],
582
- callId: [{ type: Input }],
583
- callType: [{ type: Input }],
584
- property: [{ type: Input }]
585
- };
586
-
587
- /**
588
- * @fileoverview added by tsickle
589
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
590
- */
591
- class HoldtimerComponent {
592
- constructor() {
593
- this.labelledByText = '';
594
- this.displayTime = '00:00/00:00';
595
- }
596
- /**
597
- * @return {?}
598
- */
599
- ngOnInit() {
600
- if (this.statusText && this.callId) {
601
- this.labelledByText = `${this.statusText} ${this.callId}`;
602
- }
603
- else if (this.statusText) {
604
- this.labelledByText = this.statusText;
605
- }
606
- else if (this.callId) {
607
- this.labelledByText = this.callId;
608
- }
609
- this.startCallCounter();
610
- }
611
- /**
612
- * @ignore
613
- * @private
614
- * @return {?}
615
- */
616
- startCallCounter() {
617
- /** @type {?} */
618
- const pastTimeInSeconds = this.CaculatePastHoldDuration();
619
- if (this._timerId == null) {
620
- this._timerId = window.setInterval((/**
621
- * @return {?}
622
- */
623
- () => {
624
- /** @type {?} */
625
- const currentTime = new Date().getTime() / 1000;
626
- /** @type {?} */
627
- const secondsPassedCurrentCall = Math.floor((currentTime) - (this.holdCounterData.currentHoldStartTime / 1000));
628
- this.displayTime = secondsToHms(secondsPassedCurrentCall) +
629
- '/' + secondsToHms(pastTimeInSeconds + secondsPassedCurrentCall);
630
- }), 1000);
631
- }
632
- }
633
- /**
634
- * @private
635
- * @return {?}
636
- */
637
- CaculatePastHoldDuration() {
638
- /** @type {?} */
639
- let pastTimeInSeconds = 0;
640
- if (this.holdCounterData.pastCallDurations) {
641
- this.holdCounterData.pastCallDurations.forEach((/**
642
- * @param {?} holdTimerIterator
643
- * @return {?}
644
- */
645
- (holdTimerIterator) => {
646
- pastTimeInSeconds += (holdTimerIterator.endTime - holdTimerIterator.startTime) / 1000;
647
- }));
648
- }
649
- return pastTimeInSeconds;
650
- }
651
- /**
652
- * @ignore
653
- * @return {?}
654
- */
655
- ngOnDestroy() {
656
- // clear the timer.
657
- if (this._timerId != null) {
658
- clearInterval(this._timerId);
659
- this._timerId = null;
660
- }
661
- }
662
- }
663
- HoldtimerComponent.decorators = [
664
- { type: Component, args: [{
665
- selector: 'amc-holdtimer',
666
- template: `<div class="holdCallDurationDiv">
667
- <input
668
- readonly
669
- class="holdCallDurationTimer"
670
- name="HoldCallDuration/TotalHoldCallDuration"
671
- type="text"
672
- tabindex="-1"
673
- title="Hold Duration"
674
- [attr.aria-labelledby]="labelledByText || null"
675
- [value]="displayTime">
676
- </div>
677
- `,
678
- styles: [`.holdCallDurationTimer: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%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.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}`]
679
- },] },
680
- ];
681
- /** @nocollapse */
682
- HoldtimerComponent.ctorParameters = () => [];
683
- HoldtimerComponent.propDecorators = {
684
- holdCounterData: [{ type: Input }],
685
- statusText: [{ type: Input }],
686
- callId: [{ type: Input }]
687
- };
688
-
689
- /**
690
- * @fileoverview added by tsickle
691
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
692
- */
693
- class DurationComponent {
694
- constructor() {
695
- this.labelledByText = '';
696
- this.displayTime = '00:00/00:00';
697
- }
698
- /**
699
- * @return {?}
700
- */
701
- ngOnInit() {
702
- if (this.statusText && this.callId) {
703
- this.labelledByText = `${this.statusText} ${this.callId}`;
704
- }
705
- else if (this.statusText) {
706
- this.labelledByText = this.statusText;
707
- }
708
- else if (this.callId) {
709
- this.labelledByText = this.callId;
710
- }
711
- this.startCallCounter();
712
- }
713
- /**
714
- * @ignore
715
- * @private
716
- * @return {?}
717
- */
718
- startCallCounter() {
719
- if (this._timerId == null) {
720
- this._timerId = window.setInterval((/**
721
- * @return {?}
722
- */
723
- () => {
724
- /** @type {?} */
725
- const callStartTime = this.startTime;
726
- /** @type {?} */
727
- const currentTime = new Date().getTime() / 1000;
728
- /** @type {?} */
729
- const secondsPassed = Math.floor((currentTime) - (callStartTime / 1000));
730
- this.displayTime = Math.floor(secondsPassed / 60) + ':' + ('0' + (secondsPassed % 60)).slice(-2);
731
- }), 1000);
732
- }
733
- }
734
- /**
735
- * @return {?}
736
- */
737
- ngOnDestroy() {
738
- // clear the timer.
739
- if (this._timerId != null) {
740
- clearInterval(this._timerId);
741
- this._timerId = null;
742
- }
743
- }
744
- }
745
- DurationComponent.decorators = [
746
- { type: Component, args: [{
747
- selector: 'amc-duration',
748
- template: `<div class="holdCallDurationDiv">
749
- <input
750
- readonly
751
- class="block durationInput"
752
- name="CallDuration"
753
- type="text"
754
- tabindex="-1"
755
- title="Call Duration"
756
- [value]="displayTime"
757
- [attr.aria-labelledby]="labelledByText || null">
758
- </div>
759
- `,
760
- styles: [`.durationInput: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%;-webkit-box-sizing:border-box;box-sizing:border-box}.ViewCollapseImage,.ViewExpandImage{width:20px;height:20px;float:right;cursor:pointer}.answerPhoneNumberStyle{border:0;position:relative;top:-12px;left:-38px;max-width:80px;height:15px;text-overflow:ellipsis;font-size:.85em}.callHeaderTop{border-bottom:1px solid;background-color:#f4f5fb;width:100%;margin-top:0}.statusImage{width:15px;height:15px;margin-left:10px;float:left;margin-right:5px}.statusText{float:left;margin-top:1px}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.DurationDiv{float:right;width:17%;text-align:right;margin-right:5px}.displayLabels{margin-left:5px;width:25%;overflow:hidden;text-overflow:ellipsis}.displayData{border:0;outline:0}.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}`]
761
- },] },
762
- ];
763
- /** @nocollapse */
764
- DurationComponent.ctorParameters = () => [];
765
- DurationComponent.propDecorators = {
766
- statusText: [{ type: Input }],
767
- callId: [{ type: Input }],
768
- startTime: [{ type: Input }]
769
- };
770
-
771
- /**
772
- * @fileoverview added by tsickle
773
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
774
- */
775
- class ChatBoxComponent {
776
- constructor() {
777
- this.isTyping = false;
778
- this.lastCount = -1;
779
- this._isAgentTyping = false;
780
- this.isAgentTyping = new EventEmitter();
781
- this.newMessage = new EventEmitter();
782
- this.newMessageText = '';
783
- this.usernameToColor = {};
784
- this.colors = [
785
- '#81c784',
786
- '#ffab91',
787
- '#f48fb1',
788
- '#29b6f6',
789
- '#e1bee7',
790
- '#9ccc65',
791
- '#ffc107',
792
- '#26c6da',
793
- '#cddc39',
794
- ];
795
- this.colorsIndex = 0;
796
- this.agentColor = '#29b6f6';
797
- }
798
- /**
799
- * @return {?}
800
- */
801
- ngAfterViewChecked() {
802
- if (this.lastCount !== this.messages.length) {
803
- this.lastCount = this.messages.length;
804
- this.scrollToBottom();
805
- }
806
- }
807
- /**
808
- * @param {?} message
809
- * @return {?}
810
- */
811
- getColor(message) {
812
- if (message.type && message.type === IChatMessageType.AGENT) {
813
- return this.agentColor;
814
- }
815
- else if (message.username) {
816
- if (!this.usernameToColor[message.username]) {
817
- this.usernameToColor[message.username] = this.colors[this.colorsIndex];
818
- this.colorsIndex = (this.colorsIndex + 1) % this.colors.length;
819
- }
820
- return this.usernameToColor[message.username];
821
- }
822
- else {
823
- return this.colors[0];
824
- }
825
- }
826
- /**
827
- * @param {?} message
828
- * @return {?}
829
- */
830
- shouldAlignRight(message) {
831
- return message.type && message.type === IChatMessageType.AGENT;
832
- }
833
- /**
834
- * @return {?}
835
- */
836
- sendNewMessage() {
837
- if (this.newMessageText) {
838
- this.newMessage.emit(this.newMessageText);
839
- this.newMessageText = '';
840
- }
841
- }
842
- /**
843
- * @param {?} event
844
- * @return {?}
845
- */
846
- onNewMessageFocus(event) {
847
- /** @type {?} */
848
- const isTyping = event && this.newMessageText.length > 0;
849
- if (isTyping !== this._isAgentTyping) {
850
- this._isAgentTyping = isTyping;
851
- this.isAgentTyping.emit(isTyping);
852
- }
853
- }
854
- /**
855
- * @return {?}
856
- */
857
- onKeyup() {
858
- /** @type {?} */
859
- const isTyping = this.newMessageText.length > 0;
860
- if (isTyping !== this._isAgentTyping) {
861
- this._isAgentTyping = isTyping;
862
- this.isAgentTyping.emit(isTyping);
863
- }
864
- }
865
- /**
866
- * @return {?}
867
- */
868
- scrollToBottom() {
869
- try {
870
- this.messagesContainer.nativeElement.scrollTop = this.messagesContainer.nativeElement.scrollHeight;
871
- }
872
- catch (e) { }
873
- }
874
- }
875
- ChatBoxComponent.decorators = [
876
- { type: Component, args: [{
877
- selector: 'app-chat-box',
878
- template: `<div class="chat-box">
879
- <div #MessagesContainer class="messages" [style.max-height]='settings.maxHeight'>
880
- <ng-container *ngFor="let message of messages">
881
- <app-chat-message [alignRight]="shouldAlignRight(message)" [message]="message.text" [username]="message.username"
882
- [timestamp]="message.timestamp" [image]="message.userIcon" [fallbackImage]="settings.fallbackUserIcon" [color]="getColor(message)">
883
- </app-chat-message>
884
- </ng-container>
885
-
886
- <div *ngIf="isTyping" class="typing-indicator">
887
- Someone is typing
888
- <span></span>
889
- <span></span>
890
- <span></span>
891
- </div>
892
- </div>
893
-
894
- <div class="new-message">
895
- <input #NewMessageText [(ngModel)]="newMessageText" type="text" placeholder="Type a message" (focus)="onNewMessageFocus(true)"
896
- (blur)="onNewMessageFocus(false)" (keydown.enter)="sendNewMessage()" (keyup)='onKeyup()' [disabled]="settings.disableSendMessage">
897
- <input type="image" [src]="settings.sendImage" (click)="sendNewMessage()" [disabled]="settings.disableSendMessage">
898
- </div>
899
- </div>
900
- `,
901
- styles: [`.chat-box{background-color:#eceff1}.messages{padding:5px;overflow:auto;min-height:50px}.new-message{border-top:1px solid #000;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-line-pack:center;align-content:center;height:25px}.new-message input[type=text]{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;background-color:#eceff1;border:none;min-width:0}.new-message input[type=image]{position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:20px;cursor:pointer}.new-message input[type=image]:disabled{opacity:.5;cursor:auto}.new-message input:focus{outline:0}.typing-indicator{font-size:1em;font-style:italic}.typing-indicator span{display:inline-block;height:10px;width:10px;border-radius:50%;background-color:#9e9e9e;margin:0 1px;opacity:.2}.typing-indicator span:nth-of-type(1){-webkit-animation:1.5s .33333s infinite blink;animation:1.5s .33333s infinite blink}.typing-indicator span:nth-of-type(2){-webkit-animation:1.5s .66666s infinite blink;animation:1.5s .66666s infinite blink}.typing-indicator span:nth-of-type(3){-webkit-animation:1.5s .99999s infinite blink;animation:1.5s .99999s infinite blink}@-webkit-keyframes blink{50%{opacity:1}}@keyframes blink{50%{opacity:1}}`],
902
- },] },
903
- ];
904
- /** @nocollapse */
905
- ChatBoxComponent.ctorParameters = () => [];
906
- ChatBoxComponent.propDecorators = {
907
- settings: [{ type: Input }],
908
- isTyping: [{ type: Input }],
909
- messages: [{ type: Input }],
910
- isAgentTyping: [{ type: Output }],
911
- newMessage: [{ type: Output }],
912
- messagesContainer: [{ type: ViewChild, args: ['MessagesContainer',] }]
913
- };
914
-
915
- /**
916
- * @fileoverview added by tsickle
917
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
918
- */
919
- class ChatMessageComponent {
920
- constructor() {
921
- this.alignRight = false;
922
- }
923
- /**
924
- * @return {?}
925
- */
926
- ngOnInit() {
927
- }
928
- }
929
- ChatMessageComponent.decorators = [
930
- { type: Component, args: [{
931
- selector: 'app-chat-message',
932
- template: `<div [class]="alignRight? 'message right-message' : 'message left-message'">
933
- <div class="message-header">
934
- <img *ngIf="image" class="image" [src]="image" (error)="image = fallbackImage" [style.border-color]="color" />
935
- <span *ngIf="username" class="username">{{username}}</span>
936
- <span *ngIf="timestamp" class="timestamp">{{timestamp}}</span>
937
- </div>
938
-
939
- <div class="message-body-container">
940
- <div>
941
- <div class="message-body" [style.background-color]="color" [style.border-color]="color">
942
- <span [innerHTML]="message"></span>
943
- </div>
944
- </div>
945
- </div>
946
- </div>
947
- `,
948
- styles: [`:host{display:block;margin-top:2px;margin-bottom:2px}.right-message{text-align:end}.message-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-text-emphasis:none;text-emphasis:none;font-style:italic;font-size:.7em;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:.5em}.message-header .image{height:30px;border-radius:50%;border:2px solid red}.message-header .username{font-weight:700}.right-message>.message-header{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;margin-right:1px}.right-message>.message-header .image,.right-message>.message-header .username{margin-left:5px}.left-message>.message-header{margin-left:1px}.left-message>.message-header .image,.left-message>.message-header .username{margin-right:5px}.message-body-container{display:-webkit-box;display:-ms-flexbox;display:flex}.right-message>.message-body-container{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.message-body{display:inline-block;position:relative;border-radius:.4em;padding:3px;font-style:normal;font-size:1em;text-align:start;min-width:2em;overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.left-message .message-body:after{content:"";position:absolute;left:.8em;top:-.4em;border-bottom:.4em solid #000;border-bottom-color:inherit;border-left:.4em solid transparent;border-right:.4em solid transparent}.right-message .message-body:after{content:"";position:absolute;right:.8em;top:-.4em;border-bottom:.4em solid #000;border-bottom-color:inherit;border-left:.4em solid transparent;border-right:.4em solid transparent}`]
949
- },] },
950
- ];
951
- /** @nocollapse */
952
- ChatMessageComponent.ctorParameters = () => [];
953
- ChatMessageComponent.propDecorators = {
954
- message: [{ type: Input }],
955
- alignRight: [{ type: Input }],
956
- username: [{ type: Input }],
957
- color: [{ type: Input }],
958
- timestamp: [{ type: Input }],
959
- image: [{ type: Input }],
960
- fallbackImage: [{ type: Input }]
961
- };
962
-
963
- /**
964
- * @fileoverview added by tsickle
965
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
966
- */
967
- class DispositionComponent {
968
- constructor() {
969
- this.dispositionEmitter = new EventEmitter();
970
- this.selectedDispositionValue = '';
971
- this.dispositionName = '';
972
- }
973
- /**
974
- * @return {?}
975
- */
976
- ngOnInit() {
977
- for (const metadata of this.disposition.dispositionMetadata) {
978
- if (metadata.key === 'callId') {
979
- this.dispositionName = `disposition_${metadata.value}`;
980
- break;
981
- }
982
- }
983
- if (this.disposition.checkedDisposition) {
984
- this.selectedDispositionValue = this.disposition.checkedDisposition;
985
- }
986
- }
987
- /**
988
- * @return {?}
989
- */
990
- submitDisposition() {
991
- /** @type {?} */
992
- const selectedDisposition = {
993
- dispositionId: this.selectedDispositionValue,
994
- dispositionName: this.disposition.disposition.get(this.selectedDispositionValue),
995
- dispositionMetadata: this.disposition.dispositionMetadata
996
- };
997
- this.dispositionEmitter.emit(selectedDisposition);
998
- }
999
- /**
1000
- * @param {?} event
1001
- * @param {?} dispositionKey
1002
- * @return {?}
1003
- */
1004
- selectAndSubmitDisposition(event, dispositionKey) {
1005
- if (event.code === 'Enter') {
1006
- this.selectedDispositionValue = dispositionKey;
1007
- this.submitDisposition();
1008
- }
1009
- }
1010
- }
1011
- DispositionComponent.decorators = [
1012
- { type: Component, args: [{
1013
- selector: 'amc-disposition',
1014
- template: `<div class="disposition-container">
1015
- <div class="header-container">
1016
- <label class="disposition-header" attr.aria-label="set disposition">{{disposition.dispositionHeader}}</label>
1017
- </div>
1018
-
1019
- <div class="dispositions-container">
1020
- <div class="disposition" *ngFor="let disp of disposition.disposition | keyvalue; let i = index">
1021
- <label
1022
- class="disposition-label"
1023
- tabindex="0"
1024
- [id]="disp.key"
1025
- [ngClass]="{'disposition-label-selected' : selectedDispositionValue === disp.key, 'first-disposition': i === 0}"
1026
- (keypress)="selectAndSubmitDisposition($event, disp.key)">
1027
-
1028
- <input
1029
- class="disposition-input"
1030
- type="radio"
1031
- value="{{disp.key}}"
1032
- tabindex="-1"
1033
- attr.aria-label="{{disp.value}}"
1034
- [required]="!selectedDispositionValue"
1035
- [name]="dispositionName"
1036
- (change)="submitDisposition()"
1037
- [(ngModel)]="selectedDispositionValue">
1038
-
1039
- {{disp.value}}
1040
- </label>
1041
- </div>
1042
- </div>
1043
- </div>
1044
- `,
1045
- styles: [`.disposition-container{border:1px solid #939598;white-space:nowrap;font-family:Arial;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;text-overflow:ellipsis;position:relative;font-size:.9em;max-height:180px;overflow-x:hidden;overflow-y:hidden}.header-container{border-bottom:1px solid #939598;background-color:#f4f5fb;width:100%;white-space:nowrap;height:28px;position:sticky;overflow-x:hidden;overflow-y:hidden}.disposition-header{margin-top:auto;margin-left:7px;padding:5px;white-space:nowrap;text-overflow:ellipsis;font-weight:700;font-size:.9em;font-family:Arial;overflow-x:hidden}.disposition{margin-left:5px;padding-left:5px;white-space:nowrap}.disposition-label{text-overflow:ellipsis;font-weight:400;white-space:nowrap;font-size:.9em;overflow-x:hidden}.disposition-label-selected{text-overflow:ellipsis;font-weight:700;white-space:nowrap;font-size:.9em}.dispositions-container{padding:3px;overflow-y:scroll;max-height:150px}.disposition-label:focus{outline:#3296da solid 2px;outline-offset:5px}.first-disposition{margin-top:5px}`]
1046
- },] },
1047
- ];
1048
- /** @nocollapse */
1049
- DispositionComponent.ctorParameters = () => [];
1050
- DispositionComponent.propDecorators = {
1051
- disposition: [{ type: Input }],
1052
- dispositionEmitter: [{ type: Output }]
1053
- };
1054
-
1055
- /**
1056
- * @fileoverview added by tsickle
1057
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1058
- */
1059
- class ActivityComponent {
1060
- constructor() {
1061
- this.ActivitySave = new EventEmitter();
1062
- this.OnNameSelectChange = new EventEmitter();
1063
- this.OnRelatedToChange = new EventEmitter();
1064
- this.OnSubjectChange = new EventEmitter();
1065
- this.OnCallNotesChange = new EventEmitter();
1066
- this.isActivityMaximized = true;
1067
- }
1068
- /**
1069
- * @return {?}
1070
- */
1071
- ngOnInit() {
1072
- }
1073
- /**
1074
- * @protected
1075
- * @param {?} event
1076
- * @return {?}
1077
- */
1078
- onNameSelectChange(event) {
1079
- this.activity.WhoObject = this.getWho(event.currentTarget.value);
1080
- this.OnNameSelectChange.emit(this.activity);
1081
- }
1082
- /**
1083
- * @protected
1084
- * @param {?} whoObject
1085
- * @return {?}
1086
- */
1087
- parseWhoObject(whoObject) {
1088
- return whoObject.objectType + ': ' + whoObject.objectName;
1089
- }
1090
- /**
1091
- * @protected
1092
- * @param {?} whatObject
1093
- * @return {?}
1094
- */
1095
- parseWhatObject(whatObject) {
1096
- return whatObject.objectType + ': ' + whatObject.objectName;
1097
- }
1098
- /**
1099
- * @protected
1100
- * @param {?} event
1101
- * @return {?}
1102
- */
1103
- onRelatedToChange(event) {
1104
- this.activity.WhatObject = this.getWhat(event.currentTarget.value);
1105
- this.OnRelatedToChange.emit(this.activity);
1106
- }
1107
- /**
1108
- * @protected
1109
- * @param {?} event
1110
- * @return {?}
1111
- */
1112
- onSubjectChange(event) {
1113
- this.activity.Subject = event.srcElement.value;
1114
- this.OnSubjectChange.emit(this.activity);
1115
- }
1116
- /**
1117
- * @protected
1118
- * @param {?} event
1119
- * @return {?}
1120
- */
1121
- onCallNotesChange(event) {
1122
- this.activity.Subject = event.srcElement.value.trim();
1123
- this.OnCallNotesChange.emit(this.activity);
1124
- }
1125
- /**
1126
- * @protected
1127
- * @param {?} id
1128
- * @return {?}
1129
- */
1130
- getWho(id) {
1131
- for (let i = 0; i < this.activity.whoList.length; i++) {
1132
- if (this.activity.whoList[i].objectId === id) {
1133
- return this.activity.whoList[i];
1134
- }
1135
- }
1136
- }
1137
- /**
1138
- * @protected
1139
- * @param {?} id
1140
- * @return {?}
1141
- */
1142
- getWhat(id) {
1143
- for (let i = 0; i < this.activity.whatList.length; i++) {
1144
- if (this.activity.whatList[i].objectId === id) {
1145
- return this.activity.whatList[i];
1146
- }
1147
- }
1148
- }
1149
- /**
1150
- * @protected
1151
- * @param {?} value
1152
- * @return {?}
1153
- */
1154
- loadQuickComment(value) {
1155
- this.activity.Description = this.activity.Description + this.activity.quickCommentList[value];
1156
- }
1157
- /**
1158
- * @protected
1159
- * @param {?} clearActivityFields
1160
- * @return {?}
1161
- */
1162
- activitySave(clearActivityFields) {
1163
- this.ActivitySave.emit(this.activity);
1164
- }
1165
- }
1166
- ActivityComponent.decorators = [
1167
- { type: Component, args: [{
1168
- selector: 'app-activity',
1169
- template: `<div *ngIf="isActivityMaximized" class="callDisplay">
1170
- <div class="editor callHeader">
1171
- <label class="headerLabel">
1172
- <b>Activity Information</b>
1173
- </label>
1174
- <img class="ViewResizeImage" src="/assets/images/section_collapse.png" (click)="isActivityMaximized = false" title="Collapse">
1175
- </div>
1176
- <div class="callBody">
1177
- <div class="activityFields">
1178
- <form>
1179
- <div class="editor displayDiv">
1180
- <label class="displayLabels" title="Call From">{{activity.NameFieldName}}</label>
1181
- <select class="dropDownListStyle displayData" data-resetperactivity="false" (change)="onNameSelectChange($event)">
1182
- <option *ngFor="let who of activity.whoList" value="{{who.objectId}}">{{parseWhoObject(who)}}</option>
1183
- </select>
1184
- </div>
1185
- <div class="editor displayDiv">
1186
- <label class="displayLabels" title="Related To">{{activity.RelatedToFieldName}}</label>
1187
- <select class="dropDownListStyle displayData" (change)="onRelatedToChange($event)" data-resetperactivity="false">
1188
- <option *ngFor="let what of activity.whatList" value="{{what.objectId}}">{{parseWhatObject(what)}}</option>
1189
- </select>
1190
- </div>
1191
- <div class="editor displayDiv">
1192
- <label class="displayLabels" title="Subject">{{activity.SubjectFieldName}}</label>
1193
- <input class="activitySubjectTextBoxStyle displayData" (change)="onSubjectChange($event)" title="{{activity.Subject}}"
1194
- type="text" value="{{activity.Subject}}">
1195
- </div>
1196
- <div class="editor displayDiv">
1197
- <div class="callNotesContainer">
1198
- <div class="textAreaDiv">
1199
- <textarea value="{{activity.Description}}" placeholder="Click to add a comment" class="activityCommentsTextBoxStyle"
1200
- (change)="onCallNotesChange($event)" cols="20" rows="2" title=""></textarea>
1201
- </div>
1202
- <div class="notesButtonBorder">
1203
- <div class="commentsButtonDiv">
1204
- <div class="quickCommentsDiv">
1205
- <input *ngFor="let quickComment of activity.quickCommentList ; let i = index;" class="quickNotesBotton" type="button"
1206
- value="{{i+1}}" (click)="loadQuickComment(i)" title="{{quickComment}}">
1207
- </div>
1208
- <div class="submitDiv">
1209
- <input class="submitButton" type="button" value="Submit" (click)="activitySave(false)">
1210
- </div>
1211
- </div>
1212
- </div>
1213
- </div>
1214
- </div>
1215
- </form>
1216
- </div>
1217
- </div>
1218
- </div>
1219
- <div *ngIf="!isActivityMaximized" class="callDisplay">
1220
- <div class="editor callHeader">
1221
- <label class="headerLabel">
1222
- <b>Activity Information</b>
1223
- </label>
1224
- <img class="ViewResizeImage" src="assets/images/section_expand.png" (click)="isActivityMaximized = true" title="Expand">
1225
- </div>
1226
- `,
1227
- styles: [`.callDisplay{display:grid;margin-bottom:8px;background-color:#fff}.editor{font-size:.9em;width:70%;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important}.headerLabel{margin-left:10px}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.callBody{border-top:0;position:relative}.displayDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.displayLabels{margin-left:5px;width:25%;margin-right:2px}.displayData{width:70%}.dropDownListStyle{border:1px solid #939598!important;border-radius:3px!important;width:71%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 5px 0 0;cursor:pointer}.activitySubjectTextBoxStyle{border:1px solid #939598!important;border-radius:3px!important;width:71%!important;height:20px!important;text-align:left!important;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0 5px 0 0;padding-left:2px}.activityCommentsTextBoxStyle{border:none;color:#333!important;text-align:left!important;margin:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;resize:none;width:100%;height:95px}.notesButtonBorder{background-color:#fff;border-left:1px solid #939598;border-bottom:1px solid #939598;border-right:1px solid #939598;border-bottom-left-radius:3px!important;border-bottom-right-radius:3px!important;height:auto}.commentsButtonDiv{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.quickNotesBotton{background-color:#1e72ba;border:0;color:#fff;height:70%;width:20px;margin:2px;outline:0;font-size:70%}.quickCommentsDiv{text-align:left;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-wrap:wrap;flex-wrap:wrap;display:-webkit-box;display:-ms-flexbox;display:flex;margin:2px}.submitDiv{text-align:right;padding-right:4px}.submitButton{border:0;float:right;margin-top:2px;outline:0;cursor:pointer;background-color:#6cb047;color:#fff;border-radius:4px;font-size:98%;margin-bottom:2px}`]
1228
- },] },
1229
- ];
1230
- /** @nocollapse */
1231
- ActivityComponent.ctorParameters = () => [];
1232
- ActivityComponent.propDecorators = {
1233
- activity: [{ type: Input }],
1234
- ActivitySave: [{ type: Output }],
1235
- OnNameSelectChange: [{ type: Output }],
1236
- OnRelatedToChange: [{ type: Output }],
1237
- OnSubjectChange: [{ type: Output }],
1238
- OnCallNotesChange: [{ type: Output }]
1239
- };
1240
-
1241
- /**
1242
- * @fileoverview added by tsickle
1243
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1244
- */
1245
- class LoginComponent {
1246
- constructor() {
1247
- this.loginDetailsProvided = new EventEmitter();
1248
- }
1249
- /**
1250
- * @return {?}
1251
- */
1252
- ngOnInit() {
1253
- if (!this.loginData.header) {
1254
- this.loginData.header = 'Login';
1255
- }
1256
- for (let field of this.loginData.fields) {
1257
- if (!field.isInvalid) {
1258
- field.isInvalid = false;
1259
- }
1260
- }
1261
- }
1262
- /**
1263
- * @param {?} loginForm
1264
- * @return {?}
1265
- */
1266
- onLogin(loginForm) {
1267
- for (const field of this.loginData.fields) {
1268
- field.value = loginForm.value[field.name];
1269
- }
1270
- this.loginDetailsProvided.emit(this.loginData);
1271
- }
1272
- /**
1273
- * @param {?} loginForm
1274
- * @param {?} field
1275
- * @return {?}
1276
- */
1277
- focusOutOfInput(loginForm, field) {
1278
- if (!loginForm.controls[field.name].valid) {
1279
- field.isInvalid = true;
1280
- }
1281
- // console.log(loginForm);
1282
- // console.log(field);
1283
- }
1284
- }
1285
- LoginComponent.decorators = [
1286
- { type: Component, args: [{
1287
- selector: 'amc-login',
1288
- template: `<div class="login-container">
1289
- <form (ngSubmit)="onLogin(loginForm)"class="login-form" id="login-form" #loginForm="ngForm">
1290
- <div class="header-container">
1291
- <label class="login-header" attr.aria-label="login">{{ loginData.header }}</label>
1292
- </div>
1293
- <div class="fields-container">
1294
- <div *ngFor="let field of loginData.fields" class="field">
1295
- <label class="field-label">
1296
- {{ field.name }}:
1297
- </label>
1298
-
1299
- <input
1300
- ngModel
1301
- class="field-input"
1302
- attr.aria-label="{{ field.name }}"
1303
- [name]="field.name"
1304
- [type]="field.type"
1305
- [value]="field.value"
1306
- [placeholder]="field.placeholder || ''"
1307
- [required]="field.isRequired || false"
1308
- (focusout)="focusOutOfInput(loginForm, field)"/>
1309
-
1310
- <p class="invalid-input" *ngIf="field.isInvalid">{{ field.invalidMessage }}</p>
1311
- </div>
1312
-
1313
- <button
1314
- type="submit"
1315
- class="form-submit"
1316
- form="login-form"
1317
- tabindex="0"
1318
- attr.aria-label="send"
1319
- [disabled]="!loginForm.valid">Login</button>
1320
- </div>
1321
-
1322
- </form>
1323
- </div>
1324
- `,
1325
- styles: [`.login-container{border:1px solid #939598;white-space:nowrap;font-family:Arial;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;text-overflow:ellipsis;position:relative;font-size:.9em;max-height:200px;overflow-x:hidden;overflow-y:hidden}.header-container{border-bottom:1px solid #939598;background-color:#f4f5fb;width:100%;height:28px;position:sticky}.login-header{margin-top:auto;margin-left:7px;padding:5px;font-weight:700;font-size:.9em}.fields-container{overflow-y:auto;max-height:160px;font-size:.9em;padding:5px}.field{display:table-row;margin:5px}.field-label{padding:10px;display:table-cell}.field-input{display:table-cell;border:1px solid #939598;border-radius:5px}.field-input:focus{-webkit-box-shadow:0 0 5px #38badf;box-shadow:0 0 5px #38badf}.form-submit{margin:15px 10px 10px;display:table-row;border:1px solid #00a4b0;border-radius:5px;background-color:#00a4b0;color:#f7f7f7;width:10em;height:2em;-webkit-transition:.2s;transition:.2s;font-size:1.1em;position:relative;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.form-submit:hover{background-color:#01858f}.form-submit:disabled{background-color:silver;border-color:silver;color:#fff}input.ng-invalid.ng-touched[required]{border-color:#a94442}.form-submit:focus{outline:#3296da solid 2px;outline-offset:5px}.invalid-input{margin:0;padding:0;color:#a94442;font-size:x-small}`]
1326
- },] },
1327
- ];
1328
- /** @nocollapse */
1329
- LoginComponent.ctorParameters = () => [];
1330
- LoginComponent.propDecorators = {
1331
- loginData: [{ type: Input }],
1332
- loginDetailsProvided: [{ type: Output }]
1333
- };
1334
-
1335
- /**
1336
- * @fileoverview added by tsickle
1337
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1338
- */
1339
- class UILibraryModule {
1340
- /**
1341
- * @param {?} injector
1342
- */
1343
- constructor(injector) {
1344
- this.injector = injector;
1345
- }
1346
- /**
1347
- * @param {?} app
1348
- * @return {?}
1349
- */
1350
- ngDoBootstrap(app) {
1351
- if (!customElements.get('amc-webcomponents-scenario')) {
1352
- /** @type {?} */
1353
- const strategyFactory = new ElementZoneStrategyFactory(ScenarioComponent, this.injector);
1354
- customElements.define('amc-webcomponents-scenario', createCustomElement(ScenarioComponent, {
1355
- injector: this.injector,
1356
- strategyFactory: strategyFactory
1357
- }));
1358
- }
1359
- if (!customElements.get('amc-webcomponents-disposition')) {
1360
- /** @type {?} */
1361
- const strategyFactory = new ElementZoneStrategyFactory(DispositionComponent, this.injector);
1362
- customElements.define('amc-webcomponents-disposition', createCustomElement(DispositionComponent, {
1363
- injector: this.injector,
1364
- strategyFactory: strategyFactory
1365
- }));
1366
- }
1367
- if (!customElements.get('amc-webcomponents-login')) {
1368
- /** @type {?} */
1369
- const strategyFactory = new ElementZoneStrategyFactory(LoginComponent, this.injector);
1370
- customElements.define('amc-webcomponents-disposition', createCustomElement(LoginComponent, {
1371
- injector: this.injector,
1372
- strategyFactory: strategyFactory
1373
- }));
1374
- }
1375
- }
1376
- }
1377
- UILibraryModule.decorators = [
1378
- { type: NgModule, args: [{
1379
- imports: [BrowserModule, CommonModule, FormsModule],
1380
- declarations: [
1381
- InteractionComponent,
1382
- ScenarioComponent,
1383
- OperationComponent,
1384
- PropertyComponent,
1385
- HoldtimerComponent,
1386
- DurationComponent,
1387
- ChatBoxComponent,
1388
- ChatMessageComponent,
1389
- DispositionComponent,
1390
- ActivityComponent,
1391
- LoginComponent
1392
- ],
1393
- entryComponents: [ScenarioComponent, DispositionComponent, LoginComponent],
1394
- bootstrap: [],
1395
- exports: [ScenarioComponent, DispositionComponent, LoginComponent]
1396
- },] },
1397
- ];
1398
- /** @nocollapse */
1399
- UILibraryModule.ctorParameters = () => [
1400
- { type: Injector }
1401
- ];
1402
-
1403
- /**
1404
- * @fileoverview added by tsickle
1405
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1406
- */
1407
-
1408
- /**
1409
- * @fileoverview added by tsickle
1410
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
1411
- */
1412
- /**
1413
- * Generated bundle index. Do not edit.
1414
- */
1415
-
1416
- export { UILibraryModule, Property, ValueType, IChatMessageType, ActivityComponent as ɵj, ChatBoxComponent as ɵg, ChatMessageComponent as ɵh, DispositionComponent as ɵi, DurationComponent as ɵf, HoldtimerComponent as ɵe, InteractionComponent as ɵa, LoginComponent as ɵk, OperationComponent as ɵc, PropertyComponent as ɵd, ScenarioComponent as ɵb };
1417
- //# sourceMappingURL=amc-technology-ui-library.js.map
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ export * from './public_api';
5
+ export { ActivityComponent as ɵj } from './projects/UILibrary/src/app/components/activity/activity.component';
6
+ export { ChatBoxComponent as ɵg } from './projects/UILibrary/src/app/components/chat-box/chat-box.component';
7
+ export { ChatMessageComponent as ɵh } from './projects/UILibrary/src/app/components/chat-message/chat-message.component';
8
+ export { DispositionComponent as ɵi } from './projects/UILibrary/src/app/components/disposition/disposition.component';
9
+ export { DurationComponent as ɵf } from './projects/UILibrary/src/app/components/duration/duration.component';
10
+ export { HoldtimerComponent as ɵe } from './projects/UILibrary/src/app/components/holdtimer/holdtimer.component';
11
+ export { InteractionComponent as ɵa } from './projects/UILibrary/src/app/components/interaction/interaction.component';
12
+ export { LoginComponent as ɵk } from './projects/UILibrary/src/app/components/login/login.component';
13
+ export { OperationComponent as ɵc } from './projects/UILibrary/src/app/components/operation/operation.component';
14
+ export { PropertyComponent as ɵd } from './projects/UILibrary/src/app/components/property/property.component';
15
+ export { ScenarioComponent as ɵb } from './projects/UILibrary/src/app/components/scenario/scenario.component';
16
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW1jLXRlY2hub2xvZ3ktdWktbGlicmFyeS5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BhbWMtdGVjaG5vbG9neS91aS1saWJyYXJ5LyIsInNvdXJjZXMiOlsiYW1jLXRlY2hub2xvZ3ktdWktbGlicmFyeS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsY0FBYyxDQUFDO0FBRTdCLE9BQU8sRUFBQyxpQkFBaUIsSUFBSSxFQUFFLEVBQUMsTUFBTSxxRUFBcUUsQ0FBQztBQUM1RyxPQUFPLEVBQUMsZ0JBQWdCLElBQUksRUFBRSxFQUFDLE1BQU0scUVBQXFFLENBQUM7QUFDM0csT0FBTyxFQUFDLG9CQUFvQixJQUFJLEVBQUUsRUFBQyxNQUFNLDZFQUE2RSxDQUFDO0FBQ3ZILE9BQU8sRUFBQyxvQkFBb0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwyRUFBMkUsQ0FBQztBQUNySCxPQUFPLEVBQUMsaUJBQWlCLElBQUksRUFBRSxFQUFDLE1BQU0scUVBQXFFLENBQUM7QUFDNUcsT0FBTyxFQUFDLGtCQUFrQixJQUFJLEVBQUUsRUFBQyxNQUFNLHVFQUF1RSxDQUFDO0FBQy9HLE9BQU8sRUFBQyxvQkFBb0IsSUFBSSxFQUFFLEVBQUMsTUFBTSwyRUFBMkUsQ0FBQztBQUNySCxPQUFPLEVBQUMsY0FBYyxJQUFJLEVBQUUsRUFBQyxNQUFNLCtEQUErRCxDQUFDO0FBQ25HLE9BQU8sRUFBQyxrQkFBa0IsSUFBSSxFQUFFLEVBQUMsTUFBTSx1RUFBdUUsQ0FBQztBQUMvRyxPQUFPLEVBQUMsaUJBQWlCLElBQUksRUFBRSxFQUFDLE1BQU0scUVBQXFFLENBQUM7QUFDNUcsT0FBTyxFQUFDLGlCQUFpQixJQUFJLEVBQUUsRUFBQyxNQUFNLHFFQUFxRSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL3B1YmxpY19hcGknO1xuXG5leHBvcnQge0FjdGl2aXR5Q29tcG9uZW50IGFzIMm1an0gZnJvbSAnLi9wcm9qZWN0cy9VSUxpYnJhcnkvc3JjL2FwcC9jb21wb25lbnRzL2FjdGl2aXR5L2FjdGl2aXR5LmNvbXBvbmVudCc7XG5leHBvcnQge0NoYXRCb3hDb21wb25lbnQgYXMgybVnfSBmcm9tICcuL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL2NvbXBvbmVudHMvY2hhdC1ib3gvY2hhdC1ib3guY29tcG9uZW50JztcbmV4cG9ydCB7Q2hhdE1lc3NhZ2VDb21wb25lbnQgYXMgybVofSBmcm9tICcuL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL2NvbXBvbmVudHMvY2hhdC1tZXNzYWdlL2NoYXQtbWVzc2FnZS5jb21wb25lbnQnO1xuZXhwb3J0IHtEaXNwb3NpdGlvbkNvbXBvbmVudCBhcyDJtWl9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9kaXNwb3NpdGlvbi9kaXNwb3NpdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0IHtEdXJhdGlvbkNvbXBvbmVudCBhcyDJtWZ9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9kdXJhdGlvbi9kdXJhdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0IHtIb2xkdGltZXJDb21wb25lbnQgYXMgybVlfSBmcm9tICcuL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL2NvbXBvbmVudHMvaG9sZHRpbWVyL2hvbGR0aW1lci5jb21wb25lbnQnO1xuZXhwb3J0IHtJbnRlcmFjdGlvbkNvbXBvbmVudCBhcyDJtWF9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9pbnRlcmFjdGlvbi9pbnRlcmFjdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0IHtMb2dpbkNvbXBvbmVudCBhcyDJtWt9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9sb2dpbi9sb2dpbi5jb21wb25lbnQnO1xuZXhwb3J0IHtPcGVyYXRpb25Db21wb25lbnQgYXMgybVjfSBmcm9tICcuL3Byb2plY3RzL1VJTGlicmFyeS9zcmMvYXBwL2NvbXBvbmVudHMvb3BlcmF0aW9uL29wZXJhdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0IHtQcm9wZXJ0eUNvbXBvbmVudCBhcyDJtWR9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9wcm9wZXJ0eS9wcm9wZXJ0eS5jb21wb25lbnQnO1xuZXhwb3J0IHtTY2VuYXJpb0NvbXBvbmVudCBhcyDJtWJ9IGZyb20gJy4vcHJvamVjdHMvVUlMaWJyYXJ5L3NyYy9hcHAvY29tcG9uZW50cy9zY2VuYXJpby9zY2VuYXJpby5jb21wb25lbnQnOyJdfQ==