@vgroup/dialbox 0.6.30 → 0.6.33

package/fesm2015/vgroup-dialbox.mjs

@@ -2,7 +2,6 @@ import { __awaiter } from 'tslib';
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Input, Output, Directive, HostListener, ViewChild, Inject, NgModule } from '@angular/core';
 import swal from 'sweetalert2';
-import { AsYouType } from 'libphonenumber-js';
 import { throwError, BehaviorSubject, of, Subject, interval, Subscription } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
@@ -1179,8 +1178,10 @@ class ExtensionService {
         const params = new HttpParams()
             .set('page', (pageIndex === null || pageIndex === void 0 ? void 0 : pageIndex.toString()) || '1')
             .set('size', (pageSize === null || pageSize === void 0 ? void 0 : pageSize.toString()) || '10');
-        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }),
-            params: params };
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }),
+            params: params
+        };
         return this.http.post(environment.apiUrl + '/utilities/report/user/details', filterObj, httpOptions);
     }
     getReportsFilter() {
@@ -1396,6 +1397,15 @@ class ExtensionService {
         };
         return this.http.delete(environment.apiUrl + `/admin/delete/value/usage/${userIds}`, httpOptions);
     }
+    setTimerForEndConferenceCall(payload) {
+        const httpOptions = {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json',
+                'Auth-Key': "Bearer " + localStorage.getItem('ext_token')
+            })
+        };
+        return this.http.post(environment.apiUrl + `/utilities/ext/end/conference`, payload, httpOptions);
+    }
     getUserInformation(twilioAuthId) {
         const httpOptions = {
             headers: new HttpHeaders({
@@ -1712,9 +1722,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 
 class CallProgressComponent {
-    // audioURL:any = '/projects/dialbox/src/lib/shared/incoming_call.mp3';
-    // /projects/dialbox/src/lib/shared/incoming_call.mp3
-    // incomingAudio!: HTMLAudioElement;
     constructor(extensionService, cdr, twilioService, ipService, incomeingCallSocketService) {
         this.extensionService = extensionService;
         this.cdr = cdr;
@@ -1740,7 +1747,6 @@ class CallProgressComponent {
         this.isOutgoingCall = true;
         // Incoming call variables
         this.incomingCallDiv = false;
-        //@Output() showCallProgressEvent: EventEmitter<void> = new EventEmitter<void>();
         this.incomingCallInitiated = new EventEmitter();
         this.isLoadershow = new EventEmitter();
         this.endIncomingCallEvent = new EventEmitter();
@@ -1773,14 +1779,15 @@ class CallProgressComponent {
         this.conferenceCallList = [];
         this.isIncomingCallBtnDisable = false;
         this.isNewAddedCall = false;
-        this.micOn = false;
+        this.deviceNumberList = [];
+        this.ourNumberInfo = {};
+        this.currentConferenceCall = {};
+        this.isReasonChecked = false;
+        this.leaveReason = '';
         this.isMinimised = false;
+        this.showDisconnectModal = false;
         console.log('Call Progress Component');
         this.call = this.twilioService.call;
-        // this.incomingAudio = this.createAudioFromBase64(
-        //     INCOMING_CALL_AUDIO_BASE64,
-        //     'audio/mpeg' // use audio/wav if needed
-        //   );
     }
     ngOnInit() {
         console.log('Call Progress Component ngOnInit');
@@ -1803,10 +1810,11 @@ class CallProgressComponent {
         catch (e) {
             console.error('Error subscribing to incoming calls:', e);
         }
+        this.deviceNumberList = this.callerIdList.map((res) => res.number);
         this.GetContactsList();
     }
     ngOnChanges(changes) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         if (this.userId) {
             this.extensionService.userId = this.userId;
         }
@@ -1821,81 +1829,55 @@ class CallProgressComponent {
                 this.startCall(changes['callData'].currentValue);
             }
         }
-        if ((_h = changes['newIncomingCallsList']) === null || _h === void 0 ? void 0 : _h.currentValue) {
-            if ((_j = this.newIncomingCallsList) === null || _j === void 0 ? void 0 : _j.length) {
-                let numberList = this.callerIdList.map((res) => res.number);
+        if (((_j = (_h = changes['newIncomingCallsList']) === null || _h === void 0 ? void 0 : _h.currentValue) === null || _j === void 0 ? void 0 : _j.length) || ((_l = (_k = changes['newIncomingCallsList']) === null || _k === void 0 ? void 0 : _k.previousValue) === null || _l === void 0 ? void 0 : _l.length)) {
+            if ((_m = this.newIncomingCallsList) === null || _m === void 0 ? void 0 : _m.length) {
+                if (!((_o = this.deviceNumberList) === null || _o === void 0 ? void 0 : _o.length)) {
+                    this.deviceNumberList = this.callerIdList.map((res) => res.number);
+                }
                 this.newIncomingCallsList.forEach((callInfo, i) => {
                     this.conferenceId = i == 0 ? this.newIncomingCallsList[i].conferenceId : this.conferenceId;
-                    let ourNumber = this.newIncomingCallsList[i].participants.find((resData) => numberList.includes((resData === null || resData === void 0 ? void 0 : resData.from) || (resData === null || resData === void 0 ? void 0 : resData.to)) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
-                    if (ourNumber === null || ourNumber === void 0 ? void 0 : ourNumber.id) {
+                    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));
+                    this.isMute = !(ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isHold) ? ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isMute : this.isMute;
+                    if (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id) {
                         this.newIncomingCallsList[i].participants.forEach((res) => __awaiter(this, void 0, void 0, function* () {
-                            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-                            if ((res === null || res === void 0 ? void 0 : res.to) == 'c2c_softphone_client' && numberList.includes(res === null || res === void 0 ? void 0 : res.from)) {
+                            var _a, _b, _c, _d, _e, _f, _g, _h;
+                            if ((res === null || res === void 0 ? void 0 : res.to) == 'c2c_softphone_client' && !(res === null || res === void 0 ? void 0 : res.isLeft)) {
                                 this.hostnumber = res;
                             }
                             else {
                                 let contact = {};
                                 if ((_a = this.contacts) === null || _a === void 0 ? void 0 : _a.length) {
-                                    contact = this.contacts.find((resData) => { var _a; return ((_a = resData === null || resData === void 0 ? void 0 : resData.numbersList[0]) === null || _a === void 0 ? void 0 : _a.number) == (res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to); });
+                                    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); });
                                 }
-                                if (this.currentCallList.length > 0) {
-                                    let index = this.currentCallList.findIndex((item) => item.id == res.id);
+                                if (((_b = this.currentCallList) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                                    let index = this.currentCallList.findIndex((item) => (item === null || item === void 0 ? void 0 : item.id) == (res === null || res === void 0 ? void 0 : res.id));
                                     if (index == -1 && !res.isLeft) {
-                                        this.currentCallList.push(Object.assign(Object.assign({}, res), { img: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: res.direction == "incoming-call", isHold: res.isHold, isMute: false, isConference: res.isConference, isAcceptCall: res.direction == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res.id, conferenceSid: callInfo.conferenceSid, name: res.name || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference(res.joinedAt || new Date().toUTCString()) }));
+                                        this.currentCallList.push(Object.assign(Object.assign({}, res), { img: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call", isHold: res === null || res === void 0 ? void 0 : res.isHold, isConferenceHold: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isHold) || false, isMute: false, isConference: (res === null || res === void 0 ? void 0 : res.isConference) || this.isConference, isAcceptCall: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res === null || res === void 0 ? void 0 : res.id, conferenceSid: callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceSid, name: (res === null || res === void 0 ? void 0 : res.name) || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference((res === null || res === void 0 ? void 0 : res.joinedAt) || new Date().toUTCString()) }));
                                         if (this.showContactsPanel) {
-                                            this.getAllParticipants(this.currentCall.conferenceSid);
+                                            this.getAllParticipants((_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.conferenceSid);
                                             this.applyFilter();
                                         }
                                     }
-                                    else if (index != -1 && res.isLeft) {
-                                        if (((_b = this.currentCallList[index]) === null || _b === void 0 ? void 0 : _b.id) == ((_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.id)) {
+                                    else if (index != -1 && (res === null || res === void 0 ? void 0 : res.isLeft)) {
+                                        if (((_d = this.currentCallList[index]) === null || _d === void 0 ? void 0 : _d.id) == ((_e = this.currentCall) === null || _e === void 0 ? void 0 : _e.id)) {
                                             this.currentCallList.splice(index, 1);
-                                            this.currentCall = this.currentCallList.length > 0 ? this.currentCallList[0] : {};
-                                            if (((_d = this.currentCall) === null || _d === void 0 ? void 0 : _d.isHold) && !((_e = this.currentCall) === null || _e === void 0 ? void 0 : _e.isConference)) {
-                                                yield this.onholdOrUnholdParticipant({
-                                                    participantId: [(_f = this.currentCall) === null || _f === void 0 ? void 0 : _f.participantId],
-                                                    conferenceId: (_g = this.currentCall) === null || _g === void 0 ? void 0 : _g.conferenceId,
-                                                    hold: false,
-                                                    mute: ((_h = this.currentCall) === null || _h === void 0 ? void 0 : _h.mute) || false,
-                                                    conference: (_j = this.currentCall) === null || _j === void 0 ? void 0 : _j.isConference
-                                                });
-                                            }
-                                            else if (((_k = this.currentCall) === null || _k === void 0 ? void 0 : _k.isHold) && ((_l = this.currentCall) === null || _l === void 0 ? void 0 : _l.isConference)) {
-                                                let conferenceCalllist = this.currentCallList.filter((item) => { var _a; return item.isConference && item.conferenceId == ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.conferenceId); });
-                                                if (conferenceCalllist.length > 0) {
-                                                    // await this.onholdOrUnholdParticipant({
-                                                    //   participantId: conferenceCalllist.map((item: any) => item.participantId),
-                                                    //   conferenceId: conferenceCalllist[0]?.conferenceId,
-                                                    //   hold: false,
-                                                    //   mute: this.currentCall?.mute || false,
-                                                    //   conference: this.currentCall?.isConference || false
-                                                    // });
-                                                    yield this.onholdOrUnholdParticipant({
-                                                        participantId: [(_m = this.hostnumber) === null || _m === void 0 ? void 0 : _m.participantId],
-                                                        conferenceId: (_o = this.currentCall) === null || _o === void 0 ? void 0 : _o.conferenceId,
-                                                        hold: false,
-                                                        mute: ((_p = this.currentCall) === null || _p === void 0 ? void 0 : _p.mute) || false,
-                                                        conference: (_q = this.currentCall) === null || _q === void 0 ? void 0 : _q.isConference
-                                                    });
-                                                    this.isConferenceCallHold = false;
-                                                }
-                                            }
+                                            this.currentCall = ((_f = this.currentCallList) === null || _f === void 0 ? void 0 : _f.length) > 0 ? this.currentCallList[0] : {};
                                         }
                                         else {
                                             this.currentCallList.splice(index, 1);
                                         }
                                         if (this.showContactsPanel) {
-                                            this.getAllParticipants(this.currentCall.conferenceSid);
+                                            this.getAllParticipants((_g = this.currentCall) === null || _g === void 0 ? void 0 : _g.conferenceSid);
                                             this.applyFilter();
                                         }
                                     }
                                     else if (index != -1) {
-                                        this.currentCallList[index] = Object.assign(Object.assign({}, res), { img: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: res.direction == "incoming-call", isHold: res.isHold, isMute: false, isConference: res.isConference, isAcceptCall: res.direction == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res.id, conferenceSid: callInfo.conferenceSid, name: res.name || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference(res.joinedAt || new Date().toUTCString()) });
+                                        this.currentCallList[index] = Object.assign(Object.assign({}, res), { img: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call", isHold: res === null || res === void 0 ? void 0 : res.isHold, isConferenceHold: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isHold) || false, isMute: res === null || res === void 0 ? void 0 : res.isMute, isConference: (res === null || res === void 0 ? void 0 : res.isConference) || this.isConference, isAcceptCall: res.direction == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: (res === null || res === void 0 ? void 0 : res.direction) == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res === null || res === void 0 ? void 0 : res.id, conferenceSid: callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceSid, name: (res === null || res === void 0 ? void 0 : res.name) || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference((res === null || res === void 0 ? void 0 : res.joinedAt) || new Date().toUTCString()) });
                                     }
                                 }
                                 else if (!res.isLeft) {
-                                    this.currentCallList.push(Object.assign(Object.assign({}, res), { img: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: res.direction == "incoming-call", isHold: res.isHold, isMute: false, isConference: res.isConference, isAcceptCall: res.direction == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res.id, conferenceSid: callInfo.conferenceSid, name: res.name || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference(res.joinedAt || new Date().toUTCString()) }));
-                                    if (((_r = this.currentCallList) === null || _r === void 0 ? void 0 : _r.length) == 1) {
+                                    this.currentCallList.push(Object.assign(Object.assign({}, res), { img: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.toImage : (res === null || res === void 0 ? void 0 : res.fromImage) || (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg', isIncomingCall: res.direction == "incoming-call", isHold: res === null || res === void 0 ? void 0 : res.isHold, isConferenceHold: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isHold) || false, isMute: res === null || res === void 0 ? void 0 : res.isMute, isConference: res.isConference, isAcceptCall: res.direction == "incoming-call" ? this.getStatus(res) : true, dial: true, phone: res.direction == "incoming-call" ? res === null || res === void 0 ? void 0 : res.from : res === null || res === void 0 ? void 0 : res.to, participantId: res.id, conferenceSid: callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceSid, name: (res === null || res === void 0 ? void 0 : res.name) || (res === null || res === void 0 ? void 0 : res.fromName) || (res === null || res === void 0 ? void 0 : res.toName), time: this.getTimeDifference((res === null || res === void 0 ? void 0 : res.joinedAt) || new Date().toUTCString()) }));
+                                    if (((_h = this.currentCallList) === null || _h === void 0 ? void 0 : _h.length) == 1) {
                                         this.currentCall = this.currentCallList[0];
                                     }
                                     this.timer = '00:00';
@@ -1928,82 +1910,81 @@ class CallProgressComponent {
                 });
                 let validValues = new Set(this.newIncomingCallsList.flatMap((item) => item === null || item === void 0 ? void 0 : item.participants.map((val) => val === null || val === void 0 ? void 0 : val.id)));
                 this.currentCallList = this.currentCallList.filter((item) => validValues.has(item === null || item === void 0 ? void 0 : item.participantId));
-                this.currentCall = this.currentCallList.find((res) => { var _a; return ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.participantId) == (res === null || res === void 0 ? void 0 : res.participantId); });
-                let currentCall = this.currentCallList.filter((item) => (item === null || item === void 0 ? void 0 : item.isAcceptCall) && !(item === null || item === void 0 ? void 0 : item.isHold));
-                if ((currentCall === null || currentCall === void 0 ? void 0 : currentCall.length) == 1 && ((_k = currentCall[0]) === null || _k === void 0 ? void 0 : _k.id)) {
+                this.currentCall = this.currentCallList.find((res) => { var _a; return ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.participantId) == (res === null || res === void 0 ? void 0 : res.participantId) && !(res === null || res === void 0 ? void 0 : res.isConferenceHold); });
+                let currentCall = this.currentCallList.filter((item) => (item === null || item === void 0 ? void 0 : item.isAcceptCall) && !(item === null || item === void 0 ? void 0 : item.isConferenceHold));
+                this.currentConferenceCall = this.newIncomingCallsList.find((item) => {
+                    var _a;
+                    return (_a = item === null || item === void 0 ? void 0 : item.participants) === null || _a === void 0 ? void 0 : _a.find((participant) => {
+                        return ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from) && (participant === null || participant === void 0 ? void 0 : participant.to) === 'c2c_softphone_client') || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call')) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft) && !(participant === null || participant === void 0 ? void 0 : participant.isHold);
+                    });
+                });
+                if ((currentCall === null || currentCall === void 0 ? void 0 : currentCall.length) == 1 && ((_p = currentCall[0]) === null || _p === void 0 ? void 0 : _p.id)) {
                     this.currentCall = currentCall[0] || this.currentCallList[0];
                 }
-                else if ((currentCall === null || currentCall === void 0 ? void 0 : currentCall.length) > 1 && ((_l = currentCall[0]) === null || _l === void 0 ? void 0 : _l.isConference)) {
-                    this.currentCall = currentCall[0] || this.currentCallList[0];
+                else if ((currentCall === null || currentCall === void 0 ? void 0 : currentCall.length) > 1 && ((_q = currentCall[1]) === null || _q === void 0 ? void 0 : _q.isConference)) {
+                    this.currentCall = currentCall[1] || this.currentCallList[1];
                     this.isConference = true;
                 }
-                if (!this.currentCall && !this.isNewAddedCall) {
-                    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); });
-                    if (!((_m = this.currentCall) === null || _m === void 0 ? void 0 : _m.participantId)) {
-                        this.currentCall = this.currentCallList[0];
-                        if (((_o = this.currentCallList[0]) === null || _o === void 0 ? void 0 : _o.isHold) && ((_p = this.currentCallList[0]) === null || _p === void 0 ? void 0 : _p.isConference)) {
-                            this.isConference = true;
-                            this.onholdOrUnholdParticipant({
-                                participantId: [(_q = this.currentCall) === null || _q === void 0 ? void 0 : _q.participantId],
-                                conferenceId: (_r = this.currentCall) === null || _r === void 0 ? void 0 : _r.conferenceId,
-                                hold: false,
-                                mute: ((_s = this.currentCall) === null || _s === void 0 ? void 0 : _s.mute) || false,
-                                conference: ((_t = this.currentCall) === null || _t === void 0 ? void 0 : _t.isConference) || false
-                            });
-                            // this.currentCallList.forEach((res) => {
-                            //   if (res.isConference && this.currentCall?.participantId) {
-                            //     this.onholdOrUnholdParticipant({
-                            //       participantId: [res.participantId],
-                            //       conferenceId: res?.conferenceId,
-                            //       hold: false,
-                            //       mute: res?.mute || false,
-                            //       conference: res?.isConference || false
-                            //     });
-                            //   }
-                            // })
-                        }
-                        else if ((_u = this.currentCall) === null || _u === void 0 ? void 0 : _u.isHold) {
+                if (!this.currentConferenceCall && !this.isNewAddedCall) {
+                    // this.currentConferenceCall = this.newIncomingCallsList.find((item: any) => {
+                    //   return ((this.deviceNumberList.includes(item?.from) && item?.to === 'c2c_softphone_client') || this.deviceNumberList.includes(item?.to)) && !item?.isLeft && !item?.isHold
+                    // });
+                    // this.currentCall = this.currentCallList.find((res: any) => res?.participantId == this.currentCall?.participantId && res?.isAcceptCall && !res?.isConferenceHold)
+                    // if (!this.currentConferenceCall?.id && this.currentCallList?.length) {
+                    // this.currentConferenceCall = this.newIncomingCallsList.find((item: any) => {
+                    //   return ((this.deviceNumberList.includes(item?.from) && item?.to === 'c2c_softphone_client') || this.deviceNumberList.includes(item?.to)) && !item?.isLeft && item?.isHold
+                    // });
+                    // let calldetail = this.currentConferenceCall.find((resInfo: any) => ((this.deviceNumberList.includes(resInfo?.from) && resInfo?.to === 'c2c_softphone_client') || this.deviceNumberList.includes(resInfo?.to)) && !resInfo?.isLeft && resInfo?.isHold)
+                    // if (calldetail?.isHold) {
+                    //   this.isConference = true;
+                    //   this.onholdOrUnholdParticipant({
+                    //     participantId: [calldetail?.id || calldetail?.participantId],
+                    //     conferenceId: calldetail?.conferenceId,
+                    //     hold: false,
+                    //     mute: calldetail?.mute || false,
+                    //     conference: calldetail?.isConference || false
+                    //   });
+                    // }
+                    // }
+                    // if (!this.currentCall?.participantId) {
+                    //   this.currentCall = this.currentCallList[0];
+                    //   if (this.currentCallList[0]?.isConferenceHold && this.currentCallList[0]?.isConference) {
+                    //     this.isConference = true;
+                    //     this.onholdOrUnholdParticipant({
+                    //       participantId: [this.currentCall?.participantId],
+                    //       conferenceId: this.currentCall?.conferenceId,
+                    //       hold: false,
+                    //       mute: this.currentCall?.mute || false,
+                    //       conference: this.currentCall?.isConference || false
+                    //     });
+                    //   } else if (this.currentCall?.isConferenceHold) {
+                    //     this.onholdOrUnholdParticipant({
+                    //       participantId: [this.currentCall?.participantId],
+                    //       conferenceId: this.currentCall?.conferenceId,
+                    //       hold: false,
+                    //       mute: this.currentCall?.mute || false,
+                    //       conference: this.currentCall?.isConference || false
+                    //     });
+                    //   }
+                    // }
+                    let currentConferenceCallInfo = this.getCurrentCallInfo();
+                    if (!(currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.id)) {
+                        let holdCallInfo = this.newIncomingCallsList[0].participants.find((callInfo) => ((this.deviceNumberList.includes(callInfo === null || callInfo === void 0 ? void 0 : callInfo.from) && (callInfo === null || callInfo === void 0 ? void 0 : callInfo.to) === 'c2c_softphone_client')
+                            || (this.deviceNumberList.includes(callInfo === null || callInfo === void 0 ? void 0 : callInfo.to) && (callInfo === null || callInfo === void 0 ? void 0 : callInfo.direction) == 'incoming-call')) && !(callInfo === null || callInfo === void 0 ? void 0 : callInfo.isLeft) && (callInfo === null || callInfo === void 0 ? void 0 : callInfo.isHold));
+                        if (holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.id) {
                             this.onholdOrUnholdParticipant({
-                                participantId: [(_v = this.currentCall) === null || _v === void 0 ? void 0 : _v.participantId],
-                                conferenceId: (_w = this.currentCall) === null || _w === void 0 ? void 0 : _w.conferenceId,
+                                participantId: [holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.id],
+                                conferenceId: holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.conferenceId,
                                 hold: false,
-                                mute: ((_x = this.currentCall) === null || _x === void 0 ? void 0 : _x.mute) || false,
-                                conference: ((_y = this.currentCall) === null || _y === void 0 ? void 0 : _y.isConference) || false
+                                mute: (holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.mute) || false,
+                                conference: (holdCallInfo === null || holdCallInfo === void 0 ? void 0 : holdCallInfo.isConference) || false
                             });
                         }
                     }
                 }
-                // else if(!this.currentCall) {
-                //   this.currentCall = this.currentCallList.find((res: any)=> res?.participantId == this.currentCall?.participantId && res?.isAcceptCall && !res?.isHold)
-                //   if(!this.currentCall?.participantId) {
-                //     this.currentCall = this.currentCallList[0];
-                //     if(this.currentCallList[0].isHold && this.currentCallList[0]?.isConference) {
-                //       this.isConference = true;
-                //       this.currentCallList.forEach((res) => {
-                //         if (res.isConference && this.currentCall?.participantId) {
-                //           this.onholdOrUnholdParticipant({
-                //             participantId: [res.participantId],
-                //             conferenceId: res?.conferenceId,
-                //             hold: false,
-                //             mute: res?.mute || false,
-                //             conference: res?.isConference || false
-                //           });
-                //         }
-                //       })
-                //     } else {
-                //       this.onholdOrUnholdParticipant({
-                //         participantId: [this.currentCall?.participantId],
-                //         conferenceId: this.currentCall?.conferenceId,
-                //         hold: false,
-                //         mute: this.currentCall?.mute || false,
-                //         conference: this.currentCall?.isConference || false
-                //       });
-                //     }
-                //   }
-                // } else {
-                // }
+                console.log(this.currentConferenceCall, 'currentConferenceCall');
                 console.log(this.leftParticipent, 'leftParticipent');
-                if ((_z = this.selectedUserInfo) === null || _z === void 0 ? void 0 : _z.participantId) {
+                if ((_r = this.selectedUserInfo) === null || _r === void 0 ? void 0 : _r.participantId) {
                     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); });
                     if (selectedUser) {
                         selectedUser.IsUserInfoShow = true;
@@ -2034,7 +2015,7 @@ class CallProgressComponent {
                     }
                 }
                 this.cdr.detectChanges();
-                let incomingData = this.currentCallList.find((res) => (res === null || res === void 0 ? void 0 : res.isIncomingCall) && !(res === null || res === void 0 ? void 0 : res.isAcceptCall));
+                let incomingData = this.currentCallList.find((res) => (res === null || res === void 0 ? void 0 : res.isIncomingCall) && !(res === null || res === void 0 ? void 0 : res.isAcceptCall) && !(res === null || res === void 0 ? void 0 : res.isLeft));
                 if ((incomingData === null || incomingData === void 0 ? void 0 : incomingData.id) && !this.isRinging) {
                     this.isRinging = this.incomeingCallSocketService.play();
                 }
@@ -2044,11 +2025,10 @@ class CallProgressComponent {
                 console.log('currentCallList', this.currentCallList);
                 this.conferenceCallList = [];
                 this.conferenceCallList = [
-                    ...new Map(this.currentCallList.filter(item => item.isConference === true).map(item => [item.conferenceId, item])).values()
+                    ...new Map(this.currentCallList.map(item => [item.conferenceId, item])).values()
                 ];
-                // })
             }
-            else if (!((_0 = this.newIncomingCallsList) === null || _0 === void 0 ? void 0 : _0.length)) {
+            else if (!((_s = this.newIncomingCallsList) === null || _s === void 0 ? void 0 : _s.length)) {
                 this.isRinging = false;
                 this.isConcurrentIncoming = false;
                 this.incomingCallDiv = false;
@@ -2069,6 +2049,43 @@ class CallProgressComponent {
             }
             ;
         }
+        if ((_t = changes['callAction']) === null || _t === void 0 ? void 0 : _t.currentValue) {
+            this.deviceNumberList = this.callerIdList.map((res) => res.number);
+            this.rejoinHost(this.callAction);
+        }
+    }
+    rejoinHost(callInfo) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const rejoinParticipentInfo = callInfo === null || callInfo === void 0 ? void 0 : callInfo.participants.find((resData) => (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.to) == 'c2c_softphone_client'));
+                this.showRingAnimation = true;
+                // 1️⃣ Get new token for same conference
+                const tokenData = yield this.getOutgoingCallToken(callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceId);
+                // 2️⃣ Reconnect device
+                const options = {
+                    codecPreferences: ['opus', 'pcmu'],
+                    closeProtection: true,
+                };
+                this.device = new Device(tokenData.token.value, options);
+                this.call = yield this.device.connect({
+                    params: {
+                        From: rejoinParticipentInfo.from,
+                        To: rejoinParticipentInfo.from,
+                        Env: environment.abb,
+                        Token: tokenData.token.id,
+                        Ext: rejoinParticipentInfo.extNum,
+                        conferenceId: rejoinParticipentInfo === null || rejoinParticipentInfo === void 0 ? void 0 : rejoinParticipentInfo.conferenceId
+                    },
+                    rtcConstraints: { audio: { deviceId: 'default' } },
+                });
+                this.twilioService.call = this.call;
+                this.setupEventListeners();
+                console.log('Rejoined successfully');
+            }
+            catch (error) {
+                console.error('Rejoin failed', error);
+            }
+        });
     }
     getStatus(res) {
         if (res.direction == "incoming-call") {
@@ -2186,6 +2203,7 @@ class CallProgressComponent {
                 }
                 else if (response.status == 201) {
                     this.isNewAddedCall = false;
+                    this.isLoadershow.emit(false);
                     swal("Error", response.message.join("<br/>"), "error");
                     this.endCall();
                 }
@@ -2209,8 +2227,7 @@ class CallProgressComponent {
                 conference: c.isConference || false
             });
             c.isMute = !c.isMute;
-            // await this.getAllParticipants(c?.conferenceSid);
-            // this.filteredParticipentList = this.allParticipentList;
+            yield this.getAllParticipants(c === null || c === void 0 ? void 0 : c.conferenceId);
             this.cdr.detectChanges();
         });
     }
@@ -2239,28 +2256,26 @@ class CallProgressComponent {
         });
     }
     onEndCall(c, isAllCallEnd, isContect) {
-        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
-            if (!(c === null || c === void 0 ? void 0 : c.isAcceptCall) && !isContect && !isAllCallEnd) {
-                let index = this.currentCallList.findIndex((res) => res.participantId == c.participantId);
-                yield this.extensionService.getRemoveParticipants((_a = this.currentCallList[index]) === null || _a === void 0 ? void 0 : _a.participantId, ((_b = this.currentCallList[index]) === null || _b === void 0 ? void 0 : _b.conferenceId) || 'no').subscribe((res) => {
-                    var _a;
-                    this.currentCallList.splice(index, 1);
-                    this.incomeingCallSocketService.pause();
-                    (_a = this.call) === null || _a === void 0 ? void 0 : _a.disconnect();
-                    this.endIncomingCallEvent.emit(c);
-                    return false;
-                });
-                return false;
-            }
-            let participantId = isAllCallEnd ? 'all' : c.participantId;
-            let conferenceId = c.conferenceId || this.currentCall.conferenceId;
+            // if (!c?.isAcceptCall && !isContect && !isAllCallEnd) {
+            //   let index = this.currentCallList.findIndex((res) => res.participantId == c.participantId)
+            //   await this.extensionService.getRemoveParticipants(this.currentCallList[index]?.participantId, this.currentCallList[index]?.conferenceId || 'no').subscribe((res) => {
+            //     this.currentCallList.splice(index, 1)
+            //     this.incomeingCallSocketService.pause();
+            //     this.call?.disconnect();
+            //     this.endIncomingCallEvent.emit(c);
+            //     return false;
+            //   })
+            //   return false;
+            // }
+            let participantId = isAllCallEnd ? 'all' : c.participantId || (c === null || c === void 0 ? void 0 : c.id);
+            const currentConferenceCallInfo = this.getCurrentCallInfo();
+            let conferenceId = c.conferenceId || (currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.conferenceId);
             let res = yield this.getRemoveParticipants(participantId, conferenceId);
             if ((res === null || res === void 0 ? void 0 : res.status) == 201 && (res === null || res === void 0 ? void 0 : res.message) == 'participant already left') {
                 this.cdr.detectChanges();
             }
-            yield this.getAllParticipants(this.currentCall.conferenceSid);
-            this.currentCallList = this.currentCallList.filter((res) => res.participantId !== c.participantId);
+            yield this.getAllParticipants(conferenceId);
             this.incomeingCallSocketService.pause();
             this.endIncomingCallEvent.emit(c);
             this.cdr.detectChanges();
@@ -2377,15 +2392,6 @@ class CallProgressComponent {
             catch (e) {
                 console.log('Error updating accept state:', e);
             }
-            // Start recording if recordCall is true and call is accepted for 30 seconds
-            // if (this.recordCall) {
-            //   setTimeout(() => {
-            //     if (this.isRecording) return; // If already recording, skip
-            //     this.startRecording();
-            //   }, 30000);
-            // } else {
-            //   this.stopRecording();
-            // }
         });
         (_g = this.call) === null || _g === void 0 ? void 0 : _g.on('messageReceived', (message) => {
         });
@@ -2413,122 +2419,81 @@ class CallProgressComponent {
     handleError(error) {
         swal("Error", error, "error");
     }
-    // endCall() {
-    //   console.log('endCall() called');
-    //   console.log('Current call:', this.call?.parameters['From']);
-    //   console.log('Held call exists:', !!this.heldCall);
-    //   // Disconnect the current active call
-    //   if (this.call) {
-    //     this.call.disconnect();
-    //     this.call = undefined;
-    //   }
-    //   this.showRingAnimation = false;
-    //   this.stopTimer();
-    //   // If there's a held call, make it active
-    //   if (this.heldCall) {
-    //     console.log('Resuming held call:', this.heldCall.parameters['From']);
-    //     // Make held call the active call
-    //     this.call = this.heldCall;
-    //     this.heldCall = undefined;
-    //     // this.isCallOnHold = false;
-    //     this.isCallOnHold = !!this.heldCall;
-    //     // Unmute the resumed call
-    //     this.call.mute(false);
-    //     // Update UI with the resumed call info
-    //     const fromNumber = this.call.parameters['From'];
-    //     const callerName = this.call.customParameters?.get('name') || '-';
-    //     const callerImg = this.call.customParameters?.get('image') || 'assets/images/user.jpg';
-    //     this.callData = {
-    //       ...this.callData,
-    //       phone: fromNumber,
-    //       displayNum: fromNumber,
-    //       name: callerName,
-    //       img: callerImg
-    //     };
-    //     // Restart timer for the resumed call
-    //     this.startTimer();
-    //     this.disbaleEndCallBtn = false;
-    //     console.log('Held call is now active:', this.callData);
-    //     this.cdr.detectChanges();
-    //   } else {
-    //     // No held call, completely end
-    //     console.log('No held call, ending completely');
-    //     this.endCallEvent.emit();
-    //     this.maximiseDialpad();
-    //   }
-    // }
+    endConfereneceCall(conf) {
+        var _a, _b, _c;
+        this.selectedConf = conf;
+        if (this.deviceNumberList.includes((_a = this.hostnumber) === null || _a === void 0 ? void 0 : _a.from)) {
+            this.onCallDisconnected();
+        }
+        else {
+            if (conf === null || conf === void 0 ? void 0 : conf.conferenceId) {
+                let conference = (_b = this.newIncomingCallsList) === null || _b === void 0 ? void 0 : _b.find((res) => (res === null || res === void 0 ? void 0 : res.conferenceId) == (conf === null || conf === void 0 ? void 0 : conf.conferenceId));
+                let participentInfo = (_c = conference === null || conference === void 0 ? void 0 : conference.participants) === null || _c === void 0 ? void 0 : _c.find((participant) => ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from)
+                    && (participant === null || participant === void 0 ? void 0 : participant.to) === 'c2c_softphone_client') || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call')) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft));
+                if (conference === null || conference === void 0 ? void 0 : conference.id) {
+                    this.onEndCall(participentInfo);
+                }
+            }
+            else {
+                this.endCall();
+            }
+        }
+    }
     endCall(isAllCallEnd) {
-        var _a, _b, _c, _d, _e;
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            console.log('endCall() called');
-            // console.log('Current call:', this.call?.parameters['From']);
-            console.log('Held call exists:', !!this.heldCall);
-            // Leaving conference state when ending current call action
-            this.isConference = false;
+            // this.isConference = false;
             this.showRingAnimation = false;
             if (isAllCallEnd) {
                 this.stopTimer();
                 this.onEndCall({}, isAllCallEnd);
-                // this.currentCallList = [];
                 if (!((_a = this.currentCallList) === null || _a === void 0 ? void 0 : _a.length)) {
                     this.endCallEvent.emit();
                 }
             }
             else {
-                this.onEndCall(this.currentCall, isAllCallEnd);
-                this.currentCallList = this.currentCallList.filter((c) => (c === null || c === void 0 ? void 0 : c.participantId) !== this.currentCall.participantId);
-                if (this.currentCallList.length > 0) {
-                    // this.currentCallList[0].isHold = false;
-                    // this.currentCall = this.currentCallList[0];
-                    yield this.onholdOrUnholdParticipant({
-                        participantId: [(_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.participantId],
-                        conferenceId: (_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.conferenceId,
-                        hold: false,
-                        mute: ((_d = this.currentCall) === null || _d === void 0 ? void 0 : _d.mute) || false,
-                        isConference: ((_e = this.currentCall) === null || _e === void 0 ? void 0 : _e.isConference) || false
-                    });
-                }
-                else {
-                    // this.currentCall = null;
-                    // this.currentCallList = [];
-                    this.endCallEvent.emit();
-                }
+                const currentConferenceCallInfo = this.getCurrentCallInfo();
+                this.onEndCall(currentConferenceCallInfo, isAllCallEnd);
             }
             if (this.call) {
                 this.call.disconnect();
                 this.call.reject();
-                // this.call = undefined;
             }
         });
     }
     toggleMute(isConference) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            // await this.onMuteParticipant({
-            //   participantId: [this.currentCall?.participantId],
-            //   conferenceId: this.conferenceId,
-            //   mute: !this.isMute,
-            // })
-            // this.call = this.heldCall
-            // this.toggleMic()
             this.isMute = !this.isMute;
-            console.log('isMute', this.call, this.heldCall);
             (_a = this.call) === null || _a === void 0 ? void 0 : _a.mute(this.isMute);
-            // if (isConference) {
+            const currentConferenceCallInfo = this.getCurrentCallInfo();
+            this.onMuteParticipant({
+                participantId: [currentConferenceCallInfo.participantId || (currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.id)],
+                conferenceId: currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.conferenceId,
+                hold: currentConferenceCallInfo.hold,
+                mute: !(currentConferenceCallInfo === null || currentConferenceCallInfo === void 0 ? void 0 : currentConferenceCallInfo.isMute),
+                conference: currentConferenceCallInfo.isConference || false
+            });
             this.currentCall.isMute = this.isMute;
         });
     }
-    toggleMic() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.audioStream) {
-                // first time: request mic
-                this.audioStream = yield navigator.mediaDevices.getUserMedia({ audio: true });
-            }
-            this.micOn = !this.micOn;
-            this.audioStream.getAudioTracks().forEach(track => {
-                track.enabled = this.micOn; // false = muted, true = sending audio
-            });
-        });
+    // audioStream?: MediaStream;
+    // micOn = false;
+    // async toggleMic() {
+    //   if (!this.audioStream) {
+    //     // first time: request mic
+    //     this.audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    //   }
+    //   this.micOn = !this.micOn;
+    //   this.audioStream.getAudioTracks().forEach(track => {
+    //     track.enabled = this.micOn;   // false = muted, true = sending audio
+    //   });
+    // }
+    getCurrentCallInfo() {
+        return this.newIncomingCallsList
+            .flatMap((callInfo) => callInfo.participants)
+            .find((participant) => ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from) && (participant === null || participant === void 0 ? void 0 : participant.to) === 'c2c_softphone_client')
+            || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call')) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft) && !(participant === null || participant === void 0 ? void 0 : participant.isHold));
     }
     toggleKeypad() {
         this.showKeypad = !this.showKeypad;
@@ -2539,7 +2504,6 @@ class CallProgressComponent {
             this.showContactsPanel = false;
             return false;
         }
-        // this.isAddRemoveParticipant = false;
         this.showContactsPanel = !isClose;
         this.getAllParticipants(callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceSid);
         this.filteredList = this.contacts;
@@ -2549,31 +2513,19 @@ class CallProgressComponent {
         this.applyFilter();
     }
     addRemoveParticipant() {
-        // const conferenceSId = this.addRes?.conferenceSid;
-        this.isAddRemoveParticipant = !this.isAddRemoveParticipant;
-        this.allParticipentList = this.getAllParticipants(this.currentCall.conferenceSid);
-        this.filteredParticipentList = this.allParticipentList;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.isAddRemoveParticipant = !this.isAddRemoveParticipant;
+            yield this.getAllParticipants(this.currentCall.conferenceSid);
+            this.filteredParticipentList = this.allParticipentList;
+        });
     }
     add(data) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         return __awaiter(this, void 0, void 0, function* () {
-            // if(data?.status != 'ringing'){
             this.isIncomingCallBtnDisable = true;
             this.conferenceId = this.twilioService.conferenceCallInfo.conferenceId;
             if (this.currentCallList.length > 1 && ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.isAcceptCall)) {
                 if ((_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.isConference) {
-                    // this.isConferenceCallHold = true;
-                    // this.currentCallList.forEach((res) => {
-                    //   if (res.isConference) {
-                    //     this.onholdOrUnholdParticipant({
-                    //       participantId: [res.participantId],
-                    //       conferenceId: res?.conferenceId,
-                    //       hold: true,
-                    //       mute: res?.mute || false,
-                    //       conference: res.isConference || false
-                    //     });
-                    //   }
-                    // })
                     this.onholdOrUnholdParticipant({
                         participantId: [this.hostnumber.participantId],
                         conferenceId: (_c = this.hostnumber) === null || _c === void 0 ? void 0 : _c.conferenceId,
@@ -2584,10 +2536,6 @@ class CallProgressComponent {
                 }
                 else {
                     this.isConferenceCallHold = false;
-                    // const index = this.currentCallList.findIndex((item: any) => item.participantId == this.currentCall?.participantId);
-                    // if (index != -1) {
-                    //   // this.currentCallList[index].isHold = true;
-                    // }
                     yield this.onholdOrUnholdParticipant({
                         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],
                         conferenceId: (_h = this.currentCall) === null || _h === void 0 ? void 0 : _h.conferenceId,
@@ -2595,22 +2543,8 @@ class CallProgressComponent {
                         mute: ((_j = this.currentCall) === null || _j === void 0 ? void 0 : _j.mute) || false,
                         conference: ((_k = this.currentCall) === null || _k === void 0 ? void 0 : _k.isConference) || false
                     });
-                    // data.isHold = false;
                 }
             }
-            // let incomingCallData = this.currentCallList.filter((item: any) => item.isIncomingCall && item.isAcceptCall);
-            // if (this.currentCallList.length > 1) {
-            //   // this.call = await this.twilioService.connect('');
-            //   this.twilioService.addIncomingParticipant(data?.id, this.twilioService.conferenceCallInfo.conferenceId).subscribe((res: any) => {
-            //     console.log(res, 'bhhhhhhhhhhhhhhhhhhh')
-            //     this.incomeingCallSocketService.isCurrentIncomingCallList.push(data?.id || data?.participantId);
-            //     this.incomeingCallSocketService.pause();
-            //     data.isAcceptCall = true;
-            //     // this.currentCall = data;
-            //     this.setIncomingCallStatus(data)
-            //   })
-            // } else {
-            // this.currentCall = data;
             let payload = {
                 recordId: data === null || data === void 0 ? void 0 : data.id,
                 ipAddress: '',
@@ -2675,7 +2609,6 @@ class CallProgressComponent {
                         conference: true
                     });
                     this.callData = {
-                        // ...this.callData,
                         phone: phoneNumber,
                         displayNum: phoneNumber,
                         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,
@@ -2703,24 +2636,12 @@ class CallProgressComponent {
                                 conference: true
                             });
                         }
-                        else {
-                            yield this.onholdOrUnholdParticipant({
-                                participantId: [c === null || c === void 0 ? void 0 : c.participantId],
-                                conferenceId: c.conferenceId,
-                                hold: true,
-                                mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
-                                conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
-                            });
-                        }
                     }));
                     // Put current call on hold
                     this.isCallOnHold = true;
                     this.showContactsPanel = false;
                     this.showRingAnimation = true;
                     this.isConference = true;
-                    // const contactName = [contact?.firstName, contact?.middleName, contact?.lastName]
-                    //   .filter(Boolean)
-                    //   .join(' ');
                     // Add participant to the conference
                     let data = yield this.addParticipantToCall({
                         from: ((_k = this.callData) === null || _k === void 0 ? void 0 : _k.from) || ((_l = this.selectedCallerId) === null || _l === void 0 ? void 0 : _l.number),
@@ -2752,9 +2673,6 @@ class CallProgressComponent {
                         isConference: false
                     };
                     this.cdr.detectChanges();
-                    console.log(this.callData, 'this.callData');
-                    console.log('test111111');
-                    console.log("Participant added to conference:", phoneNumber);
                     this.showRingAnimation = false;
                 }
             }
@@ -2766,20 +2684,12 @@ class CallProgressComponent {
         });
     }
     CallToUnsavedNumber(number, isNewConference) {
-        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             try {
                 const isInvalid = yield this.isInvalidNumber(number);
                 if (isInvalid) {
                     return false;
                 }
-                // this.isSavedContactDialled();
-                // this.isPaymentDue = localStorage.getItem('paymentDue') === 'false' ? false : true;
-                // if (this.isPaymentDue) {
-                //   swal('Warning', 'Please note that your payment is due, To continue on your services kindly subscribe to use uninterrupted services.');
-                //   return false;
-                // }
-                // this.isTrialPeriodOver = localStorage.getItem('trialOver') === 'false' ? false : true;
                 let alreadyInCall = this.currentCallList.find((res) => res.to == number || res.from == number);
                 if (alreadyInCall) {
                     swal('Error', `Already ${number} number in this call.`);
@@ -2789,32 +2699,10 @@ class CallProgressComponent {
                     swal('Error', 'You can not dial this number');
                     return false;
                 }
-                // const hasPermission = await this.checkMicrophonePermission();
-                // if (!hasPermission) {
-                //   await this.askForMicrophonePermission();
-                //   return false;
-                // }
-                // this.isLoadershow = true;
-                // if (!this.selectedCallerId) {
-                //   this.shakeDedicatedBtn = true;
-                //   this.showDialAlert('Select a C2C number to call');
-                //   setTimeout(() => {
-                //     this.shakeDedicatedBtn = false;
-                //   }, 3000);
-                //   this.isLoadershow = false;
-                //   return false;
-                // }
-                // Clear displayNum if value is bound from previous call
-                // this.callData.displayNum = '';
-                // Get number to be dialed from backend
                 let contact = this.contacts.find((contact) => {
                     return contact.numbersList.some((num) => num.number === number);
                 });
                 number = yield this.getToNumber(number);
-                // if (this.terminateCall) {
-                //   this.terminateCall = false;
-                //   return;
-                // }
                 // Update call data in a single operation
                 const callData = {
                     name: contact === null || contact === void 0 ? void 0 : contact.firstName,
@@ -2826,50 +2714,39 @@ class CallProgressComponent {
                     from: this.selectedCallerId.number,
                     timestamp: new Date().toISOString()
                 };
-                // console.log('dd10')
-                // this.isCallInProgress = true;
                 console.log('call startted', callData);
                 if (isNewConference) {
-                    // if(this.currentCall.isConference) {
                     this.isNewAddedCall = true;
-                    let participentList = [];
-                    yield this.currentCallList.forEach((resData) => {
-                        if (!resData.isHold && (resData === null || resData === void 0 ? void 0 : resData.participantId)) {
-                            participentList.push(resData === null || resData === void 0 ? void 0 : resData.participantId);
-                        }
-                    });
-                    if (participentList === null || participentList === void 0 ? void 0 : participentList.length) {
+                    let ourNumberInfo = {};
+                    let callInfo = this.newIncomingCallsList.find((callInfo, i) => this.currentCall.conferenceId == callInfo.conferenceId);
+                    if (callInfo) {
+                        ourNumberInfo = callInfo.participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.to) == 'c2c_softphone_client') || (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.to) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'incoming-call')) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
+                    }
+                    if (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id) {
+                        console.log(ourNumberInfo, 'selfInfo');
                         yield this.onholdOrUnholdParticipant({
-                            participantId: participentList,
-                            conferenceId: this.currentCall.conferenceId,
+                            participantId: [ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.id],
+                            conferenceId: ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.conferenceId,
                             hold: true,
-                            mute: ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.mute) || false,
-                            conference: ((_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.isConference) || false
+                            mute: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.mute) || false,
+                            conference: (ourNumberInfo === null || ourNumberInfo === void 0 ? void 0 : ourNumberInfo.isConference) || false
                         });
-                        if ((_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.isConference) {
-                            this.isConferenceCallHold = true;
-                        }
+                        this.isConferenceCallHold = true;
                         this.startCall(callData, isNewConference);
                     }
                     else {
                         this.startCall(callData, isNewConference);
                     }
                     this.searchText = '';
-                    // }
                 }
                 else {
                     this.searchText = '';
                     this.callContact(number, true);
                 }
-                // this.callInitiated.emit({ ...this.callData });
                 return true;
             }
             catch (e) {
-                // console.error('Error in initiateCall:', e);
-                // this.isLoadershow = false;
                 this.showDialAlert('Failed to initiate call. Please try again.');
-                // console.log('dd11')
-                // this.isCallInProgress = false;
                 return false;
             }
         });
@@ -2924,195 +2801,133 @@ class CallProgressComponent {
     }
     getAllParticipants(conferenceSid) {
         this.extensionService.getAllParticipants(conferenceSid).subscribe((res) => {
-            this.allParticipentList = res.participants;
+            this.allParticipentList = res.participants.filter((resInfo) => !((resInfo === null || resInfo === void 0 ? void 0 : resInfo.to) == 'c2c_softphone_client' && (resInfo === null || resInfo === void 0 ? void 0 : resInfo.direction) == 'incoming-call'));
+            ;
             this.filteredParticipentList = this.allParticipentList;
             this.applyFilter();
-            // let index = this.contacts.findIndex((c:any)=> c?.numbersList[0]?.number == res?.to);
-            // if(index > -1){
-            //   this.contacts[index].isCallOnHold = true;
-            // }
-            // else {
-            //   res['IsConnected'] = true;
-            //   this.contacts.push(res)
-            // }
         });
     }
-    // acceptConcurrentCall(incomingCall: any) {
-    //   if (!incomingCall) return;
-    //   // Put current call on hold instead of disconnecting
-    //   if (this.call) {
-    //     this.heldCall = this.call;
-    //     this.isCallOnHold = true;
-    //     // Mute the held call
-    //     this.heldCall.mute(true);
-    //   }
-    //   incomingCall.accept();
-    //   this.call = incomingCall;
-    //   this.callData.phone = incomingCall.parameters['From'];
-    //   this.callData.name = incomingCall.customParameters?.get('name') || '-';
-    //   this.callData.img = incomingCall.customParameters?.get('image') || 'assets/images/user.jpg';
-    //   this.isConcurrentIncoming = false;
-    //   this.incomingCallDiv = false;
-    //   this.disbaleEndCallBtn = false;
-    //   // Reset timer for new call
-    //   this.stopTimer();
-    //   this.startTimer();
-    //   this.cdr.detectChanges();
-    // }
-    acceptConcurrentCall(incomingCall) {
-        if (!incomingCall)
-            return;
-        // Put current call on hold instead of disconnecting
-        // if (this.call) {
-        // //   this.heldCall = this.call;
-        //   this.isCallOnHold = true;
-        // //   // Mute the held call
-        // //   this.heldCall.mute(true);
-        // // }
-        // // Accept the new call
-        // incomingCall.accept();
-        // this.call = incomingCall;
-        // this.callData.phone = incomingCall.parameters['From'];
-        // this.callData.name = incomingCall.customParameters?.get('name') || '-';
-        // this.callData.img = incomingCall.customParameters?.get('image') || 'assets/images/user.jpg';
-        // this.isConcurrentIncoming = false;
-        // this.incomingCallDiv = false;
-        // this.disbaleEndCallBtn = false;
-        // // 🟢 Remove the accepted call from incoming list
-        // this.newIncomingCallsList = (this.newIncomingCallsList || []).filter(
-        //   (c: any) => c?.parameters?.CallSid !== incomingCall?.parameters?.CallSid
-        // );
-        // this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
-        // // 🕒 Reset timer for new call
-        // this.stopTimer();
-        // this.startTimer();
-        // this.cdr.detectChanges();
-    }
     swapCalls(callInfo, isConferenceCall) {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             // if (!this.heldCall || !this.call) return;
             console.log(this.call, 'this.call');
             console.log(this.heldCall, 'this.heldCall');
             console.log(this.currentCallList, 'this.currentCallList');
             console.log(callInfo, 'callInfo for swapCalls');
-            if ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.isConference) {
-                this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
-                    var _b;
-                    if ((c === null || c === void 0 ? void 0 : c.isConference) && !(c === null || c === void 0 ? void 0 : c.isHold) && ((_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.conferenceId) == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
-                        yield this.onholdOrUnholdParticipant({
-                            participantId: [c === null || c === void 0 ? void 0 : c.participantId],
-                            conferenceId: c.conferenceId,
-                            hold: true,
-                            mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
-                            conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
-                        });
-                        // this.isConferenceCallHold = true;
-                    }
-                    else if (isConferenceCall && (c === null || c === void 0 ? void 0 : c.conferenceId) == callInfo.conferenceId && c.isConference) {
-                        yield this.onholdOrUnholdParticipant({
-                            participantId: [c === null || c === void 0 ? void 0 : c.participantId],
-                            conferenceId: c.conferenceId,
-                            hold: false,
-                            mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
-                            conference: true
-                        });
-                        this.isConference = true;
-                        this.isConferenceCallHold = false;
-                    }
-                    else if ((callInfo === null || callInfo === void 0 ? void 0 : callInfo.isHold) && (c === null || c === void 0 ? void 0 : c.participantId) === (callInfo === null || callInfo === void 0 ? void 0 : callInfo.participantId)) {
-                        yield this.onholdOrUnholdParticipant({
-                            participantId: [c === null || c === void 0 ? void 0 : c.participantId],
-                            conferenceId: c.conferenceId,
-                            hold: false,
-                            mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
-                            conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
-                        });
-                    }
-                }));
-            }
-            else if (isConferenceCall) {
-                this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
-                    if ((c === null || c === void 0 ? void 0 : c.isConference) && (callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceId) == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
+            this.newIncomingCallsList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                if ((c === null || c === void 0 ? void 0 : c.conferenceId) == (callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceId)) {
+                    let participantInfo = c.participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.to) == 'c2c_softphone_client') || (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.to) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'incoming-call')) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
+                    if (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id) {
                         yield this.onholdOrUnholdParticipant({
-                            participantId: [c === null || c === void 0 ? void 0 : c.participantId],
-                            conferenceId: c.conferenceId,
+                            participantId: [participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id],
+                            conferenceId: participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.conferenceId,
                             hold: false,
-                            mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
-                            conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
-                        });
-                    }
-                    else {
-                        // c.isHold = true;
-                        yield this.onholdOrUnholdParticipant({
-                            participantId: [c === null || c === void 0 ? void 0 : c.participantId],
-                            conferenceId: c.conferenceId,
-                            hold: true,
-                            mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
-                            conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
+                            mute: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.mute) || false,
+                            conference: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.isConference) || false
                         });
+                        // this.isConferenceCallHold = true;
                     }
-                }));
-            }
-            else {
-                this.isConferenceCallHold = false;
-                this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
-                    if ((c === null || c === void 0 ? void 0 : c.participantId) && !(c === null || c === void 0 ? void 0 : c.isHold)) {
+                }
+                else {
+                    let participantInfo = c.participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.to) == 'c2c_softphone_client') || (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.to) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'incoming-call')) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
+                    if ((participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id) && !(participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.isHold)) {
                         yield this.onholdOrUnholdParticipant({
-                            participantId: [c === null || c === void 0 ? void 0 : c.participantId],
-                            conferenceId: c.conferenceId,
+                            participantId: [participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.id],
+                            conferenceId: participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.conferenceId,
                             hold: true,
-                            mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
-                            conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
-                        });
-                    }
-                    else if ((callInfo === null || callInfo === void 0 ? void 0 : callInfo.isHold) && (c === null || c === void 0 ? void 0 : c.participantId) === (callInfo === null || callInfo === void 0 ? void 0 : callInfo.participantId)) {
-                        yield this.onholdOrUnholdParticipant({
-                            participantId: [c === null || c === void 0 ? void 0 : c.participantId],
-                            conferenceId: c.conferenceId,
-                            hold: false,
-                            mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
-                            conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
+                            mute: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.mute) || false,
+                            conference: (participantInfo === null || participantInfo === void 0 ? void 0 : participantInfo.isConference) || false
                         });
+                        // this.isConferenceCallHold = true;
                     }
-                }));
-            }
-            // await this.onholdOrUnholdParticipant({
-            //   participantId: this.call?.callInfo?.participantId,
-            //   conferenceId: this.conferenceId,
-            //   hold: true
-            // });
-            // await this.onholdOrUnholdParticipant({
-            //   participantId: this.heldCall?.callInfo?.participantId,
-            //   conferenceId: this.conferenceId,
-            //   hold: false
-            // });
-            console.log('Swapping calls...');
-            // console.log('Before swap - Active call:', this.call.parameters['From']);
-            // console.log('Before swap - Held call:', this.heldCall.parameters['From']);
-            // Swap the calls
-            // const temp = this.call;
-            // this.call = this.heldCall;
-            // this.heldCall = temp;
-            // this.call.mute(false);
-            // this.heldCall.mute(true);
-            // Update UI with active call info - extract from call parameters
-            // const fromNumber = this.call.parameters['From'];
-            // const callerName = this.call.customParameters?.get('name') || '-';
-            // const callerImg = this.call.customParameters?.get('image') || 'assets/images/user.jpg';
-            // const displayNumber = this.call.customParameters?.get('displayNumber') || '-';
-            // Update callData to refresh the main UI
-            // this.callData = {
-            //   ...this.callData,
-            //   phone: fromNumber,
-            //   displayNum: (displayNumber && displayNumber !== '-') ? displayNumber : fromNumber,
-            //   name: (callerName && callerName !== '-') ? callerName : (this.callData?.name || fromNumber),
-            //   img: callerImg || this.callData?.img || 'assets/images/user.jpg'
-            // };
-            // console.log('After swap - Active call:', this.call.parameters['From']);
-            // console.log('After swap - Held call:', this.heldCall.parameters['From']);
-            // console.log('Updated callData:', this.callData);
-            console.log('this.currentCallList after swap', this.currentCallList);
+                }
+                if ((c === null || c === void 0 ? void 0 : c.isConference) && !(c === null || c === void 0 ? void 0 : c.isHold) && ((_a = this.currentCall) === null || _a === void 0 ? void 0 : _a.conferenceId) == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
+                    yield this.onholdOrUnholdParticipant({
+                        participantId: [c === null || c === void 0 ? void 0 : c.participantId],
+                        conferenceId: c.conferenceId,
+                        hold: true,
+                        mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
+                        conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
+                    });
+                    // this.isConferenceCallHold = true;
+                }
+            }));
+            // if (this.currentCall?.isConference) {
+            //   this.currentCallList.forEach(async (c: any) => {
+            //     if (c?.isConference && !c?.isHold && this.currentCall?.conferenceId == c?.conferenceId) {
+            //       await this.onholdOrUnholdParticipant({
+            //         participantId: [c?.participantId],
+            //         conferenceId: c.conferenceId,
+            //         hold: true,
+            //         mute: c?.mute || false,
+            //         conference: c?.isConference || false
+            //       });
+            //       // this.isConferenceCallHold = true;
+            //     } else if (isConferenceCall && c?.conferenceId == callInfo.conferenceId && c.isConference) {
+            //       await this.onholdOrUnholdParticipant({
+            //         participantId: [c?.participantId],
+            //         conferenceId: c.conferenceId,
+            //         hold: false,
+            //         mute: c?.mute || false,
+            //         conference: true
+            //       });
+            //       this.isConference = true;
+            //       this.isConferenceCallHold = false
+            //     } else if (callInfo?.isHold && c?.participantId === callInfo?.participantId) {
+            //       await this.onholdOrUnholdParticipant({
+            //         participantId: [c?.participantId],
+            //         conferenceId: c.conferenceId,
+            //         hold: false,
+            //         mute: c?.mute || false,
+            //         conference: c?.isConference || false
+            //       });
+            //     }
+            //   });
+            // } else if (isConferenceCall) {
+            //   this.currentCallList.forEach(async (c: any) => {
+            //     if (c?.isConference && callInfo?.conferenceId == c?.conferenceId) {
+            //       await this.onholdOrUnholdParticipant({
+            //         participantId: [c?.participantId],
+            //         conferenceId: c.conferenceId,
+            //         hold: false,
+            //         mute: c?.mute || false,
+            //         conference: c?.isConference || false
+            //       });
+            //     } else {
+            //       // c.isHold = true;
+            //       await this.onholdOrUnholdParticipant({
+            //         participantId: [c?.participantId],
+            //         conferenceId: c.conferenceId,
+            //         hold: true,
+            //         mute: c?.mute || false,
+            //         conference: c?.isConference || false
+            //       });
+            //     }
+            //   });
+            // } else {
+            //   this.isConferenceCallHold = false;
+            //   this.currentCallList.forEach(async (c: any) => {
+            //     if (c?.participantId && !c?.isHold) {
+            //       await this.onholdOrUnholdParticipant({
+            //         participantId: [c?.participantId],
+            //         conferenceId: c.conferenceId,
+            //         hold: true,
+            //         mute: c?.mute || false,
+            //         conference: c?.isConference || false
+            //       });
+            //     } else if (callInfo?.isHold && c?.participantId === callInfo?.participantId) {
+            //       await this.onholdOrUnholdParticipant({
+            //         participantId: [c?.participantId],
+            //         conferenceId: c.conferenceId,
+            //         hold: false,
+            //         mute: c?.mute || false,
+            //         conference: c?.isConference || false
+            //       });
+            //     }
+            //   });
+            // }
+            // console.log('this.currentCallList after swap', this.currentCallList);
             this.cdr.detectChanges();
         });
     }
@@ -3127,46 +2942,24 @@ class CallProgressComponent {
                 this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
                     if (c.conferenceId == this.currentCall.conferenceId) {
                         if (c === null || c === void 0 ? void 0 : c.participantId) {
-                            // c.isHold = false;
-                            yield this.onholdOrUnholdParticipant({
-                                participantId: [c === null || c === void 0 ? void 0 : c.participantId],
-                                conferenceId: c.conferenceId,
-                                hold: false,
-                                mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
-                                conference: true
-                            });
+                            // await this.onholdOrUnholdParticipant({
+                            //   participantId: [c?.participantId],
+                            //   conferenceId: c.conferenceId,
+                            //   hold: false,
+                            //   mute: c?.mute || false,
+                            //   conference: true
+                            // });
                             c.isConference = true;
-                            // } else if(c?.participantId && c.isIncomingCall){
-                            //   await this.twilioService.addIncomingParticipant(c?.participantId, this.conferenceId).subscribe((data: any) => {
-                            //       console.log(data,'bhhhhhhhhhhhhhhhhhhh')
-                            //     })
-                            //   c.isHold = false;
-                            //   c.isConference = true;
                         }
                         this.isConferenceCallHold = false;
                     }
                 }));
-                // await this.onholdOrUnholdParticipant({
-                //   participantId: this.heldCall?.callInfo?.participantId,
-                //   conferenceId: this.conferenceId,
-                //   hold: false
-                // });
-                // this.heldCall.mute(false);
-                // this.call.mute(false);
                 this.isCallOnHold = false;
                 this.isConference = true;
                 this.cdr.detectChanges();
             }
         });
     }
-    endHeldCall() {
-        // if (this.heldCall) {
-        //   this.heldCall.disconnect();
-        //   this.heldCall = undefined;
-        //   this.isCallOnHold = false;
-        //   this.cdr.detectChanges();
-        // }
-    }
     hasDetailedInfo(callData) {
         if (!callData)
             return false;
@@ -3185,57 +2978,6 @@ class CallProgressComponent {
         }
         return false;
     }
-    // onClickExpand(data?: any): void {
-    //   if (this.selectedIncomingCall === data && this.isClickExpand) {
-    //     this.isClickExpand = false;
-    //     this.selectedIncomingCall = null;
-    //     // this.selectedIncomingCallInfo.emit({});
-    //     return;
-    //   }
-    //   this.isClickExpand = true;
-    //   this.selectedIncomingCall = data;
-    //   if (this.selectedIncomingCall) {
-    //     this.selectedIncomingCall['isClickExpand'] = true;
-    //     if (this.newIncomingCallsList && this.newIncomingCallsList.length > 0) {
-    //       this.newIncomingCallsList.forEach((call: any) => {
-    //         if (call !== this.selectedIncomingCall) {
-    //           call['isClickExpand'] = false;
-    //         }
-    //       });
-    //     }
-    //     // this.selectedIncomingCallInfo.emit(this.selectedIncomingCall);
-    //     if (!this.selectedIncomingCall.userInfo || this.selectedIncomingCall.userInfo.status == 201) {
-    //       // this.getUserInformation(this.selectedIncomingCall);
-    //     }
-    //   }
-    // }
-    // getUserInformation(incomingCallData: any) {
-    //   let data = this.fromEntries(Array.from(incomingCallData.customParameters.entries()));
-    //   this.extensionService.getUserInformation(data['twilioAuthId']).subscribe(
-    //   response => {
-    //     setTimeout(()=>{
-    //       incomingCallData['userInfo']=response
-    //     }, 5000)
-    //   }, error => {
-    //     console.error('Error starting recording', error);
-    //   });
-    // }
-    // rejectConcurrentCall(incomingCall: any) {
-    //   if (!incomingCall) return;
-    //   if (incomingCall.reject) {
-    //     incomingCall.reject();
-    //   }
-    //   if (incomingCall.disconnect) incomingCall.disconnect();
-    //   // Remove from list
-    //   this.newIncomingCallsList = (this.newIncomingCallsList || []).filter((c: any) => c?.parameters?.CallSid !== incomingCall?.parameters?.CallSid);
-    //   this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
-    //   // If no more incoming, hide banner
-    //   if (!this.newIncomingCallsList || this.newIncomingCallsList.length === 0) {
-    //     this.isConcurrentIncoming = false;
-    //     this.incomingCallDiv = false;
-    //   }
-    //   this.cdr.detectChanges();
-    // }
     onCallInputs(num) {
         var _a;
         try {
@@ -3269,13 +3011,10 @@ class CallProgressComponent {
         }
     }
     closeIncomingCall(data) {
-        // this.incomingCallDiv = false;
         if (data.show) {
-            //this.showCallProgressEvent.emit()
             // handle incoming call accepted
             this.startTimer();
             this.disbaleEndCallBtn = false;
-            // this.call = data.call;
             this.isConcurrentIncoming = false;
             this.incomingCallDiv = false;
             const incomingDetail = this.extensionService.getCallSid();
@@ -3325,9 +3064,6 @@ class CallProgressComponent {
         this.incomingCallSid = details.callSid;
         this.incomingRecordCall = details.recordCall;
         sid = this.incomingCallSid ? this.incomingCallSid : this.callSid || ((_a = this.addRes) === null || _a === void 0 ? void 0 : _a.conferenceSid);
-        // if (!this.incomingRecordCall && !this.recordCall) {
-        //   return;
-        // }
         let payload = {
             "conferenceId": (_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.conferenceId,
         };
@@ -3341,9 +3077,6 @@ class CallProgressComponent {
         });
     }
     stopRecording() {
-        // if (!this.incomingRecordCall && !this.recordCall) {
-        //   return;
-        // }
         this.isRecording = false;
         this.isPaused = false;
         if (this.timerSubscription) {
@@ -3438,19 +3171,10 @@ class CallProgressComponent {
     getUserInformation(id) {
         this.extensionService.getUserInformation(id).subscribe((response) => {
             console.log(response, 'userInformation');
-            // this.selectedUserInfo = response.c2cInformation;
-            // if(this.isClickExpand){
-            //   this.checkTextHeight();
-            // }
         }, error => {
             console.error('Error starting recording', error);
         });
     }
-    // incomingCallsNewList(data: any) {
-    //   console.log(data, 'newIncomingCallsListOUR')
-    //   this.newIncomingCallsList = data;
-    //   this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
-    // }
     selectedIncomingCallInfo(data) {
         this.selectedIncomingCall = data;
     }
@@ -3527,14 +3251,9 @@ class CallProgressComponent {
         this.filteredList = this.contacts.filter((c) => {
             var _a, _b;
             return ((c === null || c === void 0 ? void 0 : c.firstName) || '').toLowerCase().includes(text) || ((c === null || c === void 0 ? void 0 : c.lastName) || '').toLowerCase().includes(text) ||
-                ((c === null || c === void 0 ? void 0 : c.middleName) || '').toLowerCase().includes(text) || ((c === null || c === void 0 ? void 0 : c.fullName) || '').toLowerCase().includes(text) ||
+                ((c === null || c === void 0 ? void 0 : c.middleName) || '').toLowerCase().includes(text) || ((c === null || c === void 0 ? void 0 : c.nickName) || '').toLowerCase().includes(text) ||
                 (((_a = c === null || c === void 0 ? void 0 : c.numbersList[0]) === null || _a === void 0 ? void 0 : _a.number) || '').toLowerCase().includes(text) || (((_b = c === null || c === void 0 ? void 0 : c.numbersList[1]) === null || _b === void 0 ? void 0 : _b.number) || '').toLowerCase().includes(text);
         });
-        // this.filteredParticipentList = this.allParticipentList.filter((c: any) => {
-        //   const name = (c.direction == 'outgoing-call' ? (c?.toName || '') : (c?.fromName || '')).toLowerCase();
-        //   const number = (c.direction == 'outgoing-call' ? ( c?.to || '') : (c?.from || '')).toLowerCase();
-        //   return name.includes(text) || number.includes(text);
-        // });
         this.filteredList.forEach((c) => {
             let index = this.currentCallList.findIndex((cc) => { var _a, _b; return (cc === null || cc === void 0 ? void 0 : cc.phone) == ((_a = c === null || c === void 0 ? void 0 : c.numbersList[0]) === null || _a === void 0 ? void 0 : _a.number) || (cc === null || cc === void 0 ? void 0 : cc.phone) == ((_b = c === null || c === void 0 ? void 0 : c.numbersList[1]) === null || _b === void 0 ? void 0 : _b.number); });
             if (index > -1) {
@@ -3554,6 +3273,45 @@ class CallProgressComponent {
     toggleText() {
         this.isExpanded = !this.isExpanded;
     }
+    // Call this when call disconnects
+    onCallDisconnected() {
+        this.showDisconnectModal = true;
+    }
+    endConference() {
+        var _a;
+        console.log('Conference Ended');
+        this.showDisconnectModal = false;
+        if ((_a = this.selectedConf) === null || _a === void 0 ? void 0 : _a.conferenceId) {
+            this.onEndCall(this.selectedConf, true);
+        }
+        else {
+            this.endCall(true);
+        }
+    }
+    leaveConference() {
+        var _a, _b, _c, _d, _e;
+        console.log('leaveTime', this.leaveReason);
+        this.showDisconnectModal = false;
+        if (this.isReasonChecked) {
+            let payload = { conferenceId: ((_a = this.selectedConf) === null || _a === void 0 ? void 0 : _a.conferenceId) || ((_b = this.hostnumber) === null || _b === void 0 ? void 0 : _b.conferenceId), time: this.convertHHMMToMinutes(this.leaveReason), timerDate: new Date().toString() };
+            this.extensionService.setTimerForEndConferenceCall(payload).subscribe((res) => { });
+        }
+        if ((_c = this.selectedConf) === null || _c === void 0 ? void 0 : _c.conferenceId) {
+            let conference = (_d = this.newIncomingCallsList) === null || _d === void 0 ? void 0 : _d.find((res) => { var _a; return (res === null || res === void 0 ? void 0 : res.conferenceId) == ((_a = this.selectedConf) === null || _a === void 0 ? void 0 : _a.conferenceId); });
+            let participentInfo = (_e = conference === null || conference === void 0 ? void 0 : conference.participants) === null || _e === void 0 ? void 0 : _e.find((participant) => ((this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.from)
+                && (participant === null || participant === void 0 ? void 0 : participant.to) === 'c2c_softphone_client') || (this.deviceNumberList.includes(participant === null || participant === void 0 ? void 0 : participant.to) && (participant === null || participant === void 0 ? void 0 : participant.direction) == 'incoming-call')) && !(participant === null || participant === void 0 ? void 0 : participant.isLeft));
+            if (conference === null || conference === void 0 ? void 0 : conference.id) {
+                this.onEndCall(participentInfo);
+            }
+        }
+        else {
+            this.onEndCall(this.hostnumber);
+        }
+    }
+    convertHHMMToMinutes(time) {
+        const [hours, minutes] = time.split(':').map(Number);
+        return (hours * 60) + minutes;
+    }
     ngOnDestroy() {
         this.callData.dial = false;
         if (this.timerSubscription) {
@@ -3562,10 +3320,10 @@ class CallProgressComponent {
     }
 }
 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 });
-CallProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallProgressComponent, selector: "lib-call-progress", inputs: { callData: "callData", selectedCallerId: "selectedCallerId", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList", callerIdList: "callerIdList", deviceId: "deviceId", conferenceCallInfo: "conferenceCallInfo" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated", isLoadershow: "isLoadershow", endIncomingCallEvent: "endIncomingCallEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n    <div class=\"call-container\" *ngIf=\"!isMinimised && currentCallList?.length\"\r\n        [ngClass]=\"{'collops': isCollops, 'incoming-call-container': isClickExpand, 'contacts-open': showContactsPanel }\">\r\n        <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\r\n            <!-- All type Call Hold list  -->\r\n            <div class=\"held-call-banner\"\r\n                *ngIf=\"currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)\">\r\n                <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n                    <div class=\"held-call-content\" *ngIf=\"conf?.isHold\">\r\n                        <div class=\"held-info\">\r\n                            <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\r\n                            <div class=\"held-caller\">\r\n                                <span class=\"held-label\">Hold</span>\r\n                                <span class=\"held-name\">Conference Call</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"held-actions\">\r\n                            <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': conf?.isHold }\" (click)=\"swapCalls(conf,true)\">\r\n                                <span class=\"material-symbols-outlined\" title=\"{{'Hold'}}\"> phone_paused </span>\r\n                            </button>\r\n                            <button class=\"conference-contact\" (click)=\"endCall(true)\">\r\n                                <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                            </button>\r\n                            <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\r\n                                (click)=\"toggleContactsPanel(conf)\">\r\n                                <i class=\"fa fa-angle-right\"></i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let heldCall of currentCallList\">\r\n                    <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold && !heldCall?.isConference\">\r\n                        <div class=\"held-info\">\r\n                            <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\r\n                            <div class=\"held-caller\">\r\n                                <span class=\"held-label\">Hold</span>\r\n                                <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\r\n                                <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"held-actions\">\r\n                            <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': heldCall?.isHold }\" (click)=\"swapCalls(heldCall)\">\r\n                                <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\"> phone_paused </span>\r\n                            </button>\r\n                            <button class=\"conference-contact\" (click)=\"onEndCall(heldCall)\">\r\n                                <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                            </button>\r\n                            <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" *ngIf=\"heldCall?.isIncomingCall\"\r\n                                (click)=\"onClickExpand(heldCall)\" [ngClass]=\"{'disabled': !heldCall?.businessNumber}\">\r\n                                <i class=\"fa fa-angle-right\"></i>\r\n                            </div>\r\n                            <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\r\n                                <span class=\"material-symbols-outlined swap-icon\">swap_vert</span>\r\n                            </button> -->\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall && !heldCall?.isAcceptCall\">\r\n                        <div class=\"held-info\">\r\n                            <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\r\n                            <div class=\"held-caller\">\r\n                                <span class=\"held-label\">Incoming Call</span>\r\n                                <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\r\n                                <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"held-actions\">\r\n                            <button class=\"banner-btn receive-btn\" *ngIf=\"!heldCall?.isAcceptCall\">\r\n                                <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\r\n                            </button>\r\n                            <button class=\"call-btn-wrapper banner-btn reject-btn\">\r\n                                <span class=\"material-symbols-outlined\" (click)=\"onEndCall(heldCall)\"> call_end\r\n                                </span>\r\n                            </button>\r\n                            <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\r\n                                (click)=\"onClickExpand(heldCall)\" [ngClass]=\"{'disabled': !heldCall?.businessNumber}\">\r\n                                <i class=\"fa fa-angle-right\"></i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Compact banners for concurrent incoming (one per call) -->\r\n            <!-- <ng-container *ngIf=\"currentCallList.length > 1 && !currentCall?.id\">\r\n                <div class=\"incoming-banners-container\" *ngIf=\"!isConference && currentCallList.length > 1\">\r\n                    <div class=\"\">\r\n                        <ng-container *ngFor=\"let inc of currentCallList; let i = index\">\r\n                            <div class=\"incoming-banner\" *ngIf=\"inc?.isIncomingCall && !inc?.isAcceptCall\"\r\n                                [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 70) + 'px' }\">\r\n                                <div class=\"incoming-banner-content\">\r\n                                    <div class=\"incoming-info\">\r\n                                        <span class=\"incom ing-label\">Incoming call</span>\r\n                                        <div class=\"incoming-caller\">\r\n                                            <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\r\n                                                inc?.customParameters?.get('name') || '-' }}</span>\r\n                                            <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\r\n                                                inc?.parameters?.From || '' }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"incoming-actions\">\r\n                                        <button class=\"banner-btn accept-btn\" (click)=\"add(inc)\">\r\n                                            <span class=\"material-symbols-outlined\">call</span>\r\n                                        </button>\r\n                                        <button class=\"banner-btn reject-btn\" (click)=\"onEndCall(inc)\">\r\n                                            <span class=\"material-symbols-outlined\">call_end</span>\r\n                                        </button>\r\n                                        <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\r\n                                            (click)=\"onClickExpand(inc)\" [ngClass]=\"{'disabled': !inc?.businessNumber}\">\r\n                                            <i class=\"fa fa-angle-right\"></i>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </ng-container> -->\r\n\r\n            <!-- For single incoming call -->\r\n            <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n                *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\r\n                <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown\r\n                        Number'}}</span>\r\n                </div>\r\n                <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                    <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img\" alt=\"\" width=\"120\" />\r\n                </div>\r\n                <div class=\"callerDetails\">\r\n                    <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown Number' }}</h1>\r\n                    <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n                </div>\r\n\r\n                <div class=\"call-action-btns mt-auto\">\r\n                    <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\" [disabled]=\"isIncomingCallBtnDisable\">\r\n                        <span class=\"material-symbols-outlined\" (click)=\"add(currentCallList[0])\"> call </span>\r\n                    </button>\r\n                    <button class=\"call-btn reject-btn\">\r\n                        <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\r\n                        </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- For single active call --> \r\n            <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference)\"\r\n                [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n\r\n                <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                    <img class=\"avatar-img\" [src]=\"currentCall?.img\" alt=\"\" width=\"120\" />\r\n                </div>\r\n                <div class=\"callerDetails\">\r\n                    <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\r\n                    </h1>\r\n                    <p>{{currentCall?.phone }}</p>\r\n                    <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n                </div>\r\n\r\n                <div class=\"record-action-btns\" *ngIf=\"!showKeypad\"\r\n                    [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n                    <div class=\"record-btn-container\">\r\n                        <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n                            [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n                            [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\"\r\n                            [disabled]=\"!currentCall?.isAcceptCall\">\r\n                            <span class=\"recording-icon\"></span>\r\n                        </button>\r\n                        <div class=\"pause-resume-btns\">\r\n                            <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n                                (click)=\"pauseRecording()\">\r\n                                <span class=\"material-symbols-outlined\"> pause </span>\r\n                            </button>\r\n                            <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n                                <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n                        {{ getFormattedTime() }}\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n                    <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n                        (keyup)=\"onCallInputEnter($event)\">\r\n                    <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n                        (click)=\"clearInputs()\">close_small</span>\r\n                </div>\r\n                <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n                    <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n                        {{key.num}}\r\n                        <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n                    <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\r\n                        <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\r\n                            [disabled]=\"isMergeCallAllowed() || currentCallList.length < 2\">\r\n                            <span>Merge</span>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"flex align-items-center justify-content-evenly mb-3\">\r\n                        <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n                            (click)=\"toggleMute()\">\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n\r\n                        </button>\r\n                        <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\">\r\n                            <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\r\n                            </span>\r\n                        </button>\r\n                        <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n                            (click)=\"toggleContactsPanel(currentCall)\">\r\n                            <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n                        </button>\r\n                    </div>\r\n\r\n                    <div>\r\n                        <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n                            (click)=\"endCall()\">\r\n                            <span class=\"material-symbols-outlined\"> call_end </span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- conference call view -->\r\n            <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n                <div class=\"conf-heading\">\r\n                    <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n                    <span class=\"conf-title\">Conference Call</span>\r\n                </div>\r\n\r\n                <div class=\"scroll-container\">\r\n                    <div class=\"scroll-text conf-name\">\r\n                        <ng-container *ngFor=\"let call of currentCallList; let i = index\">\r\n                            <ng-container *ngIf=\"call?.isConference\">\r\n                                <span *ngIf=\"i != 0\">&</span>\r\n                                {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n                <div class=\"conf-timer\">{{ timer }}</div>\r\n\r\n                <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\"\r\n                    [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n                    <div class=\"record-btn-container\">\r\n                        <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n                            [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n                            [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n                            <span class=\"recording-icon\"></span>\r\n                        </button>\r\n                        <div class=\"pause-resume-btns\">\r\n                            <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n                                (click)=\"pauseRecording()\">\r\n                                <span class=\"material-symbols-outlined\"> pause </span>\r\n                            </button>\r\n                            <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n                                <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n                        {{ getFormattedTime() }}\r\n                    </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n                    <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n                        (keyup)=\"onCallInputEnter($event)\">\r\n                    <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n                        (click)=\"clearInputs()\">close_small</span>\r\n                </div>\r\n                <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n                    <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n                        {{key.num}}\r\n                        <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"conf-actions\">\r\n                    <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute(true)\">\r\n                        <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\r\n                    </button>\r\n                    <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\r\n                        <span class=\"material-symbols-outlined\"> transition_dissolve </span>\r\n                    </button>\r\n                    <button class=\"circle-btn\" (click)=\"toggleContactsPanel(currentCall)\">\r\n                        <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n                    </button>\r\n                </div>\r\n\r\n                <div class=\"conf-end\">\r\n                    <button class=\"circle-btn danger\" (click)=\"endCall(true)\">\r\n                        <span class=\"material-symbols-outlined\"> call_end </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"wave-container\">\r\n                <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                    viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n                    <defs>\r\n                        <path id=\"gentle-wave\"\r\n                            d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n                    </defs>\r\n                    <g class=\"parallax\">\r\n                        <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                        <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n                        <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n                    </g>\r\n                </svg>\r\n            </div>\r\n        <!-- </ng-container> -->\r\n    </div>\r\n\r\n        <!-- Incoming call user details shown in model -->\r\n    <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n        <div class=\"mb-2 user-info-section\" >\r\n            <div class=\"text-center my-3\">\r\n                <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n            </div>\r\n            <div class=\"mb-3\">\r\n                <h5 class=\"text-white mb-1\">Name:</h5>\r\n                <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n            </div>\r\n            <div class=\"f-13\">\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Number:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Extension:</div>\r\n                        <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2\">Email: </div>\r\n                        <div>{{selectedUserInfo?.email}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2\">Subject:</div>\r\n                        <div class=\"ml-2 subject-text\" title=\"{{selectedUserInfo?.subject}}\">{{selectedUserInfo?.subject}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2 mb-1\">Image:</div>\r\n                        <div class=\"text-ellipsis\">\r\n                            <ng-container *ngIf=\"selectedUserInfo?.image && selectedUserInfo?.image !== '-'; else noImage\">\r\n                            <img src=\"{{selectedUserInfo?.image}}\" alt=\"\" width=\"150\"  class=\"ml-2\"/>\r\n                        </ng-container>\r\n                            <ng-template #noImage>\r\n                                <span class=\"ml-2\">No Image Available</span>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\" mb-4\">\r\n                    <div class=\"\">\r\n                        <div class=\"mb-1\">Message:</div>\r\n                        <div>\r\n                            <div class=\"text-container\" [class.expanded]=\"isExpanded\">{{selectedUserInfo?.message}}</div>\r\n                            <small class=\"toggle-btn\" *ngIf=\"showButton\" (click)=\"toggleText()\">{{ isExpanded ? 'See less' : 'See more' }}</small>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Point Name:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Source Name:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- contact list panel -->\r\n    <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n        <div class=\"contacts-header\">\r\n            <div class=\"title\">Participent</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n                <p></p>\r\n                <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel({}, true)\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#000000\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n                </span>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\r\n        <div class=\"search-bar p-3\">\r\n            <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n            <ng-container *ngFor=\"let c of filteredList\">\r\n                <div class=\"contact-item\" *ngIf=\"isDirectCallOptionShow && searchText\">\r\n                    <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n                    <div class=\"contact-info\">\r\n                        <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n                        <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number)}}</div>\r\n                    </div>\r\n                    <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(c)\" *ngIf=\"!c?.IsConnected\" title=\"Add to conference call\">\r\n                        <span class=\"material-symbols-outlined\"> add </span>\r\n                    </button>\r\n                    <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(c?.numbersList[0]?.number, true)\" *ngIf=\"!c?.IsConnected\" title=\"New Call\">\r\n                        <span class=\"material-symbols-outlined\"> call </span>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!filteredList.length\">\r\n                <div class=\"contact-item\" *ngIf=\"searchText\">\r\n                    <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\r\n                    <div class=\"contact-info\">\r\n                        <div class=\"contact-title\">{{ searchText }}</div>\r\n                    </div>\r\n                    <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(searchText, true)\" title=\"Add to conference call\">\r\n                        <span class=\"material-symbols-outlined\"> add </span>\r\n                    </button>\r\n                    <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(searchText, true)\" title=\"New Call\">\r\n                        <span class=\"material-symbols-outlined\"> call </span>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"contacts-list\">\r\n                <div class=\"px-2\">\r\n                    <h5 class=\"mb-0 title\">In This Call</h5>\r\n                </div>\r\n                <hr class=\"mb-2 mt-1\">\r\n                <div class=\"contact-item\" *ngFor=\"let c of filteredParticipentList\">\r\n                    <ng-container *ngIf=\"c?.to == 'client' else participentInfo\">\r\n                        <img class=\"contact-avatar\" [src]=\"c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">You\r\n                            </div>\r\n                            <div class=\"contact-title\">{{ c?.from }}</div>\r\n                        </div>\r\n                        <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\"\r\n                            (click)=\"onMuteUser(c)\">\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n                        </button>\r\n                        <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\">\r\n                            <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                    </ng-container>\r\n                    <ng-template #participentInfo>\r\n                        <img class=\"contact-avatar\" [src]=\"c?.direction == 'outgoing-call' ? c?.toImage : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\r\n                            </div>\r\n                            <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n                                'Unknown'}}</div>\r\n                        </div>\r\n                        <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\"\r\n                            (click)=\"onMuteUser(c)\">\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n                        </button>\r\n                        <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\">\r\n                            <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                    </ng-template>\r\n                </div>\r\n                <hr class=\"m-2\">\r\n                <div class=\"mt-3 px-2\">\r\n                    <h5 class=\"mb-0 title\">Participent added to the call</h5>\r\n                </div>\r\n                <hr class=\"mb-2 mt-1\">  \r\n                <ng-container *ngFor=\"let c of filteredList\">\r\n                    <div class=\"contact-item\" *ngIf=\"!c?.IsConnected && false\">\r\n                        <img class=\"contact-avatar\" [src]=\"c?.img ? c?.img : 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n                            <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number)}}</div>\r\n                        </div>\r\n                        <button class=\"contact-call-btn\" (click)=\"callContact(c)\" *ngIf=\"!c?.IsConnected\">\r\n                            <span class=\"material-symbols-outlined\"> call </span>\r\n                            <span class=\"label\">Call</span>\r\n                        </button>\r\n                        <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\" *ngIf=\"c?.IsConnected\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\" *ngIf=\"c?.IsConnected\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let c of leftParticipent[currentCall?.conferenceId]\">\r\n                    <div class=\"contact-item\">\r\n                        <img class=\"contact-avatar\" [src]=\"c.direction == 'outgoing-call' && c?.toImage ? c?.toImage : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">{{c.direction == 'outgoing-call' ? c?.toName : c?.fromName || 'Unknown number'}}</div>\r\n                            <div class=\"contact-title\">{{c.direction == 'outgoing-call' ? c?.to : c?.from}}</div>\r\n                        </div>\r\n                        <button class=\"contact-call-btn contact-add-btn \" (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\" >\r\n                            <span class=\"material-symbols-outlined\"> add </span>\r\n                            <span class=\"label\">Add</span>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\r\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\r\n    <div style=\"display: flex; width: 100%\">\r\n        <div>\r\n            <div class=\"min-call-animation\" id=\"call-avatar\">\r\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\r\n            </div>\r\n        </div>\r\n        <div>\r\n            <div class=\"min-callerDetails\">\r\n                <div class=\"name\">\r\n                    {{callData.name}}\r\n                </div>\r\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"min-btn-container\">\r\n        <div class=\"min-timer\">{{timer}}</div>\r\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\r\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n        </button>\r\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\r\n            <span class=\"material-symbols-outlined\"> call_end </span>\r\n        </button>\r\n    </div>\r\n</div>", 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:9px;width:43px;height:43px}.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:40px;height:40px;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:6px;background:#727070;color:#fff;border:none;border-radius:50%;padding:8px 9px;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:6px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:8px 9px;cursor:pointer}.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"] }] });
+CallProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallProgressComponent, selector: "lib-call-progress", inputs: { callData: "callData", selectedCallerId: "selectedCallerId", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList", callerIdList: "callerIdList", deviceId: "deviceId", callAction: "callAction", conferenceCallInfo: "conferenceCallInfo" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated", isLoadershow: "isLoadershow", endIncomingCallEvent: "endIncomingCallEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex\">\r\n    <div class=\"call-container\" *ngIf=\"!isMinimised && currentCallList?.length\"\r\n        [ngClass]=\"{'collops': isCollops, 'incoming-call-container': isClickExpand, 'contacts-open': showContactsPanel }\">\r\n        <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\r\n\r\n        <!-- All type Call Hold list  -->\r\n        <div class=\"held-call-banner\"\r\n            *ngIf=\"currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)\">\r\n            <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n                <div class=\"held-call-content\" *ngIf=\"conf?.isConferenceHold\">\r\n                    <div class=\"held-info\">\r\n                        <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\r\n                        <div class=\"held-caller\">\r\n                            <span class=\"held-label\">Hold</span>\r\n                            <span class=\"held-name\">Conference Call</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"held-actions\">\r\n                        <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': conf?.isConferenceHold }\"\r\n                            (click)=\"swapCalls(conf,true)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"{{'Hold'}}\"> phone_paused </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"endConfereneceCall(conf)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                        <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n                            <i class=\"fa fa-angle-right\"></i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <!-- For single incoming call -->\r\n        <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n            *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\r\n            <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown\r\n                    Number'}}</span>\r\n            </div>\r\n            <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img || 'assets/images/user.jpg'\" alt=\"\"\r\n                    width=\"120\" />\r\n            </div>\r\n            <div class=\"callerDetails\">\r\n                <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown\r\n                    Number' }}</h1>\r\n                <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n            </div>\r\n\r\n            <div class=\"call-action-btns mt-auto\">\r\n                <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\"\r\n                    [disabled]=\"isIncomingCallBtnDisable\" (click)=\"add(currentCallList[0])\">\r\n                    <span class=\"material-symbols-outlined\" > call </span>\r\n                </button>\r\n                <button class=\"call-btn reject-btn\">\r\n                    <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\r\n                    </span>\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- For single active call -->\r\n        <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference) && currentCall?.isAcceptCall\"\r\n            [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n\r\n            <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                <img class=\"avatar-img\" [src]=\"currentCall?.img || 'assets/images/user.jpg'\" alt=\"\" width=\"120\" />\r\n            </div>\r\n            <div class=\"callerDetails\">\r\n                <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\r\n                </h1>\r\n                <p>{{currentCall?.phone }}</p>\r\n                <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n            </div>\r\n\r\n            <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n                <div class=\"record-btn-container\">\r\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\"\r\n                        [disabled]=\"!currentCall?.isAcceptCall\">\r\n                        <span class=\"recording-icon\"></span>\r\n                    </button>\r\n                    <div class=\"pause-resume-btns\">\r\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n                            (click)=\"pauseRecording()\">\r\n                            <span class=\"material-symbols-outlined\"> pause </span>\r\n                        </button>\r\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n                    {{ getFormattedTime() }}\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n                    (keyup)=\"onCallInputEnter($event)\">\r\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n                    (click)=\"clearInputs()\">close_small</span>\r\n            </div>\r\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n                    {{key.num}}\r\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n                <!-- <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\r\n                    <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\r\n                        [disabled]=\"isMergeCallAllowed() || currentCallList.length < 2\">\r\n                        <span>Merge</span>\r\n                    </button>\r\n                </div> -->\r\n                <div class=\"flex align-items-center justify-content-evenly mb-3\">\r\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"toggleMute()\">\r\n                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n\r\n                    </button>\r\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\">\r\n                        <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\r\n                        </span>\r\n                    </button>\r\n                    <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n                        (click)=\"toggleContactsPanel(currentCall)\">\r\n                        <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n                    </button>\r\n                </div>\r\n\r\n                <div>\r\n                    <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"endCall()\">\r\n                        <span class=\"material-symbols-outlined\"> call_end </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- conference call view -->\r\n        <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n            <div class=\"conf-heading\">\r\n                <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n                <span class=\"conf-title\">Conference Call</span>\r\n            </div>\r\n\r\n            <div class=\"scroll-container\">\r\n                <div class=\"scroll-text conf-name\">\r\n                    <ng-container *ngFor=\"let call of currentCallList; let i = index\">\r\n                        <ng-container *ngIf=\"!call?.isConferenceHold\">\r\n                            <span *ngIf=\"i != 0\">&</span>\r\n                            {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n            <div class=\"conf-timer\">{{ timer }}</div>\r\n            <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\"\r\n                [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n                <div class=\"record-btn-container\">\r\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n                        <span class=\"recording-icon\"></span>\r\n                    </button>\r\n                    <div class=\"pause-resume-btns\">\r\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n                            (click)=\"pauseRecording()\">\r\n                            <span class=\"material-symbols-outlined\"> pause </span>\r\n                        </button>\r\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n                    {{ getFormattedTime() }}\r\n                </div>\r\n            </div>\r\n\r\n            <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n                    (keyup)=\"onCallInputEnter($event)\">\r\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n                    (click)=\"clearInputs()\">close_small</span>\r\n            </div>\r\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n                    {{key.num}}\r\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"conf-actions\">\r\n                <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute(true)\">\r\n                    <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\r\n                </button>\r\n                <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\r\n                    <span class=\"material-symbols-outlined\"> transition_dissolve </span>\r\n                </button>\r\n                <button class=\"circle-btn\" (click)=\"toggleContactsPanel(currentCall)\">\r\n                    <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"conf-end\">\r\n                <button class=\"circle-btn danger\" (click)=\"endConfereneceCall()\">\r\n                    <span class=\"material-symbols-outlined\"> call_end </span>\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"wave-container\">\r\n            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n                <defs>\r\n                    <path id=\"gentle-wave\"\r\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n                </defs>\r\n                <g class=\"parallax\">\r\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n                </g>\r\n            </svg>\r\n        </div>\r\n        <!-- </ng-container> -->\r\n    </div>\r\n\r\n    <!-- Incoming call user details shown in model -->\r\n    <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n        <div class=\"mb-2 user-info-section\">\r\n            <div class=\"text-center my-3\">\r\n                <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n            </div>\r\n            <div class=\"mb-3\">\r\n                <h5 class=\"text-white mb-1\">Name:</h5>\r\n                <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n            </div>\r\n            <div class=\"f-13\">\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Number:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Extension:</div>\r\n                        <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2\">Email: </div>\r\n                        <div>{{selectedUserInfo?.email}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2\">Subject:</div>\r\n                        <div class=\"ml-2 subject-text\" title=\"{{selectedUserInfo?.subject}}\">\r\n                            {{selectedUserInfo?.subject}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2 mb-1\">Image:</div>\r\n                        <div class=\"text-ellipsis\">\r\n                            <ng-container\r\n                                *ngIf=\"selectedUserInfo?.image && selectedUserInfo?.image !== '-'; else noImage\">\r\n                                <img src=\"{{selectedUserInfo?.image}}\" alt=\"\" width=\"150\" class=\"ml-2\" />\r\n                            </ng-container>\r\n                            <ng-template #noImage>\r\n                                <span class=\"ml-2\">No Image Available</span>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\" mb-4\">\r\n                    <div class=\"\">\r\n                        <div class=\"mb-1\">Message:</div>\r\n                        <div>\r\n                            <div class=\"text-container\" [class.expanded]=\"isExpanded\">{{selectedUserInfo?.message}}\r\n                            </div>\r\n                            <small class=\"toggle-btn\" *ngIf=\"showButton\" (click)=\"toggleText()\">{{ isExpanded ? 'See\r\n                                less' : 'See more' }}</small>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Point Name:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Source Name:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- contact list panel -->\r\n    <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n        <div class=\"contacts-header\">\r\n            <div>Participant</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n                <p></p>\r\n                <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel({}, true)\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                        fill=\"#000000\">\r\n                        <path\r\n                            d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n                    </svg>\r\n                </span>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\r\n        <div class=\"search-bar p-3 position-relative\">\r\n            <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n            <div class=\"search-contacts-list\">\r\n                <ng-container *ngFor=\"let c of filteredList\">\r\n                    <div class=\"contact-item\" *ngIf=\"searchText\">\r\n                        <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n                            <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number)}}</div>\r\n                        </div>\r\n                        <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(c)\"\r\n                            *ngIf=\"!c?.IsConnected\" title=\"Add to conference call\">\r\n                            <span class=\"material-symbols-outlined\"> add </span>\r\n                        </button>\r\n                        <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(c?.numbersList[0]?.number, true)\"\r\n                            *ngIf=\"!c?.IsConnected\" title=\"New Call\">\r\n                            <span class=\"material-symbols-outlined\"> call </span>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!filteredList.length && isDirectCallOptionShow && searchText\">\r\n                    <div class=\"contact-item\">\r\n                        <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-title\">{{ searchText }}</div>\r\n                        </div>\r\n                        <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"CallToUnsavedNumber(searchText)\"\r\n                            title=\"Add to conference call\">\r\n                            <span class=\"material-symbols-outlined\"> add </span>\r\n                        </button>\r\n                        <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(searchText, true)\"\r\n                            title=\"New Call\">\r\n                            <span class=\"material-symbols-outlined\"> call </span>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"contacts-list\">\r\n            <div class=\"px-2\">\r\n                <h5 class=\"mb-0 title\">In This Call</h5>\r\n            </div>\r\n            <hr class=\"mb-2 mt-1\">\r\n            <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n                <div class=\"contact-item\" *ngIf=\"!c?.isLeft\">\r\n                    <ng-container *ngIf=\"c?.to == 'client' else participentInfo\">\r\n                        <img class=\"contact-avatar\" [src]=\"c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">You\r\n                            </div>\r\n                            <div class=\"contact-title\">{{ c?.from }}</div>\r\n                        </div>\r\n                        <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\" (click)=\"onMuteUser(c)\">\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n                        </button>\r\n                        <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\"\r\n                            (click)=\"onHoldCall(c)\">\r\n                            <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused\r\n                            </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                    </ng-container>\r\n                    <ng-template #participentInfo>\r\n                        <img class=\"contact-avatar\"\r\n                            [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n                            alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' :\r\n                                c?.fromName || 'Unknown'}}\r\n                            </div>\r\n                            <div class=\"contact-title\" *ngIf=\"c?.to != 'c2c_softphone_client'\">{{ c?.direction ==\r\n                                'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n                                'Unknown'}}</div>\r\n                            <div class=\"contact-title\" *ngIf=\"c?.to == 'c2c_softphone_client'\">{{ c?.from ||\r\n                                'Unknown'}}</div>\r\n                            <div class=\"d-flex\" *ngIf=\"c?.from == hostnumber?.from && c?.to == 'c2c_softphone_client'\">\r\n                                <span class=\"organizer-label\">Organizer</span>\r\n                            </div>\r\n                        </div>\r\n                        <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\" (click)=\"onMuteUser(c)\">\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n                        </button>\r\n                        <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\"\r\n                            (click)=\"onHoldCall(c)\" *ngIf=\"c?.to != 'c2c_softphone_client'\">\r\n                            <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused\r\n                            </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\"\r\n                            *ngIf=\"c?.to != 'c2c_softphone_client'\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"endConfereneceCall()\"\r\n                            *ngIf=\"c?.to == 'c2c_softphone_client' && deviceNumberList.includes(c?.from)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                    </ng-template>\r\n                </div>\r\n            </ng-container>\r\n            <hr class=\"m-2\">\r\n            <div class=\"mt-3 px-2\">\r\n                <h5 class=\"mb-0 title\">Participant added to the call</h5>\r\n            </div>\r\n            <hr class=\"mb-2 mt-1\">\r\n            <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n                <div class=\"contact-item\" *ngIf=\"c?.isLeft\">\r\n                    <img class=\"contact-avatar\"\r\n                        [src]=\"c.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n                        alt=\"\" />\r\n                    <div class=\"contact-info\">\r\n                        <div class=\"contact-name\">{{c.direction == 'outgoing-call' ? c?.toName : c?.fromName || 'Unknown\r\n                            number'}}</div>\r\n                        <div class=\"contact-title\">{{c.direction == 'outgoing-call' ? c?.to : c?.from}}</div>\r\n                    </div>\r\n                    <button class=\"contact-call-btn contact-add-btn \"\r\n                        (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\">\r\n                        <span class=\"material-symbols-outlined\"> add </span>\r\n                        <span class=\"label\">Rejoin</span>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\r\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\r\n    <div style=\"display: flex; width: 100%\">\r\n        <div>\r\n            <div class=\"min-call-animation\" id=\"call-avatar\">\r\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\r\n            </div>\r\n        </div>\r\n        <div>\r\n            <div class=\"min-callerDetails\">\r\n                <div class=\"name\">\r\n                    {{callData.name}}\r\n                </div>\r\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"min-btn-container\">\r\n        <div class=\"min-timer\">{{timer}}</div>\r\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\r\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n        </button>\r\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\r\n            <span class=\"material-symbols-outlined\"> call_end </span>\r\n        </button>\r\n    </div>\r\n</div>\r\n<!-- Call Disconnect Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showDisconnectModal\">\r\n    <div class=\"modal-content p-3\">\r\n        <div class=\"contacts-header p-0 pb-2\">\r\n            <h4 class=\"title mb-0\">Call Disconnected</h4>\r\n            <div class=\"d-flex justify-content-between\">\r\n                <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDisconnectModal = false\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                        fill=\"#000000\">\r\n                        <path\r\n                            d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n                    </svg>\r\n                </span>\r\n            </div>\r\n        </div>\r\n        <div class=\"contant-body mb-2\">\r\n            <p class=\"mt-2\">\r\n                Exiting this call will not end the conference. The session will continue, and charges will incur to\r\n                your\r\n                account.\r\n            </p>\r\n        </div>\r\n        <div class=\"button-group\">\r\n            <div class=\"text-start d-flex align-items-center\">\r\n                <label class=\"d-flex align-items-center mb-0 mr-2\">\r\n                    <input type=\"checkbox\" [(ngModel)]=\"isReasonChecked\" class=\"me-2\" />\r\n                </label>\r\n\r\n                <input type=\"time\" class=\"form-control\" placeholder=\"Enter reason\" [(ngModel)]=\"leaveReason\"\r\n                    [disabled]=\"!isReasonChecked\" />\r\n            </div>\r\n            <button class=\"btn end-btn\" (click)=\"leaveConference()\">\r\n                Leave\r\n            </button>\r\n            <button class=\"btn end-btn\" (click)=\"endConference()\">\r\n                End All\r\n            </button>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;justify-content:center;align-items:center;z-index:1000;flex-flow:column;overflow:hidden}.call-to-text{padding:6px 10px;border:1px solid #c2c2c2;border-radius:20px;font-size:13px}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important}.active-call{width:385px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.search-bar input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;outline:none;margin-bottom:10px}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}.callerDetails h1{width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.tx-black,.title{color:#000!important}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}.receive-btn{background-color:#28a745!important;color:#fff!important}.receive-btn span{color:#fff!important}.scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;padding-left:100%;animation:scroll-left 12s linear infinite;font-size:16px}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:-4px;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted #4b4b4b}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{width:100%;padding:5px 8px;height:100%;gap:8px;overflow-y:auto}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.incoming-banner{top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.modal-content .contacts-header{height:40px}.search-contacts-list{max-height:196px;overflow:auto;position:absolute;width:91%;background:white;z-index:1000}.contant-body p{font-size:14px;color:#5f6061}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.disabled{opacity:.5;pointer-events:none}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:37px;height:37px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:8px;cursor:pointer}.contact-add-btn{background-color:#2ecc71!important}.conference-hold-contact{display:inline-flex;align-items:center;gap:5px;background:#727070;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.user-info-section{width:100%;height:100%;overflow-y:auto;overflow-x:hidden!important}.user-info-section::-webkit-scrollbar{display:none}.toggle-btn{cursor:pointer}.text-container{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease}.text-container.expanded{-webkit-line-clamp:unset}.userName{font-family:FontAwesome}.subject-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.conference-contact{display:inline-flex;align-items:center;gap:5px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.organizer-label{padding:1px 5px;font-size:11px;border-radius:10px;border:1px solid #a0a0a0;margin-top:2px;background:#fcfcfc}.custom-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000;border-radius:21px}.modal-content{background:#ffffff;padding:25px;border-radius:8px;width:350px;text-align:center}.title{margin-bottom:15px;color:#d9534f}.message{margin-bottom:20px}.button-group{display:flex;justify-content:space-between}.btn{padding:8px 15px;border:none;border-radius:5px;cursor:pointer;font-weight:500}.end-btn{background-color:#dc3545;color:#fff;display:flex;align-items:center;font-size:13px}.leave-btn{background-color:#007bff;color:#fff}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center;margin-top:35px}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-call-progress', template: "<div class=\"d-flex\">\r\n    <div class=\"call-container\" *ngIf=\"!isMinimised && currentCallList?.length\"\r\n        [ngClass]=\"{'collops': isCollops, 'incoming-call-container': isClickExpand, 'contacts-open': showContactsPanel }\">\r\n        <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\r\n            <!-- All type Call Hold list  -->\r\n            <div class=\"held-call-banner\"\r\n                *ngIf=\"currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)\">\r\n                <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n                    <div class=\"held-call-content\" *ngIf=\"conf?.isHold\">\r\n                        <div class=\"held-info\">\r\n                            <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\r\n                            <div class=\"held-caller\">\r\n                                <span class=\"held-label\">Hold</span>\r\n                                <span class=\"held-name\">Conference Call</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"held-actions\">\r\n                            <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': conf?.isHold }\" (click)=\"swapCalls(conf,true)\">\r\n                                <span class=\"material-symbols-outlined\" title=\"{{'Hold'}}\"> phone_paused </span>\r\n                            </button>\r\n                            <button class=\"conference-contact\" (click)=\"endCall(true)\">\r\n                                <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                            </button>\r\n                            <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\r\n                                (click)=\"toggleContactsPanel(conf)\">\r\n                                <i class=\"fa fa-angle-right\"></i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let heldCall of currentCallList\">\r\n                    <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold && !heldCall?.isConference\">\r\n                        <div class=\"held-info\">\r\n                            <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\r\n                            <div class=\"held-caller\">\r\n                                <span class=\"held-label\">Hold</span>\r\n                                <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\r\n                                <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"held-actions\">\r\n                            <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': heldCall?.isHold }\" (click)=\"swapCalls(heldCall)\">\r\n                                <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\"> phone_paused </span>\r\n                            </button>\r\n                            <button class=\"conference-contact\" (click)=\"onEndCall(heldCall)\">\r\n                                <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                            </button>\r\n                            <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" *ngIf=\"heldCall?.isIncomingCall\"\r\n                                (click)=\"onClickExpand(heldCall)\" [ngClass]=\"{'disabled': !heldCall?.businessNumber}\">\r\n                                <i class=\"fa fa-angle-right\"></i>\r\n                            </div>\r\n                            <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\r\n                                <span class=\"material-symbols-outlined swap-icon\">swap_vert</span>\r\n                            </button> -->\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall && !heldCall?.isAcceptCall\">\r\n                        <div class=\"held-info\">\r\n                            <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\r\n                            <div class=\"held-caller\">\r\n                                <span class=\"held-label\">Incoming Call</span>\r\n                                <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\r\n                                <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"held-actions\">\r\n                            <button class=\"banner-btn receive-btn\" *ngIf=\"!heldCall?.isAcceptCall\">\r\n                                <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\r\n                            </button>\r\n                            <button class=\"call-btn-wrapper banner-btn reject-btn\">\r\n                                <span class=\"material-symbols-outlined\" (click)=\"onEndCall(heldCall)\"> call_end\r\n                                </span>\r\n                            </button>\r\n                            <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\r\n                                (click)=\"onClickExpand(heldCall)\" [ngClass]=\"{'disabled': !heldCall?.businessNumber}\">\r\n                                <i class=\"fa fa-angle-right\"></i>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n            <!-- Compact banners for concurrent incoming (one per call) -->\r\n            <!-- <ng-container *ngIf=\"currentCallList.length > 1 && !currentCall?.id\">\r\n                <div class=\"incoming-banners-container\" *ngIf=\"!isConference && currentCallList.length > 1\">\r\n                    <div class=\"\">\r\n                        <ng-container *ngFor=\"let inc of currentCallList; let i = index\">\r\n                            <div class=\"incoming-banner\" *ngIf=\"inc?.isIncomingCall && !inc?.isAcceptCall\"\r\n                                [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 70) + 'px' }\">\r\n                                <div class=\"incoming-banner-content\">\r\n                                    <div class=\"incoming-info\">\r\n                                        <span class=\"incom ing-label\">Incoming call</span>\r\n                                        <div class=\"incoming-caller\">\r\n                                            <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\r\n                                                inc?.customParameters?.get('name') || '-' }}</span>\r\n                                            <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\r\n                                                inc?.parameters?.From || '' }}</span>\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"incoming-actions\">\r\n                                        <button class=\"banner-btn accept-btn\" (click)=\"add(inc)\">\r\n                                            <span class=\"material-symbols-outlined\">call</span>\r\n                                        </button>\r\n                                        <button class=\"banner-btn reject-btn\" (click)=\"onEndCall(inc)\">\r\n                                            <span class=\"material-symbols-outlined\">call_end</span>\r\n                                        </button>\r\n                                        <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\r\n                                            (click)=\"onClickExpand(inc)\" [ngClass]=\"{'disabled': !inc?.businessNumber}\">\r\n                                            <i class=\"fa fa-angle-right\"></i>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n            </ng-container> -->\r\n\r\n            <!-- For single incoming call -->\r\n            <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n                *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\r\n                <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown\r\n                        Number'}}</span>\r\n                </div>\r\n                <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                    <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img\" alt=\"\" width=\"120\" />\r\n                </div>\r\n                <div class=\"callerDetails\">\r\n                    <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown Number' }}</h1>\r\n                    <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n                </div>\r\n\r\n                <div class=\"call-action-btns mt-auto\">\r\n                    <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\" [disabled]=\"isIncomingCallBtnDisable\">\r\n                        <span class=\"material-symbols-outlined\" (click)=\"add(currentCallList[0])\"> call </span>\r\n                    </button>\r\n                    <button class=\"call-btn reject-btn\">\r\n                        <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\r\n                        </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- For single active call --> \r\n            <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference)\"\r\n                [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n\r\n                <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                    <img class=\"avatar-img\" [src]=\"currentCall?.img\" alt=\"\" width=\"120\" />\r\n                </div>\r\n                <div class=\"callerDetails\">\r\n                    <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\r\n                    </h1>\r\n                    <p>{{currentCall?.phone }}</p>\r\n                    <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n                </div>\r\n\r\n                <div class=\"record-action-btns\" *ngIf=\"!showKeypad\"\r\n                    [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n                    <div class=\"record-btn-container\">\r\n                        <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n                            [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n                            [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\"\r\n                            [disabled]=\"!currentCall?.isAcceptCall\">\r\n                            <span class=\"recording-icon\"></span>\r\n                        </button>\r\n                        <div class=\"pause-resume-btns\">\r\n                            <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n                                (click)=\"pauseRecording()\">\r\n                                <span class=\"material-symbols-outlined\"> pause </span>\r\n                            </button>\r\n                            <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n                                <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n                        {{ getFormattedTime() }}\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n                    <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n                        (keyup)=\"onCallInputEnter($event)\">\r\n                    <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n                        (click)=\"clearInputs()\">close_small</span>\r\n                </div>\r\n                <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n                    <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n                        {{key.num}}\r\n                        <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n                    <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\r\n                        <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\r\n                            [disabled]=\"isMergeCallAllowed() || currentCallList.length < 2\">\r\n                            <span>Merge</span>\r\n                        </button>\r\n                    </div>\r\n                    <div class=\"flex align-items-center justify-content-evenly mb-3\">\r\n                        <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n                            (click)=\"toggleMute()\">\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n\r\n                        </button>\r\n                        <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\">\r\n                            <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\r\n                            </span>\r\n                        </button>\r\n                        <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n                            (click)=\"toggleContactsPanel(currentCall)\">\r\n                            <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n                        </button>\r\n                    </div>\r\n\r\n                    <div>\r\n                        <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n                            (click)=\"endCall()\">\r\n                            <span class=\"material-symbols-outlined\"> call_end </span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- conference call view -->\r\n            <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n                <div class=\"conf-heading\">\r\n                    <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n                    <span class=\"conf-title\">Conference Call</span>\r\n                </div>\r\n\r\n                <div class=\"scroll-container\">\r\n                    <div class=\"scroll-text conf-name\">\r\n                        <ng-container *ngFor=\"let call of currentCallList; let i = index\">\r\n                            <ng-container *ngIf=\"call?.isConference\">\r\n                                <span *ngIf=\"i != 0\">&</span>\r\n                                {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\r\n                            </ng-container>\r\n                        </ng-container>\r\n                    </div>\r\n                </div>\r\n                <div class=\"conf-timer\">{{ timer }}</div>\r\n\r\n                <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\"\r\n                    [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n                    <div class=\"record-btn-container\">\r\n                        <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n                            [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n                            [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n                            <span class=\"recording-icon\"></span>\r\n                        </button>\r\n                        <div class=\"pause-resume-btns\">\r\n                            <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n                                (click)=\"pauseRecording()\">\r\n                                <span class=\"material-symbols-outlined\"> pause </span>\r\n                            </button>\r\n                            <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n                                <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                            </button>\r\n                        </div>\r\n                    </div>\r\n                    <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n                        {{ getFormattedTime() }}\r\n                    </div>\r\n                </div>\r\n\r\n                <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n                    <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n                        (keyup)=\"onCallInputEnter($event)\">\r\n                    <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n                        (click)=\"clearInputs()\">close_small</span>\r\n                </div>\r\n                <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n                    <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n                        {{key.num}}\r\n                        <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"conf-actions\">\r\n                    <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute(true)\">\r\n                        <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\r\n                    </button>\r\n                    <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\r\n                        <span class=\"material-symbols-outlined\"> transition_dissolve </span>\r\n                    </button>\r\n                    <button class=\"circle-btn\" (click)=\"toggleContactsPanel(currentCall)\">\r\n                        <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n                    </button>\r\n                </div>\r\n\r\n                <div class=\"conf-end\">\r\n                    <button class=\"circle-btn danger\" (click)=\"endCall(true)\">\r\n                        <span class=\"material-symbols-outlined\"> call_end </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"wave-container\">\r\n                <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                    viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n                    <defs>\r\n                        <path id=\"gentle-wave\"\r\n                            d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n                    </defs>\r\n                    <g class=\"parallax\">\r\n                        <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                        <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n                        <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n                    </g>\r\n                </svg>\r\n            </div>\r\n        <!-- </ng-container> -->\r\n    </div>\r\n\r\n        <!-- Incoming call user details shown in model -->\r\n    <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n        <div class=\"mb-2 user-info-section\" >\r\n            <div class=\"text-center my-3\">\r\n                <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n            </div>\r\n            <div class=\"mb-3\">\r\n                <h5 class=\"text-white mb-1\">Name:</h5>\r\n                <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n            </div>\r\n            <div class=\"f-13\">\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Number:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Extension:</div>\r\n                        <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2\">Email: </div>\r\n                        <div>{{selectedUserInfo?.email}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2\">Subject:</div>\r\n                        <div class=\"ml-2 subject-text\" title=\"{{selectedUserInfo?.subject}}\">{{selectedUserInfo?.subject}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2 mb-1\">Image:</div>\r\n                        <div class=\"text-ellipsis\">\r\n                            <ng-container *ngIf=\"selectedUserInfo?.image && selectedUserInfo?.image !== '-'; else noImage\">\r\n                            <img src=\"{{selectedUserInfo?.image}}\" alt=\"\" width=\"150\"  class=\"ml-2\"/>\r\n                        </ng-container>\r\n                            <ng-template #noImage>\r\n                                <span class=\"ml-2\">No Image Available</span>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\" mb-4\">\r\n                    <div class=\"\">\r\n                        <div class=\"mb-1\">Message:</div>\r\n                        <div>\r\n                            <div class=\"text-container\" [class.expanded]=\"isExpanded\">{{selectedUserInfo?.message}}</div>\r\n                            <small class=\"toggle-btn\" *ngIf=\"showButton\" (click)=\"toggleText()\">{{ isExpanded ? 'See less' : 'See more' }}</small>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Point Name:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Source Name:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- contact list panel -->\r\n    <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n        <div class=\"contacts-header\">\r\n            <div class=\"title\">Participent</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n                <p></p>\r\n                <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel({}, true)\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#000000\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n                </span>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\r\n        <div class=\"search-bar p-3\">\r\n            <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n            <ng-container *ngFor=\"let c of filteredList\">\r\n                <div class=\"contact-item\" *ngIf=\"isDirectCallOptionShow && searchText\">\r\n                    <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n                    <div class=\"contact-info\">\r\n                        <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n                        <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number)}}</div>\r\n                    </div>\r\n                    <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(c)\" *ngIf=\"!c?.IsConnected\" title=\"Add to conference call\">\r\n                        <span class=\"material-symbols-outlined\"> add </span>\r\n                    </button>\r\n                    <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(c?.numbersList[0]?.number, true)\" *ngIf=\"!c?.IsConnected\" title=\"New Call\">\r\n                        <span class=\"material-symbols-outlined\"> call </span>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"!filteredList.length\">\r\n                <div class=\"contact-item\" *ngIf=\"searchText\">\r\n                    <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\r\n                    <div class=\"contact-info\">\r\n                        <div class=\"contact-title\">{{ searchText }}</div>\r\n                    </div>\r\n                    <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(searchText, true)\" title=\"Add to conference call\">\r\n                        <span class=\"material-symbols-outlined\"> add </span>\r\n                    </button>\r\n                    <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(searchText, true)\" title=\"New Call\">\r\n                        <span class=\"material-symbols-outlined\"> call </span>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"contacts-list\">\r\n                <div class=\"px-2\">\r\n                    <h5 class=\"mb-0 title\">In This Call</h5>\r\n                </div>\r\n                <hr class=\"mb-2 mt-1\">\r\n                <div class=\"contact-item\" *ngFor=\"let c of filteredParticipentList\">\r\n                    <ng-container *ngIf=\"c?.to == 'client' else participentInfo\">\r\n                        <img class=\"contact-avatar\" [src]=\"c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">You\r\n                            </div>\r\n                            <div class=\"contact-title\">{{ c?.from }}</div>\r\n                        </div>\r\n                        <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\"\r\n                            (click)=\"onMuteUser(c)\">\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n                        </button>\r\n                        <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\">\r\n                            <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                    </ng-container>\r\n                    <ng-template #participentInfo>\r\n                        <img class=\"contact-avatar\" [src]=\"c?.direction == 'outgoing-call' ? c?.toImage : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\r\n                            </div>\r\n                            <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n                                'Unknown'}}</div>\r\n                        </div>\r\n                        <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\"\r\n                            (click)=\"onMuteUser(c)\">\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n                        </button>\r\n                        <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\">\r\n                            <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                    </ng-template>\r\n                </div>\r\n                <hr class=\"m-2\">\r\n                <div class=\"mt-3 px-2\">\r\n                    <h5 class=\"mb-0 title\">Participent added to the call</h5>\r\n                </div>\r\n                <hr class=\"mb-2 mt-1\">  \r\n                <ng-container *ngFor=\"let c of filteredList\">\r\n                    <div class=\"contact-item\" *ngIf=\"!c?.IsConnected && false\">\r\n                        <img class=\"contact-avatar\" [src]=\"c?.img ? c?.img : 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n                            <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number)}}</div>\r\n                        </div>\r\n                        <button class=\"contact-call-btn\" (click)=\"callContact(c)\" *ngIf=\"!c?.IsConnected\">\r\n                            <span class=\"material-symbols-outlined\"> call </span>\r\n                            <span class=\"label\">Call</span>\r\n                        </button>\r\n                        <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\" *ngIf=\"c?.IsConnected\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\" *ngIf=\"c?.IsConnected\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let c of leftParticipent[currentCall?.conferenceId]\">\r\n                    <div class=\"contact-item\">\r\n                        <img class=\"contact-avatar\" [src]=\"c.direction == 'outgoing-call' && c?.toImage ? c?.toImage : c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">{{c.direction == 'outgoing-call' ? c?.toName : c?.fromName || 'Unknown number'}}</div>\r\n                            <div class=\"contact-title\">{{c.direction == 'outgoing-call' ? c?.to : c?.from}}</div>\r\n                        </div>\r\n                        <button class=\"contact-call-btn contact-add-btn \" (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\" >\r\n                            <span class=\"material-symbols-outlined\"> add </span>\r\n                            <span class=\"label\">Add</span>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\r\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\r\n    <div style=\"display: flex; width: 100%\">\r\n        <div>\r\n            <div class=\"min-call-animation\" id=\"call-avatar\">\r\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\r\n            </div>\r\n        </div>\r\n        <div>\r\n            <div class=\"min-callerDetails\">\r\n                <div class=\"name\">\r\n                    {{callData.name}}\r\n                </div>\r\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"min-btn-container\">\r\n        <div class=\"min-timer\">{{timer}}</div>\r\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\r\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n        </button>\r\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\r\n            <span class=\"material-symbols-outlined\"> call_end </span>\r\n        </button>\r\n    </div>\r\n</div>", 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:9px;width:43px;height:43px}.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:40px;height:40px;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:6px;background:#727070;color:#fff;border:none;border-radius:50%;padding:8px 9px;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:6px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:8px 9px;cursor:pointer}.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"] }]
+            args: [{ selector: 'lib-call-progress', template: "<div class=\"d-flex\">\r\n    <div class=\"call-container\" *ngIf=\"!isMinimised && currentCallList?.length\"\r\n        [ngClass]=\"{'collops': isCollops, 'incoming-call-container': isClickExpand, 'contacts-open': showContactsPanel }\">\r\n        <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\r\n\r\n        <!-- All type Call Hold list  -->\r\n        <div class=\"held-call-banner\"\r\n            *ngIf=\"currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)\">\r\n            <ng-container *ngFor=\"let conf of conferenceCallList\">\r\n                <div class=\"held-call-content\" *ngIf=\"conf?.isConferenceHold\">\r\n                    <div class=\"held-info\">\r\n                        <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\r\n                        <div class=\"held-caller\">\r\n                            <span class=\"held-label\">Hold</span>\r\n                            <span class=\"held-name\">Conference Call</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"held-actions\">\r\n                        <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': conf?.isConferenceHold }\"\r\n                            (click)=\"swapCalls(conf,true)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"{{'Hold'}}\"> phone_paused </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"endConfereneceCall(conf)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                        <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"toggleContactsPanel(conf)\">\r\n                            <i class=\"fa fa-angle-right\"></i>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n\r\n        <!-- For single incoming call -->\r\n        <div class=\"h-100 py-5\" style=\"display: flex; flex-direction: column;\"\r\n            *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\r\n            <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.to || 'Unknown\r\n                    Number'}}</span>\r\n            </div>\r\n            <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img || 'assets/images/user.jpg'\" alt=\"\"\r\n                    width=\"120\" />\r\n            </div>\r\n            <div class=\"callerDetails\">\r\n                <h1>{{ currentCallList[0]?.name ? currentCallList[0]?.name : currentCallList[0]?.phone || 'Unknown\r\n                    Number' }}</h1>\r\n                <p *ngIf=\"!!currentCallList[0]?.name\">{{ currentCallList[0]?.phone }}</p>\r\n            </div>\r\n\r\n            <div class=\"call-action-btns mt-auto\">\r\n                <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\"\r\n                    [disabled]=\"isIncomingCallBtnDisable\" (click)=\"add(currentCallList[0])\">\r\n                    <span class=\"material-symbols-outlined\" > call </span>\r\n                </button>\r\n                <button class=\"call-btn reject-btn\">\r\n                    <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\r\n                    </span>\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- For single active call -->\r\n        <div *ngIf=\"(!isConference || isConferenceCallHold) && (!!currentCall?.id && !currentCall?.isConference) && currentCall?.isAcceptCall\"\r\n            [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\r\n\r\n            <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                <img class=\"avatar-img\" [src]=\"currentCall?.img || 'assets/images/user.jpg'\" alt=\"\" width=\"120\" />\r\n            </div>\r\n            <div class=\"callerDetails\">\r\n                <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\r\n                </h1>\r\n                <p>{{currentCall?.phone }}</p>\r\n                <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\r\n            </div>\r\n\r\n            <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n                <div class=\"record-btn-container\">\r\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\"\r\n                        [disabled]=\"!currentCall?.isAcceptCall\">\r\n                        <span class=\"recording-icon\"></span>\r\n                    </button>\r\n                    <div class=\"pause-resume-btns\">\r\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n                            (click)=\"pauseRecording()\">\r\n                            <span class=\"material-symbols-outlined\"> pause </span>\r\n                        </button>\r\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n                    {{ getFormattedTime() }}\r\n                </div>\r\n            </div>\r\n            <div *ngIf=\"showKeypad\" class=\"sendDigit\">\r\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n                    (keyup)=\"onCallInputEnter($event)\">\r\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n                    (click)=\"clearInputs()\">close_small</span>\r\n            </div>\r\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n                    {{key.num}}\r\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '723x'}\">\r\n                <!-- <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\r\n                    <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\r\n                        [disabled]=\"isMergeCallAllowed() || currentCallList.length < 2\">\r\n                        <span>Merge</span>\r\n                    </button>\r\n                </div> -->\r\n                <div class=\"flex align-items-center justify-content-evenly mb-3\">\r\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"toggleMute()\">\r\n                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n\r\n                    </button>\r\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"!currentCall?.isAcceptCall\">\r\n                        <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\r\n                        </span>\r\n                    </button>\r\n                    <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\r\n                        (click)=\"toggleContactsPanel(currentCall)\">\r\n                        <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n                    </button>\r\n                </div>\r\n\r\n                <div>\r\n                    <button class=\"call-btn end-call-btn\" [disabled]=\"!currentCall?.isAcceptCall\" (click)=\"endCall()\">\r\n                        <span class=\"material-symbols-outlined\"> call_end </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- conference call view -->\r\n        <div class=\"conference-call-view\" *ngIf=\"isConference && currentCall?.isConference\">\r\n            <div class=\"conf-heading\">\r\n                <span class=\"conf-icon material-symbols-outlined\"> groups </span>\r\n                <span class=\"conf-title\">Conference Call</span>\r\n            </div>\r\n\r\n            <div class=\"scroll-container\">\r\n                <div class=\"scroll-text conf-name\">\r\n                    <ng-container *ngFor=\"let call of currentCallList; let i = index\">\r\n                        <ng-container *ngIf=\"!call?.isConferenceHold\">\r\n                            <span *ngIf=\"i != 0\">&</span>\r\n                            {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n            <div class=\"conf-timer\">{{ timer }}</div>\r\n            <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\"\r\n                [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\r\n                <div class=\"record-btn-container\">\r\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\r\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\r\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\">\r\n                        <span class=\"recording-icon\"></span>\r\n                    </button>\r\n                    <div class=\"pause-resume-btns\">\r\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\r\n                            (click)=\"pauseRecording()\">\r\n                            <span class=\"material-symbols-outlined\"> pause </span>\r\n                        </button>\r\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\r\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\r\n                    {{ getFormattedTime() }}\r\n                </div>\r\n            </div>\r\n\r\n            <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\r\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\r\n                    (keyup)=\"onCallInputEnter($event)\">\r\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\r\n                    (click)=\"clearInputs()\">close_small</span>\r\n            </div>\r\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\r\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\r\n                    {{key.num}}\r\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"conf-actions\">\r\n                <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute(true)\">\r\n                    <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\r\n                </button>\r\n                <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\r\n                    <span class=\"material-symbols-outlined\"> transition_dissolve </span>\r\n                </button>\r\n                <button class=\"circle-btn\" (click)=\"toggleContactsPanel(currentCall)\">\r\n                    <span class=\"material-symbols-outlined\"> groups_2 </span>\r\n                </button>\r\n            </div>\r\n\r\n            <div class=\"conf-end\">\r\n                <button class=\"circle-btn danger\" (click)=\"endConfereneceCall()\">\r\n                    <span class=\"material-symbols-outlined\"> call_end </span>\r\n                </button>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"wave-container\">\r\n            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n                <defs>\r\n                    <path id=\"gentle-wave\"\r\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n                </defs>\r\n                <g class=\"parallax\">\r\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n                </g>\r\n            </svg>\r\n        </div>\r\n        <!-- </ng-container> -->\r\n    </div>\r\n\r\n    <!-- Incoming call user details shown in model -->\r\n    <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n        <div class=\"mb-2 user-info-section\">\r\n            <div class=\"text-center my-3\">\r\n                <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n            </div>\r\n            <div class=\"mb-3\">\r\n                <h5 class=\"text-white mb-1\">Name:</h5>\r\n                <h4 class=\"text-white userName\">{{selectedUserInfo?.name}}</h4>\r\n            </div>\r\n            <div class=\"f-13\">\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Number:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.number}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Extension:</div>\r\n                        <div class=\"ml-2\">{{selectedUserInfo?.extension}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2\">Email: </div>\r\n                        <div>{{selectedUserInfo?.email}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2\">Subject:</div>\r\n                        <div class=\"ml-2 subject-text\" title=\"{{selectedUserInfo?.subject}}\">\r\n                            {{selectedUserInfo?.subject}}</div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 mb-2\">\r\n                        <div class=\"me-2 mb-1\">Image:</div>\r\n                        <div class=\"text-ellipsis\">\r\n                            <ng-container\r\n                                *ngIf=\"selectedUserInfo?.image && selectedUserInfo?.image !== '-'; else noImage\">\r\n                                <img src=\"{{selectedUserInfo?.image}}\" alt=\"\" width=\"150\" class=\"ml-2\" />\r\n                            </ng-container>\r\n                            <ng-template #noImage>\r\n                                <span class=\"ml-2\">No Image Available</span>\r\n                            </ng-template>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\" mb-4\">\r\n                    <div class=\"\">\r\n                        <div class=\"mb-1\">Message:</div>\r\n                        <div>\r\n                            <div class=\"text-container\" [class.expanded]=\"isExpanded\">{{selectedUserInfo?.message}}\r\n                            </div>\r\n                            <small class=\"toggle-btn\" *ngIf=\"showButton\" (click)=\"toggleText()\">{{ isExpanded ? 'See\r\n                                less' : 'See more' }}</small>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Point Name:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.pointName}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"mb-1\">Source Name:</div>\r\n                        <div class=\"\">{{selectedUserInfo?.sourceName}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- contact list panel -->\r\n    <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\r\n        <div class=\"contacts-header\">\r\n            <div>Participant</div>\r\n            <div class=\"d-flex justify-content-between\">\r\n                <p></p>\r\n                <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel({}, true)\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                        fill=\"#000000\">\r\n                        <path\r\n                            d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n                    </svg>\r\n                </span>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\r\n        <div class=\"search-bar p-3 position-relative\">\r\n            <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\r\n            <div class=\"search-contacts-list\">\r\n                <ng-container *ngFor=\"let c of filteredList\">\r\n                    <div class=\"contact-item\" *ngIf=\"searchText\">\r\n                        <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">{{c?.firstName}} {{c?.middleName}} {{c?.lastName}}</div>\r\n                            <div class=\"contact-title\">{{ (c?.numbersList && c?.numbersList[0]?.number)}}</div>\r\n                        </div>\r\n                        <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"callContact(c)\"\r\n                            *ngIf=\"!c?.IsConnected\" title=\"Add to conference call\">\r\n                            <span class=\"material-symbols-outlined\"> add </span>\r\n                        </button>\r\n                        <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(c?.numbersList[0]?.number, true)\"\r\n                            *ngIf=\"!c?.IsConnected\" title=\"New Call\">\r\n                            <span class=\"material-symbols-outlined\"> call </span>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngIf=\"!filteredList.length && isDirectCallOptionShow && searchText\">\r\n                    <div class=\"contact-item\">\r\n                        <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-title\">{{ searchText }}</div>\r\n                        </div>\r\n                        <button class=\"contact-call-btn contact-add-btn mr-2\" (click)=\"CallToUnsavedNumber(searchText)\"\r\n                            title=\"Add to conference call\">\r\n                            <span class=\"material-symbols-outlined\"> add </span>\r\n                        </button>\r\n                        <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(searchText, true)\"\r\n                            title=\"New Call\">\r\n                            <span class=\"material-symbols-outlined\"> call </span>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n        <div class=\"contacts-list\">\r\n            <div class=\"px-2\">\r\n                <h5 class=\"mb-0 title\">In This Call</h5>\r\n            </div>\r\n            <hr class=\"mb-2 mt-1\">\r\n            <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n                <div class=\"contact-item\" *ngIf=\"!c?.isLeft\">\r\n                    <ng-container *ngIf=\"c?.to == 'client' else participentInfo\">\r\n                        <img class=\"contact-avatar\" [src]=\"c?.fromImage || 'assets/images/user.jpg'\" alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">You\r\n                            </div>\r\n                            <div class=\"contact-title\">{{ c?.from }}</div>\r\n                        </div>\r\n                        <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\" (click)=\"onMuteUser(c)\">\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n                        </button>\r\n                        <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\"\r\n                            (click)=\"onHoldCall(c)\">\r\n                            <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused\r\n                            </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                    </ng-container>\r\n                    <ng-template #participentInfo>\r\n                        <img class=\"contact-avatar\"\r\n                            [src]=\"c?.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n                            alt=\"\" />\r\n                        <div class=\"contact-info\">\r\n                            <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' :\r\n                                c?.fromName || 'Unknown'}}\r\n                            </div>\r\n                            <div class=\"contact-title\" *ngIf=\"c?.to != 'c2c_softphone_client'\">{{ c?.direction ==\r\n                                'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\r\n                                'Unknown'}}</div>\r\n                            <div class=\"contact-title\" *ngIf=\"c?.to == 'c2c_softphone_client'\">{{ c?.from ||\r\n                                'Unknown'}}</div>\r\n                            <div class=\"d-flex\" *ngIf=\"c?.from == hostnumber?.from && c?.to == 'c2c_softphone_client'\">\r\n                                <span class=\"organizer-label\">Organizer</span>\r\n                            </div>\r\n                        </div>\r\n                        <button class=\"mic-btn mr-2\" [disabled]=\"c?.hold\" (click)=\"onMuteUser(c)\">\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"c?.isMute\"> mic_off </span>\r\n                            <span class=\"material-symbols-outlined\" *ngIf=\"!c?.isMute\"> mic </span>\r\n                        </button>\r\n                        <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\"\r\n                            (click)=\"onHoldCall(c)\" *ngIf=\"c?.to != 'c2c_softphone_client'\">\r\n                            <span class=\"material-symbols-outlined\" [title]=\"!c?.hold ? 'Hold' : 'Resume'\"> phone_paused\r\n                            </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"onEndCall(c, false, true)\"\r\n                            *ngIf=\"c?.to != 'c2c_softphone_client'\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                        <button class=\"conference-contact\" (click)=\"endConfereneceCall()\"\r\n                            *ngIf=\"c?.to == 'c2c_softphone_client' && deviceNumberList.includes(c?.from)\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                        </button>\r\n                    </ng-template>\r\n                </div>\r\n            </ng-container>\r\n            <hr class=\"m-2\">\r\n            <div class=\"mt-3 px-2\">\r\n                <h5 class=\"mb-0 title\">Participant added to the call</h5>\r\n            </div>\r\n            <hr class=\"mb-2 mt-1\">\r\n            <ng-container *ngFor=\"let c of filteredParticipentList\">\r\n                <div class=\"contact-item\" *ngIf=\"c?.isLeft\">\r\n                    <img class=\"contact-avatar\"\r\n                        [src]=\"c.direction == 'outgoing-call' ? c?.toImage || 'assets/images/user.jpg' : c?.fromImage || 'assets/images/user.jpg'\"\r\n                        alt=\"\" />\r\n                    <div class=\"contact-info\">\r\n                        <div class=\"contact-name\">{{c.direction == 'outgoing-call' ? c?.toName : c?.fromName || 'Unknown\r\n                            number'}}</div>\r\n                        <div class=\"contact-title\">{{c.direction == 'outgoing-call' ? c?.to : c?.from}}</div>\r\n                    </div>\r\n                    <button class=\"contact-call-btn contact-add-btn \"\r\n                        (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\">\r\n                        <span class=\"material-symbols-outlined\"> add </span>\r\n                        <span class=\"label\">Rejoin</span>\r\n                    </button>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\r\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\r\n    <div style=\"display: flex; width: 100%\">\r\n        <div>\r\n            <div class=\"min-call-animation\" id=\"call-avatar\">\r\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\r\n            </div>\r\n        </div>\r\n        <div>\r\n            <div class=\"min-callerDetails\">\r\n                <div class=\"name\">\r\n                    {{callData.name}}\r\n                </div>\r\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div class=\"min-btn-container\">\r\n        <div class=\"min-timer\">{{timer}}</div>\r\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\r\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n        </button>\r\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\r\n            <span class=\"material-symbols-outlined\"> call_end </span>\r\n        </button>\r\n    </div>\r\n</div>\r\n<!-- Call Disconnect Modal -->\r\n<div class=\"custom-modal\" *ngIf=\"showDisconnectModal\">\r\n    <div class=\"modal-content p-3\">\r\n        <div class=\"contacts-header p-0 pb-2\">\r\n            <h4 class=\"title mb-0\">Call Disconnected</h4>\r\n            <div class=\"d-flex justify-content-between\">\r\n                <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDisconnectModal = false\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                        fill=\"#000000\">\r\n                        <path\r\n                            d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n                    </svg>\r\n                </span>\r\n            </div>\r\n        </div>\r\n        <div class=\"contant-body mb-2\">\r\n            <p class=\"mt-2\">\r\n                Exiting this call will not end the conference. The session will continue, and charges will incur to\r\n                your\r\n                account.\r\n            </p>\r\n        </div>\r\n        <div class=\"button-group\">\r\n            <div class=\"text-start d-flex align-items-center\">\r\n                <label class=\"d-flex align-items-center mb-0 mr-2\">\r\n                    <input type=\"checkbox\" [(ngModel)]=\"isReasonChecked\" class=\"me-2\" />\r\n                </label>\r\n\r\n                <input type=\"time\" class=\"form-control\" placeholder=\"Enter reason\" [(ngModel)]=\"leaveReason\"\r\n                    [disabled]=\"!isReasonChecked\" />\r\n            </div>\r\n            <button class=\"btn end-btn\" (click)=\"leaveConference()\">\r\n                Leave\r\n            </button>\r\n            <button class=\"btn end-btn\" (click)=\"endConference()\">\r\n                End All\r\n            </button>\r\n        </div>\r\n\r\n    </div>\r\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;justify-content:center;align-items:center;z-index:1000;flex-flow:column;overflow:hidden}.call-to-text{padding:6px 10px;border:1px solid #c2c2c2;border-radius:20px;font-size:13px}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important}.active-call{width:385px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.search-bar input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;outline:none;margin-bottom:10px}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}.callerDetails h1{width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.tx-black,.title{color:#000!important}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}.receive-btn{background-color:#28a745!important;color:#fff!important}.receive-btn span{color:#fff!important}.scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;padding-left:100%;animation:scroll-left 12s linear infinite;font-size:16px}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:-4px;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted #4b4b4b}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{width:100%;padding:5px 8px;height:100%;gap:8px;overflow-y:auto}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.incoming-banner{top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.modal-content .contacts-header{height:40px}.search-contacts-list{max-height:196px;overflow:auto;position:absolute;width:91%;background:white;z-index:1000}.contant-body p{font-size:14px;color:#5f6061}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.disabled{opacity:.5;pointer-events:none}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:37px;height:37px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:8px;cursor:pointer}.contact-add-btn{background-color:#2ecc71!important}.conference-hold-contact{display:inline-flex;align-items:center;gap:5px;background:#727070;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.user-info-section{width:100%;height:100%;overflow-y:auto;overflow-x:hidden!important}.user-info-section::-webkit-scrollbar{display:none}.toggle-btn{cursor:pointer}.text-container{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:all .3s ease}.text-container.expanded{-webkit-line-clamp:unset}.userName{font-family:FontAwesome}.subject-text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.conference-contact{display:inline-flex;align-items:center;gap:5px;background:#e14e4e;color:#fff;border:none;border-radius:50%;padding:7px;cursor:pointer}.organizer-label{padding:1px 5px;font-size:11px;border-radius:10px;border:1px solid #a0a0a0;margin-top:2px;background:#fcfcfc}.custom-modal{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000;border-radius:21px}.modal-content{background:#ffffff;padding:25px;border-radius:8px;width:350px;text-align:center}.title{margin-bottom:15px;color:#d9534f}.message{margin-bottom:20px}.button-group{display:flex;justify-content:space-between}.btn{padding:8px 15px;border:none;border-radius:5px;cursor:pointer;font-weight:500}.end-btn{background-color:#dc3545;color:#fff;display:flex;align-items:center;font-size:13px}.leave-btn{background-color:#007bff;color:#fff}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:20px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center;margin-top:35px}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}\n"] }]
         }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: TwilioService }, { type: IpAddressService }, { type: IncomeingCallSocketService }]; }, propDecorators: { callData: [{
                 type: Input
             }], selectedCallerId: [{
@@ -3578,6 +3336,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], deviceId: [{
                 type: Input
+            }], callAction: [{
+                type: Input
             }], conferenceCallInfo: [{
                 type: Input
             }], endCallEvent: [{
@@ -3709,75 +3469,15 @@ class DialboxComponent {
         this.isLoadershow = false;
         this.isIncomingCallnotification = false;
         this.notificationCallList = [];
-        this.conferenceCallInfo = {
-            "createdAt": "Tue Dec 30 07:53:51 UTC 2025",
-            "conferenceName": "conf_6953850f1522800c4f3cc715",
-            "conferenceId": "6953850f1522800c4f3cc715",
-            "conferenceStatus": "completed",
-            "isActive": false,
-            "conferenceSid": "CFa38eab13863a6af9827b348120e369b8",
-            "participants": [
-                {
-                    "callDuration": 88,
-                    "callSid": "CA48abba51da47c32749ba568d7f4eccca",
-                    "role": "callee",
-                    "joinedAt": "Tue Dec 30 07:53:54 UTC 2025",
-                    "isHold": false,
-                    "isConference": true,
-                    "userId": "69392c670665b958db876888",
-                    "forwardedTo": "",
-                    "leftAt": "Tue Dec 30 07:55:25 UTC 2025",
-                    "duration": 2,
-                    "isLeft": true,
-                    "conferenceId": "6953850f1522800c4f3cc715",
-                    "from": "+12252519886",
-                    "to": "+916353645844",
-                    "status": "completed",
-                    "direction": "outgoing-call"
-                },
-                {
-                    "callDuration": 65,
-                    "callSid": "CAcbc286a9e6559f1a3f1b51f48ce3f73b",
-                    "role": "callee",
-                    "joinedAt": "Tue Dec 30 07:54:14 UTC 2025",
-                    "isHold": false,
-                    "isConference": true,
-                    "userId": "69392c670665b958db876888",
-                    "forwardedTo": "",
-                    "leftAt": "Tue Dec 30 07:55:25 UTC 2025",
-                    "duration": 2,
-                    "isLeft": true,
-                    "conferenceId": "6953850f1522800c4f3cc715",
-                    "toName": "Test  ",
-                    "fromName": "Test  ",
-                    "from": "+12252519886",
-                    "to": "+916354564733",
-                    "status": "completed",
-                    "direction": "outgoing-call"
-                },
-                {
-                    "callDuration": 25,
-                    "callSid": "CA2fb6b893cf406c033311e3b11d6e760f",
-                    "joinedAt": "Tue Dec 30 07:55:06 UTC 2025",
-                    "isHold": false,
-                    "isConference": true,
-                    "forwardedTo": "",
-                    "duration": 1,
-                    "isLeft": true,
-                    "conferenceId": "6953850f1522800c4f3cc715",
-                    "from": "+16098065088",
-                    "to": "+12252302470",
-                    "status": "no-answer",
-                    "direction": "incoming-call"
-                }
-            ]
-        };
+        this.deviceNumberList = [];
+        this.conferenceCallInfo = {};
         this.closeDialpadEvent = new EventEmitter();
         this.callInitiated = new EventEmitter();
         this.endCallEvent = new EventEmitter();
         this.minimiseEvent = new EventEmitter();
         this.incomingCallsNewInfoEvent = new EventEmitter();
         this.incomingCallInitiated = new EventEmitter();
+        this.conferenceCallList = new EventEmitter();
         this.numberDialed = new EventEmitter();
         this.isCallInProgress = false;
         this.keypadVal = keypad;
@@ -3854,15 +3554,24 @@ class DialboxComponent {
             this.incomeingCallSocketService.listen().subscribe((incomingCallData) => __awaiter(this, void 0, void 0, function* () {
                 var _a, _b;
                 this.twilioService.conferenceCallInfo = incomingCallData;
+                this.conferenceCallList.emit(incomingCallData);
                 incomingCallData = (incomingCallData === null || incomingCallData === void 0 ? void 0 : incomingCallData.length) > 0 ? incomingCallData.filter((item) => { var _a; return ((_a = item.participants) === null || _a === void 0 ? void 0 : _a.length) > 0; }) : [];
-                if (!!(incomingCallData === null || incomingCallData === void 0 ? void 0 : incomingCallData.length)) {
+                let updatedConferenceCallData = [];
+                incomingCallData.forEach((callInfo, i) => {
+                    let ourNumber = {};
+                    ourNumber = callInfo.participants.find((resData) => ((this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.from) && (resData === null || resData === void 0 ? void 0 : resData.to) == 'c2c_softphone_client') || (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.to) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'incoming-call')) && !(resData === null || resData === void 0 ? void 0 : resData.isLeft));
+                    if (ourNumber === null || ourNumber === void 0 ? void 0 : ourNumber.id) {
+                        updatedConferenceCallData.push(callInfo);
+                    }
+                });
+                if (!!(updatedConferenceCallData === null || updatedConferenceCallData === void 0 ? void 0 : updatedConferenceCallData.length)) {
                     // this.incomingCallsList = incomingCallData.participants.filter((item: any) => !item.isLeft) || [];
-                    this.incomingCallsList = incomingCallData || [];
+                    this.incomingCallsList = updatedConferenceCallData || [];
                     let parentCall = [];
                     if ((_a = this.notificationCallList) === null || _a === void 0 ? void 0 : _a.length) {
                         this.notificationCallList = this.notificationCallList.filter((res) => res.endTime >= (new Date().getTime()));
                         this.notificationCallList.forEach((call) => {
-                            incomingCallData.forEach((item) => {
+                            updatedConferenceCallData.forEach((item) => {
                                 let info = item.participants.find((resInfo) => (resInfo === null || resInfo === void 0 ? void 0 : resInfo.id) === (call === null || call === void 0 ? void 0 : call.participantId));
                                 //  return info?.id
                                 if (info) {
@@ -4023,7 +3732,7 @@ class DialboxComponent {
         this.registerDragElement();
     }
     ngOnChanges(changes) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
         if (((_a = changes['incomingCallnotification']) === null || _a === void 0 ? void 0 : _a.currentValue) && this.incomingCallnotification && ((_c = (_b = this.incomingCallnotification) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.content) != "Voicemail") {
             if (((_e = (_d = this.incomingCallnotification) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.content) == "IncomingCall" && ((_h = (_g = (_f = this.incomingCallnotification) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.status) != "rejected" && ((_l = (_k = (_j = this.incomingCallnotification) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.status) != "accepted") {
                 this.isIncomingCallnotification = true;
@@ -4196,6 +3905,14 @@ class DialboxComponent {
                 });
             }
         }
+        if ((_4 = changes['callAction']) === null || _4 === void 0 ? void 0 : _4.currentValue) {
+            if (((_5 = this.callAction) === null || _5 === void 0 ? void 0 : _5.type) == 'reJoin') {
+                this.isCallInProgress = true;
+            }
+            else {
+                this.extensionService.getRemoveParticipants('all', (_6 = this.callAction) === null || _6 === void 0 ? void 0 : _6.conferenceId).subscribe((res) => { });
+            }
+        }
     }
     registerDragElement() {
         try {
@@ -4252,8 +3969,10 @@ class DialboxComponent {
                 isIncomingCall: true,
                 participantId: (_d = this.incomingCallnotification.data.data) === null || _d === void 0 ? void 0 : _d.participantId,
                 participants: [
-                    { direction: "incoming-call", businessNumber: ((_e = this.incomingCallnotification.data.data) === null || _e === void 0 ? void 0 : _e.c2cBusiness) == 'true' ? true : false, img: ((_f = this.incomingCallnotification.data.data) === null || _f === void 0 ? void 0 : _f.fromImage) || ((_g = this.incomingCallnotification.data.data) === null || _g === void 0 ? void 0 : _g.image) || 'assets/images/user.jpg', isIncomingCall: true, isHold: false, isConference: false, isAcceptCall: false, dial: true, phone: (_h = this.incomingCallnotification.data.data) === null || _h === void 0 ? void 0 : _h.fromNumber, to: (_j = this.incomingCallnotification.data.data) === null || _j === void 0 ? void 0 : _j.toNumber,
-                        from: (_k = this.incomingCallnotification.data.data) === null || _k === void 0 ? void 0 : _k.fromNumber, fromName: (_l = this.incomingCallnotification.data.data) === null || _l === void 0 ? void 0 : _l.fromName, participantId: (_m = this.incomingCallnotification.data.data) === null || _m === void 0 ? void 0 : _m.participantId, name: (_o = this.incomingCallnotification.data.data) === null || _o === void 0 ? void 0 : _o.fromName, time: '', id: (_p = this.incomingCallnotification.data.data) === null || _p === void 0 ? void 0 : _p.participantId, conferenceId: (_s = (_r = (_q = this.incomingCallnotification) === null || _q === void 0 ? void 0 : _q.data) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.conferenceId }
+                    {
+                        direction: "incoming-call", businessNumber: ((_e = this.incomingCallnotification.data.data) === null || _e === void 0 ? void 0 : _e.c2cBusiness) == 'true' ? true : false, img: ((_f = this.incomingCallnotification.data.data) === null || _f === void 0 ? void 0 : _f.fromImage) || ((_g = this.incomingCallnotification.data.data) === null || _g === void 0 ? void 0 : _g.image) || 'assets/images/user.jpg', isIncomingCall: true, isHold: false, isConference: false, isAcceptCall: false, dial: true, phone: (_h = this.incomingCallnotification.data.data) === null || _h === void 0 ? void 0 : _h.fromNumber, to: (_j = this.incomingCallnotification.data.data) === null || _j === void 0 ? void 0 : _j.toNumber,
+                        from: (_k = this.incomingCallnotification.data.data) === null || _k === void 0 ? void 0 : _k.fromNumber, fromName: (_l = this.incomingCallnotification.data.data) === null || _l === void 0 ? void 0 : _l.fromName, participantId: (_m = this.incomingCallnotification.data.data) === null || _m === void 0 ? void 0 : _m.participantId, name: (_o = this.incomingCallnotification.data.data) === null || _o === void 0 ? void 0 : _o.fromName, time: '', id: (_p = this.incomingCallnotification.data.data) === null || _p === void 0 ? void 0 : _p.participantId, conferenceId: (_s = (_r = (_q = this.incomingCallnotification) === null || _q === void 0 ? void 0 : _q.data) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.conferenceId
+                    }
                 ],
             };
             this.notificationCallList = yield this.notificationCallList.filter((res) => (res === null || res === void 0 ? void 0 : res.endTime) > (new Date().getTime()));
@@ -4324,9 +4043,9 @@ class DialboxComponent {
             this.sanitizedNum = isNumericInput ? mainNumber.replace(/[\s\-]+/g, '') : mainNumber;
             this.callData.phone = isNumericInput ? this.sanitizedNum : '';
             this.showInputClearBtn = inputVal.length > 0;
-            if (isNumericInput) {
-                this.dialedNumber = new AsYouType().input(this.sanitizedNum);
-            }
+            // if (isNumericInput) {
+            // this.dialedNumber = new AsYouType().input(this.sanitizedNum);
+            // }
             // emit current number whenever input changes
             this.numberDialed.emit(this.dialedNumber);
             if (inputVal.length > 2) {
@@ -4367,6 +4086,7 @@ class DialboxComponent {
             //this.callerIdList = res.callerIdList.filter(item => item.type === "C2C Softphone Number");
             this.callerIdList = res.callerIdList.filter((item) => item.voiceFeature === true);
             // this.callerIdList = res.callerIdList;
+            this.deviceNumberList = this.callerIdList.map((res) => res.number);
             if (this.callerIdList.length == 1) {
                 this.selectedCallerId = this.callerIdList[0];
             }
@@ -4788,10 +4508,10 @@ class DialboxComponent {
     }
 }
 DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: i3.MatDialog }, { token: IpAddressService }, { token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: i5$1.Router }, { token: IncomeingCallSocketService }], target: i0.ɵɵFactoryTarget.Component });
-DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", userId: "userId", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData", incomingCallnotification: "incomingCallnotification" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", numberDialed: "numberDialed" }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)" } }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\"\r\n   (endCallEvent)=\"endCall()\"\r\n   (minimiseEvent)=\"onMinimise($event)\"\r\n   (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n   [newIncomingCallData]=\"newIncomingCallData\"\r\n   [deviceId]=\"deviceId\"\r\n   [newIncomingCallsList]=\"incomingCallsList\"\r\n   (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n   [selectedCallerId]=\"selectedCallerId\"\r\n   [callerIdList]=\"callerIdList\"\r\n   [conferenceCallInfo]=\"conferenceCallInfo\"\r\n   (endIncomingCallEvent)=\"endIncomingCall($event)\"\r\n   (isLoadershow)=\"onLoadershow($event)\"\r\n   [callData]=\"callData\">\r\n  </lib-call-progress>\r\n\r\n  <div class=\"loader-wrapper\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n    <div class=\"loader\"></div>\r\n  </div>\r\n\r\n  <!-- <button (click)=\"isCallInProgress = true\">call</button> -->\r\n  <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\" *ngIf=\"!isCallInProgress || !incomingCallsList.length\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n    <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n      <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n        <div class=\"no-selection-alert\">\r\n          <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n          <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n          <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n        <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"flex-grow-1 my-auto text-left\">\r\n              You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n            </div>\r\n            <div class=\"text-right\">\r\n              <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n              <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n            </div>\r\n      \r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n        <div class=\"d-flex justify-content-between mt-2\">\r\n          <p></p>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n          </span>\r\n        </div>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n          <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n            <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n              <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n            </svg>        \r\n          </span>\r\n          <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n        </div>\r\n        <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n          <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n        </div>\r\n        <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n          <span>{{dialAlert.msg}}</span>\r\n        </div> -->\r\n        <div>\r\n          <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n            <div class=\"contact-img\">\r\n              <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n              <ng-template #alphaName>\r\n                <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n              </ng-template>\r\n            </div>\r\n            <div class=\"contact-details\">\r\n              <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n              <p>{{contact.numbersList[0].number}}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg\r\n          class=\"waves\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\"\r\n          preserveAspectRatio=\"none\"\r\n          shape-rendering=\"auto\"\r\n        >\r\n          <defs>\r\n            <path\r\n              id=\"gentle-wave\"\r\n              d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n            />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"0\"\r\n              fill=\"rgba(255,255,255,0.7)\"\r\n            />\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"3\"\r\n              fill=\"rgba(255,255,255,0.5)\"\r\n            />\r\n            <!-- <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"5\"\r\n              fill=\"rgba(255,255,255,0.3)\"\r\n            /> -->\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n      (keydown.enter)=\"onEnter(key.num)\"\r\n      [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n       [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n        {{key.num}}\r\n        <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n          voicemail\r\n        </span>\r\n        <ng-template #otherThanOne>\r\n          <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n      <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n        [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n        <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n          call\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n      <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n        <div>\r\n          <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n          {{selectedCallerId?.number}}\r\n        </div>\r\n      </div>\r\n      <ng-template #askBlock>\r\n        <div class=\"shownCallerId\"  (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <h5 class=\"mb-0\">Select C2C number</h5>\r\n            <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n              <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n            </span> -->\r\n            <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n        <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n    <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"  [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n      <div style=\"display: flex; justify-content: space-between\">\r\n        <!-- <h4>Select C2C Softphone Number</h4> -->\r\n         <h4>Make outgoing call using</h4>\r\n        <span\r\n          class=\"material-symbols-outlined\"\r\n          style=\"cursor: pointer\"\r\n          (click)=\"isCallerIdHidden = true\"\r\n        >\r\n          close\r\n        </span>\r\n      </div>\r\n      <ul>\r\n        <ng-container *ngFor=\"let callerId of callerIdList\">\r\n          <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n            <div>\r\n              <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n              {{callerId?.number}}\r\n            </div>\r\n            <span>{{callerId?.countryName}}</span>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    </div>\r\n    <ng-template #noCallerIdMessage>\r\n      <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n      </span>\r\n    </ng-template>\r\n    <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n      <div class=\"card dedicatedNumPopup\">\r\n        <div class=\"card-header chooseDedicatedHeader\">\r\n          <h5>Choose C2C Number</h5>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n        </div>\r\n        <div class=\"card-body dedicatedNumList\">\r\n          <ul>\r\n            <ng-container *ngFor=\"let callerId of callerIdList\">\r\n              <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n                <div>\r\n                  <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                  {{callerId?.number}}\r\n                </div>\r\n                <span>{{callerId?.countryName}}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n      <div>\r\n        <div class=\"inc-user-img\">\r\n          <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n        </div>\r\n        \r\n      </div>\r\n      <div class=\"flex-grow-1\">\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call\r\n          </span>\r\n        </button>\r\n        <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call_end\r\n          </span>\r\n        </button>\r\n      </div>\r\n     \r\n    </div> -->\r\n  </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "selectedCallerId", "newIncomingCallData", "newIncomingCallsList", "callerIdList", "deviceId", "conferenceCallInfo"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated", "isLoadershow", "endIncomingCallEvent"] }, { kind: "directive", type: ShortPressDirective, selector: "[shortPress]", outputs: ["shortPress"] }, { kind: "directive", type: LongPressDirective, selector: "[longPress]", outputs: ["longPress"] }] });
+DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", userId: "userId", callAction: "callAction", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData", incomingCallnotification: "incomingCallnotification" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", conferenceCallList: "conferenceCallList", numberDialed: "numberDialed" }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)" } }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n    (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n    [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\"\r\n    (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n    [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\"\r\n    (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershow)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n  </lib-call-progress>\r\n\r\n  <div class=\"loader-wrapper\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n    <div class=\"loader\"></div>\r\n  </div>\r\n\r\n  <!-- <button (click)=\"isCallInProgress = true\">call</button> -->\r\n  <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n    *ngIf=\"!isCallInProgress || !incomingCallsList.length\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n    <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n      <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n        <div class=\"no-selection-alert\">\r\n          <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n          <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n          <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n        <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"flex-grow-1 my-auto text-left\">\r\n              You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n            </div>\r\n            <div class=\"text-right\">\r\n              <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n              <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n        <div class=\"d-flex justify-content-between mt-2\">\r\n          <p></p>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n            </svg>\r\n          </span>\r\n        </div>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\"\r\n            (ngModelChange)=\"onDialInputChange($event)\" />\r\n          <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n            <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\"\r\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n              enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n              <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\"\r\n                d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \" />\r\n            </svg>\r\n          </span>\r\n          <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\"\r\n            ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n              class=\"fa fa-info-circle\"></i></span>\r\n        </div>\r\n        <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n          <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n        </div>\r\n        <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n          <span>{{dialAlert.msg}}</span>\r\n        </div> -->\r\n        <div>\r\n          <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n            <div class=\"contact-img\">\r\n              <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\" />\r\n              <ng-template #alphaName>\r\n                <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n              </ng-template>\r\n            </div>\r\n            <div class=\"contact-details\">\r\n              <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n              <p>{{contact.numbersList[0].number}}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n          <defs>\r\n            <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n            <!-- <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"5\"\r\n              fill=\"rgba(255,255,255,0.3)\"\r\n            /> -->\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n        [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n        (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n        {{key.num}}\r\n        <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n          voicemail\r\n        </span>\r\n        <ng-template #otherThanOne>\r\n          <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text :\r\n            '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n      (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n      <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n        [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n        <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n          call\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n      <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n        <div>\r\n          <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n          {{selectedCallerId?.number}}\r\n        </div>\r\n      </div>\r\n      <ng-template #askBlock>\r\n        <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <h5 class=\"mb-0\">Select C2C number</h5>\r\n            <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n              <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n            </span> -->\r\n            <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n        <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n      <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"\r\n        [ngClass]=\"{'visible': !isCallerIdHidden}\">\r\n        <div style=\"display: flex; justify-content: space-between\">\r\n          <!-- <h4>Select C2C Softphone Number</h4> -->\r\n          <h4>Make outgoing call using</h4>\r\n          <span class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\r\n            close\r\n          </span>\r\n        </div>\r\n        <ul>\r\n          <ng-container *ngFor=\"let callerId of callerIdList\">\r\n            <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n              (click)=\"onDedicatedNumSelect(callerId)\">\r\n              <div>\r\n                <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                {{callerId?.number}}\r\n              </div>\r\n              <span>{{callerId?.countryName}}</span>\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n      </div>\r\n    </div>\r\n    <ng-template #noCallerIdMessage>\r\n      <span class=\"no-caller-id-message\">To make any voice calls, please <a\r\n          routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n          title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n      </span>\r\n    </ng-template>\r\n    <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n      <div class=\"card dedicatedNumPopup\">\r\n        <div class=\"card-header chooseDedicatedHeader\">\r\n          <h5>Choose C2C Number</h5>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n        </div>\r\n        <div class=\"card-body dedicatedNumList\">\r\n          <ul>\r\n            <ng-container *ngFor=\"let callerId of callerIdList\">\r\n              <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n                (click)=\"showDedicatedPopup = false\">\r\n                <div>\r\n                  <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                  {{callerId?.number}}\r\n                </div>\r\n                <span>{{callerId?.countryName}}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n      <div>\r\n        <div class=\"inc-user-img\">\r\n          <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n        </div>\r\n        \r\n      </div>\r\n      <div class=\"flex-grow-1\">\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call\r\n          </span>\r\n        </button>\r\n        <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call_end\r\n          </span>\r\n        </button>\r\n      </div>\r\n     \r\n    </div> -->\r\n  </div>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "selectedCallerId", "newIncomingCallData", "newIncomingCallsList", "callerIdList", "deviceId", "callAction", "conferenceCallInfo"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated", "isLoadershow", "endIncomingCallEvent"] }, { kind: "directive", type: ShortPressDirective, selector: "[shortPress]", outputs: ["shortPress"] }, { kind: "directive", type: LongPressDirective, selector: "[longPress]", outputs: ["longPress"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\"\r\n   (endCallEvent)=\"endCall()\"\r\n   (minimiseEvent)=\"onMinimise($event)\"\r\n   (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n   [newIncomingCallData]=\"newIncomingCallData\"\r\n   [deviceId]=\"deviceId\"\r\n   [newIncomingCallsList]=\"incomingCallsList\"\r\n   (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n   [selectedCallerId]=\"selectedCallerId\"\r\n   [callerIdList]=\"callerIdList\"\r\n   [conferenceCallInfo]=\"conferenceCallInfo\"\r\n   (endIncomingCallEvent)=\"endIncomingCall($event)\"\r\n   (isLoadershow)=\"onLoadershow($event)\"\r\n   [callData]=\"callData\">\r\n  </lib-call-progress>\r\n\r\n  <div class=\"loader-wrapper\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n    <div class=\"loader\"></div>\r\n  </div>\r\n\r\n  <!-- <button (click)=\"isCallInProgress = true\">call</button> -->\r\n  <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\" *ngIf=\"!isCallInProgress || !incomingCallsList.length\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n    <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n      <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n        <div class=\"no-selection-alert\">\r\n          <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n          <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n          <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n        <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"flex-grow-1 my-auto text-left\">\r\n              You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n            </div>\r\n            <div class=\"text-right\">\r\n              <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n              <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n            </div>\r\n      \r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n        <div class=\"d-flex justify-content-between mt-2\">\r\n          <p></p>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n          </span>\r\n        </div>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n          <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n            <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n              <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n            </svg>        \r\n          </span>\r\n          <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n        </div>\r\n        <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n          <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n        </div>\r\n        <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n          <span>{{dialAlert.msg}}</span>\r\n        </div> -->\r\n        <div>\r\n          <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n            <div class=\"contact-img\">\r\n              <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n              <ng-template #alphaName>\r\n                <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n              </ng-template>\r\n            </div>\r\n            <div class=\"contact-details\">\r\n              <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n              <p>{{contact.numbersList[0].number}}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg\r\n          class=\"waves\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\"\r\n          preserveAspectRatio=\"none\"\r\n          shape-rendering=\"auto\"\r\n        >\r\n          <defs>\r\n            <path\r\n              id=\"gentle-wave\"\r\n              d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n            />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"0\"\r\n              fill=\"rgba(255,255,255,0.7)\"\r\n            />\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"3\"\r\n              fill=\"rgba(255,255,255,0.5)\"\r\n            />\r\n            <!-- <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"5\"\r\n              fill=\"rgba(255,255,255,0.3)\"\r\n            /> -->\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n      (keydown.enter)=\"onEnter(key.num)\"\r\n      [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n       [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n        {{key.num}}\r\n        <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n          voicemail\r\n        </span>\r\n        <ng-template #otherThanOne>\r\n          <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n      <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n        [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n        <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n          call\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n      <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n        <div>\r\n          <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n          {{selectedCallerId?.number}}\r\n        </div>\r\n      </div>\r\n      <ng-template #askBlock>\r\n        <div class=\"shownCallerId\"  (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <h5 class=\"mb-0\">Select C2C number</h5>\r\n            <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n              <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n            </span> -->\r\n            <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n        <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n    <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"  [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n      <div style=\"display: flex; justify-content: space-between\">\r\n        <!-- <h4>Select C2C Softphone Number</h4> -->\r\n         <h4>Make outgoing call using</h4>\r\n        <span\r\n          class=\"material-symbols-outlined\"\r\n          style=\"cursor: pointer\"\r\n          (click)=\"isCallerIdHidden = true\"\r\n        >\r\n          close\r\n        </span>\r\n      </div>\r\n      <ul>\r\n        <ng-container *ngFor=\"let callerId of callerIdList\">\r\n          <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n            <div>\r\n              <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n              {{callerId?.number}}\r\n            </div>\r\n            <span>{{callerId?.countryName}}</span>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    </div>\r\n    <ng-template #noCallerIdMessage>\r\n      <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n      </span>\r\n    </ng-template>\r\n    <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n      <div class=\"card dedicatedNumPopup\">\r\n        <div class=\"card-header chooseDedicatedHeader\">\r\n          <h5>Choose C2C Number</h5>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n        </div>\r\n        <div class=\"card-body dedicatedNumList\">\r\n          <ul>\r\n            <ng-container *ngFor=\"let callerId of callerIdList\">\r\n              <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n                <div>\r\n                  <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                  {{callerId?.number}}\r\n                </div>\r\n                <span>{{callerId?.countryName}}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n      <div>\r\n        <div class=\"inc-user-img\">\r\n          <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n        </div>\r\n        \r\n      </div>\r\n      <div class=\"flex-grow-1\">\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call\r\n          </span>\r\n        </button>\r\n        <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call_end\r\n          </span>\r\n        </button>\r\n      </div>\r\n     \r\n    </div> -->\r\n  </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+            args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n    (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n    [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\"\r\n    (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n    [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\"\r\n    (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershow)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n  </lib-call-progress>\r\n\r\n  <div class=\"loader-wrapper\" *ngIf=\"(!isCallInProgress || !incomingCallsList.length) && isLoadershow\">\r\n    <div class=\"loader\"></div>\r\n  </div>\r\n\r\n  <!-- <button (click)=\"isCallInProgress = true\">call</button> -->\r\n  <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n    *ngIf=\"!isCallInProgress || !incomingCallsList.length\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n    <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n      <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n        <div class=\"no-selection-alert\">\r\n          <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n          <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n          <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n        <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"flex-grow-1 my-auto text-left\">\r\n              You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n            </div>\r\n            <div class=\"text-right\">\r\n              <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n              <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n        <div class=\"d-flex justify-content-between mt-2\">\r\n          <p></p>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\">\r\n              <path\r\n                d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n            </svg>\r\n          </span>\r\n        </div>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\"\r\n            (ngModelChange)=\"onDialInputChange($event)\" />\r\n          <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n            <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\"\r\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n              enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n              <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\"\r\n                d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \" />\r\n            </svg>\r\n          </span>\r\n          <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\"\r\n            ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n              class=\"fa fa-info-circle\"></i></span>\r\n        </div>\r\n        <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n          <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n        </div>\r\n        <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n          <span>{{dialAlert.msg}}</span>\r\n        </div> -->\r\n        <div>\r\n          <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n            <div class=\"contact-img\">\r\n              <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\" />\r\n              <ng-template #alphaName>\r\n                <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n              </ng-template>\r\n            </div>\r\n            <div class=\"contact-details\">\r\n              <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n              <p>{{contact.numbersList[0].number}}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n          <defs>\r\n            <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n            <!-- <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"5\"\r\n              fill=\"rgba(255,255,255,0.3)\"\r\n            /> -->\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n        [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n        (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n        {{key.num}}\r\n        <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n          voicemail\r\n        </span>\r\n        <ng-template #otherThanOne>\r\n          <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text :\r\n            '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n      (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n      <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n        [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n        <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n          call\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n      <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n        <div>\r\n          <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n          {{selectedCallerId?.number}}\r\n        </div>\r\n      </div>\r\n      <ng-template #askBlock>\r\n        <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <h5 class=\"mb-0\">Select C2C number</h5>\r\n            <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n              <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n            </span> -->\r\n            <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n        <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n      <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"\r\n        [ngClass]=\"{'visible': !isCallerIdHidden}\">\r\n        <div style=\"display: flex; justify-content: space-between\">\r\n          <!-- <h4>Select C2C Softphone Number</h4> -->\r\n          <h4>Make outgoing call using</h4>\r\n          <span class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\r\n            close\r\n          </span>\r\n        </div>\r\n        <ul>\r\n          <ng-container *ngFor=\"let callerId of callerIdList\">\r\n            <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n              (click)=\"onDedicatedNumSelect(callerId)\">\r\n              <div>\r\n                <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                {{callerId?.number}}\r\n              </div>\r\n              <span>{{callerId?.countryName}}</span>\r\n            </li>\r\n          </ng-container>\r\n        </ul>\r\n      </div>\r\n    </div>\r\n    <ng-template #noCallerIdMessage>\r\n      <span class=\"no-caller-id-message\">To make any voice calls, please <a\r\n          routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n          title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n      </span>\r\n    </ng-template>\r\n    <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n      <div class=\"card dedicatedNumPopup\">\r\n        <div class=\"card-header chooseDedicatedHeader\">\r\n          <h5>Choose C2C Number</h5>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n        </div>\r\n        <div class=\"card-body dedicatedNumList\">\r\n          <ul>\r\n            <ng-container *ngFor=\"let callerId of callerIdList\">\r\n              <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\"\r\n                (click)=\"showDedicatedPopup = false\">\r\n                <div>\r\n                  <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                  {{callerId?.number}}\r\n                </div>\r\n                <span>{{callerId?.countryName}}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n      <div>\r\n        <div class=\"inc-user-img\">\r\n          <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n        </div>\r\n        \r\n      </div>\r\n      <div class=\"flex-grow-1\">\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call\r\n          </span>\r\n        </button>\r\n        <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call_end\r\n          </span>\r\n        </button>\r\n      </div>\r\n     \r\n    </div> -->\r\n  </div>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{background:#80808052;width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
         }], ctorParameters: function () { return [{ type: TwilioService }, { type: ExtensionService }, { type: i3.MatDialog }, { type: IpAddressService }, { type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: i5$1.Router }, { type: IncomeingCallSocketService }]; }, propDecorators: { autoOpenOnIncoming: [{
                 type: Input
             }], contactInfo: [{
@@ -4800,6 +4520,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], userId: [{
                 type: Input
+            }], callAction: [{
+                type: Input
             }], isDialpadHidden: [{
                 type: Input
             }], incomingCallData: [{
@@ -4818,6 +4540,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }], incomingCallInitiated: [{
                 type: Output
+            }], conferenceCallList: [{
+                type: Output
             }], dialInputElement: [{
                 type: ViewChild,
                 args: ['dialInput']