@vgroup/dialbox 0.7.27 → 0.7.29

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 (10) hide show
  1. package/esm2020/lib/components/call-progress/call-progress.component.mjs +48 -30
  2. package/esm2020/lib/dialbox.component.mjs +3 -2
  3. package/esm2020/lib/service/extension.service.mjs +15 -3
  4. package/esm2020/lib/service/twilio.service.mjs +9 -6
  5. package/fesm2015/vgroup-dialbox.mjs +73 -37
  6. package/fesm2015/vgroup-dialbox.mjs.map +1 -1
  7. package/fesm2020/vgroup-dialbox.mjs +71 -37
  8. package/fesm2020/vgroup-dialbox.mjs.map +1 -1
  9. package/lib/components/call-progress/call-progress.component.d.ts +1 -0
  10. package/package.json +1 -1
package/fesm2015/vgroup-dialbox.mjs CHANGED
@@ -622,8 +622,21 @@ class ExtensionService {
622
622
  'ip-country': (_c = (_b = this.ipAddressInfo) === null || _b === void 0 ? void 0 : _b.address) === null || _c === void 0 ? void 0 : _c.country
623
623
  });
624
624
  const httpOptions = { headers: headers };
625
- payload = Object.assign(Object.assign({}, payload), { proxy: (_d = this.ipAddressInfo) === null || _d === void 0 ? void 0 : _d.proxy, countrycode: (_f = (_e = this.ipAddressInfo) === null || _e === void 0 ? void 0 : _e.address) === null || _f === void 0 ? void 0 : _f.countryCode });
626
- return this.http.post(environment.apiUrl + '/utilities/ext/ur/add/client/participant', payload, httpOptions);
625
+ if (this.ipAddressInfo) {
626
+ payload = Object.assign(Object.assign({}, payload), { proxy: (_d = this.ipAddressInfo) === null || _d === void 0 ? void 0 : _d.proxy, countrycode: (_f = (_e = this.ipAddressInfo) === null || _e === void 0 ? void 0 : _e.address) === null || _f === void 0 ? void 0 : _f.countryCode });
627
+ return this.http.post(environment.apiUrl + '/utilities/ext/ur/add/client/participant', payload, httpOptions);
628
+ }
629
+ else {
630
+ return this.ipAddressService.getIpAddressInfo().pipe(switchMap((ipAddressInfo) => {
631
+ var _a, _b, _c;
632
+ this.ipAddressInfo = Object.assign({}, ipAddressInfo);
633
+ payload = Object.assign(Object.assign({}, payload), { proxy: (_a = this.ipAddressInfo) === null || _a === void 0 ? void 0 : _a.proxy, countrycode: (_c = (_b = this.ipAddressInfo) === null || _b === void 0 ? void 0 : _b.address) === null || _c === void 0 ? void 0 : _c.countryCode });
634
+ return this.http.post(environment.apiUrl + '/utilities/ext/ur/add/client/participant', payload, httpOptions);
635
+ }), catchError((error) => {
636
+ // Properly catch errors
637
+ return throwError(error);
638
+ }));
639
+ }
627
640
  }
628
641
  holdParticipant(payload) {
629
642
  const headers = new HttpHeaders({
@@ -1797,11 +1810,14 @@ class TwilioService {
1797
1810
  catch (_) { }
1798
1811
  });
1799
1812
  this.extraDevices.clear();
1800
- // if (this.spareDevice) {
1801
- // try { this.spareDevice.destroy(); } catch (_) {}
1802
- // this.spareDevice = null;
1803
- // this.spareDeviceReady = false;
1804
- // }
1813
+ if (this.spareDevice) {
1814
+ try {
1815
+ this.spareDevice.destroy();
1816
+ }
1817
+ catch (_) { }
1818
+ this.spareDevice = null;
1819
+ this.spareDeviceReady = false;
1820
+ }
1805
1821
  console.log('spare/extra devices torn down (idle)');
1806
1822
  }
1807
1823
  // Backwards-compatible alias kept for existing call sites.
@@ -2104,7 +2120,7 @@ class CallProgressComponent {
2104
2120
  this.newIncomingCallsList.forEach((callInfo, i) => {
2105
2121
  var _a;
2106
2122
  this.conferenceId = i == 0 ? this.newIncomingCallsList[i].conferenceId : this.conferenceId;
2107
- let ourNumberInfo = this.newIncomingCallsList[i].participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'outgoing-call') || (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));
2123
+ let ourNumberInfo = this.newIncomingCallsList[i].participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'outgoing-call') || (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) && !(resData === null || resData === void 0 ? void 0 : resData.businessNumber));
2108
2124
  if (!this.pendingMuteUpdate) {
2109
2125
  this.isMute = !(ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isHold) ? ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isMute : this.isMute;
2110
2126
  }
@@ -2119,7 +2135,7 @@ class CallProgressComponent {
2119
2135
  this.newIncomingCallsList[i].participants.map((res) => res.id);
2120
2136
  currentcallParticipantListID.forEach((participantId) => {
2121
2137
  if (!updatedList.includes(participantId)) {
2122
- this.currentCallList = this.currentCallList.filter((resInfo) => (resInfo === null || resInfo === void 0 ? void 0 : resInfo.participantId) !== participantId || ((resInfo === null || resInfo === void 0 ? void 0 : resInfo.direction) == 'incoming-call' && !(resInfo === null || resInfo === void 0 ? void 0 : resInfo.isAcceptCall)));
2138
+ this.currentCallList = this.currentCallList.filter((resInfo) => (resInfo === null || resInfo === void 0 ? void 0 : resInfo.participantId) !== participantId || ((resInfo === null || resInfo === void 0 ? void 0 : resInfo.direction) == 'incoming-call' && !(resInfo === null || resInfo === void 0 ? void 0 : resInfo.isAcceptCall) && !(resInfo === null || resInfo === void 0 ? void 0 : resInfo.businessNumber)));
2123
2139
  }
2124
2140
  });
2125
2141
  if (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id) {
@@ -2242,13 +2258,13 @@ class CallProgressComponent {
2242
2258
  // item['businessNumber'] = participant?.businessNumber;
2243
2259
  // item['businessParticipantId'] = participant?.id;
2244
2260
  // }
2245
- if (((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'outgoing-call' && (participant === null || participant === void 0 ? void 0 : participant.client)) || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call' && (participant === null || participant === void 0 ? void 0 : participant.client))) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft) && !(participant === null || participant === void 0 ? void 0 : participant.isHold)) {
2261
+ if (((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'outgoing-call' && (participant === null || participant === void 0 ? void 0 : participant.client)) || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call' && (participant === null || participant === void 0 ? void 0 : participant.client))) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft) && !(participant === null || participant === void 0 ? void 0 : participant.isHold) && !(participant === null || participant === void 0 ? void 0 : participant.businessNumber)) {
2246
2262
  currentCall.push(participant);
2247
2263
  }
2248
2264
  if (participant === null || participant === void 0 ? void 0 : participant.host) {
2249
2265
  item['timer'] = this.getTimeDifference((participant === null || participant === void 0 ? void 0 : participant.joinedAt) || new Date().toUTCString());
2250
2266
  }
2251
- return ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'outgoing-call' && (participant === null || participant === void 0 ? void 0 : participant.client)) || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call' && (participant === null || participant === void 0 ? void 0 : participant.client))) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft) && !(participant === null || participant === void 0 ? void 0 : participant.isHold);
2267
+ return ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'outgoing-call' && (participant === null || participant === void 0 ? void 0 : participant.client)) || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call' && (participant === null || participant === void 0 ? void 0 : participant.client))) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft) && !(participant === null || participant === void 0 ? void 0 : participant.isHold) && !(participant === null || participant === void 0 ? void 0 : participant.businessNumber);
2252
2268
  });
2253
2269
  });
2254
2270
  // Detect disconnect vs. hold transition exactly once per event.
@@ -2260,7 +2276,7 @@ class CallProgressComponent {
2260
2276
  else if (this.lastActiveConferenceId && !this.pendingAutoUnhold) {
2261
2277
  const lastConf = this.newIncomingCallsList.find((c) => c.conferenceId == this.lastActiveConferenceId);
2262
2278
  const ourParticipantInLastConf = (_q = lastConf === null || lastConf === void 0 ? void 0 : lastConf.participants) === null || _q === void 0 ? void 0 : _q.find((p) => ((this.deviceNumberList.includes(p === null || p === void 0 ? void 0 : p.from) && (p === null || p === void 0 ? void 0 : p.direction) == 'outgoing-call' && (p === null || p === void 0 ? void 0 : p.client)) ||
2263
- (this.deviceNumberList.includes(p === null || p === void 0 ? void 0 : p.to) && (p === null || p === void 0 ? void 0 : p.direction) == 'incoming-call' && (p === null || p === void 0 ? void 0 : p.client))) && !(p === null || p === void 0 ? void 0 : p.isLeft));
2279
+ (this.deviceNumberList.includes(p === null || p === void 0 ? void 0 : p.to) && (p === null || p === void 0 ? void 0 : p.direction) == 'incoming-call' && (p === null || p === void 0 ? void 0 : p.client) && !(p === null || p === void 0 ? void 0 : p.businessNumber))) && !(p === null || p === void 0 ? void 0 : p.isLeft));
2264
2280
  // Conference gone OR our participant not held → the active call disconnected → queue auto-unhold
2265
2281
  if (!lastConf || !(ourParticipantInLastConf === null || ourParticipantInLastConf === void 0 ? void 0 : ourParticipantInLastConf.isHold)) {
2266
2282
  this.pendingAutoUnhold = true;
@@ -2277,13 +2293,13 @@ class CallProgressComponent {
2277
2293
  if (ownNumbers) {
2278
2294
  // Original logic – works when the caller‑ID list is loaded
2279
2295
  return ((res === null || res === void 0 ? void 0 : res.direction) == 'outgoing-call' && (res === null || res === void 0 ? void 0 : res.client) && !ownNumbers.includes(res === null || res === void 0 ? void 0 : res.from)) ||
2280
- ((res === null || res === void 0 ? void 0 : res.direction) == 'incoming-call' && (res === null || res === void 0 ? void 0 : res.client) && !ownNumbers.includes(res === null || res === void 0 ? void 0 : res.to)) ||
2296
+ ((res === null || res === void 0 ? void 0 : res.direction) == 'incoming-call' && (res === null || res === void 0 ? void 0 : res.client) && !ownNumbers.includes(res === null || res === void 0 ? void 0 : res.to) && !(res === null || res === void 0 ? void 0 : res.businessNumber)) ||
2281
2297
  (!(res === null || res === void 0 ? void 0 : res.client) && (res === null || res === void 0 ? void 0 : res.isAcceptCall));
2282
2298
  }
2283
2299
  else {
2284
2300
  // Safe fallback: exclude the participant whose number matches the caller ID we used
2285
2301
  const isOwn = ((res === null || res === void 0 ? void 0 : res.direction) == 'outgoing-call' && (res === null || res === void 0 ? void 0 : res.from) === callerNumber) ||
2286
- ((res === null || res === void 0 ? void 0 : res.direction) == 'incoming-call' && (res === null || res === void 0 ? void 0 : res.to) === callerNumber);
2302
+ ((res === null || res === void 0 ? void 0 : res.direction) == 'incoming-call' && (res === null || res === void 0 ? void 0 : res.to) === callerNumber && !(res === null || res === void 0 ? void 0 : res.businessNumber));
2287
2303
  return !isOwn;
2288
2304
  }
2289
2305
  });
@@ -2317,7 +2333,7 @@ class CallProgressComponent {
2317
2333
  if (conf.conferenceId == this.lastActiveConferenceId)
2318
2334
  continue;
2319
2335
  holdCallInfo = conf.participants.find((callInfo) => ((this.deviceNumberList.includes(callInfo === null || callInfo === void 0 ? void 0 : callInfo.from) && (callInfo === null || callInfo === void 0 ? void 0 : callInfo.client))
2320
- || (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));
2336
+ || (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) && !(callInfo === null || callInfo === void 0 ? void 0 : callInfo.businessNumber));
2321
2337
  if (holdCallInfo)
2322
2338
  break;
2323
2339
  }
@@ -2379,6 +2395,13 @@ class CallProgressComponent {
2379
2395
  ...new Map(this.currentCallList.map(item => [item.conferenceId, item])).values()
2380
2396
  ];
2381
2397
  this.conferenceCallList = uniqueList.map((item, index) => (Object.assign({}, item)));
2398
+ this.conferenceCallList.forEach((item) => {
2399
+ let participantList = this.currentCallList.find((res) => (res === null || res === void 0 ? void 0 : res.conferenceId) == (item === null || item === void 0 ? void 0 : item.conferenceId) && (res === null || res === void 0 ? void 0 : res.businessNumber) && !(res === null || res === void 0 ? void 0 : res.host));
2400
+ if (participantList === null || participantList === void 0 ? void 0 : participantList.id) {
2401
+ item['isBusinessNumber'] = participantList === null || participantList === void 0 ? void 0 : participantList.businessNumber;
2402
+ item['businessParticipantId'] = participantList === null || participantList === void 0 ? void 0 : participantList.participantId;
2403
+ }
2404
+ });
2382
2405
  this.conferenceCallNullCount = 0;
2383
2406
  }
2384
2407
  else if (!((_8 = this.newIncomingCallsList) === null || _8 === void 0 ? void 0 : _8.length)) {
@@ -2755,12 +2778,12 @@ class CallProgressComponent {
2755
2778
  onHoldCall(c) {
2756
2779
  return __awaiter(this, void 0, void 0, function* () {
2757
2780
  this.isHoldBtnDisable = true;
2758
- if ((((c === null || c === void 0 ? void 0 : c.direction) == 'outgoing-call' && this.deviceNumberList.includes(c === null || c === void 0 ? void 0 : c.from)) || ((c === null || c === void 0 ? void 0 : c.direction) == 'incoming-call' && this.deviceNumberList.includes(c === null || c === void 0 ? void 0 : c.to))) && (c === null || c === void 0 ? void 0 : c.client)) {
2781
+ if ((((c === null || c === void 0 ? void 0 : c.direction) == 'outgoing-call' && this.deviceNumberList.includes(c === null || c === void 0 ? void 0 : c.from)) || ((c === null || c === void 0 ? void 0 : c.direction) == 'incoming-call' && this.deviceNumberList.includes(c === null || c === void 0 ? void 0 : c.to))) && (c === null || c === void 0 ? void 0 : c.client) && !(c === null || c === void 0 ? void 0 : c.businessNumber)) {
2759
2782
  let unHoldInfo = {};
2760
2783
  this.newIncomingCallsList.forEach((call, index) => __awaiter(this, void 0, void 0, function* () {
2761
2784
  var _a;
2762
2785
  if ((call === null || call === void 0 ? void 0 : call.conferenceId) == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
2763
- 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));
2786
+ 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.businessNumber)) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
2764
2787
  if (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id) {
2765
2788
  let holdInfo = this.onholdOrUnholdParticipant({
2766
2789
  participantId: [participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id],
@@ -2774,7 +2797,7 @@ class CallProgressComponent {
2774
2797
  }
2775
2798
  }
2776
2799
  else {
2777
- unHoldInfo = yield 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.client))) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft) && (resData === null || resData === void 0 ? void 0 : resData.isHold) !== (c === null || c === void 0 ? void 0 : c.isHold));
2800
+ unHoldInfo = yield 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.client)) && !(resData === null || resData === void 0 ? void 0 : resData.businessNumber)) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft) && (resData === null || resData === void 0 ? void 0 : resData.isHold) !== (c === null || c === void 0 ? void 0 : c.isHold));
2778
2801
  }
2779
2802
  if (index == ((_a = this.newIncomingCallsList) === null || _a === void 0 ? void 0 : _a.length) - 1) {
2780
2803
  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)) {
@@ -2990,7 +3013,7 @@ class CallProgressComponent {
2990
3013
  this.selectedConf = conf;
2991
3014
  // this.isUnholdConferenceCall = true;
2992
3015
  let conference = (_a = this.newIncomingCallsList) === null || _a === void 0 ? void 0 : _a.find((res) => (res === null || res === void 0 ? void 0 : res.conferenceId) == (conf === null || conf === void 0 ? void 0 : conf.conferenceId));
2993
- let hostNumber = (_b = conference === null || conference === void 0 ? void 0 : conference.participants) === null || _b === void 0 ? void 0 : _b.find((participant) => participant === null || participant === void 0 ? void 0 : participant.host);
3016
+ let hostNumber = (_b = conference === null || conference === void 0 ? void 0 : conference.participants) === null || _b === void 0 ? void 0 : _b.find((participant) => (participant === null || participant === void 0 ? void 0 : participant.host) && !(participant === null || participant === void 0 ? void 0 : participant.businessNumber));
2994
3017
  if ((this.deviceNumberList.includes(hostNumber === null || hostNumber === void 0 ? void 0 : hostNumber.from) || (this.deviceNumberList.includes(hostNumber === null || hostNumber === void 0 ? void 0 : hostNumber.to) && (hostNumber === null || hostNumber === void 0 ? void 0 : hostNumber.direction) == 'incoming-call' && (hostNumber === null || hostNumber === void 0 ? void 0 : hostNumber.host))) && (conference === null || conference === void 0 ? void 0 : conference.participants.filter((p) => !p.isLeft).length) > 2) {
2995
3018
  this.selectedConf = hostNumber;
2996
3019
  this.selectedConf['conName'] = ((_c = this.conferenceCallList.find((res) => (res === null || res === void 0 ? void 0 : res.conferenceId) == (conf === null || conf === void 0 ? void 0 : conf.conferenceId))) === null || _c === void 0 ? void 0 : _c.callLabel) || '';
@@ -2999,7 +3022,7 @@ class CallProgressComponent {
2999
3022
  else {
3000
3023
  if (conf === null || conf === void 0 ? void 0 : conf.conferenceId) {
3001
3024
  let participentInfo = (_d = conference === null || conference === void 0 ? void 0 : conference.participants) === null || _d === void 0 ? void 0 : _d.find((participant) => ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from)
3002
- && (participant === null || participant === void 0 ? void 0 : participant.client)) || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call')) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft));
3025
+ && (participant === null || participant === void 0 ? void 0 : participant.client)) || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call' && !(participant === null || participant === void 0 ? void 0 : participant.businessNumber)) && !(participant === null || participant === void 0 ? void 0 : participant.businessNumber)) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft));
3003
3026
  if (participentInfo === null || participentInfo === void 0 ? void 0 : participentInfo.id) {
3004
3027
  if (this.isInMultipleConferences()) {
3005
3028
  this.leaveConfParticipant = participentInfo;
@@ -3062,7 +3085,7 @@ class CallProgressComponent {
3062
3085
  return this.newIncomingCallsList
3063
3086
  .flatMap((callInfo) => callInfo.participants)
3064
3087
  .find((participant) => ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'outgoing-call' && (participant === null || participant === void 0 ? void 0 : participant.client))
3065
- || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call' && (participant === null || participant === void 0 ? void 0 : participant.client))) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft) && !(participant === null || participant === void 0 ? void 0 : participant.isHold));
3088
+ || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call' && (participant === null || participant === void 0 ? void 0 : participant.client) && !(participant === null || participant === void 0 ? void 0 : participant.businessNumber))) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft) && !(participant === null || participant === void 0 ? void 0 : participant.isHold));
3066
3089
  }
3067
3090
  toggleKeypad() {
3068
3091
  this.showKeypad = !this.showKeypad;
@@ -3105,27 +3128,28 @@ class CallProgressComponent {
3105
3128
  this.selectedUserInfo = {};
3106
3129
  return false;
3107
3130
  }
3108
- if (!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.businessNumber)) {
3131
+ if (!(userInfo === null || userInfo === void 0 ? void 0 : userInfo.businessNumber) && (userInfo === null || userInfo === void 0 ? void 0 : userInfo.isBusinessNumber)) {
3109
3132
  // Non-C2C item: just mark it as selected for highlight, no API call needed.
3110
3133
  // this.selectedUserInfo = userInfo;
3111
3134
  return;
3112
3135
  }
3113
3136
  // Set selection immediately so the highlight appears before the API responds.
3114
3137
  this.selectedUserInfo = userInfo;
3115
- if (!this.C2ConfoList[userInfo === null || userInfo === void 0 ? void 0 : userInfo.participantId]) {
3116
- this.extensionService.getUserInformation(userInfo.participantId).subscribe({
3138
+ let participantID = (userInfo === null || userInfo === void 0 ? void 0 : userInfo.businessParticipantId) || (userInfo === null || userInfo === void 0 ? void 0 : userInfo.participantId);
3139
+ if (!this.C2ConfoList[userInfo === null || userInfo === void 0 ? void 0 : userInfo.participantId] && !this.C2ConfoList[userInfo === null || userInfo === void 0 ? void 0 : userInfo.businessParticipantId]) {
3140
+ this.extensionService.getUserInformation(participantID).subscribe({
3117
3141
  next: (resInfo) => {
3118
3142
  let index = this.currentCallList.findIndex((item) => (item === null || item === void 0 ? void 0 : item.participantId) == (userInfo === null || userInfo === void 0 ? void 0 : userInfo.id));
3119
3143
  this.currentCallList[index] = this.mapUserInfo(this.currentCallList[index], resInfo === null || resInfo === void 0 ? void 0 : resInfo.c2cInformation);
3120
3144
  this.selectedUserInfo = this.currentCallList[index];
3121
- this.C2ConfoList[userInfo.participantId] = this.currentCallList[index];
3145
+ this.C2ConfoList[participantID] = this.currentCallList[index];
3122
3146
  }, error: (err) => {
3123
3147
  console.error('Error fetching user info:', err);
3124
3148
  }
3125
3149
  });
3126
3150
  }
3127
3151
  else {
3128
- this.selectedUserInfo = this.C2ConfoList[userInfo.participantId];
3152
+ this.selectedUserInfo = this.C2ConfoList[participantID];
3129
3153
  }
3130
3154
  this.checkTextHeight();
3131
3155
  }
@@ -3142,7 +3166,7 @@ class CallProgressComponent {
3142
3166
  let ourNumberInfo = {};
3143
3167
  let callInfo = this.newIncomingCallsList.find((callInfo, i) => { var _a; return ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.conferenceId) == callInfo.conferenceId; });
3144
3168
  if ((_a = callInfo === null || callInfo === void 0 ? void 0 : callInfo.participants) === null || _a === void 0 ? void 0 : _a.length) {
3145
- 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) && this.getStatus(resData));
3169
+ 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.businessNumber))) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft) && this.getStatus(resData));
3146
3170
  }
3147
3171
  const capturedCall = this.twilioService.getIncomingCallById(incomingCallInfo === null || incomingCallInfo === void 0 ? void 0 : incomingCallInfo.clientSid) || this.twilioService.incomingCallDetail;
3148
3172
  this.twilioService.acceptedCallList.forEach((call) => {
@@ -3371,6 +3395,13 @@ class CallProgressComponent {
3371
3395
  if (isInvalid) {
3372
3396
  return false;
3373
3397
  }
3398
+ // const currentConfId = this.currentCall?.conferenceId;
3399
+ // let alreadyInCall = this.currentCallList.some((res: any) =>
3400
+ // res.conferenceId === currentConfId &&
3401
+ // ((res.to == number && res.direction == 'incoming-call') ||
3402
+ // (res.from == number && res.direction == 'outgoing-call' && res.host)) &&
3403
+ // !res.isLeft
3404
+ // );
3374
3405
  let alreadyInCall = this.currentCallList.find((res) => ((res.to == number && (res === null || res === void 0 ? void 0 : res.direction) == 'incoming-call') || (res.from == number && (res === null || res === void 0 ? void 0 : res.direction) == 'outgoing-call' && res.host)) && !(res === null || res === void 0 ? void 0 : res.isLeft));
3375
3406
  if (alreadyInCall) {
3376
3407
  swal('Error', `Already ${number} number in this call.`);
@@ -3400,7 +3431,7 @@ class CallProgressComponent {
3400
3431
  let ourNumberInfo = {};
3401
3432
  let callInfo = this.newIncomingCallsList.find((callInfo, i) => this.currentCall.conferenceId == callInfo.conferenceId);
3402
3433
  if (callInfo) {
3403
- 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));
3434
+ 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.businessNumber))) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
3404
3435
  }
3405
3436
  if (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id) {
3406
3437
  let holdInfo = yield this.onholdOrUnholdParticipant({
@@ -3556,7 +3587,7 @@ class CallProgressComponent {
3556
3587
  var _a;
3557
3588
  if ((c === null || c === void 0 ? void 0 : c.conferenceId) == (callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceId)) {
3558
3589
  this.isHoldBtnDisable = true;
3559
- 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));
3590
+ 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.businessNumber))) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
3560
3591
  if (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id) {
3561
3592
  let holdInfo = yield this.onholdOrUnholdParticipant({
3562
3593
  participantId: [participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id],
@@ -3574,7 +3605,7 @@ class CallProgressComponent {
3574
3605
  }
3575
3606
  }
3576
3607
  else {
3577
- 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));
3608
+ 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.businessNumber))) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
3578
3609
  if ((participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id) && !(participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.isHold)) {
3579
3610
  let holdInfo = yield this.onholdOrUnholdParticipant({
3580
3611
  participantId: [participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id],
@@ -3842,8 +3873,8 @@ class CallProgressComponent {
3842
3873
  applyFilter() {
3843
3874
  const text = this.searchText.trim().toLowerCase();
3844
3875
  this.isDirectCallOptionShow = /^\+?\d+$/.test(text);
3845
- if (text.length < 3) {
3846
- // this.filteredList = this.contacts;
3876
+ if (!text.length) {
3877
+ this.filteredList = this.contacts;
3847
3878
  // this.filteredList.forEach((c: any) => {
3848
3879
  // let index = this.currentCallList.findIndex((cc: any) => !cc?.IsConnected && (cc?.phone == c?.numbersList[0]?.number || cc?.phone == c?.numbersList[1]?.number));
3849
3880
  // if (index > -1) {
@@ -3952,7 +3983,7 @@ class CallProgressComponent {
3952
3983
  if ((_c = this.selectedConf) === null || _c === void 0 ? void 0 : _c.conferenceId) {
3953
3984
  let conference = (_d = this.newIncomingCallsList) === null || _d === void 0 ? void 0 : _d.find((res) => { var _a; return (res === null || res === void 0 ? void 0 : res.conferenceId) == ((_a = this.selectedConf) === null || _a === void 0 ? void 0 : _a.conferenceId); });
3954
3985
  let participentInfo = (_e = conference === null || conference === void 0 ? void 0 : conference.participants) === null || _e === void 0 ? void 0 : _e.find((participant) => ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from)
3955
- && (participant === null || participant === void 0 ? void 0 : participant.client)) || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call') && (participant === null || participant === void 0 ? void 0 : participant.client)) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft));
3986
+ && (participant === null || participant === void 0 ? void 0 : participant.client)) || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call' && !(participant === null || participant === void 0 ? void 0 : participant.businessNumber)) && (participant === null || participant === void 0 ? void 0 : participant.client)) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft));
3956
3987
  if (participentInfo === null || participentInfo === void 0 ? void 0 : participentInfo.id) {
3957
3988
  if (this.isInMultipleConferences()) {
3958
3989
  // Show popup instead of directly leaving
@@ -4044,7 +4075,7 @@ class CallProgressComponent {
4044
4075
  var _a;
4045
4076
  console.log(conf);
4046
4077
  const ourParticipant = (_a = conf.participants) === null || _a === void 0 ? void 0 : _a.find((p) => ((this.deviceNumberList.includes(p === null || p === void 0 ? void 0 : p.from) && (p === null || p === void 0 ? void 0 : p.client)) ||
4047
- (this.deviceNumberList.includes(p === null || p === void 0 ? void 0 : p.to) && (p === null || p === void 0 ? void 0 : p.direction) == 'incoming-call')) &&
4078
+ (this.deviceNumberList.includes(p === null || p === void 0 ? void 0 : p.to) && (p === null || p === void 0 ? void 0 : p.direction) == 'incoming-call' && !(p === null || p === void 0 ? void 0 : p.businessNumber))) &&
4048
4079
  !(p === null || p === void 0 ? void 0 : p.isLeft));
4049
4080
  console.log(ourParticipant);
4050
4081
  if (ourParticipant)
@@ -4072,6 +4103,10 @@ class CallProgressComponent {
4072
4103
  return '';
4073
4104
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
4074
4105
  }
4106
+ get totalParticipantsCount() {
4107
+ var _a;
4108
+ return ((_a = this.allParticipentList) === null || _a === void 0 ? void 0 : _a.length) || 0;
4109
+ }
4075
4110
  ngOnDestroy() {
4076
4111
  this.callData.dial = false;
4077
4112
  if (this.timerSubscription) {
@@ -4080,10 +4115,10 @@ class CallProgressComponent {
4080
4115
  }
4081
4116
  }
4082
4117
  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 });
4083
- 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", userSettingInfo: "userSettingInfo", deviceId: "deviceId", callAction: "callAction", conferenceCallInfo: "conferenceCallInfo", incomingFromImage: "incomingFromImage", outgoingContactName: "outgoingContactName" }, 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=\"loader-wrapper outgoing-call-loader\"\r\n *ngIf=\"showNewCallLoader\">\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]=\"newCallLoaderData?.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;\">{{ newCallLoaderData?.name || newCallLoaderData?.phone || 'Unknown' }}</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 <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) && conf?.isNotification && twilioService.getIncomingCallById(conf?.clientSid)\"\r\n [ngClass]=\"{'held-call-selected': selectedUserInfo?.participantId && selectedUserInfo?.participantId === conf?.participantId}\"\r\n (click)=\"conf?.businessNumber ? toggleC2CInfoPanel(conf) : null\"\r\n [ngStyle]=\"{'cursor': conf?.businessNumber ? 'pointer' : 'default'}\">\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\" *ngIf=\"!conf?.businessNumber\">\r\n <span class=\"held-label\">{{conf?.from}}</span>\r\n <span class=\"held-name\">{{conf?.fromName}}</span>\r\n </div>\r\n <div class=\"held-caller\" *ngIf=\"conf?.businessNumber\">\r\n <span class=\"held-main-label\">Call from C2C:</span>\r\n <span class=\"held-label\" ><span [title]=\"conf?.sourceName\">{{ truncateText(conf?.sourceName, 10) }}</span>|\r\n <span [title]=\"conf?.pointName\">{{ truncateText(conf?.pointName, 10) }}</span></span>\r\n <span class=\"held-label\">{{ truncateText(conf?.name, 26) }}</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); $event.stopPropagation();\" [disabled]=\"isConnecting || isIncomingCallBtnDisable\">\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); $event.stopPropagation();\"> call_end </span>\r\n </button>\r\n <div *ngIf=\"conf?.businessNumber\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleC2CInfoPanel(conf)\">\r\n <i class=\"fa fa-info\"></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?.callLabel}}</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]=\"incomingFromImage || 'assets/images/user.jpg'\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\" *ngIf=\"!currentCallList[0]?.businessNumber\">\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 <div class=\"callerDetails\" *ngIf=\"currentCallList[0]?.businessNumber\">\r\n <h3 class=\"c2c-title\"> Call from C2C:\r\n <span title=\"{{ currentCallList[0]?.sourceName }}\">{{ truncateText(currentCallList[0]?.sourceName, 6) }}</span>\r\n |\r\n <span title=\"{{ currentCallList[0]?.pointName }}\">{{ truncateText(currentCallList[0]?.pointName, 6) }}</span>\r\n </h3>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ truncateText(currentCallList[0]?.name, 45) }}</p>\r\n <p >{{ 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 || outgoingContactName || '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 <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, 'disabled': userSettingInfo?.callRecording == 'N'}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"!currentCall?.isAcceptCall || userSettingInfo?.callRecording == 'N'\">\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 <!-- Mute/unmute incoming call -->\r\n <div class=\"mute-incoming-row\" *ngIf=\"currentCall?.isAcceptCall && !showKeypad\">\r\n <span class=\"mute-incoming-label\">Mute incoming calls</span>\r\n <label class=\"switch mb-0\" title=\"Silence the ringtone of new incoming calls during this call\">\r\n <input type=\"checkbox\" [checked]=\"twilioService.isIncomingMuted\" (change)=\"toggleMuteIncomingCall()\">\r\n <span class=\"switch-slider\"></span>\r\n </label>\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\">\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=\"shouldShowSeparator(i)\"> & </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\">{{ currentConferenceCall?.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\" [disabled]=\"userSettingInfo.callRecording == 'N'\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording, 'disabled': userSettingInfo?.callRecording == 'N'}\" (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 <!-- Mute/unmute incoming call -->\r\n <div class=\"mute-incoming-row\" *ngIf=\"currentCall?.isAcceptCall && !showKeypad\">\r\n <span class=\"mute-incoming-label\">Mute incoming calls</span>\r\n <label class=\"switch mb-0\" title=\"Silence the ringtone of new incoming calls during this call\">\r\n <input type=\"checkbox\" [checked]=\"twilioService.isIncomingMuted\" (change)=\"toggleMuteIncomingCall()\">\r\n <span class=\"switch-slider\"></span>\r\n </label>\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=\"close-info-panel-section\">\r\n <div class=\"d-flex justify-content-between\" *ngIf=\"currentConferenceCall?.conferenceId != selectedUserInfo?.conferenceId && newIncomingCallsList?.length > 1\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn \" (click)=\"onCloseC2CInfoPanel()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n 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>\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=\"\" [title]=\"selectedUserInfo?.pointName\">\r\n {{ truncateText(selectedUserInfo?.pointName, 18) }}\r\n </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=\"\" [title]=\"selectedUserInfo?.sourceName\">\r\n {{ truncateText(selectedUserInfo?.sourceName, 18) }}\r\n </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 by name or phone number\" [(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\" *ngIf=\"activeParticipantsCount >= 3\">\r\n {{selectedConfName}}'s active participants ({{activeParticipantsCount}})\r\n </h5>\r\n <h5 class=\"mb-0 title\" *ngIf=\"activeParticipantsCount < 3\">\r\n Active participants ({{activeParticipantsCount}})\r\n </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)=\"confirmLeaveParticipant(c)\"\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 && !c?.businessNumber\"\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 && !c?.businessNumber\"\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\">{{selectedConf?.conName || 'Call'}} Disconnect</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()\" [disabled]=\"isReasonChecked && (!leaveHour || !leaveMinute)\">\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>\r\n<div class=\"custom-modal\" *ngIf=\"showLeaveConfirmationModal\">\r\n <div class=\"modal-content warning-modal\">\r\n <div class=\"warning-icon\">\r\n <span class=\"material-symbols-outlined\">info</span>\r\n </div>\r\n <h3>Leave Conference</h3>\r\n <p>\r\n You are about to leave <strong>{{ leaveConfConferenceName }}</strong>. \r\n Are you sure?\r\n </p>\r\n <div class=\"warning-actions\">\r\n <button class=\"cancel-btn\" (click)=\"cancelLeave()\">Cancel</button>\r\n <button class=\"proceed-btn\" (click)=\"confirmLeave()\">Leave</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}.disabled{opacity:.5!important;pointer-events:none!important}.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;padding:8px 6px;border-bottom:1px dotted #4b4b4b;border-left:3px solid transparent;transition:background .15s ease,border-left-color .15s ease;cursor:pointer}.held-call-content.held-call-selected{background:rgba(255,255,255,.15);border-left-color:#fff;border-radius:0 6px 6px 0}.held-main-label{font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.5px}.fa-info{font-size:smaller!important}.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;min-width:0;overflow:hidden}.contact-name{font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.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}.mute-incoming-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px}.mute-incoming-label{font-size:11px;color:#fff}.switch{position:relative;display:inline-block;width:38px;height:19px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;border-radius:22px;transition:.3s}.close-info-panel-section{width:100%;height:20px}.close-info-panel-section .material-symbols-outlined{font-size:12px}.c2c-title{color:#fff;white-space:normal;word-break:break-word;line-height:1.4}.switch-slider:before{content:\"\";position:absolute;height:14px;width:15px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:.3s}.switch input:checked+.switch-slider{background-color:#2ecc71}.switch input:checked+.switch-slider:before{transform:translate(18px)}.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:45px}.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}}.loader-wrapper.outgoing-call-loader{position:absolute;inset:0;background:linear-gradient(to bottom,#1742DE,#1b369b);z-index:100;display:flex;align-items:center;justify-content:center}\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"] }] });
4118
+ 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", userSettingInfo: "userSettingInfo", deviceId: "deviceId", callAction: "callAction", conferenceCallInfo: "conferenceCallInfo", incomingFromImage: "incomingFromImage", outgoingContactName: "outgoingContactName" }, 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=\"loader-wrapper outgoing-call-loader\"\r\n *ngIf=\"showNewCallLoader\">\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]=\"newCallLoaderData?.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;\">{{ newCallLoaderData?.name || newCallLoaderData?.phone || 'Unknown' }}</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 <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) && conf?.isNotification && twilioService.getIncomingCallById(conf?.clientSid)\"\r\n [ngClass]=\"{'held-call-selected': selectedUserInfo?.participantId && selectedUserInfo?.participantId === conf?.participantId}\"\r\n (click)=\"conf?.businessNumber ? toggleC2CInfoPanel(conf) : null\"\r\n [ngStyle]=\"{'cursor': conf?.businessNumber ? 'pointer' : 'default'}\">\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\" *ngIf=\"!conf?.businessNumber\">\r\n <span class=\"held-label\">{{conf?.from}}</span>\r\n <span class=\"held-name\">{{conf?.fromName}}</span>\r\n </div>\r\n <div class=\"held-caller\" *ngIf=\"conf?.businessNumber\">\r\n <span class=\"held-main-label\">Call from C2C:</span>\r\n <span class=\"held-label\" ><span [title]=\"conf?.sourceName\">{{ truncateText(conf?.sourceName, 10) }}</span>|\r\n <span [title]=\"conf?.pointName\">{{ truncateText(conf?.pointName, 10) }}</span></span>\r\n <span class=\"held-label\">{{ truncateText(conf?.name, 26) }}</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); $event.stopPropagation();\" [disabled]=\"isConnecting || isIncomingCallBtnDisable\">\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); $event.stopPropagation();\"> call_end </span>\r\n </button>\r\n <div *ngIf=\"conf?.businessNumber\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleC2CInfoPanel(conf)\">\r\n <i class=\"fa fa-info\"></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 [ngClass]=\"{'held-call-selected': conf?.isBusinessNumber && selectedUserInfo?.participantId === conf?.businessParticipantId}\"\r\n (click)=\"conf?.isBusinessNumber ? toggleC2CInfoPanel(conf) : null\"\r\n [ngStyle]=\"{'cursor': conf?.isBusinessNumber ? 'pointer' : 'default'}\">\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?.callLabel}}</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]=\"incomingFromImage || 'assets/images/user.jpg'\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\" *ngIf=\"!currentCallList[0]?.businessNumber\">\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 <div class=\"callerDetails\" *ngIf=\"currentCallList[0]?.businessNumber\">\r\n <h3 class=\"c2c-title\"> Call from C2C:\r\n <span title=\"{{ currentCallList[0]?.sourceName }}\">{{ truncateText(currentCallList[0]?.sourceName, 6) }}</span>\r\n |\r\n <span title=\"{{ currentCallList[0]?.pointName }}\">{{ truncateText(currentCallList[0]?.pointName, 6) }}</span>\r\n </h3>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ truncateText(currentCallList[0]?.name, 45) }}</p>\r\n <p >{{ 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 || outgoingContactName || '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 <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, 'disabled': userSettingInfo?.callRecording == 'N'}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"!currentCall?.isAcceptCall || userSettingInfo?.callRecording == 'N'\">\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 <!-- Mute/unmute incoming call -->\r\n <div class=\"mute-incoming-row\" *ngIf=\"currentCall?.isAcceptCall && !showKeypad\">\r\n <span class=\"mute-incoming-label\">Mute incoming calls</span>\r\n <label class=\"switch mb-0\" title=\"Silence the ringtone of new incoming calls during this call\">\r\n <input type=\"checkbox\" [checked]=\"twilioService.isIncomingMuted\" (change)=\"toggleMuteIncomingCall()\">\r\n <span class=\"switch-slider\"></span>\r\n </label>\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\">\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=\"shouldShowSeparator(i)\"> & </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\">{{ currentConferenceCall?.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\" [disabled]=\"userSettingInfo.callRecording == 'N'\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording, 'disabled': userSettingInfo?.callRecording == 'N'}\" (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 <!-- Mute/unmute incoming call -->\r\n <div class=\"mute-incoming-row\" *ngIf=\"currentCall?.isAcceptCall && !showKeypad\">\r\n <span class=\"mute-incoming-label\">Mute incoming calls</span>\r\n <label class=\"switch mb-0\" title=\"Silence the ringtone of new incoming calls during this call\">\r\n <input type=\"checkbox\" [checked]=\"twilioService.isIncomingMuted\" (change)=\"toggleMuteIncomingCall()\">\r\n <span class=\"switch-slider\"></span>\r\n </label>\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=\"close-info-panel-section\">\r\n <div class=\"d-flex justify-content-between\" *ngIf=\"currentConferenceCall?.conferenceId != selectedUserInfo?.conferenceId && newIncomingCallsList?.length > 1\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn \" (click)=\"onCloseC2CInfoPanel()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n 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>\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=\"\" [title]=\"selectedUserInfo?.pointName\">\r\n {{ truncateText(selectedUserInfo?.pointName, 18) }}\r\n </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=\"\" [title]=\"selectedUserInfo?.sourceName\">\r\n {{ truncateText(selectedUserInfo?.sourceName, 18) }}\r\n </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>Participants</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 by name or phone number\" [(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?.image || '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 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 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\" *ngIf=\"totalParticipantsCount >= 3\">\r\n {{selectedConfName}}'s active participants ({{activeParticipantsCount}})\r\n </h5>\r\n <h5 class=\"mb-0 title\" *ngIf=\"totalParticipantsCount < 3\">\r\n Active participants ({{activeParticipantsCount}})\r\n </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)=\"confirmLeaveParticipant(c)\"\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 && !c?.businessNumber\"\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 && !c?.businessNumber\"\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\">{{selectedConf?.conName || 'Call'}} Disconnect</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()\" [disabled]=\"isReasonChecked && (!leaveHour || !leaveMinute)\">\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>\r\n<div class=\"custom-modal\" *ngIf=\"showLeaveConfirmationModal\">\r\n <div class=\"modal-content warning-modal\">\r\n <div class=\"warning-icon\">\r\n <span class=\"material-symbols-outlined\">info</span>\r\n </div>\r\n <h3>Leave Conference</h3>\r\n <p>\r\n You are about to leave <strong>{{ leaveConfConferenceName }}</strong>. \r\n Are you sure?\r\n </p>\r\n <div class=\"warning-actions\">\r\n <button class=\"cancel-btn\" (click)=\"cancelLeave()\">Cancel</button>\r\n <button class=\"proceed-btn\" (click)=\"confirmLeave()\">Leave</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}.disabled{opacity:.5!important;pointer-events:none!important}.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}.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;padding:8px 6px;border-bottom:1px dotted #4b4b4b;border-left:3px solid transparent;transition:background .15s ease,border-left-color .15s ease;cursor:pointer}.held-call-content.held-call-selected{background:rgba(255,255,255,.15);border-left-color:#fff;border-radius:0 6px 6px 0}.held-main-label{font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.5px}.fa-info{font-size:smaller!important}.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;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;border-radius:0 10px 10px}.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;min-width:0;overflow:hidden}.contact-name{font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.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}.mute-incoming-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px}.mute-incoming-label{font-size:11px;color:#fff}.switch{position:relative;display:inline-block;width:38px;height:19px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;border-radius:22px;transition:.3s}.close-info-panel-section{width:100%;height:20px}.close-info-panel-section .material-symbols-outlined{font-size:12px}.c2c-title{color:#fff;white-space:normal;word-break:break-word;line-height:1.4}.switch-slider:before{content:\"\";position:absolute;height:14px;width:15px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:.3s}.switch input:checked+.switch-slider{background-color:#2ecc71}.switch input:checked+.switch-slider:before{transform:translate(18px)}.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:45px}.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}}.loader-wrapper.outgoing-call-loader{position:absolute;inset:0;background:linear-gradient(to bottom,#1742DE,#1b369b);z-index:100;display:flex;align-items:center;justify-content:center}\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"] }] });
4084
4119
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
4085
4120
  type: Component,
4086
- 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=\"loader-wrapper outgoing-call-loader\"\r\n *ngIf=\"showNewCallLoader\">\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]=\"newCallLoaderData?.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;\">{{ newCallLoaderData?.name || newCallLoaderData?.phone || 'Unknown' }}</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 <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) && conf?.isNotification && twilioService.getIncomingCallById(conf?.clientSid)\"\r\n [ngClass]=\"{'held-call-selected': selectedUserInfo?.participantId && selectedUserInfo?.participantId === conf?.participantId}\"\r\n (click)=\"conf?.businessNumber ? toggleC2CInfoPanel(conf) : null\"\r\n [ngStyle]=\"{'cursor': conf?.businessNumber ? 'pointer' : 'default'}\">\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\" *ngIf=\"!conf?.businessNumber\">\r\n <span class=\"held-label\">{{conf?.from}}</span>\r\n <span class=\"held-name\">{{conf?.fromName}}</span>\r\n </div>\r\n <div class=\"held-caller\" *ngIf=\"conf?.businessNumber\">\r\n <span class=\"held-main-label\">Call from C2C:</span>\r\n <span class=\"held-label\" ><span [title]=\"conf?.sourceName\">{{ truncateText(conf?.sourceName, 10) }}</span>|\r\n <span [title]=\"conf?.pointName\">{{ truncateText(conf?.pointName, 10) }}</span></span>\r\n <span class=\"held-label\">{{ truncateText(conf?.name, 26) }}</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); $event.stopPropagation();\" [disabled]=\"isConnecting || isIncomingCallBtnDisable\">\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); $event.stopPropagation();\"> call_end </span>\r\n </button>\r\n <div *ngIf=\"conf?.businessNumber\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleC2CInfoPanel(conf)\">\r\n <i class=\"fa fa-info\"></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?.callLabel}}</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]=\"incomingFromImage || 'assets/images/user.jpg'\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\" *ngIf=\"!currentCallList[0]?.businessNumber\">\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 <div class=\"callerDetails\" *ngIf=\"currentCallList[0]?.businessNumber\">\r\n <h3 class=\"c2c-title\"> Call from C2C:\r\n <span title=\"{{ currentCallList[0]?.sourceName }}\">{{ truncateText(currentCallList[0]?.sourceName, 6) }}</span>\r\n |\r\n <span title=\"{{ currentCallList[0]?.pointName }}\">{{ truncateText(currentCallList[0]?.pointName, 6) }}</span>\r\n </h3>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ truncateText(currentCallList[0]?.name, 45) }}</p>\r\n <p >{{ 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 || outgoingContactName || '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 <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, 'disabled': userSettingInfo?.callRecording == 'N'}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"!currentCall?.isAcceptCall || userSettingInfo?.callRecording == 'N'\">\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 <!-- Mute/unmute incoming call -->\r\n <div class=\"mute-incoming-row\" *ngIf=\"currentCall?.isAcceptCall && !showKeypad\">\r\n <span class=\"mute-incoming-label\">Mute incoming calls</span>\r\n <label class=\"switch mb-0\" title=\"Silence the ringtone of new incoming calls during this call\">\r\n <input type=\"checkbox\" [checked]=\"twilioService.isIncomingMuted\" (change)=\"toggleMuteIncomingCall()\">\r\n <span class=\"switch-slider\"></span>\r\n </label>\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\">\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=\"shouldShowSeparator(i)\"> & </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\">{{ currentConferenceCall?.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\" [disabled]=\"userSettingInfo.callRecording == 'N'\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording, 'disabled': userSettingInfo?.callRecording == 'N'}\" (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 <!-- Mute/unmute incoming call -->\r\n <div class=\"mute-incoming-row\" *ngIf=\"currentCall?.isAcceptCall && !showKeypad\">\r\n <span class=\"mute-incoming-label\">Mute incoming calls</span>\r\n <label class=\"switch mb-0\" title=\"Silence the ringtone of new incoming calls during this call\">\r\n <input type=\"checkbox\" [checked]=\"twilioService.isIncomingMuted\" (change)=\"toggleMuteIncomingCall()\">\r\n <span class=\"switch-slider\"></span>\r\n </label>\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=\"close-info-panel-section\">\r\n <div class=\"d-flex justify-content-between\" *ngIf=\"currentConferenceCall?.conferenceId != selectedUserInfo?.conferenceId && newIncomingCallsList?.length > 1\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn \" (click)=\"onCloseC2CInfoPanel()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n 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>\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=\"\" [title]=\"selectedUserInfo?.pointName\">\r\n {{ truncateText(selectedUserInfo?.pointName, 18) }}\r\n </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=\"\" [title]=\"selectedUserInfo?.sourceName\">\r\n {{ truncateText(selectedUserInfo?.sourceName, 18) }}\r\n </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 by name or phone number\" [(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\" *ngIf=\"activeParticipantsCount >= 3\">\r\n {{selectedConfName}}'s active participants ({{activeParticipantsCount}})\r\n </h5>\r\n <h5 class=\"mb-0 title\" *ngIf=\"activeParticipantsCount < 3\">\r\n Active participants ({{activeParticipantsCount}})\r\n </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)=\"confirmLeaveParticipant(c)\"\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 && !c?.businessNumber\"\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 && !c?.businessNumber\"\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\">{{selectedConf?.conName || 'Call'}} Disconnect</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()\" [disabled]=\"isReasonChecked && (!leaveHour || !leaveMinute)\">\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>\r\n<div class=\"custom-modal\" *ngIf=\"showLeaveConfirmationModal\">\r\n <div class=\"modal-content warning-modal\">\r\n <div class=\"warning-icon\">\r\n <span class=\"material-symbols-outlined\">info</span>\r\n </div>\r\n <h3>Leave Conference</h3>\r\n <p>\r\n You are about to leave <strong>{{ leaveConfConferenceName }}</strong>. \r\n Are you sure?\r\n </p>\r\n <div class=\"warning-actions\">\r\n <button class=\"cancel-btn\" (click)=\"cancelLeave()\">Cancel</button>\r\n <button class=\"proceed-btn\" (click)=\"confirmLeave()\">Leave</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}.disabled{opacity:.5!important;pointer-events:none!important}.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;padding:8px 6px;border-bottom:1px dotted #4b4b4b;border-left:3px solid transparent;transition:background .15s ease,border-left-color .15s ease;cursor:pointer}.held-call-content.held-call-selected{background:rgba(255,255,255,.15);border-left-color:#fff;border-radius:0 6px 6px 0}.held-main-label{font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.5px}.fa-info{font-size:smaller!important}.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;min-width:0;overflow:hidden}.contact-name{font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.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}.mute-incoming-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px}.mute-incoming-label{font-size:11px;color:#fff}.switch{position:relative;display:inline-block;width:38px;height:19px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;border-radius:22px;transition:.3s}.close-info-panel-section{width:100%;height:20px}.close-info-panel-section .material-symbols-outlined{font-size:12px}.c2c-title{color:#fff;white-space:normal;word-break:break-word;line-height:1.4}.switch-slider:before{content:\"\";position:absolute;height:14px;width:15px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:.3s}.switch input:checked+.switch-slider{background-color:#2ecc71}.switch input:checked+.switch-slider:before{transform:translate(18px)}.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:45px}.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}}.loader-wrapper.outgoing-call-loader{position:absolute;inset:0;background:linear-gradient(to bottom,#1742DE,#1b369b);z-index:100;display:flex;align-items:center;justify-content:center}\n"] }]
4121
+ 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=\"loader-wrapper outgoing-call-loader\"\r\n *ngIf=\"showNewCallLoader\">\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]=\"newCallLoaderData?.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;\">{{ newCallLoaderData?.name || newCallLoaderData?.phone || 'Unknown' }}</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 <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) && conf?.isNotification && twilioService.getIncomingCallById(conf?.clientSid)\"\r\n [ngClass]=\"{'held-call-selected': selectedUserInfo?.participantId && selectedUserInfo?.participantId === conf?.participantId}\"\r\n (click)=\"conf?.businessNumber ? toggleC2CInfoPanel(conf) : null\"\r\n [ngStyle]=\"{'cursor': conf?.businessNumber ? 'pointer' : 'default'}\">\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\" *ngIf=\"!conf?.businessNumber\">\r\n <span class=\"held-label\">{{conf?.from}}</span>\r\n <span class=\"held-name\">{{conf?.fromName}}</span>\r\n </div>\r\n <div class=\"held-caller\" *ngIf=\"conf?.businessNumber\">\r\n <span class=\"held-main-label\">Call from C2C:</span>\r\n <span class=\"held-label\" ><span [title]=\"conf?.sourceName\">{{ truncateText(conf?.sourceName, 10) }}</span>|\r\n <span [title]=\"conf?.pointName\">{{ truncateText(conf?.pointName, 10) }}</span></span>\r\n <span class=\"held-label\">{{ truncateText(conf?.name, 26) }}</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); $event.stopPropagation();\" [disabled]=\"isConnecting || isIncomingCallBtnDisable\">\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); $event.stopPropagation();\"> call_end </span>\r\n </button>\r\n <div *ngIf=\"conf?.businessNumber\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleC2CInfoPanel(conf)\">\r\n <i class=\"fa fa-info\"></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 [ngClass]=\"{'held-call-selected': conf?.isBusinessNumber && selectedUserInfo?.participantId === conf?.businessParticipantId}\"\r\n (click)=\"conf?.isBusinessNumber ? toggleC2CInfoPanel(conf) : null\"\r\n [ngStyle]=\"{'cursor': conf?.isBusinessNumber ? 'pointer' : 'default'}\">\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?.callLabel}}</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]=\"incomingFromImage || 'assets/images/user.jpg'\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\" *ngIf=\"!currentCallList[0]?.businessNumber\">\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 <div class=\"callerDetails\" *ngIf=\"currentCallList[0]?.businessNumber\">\r\n <h3 class=\"c2c-title\"> Call from C2C:\r\n <span title=\"{{ currentCallList[0]?.sourceName }}\">{{ truncateText(currentCallList[0]?.sourceName, 6) }}</span>\r\n |\r\n <span title=\"{{ currentCallList[0]?.pointName }}\">{{ truncateText(currentCallList[0]?.pointName, 6) }}</span>\r\n </h3>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ truncateText(currentCallList[0]?.name, 45) }}</p>\r\n <p >{{ 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 || outgoingContactName || '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 <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, 'disabled': userSettingInfo?.callRecording == 'N'}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"!currentCall?.isAcceptCall || userSettingInfo?.callRecording == 'N'\">\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 <!-- Mute/unmute incoming call -->\r\n <div class=\"mute-incoming-row\" *ngIf=\"currentCall?.isAcceptCall && !showKeypad\">\r\n <span class=\"mute-incoming-label\">Mute incoming calls</span>\r\n <label class=\"switch mb-0\" title=\"Silence the ringtone of new incoming calls during this call\">\r\n <input type=\"checkbox\" [checked]=\"twilioService.isIncomingMuted\" (change)=\"toggleMuteIncomingCall()\">\r\n <span class=\"switch-slider\"></span>\r\n </label>\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\">\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=\"shouldShowSeparator(i)\"> & </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\">{{ currentConferenceCall?.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\" [disabled]=\"userSettingInfo.callRecording == 'N'\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording, 'disabled': userSettingInfo?.callRecording == 'N'}\" (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 <!-- Mute/unmute incoming call -->\r\n <div class=\"mute-incoming-row\" *ngIf=\"currentCall?.isAcceptCall && !showKeypad\">\r\n <span class=\"mute-incoming-label\">Mute incoming calls</span>\r\n <label class=\"switch mb-0\" title=\"Silence the ringtone of new incoming calls during this call\">\r\n <input type=\"checkbox\" [checked]=\"twilioService.isIncomingMuted\" (change)=\"toggleMuteIncomingCall()\">\r\n <span class=\"switch-slider\"></span>\r\n </label>\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=\"close-info-panel-section\">\r\n <div class=\"d-flex justify-content-between\" *ngIf=\"currentConferenceCall?.conferenceId != selectedUserInfo?.conferenceId && newIncomingCallsList?.length > 1\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn \" (click)=\"onCloseC2CInfoPanel()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n 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>\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=\"\" [title]=\"selectedUserInfo?.pointName\">\r\n {{ truncateText(selectedUserInfo?.pointName, 18) }}\r\n </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=\"\" [title]=\"selectedUserInfo?.sourceName\">\r\n {{ truncateText(selectedUserInfo?.sourceName, 18) }}\r\n </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>Participants</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 by name or phone number\" [(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?.image || '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 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 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\" *ngIf=\"totalParticipantsCount >= 3\">\r\n {{selectedConfName}}'s active participants ({{activeParticipantsCount}})\r\n </h5>\r\n <h5 class=\"mb-0 title\" *ngIf=\"totalParticipantsCount < 3\">\r\n Active participants ({{activeParticipantsCount}})\r\n </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)=\"confirmLeaveParticipant(c)\"\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 && !c?.businessNumber\"\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 && !c?.businessNumber\"\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\">{{selectedConf?.conName || 'Call'}} Disconnect</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()\" [disabled]=\"isReasonChecked && (!leaveHour || !leaveMinute)\">\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>\r\n<div class=\"custom-modal\" *ngIf=\"showLeaveConfirmationModal\">\r\n <div class=\"modal-content warning-modal\">\r\n <div class=\"warning-icon\">\r\n <span class=\"material-symbols-outlined\">info</span>\r\n </div>\r\n <h3>Leave Conference</h3>\r\n <p>\r\n You are about to leave <strong>{{ leaveConfConferenceName }}</strong>. \r\n Are you sure?\r\n </p>\r\n <div class=\"warning-actions\">\r\n <button class=\"cancel-btn\" (click)=\"cancelLeave()\">Cancel</button>\r\n <button class=\"proceed-btn\" (click)=\"confirmLeave()\">Leave</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}.disabled{opacity:.5!important;pointer-events:none!important}.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}.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;padding:8px 6px;border-bottom:1px dotted #4b4b4b;border-left:3px solid transparent;transition:background .15s ease,border-left-color .15s ease;cursor:pointer}.held-call-content.held-call-selected{background:rgba(255,255,255,.15);border-left-color:#fff;border-radius:0 6px 6px 0}.held-main-label{font-size:13px;color:#fff;text-transform:uppercase;letter-spacing:.5px}.fa-info{font-size:smaller!important}.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;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;border-radius:0 10px 10px}.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;min-width:0;overflow:hidden}.contact-name{font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.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}.mute-incoming-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px}.mute-incoming-label{font-size:11px;color:#fff}.switch{position:relative;display:inline-block;width:38px;height:19px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch-slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;border-radius:22px;transition:.3s}.close-info-panel-section{width:100%;height:20px}.close-info-panel-section .material-symbols-outlined{font-size:12px}.c2c-title{color:#fff;white-space:normal;word-break:break-word;line-height:1.4}.switch-slider:before{content:\"\";position:absolute;height:14px;width:15px;left:3px;bottom:3px;background-color:#fff;border-radius:50%;transition:.3s}.switch input:checked+.switch-slider{background-color:#2ecc71}.switch input:checked+.switch-slider:before{transform:translate(18px)}.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:45px}.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}}.loader-wrapper.outgoing-call-loader{position:absolute;inset:0;background:linear-gradient(to bottom,#1742DE,#1b369b);z-index:100;display:flex;align-items:center;justify-content:center}\n"] }]
4087
4122
  }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: TwilioService }, { type: IpAddressService }, { type: IncomeingCallSocketService }]; }, propDecorators: { callData: [{
4088
4123
  type: Input
4089
4124
  }], selectedCallerId: [{
@@ -4406,7 +4441,6 @@ class DialboxComponent {
4406
4441
  // Ensure Twilio is initialized even when dialpad starts hidden,
4407
4442
  // so we can auto-open on incoming calls.
4408
4443
  this.initializeTwilio();
4409
- this.extService.getIpInfo();
4410
4444
  this.incomeingCallSocketService.connect(this.deviceId);
4411
4445
  try {
4412
4446
  this.incomeingCallSocketService.listen().subscribe((incomingCallData) => __awaiter(this, void 0, void 0, function* () {
@@ -4724,6 +4758,7 @@ class DialboxComponent {
4724
4758
  }
4725
4759
  if (changes['deviceId']) {
4726
4760
  this.twilioService.deviceId = changes['deviceId'].currentValue;
4761
+ this.extService.getIpInfo();
4727
4762
  }
4728
4763
  if (((_4 = changes['updatedTwilioToken']) === null || _4 === void 0 ? void 0 : _4.currentValue) && this.updatedTwilioToken) {
4729
4764
  this.twilioService.incomingCallToken = this.updatedTwilioToken;
@@ -4825,6 +4860,7 @@ class DialboxComponent {
4825
4860
  }
4826
4861
  if ((_7 = changes['callAction']) === null || _7 === void 0 ? void 0 : _7.currentValue) {
4827
4862
  if (((_8 = this.callAction) === null || _8 === void 0 ? void 0 : _8.type) == 'reJoin') {
4863
+ this.extService.getIpInfo();
4828
4864
  this.isCallInProgress = true;
4829
4865
  }
4830
4866
  else if ((_9 = this.callAction) === null || _9 === void 0 ? void 0 : _9.conferenceId) {