@vgroup/dialbox 0.6.3-0.19 → 0.6.3-0.20

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 (7) hide show
  1. package/esm2020/lib/components/call-progress/call-progress.component.mjs +109 -551
  2. package/fesm2015/vgroup-dialbox.mjs +72 -477
  3. package/fesm2015/vgroup-dialbox.mjs.map +1 -1
  4. package/fesm2020/vgroup-dialbox.mjs +108 -550
  5. package/fesm2020/vgroup-dialbox.mjs.map +1 -1
  6. package/lib/components/call-progress/call-progress.component.d.ts +0 -2
  7. package/package.json +1 -1
package/fesm2015/vgroup-dialbox.mjs CHANGED
@@ -1712,9 +1712,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1712
1712
  }] });
1713
1713
 
1714
1714
  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
1715
  constructor(extensionService, cdr, twilioService, ipService, incomeingCallSocketService) {
1719
1716
  this.extensionService = extensionService;
1720
1717
  this.cdr = cdr;
@@ -1740,7 +1737,6 @@ class CallProgressComponent {
1740
1737
  this.isOutgoingCall = true;
1741
1738
  // Incoming call variables
1742
1739
  this.incomingCallDiv = false;
1743
- //@Output() showCallProgressEvent: EventEmitter<void> = new EventEmitter<void>();
1744
1740
  this.incomingCallInitiated = new EventEmitter();
1745
1741
  this.isLoadershow = new EventEmitter();
1746
1742
  this.endIncomingCallEvent = new EventEmitter();
@@ -1780,10 +1776,6 @@ class CallProgressComponent {
1780
1776
  this.showDisconnectModal = false;
1781
1777
  console.log('Call Progress Component');
1782
1778
  this.call = this.twilioService.call;
1783
- // this.incomingAudio = this.createAudioFromBase64(
1784
- // INCOMING_CALL_AUDIO_BASE64,
1785
- // 'audio/mpeg' // use audio/wav if needed
1786
- // );
1787
1779
  }
1788
1780
  ngOnInit() {
1789
1781
  console.log('Call Progress Component ngOnInit');
@@ -1831,85 +1823,54 @@ class CallProgressComponent {
1831
1823
  this.deviceNumberList = this.callerIdList.map((res) => res.number);
1832
1824
  }
1833
1825
  this.newIncomingCallsList.forEach((callInfo, i) => {
1834
- var _a;
1835
1826
  this.conferenceId = i == 0 ? this.newIncomingCallsList[i].conferenceId : this.conferenceId;
1836
- this.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));
1837
- console.log(this.ourNumberInfo, 'ourNumber');
1838
- if ((_a = this.ourNumberInfo) === null || _a === void 0 ? void 0 : _a.id) {
1827
+ 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));
1828
+ console.log(ourNumberInfo, 'ourNumber');
1829
+ if (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id) {
1839
1830
  this.newIncomingCallsList[i].participants.forEach((res) => __awaiter(this, void 0, void 0, function* () {
1840
- var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
1831
+ var _a, _b, _c, _d, _e, _f, _g, _h;
1841
1832
  if ((res === null || res === void 0 ? void 0 : res.to) == 'c2c_softphone_client') {
1842
1833
  this.hostnumber = res;
1843
1834
  }
1844
- else {
1845
- let contact = {};
1846
- if ((_b = this.contacts) === null || _b === void 0 ? void 0 : _b.length) {
1847
- 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); });
1835
+ let contact = {};
1836
+ if ((_a = this.contacts) === null || _a === void 0 ? void 0 : _a.length) {
1837
+ 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); });
1838
+ }
1839
+ if (((_b = this.currentCallList) === null || _b === void 0 ? void 0 : _b.length) > 0) {
1840
+ let index = this.currentCallList.findIndex((item) => (item === null || item === void 0 ? void 0 : item.id) == (res === null || res === void 0 ? void 0 : res.id));
1841
+ if (index == -1 && !res.isLeft) {
1842
+ 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, 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()) }));
1843
+ if (this.showContactsPanel) {
1844
+ this.getAllParticipants((_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.conferenceSid);
1845
+ this.applyFilter();
1846
+ }
1848
1847
  }
1849
- if (((_c = this.currentCallList) === null || _c === void 0 ? void 0 : _c.length) > 0) {
1850
- let index = this.currentCallList.findIndex((item) => (item === null || item === void 0 ? void 0 : item.id) == (res === null || res === void 0 ? void 0 : res.id));
1851
- if (index == -1 && !res.isLeft) {
1852
- 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, isMute: false, isConference: res === null || res === void 0 ? void 0 : res.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()) }));
1853
- if (this.showContactsPanel) {
1854
- this.getAllParticipants((_d = this.currentCall) === null || _d === void 0 ? void 0 : _d.conferenceSid);
1855
- this.applyFilter();
1856
- }
1848
+ else if (index != -1 && (res === null || res === void 0 ? void 0 : res.isLeft)) {
1849
+ if (((_d = this.currentCallList[index]) === null || _d === void 0 ? void 0 : _d.id) == ((_e = this.currentCall) === null || _e === void 0 ? void 0 : _e.id)) {
1850
+ this.currentCallList.splice(index, 1);
1851
+ this.currentCall = ((_f = this.currentCallList) === null || _f === void 0 ? void 0 : _f.length) > 0 ? this.currentCallList[0] : {};
1857
1852
  }
1858
- else if (index != -1 && (res === null || res === void 0 ? void 0 : res.isLeft)) {
1859
- if (((_e = this.currentCallList[index]) === null || _e === void 0 ? void 0 : _e.id) == ((_f = this.currentCall) === null || _f === void 0 ? void 0 : _f.id)) {
1860
- this.currentCallList.splice(index, 1);
1861
- this.currentCall = ((_g = this.currentCallList) === null || _g === void 0 ? void 0 : _g.length) > 0 ? this.currentCallList[0] : {};
1862
- if (((_h = this.currentCall) === null || _h === void 0 ? void 0 : _h.isHold) && !((_j = this.currentCall) === null || _j === void 0 ? void 0 : _j.isConference)) {
1863
- yield this.onholdOrUnholdParticipant({
1864
- participantId: [(_k = this.currentCall) === null || _k === void 0 ? void 0 : _k.participantId],
1865
- conferenceId: (_l = this.currentCall) === null || _l === void 0 ? void 0 : _l.conferenceId,
1866
- hold: false,
1867
- mute: ((_m = this.currentCall) === null || _m === void 0 ? void 0 : _m.mute) || false,
1868
- conference: (_o = this.currentCall) === null || _o === void 0 ? void 0 : _o.isConference
1869
- });
1870
- }
1871
- else if (((_p = this.currentCall) === null || _p === void 0 ? void 0 : _p.isHold) && ((_q = this.currentCall) === null || _q === void 0 ? void 0 : _q.isConference)) {
1872
- let conferenceCalllist = this.currentCallList.filter((item) => { var _a; return item.isConference && item.conferenceId == ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.conferenceId); });
1873
- if ((conferenceCalllist === null || conferenceCalllist === void 0 ? void 0 : conferenceCalllist.length) > 0) {
1874
- // await this.onholdOrUnholdParticipant({
1875
- // participantId: conferenceCalllist.map((item: any) => item.participantId),
1876
- // conferenceId: conferenceCalllist[0]?.conferenceId,
1877
- // hold: false,
1878
- // mute: this.currentCall?.mute || false,
1879
- // conference: this.currentCall?.isConference || false
1880
- // });
1881
- yield this.onholdOrUnholdParticipant({
1882
- participantId: [(_r = this.hostnumber) === null || _r === void 0 ? void 0 : _r.participantId],
1883
- conferenceId: (_s = this.currentCall) === null || _s === void 0 ? void 0 : _s.conferenceId,
1884
- hold: false,
1885
- mute: ((_t = this.currentCall) === null || _t === void 0 ? void 0 : _t.mute) || false,
1886
- conference: (_u = this.currentCall) === null || _u === void 0 ? void 0 : _u.isConference
1887
- });
1888
- this.isConferenceCallHold = false;
1889
- }
1890
- }
1891
- }
1892
- else {
1893
- this.currentCallList.splice(index, 1);
1894
- }
1895
- if (this.showContactsPanel) {
1896
- this.getAllParticipants((_v = this.currentCall) === null || _v === void 0 ? void 0 : _v.conferenceSid);
1897
- this.applyFilter();
1898
- }
1853
+ else {
1854
+ this.currentCallList.splice(index, 1);
1899
1855
  }
1900
- else if (index != -1) {
1901
- 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, isMute: res === null || res === void 0 ? void 0 : res.isMute, isConference: res === null || res === void 0 ? void 0 : res.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()) });
1856
+ if (this.showContactsPanel) {
1857
+ this.getAllParticipants((_g = this.currentCall) === null || _g === void 0 ? void 0 : _g.conferenceSid);
1858
+ this.applyFilter();
1902
1859
  }
1903
1860
  }
1904
- else if (!res.isLeft) {
1905
- 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, 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()) }));
1906
- if (((_w = this.currentCallList) === null || _w === void 0 ? void 0 : _w.length) == 1) {
1907
- this.currentCall = this.currentCallList[0];
1908
- }
1909
- this.timer = '00:00';
1910
- this.startTimer();
1861
+ else if (index != -1) {
1862
+ 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: res === null || res === void 0 ? void 0 : res.isConferenceHold, isMute: res === null || res === void 0 ? void 0 : res.isMute, isConference: res === null || res === void 0 ? void 0 : res.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()) });
1911
1863
  }
1912
1864
  }
1865
+ else if (!res.isLeft) {
1866
+ 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: res === null || res === void 0 ? void 0 : res.isConferenceHold, 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()) }));
1867
+ if (((_h = this.currentCallList) === null || _h === void 0 ? void 0 : _h.length) == 1) {
1868
+ this.currentCall = this.currentCallList[0];
1869
+ }
1870
+ this.timer = '00:00';
1871
+ this.startTimer();
1872
+ }
1873
+ // }
1913
1874
  }));
1914
1875
  this.leftParticipent[callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceId] = [...new Map(callInfo === null || callInfo === void 0 ? void 0 : callInfo.participants.filter((item) => (item === null || item === void 0 ? void 0 : item.isLeft) === true).map((item) => [(item === null || item === void 0 ? void 0 : item.direction) == 'outgoing-call' ? (item === null || item === void 0 ? void 0 : item.to) || 'Unknown' : item === null || item === void 0 ? void 0 : item.from, item])).values()
1915
1876
  ];
@@ -1949,7 +1910,7 @@ class CallProgressComponent {
1949
1910
  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); });
1950
1911
  if (!((_o = this.currentCall) === null || _o === void 0 ? void 0 : _o.participantId)) {
1951
1912
  this.currentCall = this.currentCallList[0];
1952
- 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)) {
1913
+ if (((_p = this.currentCallList[0]) === null || _p === void 0 ? void 0 : _p.isConferenceHold) && ((_q = this.currentCallList[0]) === null || _q === void 0 ? void 0 : _q.isConference)) {
1953
1914
  this.isConference = true;
1954
1915
  this.onholdOrUnholdParticipant({
1955
1916
  participantId: [(_r = this.currentCall) === null || _r === void 0 ? void 0 : _r.participantId],
@@ -1958,17 +1919,6 @@ class CallProgressComponent {
1958
1919
  mute: ((_t = this.currentCall) === null || _t === void 0 ? void 0 : _t.mute) || false,
1959
1920
  conference: ((_u = this.currentCall) === null || _u === void 0 ? void 0 : _u.isConference) || false
1960
1921
  });
1961
- // this.currentCallList.forEach((res) => {
1962
- // if (res.isConference && this.currentCall?.participantId) {
1963
- // this.onholdOrUnholdParticipant({
1964
- // participantId: [res.participantId],
1965
- // conferenceId: res?.conferenceId,
1966
- // hold: false,
1967
- // mute: res?.mute || false,
1968
- // conference: res?.isConference || false
1969
- // });
1970
- // }
1971
- // })
1972
1922
  }
1973
1923
  else if ((_v = this.currentCall) === null || _v === void 0 ? void 0 : _v.isHold) {
1974
1924
  this.onholdOrUnholdParticipant({
@@ -1981,35 +1931,6 @@ class CallProgressComponent {
1981
1931
  }
1982
1932
  }
1983
1933
  }
1984
- // else if(!this.currentCall) {
1985
- // this.currentCall = this.currentCallList.find((res: any)=> res?.participantId == this.currentCall?.participantId && res?.isAcceptCall && !res?.isHold)
1986
- // if(!this.currentCall?.participantId) {
1987
- // this.currentCall = this.currentCallList[0];
1988
- // if(this.currentCallList[0].isHold && this.currentCallList[0]?.isConference) {
1989
- // this.isConference = true;
1990
- // this.currentCallList.forEach((res) => {
1991
- // if (res.isConference && this.currentCall?.participantId) {
1992
- // this.onholdOrUnholdParticipant({
1993
- // participantId: [res.participantId],
1994
- // conferenceId: res?.conferenceId,
1995
- // hold: false,
1996
- // mute: res?.mute || false,
1997
- // conference: res?.isConference || false
1998
- // });
1999
- // }
2000
- // })
2001
- // } else {
2002
- // this.onholdOrUnholdParticipant({
2003
- // participantId: [this.currentCall?.participantId],
2004
- // conferenceId: this.currentCall?.conferenceId,
2005
- // hold: false,
2006
- // mute: this.currentCall?.mute || false,
2007
- // conference: this.currentCall?.isConference || false
2008
- // });
2009
- // }
2010
- // }
2011
- // } else {
2012
- // }
2013
1934
  console.log(this.leftParticipent, 'leftParticipent');
2014
1935
  if ((_0 = this.selectedUserInfo) === null || _0 === void 0 ? void 0 : _0.participantId) {
2015
1936
  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); });
@@ -2385,15 +2306,6 @@ class CallProgressComponent {
2385
2306
  catch (e) {
2386
2307
  console.log('Error updating accept state:', e);
2387
2308
  }
2388
- // Start recording if recordCall is true and call is accepted for 30 seconds
2389
- // if (this.recordCall) {
2390
- // setTimeout(() => {
2391
- // if (this.isRecording) return; // If already recording, skip
2392
- // this.startRecording();
2393
- // }, 30000);
2394
- // } else {
2395
- // this.stopRecording();
2396
- // }
2397
2309
  });
2398
2310
  (_g = this.call) === null || _g === void 0 ? void 0 : _g.on('messageReceived', (message) => {
2399
2311
  });
@@ -2421,50 +2333,6 @@ class CallProgressComponent {
2421
2333
  handleError(error) {
2422
2334
  swal("Error", error, "error");
2423
2335
  }
2424
- // endCall() {
2425
- // console.log('endCall() called');
2426
- // console.log('Current call:', this.call?.parameters['From']);
2427
- // console.log('Held call exists:', !!this.heldCall);
2428
- // // Disconnect the current active call
2429
- // if (this.call) {
2430
- // this.call.disconnect();
2431
- // this.call = undefined;
2432
- // }
2433
- // this.showRingAnimation = false;
2434
- // this.stopTimer();
2435
- // // If there's a held call, make it active
2436
- // if (this.heldCall) {
2437
- // console.log('Resuming held call:', this.heldCall.parameters['From']);
2438
- // // Make held call the active call
2439
- // this.call = this.heldCall;
2440
- // this.heldCall = undefined;
2441
- // // this.isCallOnHold = false;
2442
- // this.isCallOnHold = !!this.heldCall;
2443
- // // Unmute the resumed call
2444
- // this.call.mute(false);
2445
- // // Update UI with the resumed call info
2446
- // const fromNumber = this.call.parameters['From'];
2447
- // const callerName = this.call.customParameters?.get('name') || '-';
2448
- // const callerImg = this.call.customParameters?.get('image') || 'assets/images/user.jpg';
2449
- // this.callData = {
2450
- // ...this.callData,
2451
- // phone: fromNumber,
2452
- // displayNum: fromNumber,
2453
- // name: callerName,
2454
- // img: callerImg
2455
- // };
2456
- // // Restart timer for the resumed call
2457
- // this.startTimer();
2458
- // this.disbaleEndCallBtn = false;
2459
- // console.log('Held call is now active:', this.callData);
2460
- // this.cdr.detectChanges();
2461
- // } else {
2462
- // // No held call, completely end
2463
- // console.log('No held call, ending completely');
2464
- // this.endCallEvent.emit();
2465
- // this.maximiseDialpad();
2466
- // }
2467
- // }
2468
2336
  endConfereneceCall() {
2469
2337
  var _a;
2470
2338
  if (this.deviceNumberList.includes((_a = this.hostnumber) === null || _a === void 0 ? void 0 : _a.from)) {
@@ -2478,15 +2346,12 @@ class CallProgressComponent {
2478
2346
  var _a, _b, _c, _d, _e;
2479
2347
  return __awaiter(this, void 0, void 0, function* () {
2480
2348
  console.log('endCall() called');
2481
- // console.log('Current call:', this.call?.parameters['From']);
2482
2349
  console.log('Held call exists:', !!this.heldCall);
2483
- // Leaving conference state when ending current call action
2484
2350
  this.isConference = false;
2485
2351
  this.showRingAnimation = false;
2486
2352
  if (isAllCallEnd) {
2487
2353
  this.stopTimer();
2488
2354
  this.onEndCall({}, isAllCallEnd);
2489
- // this.currentCallList = [];
2490
2355
  if (!((_a = this.currentCallList) === null || _a === void 0 ? void 0 : _a.length)) {
2491
2356
  this.endCallEvent.emit();
2492
2357
  }
@@ -2495,8 +2360,6 @@ class CallProgressComponent {
2495
2360
  this.onEndCall(this.currentCall, isAllCallEnd);
2496
2361
  this.currentCallList = this.currentCallList.filter((c) => (c === null || c === void 0 ? void 0 : c.participantId) !== this.currentCall.participantId);
2497
2362
  if (this.currentCallList.length > 0) {
2498
- // this.currentCallList[0].isHold = false;
2499
- // this.currentCall = this.currentCallList[0];
2500
2363
  yield this.onholdOrUnholdParticipant({
2501
2364
  participantId: [(_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.participantId],
2502
2365
  conferenceId: (_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.conferenceId,
@@ -2506,32 +2369,21 @@ class CallProgressComponent {
2506
2369
  });
2507
2370
  }
2508
2371
  else {
2509
- // this.currentCall = null;
2510
- // this.currentCallList = [];
2511
2372
  this.endCallEvent.emit();
2512
2373
  }
2513
2374
  }
2514
2375
  if (this.call) {
2515
2376
  this.call.disconnect();
2516
2377
  this.call.reject();
2517
- // this.call = undefined;
2518
2378
  }
2519
2379
  });
2520
2380
  }
2521
2381
  toggleMute(isConference) {
2522
2382
  var _a;
2523
2383
  return __awaiter(this, void 0, void 0, function* () {
2524
- // await this.onMuteParticipant({
2525
- // participantId: [this.currentCall?.participantId],
2526
- // conferenceId: this.conferenceId,
2527
- // mute: !this.isMute,
2528
- // })
2529
- // this.call = this.heldCall
2530
- // this.toggleMic()
2531
2384
  this.isMute = !this.isMute;
2532
2385
  console.log('isMute', this.call, this.heldCall);
2533
2386
  (_a = this.call) === null || _a === void 0 ? void 0 : _a.mute(this.isMute);
2534
- // if (isConference) {
2535
2387
  this.currentCall.isMute = this.isMute;
2536
2388
  });
2537
2389
  }
@@ -2556,7 +2408,6 @@ class CallProgressComponent {
2556
2408
  this.showContactsPanel = false;
2557
2409
  return false;
2558
2410
  }
2559
- // this.isAddRemoveParticipant = false;
2560
2411
  this.showContactsPanel = !isClose;
2561
2412
  this.getAllParticipants(callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceSid);
2562
2413
  this.filteredList = this.contacts;
@@ -2567,7 +2418,6 @@ class CallProgressComponent {
2567
2418
  }
2568
2419
  addRemoveParticipant() {
2569
2420
  return __awaiter(this, void 0, void 0, function* () {
2570
- // const conferenceSId = this.addRes?.conferenceSid;
2571
2421
  this.isAddRemoveParticipant = !this.isAddRemoveParticipant;
2572
2422
  yield this.getAllParticipants(this.currentCall.conferenceSid);
2573
2423
  this.filteredParticipentList = this.allParticipentList;
@@ -2576,23 +2426,10 @@ class CallProgressComponent {
2576
2426
  add(data) {
2577
2427
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
2578
2428
  return __awaiter(this, void 0, void 0, function* () {
2579
- // if(data?.status != 'ringing'){
2580
2429
  this.isIncomingCallBtnDisable = true;
2581
2430
  this.conferenceId = this.twilioService.conferenceCallInfo.conferenceId;
2582
2431
  if (this.currentCallList.length > 1 && ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.isAcceptCall)) {
2583
2432
  if ((_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.isConference) {
2584
- // this.isConferenceCallHold = true;
2585
- // this.currentCallList.forEach((res) => {
2586
- // if (res.isConference) {
2587
- // this.onholdOrUnholdParticipant({
2588
- // participantId: [res.participantId],
2589
- // conferenceId: res?.conferenceId,
2590
- // hold: true,
2591
- // mute: res?.mute || false,
2592
- // conference: res.isConference || false
2593
- // });
2594
- // }
2595
- // })
2596
2433
  this.onholdOrUnholdParticipant({
2597
2434
  participantId: [this.hostnumber.participantId],
2598
2435
  conferenceId: (_c = this.hostnumber) === null || _c === void 0 ? void 0 : _c.conferenceId,
@@ -2603,10 +2440,6 @@ class CallProgressComponent {
2603
2440
  }
2604
2441
  else {
2605
2442
  this.isConferenceCallHold = false;
2606
- // const index = this.currentCallList.findIndex((item: any) => item.participantId == this.currentCall?.participantId);
2607
- // if (index != -1) {
2608
- // // this.currentCallList[index].isHold = true;
2609
- // }
2610
2443
  yield this.onholdOrUnholdParticipant({
2611
2444
  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],
2612
2445
  conferenceId: (_h = this.currentCall) === null || _h === void 0 ? void 0 : _h.conferenceId,
@@ -2614,22 +2447,8 @@ class CallProgressComponent {
2614
2447
  mute: ((_j = this.currentCall) === null || _j === void 0 ? void 0 : _j.mute) || false,
2615
2448
  conference: ((_k = this.currentCall) === null || _k === void 0 ? void 0 : _k.isConference) || false
2616
2449
  });
2617
- // data.isHold = false;
2618
2450
  }
2619
2451
  }
2620
- // let incomingCallData = this.currentCallList.filter((item: any) => item.isIncomingCall && item.isAcceptCall);
2621
- // if (this.currentCallList.length > 1) {
2622
- // // this.call = await this.twilioService.connect('');
2623
- // this.twilioService.addIncomingParticipant(data?.id, this.twilioService.conferenceCallInfo.conferenceId).subscribe((res: any) => {
2624
- // console.log(res, 'bhhhhhhhhhhhhhhhhhhh')
2625
- // this.incomeingCallSocketService.isCurrentIncomingCallList.push(data?.id || data?.participantId);
2626
- // this.incomeingCallSocketService.pause();
2627
- // data.isAcceptCall = true;
2628
- // // this.currentCall = data;
2629
- // this.setIncomingCallStatus(data)
2630
- // })
2631
- // } else {
2632
- // this.currentCall = data;
2633
2452
  let payload = {
2634
2453
  recordId: data === null || data === void 0 ? void 0 : data.id,
2635
2454
  ipAddress: '',
@@ -2694,7 +2513,6 @@ class CallProgressComponent {
2694
2513
  conference: true
2695
2514
  });
2696
2515
  this.callData = {
2697
- // ...this.callData,
2698
2516
  phone: phoneNumber,
2699
2517
  displayNum: phoneNumber,
2700
2518
  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,
@@ -2714,22 +2532,22 @@ class CallProgressComponent {
2714
2532
  else {
2715
2533
  this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
2716
2534
  if ((c === null || c === void 0 ? void 0 : c.participantId) && !(c === null || c === void 0 ? void 0 : c.isHold) && this.currentCall.conferenceId == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
2717
- yield this.onholdOrUnholdParticipant({
2718
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
2719
- conferenceId: c.conferenceId,
2720
- hold: false,
2721
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
2722
- conference: true
2723
- });
2535
+ // await this.onholdOrUnholdParticipant({
2536
+ // participantId: [c?.participantId],
2537
+ // conferenceId: c.conferenceId,
2538
+ // hold: false,
2539
+ // mute: c?.mute || false,
2540
+ // conference: true
2541
+ // });
2724
2542
  }
2725
2543
  else {
2726
- yield this.onholdOrUnholdParticipant({
2727
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
2728
- conferenceId: c.conferenceId,
2729
- hold: true,
2730
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
2731
- conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
2732
- });
2544
+ // await this.onholdOrUnholdParticipant({
2545
+ // participantId: [c?.participantId],
2546
+ // conferenceId: c.conferenceId,
2547
+ // hold: true,
2548
+ // mute: c?.mute || false,
2549
+ // conference: c?.isConference || false
2550
+ // });
2733
2551
  }
2734
2552
  }));
2735
2553
  // Put current call on hold
@@ -2737,9 +2555,6 @@ class CallProgressComponent {
2737
2555
  this.showContactsPanel = false;
2738
2556
  this.showRingAnimation = true;
2739
2557
  this.isConference = true;
2740
- // const contactName = [contact?.firstName, contact?.middleName, contact?.lastName]
2741
- // .filter(Boolean)
2742
- // .join(' ');
2743
2558
  // Add participant to the conference
2744
2559
  let data = yield this.addParticipantToCall({
2745
2560
  from: ((_k = this.callData) === null || _k === void 0 ? void 0 : _k.from) || ((_l = this.selectedCallerId) === null || _l === void 0 ? void 0 : _l.number),
@@ -2751,13 +2566,13 @@ class CallProgressComponent {
2751
2566
  countrycode: '',
2752
2567
  deviceId: this.deviceId
2753
2568
  });
2754
- yield this.onholdOrUnholdParticipant({
2755
- participantId: [data === null || data === void 0 ? void 0 : data.participantId],
2756
- conferenceId: this.currentCall.conferenceId,
2757
- hold: false,
2758
- mute: false,
2759
- conference: true
2760
- });
2569
+ // await this.onholdOrUnholdParticipant({
2570
+ // participantId: [data?.participantId],
2571
+ // conferenceId: this.currentCall.conferenceId,
2572
+ // hold: false,
2573
+ // mute: false,
2574
+ // conference: true
2575
+ // });
2761
2576
  this.callData = {
2762
2577
  phone: phoneNumber,
2763
2578
  displayNum: phoneNumber,
@@ -2771,9 +2586,6 @@ class CallProgressComponent {
2771
2586
  isConference: false
2772
2587
  };
2773
2588
  this.cdr.detectChanges();
2774
- console.log(this.callData, 'this.callData');
2775
- console.log('test111111');
2776
- console.log("Participant added to conference:", phoneNumber);
2777
2589
  this.showRingAnimation = false;
2778
2590
  }
2779
2591
  }
@@ -2792,13 +2604,6 @@ class CallProgressComponent {
2792
2604
  if (isInvalid) {
2793
2605
  return false;
2794
2606
  }
2795
- // this.isSavedContactDialled();
2796
- // this.isPaymentDue = localStorage.getItem('paymentDue') === 'false' ? false : true;
2797
- // if (this.isPaymentDue) {
2798
- // swal('Warning', 'Please note that your payment is due, To continue on your services kindly subscribe to use uninterrupted services.');
2799
- // return false;
2800
- // }
2801
- // this.isTrialPeriodOver = localStorage.getItem('trialOver') === 'false' ? false : true;
2802
2607
  let alreadyInCall = this.currentCallList.find((res) => res.to == number || res.from == number);
2803
2608
  if (alreadyInCall) {
2804
2609
  swal('Error', `Already ${number} number in this call.`);
@@ -2808,32 +2613,10 @@ class CallProgressComponent {
2808
2613
  swal('Error', 'You can not dial this number');
2809
2614
  return false;
2810
2615
  }
2811
- // const hasPermission = await this.checkMicrophonePermission();
2812
- // if (!hasPermission) {
2813
- // await this.askForMicrophonePermission();
2814
- // return false;
2815
- // }
2816
- // this.isLoadershow = true;
2817
- // if (!this.selectedCallerId) {
2818
- // this.shakeDedicatedBtn = true;
2819
- // this.showDialAlert('Select a C2C number to call');
2820
- // setTimeout(() => {
2821
- // this.shakeDedicatedBtn = false;
2822
- // }, 3000);
2823
- // this.isLoadershow = false;
2824
- // return false;
2825
- // }
2826
- // Clear displayNum if value is bound from previous call
2827
- // this.callData.displayNum = '';
2828
- // Get number to be dialed from backend
2829
2616
  let contact = this.contacts.find((contact) => {
2830
2617
  return contact.numbersList.some((num) => num.number === number);
2831
2618
  });
2832
2619
  number = yield this.getToNumber(number);
2833
- // if (this.terminateCall) {
2834
- // this.terminateCall = false;
2835
- // return;
2836
- // }
2837
2620
  // Update call data in a single operation
2838
2621
  const callData = {
2839
2622
  name: contact === null || contact === void 0 ? void 0 : contact.firstName,
@@ -2845,18 +2628,15 @@ class CallProgressComponent {
2845
2628
  from: this.selectedCallerId.number,
2846
2629
  timestamp: new Date().toISOString()
2847
2630
  };
2848
- // console.log('dd10')
2849
- // this.isCallInProgress = true;
2850
2631
  console.log('call startted', callData);
2851
2632
  if (isNewConference) {
2852
- // if(this.currentCall.isConference) {
2853
2633
  this.isNewAddedCall = true;
2854
2634
  let participentList = [];
2855
- // await this.currentCallList.forEach((resData)=>{
2856
- // if(!resData.isHold && resData?.participantId) {
2857
- // participentList.push(resData?.participantId)
2858
- // }
2859
- // })
2635
+ let ourNumberInfo = {};
2636
+ let callInfo = this.newIncomingCallsList.find((callInfo, i) => this.currentCall.conferenceId == callInfo.conferenceId);
2637
+ if (callInfo) {
2638
+ 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.isLeft));
2639
+ }
2860
2640
  let selfInfo = this.allParticipentList.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)));
2861
2641
  console.log(selfInfo, 'selfInfo');
2862
2642
  yield this.onholdOrUnholdParticipant({
@@ -2961,67 +2741,8 @@ class CallProgressComponent {
2961
2741
  ;
2962
2742
  this.filteredParticipentList = this.allParticipentList;
2963
2743
  this.applyFilter();
2964
- // let index = this.contacts.findIndex((c:any)=> c?.numbersList[0]?.number == res?.to);
2965
- // if(index > -1){
2966
- // this.contacts[index].isCallOnHold = true;
2967
- // }
2968
- // else {
2969
- // res['IsConnected'] = true;
2970
- // this.contacts.push(res)
2971
- // }
2972
2744
  });
2973
2745
  }
2974
- // acceptConcurrentCall(incomingCall: any) {
2975
- // if (!incomingCall) return;
2976
- // // Put current call on hold instead of disconnecting
2977
- // if (this.call) {
2978
- // this.heldCall = this.call;
2979
- // this.isCallOnHold = true;
2980
- // // Mute the held call
2981
- // this.heldCall.mute(true);
2982
- // }
2983
- // incomingCall.accept();
2984
- // this.call = incomingCall;
2985
- // this.callData.phone = incomingCall.parameters['From'];
2986
- // this.callData.name = incomingCall.customParameters?.get('name') || '-';
2987
- // this.callData.img = incomingCall.customParameters?.get('image') || 'assets/images/user.jpg';
2988
- // this.isConcurrentIncoming = false;
2989
- // this.incomingCallDiv = false;
2990
- // this.disbaleEndCallBtn = false;
2991
- // // Reset timer for new call
2992
- // this.stopTimer();
2993
- // this.startTimer();
2994
- // this.cdr.detectChanges();
2995
- // }
2996
- acceptConcurrentCall(incomingCall) {
2997
- if (!incomingCall)
2998
- return;
2999
- // Put current call on hold instead of disconnecting
3000
- // if (this.call) {
3001
- // // this.heldCall = this.call;
3002
- // this.isCallOnHold = true;
3003
- // // // Mute the held call
3004
- // // this.heldCall.mute(true);
3005
- // // }
3006
- // // Accept the new call
3007
- // incomingCall.accept();
3008
- // this.call = incomingCall;
3009
- // this.callData.phone = incomingCall.parameters['From'];
3010
- // this.callData.name = incomingCall.customParameters?.get('name') || '-';
3011
- // this.callData.img = incomingCall.customParameters?.get('image') || 'assets/images/user.jpg';
3012
- // this.isConcurrentIncoming = false;
3013
- // this.incomingCallDiv = false;
3014
- // this.disbaleEndCallBtn = false;
3015
- // // 🟢 Remove the accepted call from incoming list
3016
- // this.newIncomingCallsList = (this.newIncomingCallsList || []).filter(
3017
- // (c: any) => c?.parameters?.CallSid !== incomingCall?.parameters?.CallSid
3018
- // );
3019
- // this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
3020
- // // 🕒 Reset timer for new call
3021
- // this.stopTimer();
3022
- // this.startTimer();
3023
- // this.cdr.detectChanges();
3024
- }
3025
2746
  swapCalls(callInfo, isConferenceCall) {
3026
2747
  var _a;
3027
2748
  return __awaiter(this, void 0, void 0, function* () {
@@ -3111,41 +2832,6 @@ class CallProgressComponent {
3111
2832
  }
3112
2833
  }));
3113
2834
  }
3114
- // await this.onholdOrUnholdParticipant({
3115
- // participantId: this.call?.callInfo?.participantId,
3116
- // conferenceId: this.conferenceId,
3117
- // hold: true
3118
- // });
3119
- // await this.onholdOrUnholdParticipant({
3120
- // participantId: this.heldCall?.callInfo?.participantId,
3121
- // conferenceId: this.conferenceId,
3122
- // hold: false
3123
- // });
3124
- console.log('Swapping calls...');
3125
- // console.log('Before swap - Active call:', this.call.parameters['From']);
3126
- // console.log('Before swap - Held call:', this.heldCall.parameters['From']);
3127
- // Swap the calls
3128
- // const temp = this.call;
3129
- // this.call = this.heldCall;
3130
- // this.heldCall = temp;
3131
- // this.call.mute(false);
3132
- // this.heldCall.mute(true);
3133
- // Update UI with active call info - extract from call parameters
3134
- // const fromNumber = this.call.parameters['From'];
3135
- // const callerName = this.call.customParameters?.get('name') || '-';
3136
- // const callerImg = this.call.customParameters?.get('image') || 'assets/images/user.jpg';
3137
- // const displayNumber = this.call.customParameters?.get('displayNumber') || '-';
3138
- // Update callData to refresh the main UI
3139
- // this.callData = {
3140
- // ...this.callData,
3141
- // phone: fromNumber,
3142
- // displayNum: (displayNumber && displayNumber !== '-') ? displayNumber : fromNumber,
3143
- // name: (callerName && callerName !== '-') ? callerName : (this.callData?.name || fromNumber),
3144
- // img: callerImg || this.callData?.img || 'assets/images/user.jpg'
3145
- // };
3146
- // console.log('After swap - Active call:', this.call.parameters['From']);
3147
- // console.log('After swap - Held call:', this.heldCall.parameters['From']);
3148
- // console.log('Updated callData:', this.callData);
3149
2835
  console.log('this.currentCallList after swap', this.currentCallList);
3150
2836
  this.cdr.detectChanges();
3151
2837
  });
@@ -3161,46 +2847,24 @@ class CallProgressComponent {
3161
2847
  this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
3162
2848
  if (c.conferenceId == this.currentCall.conferenceId) {
3163
2849
  if (c === null || c === void 0 ? void 0 : c.participantId) {
3164
- // c.isHold = false;
3165
- yield this.onholdOrUnholdParticipant({
3166
- participantId: [c === null || c === void 0 ? void 0 : c.participantId],
3167
- conferenceId: c.conferenceId,
3168
- hold: false,
3169
- mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
3170
- conference: true
3171
- });
2850
+ // await this.onholdOrUnholdParticipant({
2851
+ // participantId: [c?.participantId],
2852
+ // conferenceId: c.conferenceId,
2853
+ // hold: false,
2854
+ // mute: c?.mute || false,
2855
+ // conference: true
2856
+ // });
3172
2857
  c.isConference = true;
3173
- // } else if(c?.participantId && c.isIncomingCall){
3174
- // await this.twilioService.addIncomingParticipant(c?.participantId, this.conferenceId).subscribe((data: any) => {
3175
- // console.log(data,'bhhhhhhhhhhhhhhhhhhh')
3176
- // })
3177
- // c.isHold = false;
3178
- // c.isConference = true;
3179
2858
  }
3180
2859
  this.isConferenceCallHold = false;
3181
2860
  }
3182
2861
  }));
3183
- // await this.onholdOrUnholdParticipant({
3184
- // participantId: this.heldCall?.callInfo?.participantId,
3185
- // conferenceId: this.conferenceId,
3186
- // hold: false
3187
- // });
3188
- // this.heldCall.mute(false);
3189
- // this.call.mute(false);
3190
2862
  this.isCallOnHold = false;
3191
2863
  this.isConference = true;
3192
2864
  this.cdr.detectChanges();
3193
2865
  }
3194
2866
  });
3195
2867
  }
3196
- endHeldCall() {
3197
- // if (this.heldCall) {
3198
- // this.heldCall.disconnect();
3199
- // this.heldCall = undefined;
3200
- // this.isCallOnHold = false;
3201
- // this.cdr.detectChanges();
3202
- // }
3203
- }
3204
2868
  hasDetailedInfo(callData) {
3205
2869
  if (!callData)
3206
2870
  return false;
@@ -3219,57 +2883,6 @@ class CallProgressComponent {
3219
2883
  }
3220
2884
  return false;
3221
2885
  }
3222
- // onClickExpand(data?: any): void {
3223
- // if (this.selectedIncomingCall === data && this.isClickExpand) {
3224
- // this.isClickExpand = false;
3225
- // this.selectedIncomingCall = null;
3226
- // // this.selectedIncomingCallInfo.emit({});
3227
- // return;
3228
- // }
3229
- // this.isClickExpand = true;
3230
- // this.selectedIncomingCall = data;
3231
- // if (this.selectedIncomingCall) {
3232
- // this.selectedIncomingCall['isClickExpand'] = true;
3233
- // if (this.newIncomingCallsList && this.newIncomingCallsList.length > 0) {
3234
- // this.newIncomingCallsList.forEach((call: any) => {
3235
- // if (call !== this.selectedIncomingCall) {
3236
- // call['isClickExpand'] = false;
3237
- // }
3238
- // });
3239
- // }
3240
- // // this.selectedIncomingCallInfo.emit(this.selectedIncomingCall);
3241
- // if (!this.selectedIncomingCall.userInfo || this.selectedIncomingCall.userInfo.status == 201) {
3242
- // // this.getUserInformation(this.selectedIncomingCall);
3243
- // }
3244
- // }
3245
- // }
3246
- // getUserInformation(incomingCallData: any) {
3247
- // let data = this.fromEntries(Array.from(incomingCallData.customParameters.entries()));
3248
- // this.extensionService.getUserInformation(data['twilioAuthId']).subscribe(
3249
- // response => {
3250
- // setTimeout(()=>{
3251
- // incomingCallData['userInfo']=response
3252
- // }, 5000)
3253
- // }, error => {
3254
- // console.error('Error starting recording', error);
3255
- // });
3256
- // }
3257
- // rejectConcurrentCall(incomingCall: any) {
3258
- // if (!incomingCall) return;
3259
- // if (incomingCall.reject) {
3260
- // incomingCall.reject();
3261
- // }
3262
- // if (incomingCall.disconnect) incomingCall.disconnect();
3263
- // // Remove from list
3264
- // this.newIncomingCallsList = (this.newIncomingCallsList || []).filter((c: any) => c?.parameters?.CallSid !== incomingCall?.parameters?.CallSid);
3265
- // this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
3266
- // // If no more incoming, hide banner
3267
- // if (!this.newIncomingCallsList || this.newIncomingCallsList.length === 0) {
3268
- // this.isConcurrentIncoming = false;
3269
- // this.incomingCallDiv = false;
3270
- // }
3271
- // this.cdr.detectChanges();
3272
- // }
3273
2886
  onCallInputs(num) {
3274
2887
  var _a;
3275
2888
  try {
@@ -3303,13 +2916,10 @@ class CallProgressComponent {
3303
2916
  }
3304
2917
  }
3305
2918
  closeIncomingCall(data) {
3306
- // this.incomingCallDiv = false;
3307
2919
  if (data.show) {
3308
- //this.showCallProgressEvent.emit()
3309
2920
  // handle incoming call accepted
3310
2921
  this.startTimer();
3311
2922
  this.disbaleEndCallBtn = false;
3312
- // this.call = data.call;
3313
2923
  this.isConcurrentIncoming = false;
3314
2924
  this.incomingCallDiv = false;
3315
2925
  const incomingDetail = this.extensionService.getCallSid();
@@ -3359,9 +2969,6 @@ class CallProgressComponent {
3359
2969
  this.incomingCallSid = details.callSid;
3360
2970
  this.incomingRecordCall = details.recordCall;
3361
2971
  sid = this.incomingCallSid ? this.incomingCallSid : this.callSid || ((_a = this.addRes) === null || _a === void 0 ? void 0 : _a.conferenceSid);
3362
- // if (!this.incomingRecordCall && !this.recordCall) {
3363
- // return;
3364
- // }
3365
2972
  let payload = {
3366
2973
  "conferenceId": (_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.conferenceId,
3367
2974
  };
@@ -3375,9 +2982,6 @@ class CallProgressComponent {
3375
2982
  });
3376
2983
  }
3377
2984
  stopRecording() {
3378
- // if (!this.incomingRecordCall && !this.recordCall) {
3379
- // return;
3380
- // }
3381
2985
  this.isRecording = false;
3382
2986
  this.isPaused = false;
3383
2987
  if (this.timerSubscription) {
@@ -3472,19 +3076,10 @@ class CallProgressComponent {
3472
3076
  getUserInformation(id) {
3473
3077
  this.extensionService.getUserInformation(id).subscribe((response) => {
3474
3078
  console.log(response, 'userInformation');
3475
- // this.selectedUserInfo = response.c2cInformation;
3476
- // if(this.isClickExpand){
3477
- // this.checkTextHeight();
3478
- // }
3479
3079
  }, error => {
3480
3080
  console.error('Error starting recording', error);
3481
3081
  });
3482
3082
  }
3483
- // incomingCallsNewList(data: any) {
3484
- // console.log(data, 'newIncomingCallsListOUR')
3485
- // this.newIncomingCallsList = data;
3486
- // this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
3487
- // }
3488
3083
  selectedIncomingCallInfo(data) {
3489
3084
  this.selectedIncomingCall = data;
3490
3085
  }
@@ -3613,10 +3208,10 @@ class CallProgressComponent {
3613
3208
  }
3614
3209
  }
3615
3210
  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 });
3616
- 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 }\"\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)=\"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\" (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 }\"\r\n (click)=\"swapCalls(heldCall)\">\r\n <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\">\r\n 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\" (click)=\"onClickExpand(heldCall)\"\r\n [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\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\" 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\"\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)=\"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 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\"\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\">\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)\"\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\">\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)\"\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)\" 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\" (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)\"\r\n *ngIf=\"(c?.to == 'c2c_softphone_client' && deviceNumberList.includes(c?.from)) || 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' && deviceNumberList.includes(c?.from)) || c?.to != 'c2c_softphone_client'\">\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 }\"\r\n (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\"\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\">\r\n <div class=\"contacts-header\">\r\n <h2 class=\"title\">Call Disconnected</h2>\r\n <div class=\"d-flex justify-content-between\">\r\n <p></p>\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\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=\"min-call-btn end-call-btn\" (click)=\"endConference()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n <!-- <button class=\"btn end-btn\" (click)=\"endConference()\">\r\n End Conference\r\n </button> -->\r\n\r\n <button class=\"btn leave-btn\" (click)=\"leaveConference()\">\r\n <span class=\"material-symbols-outlined mr-1\"> call_end </span>\r\n 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: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}.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"] }] });
3211
+ 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\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 }\"\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)=\"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\" (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 }\"\r\n (click)=\"swapCalls(heldCall)\">\r\n <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\">\r\n 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 </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\" (click)=\"onClickExpand(heldCall)\"\r\n [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\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\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\" 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\"\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)=\"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 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\"\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\">\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)\"\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\">\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)\"\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)\" 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\" (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)\"\r\n *ngIf=\"(c?.to == 'c2c_softphone_client' && deviceNumberList.includes(c?.from)) || 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' && deviceNumberList.includes(c?.from)) || c?.to != 'c2c_softphone_client'\">\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 leftParticipent[currentCall?.conferenceId]\">\r\n <div class=\"contact-item\">\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\">\r\n <div class=\"contacts-header\">\r\n <h2 class=\"title\">Call Disconnected</h2>\r\n <div class=\"d-flex justify-content-between\">\r\n <p></p>\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\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=\"min-call-btn end-call-btn\" (click)=\"endConference()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n <!-- <button class=\"btn end-btn\" (click)=\"endConference()\">\r\n End Conference\r\n </button> -->\r\n\r\n <button class=\"btn leave-btn\" (click)=\"leaveConference()\">\r\n <span class=\"material-symbols-outlined mr-1\"> call_end </span>\r\n 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: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}.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"] }] });
3617
3212
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
3618
3213
  type: Component,
3619
- 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 }\"\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)=\"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\" (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 }\"\r\n (click)=\"swapCalls(heldCall)\">\r\n <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\">\r\n 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\" (click)=\"onClickExpand(heldCall)\"\r\n [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\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\" 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\"\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)=\"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 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\"\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\">\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)\"\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\">\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)\"\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)\" 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\" (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)\"\r\n *ngIf=\"(c?.to == 'c2c_softphone_client' && deviceNumberList.includes(c?.from)) || 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' && deviceNumberList.includes(c?.from)) || c?.to != 'c2c_softphone_client'\">\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 }\"\r\n (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\"\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\">\r\n <div class=\"contacts-header\">\r\n <h2 class=\"title\">Call Disconnected</h2>\r\n <div class=\"d-flex justify-content-between\">\r\n <p></p>\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\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=\"min-call-btn end-call-btn\" (click)=\"endConference()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n <!-- <button class=\"btn end-btn\" (click)=\"endConference()\">\r\n End Conference\r\n </button> -->\r\n\r\n <button class=\"btn leave-btn\" (click)=\"leaveConference()\">\r\n <span class=\"material-symbols-outlined mr-1\"> call_end </span>\r\n 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: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}.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"] }]
3214
+ 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?.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 }\"\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)=\"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\" (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 }\"\r\n (click)=\"swapCalls(heldCall)\">\r\n <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\">\r\n 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 </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\" (click)=\"onClickExpand(heldCall)\"\r\n [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\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\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\" 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\"\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)=\"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 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\"\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\">\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)\"\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\">\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)\"\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)\" 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\" (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)\"\r\n *ngIf=\"(c?.to == 'c2c_softphone_client' && deviceNumberList.includes(c?.from)) || 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' && deviceNumberList.includes(c?.from)) || c?.to != 'c2c_softphone_client'\">\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 leftParticipent[currentCall?.conferenceId]\">\r\n <div class=\"contact-item\">\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\">\r\n <div class=\"contacts-header\">\r\n <h2 class=\"title\">Call Disconnected</h2>\r\n <div class=\"d-flex justify-content-between\">\r\n <p></p>\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\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=\"min-call-btn end-call-btn\" (click)=\"endConference()\">\r\n <span class=\"material-symbols-outlined\"> call_end </span>\r\n </button>\r\n <!-- <button class=\"btn end-btn\" (click)=\"endConference()\">\r\n End Conference\r\n </button> -->\r\n\r\n <button class=\"btn leave-btn\" (click)=\"leaveConference()\">\r\n <span class=\"material-symbols-outlined mr-1\"> call_end </span>\r\n 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: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}.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"] }]
3620
3215
  }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: TwilioService }, { type: IpAddressService }, { type: IncomeingCallSocketService }]; }, propDecorators: { callData: [{
3621
3216
  type: Input
3622
3217
  }], selectedCallerId: [{