@amc-technology/ui-library 1.0.103 → 1.0.105

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 (34) hide show
  1. package/esm2022/projects/UILibrary/src/app/components/activity/activity.component.mjs +2 -2
  2. package/esm2022/projects/UILibrary/src/app/components/chat-box/chat-box.component.mjs +5 -5
  3. package/esm2022/projects/UILibrary/src/app/components/create/create.component.mjs +5 -5
  4. package/esm2022/projects/UILibrary/src/app/components/current-activity/current-activity.component.mjs +2 -2
  5. package/esm2022/projects/UILibrary/src/app/components/disposition/disposition.component.mjs +1 -1
  6. package/esm2022/projects/UILibrary/src/app/components/duration/duration.component.mjs +8 -8
  7. package/esm2022/projects/UILibrary/src/app/components/hold-timer/hold-timer.component.mjs +11 -11
  8. package/esm2022/projects/UILibrary/src/app/components/interaction/interaction.component.mjs +11 -11
  9. package/esm2022/projects/UILibrary/src/app/components/login/login.component.mjs +2 -2
  10. package/esm2022/projects/UILibrary/src/app/components/operation/operation.component.mjs +1 -1
  11. package/esm2022/projects/UILibrary/src/app/components/property/property.component.mjs +13 -13
  12. package/esm2022/projects/UILibrary/src/app/components/recent-activity/recent-activity.component.mjs +1 -1
  13. package/esm2022/projects/UILibrary/src/app/components/scenario/scenario.component.mjs +1 -1
  14. package/esm2022/projects/UILibrary/src/app/components/search-information/search-information.component.mjs +25 -14
  15. package/esm2022/projects/UILibrary/src/app/models/disposition.interface.mjs +1 -1
  16. package/esm2022/projects/UILibrary/src/app/models/uilibrary.model.mjs +20 -22
  17. package/esm2022/projects/UILibrary/src/app/uilibrary.module.mjs +2 -3
  18. package/esm2022/public_api.mjs +1 -1
  19. package/fesm2022/amc-technology-ui-library.mjs +97 -89
  20. package/fesm2022/amc-technology-ui-library.mjs.map +1 -1
  21. package/package.json +2 -3
  22. package/projects/UILibrary/src/app/components/activity/activity.component.d.ts +1 -1
  23. package/projects/UILibrary/src/app/components/chat-box/chat-box.component.d.ts +6 -6
  24. package/projects/UILibrary/src/app/components/create/create.component.d.ts +1 -1
  25. package/projects/UILibrary/src/app/components/current-activity/current-activity.component.d.ts +1 -1
  26. package/projects/UILibrary/src/app/components/duration/duration.component.d.ts +1 -1
  27. package/projects/UILibrary/src/app/components/hold-timer/hold-timer.component.d.ts +3 -3
  28. package/projects/UILibrary/src/app/components/interaction/interaction.component.d.ts +4 -4
  29. package/projects/UILibrary/src/app/components/property/property.component.d.ts +3 -3
  30. package/projects/UILibrary/src/app/components/search-information/search-information.component.d.ts +4 -3
  31. package/projects/UILibrary/src/app/models/disposition.interface.d.ts +1 -1
  32. package/projects/UILibrary/src/app/models/uilibrary.model.d.ts +13 -13
  33. package/projects/UILibrary/src/app/uilibrary.module.d.ts +4 -4
  34. package/webcomponents/webcomponents.js +1 -1
@@ -8,16 +8,16 @@ import { FormsModule } from '@angular/forms';
8
8
  import { BrowserModule } from '@angular/platform-browser';
9
9
  import { Subject } from 'rxjs';
10
10
  import { debounceTime } from 'rxjs/operators';
11
- import { MatLegacyTabsModule } from '@angular/material/legacy-tabs';
11
+ import { MatTabsModule } from '@angular/material/tabs';
12
12
 
13
13
  class ActivityComponent {
14
- isActivityMaximized;
15
14
  activity;
16
15
  ActivitySave = new EventEmitter();
17
16
  OnNameSelectChange = new EventEmitter();
18
17
  OnRelatedToChange = new EventEmitter();
19
18
  OnSubjectChange = new EventEmitter();
20
19
  OnCallNotesChange = new EventEmitter();
20
+ isActivityMaximized;
21
21
  constructor() {
22
22
  this.isActivityMaximized = true;
23
23
  }
@@ -135,13 +135,12 @@ class ChatBoxComponent {
135
135
  settings;
136
136
  isTyping = false;
137
137
  messages;
138
- lastCount = -1;
139
- _isAgentTyping = false;
140
138
  isAgentTyping = new EventEmitter();
141
139
  newMessage = new EventEmitter();
142
- newMessageText = '';
143
140
  messagesContainer;
144
141
  autofocus;
142
+ _isAgentTyping = false;
143
+ newMessageText = '';
145
144
  usernameToColor = {};
146
145
  colors = [
147
146
  '#c2c4c4',
@@ -156,9 +155,10 @@ class ChatBoxComponent {
156
155
  ];
157
156
  colorsIndex = 0;
158
157
  agentColor = '#2db0e0';
158
+ sendButtonText;
159
+ lastCount = -1;
159
160
  scrollAtBottom = true;
160
161
  iterableDiffer;
161
- sendButtonText;
162
162
  constructor(renderer, iterableDiffers) {
163
163
  this.renderer = renderer;
164
164
  this.iterableDiffers = iterableDiffers;
@@ -276,9 +276,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
276
276
  }] } });
277
277
 
278
278
  class CreateComponent {
279
+ Entities;
279
280
  CreateNewEntity = new EventEmitter();
280
281
  isCreateMaximized;
281
- Entities;
282
282
  constructor() {
283
283
  this.isCreateMaximized = true;
284
284
  }
@@ -300,10 +300,10 @@ class CreateComponent {
300
300
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CreateComponent, decorators: [{
301
301
  type: Component,
302
302
  args: [{ selector: 'amc-create', template: "<div *ngIf=\"isCreateMaximized\" class=\"callDisplay\">\r\n <div class=\"editor callHeader\">\r\n <label class=\"headerLabel\">\r\n <b>Create New</b>\r\n </label>\r\n <img class=\"ViewResizeImage\" src=\"/assets/images/section_collapse.png\" (click)=\"isCreateMaximized = false\"\r\n title=\"Collapse\" />\r\n </div>\r\n <div class=\"callBody\">\r\n <div *ngIf=\"Entities\" class=\"container\">\r\n <div *ngFor=\"let entity of getEntities()\" class=\"createNewLabel\" (click)=\"createNewEntity(entity)\"\r\n title=\"{{ getDisplay(Entities[entity]) }}\">\r\n <img class=\"createEntityImages\" src=\"{{ getImage(Entities[entity]) }}\" />\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n<div *ngIf=\"!isCreateMaximized\" class=\"callDisplay\">\r\n <div class=\"editor callHeader\">\r\n <label class=\"headerLabel\">\r\n <b>Create New</b>\r\n </label>\r\n <img class=\"ViewResizeImage\" src=\"/assets/images/section_expand.png\" (click)=\"isCreateMaximized = true\"\r\n title=\"Expand\" />\r\n </div>\r\n</div>\r\n", styles: [".callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.editor{font-size:.9em;width:70%;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}.createEntityImages{width:30px;height:25px;margin-bottom:5px;margin-top:5px;cursor:pointer;padding-left:5px}.createNewLabel{display:inline-block;margin-left:5%;margin-right:5%}.container{padding-right:0;padding-left:0;font-size:10px;text-align:center}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{background-color:#fff;display:grid}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}\n"] }]
303
- }], ctorParameters: function () { return []; }, propDecorators: { CreateNewEntity: [{
304
- type: Output
305
- }], Entities: [{
303
+ }], ctorParameters: function () { return []; }, propDecorators: { Entities: [{
306
304
  type: Input
305
+ }], CreateNewEntity: [{
306
+ type: Output
307
307
  }] } });
308
308
 
309
309
  class CurrentActivityComponent {
@@ -317,9 +317,9 @@ class CurrentActivityComponent {
317
317
  WhatObjectList;
318
318
  scenarioToCADMap;
319
319
  EventEmitter;
320
+ isActivityMaximized;
320
321
  eventList;
321
322
  debouncer;
322
- isActivityMaximized;
323
323
  constructor() {
324
324
  this.isActivityMaximized = true;
325
325
  this.EventEmitter = new EventEmitter();
@@ -535,6 +535,13 @@ class DurationComponent {
535
535
  }
536
536
  this.startCallCounter();
537
537
  }
538
+ ngOnDestroy() {
539
+ // clear the timer.
540
+ if (this._timerId != null) {
541
+ clearInterval(this._timerId);
542
+ this._timerId = null;
543
+ }
544
+ }
538
545
  /**
539
546
  * @ignore
540
547
  */
@@ -548,13 +555,6 @@ class DurationComponent {
548
555
  }, 1000);
549
556
  }
550
557
  }
551
- ngOnDestroy() {
552
- // clear the timer.
553
- if (this._timerId != null) {
554
- clearInterval(this._timerId);
555
- this._timerId = null;
556
- }
557
- }
558
558
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DurationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
559
559
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DurationComponent, selector: "amc-duration", inputs: { statusText: "statusText", callId: "callId", startTime: "startTime" }, ngImport: i0, template: "<div class=\"holdCallDurationDiv\">\r\n <input\r\n readonly\r\n class=\"block durationInput\"\r\n name=\"CallDuration\"\r\n type=\"text\"\r\n tabindex=\"-1\"\r\n title=\"Call Duration\"\r\n [value]=\"displayTime\"\r\n [attr.aria-labelledby]=\"labelledByText || null\">\r\n</div>\r\n", styles: [".durationInput:focus{outline-style:none}.durationInput{background-color:transparent;border:0px;width:100%;text-align:right}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}\n"] });
560
560
  }
@@ -602,6 +602,16 @@ class HoldTimerComponent {
602
602
  }
603
603
  this.startCallCounter();
604
604
  }
605
+ /**
606
+ * @ignore
607
+ */
608
+ ngOnDestroy() {
609
+ // clear the timer.
610
+ if (this._timerId != null) {
611
+ clearInterval(this._timerId);
612
+ this._timerId = null;
613
+ }
614
+ }
605
615
  /**
606
616
  * @ignore
607
617
  */
@@ -625,16 +635,6 @@ class HoldTimerComponent {
625
635
  }
626
636
  return pastTimeInSeconds;
627
637
  }
628
- /**
629
- * @ignore
630
- */
631
- ngOnDestroy() {
632
- // clear the timer.
633
- if (this._timerId != null) {
634
- clearInterval(this._timerId);
635
- this._timerId = null;
636
- }
637
- }
638
638
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HoldTimerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
639
639
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HoldTimerComponent, selector: "amc-holdTimer", inputs: { holdCounterData: "holdCounterData", statusText: "statusText", callId: "callId" }, ngImport: i0, template: "<div class=\"holdCallDurationDiv\">\r\n <input\r\n readonly\r\n class=\"holdCallDurationTimer\"\r\n name=\"HoldCallDuration/TotalHoldCallDuration\"\r\n type=\"text\"\r\n tabindex=\"-1\"\r\n title=\"Hold Duration\"\r\n [attr.aria-labelledby]=\"labelledByText || null\"\r\n [value]=\"displayTime\">\r\n</div>\r\n", styles: [".holdCallDurationTimer:focus{outline-style:none}.holdCallDurationDiv{float:left;margin-top:1px;margin-left:2px}.holdCallDurationTimer{background-color:transparent;border:0px;width:100%}.verticalDivider{margin-left:2px;float:left}\n"] });
640
640
  }
@@ -702,12 +702,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
702
702
  type: Input
703
703
  }] } });
704
704
 
705
+ /**
706
+ * enum for Value types of PROPERTY.
707
+ */
708
+ var ValueType;
709
+ (function (ValueType) {
710
+ ValueType[ValueType["STRING"] = 0] = "STRING";
711
+ ValueType[ValueType["COUNTER"] = 1] = "COUNTER";
712
+ })(ValueType || (ValueType = {}));
705
713
  /**
706
714
  * A helper method to make instances of [IProperty]
707
715
  */
708
716
  class Property {
709
- key;
710
- value;
711
717
  /**
712
718
  * KEY value to be displayed on component.
713
719
  */
@@ -726,13 +732,8 @@ class Property {
726
732
  * This flag decides if PROPERTY will be displayed on component or not.
727
733
  */
728
734
  visible;
729
- /**
730
- * Operation responsible for generating displayKey and dispkayValur from key and value.
731
- */
732
- displayOperation = () => {
733
- this.displayKey = this.key;
734
- this.displayValue = this.value;
735
- };
735
+ key;
736
+ value;
736
737
  /**
737
738
  *
738
739
  * @param key
@@ -744,22 +745,19 @@ class Property {
744
745
  constructor(key, value, visible, valueType, customOperation) {
745
746
  this.key = key;
746
747
  this.value = value;
747
- visible != null ? (this.visible = visible) : (this.visible = true);
748
- valueType != null
749
- ? (this.displayValueType = valueType)
750
- : (this.displayValueType = ValueType.STRING);
748
+ this.visible = visible || true;
749
+ this.displayValueType = valueType || ValueType.STRING;
751
750
  this.customOperations = customOperation;
752
751
  this.displayOperation();
753
752
  }
753
+ /**
754
+ * Operation responsible for generating displayKey and dispkayValur from key and value.
755
+ */
756
+ displayOperation = () => {
757
+ this.displayKey = this.key;
758
+ this.displayValue = this.value;
759
+ };
754
760
  }
755
- /**
756
- * enum for Value types of PROPERTY.
757
- */
758
- var ValueType;
759
- (function (ValueType) {
760
- ValueType[ValueType["STRING"] = 0] = "STRING";
761
- ValueType[ValueType["COUNTER"] = 1] = "COUNTER";
762
- })(ValueType || (ValueType = {}));
763
761
 
764
762
  /**
765
763
  * @ignore
@@ -810,6 +808,18 @@ class PropertyComponent {
810
808
  }
811
809
  this.initValues();
812
810
  }
811
+ /**
812
+ * @ignore
813
+ */
814
+ ngOnDestroy() {
815
+ if (this.property.displayValueType === ValueType.COUNTER) {
816
+ // clear the timer.
817
+ if (this._timerId != null) {
818
+ clearInterval(this._timerId);
819
+ this._timerId = null;
820
+ }
821
+ }
822
+ }
813
823
  /**
814
824
  * @ignore
815
825
  */
@@ -834,18 +844,6 @@ class PropertyComponent {
834
844
  }, 1000);
835
845
  }
836
846
  }
837
- /**
838
- * @ignore
839
- */
840
- ngOnDestroy() {
841
- if (this.property.displayValueType === ValueType.COUNTER) {
842
- // clear the timer.
843
- if (this._timerId != null) {
844
- clearInterval(this._timerId);
845
- this._timerId = null;
846
- }
847
- }
848
- }
849
847
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
850
848
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PropertyComponent, selector: "amc-property", inputs: { statusText: "statusText", callId: "callId", callType: "callType", property: "property" }, ngImport: i0, template: "<input\r\n readonly\r\n *ngIf=\"!property.customOperations\"\r\n class=\"displayData\"\r\n tabindex=\"0\"\r\n type=\"text\"\r\n [name]=\"processedDisplayValue\"\r\n [title]=\"title || null\"\r\n [attr.aria-labelledby]=\"labelledByText || null\"\r\n [value]=\"processedDisplayValue\"/>\r\n\r\n <input\r\n readonly\r\n *ngIf=\"property.customOperations\"\r\n class=\"cursor displayData\"\r\n type=\"text\"\r\n tabindex=\"0\"\r\n [name]=\"processedDisplayValue\"\r\n [title]=\"title || null\"\r\n [value]=\"processedDisplayValue\"\r\n [attr.aria-labelledby]=\"labelledByText || null\"\r\n (click)=\"property.customOperations.handler(property.customOperations.eventName, property.customOperations.eventMetadata)\" />\r\n", styles: ["input{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0}.displayData{border:0;outline:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
851
849
  }
@@ -871,22 +869,22 @@ class InteractionComponent {
871
869
  isAgentTyping = new EventEmitter();
872
870
  newMessage = new EventEmitter();
873
871
  /**
874
- * @ignore
875
- */
872
+ * @ignore
873
+ */
876
874
  minimized;
877
- set _minimized(value) {
878
- this.minimized = value;
879
- this.minimizedChanged.emit(value);
880
- }
881
- get _minimized() {
882
- return this.minimized;
883
- }
884
875
  /**
885
876
  * @ignore
886
877
  */
887
878
  constructor() {
888
879
  this._minimized = false;
889
880
  }
881
+ get _minimized() {
882
+ return this.minimized;
883
+ }
884
+ set _minimized(value) {
885
+ this.minimized = value;
886
+ this.minimizedChanged.emit(value);
887
+ }
890
888
  /**
891
889
  * @ignore
892
890
  */
@@ -928,7 +926,7 @@ class InteractionComponent {
928
926
  if (localStorage.getItem('focusedPanel') === null) {
929
927
  localStorage.setItem('focusedPanel', id);
930
928
  }
931
- else if (localStorage.getItem('focusedPanel') != id) {
929
+ else if (localStorage.getItem('focusedPanel') !== id) {
932
930
  document.getElementById(localStorage.getItem('focusedPanel')).className = 'AnswerCallFocused';
933
931
  localStorage.setItem('focusedPanel', id);
934
932
  }
@@ -957,7 +955,7 @@ class LoginComponent {
957
955
  if (!this.loginData.header) {
958
956
  this.loginData.header = 'Login';
959
957
  }
960
- for (let field of this.loginData.fields) {
958
+ for (const field of this.loginData.fields) {
961
959
  if (!field.isInvalid) {
962
960
  field.isInvalid = false;
963
961
  }
@@ -1166,20 +1164,40 @@ class SearchInformationComponent {
1166
1164
  singleMatchData;
1167
1165
  multiMatchData;
1168
1166
  shouldShowAllMultiMatchOptions;
1167
+ selectedMultiMatchIndex;
1169
1168
  constructor() {
1170
1169
  this.isSearchInformationMaximized = true;
1171
1170
  this.singleMatchData = null;
1172
1171
  this.multiMatchData = [];
1173
1172
  this.agentSelectedCallerInformation = new EventEmitter();
1173
+ this.selectedMultiMatchIndex = 0;
1174
1174
  }
1175
- ngOnChanges() {
1176
- this.renderData();
1175
+ ngOnChanges(changes) {
1176
+ if (changes['searchRecordList']) {
1177
+ this.renderData();
1178
+ }
1179
+ }
1180
+ onAgentSelectedCallerInformation(event) {
1181
+ try {
1182
+ const selectedId = event.target.id;
1183
+ const selectedIndex = this.searchRecordList.findIndex(r => r.id === selectedId);
1184
+ if (selectedIndex >= 0) {
1185
+ this.selectedMultiMatchIndex = selectedIndex;
1186
+ }
1187
+ this.shouldShowAllMultiMatchOptions = false;
1188
+ this.agentSelectedCallerInformation.emit({
1189
+ id: event.target.id,
1190
+ value: event.target.value
1191
+ });
1192
+ }
1193
+ catch (error) { }
1177
1194
  }
1178
1195
  renderData() {
1179
1196
  try {
1180
1197
  this.singleMatchData = null;
1181
1198
  this.multiMatchData = [];
1182
1199
  this.shouldShowAllMultiMatchOptions = false;
1200
+ this.selectedMultiMatchIndex = 0;
1183
1201
  if (this.searchRecordList.length === 1) {
1184
1202
  this.singleMatchData = this.parseSearchRecordForNameSingleMatch(this.searchRecordList[0]);
1185
1203
  }
@@ -1191,15 +1209,6 @@ class SearchInformationComponent {
1191
1209
  }
1192
1210
  catch (error) { }
1193
1211
  }
1194
- onAgentSelectedCallerInformation(event) {
1195
- try {
1196
- this.agentSelectedCallerInformation.emit({
1197
- id: event.target.id,
1198
- value: event.target.value
1199
- });
1200
- }
1201
- catch (error) { }
1202
- }
1203
1212
  parseSearchRecordForNameSingleMatch(searchRecord) {
1204
1213
  const results = [];
1205
1214
  try {
@@ -1297,11 +1306,11 @@ class SearchInformationComponent {
1297
1306
  return layoutInfo;
1298
1307
  }
1299
1308
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInformationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1300
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchInformationComponent, selector: "amc-search-information", inputs: { ActivityDetails: "ActivityDetails", searchLayout: "searchLayout", searchRecordList: "searchRecordList" }, outputs: { agentSelectedCallerInformation: "agentSelectedCallerInformation" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"callDisplay\">\r\n <div class=\"editor callHeader\">\r\n <label class=\"headerLabel\">\r\n <b>Caller Information</b>\r\n </label>\r\n <img\r\n title=\"Multiple Matches Available\"\r\n *ngIf=\"this.searchRecordList.length > 1\"\r\n src=\"../../assets/images/MultiMatchAlert.png\"\r\n class=\"multiMatchImg\"\r\n />\r\n <img\r\n *ngIf=\"isSearchInformationMaximized\"\r\n class=\"ViewResizeImage\"\r\n src=\"assets/images/section_collapse.png\"\r\n (click)=\"isSearchInformationMaximized = false\"\r\n title=\"Collapse\"\r\n />\r\n <img\r\n *ngIf=\"!isSearchInformationMaximized\"\r\n class=\"ViewResizeImage\"\r\n src=\"assets/images/section_expand.png\"\r\n (click)=\"isSearchInformationMaximized = true\"\r\n title=\"Expand\"\r\n />\r\n </div>\r\n <div class=\"callBody\" *ngIf=\"isSearchInformationMaximized\">\r\n <div *ngIf=\"this.searchRecordList.length > 1\">\r\n <span class=\"overflowWrapper\">\r\n <img\r\n class=\"CRMResultImageMultiMatch\"\r\n src=\"{{ this.multiMatchData[0][0][2] }}\"\r\n />\r\n <input\r\n id=\"{{ this.searchRecordList[0].id }}\"\r\n name=\"{{ this.multiMatchData[0][0][1] }}\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n readonly\r\n class=\"multiMatchLabel\"\r\n title=\"{{ this.multiMatchData[0][0][1] }}\"\r\n type=\"text\"\r\n value=\"{{ this.multiMatchData[0][0][1] }}\"\r\n />\r\n <span style=\"float: right; margin-right: 4%;\">\r\n <img\r\n *ngIf=\"!this.shouldShowAllMultiMatchOptions\"\r\n class=\"CRMExpandImage\"\r\n src=\"../../assets/images/down-arrow.png\"\r\n (click)=\"shouldShowAllMultiMatchOptions = true\"\r\n />\r\n <img\r\n *ngIf=\"this.shouldShowAllMultiMatchOptions\"\r\n class=\"CRMExpandImage\"\r\n src=\"../../assets/images/up-arrow.png\"\r\n (click)=\"shouldShowAllMultiMatchOptions = false\"\r\n />\r\n </span>\r\n </span>\r\n <div *ngIf=\"this.shouldShowAllMultiMatchOptions\">\r\n <div *ngFor=\"let i of this.multiMatchData | slice: 1; let index = index\">\r\n <span\r\n class=\"overflowWrapper\"\r\n >\r\n <img class=\"CRMResultImageMultiMatch\" src=\"{{ i[0][2] }}\" />\r\n <input\r\n id=\"{{ this.searchRecordList[index + 1].id }}\"\r\n name=\"{{ i[0][1] }}\"\r\n readonly\r\n class=\"multiMatchLabel\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n title=\"{{ i[0][1] }}\"\r\n type=\"text\"\r\n value=\"{{ i[0][1] }}\"\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Below is the HTML loaded on Single Match -->\r\n <div *ngIf=\"this.searchRecordList.length === 1\">\r\n <div\r\n class=\"editorFull displayDiv\"\r\n *ngFor=\"\r\n let i of this.singleMatchData | slice: 0:1;\r\n let index = index;\r\n let first = first\r\n \"\r\n >\r\n <span class=\"overflowWrapper\">\r\n <img\r\n id=\"EntityIcon\"\r\n src=\"{{ this.singleMatchIconSrc }}\"\r\n class=\"CRMResultImage\"\r\n />\r\n <input\r\n class=\"singleSearchResultSelect singleMatchFirstWrapper \"\r\n id=\"{{ this.searchRecordList[0].id }}\"\r\n [class.firstSingleMatchResult]=\"first\"\r\n value=\"{{ i[1] }}\"\r\n title=\"{{ i[1] }}\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n readonly\r\n />\r\n </span>\r\n </div>\r\n <div\r\n class=\"editorFull displayDiv\"\r\n *ngFor=\"\r\n let i of this.singleMatchData | slice: 1;\r\n let index = index;\r\n let first = first\r\n \"\r\n >\r\n <span class=\"overflowWrapper\">\r\n <label title=\"{{ i[0] }}\" class=\"displayLabelsTabbed\">{{\r\n i[0]\r\n }}</label>\r\n <input\r\n class=\"singleSearchResultSelect singleMatchTabbedItemsWrapper singleMatchLabel\"\r\n id=\"{{ this.searchRecordList[0].id }}\"\r\n value=\"{{ i[1] }}\"\r\n title=\"{{ i[1] }}\"\r\n readonly\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.displayDiv{width:100%;display:flex}.multiMatchImg{height:18px;margin-left:5px}.editor{font-size:.9em;width:70%;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editorFull{font-size:.9em;width:100%;text-align:left;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.CRMResultImage{width:18px;height:18px;margin-right:-5px;margin-top:-5px;margin-left:5px}.CRMResultImageMultiMatch{width:18px;height:18px;margin-right:2px;margin-left:5px;margin-top:-5px}.CRMExpandImage{width:6px;height:6px;cursor:pointer;margin-bottom:2px}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{margin-bottom:8px;background-color:#fff;display:grid}.multipleSearchResultSelect{border:1px solid #939598!important;border-radius:3px!important;width:96%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:5px 0% 5px 6px;cursor:pointer}.overflowWrapper{width:100%;overflow-x:hidden;overflow-y:hidden}.singleSearchResultSelect{border:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 0;outline:none}.wrapper{width:79%!important}.singleMatchFirstWrapper{cursor:pointer;border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(100% - 30px)}.singleMatchTabbedItemsWrapper{width:70%}.displayLabels{margin-left:5px;width:calc(20% + 5px);font-weight:400;margin-bottom:0;margin-top:0;outline:none;overflow:hidden;max-width:100px;vertical-align:middle}.displayLabelsMultiMatch{margin-left:5px;width:calc(20% + 5px);font-weight:400;margin-bottom:0;margin-top:0;outline:none}.displayLabelsTabbed{margin-left:5px;width:35%;font-weight:400;margin-bottom:0;margin-top:0;outline:none;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.matchedRecordsMargin{margin-top:1%}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}.firstSingleMatchResult{font-weight:700;border:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 5px;outline:none}.multiMatchLabel{border:0px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(95% - 45px)}.singleMatchLabel{border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(65% - 13px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
1309
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchInformationComponent, selector: "amc-search-information", inputs: { ActivityDetails: "ActivityDetails", searchLayout: "searchLayout", searchRecordList: "searchRecordList" }, outputs: { agentSelectedCallerInformation: "agentSelectedCallerInformation" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"callDisplay\">\r\n <div class=\"editor searchInfoHeader\">\r\n <label class=\"headerLabel\">\r\n <b>Caller Information</b>\r\n </label>\r\n <span\r\n *ngIf=\"this.searchRecordList.length > 1\"\r\n class=\"multiMatchBadge\"\r\n >{{ this.searchRecordList.length }} matches</span>\r\n <img\r\n *ngIf=\"isSearchInformationMaximized\"\r\n class=\"ViewResizeImage\"\r\n src=\"assets/images/section_collapse.png\"\r\n (click)=\"isSearchInformationMaximized = false\"\r\n title=\"Collapse\"\r\n />\r\n <img\r\n *ngIf=\"!isSearchInformationMaximized\"\r\n class=\"ViewResizeImage\"\r\n src=\"assets/images/section_expand.png\"\r\n (click)=\"isSearchInformationMaximized = true\"\r\n title=\"Expand\"\r\n />\r\n </div>\r\n <div class=\"callBody\" *ngIf=\"isSearchInformationMaximized\">\r\n <div *ngIf=\"this.searchRecordList.length > 1 && this.multiMatchData.length > 0\">\r\n <span class=\"overflowWrapper\">\r\n <img\r\n class=\"CRMResultImageMultiMatch\"\r\n src=\"{{ this.multiMatchData[selectedMultiMatchIndex]?.[0]?.[2] }}\"\r\n />\r\n <input\r\n id=\"{{ this.searchRecordList[selectedMultiMatchIndex].id }}\"\r\n name=\"{{ this.multiMatchData[selectedMultiMatchIndex]?.[0]?.[1] }}\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n readonly\r\n class=\"multiMatchLabel\"\r\n title=\"{{ this.multiMatchData[selectedMultiMatchIndex]?.[0]?.[1] }}\"\r\n type=\"text\"\r\n value=\"{{ this.multiMatchData[selectedMultiMatchIndex]?.[0]?.[1] }}\"\r\n />\r\n <span style=\"float: right; margin-right: 4%;\">\r\n <img\r\n *ngIf=\"!this.shouldShowAllMultiMatchOptions\"\r\n class=\"CRMExpandImage\"\r\n src=\"../../assets/images/down-arrow.png\"\r\n (click)=\"shouldShowAllMultiMatchOptions = true\"\r\n />\r\n <img\r\n *ngIf=\"this.shouldShowAllMultiMatchOptions\"\r\n class=\"CRMExpandImage\"\r\n src=\"../../assets/images/up-arrow.png\"\r\n (click)=\"shouldShowAllMultiMatchOptions = false\"\r\n />\r\n </span>\r\n </span>\r\n <div *ngIf=\"this.shouldShowAllMultiMatchOptions\">\r\n <div *ngFor=\"let i of this.multiMatchData; let index = index\">\r\n <span\r\n *ngIf=\"index !== selectedMultiMatchIndex && i?.[0]\"\r\n class=\"overflowWrapper\"\r\n >\r\n <img class=\"CRMResultImageMultiMatch\" src=\"{{ i[0][2] }}\" />\r\n <input\r\n id=\"{{ this.searchRecordList[index].id }}\"\r\n name=\"{{ i[0][1] }}\"\r\n readonly\r\n class=\"multiMatchLabel\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n title=\"{{ i[0][1] }}\"\r\n type=\"text\"\r\n value=\"{{ i[0][1] }}\"\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Below is the HTML loaded on Single Match -->\r\n <div *ngIf=\"this.searchRecordList.length === 1\">\r\n <div\r\n class=\"editorFull displayDiv\"\r\n *ngFor=\"\r\n let i of this.singleMatchData | slice: 0:1;\r\n let index = index;\r\n let first = first\r\n \"\r\n >\r\n <span class=\"overflowWrapper\">\r\n <img\r\n id=\"EntityIcon\"\r\n src=\"{{ this.singleMatchIconSrc }}\"\r\n class=\"CRMResultImage\"\r\n />\r\n <input\r\n class=\"singleSearchResultSelect singleMatchFirstWrapper \"\r\n id=\"{{ this.searchRecordList[0].id }}\"\r\n [class.firstSingleMatchResult]=\"first\"\r\n value=\"{{ i[1] }}\"\r\n title=\"{{ i[1] }}\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n readonly\r\n />\r\n </span>\r\n </div>\r\n <div\r\n class=\"editorFull displayDiv\"\r\n *ngFor=\"\r\n let i of this.singleMatchData | slice: 1;\r\n let index = index;\r\n let first = first\r\n \"\r\n >\r\n <span class=\"overflowWrapper\">\r\n <label title=\"{{ i[0] }}\" class=\"displayLabelsTabbed\">{{\r\n i[0]\r\n }}</label>\r\n <input\r\n class=\"singleSearchResultSelect singleMatchTabbedItemsWrapper singleMatchLabel\"\r\n id=\"{{ this.searchRecordList[0].id }}\"\r\n value=\"{{ i[1] }}\"\r\n title=\"{{ i[1] }}\"\r\n readonly\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".searchInfoHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important;display:flex;align-items:center}.displayDiv{width:100%;display:flex}.multiMatchBadge{font-size:.8em;font-weight:700;color:#000;background-color:transparent;border-radius:0;padding:0;margin-left:auto;white-space:nowrap;font-family:Arial,sans-serif}.editor{font-size:.9em;width:70%;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}.editorFull{font-size:.9em;width:100%;text-align:left;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.CRMResultImage{width:18px;height:18px;margin-right:-5px;margin-top:-5px;margin-left:5px}.CRMResultImageMultiMatch{width:18px;height:18px;margin-right:2px;margin-left:5px;margin-top:-5px}.CRMExpandImage{width:6px;height:6px;cursor:pointer;margin-bottom:2px}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{margin-bottom:8px;background-color:#fff;display:grid}.multipleSearchResultSelect{border:1px solid #939598!important;border-radius:3px!important;width:96%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:5px 0% 5px 6px;cursor:pointer}.overflowWrapper{width:100%;overflow-x:hidden;overflow-y:hidden}.singleSearchResultSelect{border:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 0;outline:none}.wrapper{width:79%!important}.singleMatchFirstWrapper{cursor:pointer;border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(100% - 30px)}.singleMatchTabbedItemsWrapper{width:70%}.displayLabels{margin-left:5px;width:calc(20% + 5px);font-weight:400;margin-bottom:0;margin-top:0;outline:none;overflow:hidden;max-width:100px;vertical-align:middle}.displayLabelsMultiMatch{margin-left:5px;width:calc(20% + 5px);font-weight:400;margin-bottom:0;margin-top:0;outline:none}.displayLabelsTabbed{margin-left:5px;width:35%;font-weight:400;margin-bottom:0;margin-top:0;outline:none;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.matchedRecordsMargin{margin-top:1%}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}.firstSingleMatchResult{font-weight:700;border:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 5px;outline:none}.multiMatchLabel{border:0px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(95% - 45px)}.singleMatchLabel{border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(65% - 13px)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }] });
1301
1310
  }
1302
1311
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchInformationComponent, decorators: [{
1303
1312
  type: Component,
1304
- args: [{ selector: 'amc-search-information', template: "<div class=\"callDisplay\">\r\n <div class=\"editor callHeader\">\r\n <label class=\"headerLabel\">\r\n <b>Caller Information</b>\r\n </label>\r\n <img\r\n title=\"Multiple Matches Available\"\r\n *ngIf=\"this.searchRecordList.length > 1\"\r\n src=\"../../assets/images/MultiMatchAlert.png\"\r\n class=\"multiMatchImg\"\r\n />\r\n <img\r\n *ngIf=\"isSearchInformationMaximized\"\r\n class=\"ViewResizeImage\"\r\n src=\"assets/images/section_collapse.png\"\r\n (click)=\"isSearchInformationMaximized = false\"\r\n title=\"Collapse\"\r\n />\r\n <img\r\n *ngIf=\"!isSearchInformationMaximized\"\r\n class=\"ViewResizeImage\"\r\n src=\"assets/images/section_expand.png\"\r\n (click)=\"isSearchInformationMaximized = true\"\r\n title=\"Expand\"\r\n />\r\n </div>\r\n <div class=\"callBody\" *ngIf=\"isSearchInformationMaximized\">\r\n <div *ngIf=\"this.searchRecordList.length > 1\">\r\n <span class=\"overflowWrapper\">\r\n <img\r\n class=\"CRMResultImageMultiMatch\"\r\n src=\"{{ this.multiMatchData[0][0][2] }}\"\r\n />\r\n <input\r\n id=\"{{ this.searchRecordList[0].id }}\"\r\n name=\"{{ this.multiMatchData[0][0][1] }}\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n readonly\r\n class=\"multiMatchLabel\"\r\n title=\"{{ this.multiMatchData[0][0][1] }}\"\r\n type=\"text\"\r\n value=\"{{ this.multiMatchData[0][0][1] }}\"\r\n />\r\n <span style=\"float: right; margin-right: 4%;\">\r\n <img\r\n *ngIf=\"!this.shouldShowAllMultiMatchOptions\"\r\n class=\"CRMExpandImage\"\r\n src=\"../../assets/images/down-arrow.png\"\r\n (click)=\"shouldShowAllMultiMatchOptions = true\"\r\n />\r\n <img\r\n *ngIf=\"this.shouldShowAllMultiMatchOptions\"\r\n class=\"CRMExpandImage\"\r\n src=\"../../assets/images/up-arrow.png\"\r\n (click)=\"shouldShowAllMultiMatchOptions = false\"\r\n />\r\n </span>\r\n </span>\r\n <div *ngIf=\"this.shouldShowAllMultiMatchOptions\">\r\n <div *ngFor=\"let i of this.multiMatchData | slice: 1; let index = index\">\r\n <span\r\n class=\"overflowWrapper\"\r\n >\r\n <img class=\"CRMResultImageMultiMatch\" src=\"{{ i[0][2] }}\" />\r\n <input\r\n id=\"{{ this.searchRecordList[index + 1].id }}\"\r\n name=\"{{ i[0][1] }}\"\r\n readonly\r\n class=\"multiMatchLabel\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n title=\"{{ i[0][1] }}\"\r\n type=\"text\"\r\n value=\"{{ i[0][1] }}\"\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Below is the HTML loaded on Single Match -->\r\n <div *ngIf=\"this.searchRecordList.length === 1\">\r\n <div\r\n class=\"editorFull displayDiv\"\r\n *ngFor=\"\r\n let i of this.singleMatchData | slice: 0:1;\r\n let index = index;\r\n let first = first\r\n \"\r\n >\r\n <span class=\"overflowWrapper\">\r\n <img\r\n id=\"EntityIcon\"\r\n src=\"{{ this.singleMatchIconSrc }}\"\r\n class=\"CRMResultImage\"\r\n />\r\n <input\r\n class=\"singleSearchResultSelect singleMatchFirstWrapper \"\r\n id=\"{{ this.searchRecordList[0].id }}\"\r\n [class.firstSingleMatchResult]=\"first\"\r\n value=\"{{ i[1] }}\"\r\n title=\"{{ i[1] }}\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n readonly\r\n />\r\n </span>\r\n </div>\r\n <div\r\n class=\"editorFull displayDiv\"\r\n *ngFor=\"\r\n let i of this.singleMatchData | slice: 1;\r\n let index = index;\r\n let first = first\r\n \"\r\n >\r\n <span class=\"overflowWrapper\">\r\n <label title=\"{{ i[0] }}\" class=\"displayLabelsTabbed\">{{\r\n i[0]\r\n }}</label>\r\n <input\r\n class=\"singleSearchResultSelect singleMatchTabbedItemsWrapper singleMatchLabel\"\r\n id=\"{{ this.searchRecordList[0].id }}\"\r\n value=\"{{ i[1] }}\"\r\n title=\"{{ i[1] }}\"\r\n readonly\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".callHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important}.displayDiv{width:100%;display:flex}.multiMatchImg{height:18px;margin-left:5px}.editor{font-size:.9em;width:70%;text-align:left;margin:4px 5% 0 0;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.editorFull{font-size:.9em;width:100%;text-align:left;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.CRMResultImage{width:18px;height:18px;margin-right:-5px;margin-top:-5px;margin-left:5px}.CRMResultImageMultiMatch{width:18px;height:18px;margin-right:2px;margin-left:5px;margin-top:-5px}.CRMExpandImage{width:6px;height:6px;cursor:pointer;margin-bottom:2px}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{margin-bottom:8px;background-color:#fff;display:grid}.multipleSearchResultSelect{border:1px solid #939598!important;border-radius:3px!important;width:96%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:5px 0% 5px 6px;cursor:pointer}.overflowWrapper{width:100%;overflow-x:hidden;overflow-y:hidden}.singleSearchResultSelect{border:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 0;outline:none}.wrapper{width:79%!important}.singleMatchFirstWrapper{cursor:pointer;border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(100% - 30px)}.singleMatchTabbedItemsWrapper{width:70%}.displayLabels{margin-left:5px;width:calc(20% + 5px);font-weight:400;margin-bottom:0;margin-top:0;outline:none;overflow:hidden;max-width:100px;vertical-align:middle}.displayLabelsMultiMatch{margin-left:5px;width:calc(20% + 5px);font-weight:400;margin-bottom:0;margin-top:0;outline:none}.displayLabelsTabbed{margin-left:5px;width:35%;font-weight:400;margin-bottom:0;margin-top:0;outline:none;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.matchedRecordsMargin{margin-top:1%}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}.firstSingleMatchResult{font-weight:700;border:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 5px;outline:none}.multiMatchLabel{border:0px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(95% - 45px)}.singleMatchLabel{border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(65% - 13px)}\n"] }]
1313
+ args: [{ selector: 'amc-search-information', template: "<div class=\"callDisplay\">\r\n <div class=\"editor searchInfoHeader\">\r\n <label class=\"headerLabel\">\r\n <b>Caller Information</b>\r\n </label>\r\n <span\r\n *ngIf=\"this.searchRecordList.length > 1\"\r\n class=\"multiMatchBadge\"\r\n >{{ this.searchRecordList.length }} matches</span>\r\n <img\r\n *ngIf=\"isSearchInformationMaximized\"\r\n class=\"ViewResizeImage\"\r\n src=\"assets/images/section_collapse.png\"\r\n (click)=\"isSearchInformationMaximized = false\"\r\n title=\"Collapse\"\r\n />\r\n <img\r\n *ngIf=\"!isSearchInformationMaximized\"\r\n class=\"ViewResizeImage\"\r\n src=\"assets/images/section_expand.png\"\r\n (click)=\"isSearchInformationMaximized = true\"\r\n title=\"Expand\"\r\n />\r\n </div>\r\n <div class=\"callBody\" *ngIf=\"isSearchInformationMaximized\">\r\n <div *ngIf=\"this.searchRecordList.length > 1 && this.multiMatchData.length > 0\">\r\n <span class=\"overflowWrapper\">\r\n <img\r\n class=\"CRMResultImageMultiMatch\"\r\n src=\"{{ this.multiMatchData[selectedMultiMatchIndex]?.[0]?.[2] }}\"\r\n />\r\n <input\r\n id=\"{{ this.searchRecordList[selectedMultiMatchIndex].id }}\"\r\n name=\"{{ this.multiMatchData[selectedMultiMatchIndex]?.[0]?.[1] }}\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n readonly\r\n class=\"multiMatchLabel\"\r\n title=\"{{ this.multiMatchData[selectedMultiMatchIndex]?.[0]?.[1] }}\"\r\n type=\"text\"\r\n value=\"{{ this.multiMatchData[selectedMultiMatchIndex]?.[0]?.[1] }}\"\r\n />\r\n <span style=\"float: right; margin-right: 4%;\">\r\n <img\r\n *ngIf=\"!this.shouldShowAllMultiMatchOptions\"\r\n class=\"CRMExpandImage\"\r\n src=\"../../assets/images/down-arrow.png\"\r\n (click)=\"shouldShowAllMultiMatchOptions = true\"\r\n />\r\n <img\r\n *ngIf=\"this.shouldShowAllMultiMatchOptions\"\r\n class=\"CRMExpandImage\"\r\n src=\"../../assets/images/up-arrow.png\"\r\n (click)=\"shouldShowAllMultiMatchOptions = false\"\r\n />\r\n </span>\r\n </span>\r\n <div *ngIf=\"this.shouldShowAllMultiMatchOptions\">\r\n <div *ngFor=\"let i of this.multiMatchData; let index = index\">\r\n <span\r\n *ngIf=\"index !== selectedMultiMatchIndex && i?.[0]\"\r\n class=\"overflowWrapper\"\r\n >\r\n <img class=\"CRMResultImageMultiMatch\" src=\"{{ i[0][2] }}\" />\r\n <input\r\n id=\"{{ this.searchRecordList[index].id }}\"\r\n name=\"{{ i[0][1] }}\"\r\n readonly\r\n class=\"multiMatchLabel\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n title=\"{{ i[0][1] }}\"\r\n type=\"text\"\r\n value=\"{{ i[0][1] }}\"\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- Below is the HTML loaded on Single Match -->\r\n <div *ngIf=\"this.searchRecordList.length === 1\">\r\n <div\r\n class=\"editorFull displayDiv\"\r\n *ngFor=\"\r\n let i of this.singleMatchData | slice: 0:1;\r\n let index = index;\r\n let first = first\r\n \"\r\n >\r\n <span class=\"overflowWrapper\">\r\n <img\r\n id=\"EntityIcon\"\r\n src=\"{{ this.singleMatchIconSrc }}\"\r\n class=\"CRMResultImage\"\r\n />\r\n <input\r\n class=\"singleSearchResultSelect singleMatchFirstWrapper \"\r\n id=\"{{ this.searchRecordList[0].id }}\"\r\n [class.firstSingleMatchResult]=\"first\"\r\n value=\"{{ i[1] }}\"\r\n title=\"{{ i[1] }}\"\r\n (click)=\"onAgentSelectedCallerInformation($event)\"\r\n readonly\r\n />\r\n </span>\r\n </div>\r\n <div\r\n class=\"editorFull displayDiv\"\r\n *ngFor=\"\r\n let i of this.singleMatchData | slice: 1;\r\n let index = index;\r\n let first = first\r\n \"\r\n >\r\n <span class=\"overflowWrapper\">\r\n <label title=\"{{ i[0] }}\" class=\"displayLabelsTabbed\">{{\r\n i[0]\r\n }}</label>\r\n <input\r\n class=\"singleSearchResultSelect singleMatchTabbedItemsWrapper singleMatchLabel\"\r\n id=\"{{ this.searchRecordList[0].id }}\"\r\n value=\"{{ i[1] }}\"\r\n title=\"{{ i[1] }}\"\r\n readonly\r\n />\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".searchInfoHeader{background-color:#f4f5fb!important;width:100%!important;margin-top:0!important;border:1px solid #939598!important;display:flex;align-items:center}.displayDiv{width:100%;display:flex}.multiMatchBadge{font-size:.8em;font-weight:700;color:#000;background-color:transparent;border-radius:0;padding:0;margin-left:auto;white-space:nowrap;font-family:Arial,sans-serif}.editor{font-size:.9em;width:70%;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}.editorFull{font-size:.9em;width:100%;text-align:left;font-family:Arial;white-space:nowrap;text-overflow:ellipsis;border:0;padding-top:2px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.CRMResultImage{width:18px;height:18px;margin-right:-5px;margin-top:-5px;margin-left:5px}.CRMResultImageMultiMatch{width:18px;height:18px;margin-right:2px;margin-left:5px;margin-top:-5px}.CRMExpandImage{width:6px;height:6px;cursor:pointer;margin-bottom:2px}.callBody{border:1px solid #939598;border-top-color:#939598;border-top-style:solid;border-top-width:1px;border-top:0;position:relative}.callDisplay{margin-bottom:8px;background-color:#fff;display:grid}.multipleSearchResultSelect{border:1px solid #939598!important;border-radius:3px!important;width:96%!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:5px 0% 5px 6px;cursor:pointer}.overflowWrapper{width:100%;overflow-x:hidden;overflow-y:hidden}.singleSearchResultSelect{border:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 0;outline:none}.wrapper{width:79%!important}.singleMatchFirstWrapper{cursor:pointer;border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(100% - 30px)}.singleMatchTabbedItemsWrapper{width:70%}.displayLabels{margin-left:5px;width:calc(20% + 5px);font-weight:400;margin-bottom:0;margin-top:0;outline:none;overflow:hidden;max-width:100px;vertical-align:middle}.displayLabelsMultiMatch{margin-left:5px;width:calc(20% + 5px);font-weight:400;margin-bottom:0;margin-top:0;outline:none}.displayLabelsTabbed{margin-left:5px;width:35%;font-weight:400;margin-bottom:0;margin-top:0;outline:none;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.matchedRecordsMargin{margin-top:1%}.ViewResizeImage{width:20px;height:20px;float:right;cursor:pointer}.headerLabel{margin-left:10px}.firstSingleMatchResult{font-weight:700;border:0px solid #939598!important;height:20px!important;text-align:left!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin:0 0% 0 5px;outline:none}.multiMatchLabel{border:0px;cursor:pointer;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(95% - 45px)}.singleMatchLabel{border:0px;outline:none;overflow:hidden;text-overflow:ellipsis;display:inline-block;width:calc(65% - 13px)}\n"] }]
1305
1314
  }], ctorParameters: function () { return []; }, propDecorators: { ActivityDetails: [{
1306
1315
  type: Input
1307
1316
  }], searchLayout: [{
@@ -1312,7 +1321,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
1312
1321
  type: Output
1313
1322
  }] } });
1314
1323
 
1315
- //import { ElementZoneStrategyFactory } from 'elements-zone-strategy';
1316
1324
  class UILibraryModule {
1317
1325
  injector;
1318
1326
  constructor(injector) {
@@ -1365,13 +1373,13 @@ class UILibraryModule {
1365
1373
  CreateComponent,
1366
1374
  RecentActivityComponent,
1367
1375
  CurrentActivityComponent,
1368
- SearchInformationComponent], imports: [BrowserModule, CommonModule, FormsModule, MatLegacyTabsModule], exports: [ScenarioComponent, DispositionComponent, LoginComponent, CreateComponent, RecentActivityComponent, CurrentActivityComponent, SearchInformationComponent] });
1369
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UILibraryModule, imports: [BrowserModule, CommonModule, FormsModule, MatLegacyTabsModule] });
1376
+ SearchInformationComponent], imports: [BrowserModule, CommonModule, FormsModule, MatTabsModule], exports: [ScenarioComponent, DispositionComponent, LoginComponent, CreateComponent, RecentActivityComponent, CurrentActivityComponent, SearchInformationComponent] });
1377
+ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UILibraryModule, imports: [BrowserModule, CommonModule, FormsModule, MatTabsModule] });
1370
1378
  }
1371
1379
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UILibraryModule, decorators: [{
1372
1380
  type: NgModule,
1373
1381
  args: [{
1374
- imports: [BrowserModule, CommonModule, FormsModule, MatLegacyTabsModule],
1382
+ imports: [BrowserModule, CommonModule, FormsModule, MatTabsModule],
1375
1383
  declarations: [
1376
1384
  InteractionComponent,
1377
1385
  ScenarioComponent,