@vgroup/dialbox 0.6.3-0.5 → 0.6.3-0.55

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 (13) hide show
  1. package/esm2020/lib/components/call-progress/call-progress.component.mjs +357 -677
  2. package/esm2020/lib/dialbox.component.mjs +35 -71
  3. package/esm2020/lib/dialbox.module.mjs +1 -1
  4. package/esm2020/lib/service/extension.service.mjs +14 -3
  5. package/esm2020/public-api.mjs +1 -1
  6. package/fesm2015/vgroup-dialbox.mjs +396 -705
  7. package/fesm2015/vgroup-dialbox.mjs.map +1 -1
  8. package/fesm2020/vgroup-dialbox.mjs +403 -748
  9. package/fesm2020/vgroup-dialbox.mjs.map +1 -1
  10. package/lib/components/call-progress/call-progress.component.d.ts +11 -7
  11. package/lib/dialbox.component.d.ts +4 -1
  12. package/lib/service/extension.service.d.ts +1 -0
  13. package/package.json +1 -1
package/fesm2015/vgroup-dialbox.mjs CHANGED
@@ -1179,8 +1179,10 @@ class ExtensionService {
1179
1179
  const params = new HttpParams()
1180
1180
  .set('page', (pageIndex === null || pageIndex === void 0 ? void 0 : pageIndex.toString()) || '1')
1181
1181
  .set('size', (pageSize === null || pageSize === void 0 ? void 0 : pageSize.toString()) || '10');
1182
- const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }),
1183
- params: params };
1182
+ const httpOptions = {
1183
+ headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }),
1184
+ params: params
1185
+ };
1184
1186
  return this.http.post(environment.apiUrl + '/utilities/report/user/details', filterObj, httpOptions);
1185
1187
  }
1186
1188
  getReportsFilter() {
@@ -1396,6 +1398,15 @@ class ExtensionService {
1396
1398
  };
1397
1399
  return this.http.delete(environment.apiUrl + `/admin/delete/value/usage/${userIds}`, httpOptions);
1398
1400
  }
1401
+ setTimerForEndConferenceCall(payload) {
1402
+ const httpOptions = {
1403
+ headers: new HttpHeaders({
1404
+ 'Content-Type': 'application/json',
1405
+ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token')
1406
+ })
1407
+ };
1408
+ return this.http.post(environment.apiUrl + `/utilities/ext/end/conference`, payload, httpOptions);
1409
+ }
1399
1410
  getUserInformation(twilioAuthId) {
1400
1411
  const httpOptions = {
1401
1412
  headers: new HttpHeaders({
@@ -1712,9 +1723,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1712
1723
  }] });
1713
1724
 
1714
1725
  class CallProgressComponent {
1715
- // audioURL:any = '/projects/dialbox/src/lib/shared/incoming_call.mp3';
1716
- // /projects/dialbox/src/lib/shared/incoming_call.mp3
1717
- // incomingAudio!: HTMLAudioElement;
1718
1726
  constructor(extensionService, cdr, twilioService, ipService, incomeingCallSocketService) {
1719
1727
  this.extensionService = extensionService;
1720
1728
  this.cdr = cdr;
@@ -1740,7 +1748,6 @@ class CallProgressComponent {
1740
1748
  this.isOutgoingCall = true;
1741
1749
  // Incoming call variables
1742
1750
  this.incomingCallDiv = false;
1743
- //@Output() showCallProgressEvent: EventEmitter<void> = new EventEmitter<void>();
1744
1751
  this.incomingCallInitiated = new EventEmitter();
1745
1752
  this.isLoadershow = new EventEmitter();
1746
1753
  this.endIncomingCallEvent = new EventEmitter();
@@ -1774,15 +1781,14 @@ class CallProgressComponent {
1774
1781
  this.isIncomingCallBtnDisable = false;
1775
1782
  this.isNewAddedCall = false;
1776
1783
  this.deviceNumberList = [];
1777
- this.micOn = false;
1784
+ this.ourNumberInfo = {};
1785
+ this.currentConferenceCall = {};
1786
+ this.isReasonChecked = false;
1787
+ this.leaveReason = '';
1778
1788
  this.isMinimised = false;
1779
1789
  this.showDisconnectModal = false;
1780
1790
  console.log('Call Progress Component');
1781
1791
  this.call = this.twilioService.call;
1782
- // this.incomingAudio = this.createAudioFromBase64(
1783
- // INCOMING_CALL_AUDIO_BASE64,
1784
- // 'audio/mpeg' // use audio/wav if needed
1785
- // );
1786
1792
  }
1787
1793
  ngOnInit() {
1788
1794
  console.log('Call Progress Component ngOnInit');
@@ -1809,7 +1815,7 @@ class CallProgressComponent {
1809
1815
  this.GetContactsList();
1810
1816
  }
1811
1817
  ngOnChanges(changes) {
1812
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
1818
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
1813
1819
  if (this.userId) {
1814
1820
  this.extensionService.userId = this.userId;
1815
1821
  }
@@ -1824,83 +1830,55 @@ class CallProgressComponent {
1824
1830
  this.startCall(changes['callData'].currentValue);
1825
1831
  }
1826
1832
  }
1827
- if ((_h = changes['newIncomingCallsList']) === null || _h === void 0 ? void 0 : _h.currentValue) {
1828
- if ((_j = this.newIncomingCallsList) === null || _j === void 0 ? void 0 : _j.length) {
1829
- if (!((_k = this.deviceNumberList) === null || _k === void 0 ? void 0 : _k.length)) {
1833
+ if (((_j = (_h = changes['newIncomingCallsList']) === null || _h === void 0 ? void 0 : _h.currentValue) === null || _j === void 0 ? void 0 : _j.length) || ((_l = (_k = changes['newIncomingCallsList']) === null || _k === void 0 ? void 0 : _k.previousValue) === null || _l === void 0 ? void 0 : _l.length)) {
1834
+ if ((_m = this.newIncomingCallsList) === null || _m === void 0 ? void 0 : _m.length) {
1835
+ if (!((_o = this.deviceNumberList) === null || _o === void 0 ? void 0 : _o.length)) {
1830
1836
  this.deviceNumberList = this.callerIdList.map((res) => res.number);
1831
1837
  }
1832
1838
  this.newIncomingCallsList.forEach((callInfo, i) => {
1833
1839
  this.conferenceId = i == 0 ? this.newIncomingCallsList[i].conferenceId : this.conferenceId;
1834
- let ourNumber = this.newIncomingCallsList[i].participants.find((resData) => (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) || this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.to)) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
1835
- if (ourNumber === null || ourNumber === void 0 ? void 0 : ourNumber.id) {
1840
+ 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.to) == 'c2c_softphone_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));
1841
+ this.isMute = !(ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isHold) ? ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isMute : this.isMute;
1842
+ if (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id) {
1836
1843
  this.newIncomingCallsList[i].participants.forEach((res) => __awaiter(this, void 0, void 0, function* () {
1837
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
1838
- if ((res === null || res === void 0 ? void 0 : res.to) == 'c2c_softphone_client' && this.deviceNumberList.includes(res === null || res === void 0 ? void 0 : res.from)) {
1844
+ var _a, _b, _c, _d, _e, _f, _g, _h;
1845
+ if ((res === null || res === void 0 ? void 0 : res.to) == 'c2c_softphone_client' && !(res === null || res === void 0 ? void 0 : res.isLeft)) {
1839
1846
  this.hostnumber = res;
1840
1847
  }
1841
1848
  else {
1842
1849
  let contact = {};
1843
1850
  if ((_a = this.contacts) === null || _a === void 0 ? void 0 : _a.length) {
1844
- contact = this.contacts.find((resData) => { var _a; return ((_a = resData === null || resData === void 0 ? void 0 : resData.numbersList[0]) === null || _a === void 0 ? void 0 : _a.number) == (res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to); });
1851
+ contact = this.contacts.find((resData) => { var _a; return ((_a = resData === null || resData === void 0 ? void 0 : resData.numbersList[0]) === null || _a === void 0 ? void 0 : _a.number) == ((res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to); });
1845
1852
  }
1846
- if (this.currentCallList.length > 0) {
1847
- let index = this.currentCallList.findIndex((item) => item.id == res.id);
1853
+ if (((_b = this.currentCallList) === null || _b === void 0 ? void 0 : _b.length) > 0) {
1854
+ let index = this.currentCallList.findIndex((item) => (item === null || item === void 0 ? void 0 : item.id) == (res === null || res === void 0 ? void 0 : res.id));
1848
1855
  if (index == -1 && !res.isLeft) {
1849
- this.currentCallList.push(Object.assign(Object.assign({}, res), { img: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: res.direction == "incoming-call", isHold: res.isHold, isMute: false, isConference: res.isConference, isAcceptCall: res.direction == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res.id, conferenceSid: callInfo.conferenceSid, name: res.name || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference(res.joinedAt || new Date().toUTCString()) }));
1856
+ this.currentCallList.push(Object.assign(Object.assign({}, res), { img: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call", isHold: res === null || res === void 0 ? void 0 : res.isHold, isConferenceHold: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isHold) || false, isMute: false, isConference: (res === null || res === void 0 ? void 0 : res.isConference) || this.isConference, isAcceptCall: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res === null || res === void 0 ? void 0 : res.id, conferenceSid: callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceSid, name: (res === null || res === void 0 ? void 0 : res.name) || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference((res === null || res === void 0 ? void 0 : res.joinedAt) || new Date().toUTCString()) }));
1850
1857
  if (this.showContactsPanel) {
1851
- this.getAllParticipants(this.currentCall.conferenceSid);
1858
+ this.getAllParticipants((_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.conferenceSid);
1852
1859
  this.applyFilter();
1853
1860
  }
1854
1861
  }
1855
- else if (index != -1 && res.isLeft) {
1856
- if (((_b = this.currentCallList[index]) === null || _b === void 0 ? void 0 : _b.id) == ((_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.id)) {
1862
+ else if (index != -1 && (res === null || res === void 0 ? void 0 : res.isLeft)) {
1863
+ if (((_d = this.currentCallList[index]) === null || _d === void 0 ? void 0 : _d.id) == ((_e = this.currentCall) === null || _e === void 0 ? void 0 : _e.id)) {
1857
1864
  this.currentCallList.splice(index, 1);
1858
- this.currentCall = this.currentCallList.length > 0 ? this.currentCallList[0] : {};
1859
- if (((_d = this.currentCall) === null || _d === void 0 ? void 0 : _d.isHold) && !((_e = this.currentCall) === null || _e === void 0 ? void 0 : _e.isConference)) {
1860
- yield this.onholdOrUnholdParticipant({
1861
- participantId: [(_f = this.currentCall) === null || _f === void 0 ? void 0 : _f.participantId],
1862
- conferenceId: (_g = this.currentCall) === null || _g === void 0 ? void 0 : _g.conferenceId,
1863
- hold: false,
1864
- mute: ((_h = this.currentCall) === null || _h === void 0 ? void 0 : _h.mute) || false,
1865
- conference: (_j = this.currentCall) === null || _j === void 0 ? void 0 : _j.isConference
1866
- });
1867
- }
1868
- else if (((_k = this.currentCall) === null || _k === void 0 ? void 0 : _k.isHold) && ((_l = this.currentCall) === null || _l === void 0 ? void 0 : _l.isConference)) {
1869
- let conferenceCalllist = this.currentCallList.filter((item) => { var _a; return item.isConference && item.conferenceId == ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.conferenceId); });
1870
- if (conferenceCalllist.length > 0) {
1871
- // await this.onholdOrUnholdParticipant({
1872
- // participantId: conferenceCalllist.map((item: any) => item.participantId),
1873
- // conferenceId: conferenceCalllist[0]?.conferenceId,
1874
- // hold: false,
1875
- // mute: this.currentCall?.mute || false,
1876
- // conference: this.currentCall?.isConference || false
1877
- // });
1878
- yield this.onholdOrUnholdParticipant({
1879
- participantId: [(_m = this.hostnumber) === null || _m === void 0 ? void 0 : _m.participantId],
1880
- conferenceId: (_o = this.currentCall) === null || _o === void 0 ? void 0 : _o.conferenceId,
1881
- hold: false,
1882
- mute: ((_p = this.currentCall) === null || _p === void 0 ? void 0 : _p.mute) || false,
1883
- conference: (_q = this.currentCall) === null || _q === void 0 ? void 0 : _q.isConference
1884
- });
1885
- this.isConferenceCallHold = false;
1886
- }
1887
- }
1865
+ this.currentCall = ((_f = this.currentCallList) === null || _f === void 0 ? void 0 : _f.length) > 0 ? this.currentCallList[0] : {};
1888
1866
  }
1889
1867
  else {
1890
1868
  this.currentCallList.splice(index, 1);
1891
1869
  }
1892
1870
  if (this.showContactsPanel) {
1893
- this.getAllParticipants(this.currentCall.conferenceSid);
1871
+ this.getAllParticipants((_g = this.currentCall) === null || _g === void 0 ? void 0 : _g.conferenceSid);
1894
1872
  this.applyFilter();
1895
1873
  }
1896
1874
  }
1897
1875
  else if (index != -1) {
1898
- this.currentCallList[index] = Object.assign(Object.assign({}, res), { img: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: res.direction == "incoming-call", isHold: res.isHold, isMute: false, isConference: res.isConference, isAcceptCall: res.direction == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res.id, conferenceSid: callInfo.conferenceSid, name: res.name || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference(res.joinedAt || new Date().toUTCString()) });
1876
+ this.currentCallList[index] = Object.assign(Object.assign({}, res), { img: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call", isHold: res === null || res === void 0 ? void 0 : res.isHold, isConferenceHold: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isHold) || false, isMute: res === null || res === void 0 ? void 0 : res.isMute, isConference: (res === null || res === void 0 ? void 0 : res.isConference) || this.isConference, isAcceptCall: res.direction == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res === null || res === void 0 ? void 0 : res.id, conferenceSid: callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceSid, name: (res === null || res === void 0 ? void 0 : res.name) || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference((res === null || res === void 0 ? void 0 : res.joinedAt) || new Date().toUTCString()) });
1899
1877
  }
1900
1878
  }
1901
1879
  else if (!res.isLeft) {
1902
- this.currentCallList.push(Object.assign(Object.assign({}, res), { img: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: res.direction == "incoming-call", isHold: res.isHold, isMute: false, isConference: res.isConference, isAcceptCall: res.direction == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res.id, conferenceSid: callInfo.conferenceSid, name: res.name || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference(res.joinedAt || new Date().toUTCString()) }));
1903
- if (((_r = this.currentCallList) === null || _r === void 0 ? void 0 : _r.length) == 1) {
1880
+ this.currentCallList.push(Object.assign(Object.assign({}, res), { img: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: res.direction == "incoming-call", isHold: res === null || res === void 0 ? void 0 : res.isHold, isConferenceHold: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isHold) || false, isMute: res === null || res === void 0 ? void 0 : res.isMute, isConference: res.isConference, isAcceptCall: res.direction == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res.id, conferenceSid: callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceSid, name: (res === null || res === void 0 ? void 0 : res.name) || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference((res === null || res === void 0 ? void 0 : res.joinedAt) || new Date().toUTCString()) }));
1881
+ if (((_h = this.currentCallList) === null || _h === void 0 ? void 0 : _h.length) == 1) {
1904
1882
  this.currentCall = this.currentCallList[0];
1905
1883
  }
1906
1884
  this.timer = '00:00';
@@ -1933,82 +1911,81 @@ class CallProgressComponent {
1933
1911
  });
1934
1912
  let validValues = new Set(this.newIncomingCallsList.flatMap((item) => item === null || item === void 0 ? void 0 : item.participants.map((val) => val === null || val === void 0 ? void 0 : val.id)));
1935
1913
  this.currentCallList = this.currentCallList.filter((item) => validValues.has(item === null || item === void 0 ? void 0 : item.participantId));
1936
- this.currentCall = this.currentCallList.find((res) => { var _a; return ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.participantId) == (res === null || res === void 0 ? void 0 : res.participantId); });
1937
- let currentCall = this.currentCallList.filter((item) => (item === null || item === void 0 ? void 0 : item.isAcceptCall) && !(item === null || item === void 0 ? void 0 : item.isHold));
1938
- if ((currentCall === null || currentCall === void 0 ? void 0 : currentCall.length) == 1 && ((_l = currentCall[0]) === null || _l === void 0 ? void 0 : _l.id)) {
1914
+ this.currentCall = this.currentCallList.find((res) => { var _a; return ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.participantId) == (res === null || res === void 0 ? void 0 : res.participantId) && !(res === null || res === void 0 ? void 0 : res.isConferenceHold); });
1915
+ let currentCall = this.currentCallList.filter((item) => (item === null || item === void 0 ? void 0 : item.isAcceptCall) && !(item === null || item === void 0 ? void 0 : item.isConferenceHold));
1916
+ this.currentConferenceCall = this.newIncomingCallsList.find((item) => {
1917
+ var _a;
1918
+ return (_a = item === null || item === void 0 ? void 0 : item.participants) === null || _a === void 0 ? void 0 : _a.find((participant) => {
1919
+ return ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from) && (participant === null || participant === void 0 ? void 0 : participant.to) === 'c2c_softphone_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) && !(participant === null || participant === void 0 ? void 0 : participant.isHold);
1920
+ });
1921
+ });
1922
+ if ((currentCall === null || currentCall === void 0 ? void 0 : currentCall.length) == 1 && ((_p = currentCall[0]) === null || _p === void 0 ? void 0 : _p.id)) {
1939
1923
  this.currentCall = currentCall[0] || this.currentCallList[0];
1940
1924
  }
1941
- else if ((currentCall === null || currentCall === void 0 ? void 0 : currentCall.length) > 1 && ((_m = currentCall[0]) === null || _m === void 0 ? void 0 : _m.isConference)) {
1942
- this.currentCall = currentCall[0] || this.currentCallList[0];
1925
+ else if ((currentCall === null || currentCall === void 0 ? void 0 : currentCall.length) > 1 && ((_q = currentCall[1]) === null || _q === void 0 ? void 0 : _q.isConference)) {
1926
+ this.currentCall = currentCall[1] || this.currentCallList[1];
1943
1927
  this.isConference = true;
1944
1928
  }
1945
- if (!this.currentCall && !this.isNewAddedCall) {
1946
- this.currentCall = this.currentCallList.find((res) => { var _a; return (res === null || res === void 0 ? void 0 : res.participantId) == ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.participantId) && (res === null || res === void 0 ? void 0 : res.isAcceptCall) && !(res === null || res === void 0 ? void 0 : res.isHold); });
1947
- if (!((_o = this.currentCall) === null || _o === void 0 ? void 0 : _o.participantId)) {
1948
- this.currentCall = this.currentCallList[0];
1949
- if (((_p = this.currentCallList[0]) === null || _p === void 0 ? void 0 : _p.isHold) && ((_q = this.currentCallList[0]) === null || _q === void 0 ? void 0 : _q.isConference)) {
1950
- this.isConference = true;
1951
- this.onholdOrUnholdParticipant({
1952
- participantId: [(_r = this.currentCall) === null || _r === void 0 ? void 0 : _r.participantId],
1953
- conferenceId: (_s = this.currentCall) === null || _s === void 0 ? void 0 : _s.conferenceId,
1954
- hold: false,
1955
- mute: ((_t = this.currentCall) === null || _t === void 0 ? void 0 : _t.mute) || false,
1956
- conference: ((_u = this.currentCall) === null || _u === void 0 ? void 0 : _u.isConference) || false
1957
- });
1958
- // this.currentCallList.forEach((res) => {
1959
- // if (res.isConference && this.currentCall?.participantId) {
1960
- // this.onholdOrUnholdParticipant({
1961
- // participantId: [res.participantId],
1962
- // conferenceId: res?.conferenceId,
1963
- // hold: false,
1964
- // mute: res?.mute || false,
1965
- // conference: res?.isConference || false
1966
- // });
1967
- // }
1968
- // })
1969
- }
1970
- else if ((_v = this.currentCall) === null || _v === void 0 ? void 0 : _v.isHold) {
1929
+ if (!this.currentConferenceCall && !this.isNewAddedCall) {
1930
+ // this.currentConferenceCall = this.newIncomingCallsList.find((item: any) => {
1931
+ // return ((this.deviceNumberList.includes(item?.from) && item?.to === 'c2c_softphone_client') || this.deviceNumberList.includes(item?.to)) && !item?.isLeft && !item?.isHold
1932
+ // });
1933
+ // this.currentCall = this.currentCallList.find((res: any) => res?.participantId == this.currentCall?.participantId && res?.isAcceptCall && !res?.isConferenceHold)
1934
+ // if (!this.currentConferenceCall?.id && this.currentCallList?.length) {
1935
+ // this.currentConferenceCall = this.newIncomingCallsList.find((item: any) => {
1936
+ // return ((this.deviceNumberList.includes(item?.from) && item?.to === 'c2c_softphone_client') || this.deviceNumberList.includes(item?.to)) && !item?.isLeft && item?.isHold
1937
+ // });
1938
+ // let calldetail = this.currentConferenceCall.find((resInfo: any) => ((this.deviceNumberList.includes(resInfo?.from) && resInfo?.to === 'c2c_softphone_client') || this.deviceNumberList.includes(resInfo?.to)) && !resInfo?.isLeft && resInfo?.isHold)
1939
+ // if (calldetail?.isHold) {
1940
+ // this.isConference = true;
1941
+ // this.onholdOrUnholdParticipant({
1942
+ // participantId: [calldetail?.id || calldetail?.participantId],
1943
+ // conferenceId: calldetail?.conferenceId,
1944
+ // hold: false,
1945
+ // mute: calldetail?.mute || false,
1946
+ // conference: calldetail?.isConference || false
1947
+ // });
1948
+ // }
1949
+ // }
1950
+ // if (!this.currentCall?.participantId) {
1951
+ // this.currentCall = this.currentCallList[0];
1952
+ // if (this.currentCallList[0]?.isConferenceHold && this.currentCallList[0]?.isConference) {
1953
+ // this.isConference = true;
1954
+ // this.onholdOrUnholdParticipant({
1955
+ // participantId: [this.currentCall?.participantId],
1956
+ // conferenceId: this.currentCall?.conferenceId,
1957
+ // hold: false,
1958
+ // mute: this.currentCall?.mute || false,
1959
+ // conference: this.currentCall?.isConference || false
1960
+ // });
1961
+ // } else if (this.currentCall?.isConferenceHold) {
1962
+ // this.onholdOrUnholdParticipant({
1963
+ // participantId: [this.currentCall?.participantId],
1964
+ // conferenceId: this.currentCall?.conferenceId,
1965
+ // hold: false,
1966
+ // mute: this.currentCall?.mute || false,
1967
+ // conference: this.currentCall?.isConference || false
1968
+ // });
1969
+ // }
1970
+ // }
1971
+ let currentConferenceCallInfo = this.getCurrentCallInfo();
1972
+ if (!(currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.id)) {
1973
+ let holdCallInfo = this.newIncomingCallsList[0].participants.find((callInfo) => ((this.deviceNumberList.includes(callInfo === null || callInfo === void 0 ? void 0 : callInfo.from) && (callInfo === null || callInfo === void 0 ? void 0 : callInfo.to) === 'c2c_softphone_client')
1974
+ || (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));
1975
+ if (holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.id) {
1971
1976
  this.onholdOrUnholdParticipant({
1972
- participantId: [(_w = this.currentCall) === null || _w === void 0 ? void 0 : _w.participantId],
1973
- conferenceId: (_x = this.currentCall) === null || _x === void 0 ? void 0 : _x.conferenceId,
1977
+ participantId: [holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.id],
1978
+ conferenceId: holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.conferenceId,
1974
1979
  hold: false,
1975
- mute: ((_y = this.currentCall) === null || _y === void 0 ? void 0 : _y.mute) || false,
1976
- conference: ((_z = this.currentCall) === null || _z === void 0 ? void 0 : _z.isConference) || false
1980
+ mute: (holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.mute) || false,
1981
+ conference: (holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.isConference) || false
1977
1982
  });
1978
1983
  }
1979
1984
  }
1980
1985
  }
1981
- // else if(!this.currentCall) {
1982
- // this.currentCall = this.currentCallList.find((res: any)=> res?.participantId == this.currentCall?.participantId && res?.isAcceptCall && !res?.isHold)
1983
- // if(!this.currentCall?.participantId) {
1984
- // this.currentCall = this.currentCallList[0];
1985
- // if(this.currentCallList[0].isHold && this.currentCallList[0]?.isConference) {
1986
- // this.isConference = true;
1987
- // this.currentCallList.forEach((res) => {
1988
- // if (res.isConference && this.currentCall?.participantId) {
1989
- // this.onholdOrUnholdParticipant({
1990
- // participantId: [res.participantId],
1991
- // conferenceId: res?.conferenceId,
1992
- // hold: false,
1993
- // mute: res?.mute || false,
1994
- // conference: res?.isConference || false
1995
- // });
1996
- // }
1997
- // })
1998
- // } else {
1999
- // this.onholdOrUnholdParticipant({
2000
- // participantId: [this.currentCall?.participantId],
2001
- // conferenceId: this.currentCall?.conferenceId,
2002
- // hold: false,
2003
- // mute: this.currentCall?.mute || false,
2004
- // conference: this.currentCall?.isConference || false
2005
- // });
2006
- // }
2007
- // }
2008
- // } else {
2009
- // }
1986
+ console.log(this.currentConferenceCall, 'currentConferenceCall');
2010
1987
  console.log(this.leftParticipent, 'leftParticipent');
2011
- if ((_0 = this.selectedUserInfo) === null || _0 === void 0 ? void 0 : _0.participantId) {
1988
+ if ((_r = this.selectedUserInfo) === null || _r === void 0 ? void 0 : _r.participantId) {
2012
1989
  let selectedUser = this.currentCallList.find((item) => { var _a; return (item === null || item === void 0 ? void 0 : item.id) == ((_a = this.selectedUserInfo) === null || _a === void 0 ? void 0 : _a.participantId); });
2013
1990
  if (selectedUser) {
2014
1991
  selectedUser.IsUserInfoShow = true;
@@ -2039,7 +2016,7 @@ class CallProgressComponent {
2039
2016
  }
2040
2017
  }
2041
2018
  this.cdr.detectChanges();
2042
- let incomingData = this.currentCallList.find((res) => (res === null || res === void 0 ? void 0 : res.isIncomingCall) && !(res === null || res === void 0 ? void 0 : res.isAcceptCall));
2019
+ let incomingData = this.currentCallList.find((res) => (res === null || res === void 0 ? void 0 : res.isIncomingCall) && !(res === null || res === void 0 ? void 0 : res.isAcceptCall) && !(res === null || res === void 0 ? void 0 : res.isLeft));
2043
2020
  if ((incomingData === null || incomingData === void 0 ? void 0 : incomingData.id) && !this.isRinging) {
2044
2021
  this.isRinging = this.incomeingCallSocketService.play();
2045
2022
  }
@@ -2049,11 +2026,10 @@ class CallProgressComponent {
2049
2026
  console.log('currentCallList', this.currentCallList);
2050
2027
  this.conferenceCallList = [];
2051
2028
  this.conferenceCallList = [
2052
- ...new Map(this.currentCallList.filter(item => item.isConference === true).map(item => [item.conferenceId, item])).values()
2029
+ ...new Map(this.currentCallList.map(item => [item.conferenceId, item])).values()
2053
2030
  ];
2054
- // })
2055
2031
  }
2056
- else if (!((_1 = this.newIncomingCallsList) === null || _1 === void 0 ? void 0 : _1.length)) {
2032
+ else if (!((_s = this.newIncomingCallsList) === null || _s === void 0 ? void 0 : _s.length)) {
2057
2033
  this.isRinging = false;
2058
2034
  this.isConcurrentIncoming = false;
2059
2035
  this.incomingCallDiv = false;
@@ -2074,6 +2050,43 @@ class CallProgressComponent {
2074
2050
  }
2075
2051
  ;
2076
2052
  }
2053
+ if ((_t = changes['callAction']) === null || _t === void 0 ? void 0 : _t.currentValue) {
2054
+ this.deviceNumberList = this.callerIdList.map((res) => res.number);
2055
+ this.rejoinHost(this.callAction);
2056
+ }
2057
+ }
2058
+ rejoinHost(callInfo) {
2059
+ return __awaiter(this, void 0, void 0, function* () {
2060
+ try {
2061
+ const rejoinParticipentInfo = callInfo === null || callInfo === void 0 ? void 0 : callInfo.participants.find((resData) => (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.to) == 'c2c_softphone_client'));
2062
+ this.showRingAnimation = true;
2063
+ // 1️⃣ Get new token for same conference
2064
+ const tokenData = yield this.getOutgoingCallToken(callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceId);
2065
+ // 2️⃣ Reconnect device
2066
+ const options = {
2067
+ codecPreferences: ['opus', 'pcmu'],
2068
+ closeProtection: true,
2069
+ };
2070
+ this.device = new Device(tokenData.token.value, options);
2071
+ this.call = yield this.device.connect({
2072
+ params: {
2073
+ From: rejoinParticipentInfo.from,
2074
+ To: rejoinParticipentInfo.from,
2075
+ Env: environment.abb,
2076
+ Token: tokenData.token.id,
2077
+ Ext: rejoinParticipentInfo.extNum,
2078
+ conferenceId: rejoinParticipentInfo === null || rejoinParticipentInfo === void 0 ? void 0 : rejoinParticipentInfo.conferenceId
2079
+ },
2080
+ rtcConstraints: { audio: { deviceId: 'default' } },
2081
+ });
2082
+ this.twilioService.call = this.call;
2083
+ this.setupEventListeners();
2084
+ console.log('Rejoined successfully');
2085
+ }
2086
+ catch (error) {
2087
+ console.error('Rejoin failed', error);
2088
+ }
2089
+ });
2077
2090
  }
2078
2091
  getStatus(res) {
2079
2092
  if (res.direction == "incoming-call") {
@@ -2191,6 +2204,7 @@ class CallProgressComponent {
2191
2204
  }
2192
2205
  else if (response.status == 201) {
2193
2206
  this.isNewAddedCall = false;
2207
+ this.isLoadershow.emit(false);
2194
2208
  swal("Error", response.message.join("<br/>"), "error");
2195
2209
  this.endCall();
2196
2210
  }
@@ -2214,8 +2228,7 @@ class CallProgressComponent {
2214
2228
  conference: c.isConference || false
2215
2229
  });
2216
2230
  c.isMute = !c.isMute;
2217
- // await this.getAllParticipants(c?.conferenceSid);
2218
- // this.filteredParticipentList = this.allParticipentList;
2231
+ yield this.getAllParticipants(c === null || c === void 0 ? void 0 : c.conferenceId);
2219
2232
  this.cdr.detectChanges();
2220
2233
  });
2221
2234
  }
@@ -2244,28 +2257,26 @@ class CallProgressComponent {
2244
2257
  });
2245
2258
  }
2246
2259
  onEndCall(c, isAllCallEnd, isContect) {
2247
- var _a, _b;
2248
2260
  return __awaiter(this, void 0, void 0, function* () {
2249
- if (!(c === null || c === void 0 ? void 0 : c.isAcceptCall) && !isContect && !isAllCallEnd) {
2250
- let index = this.currentCallList.findIndex((res) => res.participantId == c.participantId);
2251
- yield this.extensionService.getRemoveParticipants((_a = this.currentCallList[index]) === null || _a === void 0 ? void 0 : _a.participantId, ((_b = this.currentCallList[index]) === null || _b === void 0 ? void 0 : _b.conferenceId) || 'no').subscribe((res) => {
2252
- var _a;
2253
- this.currentCallList.splice(index, 1);
2254
- this.incomeingCallSocketService.pause();
2255
- (_a = this.call) === null || _a === void 0 ? void 0 : _a.disconnect();
2256
- this.endIncomingCallEvent.emit(c);
2257
- return false;
2258
- });
2259
- return false;
2260
- }
2261
- let participantId = isAllCallEnd ? 'all' : c.participantId;
2262
- let conferenceId = c.conferenceId || this.currentCall.conferenceId;
2261
+ // if (!c?.isAcceptCall && !isContect && !isAllCallEnd) {
2262
+ // let index = this.currentCallList.findIndex((res) => res.participantId == c.participantId)
2263
+ // await this.extensionService.getRemoveParticipants(this.currentCallList[index]?.participantId, this.currentCallList[index]?.conferenceId || 'no').subscribe((res) => {
2264
+ // this.currentCallList.splice(index, 1)
2265
+ // this.incomeingCallSocketService.pause();
2266
+ // this.call?.disconnect();
2267
+ // this.endIncomingCallEvent.emit(c);
2268
+ // return false;
2269
+ // })
2270
+ // return false;
2271
+ // }
2272
+ let participantId = isAllCallEnd ? 'all' : c.participantId || (c === null || c === void 0 ? void 0 : c.id);
2273
+ const currentConferenceCallInfo = this.getCurrentCallInfo();
2274
+ let conferenceId = c.conferenceId || (currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.conferenceId);
2263
2275
  let res = yield this.getRemoveParticipants(participantId, conferenceId);
2264
2276
  if ((res === null || res === void 0 ? void 0 : res.status) == 201 && (res === null || res === void 0 ? void 0 : res.message) == 'participant already left') {
2265
2277
  this.cdr.detectChanges();
2266
2278
  }
2267
- yield this.getAllParticipants(this.currentCall.conferenceSid);
2268
- this.currentCallList = this.currentCallList.filter((res) => res.participantId !== c.participantId);
2279
+ yield this.getAllParticipants(conferenceId);
2269
2280
  this.incomeingCallSocketService.pause();
2270
2281
  this.endIncomingCallEvent.emit(c);
2271
2282
  this.cdr.detectChanges();
@@ -2382,15 +2393,6 @@ class CallProgressComponent {
2382
2393
  catch (e) {
2383
2394
  console.log('Error updating accept state:', e);
2384
2395
  }
2385
- // Start recording if recordCall is true and call is accepted for 30 seconds
2386
- // if (this.recordCall) {
2387
- // setTimeout(() => {
2388
- // if (this.isRecording) return; // If already recording, skip
2389
- // this.startRecording();
2390
- // }, 30000);
2391
- // } else {
2392
- // this.stopRecording();
2393
- // }
2394
2396
  });
2395
2397
  (_g = this.call) === null || _g === void 0 ? void 0 : _g.on('messageReceived', (message) => {
2396
2398
  });
@@ -2418,131 +2420,81 @@ class CallProgressComponent {
2418
2420
  handleError(error) {
2419
2421
  swal("Error", error, "error");
2420
2422
  }
2421
- // endCall() {
2422
- // console.log('endCall() called');
2423
- // console.log('Current call:', this.call?.parameters['From']);
2424
- // console.log('Held call exists:', !!this.heldCall);
2425
- // // Disconnect the current active call
2426
- // if (this.call) {
2427
- // this.call.disconnect();
2428
- // this.call = undefined;
2429
- // }
2430
- // this.showRingAnimation = false;
2431
- // this.stopTimer();
2432
- // // If there's a held call, make it active
2433
- // if (this.heldCall) {
2434
- // console.log('Resuming held call:', this.heldCall.parameters['From']);
2435
- // // Make held call the active call
2436
- // this.call = this.heldCall;
2437
- // this.heldCall = undefined;
2438
- // // this.isCallOnHold = false;
2439
- // this.isCallOnHold = !!this.heldCall;
2440
- // // Unmute the resumed call
2441
- // this.call.mute(false);
2442
- // // Update UI with the resumed call info
2443
- // const fromNumber = this.call.parameters['From'];
2444
- // const callerName = this.call.customParameters?.get('name') || '-';
2445
- // const callerImg = this.call.customParameters?.get('image') || 'assets/images/user.jpg';
2446
- // this.callData = {
2447
- // ...this.callData,
2448
- // phone: fromNumber,
2449
- // displayNum: fromNumber,
2450
- // name: callerName,
2451
- // img: callerImg
2452
- // };
2453
- // // Restart timer for the resumed call
2454
- // this.startTimer();
2455
- // this.disbaleEndCallBtn = false;
2456
- // console.log('Held call is now active:', this.callData);
2457
- // this.cdr.detectChanges();
2458
- // } else {
2459
- // // No held call, completely end
2460
- // console.log('No held call, ending completely');
2461
- // this.endCallEvent.emit();
2462
- // this.maximiseDialpad();
2463
- // }
2464
- // }
2465
- endConfereneceCall() {
2466
- var _a;
2423
+ endConfereneceCall(conf) {
2424
+ var _a, _b, _c;
2425
+ this.selectedConf = conf;
2467
2426
  if (this.deviceNumberList.includes((_a = this.hostnumber) === null || _a === void 0 ? void 0 : _a.from)) {
2468
2427
  this.onCallDisconnected();
2469
2428
  }
2470
2429
  else {
2471
- this.endCall();
2430
+ if (conf === null || conf === void 0 ? void 0 : conf.conferenceId) {
2431
+ let conference = (_b = this.newIncomingCallsList) === null || _b === void 0 ? void 0 : _b.find((res) => (res === null || res === void 0 ? void 0 : res.conferenceId) == (conf === null || conf === void 0 ? void 0 : conf.conferenceId));
2432
+ let participentInfo = (_c = conference === null || conference === void 0 ? void 0 : conference.participants) === null || _c === void 0 ? void 0 : _c.find((participant) => ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from)
2433
+ && (participant === null || participant === void 0 ? void 0 : participant.to) === 'c2c_softphone_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));
2434
+ if (conference === null || conference === void 0 ? void 0 : conference.id) {
2435
+ this.onEndCall(participentInfo);
2436
+ }
2437
+ }
2438
+ else {
2439
+ this.endCall();
2440
+ }
2472
2441
  }
2473
2442
  }
2474
2443
  endCall(isAllCallEnd) {
2475
- var _a, _b, _c, _d, _e;
2444
+ var _a;
2476
2445
  return __awaiter(this, void 0, void 0, function* () {
2477
- console.log('endCall() called');
2478
- // console.log('Current call:', this.call?.parameters['From']);
2479
- console.log('Held call exists:', !!this.heldCall);
2480
- // Leaving conference state when ending current call action
2481
- this.isConference = false;
2446
+ // this.isConference = false;
2482
2447
  this.showRingAnimation = false;
2483
2448
  if (isAllCallEnd) {
2484
2449
  this.stopTimer();
2485
2450
  this.onEndCall({}, isAllCallEnd);
2486
- // this.currentCallList = [];
2487
2451
  if (!((_a = this.currentCallList) === null || _a === void 0 ? void 0 : _a.length)) {
2488
2452
  this.endCallEvent.emit();
2489
2453
  }
2490
2454
  }
2491
2455
  else {
2492
- this.onEndCall(this.currentCall, isAllCallEnd);
2493
- this.currentCallList = this.currentCallList.filter((c) => (c === null || c === void 0 ? void 0 : c.participantId) !== this.currentCall.participantId);
2494
- if (this.currentCallList.length > 0) {
2495
- // this.currentCallList[0].isHold = false;
2496
- // this.currentCall = this.currentCallList[0];
2497
- yield this.onholdOrUnholdParticipant({
2498
- participantId: [(_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.participantId],
2499
- conferenceId: (_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.conferenceId,
2500
- hold: false,
2501
- mute: ((_d = this.currentCall) === null || _d === void 0 ? void 0 : _d.mute) || false,
2502
- isConference: ((_e = this.currentCall) === null || _e === void 0 ? void 0 : _e.isConference) || false
2503
- });
2504
- }
2505
- else {
2506
- // this.currentCall = null;
2507
- // this.currentCallList = [];
2508
- this.endCallEvent.emit();
2509
- }
2456
+ const currentConferenceCallInfo = this.getCurrentCallInfo();
2457
+ this.onEndCall(currentConferenceCallInfo, isAllCallEnd);
2510
2458
  }
2511
2459
  if (this.call) {
2512
2460
  this.call.disconnect();
2513
2461
  this.call.reject();
2514
- // this.call = undefined;
2515
2462
  }
2516
2463
  });
2517
2464
  }
2518
2465
  toggleMute(isConference) {
2519
2466
  var _a;
2520
2467
  return __awaiter(this, void 0, void 0, function* () {
2521
- // await this.onMuteParticipant({
2522
- // participantId: [this.currentCall?.participantId],
2523
- // conferenceId: this.conferenceId,
2524
- // mute: !this.isMute,
2525
- // })
2526
- // this.call = this.heldCall
2527
- // this.toggleMic()
2528
2468
  this.isMute = !this.isMute;
2529
- console.log('isMute', this.call, this.heldCall);
2530
2469
  (_a = this.call) === null || _a === void 0 ? void 0 : _a.mute(this.isMute);
2531
- // if (isConference) {
2470
+ const currentConferenceCallInfo = this.getCurrentCallInfo();
2471
+ this.onMuteParticipant({
2472
+ participantId: [currentConferenceCallInfo.participantId || (currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.id)],
2473
+ conferenceId: currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.conferenceId,
2474
+ hold: currentConferenceCallInfo.hold,
2475
+ mute: !(currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.isMute),
2476
+ conference: currentConferenceCallInfo.isConference || false
2477
+ });
2532
2478
  this.currentCall.isMute = this.isMute;
2533
2479
  });
2534
2480
  }
2535
- toggleMic() {
2536
- return __awaiter(this, void 0, void 0, function* () {
2537
- if (!this.audioStream) {
2538
- // first time: request mic
2539
- this.audioStream = yield navigator.mediaDevices.getUserMedia({ audio: true });
2540
- }
2541
- this.micOn = !this.micOn;
2542
- this.audioStream.getAudioTracks().forEach(track => {
2543
- track.enabled = this.micOn; // false = muted, true = sending audio
2544
- });
2545
- });
2481
+ // audioStream?: MediaStream;
2482
+ // micOn = false;
2483
+ // async toggleMic() {
2484
+ // if (!this.audioStream) {
2485
+ // // first time: request mic
2486
+ // this.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
2487
+ // }
2488
+ // this.micOn = !this.micOn;
2489
+ // this.audioStream.getAudioTracks().forEach(track => {
2490
+ // track.enabled = this.micOn; // false = muted, true = sending audio
2491
+ // });
2492
+ // }
2493
+ getCurrentCallInfo() {
2494
+ return this.newIncomingCallsList
2495
+ .flatMap((callInfo) => callInfo.participants)
2496
+ .find((participant) => ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from) && (participant === null || participant === void 0 ? void 0 : participant.to) === 'c2c_softphone_client')
2497
+ || (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) && !(participant === null || participant === void 0 ? void 0 : participant.isHold));
2546
2498
  }
2547
2499
  toggleKeypad() {
2548
2500
  this.showKeypad = !this.showKeypad;
@@ -2553,7 +2505,6 @@ class CallProgressComponent {
2553
2505
  this.showContactsPanel = false;
2554
2506
  return false;
2555
2507
  }
2556
- // this.isAddRemoveParticipant = false;
2557
2508
  this.showContactsPanel = !isClose;
2558
2509
  this.getAllParticipants(callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceSid);
2559
2510
  this.filteredList = this.contacts;
@@ -2564,7 +2515,6 @@ class CallProgressComponent {
2564
2515
  }
2565
2516
  addRemoveParticipant() {
2566
2517
  return __awaiter(this, void 0, void 0, function* () {
2567
- // const conferenceSId = this.addRes?.conferenceSid;
2568
2518
  this.isAddRemoveParticipant = !this.isAddRemoveParticipant;
2569
2519
  yield this.getAllParticipants(this.currentCall.conferenceSid);
2570
2520
  this.filteredParticipentList = this.allParticipentList;
@@ -2573,23 +2523,10 @@ class CallProgressComponent {
2573
2523
  add(data) {
2574
2524
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
2575
2525
  return __awaiter(this, void 0, void 0, function* () {
2576
- // if(data?.status != 'ringing'){
2577
2526
  this.isIncomingCallBtnDisable = true;
2578
2527
  this.conferenceId = this.twilioService.conferenceCallInfo.conferenceId;
2579
2528
  if (this.currentCallList.length > 1 && ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.isAcceptCall)) {
2580
2529
  if ((_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.isConference) {
2581
- // this.isConferenceCallHold = true;
2582
- // this.currentCallList.forEach((res) => {
2583
- // if (res.isConference) {
2584
- // this.onholdOrUnholdParticipant({
2585
- // participantId: [res.participantId],
2586
- // conferenceId: res?.conferenceId,
2587
- // hold: true,
2588
- // mute: res?.mute || false,
2589
- // conference: res.isConference || false
2590
- // });
2591
- // }
2592
- // })
2593
2530
  this.onholdOrUnholdParticipant({
2594
2531
  participantId: [this.hostnumber.participantId],
2595
2532
  conferenceId: (_c = this.hostnumber) === null || _c === void 0 ? void 0 : _c.conferenceId,
@@ -2600,10 +2537,6 @@ class CallProgressComponent {
2600
2537
  }
2601
2538
  else {
2602
2539
  this.isConferenceCallHold = false;
2603
- // const index = this.currentCallList.findIndex((item: any) => item.participantId == this.currentCall?.participantId);
2604
- // if (index != -1) {
2605
- // // this.currentCallList[index].isHold = true;
2606
- // }
2607
2540
  yield this.onholdOrUnholdParticipant({
2608
2541
  participantId: ((_e = this.currentCall) === null || _e === void 0 ? void 0 : _e.isIncomingCall) ? [(_f = this.currentCall) === null || _f === void 0 ? void 0 : _f.id] : [(_g = this.currentCall) === null || _g === void 0 ? void 0 : _g.participantId],
2609
2542
  conferenceId: (_h = this.currentCall) === null || _h === void 0 ? void 0 : _h.conferenceId,
@@ -2611,22 +2544,8 @@ class CallProgressComponent {
2611
2544
  mute: ((_j = this.currentCall) === null || _j === void 0 ? void 0 : _j.mute) || false,
2612
2545
  conference: ((_k = this.currentCall) === null || _k === void 0 ? void 0 : _k.isConference) || false
2613
2546
  });
2614
- // data.isHold = false;
2615
2547
  }
2616
2548
  }
2617
- // let incomingCallData = this.currentCallList.filter((item: any) => item.isIncomingCall && item.isAcceptCall);
2618
- // if (this.currentCallList.length > 1) {
2619
- // // this.call = await this.twilioService.connect('');
2620
- // this.twilioService.addIncomingParticipant(data?.id, this.twilioService.conferenceCallInfo.conferenceId).subscribe((res: any) => {
2621
- // console.log(res, 'bhhhhhhhhhhhhhhhhhhh')
2622
- // this.incomeingCallSocketService.isCurrentIncomingCallList.push(data?.id || data?.participantId);
2623
- // this.incomeingCallSocketService.pause();
2624
- // data.isAcceptCall = true;
2625
- // // this.currentCall = data;
2626
- // this.setIncomingCallStatus(data)
2627
- // })
2628
- // } else {
2629
- // this.currentCall = data;
2630
2549
  let payload = {
2631
2550
  recordId: data === null || data === void 0 ? void 0 : data.id,
2632
2551
  ipAddress: '',
@@ -2691,7 +2610,6 @@ class CallProgressComponent {
2691
2610
  conference: true
2692
2611
  });
2693
2612
  this.callData = {
2694
- // ...this.callData,
2695
2613
  phone: phoneNumber,
2696
2614
  displayNum: phoneNumber,
2697
2615
  name: (contact === null || contact === void 0 ? void 0 : contact.name) || `${contact === null || contact === void 0 ? void 0 : contact.firstName} ${contact === null || contact === void 0 ? void 0 : contact.lastName}` || phoneNumber,
@@ -2719,24 +2637,12 @@ class CallProgressComponent {
2719
2637
  conference: true
2720
2638
  });
2721
2639
  }
2722
- else {
2723
- yield this.onholdOrUnholdParticipant({
2724
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
2725
- conferenceId: c.conferenceId,
2726
- hold: true,
2727
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
2728
- conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
2729
- });
2730
- }
2731
2640
  }));
2732
2641
  // Put current call on hold
2733
2642
  this.isCallOnHold = true;
2734
2643
  this.showContactsPanel = false;
2735
2644
  this.showRingAnimation = true;
2736
2645
  this.isConference = true;
2737
- // const contactName = [contact?.firstName, contact?.middleName, contact?.lastName]
2738
- // .filter(Boolean)
2739
- // .join(' ');
2740
2646
  // Add participant to the conference
2741
2647
  let data = yield this.addParticipantToCall({
2742
2648
  from: ((_k = this.callData) === null || _k === void 0 ? void 0 : _k.from) || ((_l = this.selectedCallerId) === null || _l === void 0 ? void 0 : _l.number),
@@ -2768,9 +2674,6 @@ class CallProgressComponent {
2768
2674
  isConference: false
2769
2675
  };
2770
2676
  this.cdr.detectChanges();
2771
- console.log(this.callData, 'this.callData');
2772
- console.log('test111111');
2773
- console.log("Participant added to conference:", phoneNumber);
2774
2677
  this.showRingAnimation = false;
2775
2678
  }
2776
2679
  }
@@ -2782,20 +2685,12 @@ class CallProgressComponent {
2782
2685
  });
2783
2686
  }
2784
2687
  CallToUnsavedNumber(number, isNewConference) {
2785
- var _a, _b, _c;
2786
2688
  return __awaiter(this, void 0, void 0, function* () {
2787
2689
  try {
2788
2690
  const isInvalid = yield this.isInvalidNumber(number);
2789
2691
  if (isInvalid) {
2790
2692
  return false;
2791
2693
  }
2792
- // this.isSavedContactDialled();
2793
- // this.isPaymentDue = localStorage.getItem('paymentDue') === 'false' ? false : true;
2794
- // if (this.isPaymentDue) {
2795
- // swal('Warning', 'Please note that your payment is due, To continue on your services kindly subscribe to use uninterrupted services.');
2796
- // return false;
2797
- // }
2798
- // this.isTrialPeriodOver = localStorage.getItem('trialOver') === 'false' ? false : true;
2799
2694
  let alreadyInCall = this.currentCallList.find((res) => res.to == number || res.from == number);
2800
2695
  if (alreadyInCall) {
2801
2696
  swal('Error', `Already ${number} number in this call.`);
@@ -2805,32 +2700,10 @@ class CallProgressComponent {
2805
2700
  swal('Error', 'You can not dial this number');
2806
2701
  return false;
2807
2702
  }
2808
- // const hasPermission = await this.checkMicrophonePermission();
2809
- // if (!hasPermission) {
2810
- // await this.askForMicrophonePermission();
2811
- // return false;
2812
- // }
2813
- // this.isLoadershow = true;
2814
- // if (!this.selectedCallerId) {
2815
- // this.shakeDedicatedBtn = true;
2816
- // this.showDialAlert('Select a C2C number to call');
2817
- // setTimeout(() => {
2818
- // this.shakeDedicatedBtn = false;
2819
- // }, 3000);
2820
- // this.isLoadershow = false;
2821
- // return false;
2822
- // }
2823
- // Clear displayNum if value is bound from previous call
2824
- // this.callData.displayNum = '';
2825
- // Get number to be dialed from backend
2826
2703
  let contact = this.contacts.find((contact) => {
2827
2704
  return contact.numbersList.some((num) => num.number === number);
2828
2705
  });
2829
2706
  number = yield this.getToNumber(number);
2830
- // if (this.terminateCall) {
2831
- // this.terminateCall = false;
2832
- // return;
2833
- // }
2834
2707
  // Update call data in a single operation
2835
2708
  const callData = {
2836
2709
  name: contact === null || contact === void 0 ? void 0 : contact.firstName,
@@ -2842,50 +2715,39 @@ class CallProgressComponent {
2842
2715
  from: this.selectedCallerId.number,
2843
2716
  timestamp: new Date().toISOString()
2844
2717
  };
2845
- // console.log('dd10')
2846
- // this.isCallInProgress = true;
2847
2718
  console.log('call startted', callData);
2848
2719
  if (isNewConference) {
2849
- // if(this.currentCall.isConference) {
2850
2720
  this.isNewAddedCall = true;
2851
- let participentList = [];
2852
- yield this.currentCallList.forEach((resData) => {
2853
- if (!resData.isHold && (resData === null || resData === void 0 ? void 0 : resData.participantId)) {
2854
- participentList.push(resData === null || resData === void 0 ? void 0 : resData.participantId);
2855
- }
2856
- });
2857
- if (participentList === null || participentList === void 0 ? void 0 : participentList.length) {
2721
+ let ourNumberInfo = {};
2722
+ let callInfo = this.newIncomingCallsList.find((callInfo, i) => this.currentCall.conferenceId == callInfo.conferenceId);
2723
+ if (callInfo) {
2724
+ 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.to) == 'c2c_softphone_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));
2725
+ }
2726
+ if (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id) {
2727
+ console.log(ourNumberInfo, 'selfInfo');
2858
2728
  yield this.onholdOrUnholdParticipant({
2859
- participantId: participentList,
2860
- conferenceId: this.currentCall.conferenceId,
2729
+ participantId: [ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id],
2730
+ conferenceId: ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.conferenceId,
2861
2731
  hold: true,
2862
- mute: ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.mute) || false,
2863
- conference: ((_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.isConference) || false
2732
+ mute: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.mute) || false,
2733
+ conference: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isConference) || false
2864
2734
  });
2865
- if ((_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.isConference) {
2866
- this.isConferenceCallHold = true;
2867
- }
2735
+ this.isConferenceCallHold = true;
2868
2736
  this.startCall(callData, isNewConference);
2869
2737
  }
2870
2738
  else {
2871
2739
  this.startCall(callData, isNewConference);
2872
2740
  }
2873
2741
  this.searchText = '';
2874
- // }
2875
2742
  }
2876
2743
  else {
2877
2744
  this.searchText = '';
2878
2745
  this.callContact(number, true);
2879
2746
  }
2880
- // this.callInitiated.emit({ ...this.callData });
2881
2747
  return true;
2882
2748
  }
2883
2749
  catch (e) {
2884
- // console.error('Error in initiateCall:', e);
2885
- // this.isLoadershow = false;
2886
2750
  this.showDialAlert('Failed to initiate call. Please try again.');
2887
- // console.log('dd11')
2888
- // this.isCallInProgress = false;
2889
2751
  return false;
2890
2752
  }
2891
2753
  });
@@ -2940,196 +2802,133 @@ class CallProgressComponent {
2940
2802
  }
2941
2803
  getAllParticipants(conferenceSid) {
2942
2804
  this.extensionService.getAllParticipants(conferenceSid).subscribe((res) => {
2943
- this.allParticipentList = res.participants.filter((resInfo) => ((resInfo === null || resInfo === void 0 ? void 0 : resInfo.to) == 'c2c_softphone_client' && (resInfo === null || resInfo === void 0 ? void 0 : resInfo.direction) == 'incoming-call') || (resInfo === null || resInfo === void 0 ? void 0 : resInfo.to) != 'c2c_softphone_client');
2805
+ this.allParticipentList = res.participants.filter((resInfo) => !((resInfo === null || resInfo === void 0 ? void 0 : resInfo.to) == 'c2c_softphone_client' && (resInfo === null || resInfo === void 0 ? void 0 : resInfo.direction) == 'incoming-call'));
2944
2806
  ;
2945
2807
  this.filteredParticipentList = this.allParticipentList;
2946
2808
  this.applyFilter();
2947
- // let index = this.contacts.findIndex((c:any)=> c?.numbersList[0]?.number == res?.to);
2948
- // if(index > -1){
2949
- // this.contacts[index].isCallOnHold = true;
2950
- // }
2951
- // else {
2952
- // res['IsConnected'] = true;
2953
- // this.contacts.push(res)
2954
- // }
2955
2809
  });
2956
2810
  }
2957
- // acceptConcurrentCall(incomingCall: any) {
2958
- // if (!incomingCall) return;
2959
- // // Put current call on hold instead of disconnecting
2960
- // if (this.call) {
2961
- // this.heldCall = this.call;
2962
- // this.isCallOnHold = true;
2963
- // // Mute the held call
2964
- // this.heldCall.mute(true);
2965
- // }
2966
- // incomingCall.accept();
2967
- // this.call = incomingCall;
2968
- // this.callData.phone = incomingCall.parameters['From'];
2969
- // this.callData.name = incomingCall.customParameters?.get('name') || '-';
2970
- // this.callData.img = incomingCall.customParameters?.get('image') || 'assets/images/user.jpg';
2971
- // this.isConcurrentIncoming = false;
2972
- // this.incomingCallDiv = false;
2973
- // this.disbaleEndCallBtn = false;
2974
- // // Reset timer for new call
2975
- // this.stopTimer();
2976
- // this.startTimer();
2977
- // this.cdr.detectChanges();
2978
- // }
2979
- acceptConcurrentCall(incomingCall) {
2980
- if (!incomingCall)
2981
- return;
2982
- // Put current call on hold instead of disconnecting
2983
- // if (this.call) {
2984
- // // this.heldCall = this.call;
2985
- // this.isCallOnHold = true;
2986
- // // // Mute the held call
2987
- // // this.heldCall.mute(true);
2988
- // // }
2989
- // // Accept the new call
2990
- // incomingCall.accept();
2991
- // this.call = incomingCall;
2992
- // this.callData.phone = incomingCall.parameters['From'];
2993
- // this.callData.name = incomingCall.customParameters?.get('name') || '-';
2994
- // this.callData.img = incomingCall.customParameters?.get('image') || 'assets/images/user.jpg';
2995
- // this.isConcurrentIncoming = false;
2996
- // this.incomingCallDiv = false;
2997
- // this.disbaleEndCallBtn = false;
2998
- // // 🟢 Remove the accepted call from incoming list
2999
- // this.newIncomingCallsList = (this.newIncomingCallsList || []).filter(
3000
- // (c: any) => c?.parameters?.CallSid !== incomingCall?.parameters?.CallSid
3001
- // );
3002
- // this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
3003
- // // 🕒 Reset timer for new call
3004
- // this.stopTimer();
3005
- // this.startTimer();
3006
- // this.cdr.detectChanges();
3007
- }
3008
2811
  swapCalls(callInfo, isConferenceCall) {
3009
- var _a;
3010
2812
  return __awaiter(this, void 0, void 0, function* () {
3011
2813
  // if (!this.heldCall || !this.call) return;
3012
2814
  console.log(this.call, 'this.call');
3013
2815
  console.log(this.heldCall, 'this.heldCall');
3014
2816
  console.log(this.currentCallList, 'this.currentCallList');
3015
2817
  console.log(callInfo, 'callInfo for swapCalls');
3016
- if ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.isConference) {
3017
- this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
3018
- var _b;
3019
- if ((c === null || c === void 0 ? void 0 : c.isConference) && !(c === null || c === void 0 ? void 0 : c.isHold) && ((_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.conferenceId) == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
3020
- yield this.onholdOrUnholdParticipant({
3021
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
3022
- conferenceId: c.conferenceId,
3023
- hold: true,
3024
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
3025
- conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
3026
- });
3027
- // this.isConferenceCallHold = true;
3028
- }
3029
- else if (isConferenceCall && (c === null || c === void 0 ? void 0 : c.conferenceId) == callInfo.conferenceId && c.isConference) {
3030
- yield this.onholdOrUnholdParticipant({
3031
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
3032
- conferenceId: c.conferenceId,
3033
- hold: false,
3034
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
3035
- conference: true
3036
- });
3037
- this.isConference = true;
3038
- this.isConferenceCallHold = false;
3039
- }
3040
- else if ((callInfo === null || callInfo === void 0 ? void 0 : callInfo.isHold) && (c === null || c === void 0 ? void 0 : c.participantId) === (callInfo === null || callInfo === void 0 ? void 0 : callInfo.participantId)) {
3041
- yield this.onholdOrUnholdParticipant({
3042
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
3043
- conferenceId: c.conferenceId,
3044
- hold: false,
3045
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
3046
- conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
3047
- });
3048
- }
3049
- }));
3050
- }
3051
- else if (isConferenceCall) {
3052
- this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
3053
- if ((c === null || c === void 0 ? void 0 : c.isConference) && (callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceId) == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
2818
+ this.newIncomingCallsList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
2819
+ var _a;
2820
+ if ((c === null || c === void 0 ? void 0 : c.conferenceId) == (callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceId)) {
2821
+ 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.to) == 'c2c_softphone_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));
2822
+ if (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id) {
3054
2823
  yield this.onholdOrUnholdParticipant({
3055
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
3056
- conferenceId: c.conferenceId,
2824
+ participantId: [participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id],
2825
+ conferenceId: participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.conferenceId,
3057
2826
  hold: false,
3058
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
3059
- conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
3060
- });
3061
- }
3062
- else {
3063
- // c.isHold = true;
3064
- yield this.onholdOrUnholdParticipant({
3065
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
3066
- conferenceId: c.conferenceId,
3067
- hold: true,
3068
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
3069
- conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
2827
+ mute: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.mute) || false,
2828
+ conference: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.isConference) || false
3070
2829
  });
2830
+ // this.isConferenceCallHold = true;
3071
2831
  }
3072
- }));
3073
- }
3074
- else {
3075
- this.isConferenceCallHold = false;
3076
- this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
3077
- if ((c === null || c === void 0 ? void 0 : c.participantId) && !(c === null || c === void 0 ? void 0 : c.isHold)) {
2832
+ }
2833
+ else {
2834
+ 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.to) == 'c2c_softphone_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));
2835
+ if ((participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id) && !(participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.isHold)) {
3078
2836
  yield this.onholdOrUnholdParticipant({
3079
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
3080
- conferenceId: c.conferenceId,
2837
+ participantId: [participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id],
2838
+ conferenceId: participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.conferenceId,
3081
2839
  hold: true,
3082
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
3083
- conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
3084
- });
3085
- }
3086
- else if ((callInfo === null || callInfo === void 0 ? void 0 : callInfo.isHold) && (c === null || c === void 0 ? void 0 : c.participantId) === (callInfo === null || callInfo === void 0 ? void 0 : callInfo.participantId)) {
3087
- yield this.onholdOrUnholdParticipant({
3088
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
3089
- conferenceId: c.conferenceId,
3090
- hold: false,
3091
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
3092
- conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
2840
+ mute: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.mute) || false,
2841
+ conference: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.isConference) || false
3093
2842
  });
2843
+ // this.isConferenceCallHold = true;
3094
2844
  }
3095
- }));
3096
- }
3097
- // await this.onholdOrUnholdParticipant({
3098
- // participantId: this.call?.callInfo?.participantId,
3099
- // conferenceId: this.conferenceId,
3100
- // hold: true
3101
- // });
3102
- // await this.onholdOrUnholdParticipant({
3103
- // participantId: this.heldCall?.callInfo?.participantId,
3104
- // conferenceId: this.conferenceId,
3105
- // hold: false
3106
- // });
3107
- console.log('Swapping calls...');
3108
- // console.log('Before swap - Active call:', this.call.parameters['From']);
3109
- // console.log('Before swap - Held call:', this.heldCall.parameters['From']);
3110
- // Swap the calls
3111
- // const temp = this.call;
3112
- // this.call = this.heldCall;
3113
- // this.heldCall = temp;
3114
- // this.call.mute(false);
3115
- // this.heldCall.mute(true);
3116
- // Update UI with active call info - extract from call parameters
3117
- // const fromNumber = this.call.parameters['From'];
3118
- // const callerName = this.call.customParameters?.get('name') || '-';
3119
- // const callerImg = this.call.customParameters?.get('image') || 'assets/images/user.jpg';
3120
- // const displayNumber = this.call.customParameters?.get('displayNumber') || '-';
3121
- // Update callData to refresh the main UI
3122
- // this.callData = {
3123
- // ...this.callData,
3124
- // phone: fromNumber,
3125
- // displayNum: (displayNumber && displayNumber !== '-') ? displayNumber : fromNumber,
3126
- // name: (callerName && callerName !== '-') ? callerName : (this.callData?.name || fromNumber),
3127
- // img: callerImg || this.callData?.img || 'assets/images/user.jpg'
3128
- // };
3129
- // console.log('After swap - Active call:', this.call.parameters['From']);
3130
- // console.log('After swap - Held call:', this.heldCall.parameters['From']);
3131
- // console.log('Updated callData:', this.callData);
3132
- console.log('this.currentCallList after swap', this.currentCallList);
2845
+ }
2846
+ if ((c === null || c === void 0 ? void 0 : c.isConference) && !(c === null || c === void 0 ? void 0 : c.isHold) && ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.conferenceId) == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
2847
+ yield this.onholdOrUnholdParticipant({
2848
+ participantId: [c === null || c === void 0 ? void 0 : c.participantId],
2849
+ conferenceId: c.conferenceId,
2850
+ hold: true,
2851
+ mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
2852
+ conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
2853
+ });
2854
+ // this.isConferenceCallHold = true;
2855
+ }
2856
+ }));
2857
+ // if (this.currentCall?.isConference) {
2858
+ // this.currentCallList.forEach(async (c: any) => {
2859
+ // if (c?.isConference && !c?.isHold && this.currentCall?.conferenceId == c?.conferenceId) {
2860
+ // await this.onholdOrUnholdParticipant({
2861
+ // participantId: [c?.participantId],
2862
+ // conferenceId: c.conferenceId,
2863
+ // hold: true,
2864
+ // mute: c?.mute || false,
2865
+ // conference: c?.isConference || false
2866
+ // });
2867
+ // // this.isConferenceCallHold = true;
2868
+ // } else if (isConferenceCall && c?.conferenceId == callInfo.conferenceId && c.isConference) {
2869
+ // await this.onholdOrUnholdParticipant({
2870
+ // participantId: [c?.participantId],
2871
+ // conferenceId: c.conferenceId,
2872
+ // hold: false,
2873
+ // mute: c?.mute || false,
2874
+ // conference: true
2875
+ // });
2876
+ // this.isConference = true;
2877
+ // this.isConferenceCallHold = false
2878
+ // } else if (callInfo?.isHold && c?.participantId === callInfo?.participantId) {
2879
+ // await this.onholdOrUnholdParticipant({
2880
+ // participantId: [c?.participantId],
2881
+ // conferenceId: c.conferenceId,
2882
+ // hold: false,
2883
+ // mute: c?.mute || false,
2884
+ // conference: c?.isConference || false
2885
+ // });
2886
+ // }
2887
+ // });
2888
+ // } else if (isConferenceCall) {
2889
+ // this.currentCallList.forEach(async (c: any) => {
2890
+ // if (c?.isConference && callInfo?.conferenceId == c?.conferenceId) {
2891
+ // await this.onholdOrUnholdParticipant({
2892
+ // participantId: [c?.participantId],
2893
+ // conferenceId: c.conferenceId,
2894
+ // hold: false,
2895
+ // mute: c?.mute || false,
2896
+ // conference: c?.isConference || false
2897
+ // });
2898
+ // } else {
2899
+ // // c.isHold = true;
2900
+ // await this.onholdOrUnholdParticipant({
2901
+ // participantId: [c?.participantId],
2902
+ // conferenceId: c.conferenceId,
2903
+ // hold: true,
2904
+ // mute: c?.mute || false,
2905
+ // conference: c?.isConference || false
2906
+ // });
2907
+ // }
2908
+ // });
2909
+ // } else {
2910
+ // this.isConferenceCallHold = false;
2911
+ // this.currentCallList.forEach(async (c: any) => {
2912
+ // if (c?.participantId && !c?.isHold) {
2913
+ // await this.onholdOrUnholdParticipant({
2914
+ // participantId: [c?.participantId],
2915
+ // conferenceId: c.conferenceId,
2916
+ // hold: true,
2917
+ // mute: c?.mute || false,
2918
+ // conference: c?.isConference || false
2919
+ // });
2920
+ // } else if (callInfo?.isHold && c?.participantId === callInfo?.participantId) {
2921
+ // await this.onholdOrUnholdParticipant({
2922
+ // participantId: [c?.participantId],
2923
+ // conferenceId: c.conferenceId,
2924
+ // hold: false,
2925
+ // mute: c?.mute || false,
2926
+ // conference: c?.isConference || false
2927
+ // });
2928
+ // }
2929
+ // });
2930
+ // }
2931
+ // console.log('this.currentCallList after swap', this.currentCallList);
3133
2932
  this.cdr.detectChanges();
3134
2933
  });
3135
2934
  }
@@ -3144,46 +2943,24 @@ class CallProgressComponent {
3144
2943
  this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
3145
2944
  if (c.conferenceId == this.currentCall.conferenceId) {
3146
2945
  if (c === null || c === void 0 ? void 0 : c.participantId) {
3147
- // c.isHold = false;
3148
- yield this.onholdOrUnholdParticipant({
3149
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
3150
- conferenceId: c.conferenceId,
3151
- hold: false,
3152
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
3153
- conference: true
3154
- });
2946
+ // await this.onholdOrUnholdParticipant({
2947
+ // participantId: [c?.participantId],
2948
+ // conferenceId: c.conferenceId,
2949
+ // hold: false,
2950
+ // mute: c?.mute || false,
2951
+ // conference: true
2952
+ // });
3155
2953
  c.isConference = true;
3156
- // } else if(c?.participantId && c.isIncomingCall){
3157
- // await this.twilioService.addIncomingParticipant(c?.participantId, this.conferenceId).subscribe((data: any) => {
3158
- // console.log(data,'bhhhhhhhhhhhhhhhhhhh')
3159
- // })
3160
- // c.isHold = false;
3161
- // c.isConference = true;
3162
2954
  }
3163
2955
  this.isConferenceCallHold = false;
3164
2956
  }
3165
2957
  }));
3166
- // await this.onholdOrUnholdParticipant({
3167
- // participantId: this.heldCall?.callInfo?.participantId,
3168
- // conferenceId: this.conferenceId,
3169
- // hold: false
3170
- // });
3171
- // this.heldCall.mute(false);
3172
- // this.call.mute(false);
3173
2958
  this.isCallOnHold = false;
3174
2959
  this.isConference = true;
3175
2960
  this.cdr.detectChanges();
3176
2961
  }
3177
2962
  });
3178
2963
  }
3179
- endHeldCall() {
3180
- // if (this.heldCall) {
3181
- // this.heldCall.disconnect();
3182
- // this.heldCall = undefined;
3183
- // this.isCallOnHold = false;
3184
- // this.cdr.detectChanges();
3185
- // }
3186
- }
3187
2964
  hasDetailedInfo(callData) {
3188
2965
  if (!callData)
3189
2966
  return false;
@@ -3202,57 +2979,6 @@ class CallProgressComponent {
3202
2979
  }
3203
2980
  return false;
3204
2981
  }
3205
- // onClickExpand(data?: any): void {
3206
- // if (this.selectedIncomingCall === data && this.isClickExpand) {
3207
- // this.isClickExpand = false;
3208
- // this.selectedIncomingCall = null;
3209
- // // this.selectedIncomingCallInfo.emit({});
3210
- // return;
3211
- // }
3212
- // this.isClickExpand = true;
3213
- // this.selectedIncomingCall = data;
3214
- // if (this.selectedIncomingCall) {
3215
- // this.selectedIncomingCall['isClickExpand'] = true;
3216
- // if (this.newIncomingCallsList && this.newIncomingCallsList.length > 0) {
3217
- // this.newIncomingCallsList.forEach((call: any) => {
3218
- // if (call !== this.selectedIncomingCall) {
3219
- // call['isClickExpand'] = false;
3220
- // }
3221
- // });
3222
- // }
3223
- // // this.selectedIncomingCallInfo.emit(this.selectedIncomingCall);
3224
- // if (!this.selectedIncomingCall.userInfo || this.selectedIncomingCall.userInfo.status == 201) {
3225
- // // this.getUserInformation(this.selectedIncomingCall);
3226
- // }
3227
- // }
3228
- // }
3229
- // getUserInformation(incomingCallData: any) {
3230
- // let data = this.fromEntries(Array.from(incomingCallData.customParameters.entries()));
3231
- // this.extensionService.getUserInformation(data['twilioAuthId']).subscribe(
3232
- // response => {
3233
- // setTimeout(()=>{
3234
- // incomingCallData['userInfo']=response
3235
- // }, 5000)
3236
- // }, error => {
3237
- // console.error('Error starting recording', error);
3238
- // });
3239
- // }
3240
- // rejectConcurrentCall(incomingCall: any) {
3241
- // if (!incomingCall) return;
3242
- // if (incomingCall.reject) {
3243
- // incomingCall.reject();
3244
- // }
3245
- // if (incomingCall.disconnect) incomingCall.disconnect();
3246
- // // Remove from list
3247
- // this.newIncomingCallsList = (this.newIncomingCallsList || []).filter((c: any) => c?.parameters?.CallSid !== incomingCall?.parameters?.CallSid);
3248
- // this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
3249
- // // If no more incoming, hide banner
3250
- // if (!this.newIncomingCallsList || this.newIncomingCallsList.length === 0) {
3251
- // this.isConcurrentIncoming = false;
3252
- // this.incomingCallDiv = false;
3253
- // }
3254
- // this.cdr.detectChanges();
3255
- // }
3256
2982
  onCallInputs(num) {
3257
2983
  var _a;
3258
2984
  try {
@@ -3286,13 +3012,10 @@ class CallProgressComponent {
3286
3012
  }
3287
3013
  }
3288
3014
  closeIncomingCall(data) {
3289
- // this.incomingCallDiv = false;
3290
3015
  if (data.show) {
3291
- //this.showCallProgressEvent.emit()
3292
3016
  // handle incoming call accepted
3293
3017
  this.startTimer();
3294
3018
  this.disbaleEndCallBtn = false;
3295
- // this.call = data.call;
3296
3019
  this.isConcurrentIncoming = false;
3297
3020
  this.incomingCallDiv = false;
3298
3021
  const incomingDetail = this.extensionService.getCallSid();
@@ -3342,9 +3065,6 @@ class CallProgressComponent {
3342
3065
  this.incomingCallSid = details.callSid;
3343
3066
  this.incomingRecordCall = details.recordCall;
3344
3067
  sid = this.incomingCallSid ? this.incomingCallSid : this.callSid || ((_a = this.addRes) === null || _a === void 0 ? void 0 : _a.conferenceSid);
3345
- // if (!this.incomingRecordCall && !this.recordCall) {
3346
- // return;
3347
- // }
3348
3068
  let payload = {
3349
3069
  "conferenceId": (_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.conferenceId,
3350
3070
  };
@@ -3358,9 +3078,6 @@ class CallProgressComponent {
3358
3078
  });
3359
3079
  }
3360
3080
  stopRecording() {
3361
- // if (!this.incomingRecordCall && !this.recordCall) {
3362
- // return;
3363
- // }
3364
3081
  this.isRecording = false;
3365
3082
  this.isPaused = false;
3366
3083
  if (this.timerSubscription) {
@@ -3455,19 +3172,10 @@ class CallProgressComponent {
3455
3172
  getUserInformation(id) {
3456
3173
  this.extensionService.getUserInformation(id).subscribe((response) => {
3457
3174
  console.log(response, 'userInformation');
3458
- // this.selectedUserInfo = response.c2cInformation;
3459
- // if(this.isClickExpand){
3460
- // this.checkTextHeight();
3461
- // }
3462
3175
  }, error => {
3463
3176
  console.error('Error starting recording', error);
3464
3177
  });
3465
3178
  }
3466
- // incomingCallsNewList(data: any) {
3467
- // console.log(data, 'newIncomingCallsListOUR')
3468
- // this.newIncomingCallsList = data;
3469
- // this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
3470
- // }
3471
3179
  selectedIncomingCallInfo(data) {
3472
3180
  this.selectedIncomingCall = data;
3473
3181
  }
@@ -3544,14 +3252,9 @@ class CallProgressComponent {
3544
3252
  this.filteredList = this.contacts.filter((c) => {
3545
3253
  var _a, _b;
3546
3254
  return ((c === null || c === void 0 ? void 0 : c.firstName) || '').toLowerCase().includes(text) || ((c === null || c === void 0 ? void 0 : c.lastName) || '').toLowerCase().includes(text) ||
3547
- ((c === null || c === void 0 ? void 0 : c.middleName) || '').toLowerCase().includes(text) || ((c === null || c === void 0 ? void 0 : c.fullName) || '').toLowerCase().includes(text) ||
3255
+ ((c === null || c === void 0 ? void 0 : c.middleName) || '').toLowerCase().includes(text) || ((c === null || c === void 0 ? void 0 : c.nickName) || '').toLowerCase().includes(text) ||
3548
3256
  (((_a = c === null || c === void 0 ? void 0 : c.numbersList[0]) === null || _a === void 0 ? void 0 : _a.number) || '').toLowerCase().includes(text) || (((_b = c === null || c === void 0 ? void 0 : c.numbersList[1]) === null || _b === void 0 ? void 0 : _b.number) || '').toLowerCase().includes(text);
3549
3257
  });
3550
- // this.filteredParticipentList = this.allParticipentList.filter((c: any) => {
3551
- // const name = (c.direction == 'outgoing-call' ? (c?.toName || '') : (c?.fromName || '')).toLowerCase();
3552
- // const number = (c.direction == 'outgoing-call' ? ( c?.to || '') : (c?.from || '')).toLowerCase();
3553
- // return name.includes(text) || number.includes(text);
3554
- // });
3555
3258
  this.filteredList.forEach((c) => {
3556
3259
  let index = this.currentCallList.findIndex((cc) => { var _a, _b; return (cc === null || cc === void 0 ? void 0 : cc.phone) == ((_a = c === null || c === void 0 ? void 0 : c.numbersList[0]) === null || _a === void 0 ? void 0 : _a.number) || (cc === null || cc === void 0 ? void 0 : cc.phone) == ((_b = c === null || c === void 0 ? void 0 : c.numbersList[1]) === null || _b === void 0 ? void 0 : _b.number); });
3557
3260
  if (index > -1) {
@@ -3576,17 +3279,39 @@ class CallProgressComponent {
3576
3279
  this.showDisconnectModal = true;
3577
3280
  }
3578
3281
  endConference() {
3282
+ var _a;
3579
3283
  console.log('Conference Ended');
3580
3284
  this.showDisconnectModal = false;
3581
- this.endCall(true);
3582
- // Add your end conference logic here
3285
+ if ((_a = this.selectedConf) === null || _a === void 0 ? void 0 : _a.conferenceId) {
3286
+ this.onEndCall(this.selectedConf, true);
3287
+ }
3288
+ else {
3289
+ this.endCall(true);
3290
+ }
3583
3291
  }
3584
3292
  leaveConference() {
3585
- var _a;
3586
- console.log('Left Conference');
3293
+ var _a, _b, _c, _d, _e;
3294
+ console.log('leaveTime', this.leaveReason);
3587
3295
  this.showDisconnectModal = false;
3588
- this.onEndCall((_a = this.hostnumber) === null || _a === void 0 ? void 0 : _a.participantId);
3589
- // Add your leave logic here
3296
+ if (this.isReasonChecked) {
3297
+ let payload = { conferenceId: ((_a = this.selectedConf) === null || _a === void 0 ? void 0 : _a.conferenceId) || ((_b = this.hostnumber) === null || _b === void 0 ? void 0 : _b.conferenceId), time: this.convertHHMMToMinutes(this.leaveReason), timerDate: new Date() };
3298
+ this.extensionService.setTimerForEndConferenceCall(payload).subscribe((res) => { });
3299
+ }
3300
+ if ((_c = this.selectedConf) === null || _c === void 0 ? void 0 : _c.conferenceId) {
3301
+ 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); });
3302
+ 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)
3303
+ && (participant === null || participant === void 0 ? void 0 : participant.to) === 'c2c_softphone_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));
3304
+ if (conference === null || conference === void 0 ? void 0 : conference.id) {
3305
+ this.onEndCall(participentInfo);
3306
+ }
3307
+ }
3308
+ else {
3309
+ this.onEndCall(this.hostnumber);
3310
+ }
3311
+ }
3312
+ convertHHMMToMinutes(time) {
3313
+ const [hours, minutes] = time.split(':').map(Number);
3314
+ return (hours * 60) + minutes;
3590
3315
  }
3591
3316
  ngOnDestroy() {
3592
3317
  this.callData.dial = false;
@@ -3596,10 +3321,10 @@ class CallProgressComponent {
3596
3321
  }
3597
3322
  }
3598
3323
  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 });
3599
- 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", deviceId: "deviceId", conferenceCallInfo: "conferenceCallInfo" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated", isLoadershow: "isLoadershow", 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 <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\r\n <!-- All type Call Hold list -->\r\n <div class=\"held-call-banner\"\r\n *ngIf=\"currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)\">\r\n <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"conf?.isHold\">\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\">Conference Call</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': conf?.isHold }\" (click)=\"swapCalls(conf,true)\">\r\n <span class=\"material-symbols-outlined\" title=\"{{'Hold'}}\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endCall(true)\">\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\"\r\n (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let heldCall of currentCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold && !heldCall?.isConference\">\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\">{{heldCall?.name || 'Unknown number'}}</span>\r\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': heldCall?.isHold }\" (click)=\"swapCalls(heldCall)\">\r\n <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(heldCall)\">\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\" *ngIf=\"heldCall?.isIncomingCall\"\r\n (click)=\"onClickExpand(heldCall)\" [ngClass]=\"{'disabled': !heldCall?.businessNumber}\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\r\n <span class=\"material-symbols-outlined swap-icon\">swap_vert</span>\r\n </button> -->\r\n </div>\r\n </div>\r\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall && !heldCall?.isAcceptCall\">\r\n <div class=\"held-info\">\r\n <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\r\n <div class=\"held-caller\">\r\n <span class=\"held-label\">Incoming Call</span>\r\n <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\r\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"banner-btn receive-btn\" *ngIf=\"!heldCall?.isAcceptCall\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\r\n </button>\r\n <button class=\"call-btn-wrapper banner-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(heldCall)\"> call_end\r\n </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\r\n (click)=\"onClickExpand(heldCall)\" [ngClass]=\"{'disabled': !heldCall?.businessNumber}\">\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 <!-- Compact banners for concurrent incoming (one per call) -->\r\n <!-- <ng-container *ngIf=\"currentCallList.length > 1 && !currentCall?.id\">\r\n <div class=\"incoming-banners-container\" *ngIf=\"!isConference && currentCallList.length > 1\">\r\n <div class=\"\">\r\n <ng-container *ngFor=\"let inc of currentCallList; let i = index\">\r\n <div class=\"incoming-banner\" *ngIf=\"inc?.isIncomingCall && !inc?.isAcceptCall\"\r\n [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 70) + 'px' }\">\r\n <div class=\"incoming-banner-content\">\r\n <div class=\"incoming-info\">\r\n <span class=\"incom ing-label\">Incoming call</span>\r\n <div class=\"incoming-caller\">\r\n <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\r\n inc?.customParameters?.get('name') || '-' }}</span>\r\n <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\r\n inc?.parameters?.From || '' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"incoming-actions\">\r\n <button class=\"banner-btn accept-btn\" (click)=\"add(inc)\">\r\n <span class=\"material-symbols-outlined\">call</span>\r\n </button>\r\n <button class=\"banner-btn reject-btn\" (click)=\"onEndCall(inc)\">\r\n <span class=\"material-symbols-outlined\">call_end</span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\r\n (click)=\"onClickExpand(inc)\" [ngClass]=\"{'disabled': !inc?.businessNumber}\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n\r\n <!-- For single incoming call -->\r\n <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\r\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown\r\n Number'}}</span>\r\n </div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown Number' }}</h1>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n </div>\r\n\r\n <div class=\"call-action-btns mt-auto\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\" [disabled]=\"isIncomingCallBtnDisable\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add(currentCallList[0])\"> call </span>\r\n </button>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- For single active call --> \r\n <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference) && currentCall?.isAcceptCall\"\r\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCall?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\r\n </h1>\r\n <p>{{currentCall?.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n </div>\r\n\r\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\"\r\n [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\"\r\n [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\r\n <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\r\n [disabled]=\"isMergeCallAllowed() || currentCallList.length < 2\">\r\n <span>Merge</span>\r\n </button>\r\n </div>\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\"\r\n (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\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\r\n <div>\r\n <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n (click)=\"endConfereneceCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- conference call view -->\r\n <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n <div class=\"conf-heading\">\r\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n <span class=\"conf-title\">Conference Call</span>\r\n </div>\r\n\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?.isConference\">\r\n <span *ngIf=\"i != 0\">&</span>\r\n {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"conf-timer\">{{ timer }}</div>\r\n\r\n <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\"\r\n [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\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\r\n <div class=\"conf-end\">\r\n <button class=\"circle-btn danger\" (click)=\"endCall(true)\">\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 <!-- </ng-container> -->\r\n </div>\r\n\r\n <!-- Incoming call user details shown in model -->\r\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n <div class=\"mb-2 user-info-section\" >\r\n <div class=\"text-center my-3\">\r\n <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n </div>\r\n <div class=\"mb-3\">\r\n <h5 class=\"text-white mb-1\">Name:</h5>\r\n <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Number:</div>\r\n <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n </div>\r\n </div>\r\n\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\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}}\">{{selectedUserInfo?.subject}}</div>\r\n </div>\r\n </div>\r\n\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 *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\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}}</div>\r\n <small class=\"toggle-btn\" *ngIf=\"showButton\" (click)=\"toggleText()\">{{ isExpanded ? 'See less' : 'See more' }}</small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Point Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Source Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- contact list panel -->\r\n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n <div class=\"contacts-header\">\r\n <div class=\"title\">Participent</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\" fill=\"#000000\"><path 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\"/></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\">\r\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n <ng-container *ngFor=\"let c of filteredList\">\r\n <div class=\"contact-item\" *ngIf=\"isDirectCallOptionShow && 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)}}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(c)\" *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)\" *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\">\r\n <div class=\"contact-item\" *ngIf=\"searchText\">\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)=\"callContact(searchText, true)\" 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)\" 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 class=\"contacts-list\">\r\n <div class=\"px-2\">\r\n <h5 class=\"mb-0 title\">In This Call</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\">\r\n <div class=\"contact-item\" *ngFor=\"let c of filteredParticipentList\">\r\n <ng-container *ngIf=\"c?.to == 'client' else participentInfo\">\r\n <img class=\"contact-avatar\" [src]=\"c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">You\r\n </div>\r\n <div class=\"contact-title\">{{ c?.from }}</div>\r\n </div>\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\"\r\n (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?.hold }\" (click)=\"onHoldCall(c)\">\r\n <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </ng-container>\r\n <ng-template #participentInfo>\r\n <img class=\"contact-avatar\" [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.from == hostnumber?.from && c?.to == 'c2c_softphone_client'\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\"\r\n (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?.hold }\" (click)=\"onHoldCall(c)\">\r\n <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </ng-template>\r\n </div>\r\n <hr class=\"m-2\">\r\n <div class=\"mt-3 px-2\">\r\n <h5 class=\"mb-0 title\">Participent added to the call</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\"> \r\n <ng-container *ngFor=\"let c of filteredList\">\r\n <div class=\"contact-item\" *ngIf=\"!c?.IsConnected && false\">\r\n <img class=\"contact-avatar\" [src]=\"c?.img ? 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)}}</div>\r\n </div>\r\n <button class=\"contact-call-btn\" (click)=\"callContact(c)\" *ngIf=\"!c?.IsConnected\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n <span class=\"label\">Call</span>\r\n </button>\r\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\" *ngIf=\"c?.IsConnected\">\r\n <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\" *ngIf=\"c?.IsConnected\">\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 <ng-container *ngFor=\"let c of leftParticipent[currentCall?.conferenceId]\">\r\n <div class=\"contact-item\">\r\n <img class=\"contact-avatar\" [src]=\"c.direction == 'outgoing-call' && c?.toImage ? c?.toImage : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c.direction == 'outgoing-call' ? c?.toName : c?.fromName || 'Unknown number'}}</div>\r\n <div class=\"contact-title\">{{c.direction == 'outgoing-call' ? c?.to : c?.from}}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn \" (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\" >\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n <span class=\"label\">Add</span>\r\n </button>\r\n </div>\r\n </ng-container>\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\">\r\n \r\n <h2 class=\"title\">Call Disconnected</h2>\r\n \r\n <p class=\"message\">\r\n You can end conference call or leave conference call.\r\n </p>\r\n \r\n <div class=\"button-group\">\r\n <button class=\"btn end-btn\" (click)=\"endConference()\">\r\n \u274C End Conference\r\n </button>\r\n \r\n <button class=\"btn leave-btn\" (click)=\"leaveConference()\">\r\n \uD83D\uDEAA Leave\r\n </button>\r\n </div>\r\n \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:hidden}.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:-4px;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted #4b4b4b}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{width:100%;padding:5px 8px;height:100%;gap:8px;overflow-y:auto}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.incoming-banner{top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.disabled{opacity:.5;pointer-events:none}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:37px;height:37px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:8px;cursor:pointer}.contact-add-btn{background-color:#2ecc71!important}.conference-hold-contact{display:inline-flex;align-items:center;gap:5px;background:#727070;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.user-info-section{width:100%;height:100%;overflow-y:auto;overflow-x:hidden!important}.user-info-section::-webkit-scrollbar{display:none}.toggle-btn{cursor:pointer}.text-container{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease}.text-container.expanded{-webkit-line-clamp:unset}.userName{font-family:FontAwesome}.subject-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.conference-contact{display:inline-flex;align-items:center;gap:5px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.organizer-label{padding:1px 5px;font-size:11px;border-radius:10px;border:1px solid #a0a0a0;margin-top:2px;background:#fcfcfc}.custom-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.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}.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}.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}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
3324
+ 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", deviceId: "deviceId", callAction: "callAction", conferenceCallInfo: "conferenceCallInfo" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated", isLoadershow: "isLoadershow", 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 <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\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)\">\r\n <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"conf?.isConferenceHold\">\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\">Conference Call</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)\">\r\n <span class=\"material-symbols-outlined\" title=\"{{'Hold'}}\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall(conf)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- For single incoming call -->\r\n <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\r\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown\r\n Number'}}</span>\r\n </div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img || 'assets/images/user.jpg'\" alt=\"\"\r\n width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown\r\n Number' }}</h1>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n </div>\r\n\r\n <div class=\"call-action-btns mt-auto\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\"\r\n [disabled]=\"isIncomingCallBtnDisable\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add(currentCallList[0])\"> call </span>\r\n </button>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- For single active call -->\r\n <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference) && currentCall?.isAcceptCall\"\r\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCall?.img || 'assets/images/user.jpg'\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\r\n </h1>\r\n <p>{{currentCall?.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n </div>\r\n\r\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\"\r\n [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n <!-- <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\r\n <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\r\n [disabled]=\"isMergeCallAllowed() || currentCallList.length < 2\">\r\n <span>Merge</span>\r\n </button>\r\n </div> -->\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\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\r\n <div>\r\n <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- conference call view -->\r\n <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n <div class=\"conf-heading\">\r\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n <span class=\"conf-title\">Conference Call</span>\r\n </div>\r\n\r\n <div class=\"scroll-container\">\r\n <div class=\"scroll-text conf-name\">\r\n <ng-container *ngFor=\"let call of currentCallList; let i = index\">\r\n <ng-container *ngIf=\"!call?.isConferenceHold\">\r\n <span *ngIf=\"i != 0\">&</span>\r\n {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"conf-timer\">{{ timer }}</div>\r\n <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\"\r\n [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\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\r\n <div class=\"conf-end\">\r\n <button class=\"circle-btn danger\" (click)=\"endConfereneceCall()\">\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 <!-- </ng-container> -->\r\n </div>\r\n\r\n <!-- Incoming call user details shown in model -->\r\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n <div class=\"mb-2 user-info-section\">\r\n <div class=\"text-center my-3\">\r\n <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n </div>\r\n <div class=\"mb-3\">\r\n <h5 class=\"text-white mb-1\">Name:</h5>\r\n <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Number:</div>\r\n <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n </div>\r\n </div>\r\n\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\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\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\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\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Point Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Source Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- contact list panel -->\r\n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n <div class=\"contacts-header\">\r\n <div>Participant</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel({}, true)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\r\n <div class=\"search-bar p-3 position-relative\">\r\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n <div class=\"search-contacts-list\">\r\n <ng-container *ngFor=\"let c of filteredList\">\r\n <div class=\"contact-item\" *ngIf=\"searchText\">\r\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number)}}</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\">In This 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 <ng-container *ngIf=\"c?.to == 'client' else participentInfo\">\r\n <img class=\"contact-avatar\" [src]=\"c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">You\r\n </div>\r\n <div class=\"contact-title\">{{ c?.from }}</div>\r\n </div>\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\" (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?.hold }\"\r\n (click)=\"onHoldCall(c)\">\r\n <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused\r\n </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </ng-container>\r\n <ng-template #participentInfo>\r\n <img class=\"contact-avatar\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' :\r\n c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"c?.to != 'c2c_softphone_client'\">{{ c?.direction ==\r\n 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n 'Unknown'}}</div>\r\n <div class=\"contact-title\" *ngIf=\"c?.to == 'c2c_softphone_client'\">{{ c?.from ||\r\n 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.from == hostnumber?.from && c?.to == 'c2c_softphone_client'\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\" (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?.hold }\"\r\n (click)=\"onHoldCall(c)\" *ngIf=\"c?.to != 'c2c_softphone_client'\">\r\n <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused\r\n </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\"\r\n *ngIf=\"c?.to != 'c2c_softphone_client'\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall()\"\r\n *ngIf=\"c?.to == 'c2c_softphone_client' && deviceNumberList.includes(c?.from)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </ng-template>\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\"\r\n [src]=\"c.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c.direction == 'outgoing-call' ? c?.toName : c?.fromName || 'Unknown\r\n number'}}</div>\r\n <div class=\"contact-title\">{{c.direction == 'outgoing-call' ? c?.to : c?.from}}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn \"\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\">Add</span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\r\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\r\n <div style=\"display: flex; width: 100%\">\r\n <div>\r\n <div class=\"min-call-animation\" id=\"call-avatar\">\r\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"min-callerDetails\">\r\n <div class=\"name\">\r\n {{callData.name}}\r\n </div>\r\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"min-btn-container\">\r\n <div class=\"min-timer\">{{timer}}</div>\r\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n</div>\r\n<!-- Call Disconnect Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showDisconnectModal\">\r\n <div class=\"modal-content p-3\">\r\n <div class=\"contacts-header p-0 pb-2\">\r\n <h4 class=\"title mb-0\">Call Disconnected</h4>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDisconnectModal = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"contant-body mb-2\">\r\n <p class=\"mt-2\">\r\n Exiting this call will not end the conference. The session will continue, and charges will incur to\r\n your\r\n account.\r\n </p>\r\n </div>\r\n <div class=\"button-group\">\r\n <div class=\"text-start d-flex align-items-center\">\r\n <label class=\"d-flex align-items-center mb-0 mr-2\">\r\n <input type=\"checkbox\" [(ngModel)]=\"isReasonChecked\" class=\"me-2\" />\r\n </label>\r\n\r\n <input type=\"time\" class=\"form-control\" placeholder=\"Enter reason\" [(ngModel)]=\"leaveReason\"\r\n [disabled]=\"!isReasonChecked\" />\r\n </div>\r\n <button class=\"btn end-btn\" (click)=\"leaveConference()\">\r\n Leave\r\n </button>\r\n <button class=\"btn end-btn\" (click)=\"endConference()\">\r\n End All\r\n </button>\r\n </div>\r\n\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:hidden}.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:-4px;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted #4b4b4b}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{width:100%;padding:5px 8px;height:100%;gap:8px;overflow-y:auto}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.incoming-banner{top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.modal-content .contacts-header{height:40px}.search-contacts-list{max-height:196px;overflow:auto;position:absolute;width:91%;background:white;z-index:1000}.contant-body p{font-size:14px;color:#5f6061}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.disabled{opacity:.5;pointer-events:none}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:37px;height:37px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:8px;cursor:pointer}.contact-add-btn{background-color:#2ecc71!important}.conference-hold-contact{display:inline-flex;align-items:center;gap:5px;background:#727070;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.user-info-section{width:100%;height:100%;overflow-y:auto;overflow-x:hidden!important}.user-info-section::-webkit-scrollbar{display:none}.toggle-btn{cursor:pointer}.text-container{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease}.text-container.expanded{-webkit-line-clamp:unset}.userName{font-family:FontAwesome}.subject-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.conference-contact{display:inline-flex;align-items:center;gap:5px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.organizer-label{padding:1px 5px;font-size:11px;border-radius:10px;border:1px solid #a0a0a0;margin-top:2px;background:#fcfcfc}.custom-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000;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}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center;margin-top:35px}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}\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"] }] });
3600
3325
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
3601
3326
  type: Component,
3602
- 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 <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\r\n <!-- All type Call Hold list -->\r\n <div class=\"held-call-banner\"\r\n *ngIf=\"currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)\">\r\n <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"conf?.isHold\">\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\">Conference Call</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': conf?.isHold }\" (click)=\"swapCalls(conf,true)\">\r\n <span class=\"material-symbols-outlined\" title=\"{{'Hold'}}\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endCall(true)\">\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\"\r\n (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngFor=\"let heldCall of currentCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold && !heldCall?.isConference\">\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\">{{heldCall?.name || 'Unknown number'}}</span>\r\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': heldCall?.isHold }\" (click)=\"swapCalls(heldCall)\">\r\n <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(heldCall)\">\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\" *ngIf=\"heldCall?.isIncomingCall\"\r\n (click)=\"onClickExpand(heldCall)\" [ngClass]=\"{'disabled': !heldCall?.businessNumber}\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\r\n <span class=\"material-symbols-outlined swap-icon\">swap_vert</span>\r\n </button> -->\r\n </div>\r\n </div>\r\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall && !heldCall?.isAcceptCall\">\r\n <div class=\"held-info\">\r\n <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\r\n <div class=\"held-caller\">\r\n <span class=\"held-label\">Incoming Call</span>\r\n <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\r\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\r\n </div>\r\n </div>\r\n <div class=\"held-actions\">\r\n <button class=\"banner-btn receive-btn\" *ngIf=\"!heldCall?.isAcceptCall\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\r\n </button>\r\n <button class=\"call-btn-wrapper banner-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(heldCall)\"> call_end\r\n </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\r\n (click)=\"onClickExpand(heldCall)\" [ngClass]=\"{'disabled': !heldCall?.businessNumber}\">\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 <!-- Compact banners for concurrent incoming (one per call) -->\r\n <!-- <ng-container *ngIf=\"currentCallList.length > 1 && !currentCall?.id\">\r\n <div class=\"incoming-banners-container\" *ngIf=\"!isConference && currentCallList.length > 1\">\r\n <div class=\"\">\r\n <ng-container *ngFor=\"let inc of currentCallList; let i = index\">\r\n <div class=\"incoming-banner\" *ngIf=\"inc?.isIncomingCall && !inc?.isAcceptCall\"\r\n [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 70) + 'px' }\">\r\n <div class=\"incoming-banner-content\">\r\n <div class=\"incoming-info\">\r\n <span class=\"incom ing-label\">Incoming call</span>\r\n <div class=\"incoming-caller\">\r\n <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\r\n inc?.customParameters?.get('name') || '-' }}</span>\r\n <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\r\n inc?.parameters?.From || '' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"incoming-actions\">\r\n <button class=\"banner-btn accept-btn\" (click)=\"add(inc)\">\r\n <span class=\"material-symbols-outlined\">call</span>\r\n </button>\r\n <button class=\"banner-btn reject-btn\" (click)=\"onEndCall(inc)\">\r\n <span class=\"material-symbols-outlined\">call_end</span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\r\n (click)=\"onClickExpand(inc)\" [ngClass]=\"{'disabled': !inc?.businessNumber}\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container> -->\r\n\r\n <!-- For single incoming call -->\r\n <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\r\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown\r\n Number'}}</span>\r\n </div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown Number' }}</h1>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n </div>\r\n\r\n <div class=\"call-action-btns mt-auto\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\" [disabled]=\"isIncomingCallBtnDisable\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add(currentCallList[0])\"> call </span>\r\n </button>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- For single active call --> \r\n <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference) && currentCall?.isAcceptCall\"\r\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCall?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\r\n </h1>\r\n <p>{{currentCall?.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n </div>\r\n\r\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\"\r\n [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\"\r\n [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\r\n <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\r\n [disabled]=\"isMergeCallAllowed() || currentCallList.length < 2\">\r\n <span>Merge</span>\r\n </button>\r\n </div>\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\"\r\n (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\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\r\n <div>\r\n <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n (click)=\"endConfereneceCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- conference call view -->\r\n <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n <div class=\"conf-heading\">\r\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n <span class=\"conf-title\">Conference Call</span>\r\n </div>\r\n\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?.isConference\">\r\n <span *ngIf=\"i != 0\">&</span>\r\n {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"conf-timer\">{{ timer }}</div>\r\n\r\n <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\"\r\n [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\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\r\n <div class=\"conf-end\">\r\n <button class=\"circle-btn danger\" (click)=\"endCall(true)\">\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 <!-- </ng-container> -->\r\n </div>\r\n\r\n <!-- Incoming call user details shown in model -->\r\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n <div class=\"mb-2 user-info-section\" >\r\n <div class=\"text-center my-3\">\r\n <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n </div>\r\n <div class=\"mb-3\">\r\n <h5 class=\"text-white mb-1\">Name:</h5>\r\n <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Number:</div>\r\n <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n </div>\r\n </div>\r\n\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\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}}\">{{selectedUserInfo?.subject}}</div>\r\n </div>\r\n </div>\r\n\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 *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\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}}</div>\r\n <small class=\"toggle-btn\" *ngIf=\"showButton\" (click)=\"toggleText()\">{{ isExpanded ? 'See less' : 'See more' }}</small>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Point Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Source Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- contact list panel -->\r\n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n <div class=\"contacts-header\">\r\n <div class=\"title\">Participent</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\" fill=\"#000000\"><path 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\"/></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\">\r\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n <ng-container *ngFor=\"let c of filteredList\">\r\n <div class=\"contact-item\" *ngIf=\"isDirectCallOptionShow && 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)}}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(c)\" *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)\" *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\">\r\n <div class=\"contact-item\" *ngIf=\"searchText\">\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)=\"callContact(searchText, true)\" 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)\" 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 class=\"contacts-list\">\r\n <div class=\"px-2\">\r\n <h5 class=\"mb-0 title\">In This Call</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\">\r\n <div class=\"contact-item\" *ngFor=\"let c of filteredParticipentList\">\r\n <ng-container *ngIf=\"c?.to == 'client' else participentInfo\">\r\n <img class=\"contact-avatar\" [src]=\"c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">You\r\n </div>\r\n <div class=\"contact-title\">{{ c?.from }}</div>\r\n </div>\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\"\r\n (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?.hold }\" (click)=\"onHoldCall(c)\">\r\n <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </ng-container>\r\n <ng-template #participentInfo>\r\n <img class=\"contact-avatar\" [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.from == hostnumber?.from && c?.to == 'c2c_softphone_client'\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\"\r\n (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?.hold }\" (click)=\"onHoldCall(c)\">\r\n <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </ng-template>\r\n </div>\r\n <hr class=\"m-2\">\r\n <div class=\"mt-3 px-2\">\r\n <h5 class=\"mb-0 title\">Participent added to the call</h5>\r\n </div>\r\n <hr class=\"mb-2 mt-1\"> \r\n <ng-container *ngFor=\"let c of filteredList\">\r\n <div class=\"contact-item\" *ngIf=\"!c?.IsConnected && false\">\r\n <img class=\"contact-avatar\" [src]=\"c?.img ? 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)}}</div>\r\n </div>\r\n <button class=\"contact-call-btn\" (click)=\"callContact(c)\" *ngIf=\"!c?.IsConnected\">\r\n <span class=\"material-symbols-outlined\"> call </span>\r\n <span class=\"label\">Call</span>\r\n </button>\r\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\" *ngIf=\"c?.IsConnected\">\r\n <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\" *ngIf=\"c?.IsConnected\">\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 <ng-container *ngFor=\"let c of leftParticipent[currentCall?.conferenceId]\">\r\n <div class=\"contact-item\">\r\n <img class=\"contact-avatar\" [src]=\"c.direction == 'outgoing-call' && c?.toImage ? c?.toImage : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c.direction == 'outgoing-call' ? c?.toName : c?.fromName || 'Unknown number'}}</div>\r\n <div class=\"contact-title\">{{c.direction == 'outgoing-call' ? c?.to : c?.from}}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn \" (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\" >\r\n <span class=\"material-symbols-outlined\"> add </span>\r\n <span class=\"label\">Add</span>\r\n </button>\r\n </div>\r\n </ng-container>\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\">\r\n \r\n <h2 class=\"title\">Call Disconnected</h2>\r\n \r\n <p class=\"message\">\r\n You can end conference call or leave conference call.\r\n </p>\r\n \r\n <div class=\"button-group\">\r\n <button class=\"btn end-btn\" (click)=\"endConference()\">\r\n \u274C End Conference\r\n </button>\r\n \r\n <button class=\"btn leave-btn\" (click)=\"leaveConference()\">\r\n \uD83D\uDEAA Leave\r\n </button>\r\n </div>\r\n \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:hidden}.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:-4px;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted #4b4b4b}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{width:100%;padding:5px 8px;height:100%;gap:8px;overflow-y:auto}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.incoming-banner{top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.disabled{opacity:.5;pointer-events:none}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:37px;height:37px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:8px;cursor:pointer}.contact-add-btn{background-color:#2ecc71!important}.conference-hold-contact{display:inline-flex;align-items:center;gap:5px;background:#727070;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.user-info-section{width:100%;height:100%;overflow-y:auto;overflow-x:hidden!important}.user-info-section::-webkit-scrollbar{display:none}.toggle-btn{cursor:pointer}.text-container{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease}.text-container.expanded{-webkit-line-clamp:unset}.userName{font-family:FontAwesome}.subject-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.conference-contact{display:inline-flex;align-items:center;gap:5px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.organizer-label{padding:1px 5px;font-size:11px;border-radius:10px;border:1px solid #a0a0a0;margin-top:2px;background:#fcfcfc}.custom-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.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}.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}.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}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}\n"] }]
3327
+ 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 <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\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)\">\r\n <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n <div class=\"held-call-content\" *ngIf=\"conf?.isConferenceHold\">\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\">Conference Call</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)\">\r\n <span class=\"material-symbols-outlined\" title=\"{{'Hold'}}\"> phone_paused </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall(conf)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- For single incoming call -->\r\n <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\r\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown\r\n Number'}}</span>\r\n </div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img || 'assets/images/user.jpg'\" alt=\"\"\r\n width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown\r\n Number' }}</h1>\r\n <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n </div>\r\n\r\n <div class=\"call-action-btns mt-auto\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\"\r\n [disabled]=\"isIncomingCallBtnDisable\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add(currentCallList[0])\"> call </span>\r\n </button>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\r\n </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <!-- For single active call -->\r\n <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference) && currentCall?.isAcceptCall\"\r\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"currentCall?.img || 'assets/images/user.jpg'\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\r\n </h1>\r\n <p>{{currentCall?.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n </div>\r\n\r\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\"\r\n [disabled]=\"!currentCall?.isAcceptCall\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n <!-- <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\r\n <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\r\n [disabled]=\"isMergeCallAllowed() || currentCallList.length < 2\">\r\n <span>Merge</span>\r\n </button>\r\n </div> -->\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\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\r\n <div>\r\n <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- conference call view -->\r\n <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n <div class=\"conf-heading\">\r\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n <span class=\"conf-title\">Conference Call</span>\r\n </div>\r\n\r\n <div class=\"scroll-container\">\r\n <div class=\"scroll-text conf-name\">\r\n <ng-container *ngFor=\"let call of currentCallList; let i = index\">\r\n <ng-container *ngIf=\"!call?.isConferenceHold\">\r\n <span *ngIf=\"i != 0\">&</span>\r\n {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"conf-timer\">{{ timer }}</div>\r\n <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\"\r\n [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n <div class=\"record-btn-container\">\r\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n <span class=\"recording-icon\"></span>\r\n </button>\r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n {{ getFormattedTime() }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n (keyup)=\"onCallInputEnter($event)\">\r\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n (click)=\"clearInputs()\">close_small</span>\r\n </div>\r\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n {{key.num}}\r\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </div>\r\n </div>\r\n\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\r\n <div class=\"conf-end\">\r\n <button class=\"circle-btn danger\" (click)=\"endConfereneceCall()\">\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 <!-- </ng-container> -->\r\n </div>\r\n\r\n <!-- Incoming call user details shown in model -->\r\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n <div class=\"mb-2 user-info-section\">\r\n <div class=\"text-center my-3\">\r\n <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n </div>\r\n <div class=\"mb-3\">\r\n <h5 class=\"text-white mb-1\">Name:</h5>\r\n <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Number:</div>\r\n <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n </div>\r\n </div>\r\n\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\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\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\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\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Point Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"mb-1\">Source Name:</div>\r\n <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- contact list panel -->\r\n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n <div class=\"contacts-header\">\r\n <div>Participant</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel({}, true)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n\r\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\r\n <div class=\"search-bar p-3 position-relative\">\r\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n <div class=\"search-contacts-list\">\r\n <ng-container *ngFor=\"let c of filteredList\">\r\n <div class=\"contact-item\" *ngIf=\"searchText\">\r\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number)}}</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\">In This 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 <ng-container *ngIf=\"c?.to == 'client' else participentInfo\">\r\n <img class=\"contact-avatar\" [src]=\"c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">You\r\n </div>\r\n <div class=\"contact-title\">{{ c?.from }}</div>\r\n </div>\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\" (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?.hold }\"\r\n (click)=\"onHoldCall(c)\">\r\n <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused\r\n </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </ng-container>\r\n <ng-template #participentInfo>\r\n <img class=\"contact-avatar\"\r\n [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' :\r\n c?.fromName || 'Unknown'}}\r\n </div>\r\n <div class=\"contact-title\" *ngIf=\"c?.to != 'c2c_softphone_client'\">{{ c?.direction ==\r\n 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n 'Unknown'}}</div>\r\n <div class=\"contact-title\" *ngIf=\"c?.to == 'c2c_softphone_client'\">{{ c?.from ||\r\n 'Unknown'}}</div>\r\n <div class=\"d-flex\" *ngIf=\"c?.from == hostnumber?.from && c?.to == 'c2c_softphone_client'\">\r\n <span class=\"organizer-label\">Organizer</span>\r\n </div>\r\n </div>\r\n <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\" (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?.hold }\"\r\n (click)=\"onHoldCall(c)\" *ngIf=\"c?.to != 'c2c_softphone_client'\">\r\n <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused\r\n </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\"\r\n *ngIf=\"c?.to != 'c2c_softphone_client'\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n <button class=\"conference-contact\" (click)=\"endConfereneceCall()\"\r\n *ngIf=\"c?.to == 'c2c_softphone_client' && deviceNumberList.includes(c?.from)\">\r\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n </button>\r\n </ng-template>\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\"\r\n [src]=\"c.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n alt=\"\" />\r\n <div class=\"contact-info\">\r\n <div class=\"contact-name\">{{c.direction == 'outgoing-call' ? c?.toName : c?.fromName || 'Unknown\r\n number'}}</div>\r\n <div class=\"contact-title\">{{c.direction == 'outgoing-call' ? c?.to : c?.from}}</div>\r\n </div>\r\n <button class=\"contact-call-btn contact-add-btn \"\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\">Add</span>\r\n </button>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\r\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\r\n <div style=\"display: flex; width: 100%\">\r\n <div>\r\n <div class=\"min-call-animation\" id=\"call-avatar\">\r\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\r\n </div>\r\n </div>\r\n <div>\r\n <div class=\"min-callerDetails\">\r\n <div class=\"name\">\r\n {{callData.name}}\r\n </div>\r\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"min-btn-container\">\r\n <div class=\"min-timer\">{{timer}}</div>\r\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n </div>\r\n</div>\r\n<!-- Call Disconnect Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showDisconnectModal\">\r\n <div class=\"modal-content p-3\">\r\n <div class=\"contacts-header p-0 pb-2\">\r\n <h4 class=\"title mb-0\">Call Disconnected</h4>\r\n <div class=\"d-flex justify-content-between\">\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDisconnectModal = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n fill=\"#000000\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"contant-body mb-2\">\r\n <p class=\"mt-2\">\r\n Exiting this call will not end the conference. The session will continue, and charges will incur to\r\n your\r\n account.\r\n </p>\r\n </div>\r\n <div class=\"button-group\">\r\n <div class=\"text-start d-flex align-items-center\">\r\n <label class=\"d-flex align-items-center mb-0 mr-2\">\r\n <input type=\"checkbox\" [(ngModel)]=\"isReasonChecked\" class=\"me-2\" />\r\n </label>\r\n\r\n <input type=\"time\" class=\"form-control\" placeholder=\"Enter reason\" [(ngModel)]=\"leaveReason\"\r\n [disabled]=\"!isReasonChecked\" />\r\n </div>\r\n <button class=\"btn end-btn\" (click)=\"leaveConference()\">\r\n Leave\r\n </button>\r\n <button class=\"btn end-btn\" (click)=\"endConference()\">\r\n End All\r\n </button>\r\n </div>\r\n\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:hidden}.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:-4px;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted #4b4b4b}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{width:100%;padding:5px 8px;height:100%;gap:8px;overflow-y:auto}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.incoming-banner{top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.modal-content .contacts-header{height:40px}.search-contacts-list{max-height:196px;overflow:auto;position:absolute;width:91%;background:white;z-index:1000}.contant-body p{font-size:14px;color:#5f6061}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.disabled{opacity:.5;pointer-events:none}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:37px;height:37px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:8px;cursor:pointer}.contact-add-btn{background-color:#2ecc71!important}.conference-hold-contact{display:inline-flex;align-items:center;gap:5px;background:#727070;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.user-info-section{width:100%;height:100%;overflow-y:auto;overflow-x:hidden!important}.user-info-section::-webkit-scrollbar{display:none}.toggle-btn{cursor:pointer}.text-container{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease}.text-container.expanded{-webkit-line-clamp:unset}.userName{font-family:FontAwesome}.subject-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.conference-contact{display:inline-flex;align-items:center;gap:5px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.organizer-label{padding:1px 5px;font-size:11px;border-radius:10px;border:1px solid #a0a0a0;margin-top:2px;background:#fcfcfc}.custom-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000;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}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center;margin-top:35px}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}\n"] }]
3603
3328
  }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: TwilioService }, { type: IpAddressService }, { type: IncomeingCallSocketService }]; }, propDecorators: { callData: [{
3604
3329
  type: Input
3605
3330
  }], selectedCallerId: [{
@@ -3612,6 +3337,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3612
3337
  type: Input
3613
3338
  }], deviceId: [{
3614
3339
  type: Input
3340
+ }], callAction: [{
3341
+ type: Input
3615
3342
  }], conferenceCallInfo: [{
3616
3343
  type: Input
3617
3344
  }], endCallEvent: [{
@@ -3743,75 +3470,15 @@ class DialboxComponent {
3743
3470
  this.isLoadershow = false;
3744
3471
  this.isIncomingCallnotification = false;
3745
3472
  this.notificationCallList = [];
3746
- this.conferenceCallInfo = {
3747
- "createdAt": "Tue Dec 30 07:53:51 UTC 2025",
3748
- "conferenceName": "conf_6953850f1522800c4f3cc715",
3749
- "conferenceId": "6953850f1522800c4f3cc715",
3750
- "conferenceStatus": "completed",
3751
- "isActive": false,
3752
- "conferenceSid": "CFa38eab13863a6af9827b348120e369b8",
3753
- "participants": [
3754
- {
3755
- "callDuration": 88,
3756
- "callSid": "CA48abba51da47c32749ba568d7f4eccca",
3757
- "role": "callee",
3758
- "joinedAt": "Tue Dec 30 07:53:54 UTC 2025",
3759
- "isHold": false,
3760
- "isConference": true,
3761
- "userId": "69392c670665b958db876888",
3762
- "forwardedTo": "",
3763
- "leftAt": "Tue Dec 30 07:55:25 UTC 2025",
3764
- "duration": 2,
3765
- "isLeft": true,
3766
- "conferenceId": "6953850f1522800c4f3cc715",
3767
- "from": "+12252519886",
3768
- "to": "+916353645844",
3769
- "status": "completed",
3770
- "direction": "outgoing-call"
3771
- },
3772
- {
3773
- "callDuration": 65,
3774
- "callSid": "CAcbc286a9e6559f1a3f1b51f48ce3f73b",
3775
- "role": "callee",
3776
- "joinedAt": "Tue Dec 30 07:54:14 UTC 2025",
3777
- "isHold": false,
3778
- "isConference": true,
3779
- "userId": "69392c670665b958db876888",
3780
- "forwardedTo": "",
3781
- "leftAt": "Tue Dec 30 07:55:25 UTC 2025",
3782
- "duration": 2,
3783
- "isLeft": true,
3784
- "conferenceId": "6953850f1522800c4f3cc715",
3785
- "toName": "Test ",
3786
- "fromName": "Test ",
3787
- "from": "+12252519886",
3788
- "to": "+916354564733",
3789
- "status": "completed",
3790
- "direction": "outgoing-call"
3791
- },
3792
- {
3793
- "callDuration": 25,
3794
- "callSid": "CA2fb6b893cf406c033311e3b11d6e760f",
3795
- "joinedAt": "Tue Dec 30 07:55:06 UTC 2025",
3796
- "isHold": false,
3797
- "isConference": true,
3798
- "forwardedTo": "",
3799
- "duration": 1,
3800
- "isLeft": true,
3801
- "conferenceId": "6953850f1522800c4f3cc715",
3802
- "from": "+16098065088",
3803
- "to": "+12252302470",
3804
- "status": "no-answer",
3805
- "direction": "incoming-call"
3806
- }
3807
- ]
3808
- };
3473
+ this.deviceNumberList = [];
3474
+ this.conferenceCallInfo = {};
3809
3475
  this.closeDialpadEvent = new EventEmitter();
3810
3476
  this.callInitiated = new EventEmitter();
3811
3477
  this.endCallEvent = new EventEmitter();
3812
3478
  this.minimiseEvent = new EventEmitter();
3813
3479
  this.incomingCallsNewInfoEvent = new EventEmitter();
3814
3480
  this.incomingCallInitiated = new EventEmitter();
3481
+ this.conferenceCallList = new EventEmitter();
3815
3482
  this.numberDialed = new EventEmitter();
3816
3483
  this.isCallInProgress = false;
3817
3484
  this.keypadVal = keypad;
@@ -3888,15 +3555,24 @@ class DialboxComponent {
3888
3555
  this.incomeingCallSocketService.listen().subscribe((incomingCallData) => __awaiter(this, void 0, void 0, function* () {
3889
3556
  var _a, _b;
3890
3557
  this.twilioService.conferenceCallInfo = incomingCallData;
3558
+ this.conferenceCallList.emit(incomingCallData);
3891
3559
  incomingCallData = (incomingCallData === null || incomingCallData === void 0 ? void 0 : incomingCallData.length) > 0 ? incomingCallData.filter((item) => { var _a; return ((_a = item.participants) === null || _a === void 0 ? void 0 : _a.length) > 0; }) : [];
3892
- if (!!(incomingCallData === null || incomingCallData === void 0 ? void 0 : incomingCallData.length)) {
3560
+ let updatedConferenceCallData = [];
3561
+ incomingCallData.forEach((callInfo, i) => {
3562
+ let ourNumber = {};
3563
+ ourNumber = callInfo.participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.to) == 'c2c_softphone_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));
3564
+ if (ourNumber === null || ourNumber === void 0 ? void 0 : ourNumber.id) {
3565
+ updatedConferenceCallData.push(callInfo);
3566
+ }
3567
+ });
3568
+ if (!!(updatedConferenceCallData === null || updatedConferenceCallData === void 0 ? void 0 : updatedConferenceCallData.length)) {
3893
3569
  // this.incomingCallsList = incomingCallData.participants.filter((item: any) => !item.isLeft) || [];
3894
- this.incomingCallsList = incomingCallData || [];
3570
+ this.incomingCallsList = updatedConferenceCallData || [];
3895
3571
  let parentCall = [];
3896
3572
  if ((_a = this.notificationCallList) === null || _a === void 0 ? void 0 : _a.length) {
3897
3573
  this.notificationCallList = this.notificationCallList.filter((res) => res.endTime >= (new Date().getTime()));
3898
3574
  this.notificationCallList.forEach((call) => {
3899
- incomingCallData.forEach((item) => {
3575
+ updatedConferenceCallData.forEach((item) => {
3900
3576
  let info = item.participants.find((resInfo) => (resInfo === null || resInfo === void 0 ? void 0 : resInfo.id) === (call === null || call === void 0 ? void 0 : call.participantId));
3901
3577
  // return info?.id
3902
3578
  if (info) {
@@ -4057,7 +3733,7 @@ class DialboxComponent {
4057
3733
  this.registerDragElement();
4058
3734
  }
4059
3735
  ngOnChanges(changes) {
4060
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
3736
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
4061
3737
  if (((_a = changes['incomingCallnotification']) === null || _a === void 0 ? void 0 : _a.currentValue) && this.incomingCallnotification && ((_c = (_b = this.incomingCallnotification) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.content) != "Voicemail") {
4062
3738
  if (((_e = (_d = this.incomingCallnotification) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.content) == "IncomingCall" && ((_h = (_g = (_f = this.incomingCallnotification) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.status) != "rejected" && ((_l = (_k = (_j = this.incomingCallnotification) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.status) != "accepted") {
4063
3739
  this.isIncomingCallnotification = true;
@@ -4230,6 +3906,14 @@ class DialboxComponent {
4230
3906
  });
4231
3907
  }
4232
3908
  }
3909
+ if ((_4 = changes['callAction']) === null || _4 === void 0 ? void 0 : _4.currentValue) {
3910
+ if (((_5 = this.callAction) === null || _5 === void 0 ? void 0 : _5.type) == 'reJoin') {
3911
+ this.isCallInProgress = true;
3912
+ }
3913
+ else {
3914
+ this.extensionService.getRemoveParticipants('all', (_6 = this.callAction) === null || _6 === void 0 ? void 0 : _6.conferenceId).subscribe((res) => { });
3915
+ }
3916
+ }
4233
3917
  }
4234
3918
  registerDragElement() {
4235
3919
  try {
@@ -4286,8 +3970,10 @@ class DialboxComponent {
4286
3970
  isIncomingCall: true,
4287
3971
  participantId: (_d = this.incomingCallnotification.data.data) === null || _d === void 0 ? void 0 : _d.participantId,
4288
3972
  participants: [
4289
- { direction: "incoming-call", businessNumber: ((_e = this.incomingCallnotification.data.data) === null || _e === void 0 ? void 0 : _e.c2cBusiness) == 'true' ? true : false, img: ((_f = this.incomingCallnotification.data.data) === null || _f === void 0 ? void 0 : _f.fromImage) || ((_g = this.incomingCallnotification.data.data) === null || _g === void 0 ? void 0 : _g.image) || 'assets/images/user.jpg', isIncomingCall: true, isHold: false, isConference: false, isAcceptCall: false, dial: true, phone: (_h = this.incomingCallnotification.data.data) === null || _h === void 0 ? void 0 : _h.fromNumber, to: (_j = this.incomingCallnotification.data.data) === null || _j === void 0 ? void 0 : _j.toNumber,
4290
- from: (_k = this.incomingCallnotification.data.data) === null || _k === void 0 ? void 0 : _k.fromNumber, fromName: (_l = this.incomingCallnotification.data.data) === null || _l === void 0 ? void 0 : _l.fromName, participantId: (_m = this.incomingCallnotification.data.data) === null || _m === void 0 ? void 0 : _m.participantId, name: (_o = this.incomingCallnotification.data.data) === null || _o === void 0 ? void 0 : _o.fromName, time: '', id: (_p = this.incomingCallnotification.data.data) === null || _p === void 0 ? void 0 : _p.participantId, conferenceId: (_s = (_r = (_q = this.incomingCallnotification) === null || _q === void 0 ? void 0 : _q.data) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.conferenceId }
3973
+ {
3974
+ direction: "incoming-call", businessNumber: ((_e = this.incomingCallnotification.data.data) === null || _e === void 0 ? void 0 : _e.c2cBusiness) == 'true' ? true : false, img: ((_f = this.incomingCallnotification.data.data) === null || _f === void 0 ? void 0 : _f.fromImage) || ((_g = this.incomingCallnotification.data.data) === null || _g === void 0 ? void 0 : _g.image) || 'assets/images/user.jpg', isIncomingCall: true, isHold: false, isConference: false, isAcceptCall: false, dial: true, phone: (_h = this.incomingCallnotification.data.data) === null || _h === void 0 ? void 0 : _h.fromNumber, to: (_j = this.incomingCallnotification.data.data) === null || _j === void 0 ? void 0 : _j.toNumber,
3975
+ from: (_k = this.incomingCallnotification.data.data) === null || _k === void 0 ? void 0 : _k.fromNumber, fromName: (_l = this.incomingCallnotification.data.data) === null || _l === void 0 ? void 0 : _l.fromName, participantId: (_m = this.incomingCallnotification.data.data) === null || _m === void 0 ? void 0 : _m.participantId, name: (_o = this.incomingCallnotification.data.data) === null || _o === void 0 ? void 0 : _o.fromName, time: '', id: (_p = this.incomingCallnotification.data.data) === null || _p === void 0 ? void 0 : _p.participantId, conferenceId: (_s = (_r = (_q = this.incomingCallnotification) === null || _q === void 0 ? void 0 : _q.data) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.conferenceId
3976
+ }
4291
3977
  ],
4292
3978
  };
4293
3979
  this.notificationCallList = yield this.notificationCallList.filter((res) => (res === null || res === void 0 ? void 0 : res.endTime) > (new Date().getTime()));
@@ -4401,6 +4087,7 @@ class DialboxComponent {
4401
4087
  //this.callerIdList = res.callerIdList.filter(item => item.type === "C2C Softphone Number");
4402
4088
  this.callerIdList = res.callerIdList.filter((item) => item.voiceFeature === true);
4403
4089
  // this.callerIdList = res.callerIdList;
4090
+ this.deviceNumberList = this.callerIdList.map((res) => res.number);
4404
4091
  if (this.callerIdList.length == 1) {
4405
4092
  this.selectedCallerId = this.callerIdList[0];
4406
4093
  }
@@ -4822,10 +4509,10 @@ class DialboxComponent {
4822
4509
  }
4823
4510
  }
4824
4511
  DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: i3.MatDialog }, { token: IpAddressService }, { token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: i5$1.Router }, { token: IncomeingCallSocketService }], target: i0.ɵɵFactoryTarget.Component });
4825
- DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", userId: "userId", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData", incomingCallnotification: "incomingCallnotification" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", numberDialed: "numberDialed" }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)" } }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\"\r\n (endCallEvent)=\"endCall()\"\r\n (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\"\r\n [newIncomingCallsList]=\"incomingCallsList\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n [selectedCallerId]=\"selectedCallerId\"\r\n [callerIdList]=\"callerIdList\"\r\n [conferenceCallInfo]=\"conferenceCallInfo\"\r\n (endIncomingCallEvent)=\"endIncomingCall($event)\"\r\n (isLoadershow)=\"onLoadershow($event)\"\r\n [callData]=\"callData\">\r\n </lib-call-progress>\r\n\r\n <div class=\"loader-wrapper\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n <div class=\"loader\"></div>\r\n </div>\r\n\r\n <!-- <button (click)=\"isCallInProgress = true\">call</button> -->\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\" *ngIf=\"!isCallInProgress || !incomingCallsList.length\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path 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\"/></svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n </svg> \r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n <span>{{dialAlert.msg}}</span>\r\n </div> -->\r\n <div>\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.numbersList[0].number}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg\r\n class=\"waves\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\"\r\n preserveAspectRatio=\"none\"\r\n shape-rendering=\"auto\"\r\n >\r\n <defs>\r\n <path\r\n 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 />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"0\"\r\n fill=\"rgba(255,255,255,0.7)\"\r\n />\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"3\"\r\n fill=\"rgba(255,255,255,0.5)\"\r\n />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n (keydown.enter)=\"onEnter(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}}\r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n </span> -->\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\" [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span\r\n class=\"material-symbols-outlined\"\r\n style=\"cursor: pointer\"\r\n (click)=\"isCallerIdHidden = true\"\r\n >\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n <div>\r\n <div class=\"inc-user-img\">\r\n <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n <p>{{call.parameters.From}}</p>\r\n </div>\r\n <div class=\"d-flex\">\r\n <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </button>\r\n <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call_end\r\n </span>\r\n </button>\r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "selectedCallerId", "newIncomingCallData", "newIncomingCallsList", "callerIdList", "deviceId", "conferenceCallInfo"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated", "isLoadershow", "endIncomingCallEvent"] }, { kind: "directive", type: ShortPressDirective, selector: "[shortPress]", outputs: ["shortPress"] }, { kind: "directive", type: LongPressDirective, selector: "[longPress]", outputs: ["longPress"] }] });
4512
+ DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", userId: "userId", callAction: "callAction", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData", incomingCallnotification: "incomingCallnotification" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", conferenceCallList: "conferenceCallList", numberDialed: "numberDialed" }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)" } }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\"\r\n (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershow)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n </lib-call-progress>\r\n\r\n <div class=\"loader-wrapper\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n <div class=\"loader\"></div>\r\n </div>\r\n\r\n <!-- <button (click)=\"isCallInProgress = true\">call</button> -->\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n *ngIf=\"!isCallInProgress || !incomingCallsList.length\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\"\r\n (ngModelChange)=\"onDialInputChange($event)\" />\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\"\r\n d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \" />\r\n </svg>\r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\"\r\n ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n <span>{{dialAlert.msg}}</span>\r\n </div> -->\r\n <div>\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\" />\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.numbersList[0].number}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}}\r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text :\r\n '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n </span> -->\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"\r\n [ngClass]=\"{'visible': !isCallerIdHidden}\">\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a\r\n routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n <div>\r\n <div class=\"inc-user-img\">\r\n <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n <p>{{call.parameters.From}}</p>\r\n </div>\r\n <div class=\"d-flex\">\r\n <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </button>\r\n <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call_end\r\n </span>\r\n </button>\r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "selectedCallerId", "newIncomingCallData", "newIncomingCallsList", "callerIdList", "deviceId", "callAction", "conferenceCallInfo"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated", "isLoadershow", "endIncomingCallEvent"] }, { kind: "directive", type: ShortPressDirective, selector: "[shortPress]", outputs: ["shortPress"] }, { kind: "directive", type: LongPressDirective, selector: "[longPress]", outputs: ["longPress"] }] });
4826
4513
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
4827
4514
  type: Component,
4828
- args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\"\r\n (endCallEvent)=\"endCall()\"\r\n (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\"\r\n [newIncomingCallsList]=\"incomingCallsList\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n [selectedCallerId]=\"selectedCallerId\"\r\n [callerIdList]=\"callerIdList\"\r\n [conferenceCallInfo]=\"conferenceCallInfo\"\r\n (endIncomingCallEvent)=\"endIncomingCall($event)\"\r\n (isLoadershow)=\"onLoadershow($event)\"\r\n [callData]=\"callData\">\r\n </lib-call-progress>\r\n\r\n <div class=\"loader-wrapper\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n <div class=\"loader\"></div>\r\n </div>\r\n\r\n <!-- <button (click)=\"isCallInProgress = true\">call</button> -->\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\" *ngIf=\"!isCallInProgress || !incomingCallsList.length\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path 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\"/></svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n </svg> \r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n <span>{{dialAlert.msg}}</span>\r\n </div> -->\r\n <div>\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.numbersList[0].number}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg\r\n class=\"waves\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\"\r\n preserveAspectRatio=\"none\"\r\n shape-rendering=\"auto\"\r\n >\r\n <defs>\r\n <path\r\n 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 />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"0\"\r\n fill=\"rgba(255,255,255,0.7)\"\r\n />\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"3\"\r\n fill=\"rgba(255,255,255,0.5)\"\r\n />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n (keydown.enter)=\"onEnter(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}}\r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n </span> -->\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\" [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span\r\n class=\"material-symbols-outlined\"\r\n style=\"cursor: pointer\"\r\n (click)=\"isCallerIdHidden = true\"\r\n >\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n <div>\r\n <div class=\"inc-user-img\">\r\n <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n <p>{{call.parameters.From}}</p>\r\n </div>\r\n <div class=\"d-flex\">\r\n <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </button>\r\n <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call_end\r\n </span>\r\n </button>\r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
4515
+ args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\"\r\n (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershow)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n </lib-call-progress>\r\n\r\n <div class=\"loader-wrapper\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n <div class=\"loader\"></div>\r\n </div>\r\n\r\n <!-- <button (click)=\"isCallInProgress = true\">call</button> -->\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n *ngIf=\"!isCallInProgress || !incomingCallsList.length\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\"\r\n (ngModelChange)=\"onDialInputChange($event)\" />\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\"\r\n d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \" />\r\n </svg>\r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\"\r\n ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n <span>{{dialAlert.msg}}</span>\r\n </div> -->\r\n <div>\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\" />\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.numbersList[0].number}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}}\r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text :\r\n '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n </span> -->\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"\r\n [ngClass]=\"{'visible': !isCallerIdHidden}\">\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a\r\n routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n <div>\r\n <div class=\"inc-user-img\">\r\n <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n <p>{{call.parameters.From}}</p>\r\n </div>\r\n <div class=\"d-flex\">\r\n <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </button>\r\n <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call_end\r\n </span>\r\n </button>\r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
4829
4516
  }], ctorParameters: function () { return [{ type: TwilioService }, { type: ExtensionService }, { type: i3.MatDialog }, { type: IpAddressService }, { type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: i5$1.Router }, { type: IncomeingCallSocketService }]; }, propDecorators: { autoOpenOnIncoming: [{
4830
4517
  type: Input
4831
4518
  }], contactInfo: [{
@@ -4834,6 +4521,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
4834
4521
  type: Input
4835
4522
  }], userId: [{
4836
4523
  type: Input
4524
+ }], callAction: [{
4525
+ type: Input
4837
4526
  }], isDialpadHidden: [{
4838
4527
  type: Input
4839
4528
  }], incomingCallData: [{
@@ -4852,6 +4541,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
4852
4541
  type: Output
4853
4542
  }], incomingCallInitiated: [{
4854
4543
  type: Output
4544
+ }], conferenceCallList: [{
4545
+ type: Output
4855
4546
  }], dialInputElement: [{
4856
4547
  type: ViewChild,
4857
4548
  args: ['dialInput']