@vgroup/dialbox 0.7.5 → 0.7.7

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 (8) hide show
  1. package/esm2020/lib/components/call-progress/call-progress.component.mjs +68 -24
  2. package/esm2020/lib/dialbox.component.mjs +9 -5
  3. package/esm2020/lib/service/incomeing-call-socket.service.mjs +5 -2
  4. package/fesm2015/vgroup-dialbox.mjs +81 -29
  5. package/fesm2015/vgroup-dialbox.mjs.map +1 -1
  6. package/fesm2020/vgroup-dialbox.mjs +79 -28
  7. package/fesm2020/vgroup-dialbox.mjs.map +1 -1
  8. package/package.json +1 -1
package/fesm2015/vgroup-dialbox.mjs CHANGED
@@ -1737,7 +1737,7 @@ class IncomeingCallSocketService {
1737
1737
  this.socket.onopen = () => {
1738
1738
  console.log("WebSocket connected");
1739
1739
  // Authenticate (if needed)
1740
- const authMessage = { "incomingCall": {
1740
+ let authMessage = { "incomingCall": {
1741
1741
  "userId": localStorage.getItem('userId'),
1742
1742
  "deviceId": deviceId
1743
1743
  } };
@@ -1747,6 +1747,9 @@ class IncomeingCallSocketService {
1747
1747
  // };
1748
1748
  setInterval(() => {
1749
1749
  var _a;
1750
+ if (!authMessage.incomingCall.userId) {
1751
+ authMessage["incomingCall"].userId = localStorage.getItem('userId');
1752
+ }
1750
1753
  (_a = this.socket) === null || _a === void 0 ? void 0 : _a.send(JSON.stringify(authMessage));
1751
1754
  }, 1000);
1752
1755
  };
@@ -1919,7 +1922,7 @@ class CallProgressComponent {
1919
1922
  this.deviceNumberList = this.callerIdList.map((res) => res.number);
1920
1923
  }
1921
1924
  ngOnChanges(changes) {
1922
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
1925
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
1923
1926
  if (this.userId) {
1924
1927
  this.extensionService.userId = this.userId;
1925
1928
  }
@@ -2081,12 +2084,15 @@ class CallProgressComponent {
2081
2084
  || (this.deviceNumberList.includes(callInfo === null || callInfo === void 0 ? void 0 : callInfo.to) && (callInfo === null || callInfo === void 0 ? void 0 : callInfo.direction) == 'incoming-call')) && !(callInfo === null || callInfo === void 0 ? void 0 : callInfo.isLeft) && (callInfo === null || callInfo === void 0 ? void 0 : callInfo.isHold));
2082
2085
  // this.isUnholdConferenceCall
2083
2086
  if ((holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.id) && !this.isUnholdConferenceCall) {
2084
- this.onholdOrUnholdParticipant({
2087
+ let holdInfo = this.onholdOrUnholdParticipant({
2085
2088
  participantId: [holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.id],
2086
2089
  conferenceId: holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.conferenceId,
2087
2090
  hold: false,
2088
2091
  mute: (holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.mute) || false
2089
2092
  });
2093
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
2094
+ console.error('holdInfo 387', holdInfo);
2095
+ }
2090
2096
  this.conferenceCallIDForParticipantList = holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.conferenceId;
2091
2097
  // this.getAllParticipants(holdCallInfo?.conferenceId);
2092
2098
  this.isUnholdConferenceCall = false;
@@ -2099,11 +2105,15 @@ class CallProgressComponent {
2099
2105
  selectedUser.IsUserInfoShow = true;
2100
2106
  if (selectedUser.businessNumber == true && !selectedUser.userInfoId) {
2101
2107
  if (!this.C2ConfoList[selectedUser.participantId]) {
2102
- this.extensionService.getUserInformation(selectedUser.participantId).subscribe((resInfo) => {
2103
- let index = this.currentCallList.findIndex((item) => (item === null || item === void 0 ? void 0 : item.participantId) == (selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.id));
2104
- this.currentCallList[index] = this.mapUserInfo(this.currentCallList[index], resInfo === null || resInfo === void 0 ? void 0 : resInfo.c2cInformation);
2105
- this.selectedUserInfo = this.currentCallList[index];
2106
- this.C2ConfoList[selectedUser.participantId] = this.currentCallList[index];
2108
+ this.extensionService.getUserInformation(selectedUser.participantId).subscribe({
2109
+ next: (resInfo) => {
2110
+ let index = this.currentCallList.findIndex((item) => (item === null || item === void 0 ? void 0 : item.participantId) == (selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.id));
2111
+ this.currentCallList[index] = this.mapUserInfo(this.currentCallList[index], resInfo === null || resInfo === void 0 ? void 0 : resInfo.c2cInformation);
2112
+ this.selectedUserInfo = this.currentCallList[index];
2113
+ this.C2ConfoList[selectedUser.participantId] = this.currentCallList[index];
2114
+ }, error: (err) => {
2115
+ console.error('Error fetching user info:', err);
2116
+ }
2107
2117
  });
2108
2118
  }
2109
2119
  else {
@@ -2176,6 +2186,9 @@ class CallProgressComponent {
2176
2186
  this.deviceNumberList = this.callerIdList.map((res) => res.number);
2177
2187
  this.rejoinHost(this.callAction);
2178
2188
  }
2189
+ if ((_7 = changes['newCallConference']) === null || _7 === void 0 ? void 0 : _7.currentValue) {
2190
+ this.CallToUnsavedNumber((_8 = this.newCallConference) === null || _8 === void 0 ? void 0 : _8.number, true);
2191
+ }
2179
2192
  }
2180
2193
  rejoinHost(callInfo) {
2181
2194
  return __awaiter(this, void 0, void 0, function* () {
@@ -2460,10 +2473,8 @@ class CallProgressComponent {
2460
2473
  conferenceId: c === null || c === void 0 ? void 0 : c.conferenceId,
2461
2474
  hold: c.isHold,
2462
2475
  mute: !(c === null || c === void 0 ? void 0 : c.isMute)
2463
- // conference: c.isConference || false
2464
2476
  });
2465
2477
  c.isMute = !c.isMute;
2466
- // await this.getAllParticipants(c?.conferenceId);
2467
2478
  this.cdr.detectChanges();
2468
2479
  });
2469
2480
  }
@@ -2476,13 +2487,15 @@ class CallProgressComponent {
2476
2487
  if ((call === null || call === void 0 ? void 0 : call.conferenceId) == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
2477
2488
  let participantInfo = call.participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.client)) || (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.to) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'incoming-call')) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
2478
2489
  if (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id) {
2479
- this.onholdOrUnholdParticipant({
2490
+ let holdInfo = this.onholdOrUnholdParticipant({
2480
2491
  participantId: [participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id],
2481
2492
  conferenceId: participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.conferenceId,
2482
2493
  hold: !(participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.isHold),
2483
2494
  mute: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.mute) || false
2484
2495
  });
2485
- // this.getAllParticipants(c?.conferenceId);
2496
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
2497
+ console.error('holdInfo 788', holdInfo);
2498
+ }
2486
2499
  }
2487
2500
  }
2488
2501
  else {
@@ -2490,12 +2503,15 @@ class CallProgressComponent {
2490
2503
  }
2491
2504
  }));
2492
2505
  if ((unHoldInfo === null || unHoldInfo === void 0 ? void 0 : unHoldInfo.id) && (unHoldInfo === null || unHoldInfo === void 0 ? void 0 : unHoldInfo.isHold) != (c === null || c === void 0 ? void 0 : c.isHold)) {
2493
- this.onholdOrUnholdParticipant({
2506
+ let holdInfo = this.onholdOrUnholdParticipant({
2494
2507
  participantId: [unHoldInfo === null || unHoldInfo === void 0 ? void 0 : unHoldInfo.id],
2495
2508
  conferenceId: unHoldInfo === null || unHoldInfo === void 0 ? void 0 : unHoldInfo.conferenceId,
2496
2509
  hold: !(unHoldInfo === null || unHoldInfo === void 0 ? void 0 : unHoldInfo.isHold),
2497
2510
  mute: (unHoldInfo === null || unHoldInfo === void 0 ? void 0 : unHoldInfo.mute) || false
2498
2511
  });
2512
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
2513
+ console.error('holdInfo 805', holdInfo);
2514
+ }
2499
2515
  this.isHoldBtnDisable = false;
2500
2516
  }
2501
2517
  else {
@@ -2503,12 +2519,15 @@ class CallProgressComponent {
2503
2519
  }
2504
2520
  }
2505
2521
  else {
2506
- this.onholdOrUnholdParticipant({
2522
+ let holdInfo = this.onholdOrUnholdParticipant({
2507
2523
  participantId: [c.id],
2508
2524
  conferenceId: c === null || c === void 0 ? void 0 : c.conferenceId,
2509
2525
  hold: !c.isHold,
2510
2526
  mute: (c === null || c === void 0 ? void 0 : c.mute) || false
2511
2527
  });
2528
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
2529
+ console.error('holdInfo 819', holdInfo);
2530
+ }
2512
2531
  this.isHoldBtnDisable = false;
2513
2532
  c.isHold = !c.isHold;
2514
2533
  }
@@ -2518,14 +2537,22 @@ class CallProgressComponent {
2518
2537
  });
2519
2538
  }
2520
2539
  onEndCall(c, isAllCallEnd, isContect) {
2540
+ var _a;
2521
2541
  return __awaiter(this, void 0, void 0, function* () {
2522
2542
  let participantId = isAllCallEnd ? 'all' : c.participantId || (c === null || c === void 0 ? void 0 : c.id);
2523
2543
  const currentConferenceCallInfo = this.getCurrentCallInfo();
2544
+ if (((_a = currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.participants) === null || _a === void 0 ? void 0 : _a.length) == 2) {
2545
+ participantId = 'all';
2546
+ }
2524
2547
  let conferenceId = c.conferenceId || (currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.conferenceId);
2525
2548
  let res = yield this.getRemoveParticipants(participantId, conferenceId);
2526
2549
  if ((res === null || res === void 0 ? void 0 : res.status) == 201 && (res === null || res === void 0 ? void 0 : res.message) == 'participant already left') {
2550
+ console.error('Participant already left', res);
2551
+ this.cdr.detectChanges();
2552
+ }
2553
+ else if ((res === null || res === void 0 ? void 0 : res.status) != 200) {
2554
+ console.error('Error removing participant', res);
2527
2555
  this.cdr.detectChanges();
2528
- // this.isUnholdConferenceCall = false;
2529
2556
  }
2530
2557
  this.conferenceCallIDForParticipantList = conferenceId;
2531
2558
  // await this.getAllParticipants(this.currentCall?.conferenceId);
@@ -2783,12 +2810,15 @@ class CallProgressComponent {
2783
2810
  });
2784
2811
  if (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id) {
2785
2812
  this.isUnholdConferenceCall = true;
2786
- yield this.onholdOrUnholdParticipant({
2813
+ let holdInfo = yield this.onholdOrUnholdParticipant({
2787
2814
  participantId: [ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id],
2788
2815
  conferenceId: ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.conferenceId,
2789
2816
  hold: true,
2790
2817
  mute: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.mute) || false
2791
2818
  });
2819
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
2820
+ console.error('holdInfo 1091', holdInfo);
2821
+ }
2792
2822
  this.isConferenceCallHold = true;
2793
2823
  }
2794
2824
  this.add(incomingCallInfo, ourNumberInfo, capturedCall);
@@ -2887,7 +2917,7 @@ class CallProgressComponent {
2887
2917
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
2888
2918
  return __awaiter(this, void 0, void 0, function* () {
2889
2919
  const phoneNumber = isUnsavedNumber ? contact : ((_b = (_a = contact === null || contact === void 0 ? void 0 : contact.numbersList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.number) || (contact === null || contact === void 0 ? void 0 : contact.phone);
2890
- let alreadyInCall = this.currentCallList.find((res) => (res.to == phoneNumber && (res === null || res === void 0 ? void 0 : res.direction) == 'incoming-call') || (res.from == phoneNumber && (res === null || res === void 0 ? void 0 : res.direction) == 'outgoing-call') && !(res === null || res === void 0 ? void 0 : res.isLeft));
2920
+ let alreadyInCall = this.currentCallList.find((res) => (res.to == phoneNumber && (res === null || res === void 0 ? void 0 : res.direction) == 'incoming-call') || (res.from == phoneNumber && (res === null || res === void 0 ? void 0 : res.direction) == 'outgoing-call' && (res === null || res === void 0 ? void 0 : res.host)) && !(res === null || res === void 0 ? void 0 : res.isLeft));
2891
2921
  if (alreadyInCall) {
2892
2922
  swal('Error', `Already ${phoneNumber} number in this call.`);
2893
2923
  return false;
@@ -2904,13 +2934,16 @@ class CallProgressComponent {
2904
2934
  countrycode: '',
2905
2935
  deviceId: this.deviceId
2906
2936
  });
2907
- this.onholdOrUnholdParticipant({
2937
+ let holdInfo = this.onholdOrUnholdParticipant({
2908
2938
  participantId: [(data === null || data === void 0 ? void 0 : data.participantId) || (data === null || data === void 0 ? void 0 : data.id)],
2909
2939
  conferenceId: (_g = this.currentCall) === null || _g === void 0 ? void 0 : _g.conferenceId,
2910
2940
  hold: null,
2911
2941
  mute: ((_h = this.currentCall) === null || _h === void 0 ? void 0 : _h.mute) || false,
2912
2942
  conference: true
2913
2943
  });
2944
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
2945
+ console.error('holdInfo 1218', holdInfo);
2946
+ }
2914
2947
  this.callData = {
2915
2948
  phone: phoneNumber,
2916
2949
  displayNum: phoneNumber,
@@ -2952,13 +2985,16 @@ class CallProgressComponent {
2952
2985
  this.showRingAnimation = true;
2953
2986
  this.isConference = true;
2954
2987
  participantIDs.push(data === null || data === void 0 ? void 0 : data.participantId);
2955
- yield this.onholdOrUnholdParticipant({
2988
+ let holdInfo = yield this.onholdOrUnholdParticipant({
2956
2989
  participantId: participantIDs,
2957
2990
  conferenceId: this.currentCall.conferenceId,
2958
2991
  hold: null,
2959
2992
  mute: null,
2960
2993
  conference: true
2961
2994
  });
2995
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
2996
+ console.error('holdInfo 1277', holdInfo);
2997
+ }
2962
2998
  // await this.getAllParticipants(this.currentCall.conferenceId);
2963
2999
  this.searchText = '';
2964
3000
  this.callData = {
@@ -3023,12 +3059,15 @@ class CallProgressComponent {
3023
3059
  ourNumberInfo = callInfo.participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.client)) || (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.to) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'incoming-call')) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
3024
3060
  }
3025
3061
  if (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id) {
3026
- yield this.onholdOrUnholdParticipant({
3062
+ let holdInfo = yield this.onholdOrUnholdParticipant({
3027
3063
  participantId: [ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id],
3028
3064
  conferenceId: ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.conferenceId,
3029
3065
  hold: true,
3030
3066
  mute: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.mute) || false
3031
3067
  });
3068
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
3069
+ console.error('holdInfo 1355', holdInfo);
3070
+ }
3032
3071
  this.isConferenceCallHold = true;
3033
3072
  this.onAddNewCall(callData, true);
3034
3073
  }
@@ -3169,12 +3208,15 @@ class CallProgressComponent {
3169
3208
  this.isHoldBtnDisable = true;
3170
3209
  let participantInfo = c.participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.client)) || (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.to) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'incoming-call')) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
3171
3210
  if (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id) {
3172
- yield this.onholdOrUnholdParticipant({
3211
+ let holdInfo = yield this.onholdOrUnholdParticipant({
3173
3212
  participantId: [participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id],
3174
3213
  conferenceId: participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.conferenceId,
3175
3214
  hold: false,
3176
3215
  mute: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.mute) || false
3177
3216
  });
3217
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
3218
+ console.error('holdInfo 1502', holdInfo);
3219
+ }
3178
3220
  // this.isConferenceCallHold = true;
3179
3221
  this.isHoldBtnDisable = false;
3180
3222
  this.conferenceCallIDForParticipantList = callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceId;
@@ -3184,23 +3226,29 @@ class CallProgressComponent {
3184
3226
  else {
3185
3227
  let participantInfo = c.participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.client)) || (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.to) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'incoming-call')) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
3186
3228
  if ((participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id) && !(participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.isHold)) {
3187
- yield this.onholdOrUnholdParticipant({
3229
+ let holdInfo = yield this.onholdOrUnholdParticipant({
3188
3230
  participantId: [participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id],
3189
3231
  conferenceId: participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.conferenceId,
3190
3232
  hold: true,
3191
3233
  mute: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.mute) || false
3192
3234
  });
3235
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
3236
+ console.error('holdInfo 1521', holdInfo);
3237
+ }
3193
3238
  this.isHoldBtnDisable = false;
3194
3239
  // this.isConferenceCallHold = true;
3195
3240
  }
3196
3241
  }
3197
3242
  if ((c === null || c === void 0 ? void 0 : c.isConference) && !(c === null || c === void 0 ? void 0 : c.isHold) && ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.conferenceId) == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
3198
- yield this.onholdOrUnholdParticipant({
3243
+ let holdInfo = yield this.onholdOrUnholdParticipant({
3199
3244
  participantId: [(c === null || c === void 0 ? void 0 : c.participantId) || (c === null || c === void 0 ? void 0 : c.id)],
3200
3245
  conferenceId: c.conferenceId,
3201
3246
  hold: true,
3202
3247
  mute: (c === null || c === void 0 ? void 0 : c.mute) || false
3203
3248
  });
3249
+ if ((holdInfo === null || holdInfo === void 0 ? void 0 : holdInfo.status) != 200) {
3250
+ console.error('holdInfo 1535', holdInfo);
3251
+ }
3204
3252
  // this.isConferenceCallHold = true;
3205
3253
  }
3206
3254
  }));
@@ -3615,10 +3663,10 @@ class CallProgressComponent {
3615
3663
  }
3616
3664
  }
3617
3665
  CallProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, deps: [{ token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: TwilioService }, { token: IpAddressService }, { token: IncomeingCallSocketService }], target: i0.ɵɵFactoryTarget.Component });
3618
- CallProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallProgressComponent, selector: "lib-call-progress", inputs: { callData: "callData", selectedCallerId: "selectedCallerId", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList", callerIdList: "callerIdList", newCallConference: "newCallConference", missCallInfo: "missCallInfo", deviceId: "deviceId", callAction: "callAction", conferenceCallInfo: "conferenceCallInfo" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated", isLoadershown: "isLoadershown", endIncomingCallEvent: "endIncomingCallEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n <div class=\"call-container\" *ngIf=\"!isMinimised && currentCallList?.length\"\r\n [ngClass]=\"{'collops': isCollops, 'incoming-call-container': isClickExpand, 'contacts-open': showContactsPanel }\">\r\n <div class=\"dialpad-alerts\"\r\n [ngClass]=\"{\r\n 'conference-alert': isConference && currentCall?.isConference,\r\n 'normal-call-alert': !isConference\r\n }\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\"\r\n [ngClass]=\"callNumberToast.type\"\r\n role=\"alert\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"flex-grow-1 text-left\">\r\n You'r calling\r\n <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\">\r\n Cancel Call\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- All type Call Hold list -->\r\n <div class=\"held-call-banner\"\r\n *ngIf=\"(currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)) || !isAllAccepted\">\r\n <ng-container *ngFor=\"let conf of currentCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"!conf?.isAcceptCall && currentCallList.length > 1 && deviceNumberList.includes(conf?.to) && twilioService.isShowIncomingCall\">\r\n <div class=\"held-info\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper border-radius-50\" [src]=\"conf?.image || 'assets/images/user.jpg'\" alt=\"\" width=\"35\" height=\"35\" />\r\n </div>\r\n <div class=\"held-caller\">\r\n <span class=\"held-label\">{{conf?.from}}</span>\r\n <span class=\"held-name\">{{conf?.fromName}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact receive-btn\" (click)=\"waitingCallAccept(conf)\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n <button class=\"conference-contact\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\" (click)=\"onRejectCall(conf)\"> call_end </span>\r\n </button>\r\n <div *ngIf=\"conf?.businessNumber\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"conf?.isConferenceHold && conferenceCallList.length > 1\">\r\n <div class=\"held-info\">\r\n <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\r\n <div class=\"held-caller\">\r\n <span class=\"held-label\">Hold</span>\r\n <span class=\"held-name\">{{conf?.conferenceName}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': conf?.isConferenceHold }\"\r\n (click)=\"swapCalls(conf,true)\" [disabled]=\"isHoldBtnDisable\">\r\n <span *ngIf=\"conf?.isConferenceHold\" class=\"material-symbols-outlined\" [title]=\"'Resume'\"> resume </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall(conf)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- For single incoming call -->\r\n <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall\">\r\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown\r\n Number'}}</span>\r\n </div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img || 'assets/images/user.jpg'\" alt=\"\"\r\n width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown\r\n Number' }}</h1>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n </div>\r\n <!-- Connecting overlay (shown after accept btn click, hidden on API response) -->\r\n <div class=\"connecting-overlay mt-auto\" *ngIf=\"isConnecting\">\r\n <div class=\"connecting-dots\">\r\n <span></span><span></span><span></span>\r\n </div>\r\n <p class=\"connecting-text\">Connecting...</p>\r\n </div>\r\n\r\n <div class=\"call-action-btns mt-auto\" *ngIf=\"!isConnecting\">\r\n <!-- <div class=\"call-action-btns mt-auto\"> -->\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\"\r\n [disabled]=\"isIncomingCallBtnDisable\" (click)=\"add(currentCallList[0])\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onRejectCall(currentCallList[0])\"> call_end\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- For single active call -->\r\n <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference) && currentCall?.isAcceptCall\"\r\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" *ngIf=\"!currentCall?.client\"\r\n [src]=\"currentCall?.direction == 'outgoing-call' ? currentCall?.toImage || 'assets/images/user.jpg' : currentCall?.fromImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <img class=\"avatar-img\" *ngIf=\"currentCall?.client\"\r\n [src]=\"currentCall?.direction == 'outgoing-call' ? currentCall?.fromImage || 'assets/images/user.jpg' : currentCall?.toImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 *ngIf=\"!currentCall?.client\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.direction == 'outgoing-call' ? currentCall?.toName || 'Unknown' :\r\n currentCall?.fromName || 'Unknown'}}</h1>\r\n <h1 *ngIf=\"currentCall?.client\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.direction == 'outgoing-call' ? currentCall?.fromName || 'Unknown' :\r\n currentCall?.toName || 'Unknown'}}</h1>\r\n <p *ngIf=\"!currentCall?.client\">{{ currentCall?.direction == 'outgoing-call' ? currentCall?.to || 'Unknown' : currentCall?.from ||\r\n 'Unknown'}}</p>\r\n <p *ngIf=\"currentCall?.client\">{{ currentCall?.direction == 'outgoing-call' ? currentCall?.from || 'Unknown' : currentCall?.to ||\r\n 'Unknown'}}</p>\r\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n </div>\r\n\r\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\"\r\n [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n <div class=\"flex align-items-center justify-content-evenly mb-3\">\r\n <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"toggleMute()\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\r\n </span>\r\n </button>\r\n <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n (click)=\"toggleContactsPanel(currentCall)\">\r\n <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n </button>\r\n </div>\r\n <div>\r\n <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- conference call view -->\r\n <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n <div class=\"conf-heading\">\r\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n <span class=\"conf-title\">Conference Call</span>\r\n </div>\r\n <div class=\"scroll-container\">\r\n <div class=\"scroll-text conf-name\">\r\n <ng-container *ngFor=\"let call of currentCallList; let i = index\">\r\n <ng-container *ngIf=\"!call?.isConferenceHold\">\r\n <span *ngIf=\"i != 0\">&</span>\r\n <span *ngIf=\"call?.client\">\r\n <ng-container *ngIf=\"!isSelfNumber(call) else selfNumber\">\r\n <span>{{call?.direction == 'outgoing-call' ? call?.fromName || call?.from :\r\n call?.toName || call?.to}}</span>\r\n </ng-container>\r\n <ng-template #selfNumber>\r\n <span>You</span>\r\n </ng-template>\r\n </span>\r\n <span *ngIf=\"!call?.client\">{{call?.direction == \"outgoing-call\" ? call?.toName || call?.to : call?.fromName || call?.from || 'Unknown number'}}</span>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"conf-timer\">{{ timer }}</div>\r\n <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\"\r\n [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"conf-actions\">\r\n <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute(true)\">\r\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\r\n </button>\r\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\r\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\r\n </button>\r\n <button class=\"circle-btn\" (click)=\"toggleContactsPanel(currentCall)\">\r\n <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n </button>\r\n </div>\r\n <div class=\"conf-end\">\r\n <button class=\"circle-btn danger\" (click)=\"endConfereneceCall(this.currentConferenceCall?.participants[0])\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\"\r\n d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Incoming call user details shown in model -->\r\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n <div class=\"mb-2 user-info-section\">\r\n <div class=\"text-center my-3\">\r\n <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n </div>\r\n <div class=\"mb-3\">\r\n <h5 class=\"text-white mb-1\">Name:</h5>\r\n <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Number:</div>\r\n <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2\">Email: </div>\r\n <div>{{selectedUserInfo?.email}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2 subject-text\" title=\"{{selectedUserInfo?.subject}}\">\r\n {{selectedUserInfo?.subject}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2 mb-1\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container\r\n *ngIf=\"selectedUserInfo?.image && selectedUserInfo?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedUserInfo?.image}}\" alt=\"\" width=\"150\" class=\"ml-2\" />\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"mb-1\">Message:</div>\r\n <div>\r\n <div class=\"text-container\" [class.expanded]=\"isExpanded\">{{selectedUserInfo?.message}}\r\n </div>\r\n <small class=\"toggle-btn\" *ngIf=\"showButton\" (click)=\"toggleText()\">{{ isExpanded ? 'See\r\n less' : 'See more' }}</small>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Point Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Source Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- contact list panel -->\r\n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n <div class=\"contacts-header\">\r\n <div>Participant</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel({}, true)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\r\n <div class=\"search-bar p-3 position-relative\">\r\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n <div class=\"search-contacts-list\">\r\n <ng-container *ngFor=\"let c of filteredList\">\r\n <div class=\"contact-item\" *ngIf=\"searchText\">\r\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number) }}{{ c?.numbersList[0]?.numberLabel ? ' (' + c.numbersList[0].numberLabel + ')' : '' }}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(c)\"\r\n *ngIf=\"!c?.IsConnected\" title=\"Add to conference call\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n </button>\r\n <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(c?.numbersList[0]?.number, true)\"\r\n *ngIf=\"!c?.IsConnected\" title=\"New Call\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!filteredList.length && isDirectCallOptionShow && searchText\">\r\n <div class=\"contact-item\">\r\n <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-title\">{{ searchText }}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"CallToUnsavedNumber(searchText)\"\r\n title=\"Add to conference call\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n </button>\r\n <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(searchText, true)\"\r\n title=\"New Call\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"contacts-list\">\r\n <div class=\"px-2\">\r\n <h5 class=\"mb-0 title\">{{selectedConfName}}'s active participants</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\">\r\n <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n <div class=\"contact-item\" *ngIf=\"!c?.isLeft\">\r\n <img class=\"contact-avatar\" *ngIf=\"!c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <img class=\"contact-avatar\" *ngIf=\"c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.fromImage || 'assets/images/user.jpg' : c?.toImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\" *ngIf=\"!c?.client\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' :\r\n c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"!c?.client\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n 'Unknown'}}</div>\r\n\r\n <div class=\"contact-name\" *ngIf=\"c?.client\">\r\n <ng-container *ngIf=\"!isSelfNumber(c) else selfNumber\">\r\n <span>{{c?.direction == 'outgoing-call' ? c?.fromName || 'Unknown' :\r\n c?.toName || 'Unknown'}}</span>\r\n </ng-container>\r\n <ng-template #selfNumber>\r\n <span>You</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"c?.client\">{{ c?.direction == 'outgoing-call' ? c?.from ||\r\n 'Unknown' : c?.to || 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.host\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"c?.joined && !c?.host\">\r\n <div class=\"connecting-wrapper mr-2\">\r\n <span class=\"ringing-text\">Ringing</span>\r\n <span class=\"dots\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!c?.joined || c?.host\">\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.isHold\" (click)=\"onMuteUser(c)\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n </button>\r\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.isHold }\"\r\n (click)=\"onHoldCall(c)\" *ngIf=\"!c?.host\" [disabled]=\"isHoldBtnDisable\">\r\n <span *ngIf=\"!c?.isHold\" class=\"material-symbols-outlined\" [title]=\"'Hold'\"> phone_paused</span>\r\n <span *ngIf=\"c?.isHold\" class=\"material-symbols-outlined\" [title]=\"'Resume'\"> resume </span>\r\n </button>\r\n </ng-container>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\"\r\n *ngIf=\"!c?.host\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall(c)\"\r\n *ngIf=\"c?.host && (deviceNumberList.includes(c?.from) || (deviceNumberList.includes(c?.to) && c?.direction == 'incoming-call'))\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <hr class=\"m-2\">\r\n <div class=\"mt-3 px-2\">\r\n <h5 class=\"mb-0 title\">Participant added to the call</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\">\r\n <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n <div class=\"contact-item\" *ngIf=\"c?.isLeft\">\r\n <img class=\"contact-avatar\" *ngIf=\"!c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <img class=\"contact-avatar\" *ngIf=\"c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.fromImage || 'assets/images/user.jpg' : c?.toImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\" *ngIf=\"!c?.client\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' :\r\n c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"!c?.client\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n 'Unknown'}}</div>\r\n <div class=\"contact-name\" *ngIf=\"c?.client\">{{c?.direction == 'outgoing-call' ? c?.fromName || 'Unknown' :\r\n c?.toName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"c?.client\">{{ c?.direction == 'outgoing-call' ? c?.from ||\r\n 'Unknown' : c?.to || 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.host\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <div class=\"connecting-wrapper\" *ngIf=\"c?.joined\">\r\n <span class=\"ringing-text\">Ringing</span>\r\n <span class=\"dots\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </div>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\"\r\n *ngIf=\"!c?.host && c?.joined\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <button class=\"contact-call-btn contact-add-btn\" *ngIf=\"!c?.client && !c?.joined\"\r\n (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n <span class=\"label\">Rejoin</span>\r\n </button>\r\n <button class=\"contact-call-btn contact-add-btn\" *ngIf=\"c?.client && !c?.joined\"\r\n (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.from : c?.to)\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n <span class=\"label\">Rejoin</span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Conference Warning Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showConferenceWarningModal\">\r\n <div class=\"modal-content warning-modal\">\r\n <div class=\"warning-icon\">\r\n <span class=\"material-symbols-outlined\">warning</span>\r\n </div>\r\n <h3>Conference Call Warning</h3>\r\n <p>\r\n Starting a new call will put the current conference on hold\r\n and cannot be merged later.\r\n </p>\r\n <div class=\"warning-actions\">\r\n <button class=\"cancel-btn\" (click)=\"cancelNewCall()\">\r\n Cancel\r\n </button>\r\n <button class=\"proceed-btn\" (click)=\"confirmNewCall()\">\r\n Proceed\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\r\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\r\n <div style=\"display: flex; width: 100%\">\r\n <div>\r\n <div class=\"min-call-animation\" id=\"call-avatar\">\r\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"min-callerDetails\">\r\n <div class=\"name\">\r\n {{callData.name}}\r\n </div>\r\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"min-btn-container\">\r\n <div class=\"min-timer\">{{timer}}</div>\r\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n</div>\r\n<!-- Call Disconnect Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showDisconnectModal\">\r\n <div class=\"modal-content p-3\">\r\n <div class=\"contacts-header p-0 pb-2\">\r\n <h4 class=\"title mb-0\">Call Disconnected</h4>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDisconnectModal = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"contant-body mb-2\">\r\n <p class=\"mt-2\">\r\n Exiting this call will not end the conference. The session will continue, and charges will incur to\r\n your\r\n account.\r\n </p>\r\n </div>\r\n <div class=\"button-group\">\r\n <div class=\"text-start d-flex align-items-center\">\r\n <label class=\"d-flex align-items-center mb-0 mr-2\">\r\n <input type=\"checkbox\" [(ngModel)]=\"isReasonChecked\" class=\"me-2\"/>\r\n </label>\r\n <div class=\"time-picker-24hr\">\r\n <!-- Hour picker -->\r\n <div class=\"custom-time-select\" [class.disabled-picker]=\"!isReasonChecked\">\r\n <div class=\"custom-time-display\" (click)=\"isReasonChecked && toggleHourDropdown()\">\r\n {{ leaveHour || 'HH' }}\r\n <span class=\"picker-arrow\">&#9660;</span>\r\n </div>\r\n <div class=\"custom-time-options\" *ngIf=\"showHourDropdown\">\r\n <div class=\"custom-time-option\"\r\n *ngFor=\"let h of hours\"\r\n [class.selected]=\"leaveHour === h\"\r\n (click)=\"selectHour(h)\">{{ h }}</div>\r\n </div>\r\n </div>\r\n <span class=\"time-sep\">:</span>\r\n <!-- Minute picker -->\r\n <div class=\"custom-time-select\" [class.disabled-picker]=\"!isReasonChecked\">\r\n <div class=\"custom-time-display\" (click)=\"isReasonChecked && toggleMinuteDropdown()\">\r\n {{ leaveMinute || 'MM' }}\r\n <span class=\"picker-arrow\">&#9660;</span>\r\n </div>\r\n <div class=\"custom-time-options\" *ngIf=\"showMinuteDropdown\">\r\n <div class=\"custom-time-option\"\r\n *ngFor=\"let m of minutes\"\r\n [class.selected]=\"leaveMinute === m\"\r\n (click)=\"selectMinute(m)\">{{ m }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"btn end-btn\" (click)=\"leaveConference()\">\r\n Leave\r\n </button>\r\n <button class=\"btn end-btn\" (click)=\"endConference()\" *ngIf=\"showEndAllButton\">\r\n End All\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;justify-content:center;align-items:center;z-index:1000;flex-flow:column;overflow-x:hidden;overflow-y:visible}.call-to-text{padding:6px 10px;border:1px solid #c2c2c2;border-radius:20px;font-size:13px}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important}.active-call{width:385px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.search-bar input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;outline:none;margin-bottom:10px}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}.callerDetails h1{width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.tx-black,.title{color:#000!important}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}.receive-btn{background-color:#28a745!important;color:#fff!important}.receive-btn span{color:#fff!important}.scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;padding-left:100%;animation:scroll-left 12s linear infinite;font-size:16px}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted #4b4b4b}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{width:100%;padding:5px 8px;height:100%;gap:8px;overflow-y:auto}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.incoming-banner{top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.modal-content .contacts-header{height:40px}.search-contacts-list{max-height:196px;overflow:auto;position:absolute;width:91%;background:white;z-index:1000}.contant-body p{font-size:14px;color:#5f6061}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.disabled{opacity:.5;pointer-events:none}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:37px;height:37px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:8px;cursor:pointer}.contact-add-btn{background-color:#2ecc71!important}.conference-hold-contact{display:inline-flex;align-items:center;gap:5px;background:#727070;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.user-info-section{width:100%;height:100%;overflow-y:auto;overflow-x:hidden!important}.user-info-section::-webkit-scrollbar{display:none}.toggle-btn{cursor:pointer}.text-container{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease}.text-container.expanded{-webkit-line-clamp:unset}.userName{font-family:FontAwesome}.subject-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.conference-contact{display:inline-flex;align-items:center;gap:5px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.organizer-label{padding:1px 5px;font-size:11px;border-radius:10px;border:1px solid #a0a0a0;margin-top:2px;background:#fcfcfc;color:#000}.custom-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;z-index:10000001;border-radius:21px}.modal-content{background:#ffffff;padding:25px;border-radius:8px;width:350px;text-align:center}.title{margin-bottom:15px;color:#d9534f}.message{margin-bottom:20px}.button-group{display:flex;justify-content:space-between}.btn{padding:8px 15px;border:none;border-radius:5px;cursor:pointer;font-weight:500}.end-btn{background-color:#dc3545;color:#fff;display:flex;align-items:center;font-size:13px}.leave-btn{background-color:#007bff;color:#fff}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.border-radius-50{border-radius:50%}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center;margin-top:35px}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}.warning-modal{background:white;width:360px;border-radius:18px;padding:24px;text-align:center;box-shadow:0 10px 30px #00000040}.warning-icon{margin-bottom:12px}.warning-icon .material-symbols-outlined{font-size:48px;color:#f59e0b}.warning-modal h3{margin-bottom:12px;font-size:20px;font-weight:600}.warning-modal p{color:#555;font-size:14px;line-height:1.5;margin-bottom:24px}.warning-actions{display:flex;justify-content:center;gap:12px}.cancel-btn,.proceed-btn{border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600}.cancel-btn{background:#e5e7eb;color:#111827}.proceed-btn{background:#234de8;color:#fff}.time-picker-24hr{display:flex;align-items:center;gap:4px}.time-sep{font-weight:700;font-size:16px;color:#333}.custom-time-select{position:relative;width:58px;-webkit-user-select:none;user-select:none}.custom-time-select.disabled-picker{opacity:.45;pointer-events:none}.custom-time-display{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border:1px solid #ced4da;border-radius:4px;background:#fff;font-size:13px;cursor:pointer;white-space:nowrap}.custom-time-display:hover{border-color:#234de8}.picker-arrow{font-size:9px;margin-left:4px;color:#666}.custom-time-options{position:fixed;background:#fff;border:1px solid #ced4da;border-radius:4px;max-height:160px;overflow-y:auto;z-index:99999999;min-width:58px;box-shadow:0 4px 12px #00000026}.custom-time-option{padding:5px 10px;font-size:13px;cursor:pointer;text-align:center}.custom-time-option:hover{background:#e8eeff;color:#234de8}.custom-time-option.selected{background:#234de8;color:#fff;font-weight:600}.dialpad-alerts{position:absolute;left:50%;transform:translate(-50%);width:calc(100% - 32px);z-index:9999999}.normal-call-alert{top:78px}.conference-alert{top:145px}.dialbox-pop1{background:#dff6dd!important;color:#1d4d1d!important;border-radius:10px;padding:10px 14px;font-size:14px;box-shadow:0 4px 12px #00000040;border:1px solid #b7dfc3}.btn-disc{border:none;background:transparent;color:#6b7280!important;font-size:13px;font-weight:500}.connecting-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 0 24px}.connecting-text{color:#ffffffe6;font-size:15px;font-weight:500;letter-spacing:.5px;margin:0}.connecting-dots{display:flex;gap:8px;align-items:center}.connecting-dots span{display:inline-block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.85);animation:connecting-bounce 1.2s infinite ease-in-out}.connecting-dots span:nth-child(1){animation-delay:0s}.connecting-dots span:nth-child(2){animation-delay:.2s}.connecting-dots span:nth-child(3){animation-delay:.4s}@keyframes connecting-bounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1.2);opacity:1}}.connecting-wrapper{display:flex;align-items:center;font-size:13px;color:#4caf50;margin-top:4px;font-weight:500}.ringing-text{margin-right:2px;font-size:11px}.dots span{animation:blink 1.4s infinite;opacity:0;font-size:16px}.dots span:nth-child(1){animation-delay:0s}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%{opacity:0}50%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
3666
+ CallProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallProgressComponent, selector: "lib-call-progress", inputs: { callData: "callData", selectedCallerId: "selectedCallerId", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList", callerIdList: "callerIdList", newCallConference: "newCallConference", missCallInfo: "missCallInfo", deviceId: "deviceId", callAction: "callAction", conferenceCallInfo: "conferenceCallInfo" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated", isLoadershown: "isLoadershown", endIncomingCallEvent: "endIncomingCallEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n <div class=\"call-container\" *ngIf=\"!isMinimised && currentCallList?.length\"\r\n [ngClass]=\"{'collops': isCollops, 'incoming-call-container': isClickExpand, 'contacts-open': showContactsPanel }\">\r\n <div class=\"dialpad-alerts\"\r\n [ngClass]=\"{\r\n 'conference-alert': isConference && currentCall?.isConference,\r\n 'normal-call-alert': !isConference\r\n }\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\"\r\n [ngClass]=\"callNumberToast.type\"\r\n role=\"alert\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"flex-grow-1 text-left\">\r\n You'r calling\r\n <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\"> Cancel Call </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- All type Call Hold list -->\r\n <div class=\"held-call-banner\"\r\n *ngIf=\"(currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)) || !isAllAccepted\">\r\n <ng-container *ngFor=\"let conf of currentCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"!conf?.isAcceptCall && currentCallList.length > 1 && deviceNumberList.includes(conf?.to) && twilioService.isShowIncomingCall\">\r\n <div class=\"held-info\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper border-radius-50\" [src]=\"conf?.image || 'assets/images/user.jpg'\" alt=\"\" width=\"35\" height=\"35\" />\r\n </div>\r\n <div class=\"held-caller\">\r\n <span class=\"held-label\">{{conf?.from}}</span>\r\n <span class=\"held-name\">{{conf?.fromName}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact receive-btn\" (click)=\"waitingCallAccept(conf)\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n <button class=\"conference-contact\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\" (click)=\"onRejectCall(conf)\"> call_end </span>\r\n </button>\r\n <div *ngIf=\"conf?.businessNumber\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"conf?.isConferenceHold && conferenceCallList.length > 1\">\r\n <div class=\"held-info\">\r\n <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\r\n <div class=\"held-caller\">\r\n <span class=\"held-label\">Hold</span>\r\n <span class=\"held-name\">{{conf?.conferenceName}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': conf?.isConferenceHold }\"\r\n (click)=\"swapCalls(conf,true)\" [disabled]=\"isHoldBtnDisable\">\r\n <span *ngIf=\"conf?.isConferenceHold\" class=\"material-symbols-outlined\" [title]=\"'Resume'\"> resume </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall(conf)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- For single incoming call -->\r\n <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall\">\r\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown Number'}}</span>\r\n </div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img || 'assets/images/user.jpg'\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown Number' }}</h1>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n </div>\r\n <!-- Connecting overlay (shown after accept btn click, hidden on API response) -->\r\n <div class=\"connecting-overlay mt-auto\" *ngIf=\"isConnecting\">\r\n <div class=\"connecting-dots\">\r\n <span></span><span></span><span></span>\r\n </div>\r\n <p class=\"connecting-text\">Connecting...</p>\r\n </div>\r\n\r\n <div class=\"call-action-btns mt-auto\" *ngIf=\"!isConnecting\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\"\r\n [disabled]=\"isIncomingCallBtnDisable\" (click)=\"add(currentCallList[0])\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onRejectCall(currentCallList[0])\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- For single active call -->\r\n <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference) && currentCall?.isAcceptCall\"\r\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" *ngIf=\"!currentCall?.client\"\r\n [src]=\"currentCall?.direction == 'outgoing-call' ? currentCall?.toImage || 'assets/images/user.jpg' : currentCall?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <img class=\"avatar-img\" *ngIf=\"currentCall?.client\"\r\n [src]=\"currentCall?.direction == 'outgoing-call' ? currentCall?.fromImage || 'assets/images/user.jpg' : currentCall?.toImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 *ngIf=\"!currentCall?.client\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.direction == 'outgoing-call' ? currentCall?.toName || 'Unknown' :\r\n currentCall?.fromName || 'Unknown'}}</h1>\r\n <h1 *ngIf=\"currentCall?.client\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.direction == 'outgoing-call' ? currentCall?.fromName || 'Unknown' :\r\n currentCall?.toName || 'Unknown'}}</h1>\r\n <p *ngIf=\"!currentCall?.client\">{{ currentCall?.direction == 'outgoing-call' ? currentCall?.to || 'Unknown' : currentCall?.from || 'Unknown'}}</p>\r\n <p *ngIf=\"currentCall?.client\">{{ currentCall?.direction == 'outgoing-call' ? currentCall?.from || 'Unknown' : currentCall?.to || 'Unknown'}}</p>\r\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n </div>\r\n\r\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n <div class=\"flex align-items-center justify-content-evenly mb-3\">\r\n <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"toggleMute()\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\r\n </span>\r\n </button>\r\n <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n (click)=\"toggleContactsPanel(currentCall)\">\r\n <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n </button>\r\n </div>\r\n <div>\r\n <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- conference call view -->\r\n <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n <div class=\"conf-heading\">\r\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n <span class=\"conf-title\">Conference Call</span>\r\n </div>\r\n <div class=\"scroll-container\">\r\n <div class=\"scroll-text conf-name\">\r\n <ng-container *ngFor=\"let call of currentCallList; let i = index\">\r\n <ng-container *ngIf=\"!call?.isConferenceHold\">\r\n <span *ngIf=\"i != 0\">&</span>\r\n <span *ngIf=\"call?.client\">\r\n <ng-container *ngIf=\"!isSelfNumber(call) else selfNumber\">\r\n <span>{{call?.direction == 'outgoing-call' ? call?.fromName || call?.from :\r\n call?.toName || call?.to}}</span>\r\n </ng-container>\r\n <ng-template #selfNumber>\r\n <span>You</span>\r\n </ng-template>\r\n </span>\r\n <span *ngIf=\"!call?.client\">{{call?.direction == \"outgoing-call\" ? call?.toName || call?.to : call?.fromName || call?.from || 'Unknown number'}}</span>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"conf-timer\">{{ timer }}</div>\r\n <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"conf-actions\">\r\n <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute(true)\">\r\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\r\n </button>\r\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\r\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\r\n </button>\r\n <button class=\"circle-btn\" (click)=\"toggleContactsPanel(currentCall)\">\r\n <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n </button>\r\n </div>\r\n <div class=\"conf-end\">\r\n <button class=\"circle-btn danger\" (click)=\"endConfereneceCall(currentConferenceCall?.participants[0])\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\"\r\n d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Incoming call user details shown in model -->\r\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n <div class=\"mb-2 user-info-section\">\r\n <div class=\"text-center my-3\">\r\n <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n </div>\r\n <div class=\"mb-3\">\r\n <h5 class=\"text-white mb-1\">Name:</h5>\r\n <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Number:</div>\r\n <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2\">Email: </div>\r\n <div>{{selectedUserInfo?.email}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2 subject-text\" title=\"{{selectedUserInfo?.subject}}\">\r\n {{selectedUserInfo?.subject}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2 mb-1\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container\r\n *ngIf=\"selectedUserInfo?.image && selectedUserInfo?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedUserInfo?.image}}\" alt=\"\" width=\"150\" class=\"ml-2\" />\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"mb-1\">Message:</div>\r\n <div>\r\n <div class=\"text-container\" [class.expanded]=\"isExpanded\">{{selectedUserInfo?.message}}\r\n </div>\r\n <small class=\"toggle-btn\" *ngIf=\"showButton\" (click)=\"toggleText()\">{{ isExpanded ? 'See\r\n less' : 'See more' }}</small>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Point Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Source Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- contact list panel -->\r\n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n <div class=\"contacts-header\">\r\n <div>Participant</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel({}, true)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\r\n <div class=\"search-bar p-3 position-relative\">\r\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n <div class=\"search-contacts-list\">\r\n <ng-container *ngFor=\"let c of filteredList\">\r\n <div class=\"contact-item\" *ngIf=\"searchText\">\r\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number) }}{{ c?.numbersList[0]?.numberLabel ? ' (' + c.numbersList[0].numberLabel + ')' : '' }}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(c)\"\r\n *ngIf=\"!c?.IsConnected\" title=\"Add to conference call\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n </button>\r\n <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(c?.numbersList[0]?.number, true)\"\r\n *ngIf=\"!c?.IsConnected\" title=\"New Call\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!filteredList.length && isDirectCallOptionShow && searchText\">\r\n <div class=\"contact-item\">\r\n <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-title\">{{ searchText }}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"CallToUnsavedNumber(searchText)\"\r\n title=\"Add to conference call\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n </button>\r\n <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(searchText, true)\"\r\n title=\"New Call\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"contacts-list\">\r\n <div class=\"px-2\">\r\n <h5 class=\"mb-0 title\">{{selectedConfName}}'s active participants</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\">\r\n <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n <div class=\"contact-item\" *ngIf=\"!c?.isLeft\">\r\n <img class=\"contact-avatar\" *ngIf=\"!c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <img class=\"contact-avatar\" *ngIf=\"c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.fromImage || 'assets/images/user.jpg' : c?.toImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\" *ngIf=\"!c?.client\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"!c?.client\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from || 'Unknown'}}</div>\r\n\r\n <div class=\"contact-name\" *ngIf=\"c?.client\">\r\n <ng-container *ngIf=\"!isSelfNumber(c) else selfNumber\">\r\n <span>{{c?.direction == 'outgoing-call' ? c?.fromName || 'Unknown' : c?.toName || 'Unknown'}}</span>\r\n </ng-container>\r\n <ng-template #selfNumber>\r\n <span>You</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"c?.client\">{{ c?.direction == 'outgoing-call' ? c?.from || 'Unknown' : c?.to || 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.host\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"c?.joined && !c?.host\">\r\n <div class=\"connecting-wrapper mr-2\">\r\n <span class=\"ringing-text\">Ringing</span>\r\n <span class=\"dots\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!c?.joined || c?.host\">\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.isHold\" (click)=\"onMuteUser(c)\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n </button>\r\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.isHold }\"\r\n (click)=\"onHoldCall(c)\" *ngIf=\"!c?.host\" [disabled]=\"isHoldBtnDisable\">\r\n <span *ngIf=\"!c?.isHold\" class=\"material-symbols-outlined\" [title]=\"'Hold'\"> phone_paused</span>\r\n <span *ngIf=\"c?.isHold\" class=\"material-symbols-outlined\" [title]=\"'Resume'\"> resume </span>\r\n </button>\r\n </ng-container>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\"\r\n *ngIf=\"!c?.host\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall(c)\"\r\n *ngIf=\"c?.host && (deviceNumberList.includes(c?.from) || (deviceNumberList.includes(c?.to) && c?.direction == 'incoming-call'))\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <hr class=\"m-2\">\r\n <div class=\"mt-3 px-2\">\r\n <h5 class=\"mb-0 title\">Participant added to the call</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\">\r\n <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n <div class=\"contact-item\" *ngIf=\"c?.isLeft\">\r\n <img class=\"contact-avatar\" *ngIf=\"!c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <img class=\"contact-avatar\" *ngIf=\"c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.fromImage || 'assets/images/user.jpg' : c?.toImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\" *ngIf=\"!c?.client\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"!c?.client\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from || 'Unknown'}}</div>\r\n <div class=\"contact-name\" *ngIf=\"c?.client\">{{c?.direction == 'outgoing-call' ? c?.fromName || 'Unknown' : c?.toName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"c?.client\">{{ c?.direction == 'outgoing-call' ? c?.from || 'Unknown' : c?.to || 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.host\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <div class=\"connecting-wrapper\" *ngIf=\"c?.joined\">\r\n <span class=\"ringing-text\">Ringing</span>\r\n <span class=\"dots\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </div>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\" *ngIf=\"!c?.host && c?.joined\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <button class=\"contact-call-btn contact-add-btn\" *ngIf=\"!c?.client && !c?.joined\"\r\n (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n <span class=\"label\">Rejoin</span>\r\n </button>\r\n <button class=\"contact-call-btn contact-add-btn\" *ngIf=\"c?.client && !c?.joined\"\r\n (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.from : c?.to)\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n <span class=\"label\">Rejoin</span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Conference Warning Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showConferenceWarningModal\">\r\n <div class=\"modal-content warning-modal\">\r\n <div class=\"warning-icon\">\r\n <span class=\"material-symbols-outlined\">warning</span>\r\n </div>\r\n <h3>Conference Call Warning</h3>\r\n <p>\r\n Starting a new call will put the current conference on hold\r\n and cannot be merged later.\r\n </p>\r\n <div class=\"warning-actions\">\r\n <button class=\"cancel-btn\" (click)=\"cancelNewCall()\">\r\n Cancel\r\n </button>\r\n <button class=\"proceed-btn\" (click)=\"confirmNewCall()\">\r\n Proceed\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\r\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\r\n <div style=\"display: flex; width: 100%\">\r\n <div>\r\n <div class=\"min-call-animation\" id=\"call-avatar\">\r\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"min-callerDetails\">\r\n <div class=\"name\">\r\n {{callData.name}}\r\n </div>\r\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"min-btn-container\">\r\n <div class=\"min-timer\">{{timer}}</div>\r\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n</div>\r\n<!-- Call Disconnect Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showDisconnectModal\">\r\n <div class=\"modal-content p-3\">\r\n <div class=\"contacts-header p-0 pb-2\">\r\n <h4 class=\"title mb-0\">Call Disconnected</h4>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDisconnectModal = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"contant-body mb-2\">\r\n <p class=\"mt-2\">\r\n Exiting this call will not end the conference. The session will continue, and charges will incur to\r\n your\r\n account.\r\n </p>\r\n </div>\r\n <div class=\"button-group\">\r\n <div class=\"text-start d-flex align-items-center\">\r\n <label class=\"d-flex align-items-center mb-0 mr-2\">\r\n <input type=\"checkbox\" [(ngModel)]=\"isReasonChecked\" class=\"me-2\"/>\r\n </label>\r\n <div class=\"time-picker-24hr\">\r\n <!-- Hour picker -->\r\n <div class=\"custom-time-select\" [class.disabled-picker]=\"!isReasonChecked\">\r\n <div class=\"custom-time-display\" (click)=\"isReasonChecked && toggleHourDropdown()\">\r\n {{ leaveHour || 'HH' }}\r\n <span class=\"picker-arrow\">&#9660;</span>\r\n </div>\r\n <div class=\"custom-time-options\" *ngIf=\"showHourDropdown\">\r\n <div class=\"custom-time-option\"\r\n *ngFor=\"let h of hours\"\r\n [class.selected]=\"leaveHour === h\"\r\n (click)=\"selectHour(h)\">{{ h }}</div>\r\n </div>\r\n </div>\r\n <span class=\"time-sep\">:</span>\r\n <!-- Minute picker -->\r\n <div class=\"custom-time-select\" [class.disabled-picker]=\"!isReasonChecked\">\r\n <div class=\"custom-time-display\" (click)=\"isReasonChecked && toggleMinuteDropdown()\">\r\n {{ leaveMinute || 'MM' }}\r\n <span class=\"picker-arrow\">&#9660;</span>\r\n </div>\r\n <div class=\"custom-time-options\" *ngIf=\"showMinuteDropdown\">\r\n <div class=\"custom-time-option\"\r\n *ngFor=\"let m of minutes\"\r\n [class.selected]=\"leaveMinute === m\"\r\n (click)=\"selectMinute(m)\">{{ m }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"btn end-btn\" (click)=\"leaveConference()\">\r\n Leave\r\n </button>\r\n <button class=\"btn end-btn\" (click)=\"endConference()\" *ngIf=\"showEndAllButton\">\r\n End All\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;justify-content:center;align-items:center;z-index:1000;flex-flow:column;overflow-x:hidden;overflow-y:visible}.call-to-text{padding:6px 10px;border:1px solid #c2c2c2;border-radius:20px;font-size:13px}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important}.active-call{width:385px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.search-bar input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;outline:none;margin-bottom:10px}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}.callerDetails h1{width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.tx-black,.title{color:#000!important}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}.receive-btn{background-color:#28a745!important;color:#fff!important}.receive-btn span{color:#fff!important}.scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;padding-left:100%;animation:scroll-left 12s linear infinite;font-size:16px}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted #4b4b4b}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{width:100%;padding:5px 8px;height:100%;gap:8px;overflow-y:auto}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.incoming-banner{top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.modal-content .contacts-header{height:40px}.search-contacts-list{max-height:196px;overflow:auto;position:absolute;width:91%;background:white;z-index:1000}.contant-body p{font-size:14px;color:#5f6061}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.disabled{opacity:.5;pointer-events:none}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:37px;height:37px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:8px;cursor:pointer}.contact-add-btn{background-color:#2ecc71!important}.conference-hold-contact{display:inline-flex;align-items:center;gap:5px;background:#727070;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.user-info-section{width:100%;height:100%;overflow-y:auto;overflow-x:hidden!important}.user-info-section::-webkit-scrollbar{display:none}.toggle-btn{cursor:pointer}.text-container{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease}.text-container.expanded{-webkit-line-clamp:unset}.userName{font-family:FontAwesome}.subject-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.conference-contact{display:inline-flex;align-items:center;gap:5px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.organizer-label{padding:1px 5px;font-size:11px;border-radius:10px;border:1px solid #a0a0a0;margin-top:2px;background:#fcfcfc;color:#000}.custom-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;z-index:10000001;border-radius:21px}.modal-content{background:#ffffff;padding:25px;border-radius:8px;width:350px;text-align:center}.title{margin-bottom:15px;color:#d9534f}.message{margin-bottom:20px}.button-group{display:flex;justify-content:space-between}.btn{padding:8px 15px;border:none;border-radius:5px;cursor:pointer;font-weight:500}.end-btn{background-color:#dc3545;color:#fff;display:flex;align-items:center;font-size:13px}.leave-btn{background-color:#007bff;color:#fff}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.border-radius-50{border-radius:50%}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center;margin-top:35px}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}.warning-modal{background:white;width:360px;border-radius:18px;padding:24px;text-align:center;box-shadow:0 10px 30px #00000040}.warning-icon{margin-bottom:12px}.warning-icon .material-symbols-outlined{font-size:48px;color:#f59e0b}.warning-modal h3{margin-bottom:12px;font-size:20px;font-weight:600}.warning-modal p{color:#555;font-size:14px;line-height:1.5;margin-bottom:24px}.warning-actions{display:flex;justify-content:center;gap:12px}.cancel-btn,.proceed-btn{border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600}.cancel-btn{background:#e5e7eb;color:#111827}.proceed-btn{background:#234de8;color:#fff}.time-picker-24hr{display:flex;align-items:center;gap:4px}.time-sep{font-weight:700;font-size:16px;color:#333}.custom-time-select{position:relative;width:58px;-webkit-user-select:none;user-select:none}.custom-time-select.disabled-picker{opacity:.45;pointer-events:none}.custom-time-display{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border:1px solid #ced4da;border-radius:4px;background:#fff;font-size:13px;cursor:pointer;white-space:nowrap}.custom-time-display:hover{border-color:#234de8}.picker-arrow{font-size:9px;margin-left:4px;color:#666}.custom-time-options{position:fixed;background:#fff;border:1px solid #ced4da;border-radius:4px;max-height:160px;overflow-y:auto;z-index:99999999;min-width:58px;box-shadow:0 4px 12px #00000026}.custom-time-option{padding:5px 10px;font-size:13px;cursor:pointer;text-align:center}.custom-time-option:hover{background:#e8eeff;color:#234de8}.custom-time-option.selected{background:#234de8;color:#fff;font-weight:600}.dialpad-alerts{position:absolute;left:50%;transform:translate(-50%);width:calc(100% - 32px);z-index:9999999}.normal-call-alert{top:78px}.conference-alert{top:145px}.dialbox-pop1{background:#dff6dd!important;color:#1d4d1d!important;border-radius:10px;padding:10px 14px;font-size:14px;box-shadow:0 4px 12px #00000040;border:1px solid #b7dfc3}.btn-disc{border:none;background:transparent;color:#6b7280!important;font-size:13px;font-weight:500}.connecting-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 0 24px}.connecting-text{color:#ffffffe6;font-size:15px;font-weight:500;letter-spacing:.5px;margin:0}.connecting-dots{display:flex;gap:8px;align-items:center}.connecting-dots span{display:inline-block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.85);animation:connecting-bounce 1.2s infinite ease-in-out}.connecting-dots span:nth-child(1){animation-delay:0s}.connecting-dots span:nth-child(2){animation-delay:.2s}.connecting-dots span:nth-child(3){animation-delay:.4s}@keyframes connecting-bounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1.2);opacity:1}}.connecting-wrapper{display:flex;align-items:center;font-size:13px;color:#4caf50;margin-top:4px;font-weight:500}.ringing-text{margin-right:2px;font-size:11px}.dots span{animation:blink 1.4s infinite;opacity:0;font-size:16px}.dots span:nth-child(1){animation-delay:0s}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%{opacity:0}50%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
3619
3667
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
3620
3668
  type: Component,
3621
- args: [{ selector: 'lib-call-progress', template: "<div class=\"d-flex\">\r\n <div class=\"call-container\" *ngIf=\"!isMinimised && currentCallList?.length\"\r\n [ngClass]=\"{'collops': isCollops, 'incoming-call-container': isClickExpand, 'contacts-open': showContactsPanel }\">\r\n <div class=\"dialpad-alerts\"\r\n [ngClass]=\"{\r\n 'conference-alert': isConference && currentCall?.isConference,\r\n 'normal-call-alert': !isConference\r\n }\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\"\r\n [ngClass]=\"callNumberToast.type\"\r\n role=\"alert\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"flex-grow-1 text-left\">\r\n You'r calling\r\n <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\">\r\n Cancel Call\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- All type Call Hold list -->\r\n <div class=\"held-call-banner\"\r\n *ngIf=\"(currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)) || !isAllAccepted\">\r\n <ng-container *ngFor=\"let conf of currentCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"!conf?.isAcceptCall && currentCallList.length > 1 && deviceNumberList.includes(conf?.to) && twilioService.isShowIncomingCall\">\r\n <div class=\"held-info\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper border-radius-50\" [src]=\"conf?.image || 'assets/images/user.jpg'\" alt=\"\" width=\"35\" height=\"35\" />\r\n </div>\r\n <div class=\"held-caller\">\r\n <span class=\"held-label\">{{conf?.from}}</span>\r\n <span class=\"held-name\">{{conf?.fromName}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact receive-btn\" (click)=\"waitingCallAccept(conf)\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n <button class=\"conference-contact\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\" (click)=\"onRejectCall(conf)\"> call_end </span>\r\n </button>\r\n <div *ngIf=\"conf?.businessNumber\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"conf?.isConferenceHold && conferenceCallList.length > 1\">\r\n <div class=\"held-info\">\r\n <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\r\n <div class=\"held-caller\">\r\n <span class=\"held-label\">Hold</span>\r\n <span class=\"held-name\">{{conf?.conferenceName}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': conf?.isConferenceHold }\"\r\n (click)=\"swapCalls(conf,true)\" [disabled]=\"isHoldBtnDisable\">\r\n <span *ngIf=\"conf?.isConferenceHold\" class=\"material-symbols-outlined\" [title]=\"'Resume'\"> resume </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall(conf)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- For single incoming call -->\r\n <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall\">\r\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown\r\n Number'}}</span>\r\n </div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img || 'assets/images/user.jpg'\" alt=\"\"\r\n width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown\r\n Number' }}</h1>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n </div>\r\n <!-- Connecting overlay (shown after accept btn click, hidden on API response) -->\r\n <div class=\"connecting-overlay mt-auto\" *ngIf=\"isConnecting\">\r\n <div class=\"connecting-dots\">\r\n <span></span><span></span><span></span>\r\n </div>\r\n <p class=\"connecting-text\">Connecting...</p>\r\n </div>\r\n\r\n <div class=\"call-action-btns mt-auto\" *ngIf=\"!isConnecting\">\r\n <!-- <div class=\"call-action-btns mt-auto\"> -->\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\"\r\n [disabled]=\"isIncomingCallBtnDisable\" (click)=\"add(currentCallList[0])\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onRejectCall(currentCallList[0])\"> call_end\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- For single active call -->\r\n <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference) && currentCall?.isAcceptCall\"\r\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" *ngIf=\"!currentCall?.client\"\r\n [src]=\"currentCall?.direction == 'outgoing-call' ? currentCall?.toImage || 'assets/images/user.jpg' : currentCall?.fromImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <img class=\"avatar-img\" *ngIf=\"currentCall?.client\"\r\n [src]=\"currentCall?.direction == 'outgoing-call' ? currentCall?.fromImage || 'assets/images/user.jpg' : currentCall?.toImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 *ngIf=\"!currentCall?.client\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.direction == 'outgoing-call' ? currentCall?.toName || 'Unknown' :\r\n currentCall?.fromName || 'Unknown'}}</h1>\r\n <h1 *ngIf=\"currentCall?.client\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.direction == 'outgoing-call' ? currentCall?.fromName || 'Unknown' :\r\n currentCall?.toName || 'Unknown'}}</h1>\r\n <p *ngIf=\"!currentCall?.client\">{{ currentCall?.direction == 'outgoing-call' ? currentCall?.to || 'Unknown' : currentCall?.from ||\r\n 'Unknown'}}</p>\r\n <p *ngIf=\"currentCall?.client\">{{ currentCall?.direction == 'outgoing-call' ? currentCall?.from || 'Unknown' : currentCall?.to ||\r\n 'Unknown'}}</p>\r\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n </div>\r\n\r\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\"\r\n [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n <div class=\"flex align-items-center justify-content-evenly mb-3\">\r\n <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"toggleMute()\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\r\n </span>\r\n </button>\r\n <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n (click)=\"toggleContactsPanel(currentCall)\">\r\n <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n </button>\r\n </div>\r\n <div>\r\n <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- conference call view -->\r\n <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n <div class=\"conf-heading\">\r\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n <span class=\"conf-title\">Conference Call</span>\r\n </div>\r\n <div class=\"scroll-container\">\r\n <div class=\"scroll-text conf-name\">\r\n <ng-container *ngFor=\"let call of currentCallList; let i = index\">\r\n <ng-container *ngIf=\"!call?.isConferenceHold\">\r\n <span *ngIf=\"i != 0\">&</span>\r\n <span *ngIf=\"call?.client\">\r\n <ng-container *ngIf=\"!isSelfNumber(call) else selfNumber\">\r\n <span>{{call?.direction == 'outgoing-call' ? call?.fromName || call?.from :\r\n call?.toName || call?.to}}</span>\r\n </ng-container>\r\n <ng-template #selfNumber>\r\n <span>You</span>\r\n </ng-template>\r\n </span>\r\n <span *ngIf=\"!call?.client\">{{call?.direction == \"outgoing-call\" ? call?.toName || call?.to : call?.fromName || call?.from || 'Unknown number'}}</span>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"conf-timer\">{{ timer }}</div>\r\n <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\"\r\n [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"conf-actions\">\r\n <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute(true)\">\r\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\r\n </button>\r\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\r\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\r\n </button>\r\n <button class=\"circle-btn\" (click)=\"toggleContactsPanel(currentCall)\">\r\n <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n </button>\r\n </div>\r\n <div class=\"conf-end\">\r\n <button class=\"circle-btn danger\" (click)=\"endConfereneceCall(this.currentConferenceCall?.participants[0])\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\"\r\n d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Incoming call user details shown in model -->\r\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n <div class=\"mb-2 user-info-section\">\r\n <div class=\"text-center my-3\">\r\n <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n </div>\r\n <div class=\"mb-3\">\r\n <h5 class=\"text-white mb-1\">Name:</h5>\r\n <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Number:</div>\r\n <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2\">Email: </div>\r\n <div>{{selectedUserInfo?.email}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2 subject-text\" title=\"{{selectedUserInfo?.subject}}\">\r\n {{selectedUserInfo?.subject}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2 mb-1\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container\r\n *ngIf=\"selectedUserInfo?.image && selectedUserInfo?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedUserInfo?.image}}\" alt=\"\" width=\"150\" class=\"ml-2\" />\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"mb-1\">Message:</div>\r\n <div>\r\n <div class=\"text-container\" [class.expanded]=\"isExpanded\">{{selectedUserInfo?.message}}\r\n </div>\r\n <small class=\"toggle-btn\" *ngIf=\"showButton\" (click)=\"toggleText()\">{{ isExpanded ? 'See\r\n less' : 'See more' }}</small>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Point Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Source Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- contact list panel -->\r\n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n <div class=\"contacts-header\">\r\n <div>Participant</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel({}, true)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\r\n <div class=\"search-bar p-3 position-relative\">\r\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n <div class=\"search-contacts-list\">\r\n <ng-container *ngFor=\"let c of filteredList\">\r\n <div class=\"contact-item\" *ngIf=\"searchText\">\r\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number) }}{{ c?.numbersList[0]?.numberLabel ? ' (' + c.numbersList[0].numberLabel + ')' : '' }}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(c)\"\r\n *ngIf=\"!c?.IsConnected\" title=\"Add to conference call\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n </button>\r\n <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(c?.numbersList[0]?.number, true)\"\r\n *ngIf=\"!c?.IsConnected\" title=\"New Call\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!filteredList.length && isDirectCallOptionShow && searchText\">\r\n <div class=\"contact-item\">\r\n <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-title\">{{ searchText }}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"CallToUnsavedNumber(searchText)\"\r\n title=\"Add to conference call\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n </button>\r\n <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(searchText, true)\"\r\n title=\"New Call\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"contacts-list\">\r\n <div class=\"px-2\">\r\n <h5 class=\"mb-0 title\">{{selectedConfName}}'s active participants</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\">\r\n <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n <div class=\"contact-item\" *ngIf=\"!c?.isLeft\">\r\n <img class=\"contact-avatar\" *ngIf=\"!c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <img class=\"contact-avatar\" *ngIf=\"c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.fromImage || 'assets/images/user.jpg' : c?.toImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\" *ngIf=\"!c?.client\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' :\r\n c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"!c?.client\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n 'Unknown'}}</div>\r\n\r\n <div class=\"contact-name\" *ngIf=\"c?.client\">\r\n <ng-container *ngIf=\"!isSelfNumber(c) else selfNumber\">\r\n <span>{{c?.direction == 'outgoing-call' ? c?.fromName || 'Unknown' :\r\n c?.toName || 'Unknown'}}</span>\r\n </ng-container>\r\n <ng-template #selfNumber>\r\n <span>You</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"c?.client\">{{ c?.direction == 'outgoing-call' ? c?.from ||\r\n 'Unknown' : c?.to || 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.host\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"c?.joined && !c?.host\">\r\n <div class=\"connecting-wrapper mr-2\">\r\n <span class=\"ringing-text\">Ringing</span>\r\n <span class=\"dots\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!c?.joined || c?.host\">\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.isHold\" (click)=\"onMuteUser(c)\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n </button>\r\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.isHold }\"\r\n (click)=\"onHoldCall(c)\" *ngIf=\"!c?.host\" [disabled]=\"isHoldBtnDisable\">\r\n <span *ngIf=\"!c?.isHold\" class=\"material-symbols-outlined\" [title]=\"'Hold'\"> phone_paused</span>\r\n <span *ngIf=\"c?.isHold\" class=\"material-symbols-outlined\" [title]=\"'Resume'\"> resume </span>\r\n </button>\r\n </ng-container>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\"\r\n *ngIf=\"!c?.host\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall(c)\"\r\n *ngIf=\"c?.host && (deviceNumberList.includes(c?.from) || (deviceNumberList.includes(c?.to) && c?.direction == 'incoming-call'))\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <hr class=\"m-2\">\r\n <div class=\"mt-3 px-2\">\r\n <h5 class=\"mb-0 title\">Participant added to the call</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\">\r\n <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n <div class=\"contact-item\" *ngIf=\"c?.isLeft\">\r\n <img class=\"contact-avatar\" *ngIf=\"!c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <img class=\"contact-avatar\" *ngIf=\"c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.fromImage || 'assets/images/user.jpg' : c?.toImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\" *ngIf=\"!c?.client\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' :\r\n c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"!c?.client\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n 'Unknown'}}</div>\r\n <div class=\"contact-name\" *ngIf=\"c?.client\">{{c?.direction == 'outgoing-call' ? c?.fromName || 'Unknown' :\r\n c?.toName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"c?.client\">{{ c?.direction == 'outgoing-call' ? c?.from ||\r\n 'Unknown' : c?.to || 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.host\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <div class=\"connecting-wrapper\" *ngIf=\"c?.joined\">\r\n <span class=\"ringing-text\">Ringing</span>\r\n <span class=\"dots\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </div>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\"\r\n *ngIf=\"!c?.host && c?.joined\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <button class=\"contact-call-btn contact-add-btn\" *ngIf=\"!c?.client && !c?.joined\"\r\n (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n <span class=\"label\">Rejoin</span>\r\n </button>\r\n <button class=\"contact-call-btn contact-add-btn\" *ngIf=\"c?.client && !c?.joined\"\r\n (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.from : c?.to)\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n <span class=\"label\">Rejoin</span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Conference Warning Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showConferenceWarningModal\">\r\n <div class=\"modal-content warning-modal\">\r\n <div class=\"warning-icon\">\r\n <span class=\"material-symbols-outlined\">warning</span>\r\n </div>\r\n <h3>Conference Call Warning</h3>\r\n <p>\r\n Starting a new call will put the current conference on hold\r\n and cannot be merged later.\r\n </p>\r\n <div class=\"warning-actions\">\r\n <button class=\"cancel-btn\" (click)=\"cancelNewCall()\">\r\n Cancel\r\n </button>\r\n <button class=\"proceed-btn\" (click)=\"confirmNewCall()\">\r\n Proceed\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\r\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\r\n <div style=\"display: flex; width: 100%\">\r\n <div>\r\n <div class=\"min-call-animation\" id=\"call-avatar\">\r\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"min-callerDetails\">\r\n <div class=\"name\">\r\n {{callData.name}}\r\n </div>\r\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"min-btn-container\">\r\n <div class=\"min-timer\">{{timer}}</div>\r\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n</div>\r\n<!-- Call Disconnect Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showDisconnectModal\">\r\n <div class=\"modal-content p-3\">\r\n <div class=\"contacts-header p-0 pb-2\">\r\n <h4 class=\"title mb-0\">Call Disconnected</h4>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDisconnectModal = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"contant-body mb-2\">\r\n <p class=\"mt-2\">\r\n Exiting this call will not end the conference. The session will continue, and charges will incur to\r\n your\r\n account.\r\n </p>\r\n </div>\r\n <div class=\"button-group\">\r\n <div class=\"text-start d-flex align-items-center\">\r\n <label class=\"d-flex align-items-center mb-0 mr-2\">\r\n <input type=\"checkbox\" [(ngModel)]=\"isReasonChecked\" class=\"me-2\"/>\r\n </label>\r\n <div class=\"time-picker-24hr\">\r\n <!-- Hour picker -->\r\n <div class=\"custom-time-select\" [class.disabled-picker]=\"!isReasonChecked\">\r\n <div class=\"custom-time-display\" (click)=\"isReasonChecked && toggleHourDropdown()\">\r\n {{ leaveHour || 'HH' }}\r\n <span class=\"picker-arrow\">&#9660;</span>\r\n </div>\r\n <div class=\"custom-time-options\" *ngIf=\"showHourDropdown\">\r\n <div class=\"custom-time-option\"\r\n *ngFor=\"let h of hours\"\r\n [class.selected]=\"leaveHour === h\"\r\n (click)=\"selectHour(h)\">{{ h }}</div>\r\n </div>\r\n </div>\r\n <span class=\"time-sep\">:</span>\r\n <!-- Minute picker -->\r\n <div class=\"custom-time-select\" [class.disabled-picker]=\"!isReasonChecked\">\r\n <div class=\"custom-time-display\" (click)=\"isReasonChecked && toggleMinuteDropdown()\">\r\n {{ leaveMinute || 'MM' }}\r\n <span class=\"picker-arrow\">&#9660;</span>\r\n </div>\r\n <div class=\"custom-time-options\" *ngIf=\"showMinuteDropdown\">\r\n <div class=\"custom-time-option\"\r\n *ngFor=\"let m of minutes\"\r\n [class.selected]=\"leaveMinute === m\"\r\n (click)=\"selectMinute(m)\">{{ m }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"btn end-btn\" (click)=\"leaveConference()\">\r\n Leave\r\n </button>\r\n <button class=\"btn end-btn\" (click)=\"endConference()\" *ngIf=\"showEndAllButton\">\r\n End All\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;justify-content:center;align-items:center;z-index:1000;flex-flow:column;overflow-x:hidden;overflow-y:visible}.call-to-text{padding:6px 10px;border:1px solid #c2c2c2;border-radius:20px;font-size:13px}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important}.active-call{width:385px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.search-bar input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;outline:none;margin-bottom:10px}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}.callerDetails h1{width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.tx-black,.title{color:#000!important}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}.receive-btn{background-color:#28a745!important;color:#fff!important}.receive-btn span{color:#fff!important}.scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;padding-left:100%;animation:scroll-left 12s linear infinite;font-size:16px}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted #4b4b4b}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{width:100%;padding:5px 8px;height:100%;gap:8px;overflow-y:auto}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.incoming-banner{top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.modal-content .contacts-header{height:40px}.search-contacts-list{max-height:196px;overflow:auto;position:absolute;width:91%;background:white;z-index:1000}.contant-body p{font-size:14px;color:#5f6061}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.disabled{opacity:.5;pointer-events:none}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:37px;height:37px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:8px;cursor:pointer}.contact-add-btn{background-color:#2ecc71!important}.conference-hold-contact{display:inline-flex;align-items:center;gap:5px;background:#727070;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.user-info-section{width:100%;height:100%;overflow-y:auto;overflow-x:hidden!important}.user-info-section::-webkit-scrollbar{display:none}.toggle-btn{cursor:pointer}.text-container{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease}.text-container.expanded{-webkit-line-clamp:unset}.userName{font-family:FontAwesome}.subject-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.conference-contact{display:inline-flex;align-items:center;gap:5px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.organizer-label{padding:1px 5px;font-size:11px;border-radius:10px;border:1px solid #a0a0a0;margin-top:2px;background:#fcfcfc;color:#000}.custom-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;z-index:10000001;border-radius:21px}.modal-content{background:#ffffff;padding:25px;border-radius:8px;width:350px;text-align:center}.title{margin-bottom:15px;color:#d9534f}.message{margin-bottom:20px}.button-group{display:flex;justify-content:space-between}.btn{padding:8px 15px;border:none;border-radius:5px;cursor:pointer;font-weight:500}.end-btn{background-color:#dc3545;color:#fff;display:flex;align-items:center;font-size:13px}.leave-btn{background-color:#007bff;color:#fff}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.border-radius-50{border-radius:50%}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center;margin-top:35px}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}.warning-modal{background:white;width:360px;border-radius:18px;padding:24px;text-align:center;box-shadow:0 10px 30px #00000040}.warning-icon{margin-bottom:12px}.warning-icon .material-symbols-outlined{font-size:48px;color:#f59e0b}.warning-modal h3{margin-bottom:12px;font-size:20px;font-weight:600}.warning-modal p{color:#555;font-size:14px;line-height:1.5;margin-bottom:24px}.warning-actions{display:flex;justify-content:center;gap:12px}.cancel-btn,.proceed-btn{border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600}.cancel-btn{background:#e5e7eb;color:#111827}.proceed-btn{background:#234de8;color:#fff}.time-picker-24hr{display:flex;align-items:center;gap:4px}.time-sep{font-weight:700;font-size:16px;color:#333}.custom-time-select{position:relative;width:58px;-webkit-user-select:none;user-select:none}.custom-time-select.disabled-picker{opacity:.45;pointer-events:none}.custom-time-display{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border:1px solid #ced4da;border-radius:4px;background:#fff;font-size:13px;cursor:pointer;white-space:nowrap}.custom-time-display:hover{border-color:#234de8}.picker-arrow{font-size:9px;margin-left:4px;color:#666}.custom-time-options{position:fixed;background:#fff;border:1px solid #ced4da;border-radius:4px;max-height:160px;overflow-y:auto;z-index:99999999;min-width:58px;box-shadow:0 4px 12px #00000026}.custom-time-option{padding:5px 10px;font-size:13px;cursor:pointer;text-align:center}.custom-time-option:hover{background:#e8eeff;color:#234de8}.custom-time-option.selected{background:#234de8;color:#fff;font-weight:600}.dialpad-alerts{position:absolute;left:50%;transform:translate(-50%);width:calc(100% - 32px);z-index:9999999}.normal-call-alert{top:78px}.conference-alert{top:145px}.dialbox-pop1{background:#dff6dd!important;color:#1d4d1d!important;border-radius:10px;padding:10px 14px;font-size:14px;box-shadow:0 4px 12px #00000040;border:1px solid #b7dfc3}.btn-disc{border:none;background:transparent;color:#6b7280!important;font-size:13px;font-weight:500}.connecting-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 0 24px}.connecting-text{color:#ffffffe6;font-size:15px;font-weight:500;letter-spacing:.5px;margin:0}.connecting-dots{display:flex;gap:8px;align-items:center}.connecting-dots span{display:inline-block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.85);animation:connecting-bounce 1.2s infinite ease-in-out}.connecting-dots span:nth-child(1){animation-delay:0s}.connecting-dots span:nth-child(2){animation-delay:.2s}.connecting-dots span:nth-child(3){animation-delay:.4s}@keyframes connecting-bounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1.2);opacity:1}}.connecting-wrapper{display:flex;align-items:center;font-size:13px;color:#4caf50;margin-top:4px;font-weight:500}.ringing-text{margin-right:2px;font-size:11px}.dots span{animation:blink 1.4s infinite;opacity:0;font-size:16px}.dots span:nth-child(1){animation-delay:0s}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%{opacity:0}50%{opacity:1}to{opacity:0}}\n"] }]
3669
+ args: [{ selector: 'lib-call-progress', template: "<div class=\"d-flex\">\r\n <div class=\"call-container\" *ngIf=\"!isMinimised && currentCallList?.length\"\r\n [ngClass]=\"{'collops': isCollops, 'incoming-call-container': isClickExpand, 'contacts-open': showContactsPanel }\">\r\n <div class=\"dialpad-alerts\"\r\n [ngClass]=\"{\r\n 'conference-alert': isConference && currentCall?.isConference,\r\n 'normal-call-alert': !isConference\r\n }\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\"\r\n [ngClass]=\"callNumberToast.type\"\r\n role=\"alert\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"flex-grow-1 text-left\">\r\n You'r calling\r\n <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\"> Cancel Call </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- All type Call Hold list -->\r\n <div class=\"held-call-banner\"\r\n *ngIf=\"(currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)) || !isAllAccepted\">\r\n <ng-container *ngFor=\"let conf of currentCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"!conf?.isAcceptCall && currentCallList.length > 1 && deviceNumberList.includes(conf?.to) && twilioService.isShowIncomingCall\">\r\n <div class=\"held-info\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper border-radius-50\" [src]=\"conf?.image || 'assets/images/user.jpg'\" alt=\"\" width=\"35\" height=\"35\" />\r\n </div>\r\n <div class=\"held-caller\">\r\n <span class=\"held-label\">{{conf?.from}}</span>\r\n <span class=\"held-name\">{{conf?.fromName}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact receive-btn\" (click)=\"waitingCallAccept(conf)\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n <button class=\"conference-contact\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\" (click)=\"onRejectCall(conf)\"> call_end </span>\r\n </button>\r\n <div *ngIf=\"conf?.businessNumber\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"conf?.isConferenceHold && conferenceCallList.length > 1\">\r\n <div class=\"held-info\">\r\n <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\r\n <div class=\"held-caller\">\r\n <span class=\"held-label\">Hold</span>\r\n <span class=\"held-name\">{{conf?.conferenceName}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': conf?.isConferenceHold }\"\r\n (click)=\"swapCalls(conf,true)\" [disabled]=\"isHoldBtnDisable\">\r\n <span *ngIf=\"conf?.isConferenceHold\" class=\"material-symbols-outlined\" [title]=\"'Resume'\"> resume </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall(conf)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- For single incoming call -->\r\n <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall\">\r\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown Number'}}</span>\r\n </div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img || 'assets/images/user.jpg'\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown Number' }}</h1>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n </div>\r\n <!-- Connecting overlay (shown after accept btn click, hidden on API response) -->\r\n <div class=\"connecting-overlay mt-auto\" *ngIf=\"isConnecting\">\r\n <div class=\"connecting-dots\">\r\n <span></span><span></span><span></span>\r\n </div>\r\n <p class=\"connecting-text\">Connecting...</p>\r\n </div>\r\n\r\n <div class=\"call-action-btns mt-auto\" *ngIf=\"!isConnecting\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\"\r\n [disabled]=\"isIncomingCallBtnDisable\" (click)=\"add(currentCallList[0])\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onRejectCall(currentCallList[0])\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- For single active call -->\r\n <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference) && currentCall?.isAcceptCall\"\r\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" *ngIf=\"!currentCall?.client\"\r\n [src]=\"currentCall?.direction == 'outgoing-call' ? currentCall?.toImage || 'assets/images/user.jpg' : currentCall?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <img class=\"avatar-img\" *ngIf=\"currentCall?.client\"\r\n [src]=\"currentCall?.direction == 'outgoing-call' ? currentCall?.fromImage || 'assets/images/user.jpg' : currentCall?.toImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 *ngIf=\"!currentCall?.client\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.direction == 'outgoing-call' ? currentCall?.toName || 'Unknown' :\r\n currentCall?.fromName || 'Unknown'}}</h1>\r\n <h1 *ngIf=\"currentCall?.client\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.direction == 'outgoing-call' ? currentCall?.fromName || 'Unknown' :\r\n currentCall?.toName || 'Unknown'}}</h1>\r\n <p *ngIf=\"!currentCall?.client\">{{ currentCall?.direction == 'outgoing-call' ? currentCall?.to || 'Unknown' : currentCall?.from || 'Unknown'}}</p>\r\n <p *ngIf=\"currentCall?.client\">{{ currentCall?.direction == 'outgoing-call' ? currentCall?.from || 'Unknown' : currentCall?.to || 'Unknown'}}</p>\r\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n </div>\r\n\r\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n <div class=\"flex align-items-center justify-content-evenly mb-3\">\r\n <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"toggleMute()\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\r\n </span>\r\n </button>\r\n <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n (click)=\"toggleContactsPanel(currentCall)\">\r\n <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n </button>\r\n </div>\r\n <div>\r\n <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- conference call view -->\r\n <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n <div class=\"conf-heading\">\r\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n <span class=\"conf-title\">Conference Call</span>\r\n </div>\r\n <div class=\"scroll-container\">\r\n <div class=\"scroll-text conf-name\">\r\n <ng-container *ngFor=\"let call of currentCallList; let i = index\">\r\n <ng-container *ngIf=\"!call?.isConferenceHold\">\r\n <span *ngIf=\"i != 0\">&</span>\r\n <span *ngIf=\"call?.client\">\r\n <ng-container *ngIf=\"!isSelfNumber(call) else selfNumber\">\r\n <span>{{call?.direction == 'outgoing-call' ? call?.fromName || call?.from :\r\n call?.toName || call?.to}}</span>\r\n </ng-container>\r\n <ng-template #selfNumber>\r\n <span>You</span>\r\n </ng-template>\r\n </span>\r\n <span *ngIf=\"!call?.client\">{{call?.direction == \"outgoing-call\" ? call?.toName || call?.to : call?.fromName || call?.from || 'Unknown number'}}</span>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"conf-timer\">{{ timer }}</div>\r\n <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"conf-actions\">\r\n <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute(true)\">\r\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\r\n </button>\r\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\r\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\r\n </button>\r\n <button class=\"circle-btn\" (click)=\"toggleContactsPanel(currentCall)\">\r\n <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n </button>\r\n </div>\r\n <div class=\"conf-end\">\r\n <button class=\"circle-btn danger\" (click)=\"endConfereneceCall(currentConferenceCall?.participants[0])\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\"\r\n d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <!-- Incoming call user details shown in model -->\r\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n <div class=\"mb-2 user-info-section\">\r\n <div class=\"text-center my-3\">\r\n <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n </div>\r\n <div class=\"mb-3\">\r\n <h5 class=\"text-white mb-1\">Name:</h5>\r\n <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Number:</div>\r\n <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2\">Email: </div>\r\n <div>{{selectedUserInfo?.email}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2 subject-text\" title=\"{{selectedUserInfo?.subject}}\">\r\n {{selectedUserInfo?.subject}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 mb-2\">\r\n <div class=\"me-2 mb-1\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container\r\n *ngIf=\"selectedUserInfo?.image && selectedUserInfo?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedUserInfo?.image}}\" alt=\"\" width=\"150\" class=\"ml-2\" />\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"mb-1\">Message:</div>\r\n <div>\r\n <div class=\"text-container\" [class.expanded]=\"isExpanded\">{{selectedUserInfo?.message}}\r\n </div>\r\n <small class=\"toggle-btn\" *ngIf=\"showButton\" (click)=\"toggleText()\">{{ isExpanded ? 'See\r\n less' : 'See more' }}</small>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Point Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Source Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- contact list panel -->\r\n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n <div class=\"contacts-header\">\r\n <div>Participant</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel({}, true)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\r\n <div class=\"search-bar p-3 position-relative\">\r\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n <div class=\"search-contacts-list\">\r\n <ng-container *ngFor=\"let c of filteredList\">\r\n <div class=\"contact-item\" *ngIf=\"searchText\">\r\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number) }}{{ c?.numbersList[0]?.numberLabel ? ' (' + c.numbersList[0].numberLabel + ')' : '' }}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(c)\"\r\n *ngIf=\"!c?.IsConnected\" title=\"Add to conference call\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n </button>\r\n <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(c?.numbersList[0]?.number, true)\"\r\n *ngIf=\"!c?.IsConnected\" title=\"New Call\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!filteredList.length && isDirectCallOptionShow && searchText\">\r\n <div class=\"contact-item\">\r\n <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-title\">{{ searchText }}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"CallToUnsavedNumber(searchText)\"\r\n title=\"Add to conference call\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n </button>\r\n <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(searchText, true)\"\r\n title=\"New Call\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"contacts-list\">\r\n <div class=\"px-2\">\r\n <h5 class=\"mb-0 title\">{{selectedConfName}}'s active participants</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\">\r\n <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n <div class=\"contact-item\" *ngIf=\"!c?.isLeft\">\r\n <img class=\"contact-avatar\" *ngIf=\"!c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <img class=\"contact-avatar\" *ngIf=\"c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.fromImage || 'assets/images/user.jpg' : c?.toImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\" *ngIf=\"!c?.client\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"!c?.client\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from || 'Unknown'}}</div>\r\n\r\n <div class=\"contact-name\" *ngIf=\"c?.client\">\r\n <ng-container *ngIf=\"!isSelfNumber(c) else selfNumber\">\r\n <span>{{c?.direction == 'outgoing-call' ? c?.fromName || 'Unknown' : c?.toName || 'Unknown'}}</span>\r\n </ng-container>\r\n <ng-template #selfNumber>\r\n <span>You</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"c?.client\">{{ c?.direction == 'outgoing-call' ? c?.from || 'Unknown' : c?.to || 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.host\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"c?.joined && !c?.host\">\r\n <div class=\"connecting-wrapper mr-2\">\r\n <span class=\"ringing-text\">Ringing</span>\r\n <span class=\"dots\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!c?.joined || c?.host\">\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.isHold\" (click)=\"onMuteUser(c)\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n </button>\r\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.isHold }\"\r\n (click)=\"onHoldCall(c)\" *ngIf=\"!c?.host\" [disabled]=\"isHoldBtnDisable\">\r\n <span *ngIf=\"!c?.isHold\" class=\"material-symbols-outlined\" [title]=\"'Hold'\"> phone_paused</span>\r\n <span *ngIf=\"c?.isHold\" class=\"material-symbols-outlined\" [title]=\"'Resume'\"> resume </span>\r\n </button>\r\n </ng-container>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\"\r\n *ngIf=\"!c?.host\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall(c)\"\r\n *ngIf=\"c?.host && (deviceNumberList.includes(c?.from) || (deviceNumberList.includes(c?.to) && c?.direction == 'incoming-call'))\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n <hr class=\"m-2\">\r\n <div class=\"mt-3 px-2\">\r\n <h5 class=\"mb-0 title\">Participant added to the call</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\">\r\n <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n <div class=\"contact-item\" *ngIf=\"c?.isLeft\">\r\n <img class=\"contact-avatar\" *ngIf=\"!c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <img class=\"contact-avatar\" *ngIf=\"c?.client\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.fromImage || 'assets/images/user.jpg' : c?.toImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\" *ngIf=\"!c?.client\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"!c?.client\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from || 'Unknown'}}</div>\r\n <div class=\"contact-name\" *ngIf=\"c?.client\">{{c?.direction == 'outgoing-call' ? c?.fromName || 'Unknown' : c?.toName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"c?.client\">{{ c?.direction == 'outgoing-call' ? c?.from || 'Unknown' : c?.to || 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.host\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <div class=\"connecting-wrapper\" *ngIf=\"c?.joined\">\r\n <span class=\"ringing-text\">Ringing</span>\r\n <span class=\"dots\">\r\n <span>.</span>\r\n <span>.</span>\r\n <span>.</span>\r\n </span>\r\n </div>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\" *ngIf=\"!c?.host && c?.joined\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <button class=\"contact-call-btn contact-add-btn\" *ngIf=\"!c?.client && !c?.joined\"\r\n (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n <span class=\"label\">Rejoin</span>\r\n </button>\r\n <button class=\"contact-call-btn contact-add-btn\" *ngIf=\"c?.client && !c?.joined\"\r\n (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.from : c?.to)\">\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n <span class=\"label\">Rejoin</span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- Conference Warning Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showConferenceWarningModal\">\r\n <div class=\"modal-content warning-modal\">\r\n <div class=\"warning-icon\">\r\n <span class=\"material-symbols-outlined\">warning</span>\r\n </div>\r\n <h3>Conference Call Warning</h3>\r\n <p>\r\n Starting a new call will put the current conference on hold\r\n and cannot be merged later.\r\n </p>\r\n <div class=\"warning-actions\">\r\n <button class=\"cancel-btn\" (click)=\"cancelNewCall()\">\r\n Cancel\r\n </button>\r\n <button class=\"proceed-btn\" (click)=\"confirmNewCall()\">\r\n Proceed\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n\r\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\r\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\r\n <div style=\"display: flex; width: 100%\">\r\n <div>\r\n <div class=\"min-call-animation\" id=\"call-avatar\">\r\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"min-callerDetails\">\r\n <div class=\"name\">\r\n {{callData.name}}\r\n </div>\r\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"min-btn-container\">\r\n <div class=\"min-timer\">{{timer}}</div>\r\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n</div>\r\n<!-- Call Disconnect Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showDisconnectModal\">\r\n <div class=\"modal-content p-3\">\r\n <div class=\"contacts-header p-0 pb-2\">\r\n <h4 class=\"title mb-0\">Call Disconnected</h4>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDisconnectModal = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"contant-body mb-2\">\r\n <p class=\"mt-2\">\r\n Exiting this call will not end the conference. The session will continue, and charges will incur to\r\n your\r\n account.\r\n </p>\r\n </div>\r\n <div class=\"button-group\">\r\n <div class=\"text-start d-flex align-items-center\">\r\n <label class=\"d-flex align-items-center mb-0 mr-2\">\r\n <input type=\"checkbox\" [(ngModel)]=\"isReasonChecked\" class=\"me-2\"/>\r\n </label>\r\n <div class=\"time-picker-24hr\">\r\n <!-- Hour picker -->\r\n <div class=\"custom-time-select\" [class.disabled-picker]=\"!isReasonChecked\">\r\n <div class=\"custom-time-display\" (click)=\"isReasonChecked && toggleHourDropdown()\">\r\n {{ leaveHour || 'HH' }}\r\n <span class=\"picker-arrow\">&#9660;</span>\r\n </div>\r\n <div class=\"custom-time-options\" *ngIf=\"showHourDropdown\">\r\n <div class=\"custom-time-option\"\r\n *ngFor=\"let h of hours\"\r\n [class.selected]=\"leaveHour === h\"\r\n (click)=\"selectHour(h)\">{{ h }}</div>\r\n </div>\r\n </div>\r\n <span class=\"time-sep\">:</span>\r\n <!-- Minute picker -->\r\n <div class=\"custom-time-select\" [class.disabled-picker]=\"!isReasonChecked\">\r\n <div class=\"custom-time-display\" (click)=\"isReasonChecked && toggleMinuteDropdown()\">\r\n {{ leaveMinute || 'MM' }}\r\n <span class=\"picker-arrow\">&#9660;</span>\r\n </div>\r\n <div class=\"custom-time-options\" *ngIf=\"showMinuteDropdown\">\r\n <div class=\"custom-time-option\"\r\n *ngFor=\"let m of minutes\"\r\n [class.selected]=\"leaveMinute === m\"\r\n (click)=\"selectMinute(m)\">{{ m }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"btn end-btn\" (click)=\"leaveConference()\">\r\n Leave\r\n </button>\r\n <button class=\"btn end-btn\" (click)=\"endConference()\" *ngIf=\"showEndAllButton\">\r\n End All\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;justify-content:center;align-items:center;z-index:1000;flex-flow:column;overflow-x:hidden;overflow-y:visible}.call-to-text{padding:6px 10px;border:1px solid #c2c2c2;border-radius:20px;font-size:13px}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important}.active-call{width:385px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.search-bar input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;outline:none;margin-bottom:10px}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}.callerDetails h1{width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.tx-black,.title{color:#000!important}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}.receive-btn{background-color:#28a745!important;color:#fff!important}.receive-btn span{color:#fff!important}.scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;padding-left:100%;animation:scroll-left 12s linear infinite;font-size:16px}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted #4b4b4b}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{width:100%;padding:5px 8px;height:100%;gap:8px;overflow-y:auto}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.incoming-banner{top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.modal-content .contacts-header{height:40px}.search-contacts-list{max-height:196px;overflow:auto;position:absolute;width:91%;background:white;z-index:1000}.contant-body p{font-size:14px;color:#5f6061}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.disabled{opacity:.5;pointer-events:none}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:37px;height:37px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:8px;cursor:pointer}.contact-add-btn{background-color:#2ecc71!important}.conference-hold-contact{display:inline-flex;align-items:center;gap:5px;background:#727070;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.user-info-section{width:100%;height:100%;overflow-y:auto;overflow-x:hidden!important}.user-info-section::-webkit-scrollbar{display:none}.toggle-btn{cursor:pointer}.text-container{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease}.text-container.expanded{-webkit-line-clamp:unset}.userName{font-family:FontAwesome}.subject-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.conference-contact{display:inline-flex;align-items:center;gap:5px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.organizer-label{padding:1px 5px;font-size:11px;border-radius:10px;border:1px solid #a0a0a0;margin-top:2px;background:#fcfcfc;color:#000}.custom-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;align-items:center;z-index:10000001;border-radius:21px}.modal-content{background:#ffffff;padding:25px;border-radius:8px;width:350px;text-align:center}.title{margin-bottom:15px;color:#d9534f}.message{margin-bottom:20px}.button-group{display:flex;justify-content:space-between}.btn{padding:8px 15px;border:none;border-radius:5px;cursor:pointer;font-weight:500}.end-btn{background-color:#dc3545;color:#fff;display:flex;align-items:center;font-size:13px}.leave-btn{background-color:#007bff;color:#fff}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.border-radius-50{border-radius:50%}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center;margin-top:35px}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}.warning-modal{background:white;width:360px;border-radius:18px;padding:24px;text-align:center;box-shadow:0 10px 30px #00000040}.warning-icon{margin-bottom:12px}.warning-icon .material-symbols-outlined{font-size:48px;color:#f59e0b}.warning-modal h3{margin-bottom:12px;font-size:20px;font-weight:600}.warning-modal p{color:#555;font-size:14px;line-height:1.5;margin-bottom:24px}.warning-actions{display:flex;justify-content:center;gap:12px}.cancel-btn,.proceed-btn{border:none;padding:10px 18px;border-radius:8px;cursor:pointer;font-weight:600}.cancel-btn{background:#e5e7eb;color:#111827}.proceed-btn{background:#234de8;color:#fff}.time-picker-24hr{display:flex;align-items:center;gap:4px}.time-sep{font-weight:700;font-size:16px;color:#333}.custom-time-select{position:relative;width:58px;-webkit-user-select:none;user-select:none}.custom-time-select.disabled-picker{opacity:.45;pointer-events:none}.custom-time-display{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border:1px solid #ced4da;border-radius:4px;background:#fff;font-size:13px;cursor:pointer;white-space:nowrap}.custom-time-display:hover{border-color:#234de8}.picker-arrow{font-size:9px;margin-left:4px;color:#666}.custom-time-options{position:fixed;background:#fff;border:1px solid #ced4da;border-radius:4px;max-height:160px;overflow-y:auto;z-index:99999999;min-width:58px;box-shadow:0 4px 12px #00000026}.custom-time-option{padding:5px 10px;font-size:13px;cursor:pointer;text-align:center}.custom-time-option:hover{background:#e8eeff;color:#234de8}.custom-time-option.selected{background:#234de8;color:#fff;font-weight:600}.dialpad-alerts{position:absolute;left:50%;transform:translate(-50%);width:calc(100% - 32px);z-index:9999999}.normal-call-alert{top:78px}.conference-alert{top:145px}.dialbox-pop1{background:#dff6dd!important;color:#1d4d1d!important;border-radius:10px;padding:10px 14px;font-size:14px;box-shadow:0 4px 12px #00000040;border:1px solid #b7dfc3}.btn-disc{border:none;background:transparent;color:#6b7280!important;font-size:13px;font-weight:500}.connecting-overlay{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px 0 24px}.connecting-text{color:#ffffffe6;font-size:15px;font-weight:500;letter-spacing:.5px;margin:0}.connecting-dots{display:flex;gap:8px;align-items:center}.connecting-dots span{display:inline-block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.85);animation:connecting-bounce 1.2s infinite ease-in-out}.connecting-dots span:nth-child(1){animation-delay:0s}.connecting-dots span:nth-child(2){animation-delay:.2s}.connecting-dots span:nth-child(3){animation-delay:.4s}@keyframes connecting-bounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1.2);opacity:1}}.connecting-wrapper{display:flex;align-items:center;font-size:13px;color:#4caf50;margin-top:4px;font-weight:500}.ringing-text{margin-right:2px;font-size:11px}.dots span{animation:blink 1.4s infinite;opacity:0;font-size:16px}.dots span:nth-child(1){animation-delay:0s}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%{opacity:0}50%{opacity:1}to{opacity:0}}\n"] }]
3622
3670
  }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: TwilioService }, { type: IpAddressService }, { type: IncomeingCallSocketService }]; }, propDecorators: { callData: [{
3623
3671
  type: Input
3624
3672
  }], selectedCallerId: [{
@@ -3926,7 +3974,9 @@ class DialboxComponent {
3926
3974
  this.token = localStorage.getItem('ext_token') || '';
3927
3975
  this.getContactList();
3928
3976
  this.extensionService.isLoadershow.subscribe((res) => {
3929
- this.isLoadershow = res;
3977
+ setTimeout(() => {
3978
+ this.isLoadershow = res;
3979
+ });
3930
3980
  });
3931
3981
  // FIX: .filter() returns a new array — must assign back to actually mutate the lists
3932
3982
  this.extensionService.isAcceptIIncomingCall.subscribe((res) => {
@@ -4719,7 +4769,9 @@ class DialboxComponent {
4719
4769
  }
4720
4770
  }
4721
4771
  onLoadershow(event) {
4722
- this.isLoadershow = event;
4772
+ if (event || this.incomingCallsList.length > 0) {
4773
+ this.isLoadershow = event;
4774
+ }
4723
4775
  }
4724
4776
  onEnter(num) {
4725
4777
  this.dialedNumber = this.dialedNumber + num;
@@ -4824,10 +4876,10 @@ class DialboxComponent {
4824
4876
  }
4825
4877
  }
4826
4878
  DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: IpAddressService }, { token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: i4.Router }, { token: IncomeingCallSocketService }], target: i0.ɵɵFactoryTarget.Component });
4827
- DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", userId: "userId", callAction: "callAction", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData", incomingCallnotification: "incomingCallnotification", updatedTwilioToken: "updatedTwilioToken" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", conferenceCallList: "conferenceCallList", numberDialed: "numberDialed" }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)" } }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\" [missCallInfo]=\"missCallInfo\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\" \r\n [newCallConference]=\"newCallConference\"\r\n (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershown)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n </lib-call-progress>\r\n\r\n <div class=\"loader-wrapper outgoing-call-loader\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n <div class=\"active-call\" style=\"display: flex; flex-direction: column; position: relative;\">\r\n <div class=\"call-animation call-animation-play\">\r\n <img class=\"avatar-img\" [src]=\"callData?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 style=\"margin-top: 8px;\">Connecting...</h1>\r\n <p style=\"text-transform: capitalize;\">{{ contactNameForLoader || dialedNumber }}</p>\r\n </div>\r\n \r\n <div class=\"call-action-btns\">\r\n <div class=\"d-flex justify-content-center\">\r\n <button class=\"call-btn end-call-btn\" disabled (click)=\"endCall()\" style=\"visibility: hidden;\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <button (click)=\"isCallInProgress = true\">call</button> -->\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n *ngIf=\"!isCallInProgress || !incomingCallsList.length\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\"\r\n (ngModelChange)=\"onDialInputChange($event)\" />\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\"\r\n d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \" />\r\n </svg>\r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\"\r\n ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <div style=\"height: 119px; overflow: auto;\">\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\" />\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.selectedNumber.number}}</p>\r\n </div>\r\n </div>\r\n <div class=\"contact-card\" *ngIf=\"!filteredContactList.length && dialedNumber.length > 2 && !isValidationMessageShow\">\r\n <div class=\"no-contact-message\">\r\n No Contacts Found\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}}\r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text :\r\n '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"\r\n [ngClass]=\"{'visible': !isCallerIdHidden}\">\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a\r\n routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.no-contact-message{width:100%;margin:auto 16px;color:#fff}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.outgoing-call-loader{display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(to bottom,#1742DE,#1b369b)}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;display:flex;flex-direction:column;align-items:center}.callerDetails h1,.callerDetails p{margin-top:8px;color:#fff}.call-action-btns{text-align:center;margin-top:90px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "selectedCallerId", "newIncomingCallData", "newIncomingCallsList", "callerIdList", "newCallConference", "missCallInfo", "deviceId", "callAction", "conferenceCallInfo"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated", "isLoadershown", "endIncomingCallEvent"] }, { kind: "directive", type: ShortPressDirective, selector: "[shortPress]", outputs: ["shortPress"] }, { kind: "directive", type: LongPressDirective, selector: "[longPress]", outputs: ["longPress"] }] });
4879
+ DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", userId: "userId", callAction: "callAction", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData", incomingCallnotification: "incomingCallnotification", updatedTwilioToken: "updatedTwilioToken" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", conferenceCallList: "conferenceCallList", numberDialed: "numberDialed" }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)" } }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\" [missCallInfo]=\"missCallInfo\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\" \r\n [newCallConference]=\"newCallConference\"\r\n (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershown)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n </lib-call-progress>\r\n\r\n <div class=\"loader-wrapper outgoing-call-loader\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n <div class=\"active-call\" style=\"display: flex; flex-direction: column; position: relative;\">\r\n <div class=\"call-animation call-animation-play\">\r\n <img class=\"avatar-img\" [src]=\"callData?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 style=\"margin-top: 8px;\">Connecting...</h1>\r\n <p style=\"text-transform: capitalize;\">{{ contactNameForLoader || dialedNumber }}</p>\r\n </div>\r\n \r\n <div class=\"call-action-btns\">\r\n <div class=\"d-flex justify-content-center\">\r\n <button class=\"call-btn end-call-btn\" disabled (click)=\"endCall()\" style=\"visibility: hidden;\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && !isLoadershow\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\"\r\n (ngModelChange)=\"onDialInputChange($event)\" />\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\"\r\n d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \" />\r\n </svg>\r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\"\r\n ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <div style=\"height: 119px; overflow: auto;\">\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\" />\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.selectedNumber.number}}</p>\r\n </div>\r\n </div>\r\n <div class=\"contact-card\" *ngIf=\"!filteredContactList.length && dialedNumber.length > 2 && !isValidationMessageShow\">\r\n <div class=\"no-contact-message\">\r\n No Contacts Found\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}}\r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text :\r\n '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"\r\n [ngClass]=\"{'visible': !isCallerIdHidden}\">\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a\r\n routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.no-contact-message{width:100%;margin:auto 16px;color:#fff}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.outgoing-call-loader{display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(to bottom,#1742DE,#1b369b)}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;display:flex;flex-direction:column;align-items:center}.callerDetails h1,.callerDetails p{margin-top:8px;color:#fff}.call-action-btns{text-align:center;margin-top:90px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "selectedCallerId", "newIncomingCallData", "newIncomingCallsList", "callerIdList", "newCallConference", "missCallInfo", "deviceId", "callAction", "conferenceCallInfo"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated", "isLoadershown", "endIncomingCallEvent"] }, { kind: "directive", type: ShortPressDirective, selector: "[shortPress]", outputs: ["shortPress"] }, { kind: "directive", type: LongPressDirective, selector: "[longPress]", outputs: ["longPress"] }] });
4828
4880
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
4829
4881
  type: Component,
4830
- args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\" [missCallInfo]=\"missCallInfo\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\" \r\n [newCallConference]=\"newCallConference\"\r\n (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershown)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n </lib-call-progress>\r\n\r\n <div class=\"loader-wrapper outgoing-call-loader\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n <div class=\"active-call\" style=\"display: flex; flex-direction: column; position: relative;\">\r\n <div class=\"call-animation call-animation-play\">\r\n <img class=\"avatar-img\" [src]=\"callData?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 style=\"margin-top: 8px;\">Connecting...</h1>\r\n <p style=\"text-transform: capitalize;\">{{ contactNameForLoader || dialedNumber }}</p>\r\n </div>\r\n \r\n <div class=\"call-action-btns\">\r\n <div class=\"d-flex justify-content-center\">\r\n <button class=\"call-btn end-call-btn\" disabled (click)=\"endCall()\" style=\"visibility: hidden;\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- <button (click)=\"isCallInProgress = true\">call</button> -->\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n *ngIf=\"!isCallInProgress || !incomingCallsList.length\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\"\r\n (ngModelChange)=\"onDialInputChange($event)\" />\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\"\r\n d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \" />\r\n </svg>\r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\"\r\n ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <div style=\"height: 119px; overflow: auto;\">\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\" />\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.selectedNumber.number}}</p>\r\n </div>\r\n </div>\r\n <div class=\"contact-card\" *ngIf=\"!filteredContactList.length && dialedNumber.length > 2 && !isValidationMessageShow\">\r\n <div class=\"no-contact-message\">\r\n No Contacts Found\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}}\r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text :\r\n '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"\r\n [ngClass]=\"{'visible': !isCallerIdHidden}\">\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a\r\n routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.no-contact-message{width:100%;margin:auto 16px;color:#fff}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.outgoing-call-loader{display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(to bottom,#1742DE,#1b369b)}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;display:flex;flex-direction:column;align-items:center}.callerDetails h1,.callerDetails p{margin-top:8px;color:#fff}.call-action-btns{text-align:center;margin-top:90px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}\n"] }]
4882
+ args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\" [missCallInfo]=\"missCallInfo\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\" \r\n [newCallConference]=\"newCallConference\"\r\n (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershown)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n </lib-call-progress>\r\n\r\n <div class=\"loader-wrapper outgoing-call-loader\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n <div class=\"active-call\" style=\"display: flex; flex-direction: column; position: relative;\">\r\n <div class=\"call-animation call-animation-play\">\r\n <img class=\"avatar-img\" [src]=\"callData?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 style=\"margin-top: 8px;\">Connecting...</h1>\r\n <p style=\"text-transform: capitalize;\">{{ contactNameForLoader || dialedNumber }}</p>\r\n </div>\r\n \r\n <div class=\"call-action-btns\">\r\n <div class=\"d-flex justify-content-center\">\r\n <button class=\"call-btn end-call-btn\" disabled (click)=\"endCall()\" style=\"visibility: hidden;\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && !isLoadershow\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\"\r\n (ngModelChange)=\"onDialInputChange($event)\" />\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\"\r\n d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \" />\r\n </svg>\r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\"\r\n ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <div style=\"height: 119px; overflow: auto;\">\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\" />\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.selectedNumber.number}}</p>\r\n </div>\r\n </div>\r\n <div class=\"contact-card\" *ngIf=\"!filteredContactList.length && dialedNumber.length > 2 && !isValidationMessageShow\">\r\n <div class=\"no-contact-message\">\r\n No Contacts Found\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}}\r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text :\r\n '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"\r\n [ngClass]=\"{'visible': !isCallerIdHidden}\">\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a\r\n routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.no-contact-message{width:100%;margin:auto 16px;color:#fff}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.outgoing-call-loader{display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(to bottom,#1742DE,#1b369b)}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;display:flex;flex-direction:column;align-items:center}.callerDetails h1,.callerDetails p{margin-top:8px;color:#fff}.call-action-btns{text-align:center;margin-top:90px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}\n"] }]
4831
4883
  }], ctorParameters: function () { return [{ type: TwilioService }, { type: ExtensionService }, { type: IpAddressService }, { type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: i4.Router }, { type: IncomeingCallSocketService }]; }, propDecorators: { autoOpenOnIncoming: [{
4832
4884
  type: Input
4833
4885
  }], contactInfo: [{