@vgroup/dialbox 0.6.2-9.1 → 0.6.2-9.10

package/fesm2015/vgroup-dialbox.mjs

@@ -1768,6 +1768,7 @@ class CallProgressComponent {
             msg: '',
             show: false
         };
+        this.conferenceCallList = [];
         this.micOn = false;
         this.isMinimised = false;
         console.log('Call Progress Component');
@@ -1781,8 +1782,6 @@ class CallProgressComponent {
         console.log('Call Progress Component ngOnInit');
         // Subscribe to incoming calls from TwilioService
         try {
-            // this.incomingAudio = new Audio('../../../assets/phone-ringing.mp3');
-            // this.incomingAudio['loop'] = true;
             if (this.extensionService.userId) {
                 this.userId = this.extensionService.userId;
             }
@@ -1791,19 +1790,10 @@ class CallProgressComponent {
                     return;
                 }
                 console.log('TwilioService.currentCall emitted:', incoming);
-                // console.log('Current call status:', this.call?.status());
-                // If there is an ongoing call, show concurrent incoming banner
                 console.log('Concurrent incoming detected - showing banner');
                 this.isConcurrentIncoming = true;
                 this.incomingCallDiv = true;
-                // Add to list if not present
-                // const exists = (this.newIncomingCallsList || []).some((c: any) => c?.parameters?.CallSid === incoming?.parameters?.CallSid);
-                // if (!exists) {
-                //   this.newIncomingCallsList = [...(this.newIncomingCallsList || []), incoming];
-                //   this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
-                // }
                 this.cdr.detectChanges();
-                // }
             });
         }
         catch (e) {
@@ -1819,7 +1809,6 @@ class CallProgressComponent {
         if (changes['callData']) {
             if ((_a = changes['callData'].currentValue) === null || _a === void 0 ? void 0 : _a.isIncomingCall) {
                 this.incomingCallDiv = true;
-                // this.call['callInfo'] = JSON.parse(JSON.stringify(this.callData));
                 this.cdr.detectChanges();
             }
             else if (((_b = changes['callData'].currentValue) === null || _b === void 0 ? void 0 : _b.displayNum) || ((_c = changes['callData'].currentValue) === null || _c === void 0 ? void 0 : _c.from)) {
@@ -1834,7 +1823,7 @@ class CallProgressComponent {
                     var _a, _b, _c;
                     this.conferenceId = i == 0 ? this.newIncomingCallsList[i].conferenceId : this.conferenceId;
                     this.newIncomingCallsList[i].participants.forEach((res) => __awaiter(this, void 0, void 0, function* () {
-                        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+                        var _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
                         let contact = {};
                         if ((_d = this.contacts) === null || _d === void 0 ? void 0 : _d.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); });
@@ -1862,7 +1851,7 @@ class CallProgressComponent {
                                         });
                                     }
                                     else if (((_o = this.currentCall) === null || _o === void 0 ? void 0 : _o.isHold) && ((_p = this.currentCall) === null || _p === void 0 ? void 0 : _p.isConference)) {
-                                        let conferenceCalllist = this.currentCallList.filter((item) => item.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) {
                                             yield this.onholdOrUnholdParticipant({
                                                 participantId: conferenceCalllist.map((item) => item.participantId),
@@ -1889,6 +1878,9 @@ class CallProgressComponent {
                         }
                         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 (((_t = this.currentCallList) === null || _t === void 0 ? void 0 : _t.length) == 1) {
+                                this.currentCall = this.currentCallList[0];
+                            }
                             this.timer = '00:00';
                             this.startTimer();
                         }
@@ -1898,9 +1890,12 @@ class CallProgressComponent {
                         this.currentCall = currentCall[0] || this.currentCallList[0];
                     }
                     else if (currentCall.length > 1 && ((_b = currentCall[0]) === null || _b === void 0 ? void 0 : _b.isConference)) {
+                        this.currentCall = currentCall[0] || this.currentCallList[0];
                         this.isConference = true;
                     }
                     this.leftParticipent = callInfo.participants.filter((resData) => resData.isLeft);
+                    this.leftParticipent = [...new Map(callInfo.participants.filter((item) => item.isLeft === true).map((item) => [(item === null || item === void 0 ? void 0 : item.direction) == 'outgoing-call' ? (item === null || item === void 0 ? void 0 : item.to) || 'Unknown' : item === null || item === void 0 ? void 0 : item.from, item])).values()
+                    ];
                     console.log(this.leftParticipent, 'leftParticipent');
                     if ((_c = this.selectedUserInfo) === null || _c === void 0 ? void 0 : _c.participantId) {
                         let selectedUser = this.currentCallList.find((item) => item.id == this.selectedUserInfo.participantId);
@@ -1964,6 +1959,12 @@ class CallProgressComponent {
                 this.cdr.detectChanges();
                 this.endCallEvent.emit();
             }
+            ;
+            this.conferenceCallList = [];
+            this.conferenceCallList = [
+                ...new Map(this.currentCallList.filter(item => item.isConference === true).map(item => [item.conferenceId, item])).values()
+            ];
+            console.log(this.conferenceCallList, 'conferenceCallList');
         }
     }
     getStatus(res) {
@@ -2006,7 +2007,7 @@ class CallProgressComponent {
             this.filteredList = [];
         });
     }
-    startCall(callData) {
+    startCall(callData, isNewConference) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
             console.log(callData, 'callData');
@@ -2039,7 +2040,7 @@ class CallProgressComponent {
                     isMute: false,
                     joinedAt: '',
                     name: (callData === null || callData === void 0 ? void 0 : callData.name) || '',
-                    participantId: 'yyugghjb',
+                    participantId: '',
                     phone: (callData === null || callData === void 0 ? void 0 : callData.phone) || '',
                     role: 'callee',
                     status: '',
@@ -2064,7 +2065,7 @@ class CallProgressComponent {
                                 from: callData === null || callData === void 0 ? void 0 : callData.from,
                                 route: "OUTGOING",
                                 participantNumber: callData === null || callData === void 0 ? void 0 : callData.phone,
-                                conferenceId: this.conferenceId || ((_b = response === null || response === void 0 ? void 0 : response.callauth) === null || _b === void 0 ? void 0 : _b.id),
+                                conferenceId: (_b = response === null || response === void 0 ? void 0 : response.callauth) === null || _b === void 0 ? void 0 : _b.id,
                                 userId: this.userId || localStorage.getItem('userId'),
                                 proxy: '',
                                 countrycode: '',
@@ -2575,8 +2576,16 @@ class CallProgressComponent {
                 }
                 else {
                     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)) {
-                            // c.isHold = true;
+                        if ((c === null || c === void 0 ? void 0 : c.participantId) && !(c === null || c === void 0 ? void 0 : c.isHold) && this.currentCall.conferenceId == (c === null || c === void 0 ? void 0 : c.conferenceId)) {
+                            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
+                            });
+                        }
+                        else {
                             yield this.onholdOrUnholdParticipant({
                                 participantId: [c === null || c === void 0 ? void 0 : c.participantId],
                                 conferenceId: c.conferenceId,
@@ -2587,27 +2596,13 @@ class CallProgressComponent {
                         }
                     }));
                     // Put current call on hold
-                    // this.heldCall = this.call;
                     this.isCallOnHold = true;
-                    // this.heldCall.mute(true);
-                    // this.heldCall['parameters']['caller_name'] = { ...this.callData }
-                    // this.call=null
-                    // Close contacts panel and show ring animation
                     this.showContactsPanel = false;
                     this.showRingAnimation = true;
-                    // Update UI to reflect the new outbound leg being dialed
-                    const contactName = [contact === null || contact === void 0 ? void 0 : contact.firstName, contact === null || contact === void 0 ? void 0 : contact.middleName, contact === null || contact === void 0 ? void 0 : contact.lastName]
-                        .filter(Boolean)
-                        .join(' ');
-                    // this.call['callInfo'] = JSON.parse(JSON.stringify(this.callData));
-                    // Get the conference ID from the current call or use the stored one
-                    // const conferenceId = this.conferenceId;
-                    // if (!this.conferenceId) {
-                    //   console.error("No conferenceId found for active call");
-                    //   swal("Error", "Cannot add participant: conference not found", "error");
-                    //   this.showRingAnimation = false;
-                    //   return;
-                    // }
+                    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),
@@ -2619,12 +2614,14 @@ class CallProgressComponent {
                         countrycode: '',
                         deviceId: this.deviceId
                     });
-                    // this.callData = {
-                    //   ...this.callData,
-                    //   participantId: ,
-                    // }
+                    yield this.onholdOrUnholdParticipant({
+                        participantId: [data === null || data === void 0 ? void 0 : data.participantId],
+                        conferenceId: this.currentCall.conferenceId,
+                        hold: false,
+                        mute: false,
+                        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,
@@ -2639,8 +2636,6 @@ class CallProgressComponent {
                     this.cdr.detectChanges();
                     console.log(this.callData, 'this.callData');
                     console.log('test111111');
-                    // this.currentCall = this.callData;
-                    // this.currentCallList.push({...this.callData});
                     console.log("Participant added to conference:", phoneNumber);
                     this.showRingAnimation = false;
                 }
@@ -2648,29 +2643,18 @@ class CallProgressComponent {
             catch (error) {
                 console.error('Error adding participant:', error);
                 this.showRingAnimation = false;
-                // Restore held call on error
-                if (this.heldCall) {
-                    // this.call = this.heldCall;
-                    // this.heldCall = undefined;
-                    // this.isCallOnHold = false;
-                    // this.call.mute(false);
-                }
                 this.handleError(error);
             }
         });
     }
     CallToUnsavedNumber(number, isNewConference) {
-        var _a, _b;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             try {
-                if (!number) {
-                    // this.sanitizedNum = this.lastDialed.number;
-                }
                 const isInvalid = yield this.isInvalidNumber(number);
                 if (isInvalid) {
                     return false;
                 }
-                // this.saveLastDialed();
                 // this.isSavedContactDialled();
                 // this.isPaymentDue = localStorage.getItem('paymentDue') === 'false' ? false : true;
                 // if (this.isPaymentDue) {
@@ -2700,6 +2684,9 @@ class CallProgressComponent {
                 // 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;
@@ -2707,8 +2694,8 @@ class CallProgressComponent {
                 // }
                 // Update call data in a single operation
                 const callData = {
-                    name: '',
-                    img: 'assets/images/user.jpg',
+                    name: contact === null || contact === void 0 ? void 0 : contact.firstName,
+                    img: (contact === null || contact === void 0 ? void 0 : contact.image) || 'assets/images/user.jpg',
                     phone: number,
                     extNum: '',
                     isIncomingCall: false,
@@ -2722,7 +2709,7 @@ class CallProgressComponent {
                 if (isNewConference) {
                     // if(this.currentCall.isConference) {
                     let participentList = [];
-                    this.currentCallList.forEach((resData) => {
+                    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);
                         }
@@ -2735,9 +2722,15 @@ class CallProgressComponent {
                             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
                         });
+                        if ((_c = this.currentCall) === null || _c === void 0 ? void 0 : _c.isConference) {
+                            this.isConferenceCallHold = true;
+                        }
+                        this.startCall(callData, isNewConference);
+                    }
+                    else {
+                        this.startCall(callData, isNewConference);
                     }
                     // }
-                    this.startCall(this.callData);
                 }
                 else {
                     this.callContact(number, true);
@@ -2879,8 +2872,8 @@ class CallProgressComponent {
             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* () {
-                    if ((c === null || c === void 0 ? void 0 : c.isConference) && !(c === null || c === void 0 ? void 0 : c.isHold)) {
-                        // c.isHold = true;
+                    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,
@@ -2888,9 +2881,20 @@ class CallProgressComponent {
                             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)) {
-                        // c.isHold = false;
                         yield this.onholdOrUnholdParticipant({
                             participantId: [c === null || c === void 0 ? void 0 : c.participantId],
                             conferenceId: c.conferenceId,
@@ -2898,16 +2902,12 @@ class CallProgressComponent {
                             mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
                             conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
                         });
-                        // this.currentCall = c;
                     }
                 }));
-                this.isConferenceCallHold = true;
             }
             else if (isConferenceCall) {
-                this.isConferenceCallHold = false;
                 this.currentCallList.forEach((c) => __awaiter(this, void 0, void 0, function* () {
-                    if (c === null || c === void 0 ? void 0 : c.isConference) {
-                        // c.isHold = false;
+                    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)) {
                         yield this.onholdOrUnholdParticipant({
                             participantId: [c === null || c === void 0 ? void 0 : c.participantId],
                             conferenceId: c.conferenceId,
@@ -2932,7 +2932,6 @@ class CallProgressComponent {
                 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)) {
-                        // c.isHold = true;
                         yield this.onholdOrUnholdParticipant({
                             participantId: [c === null || c === void 0 ? void 0 : c.participantId],
                             conferenceId: c.conferenceId,
@@ -2942,7 +2941,6 @@ class CallProgressComponent {
                         });
                     }
                     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)) {
-                        // c.isHold = false;
                         yield this.onholdOrUnholdParticipant({
                             participantId: [c === null || c === void 0 ? void 0 : c.participantId],
                             conferenceId: c.conferenceId,
@@ -2950,7 +2948,6 @@ class CallProgressComponent {
                             mute: (c === null || c === void 0 ? void 0 : c.mute) || false,
                             conference: (c === null || c === void 0 ? void 0 : c.isConference) || false
                         });
-                        // this.currentCall = c;
                     }
                 }));
             }
@@ -3407,11 +3404,11 @@ class CallProgressComponent {
                 ((c === null || c === void 0 ? void 0 : c.middleName) || '').toLowerCase().includes(text) || ((c === null || c === void 0 ? void 0 : c.fullName) || '').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) => {
-            const name = (c.direction == 'outgoing-call' ? ((c === null || c === void 0 ? void 0 : c.toName) || '') : ((c === null || c === void 0 ? void 0 : c.fromName) || '')).toLowerCase();
-            const number = (c.direction == 'outgoing-call' ? ((c === null || c === void 0 ? void 0 : c.to) || '') : ((c === null || c === void 0 ? void 0 : c.from) || '')).toLowerCase();
-            return name.includes(text) || number.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) {
@@ -3439,10 +3436,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", 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                <div class=\"held-call-content\" *ngIf=\"isConferenceCallHold\">\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 mr-2\" [ngClass]=\"{ 'on-hold': isConferenceCallHold }\" (click)=\"swapCalls({},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>\r\n                </div>\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\">\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 multiple incoming calls but not any call progress -->\r\n\r\n\r\n            <!-- For single active call -->\r\n            <div *ngIf=\"(!isConference || isConferenceCallHold) && !!currentCall?.id\"\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()\">\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\r\n            <!-- conference call view -->\r\n            <div class=\"conference-call-view\" *ngIf=\"isConference && !isConferenceCallHold\">\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                <!-- <div class=\"conf-record\">\r\n                <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\r\n                    <span class=\"material-symbols-outlined\"> stop_circle </span>\r\n                </button>\r\n            </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-remove\">\r\n                    <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\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()\">\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\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        <!-- </ng-container> -->\r\n    </div>\r\n\r\n    <!-- Add remove participant panel -->\r\n    <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant && false\">\r\n        <div class=\"contacts-header\">\r\n            <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\r\n            <div class=\"title\">Contacts</div>\r\n            <span class=\"material-symbols-outlined search\"> search </span>\r\n        </div>\r\n        <div class=\"contacts-list\">\r\n            <div class=\"contact-item\" *ngFor=\"let c of filteredList\">\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?.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=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\">\r\n                    <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\r\n                    <!-- <span class=\"label\">Hold</span> -->\r\n                </button>\r\n                <button class=\"conference-contact\" (click)=\"onEndIncomingCall()\">\r\n                    <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                    <!-- <span class=\"label\">End</span> -->\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n        <!-- Incoming call user details shown in model -->\r\n    <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n        <div class=\"mb-2 user-info-section\" >\r\n            <div class=\"text-center my-3\">\r\n                <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n            </div>\r\n            <!-- <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                <img class=\"avatar-img\" [src]=\"'assets/images/user.jpg'\" alt=\"\" width=\"100\" />\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 class=\"call-action-btns mt-0\">\r\n            <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n            </button>\r\n            <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\"  (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\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            <div class=\"record-btn-container\">\r\n                <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\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=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n                        <span class=\"material-symbols-outlined\"> pause </span>\r\n                    </button>\r\n                    <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n                        <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <button class=\"call-btn reject-btn\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n            </button>\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            <!-- <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span> -->\r\n            <div class=\"title\">Contacts</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()\">\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            <!-- <div class=\"d-flex\" *ngIf=\"isDirectCallOptionShow && searchText\" (click)=\"CallToUnsavedNumber(searchText)\">\r\n                <div class=\"call-to-text\">Call to <span class=\"text-primary\">{{searchText}}</span>\r\n                </div>\r\n            </div> -->\r\n            <ng-container *ngFor=\"let c of filteredList\">\r\n                <div class=\"contact-item\" *ngIf=\"isDirectCallOptionShow && searchText && !c?.IsConnected\">\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\" (click)=\"callContact(c)\" *ngIf=\"!c?.IsConnected\" title=\"Add to conference call\">\r\n                        <span class=\"material-symbols-outlined\"> call </span>\r\n                        <!-- <span class=\"label\">Call</span> -->\r\n                    </button>\r\n                    <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(c)\" *ngIf=\"!c?.IsConnected\" title=\"New Call\">\r\n                        <span class=\"material-symbols-outlined\"> call </span>\r\n                        <!-- <span class=\"label\">Call</span> -->\r\n                    </button>\r\n                    <!-- <button class=\"call-sec-btn mr-3\" [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                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"contacts-list\">\r\n            <!-- <ng-container *ngFor=\"let c of filteredList; let i = index\"> -->\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\">\r\n                    <img class=\"contact-avatar\" [src]=\"'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\">{{selectedCallerId?.number}}</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"contact-item\" *ngFor=\"let c of filteredParticipentList\">\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                        <!-- <span class=\"label\">Hold</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                        <!-- <span class=\"label\">End</span> -->\r\n                    </button>\r\n                </div>\r\n                <hr class=\"m-2\">\r\n                <div class=\"mt-3 px-2\">\r\n                    <h5 class=\"mb-0 title\">Contacts</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\">\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\" (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=\"call-sec-btn mr-3\" [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)\" *ngIf=\"c?.IsConnected\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\r\n                            <!-- <span class=\"label\">Hold</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                            <!-- <span class=\"label\">End</span> -->\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let c of leftParticipent\">\r\n                    <div class=\"contact-item\" *ngIf=\"false\">\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 : 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\" (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\" >\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> -->\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:44px;height:44px}.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:6px 10px;cursor:pointer}.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", 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>\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\">\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 multiple incoming calls but not any call progress -->\r\n\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()\">\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\r\n            <!-- conference call view -->\r\n            <div class=\"conference-call-view\" *ngIf=\"isConference && !isConferenceCallHold\">\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                <!-- <div class=\"conf-record\">\r\n                <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\r\n                    <span class=\"material-symbols-outlined\"> stop_circle </span>\r\n                </button>\r\n            </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-remove\">\r\n                    <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\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()\">\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\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        <!-- </ng-container> -->\r\n    </div>\r\n\r\n    <!-- Add remove participant panel -->\r\n    <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant && false\">\r\n        <div class=\"contacts-header\">\r\n            <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\r\n            <div class=\"title\">Contacts</div>\r\n            <span class=\"material-symbols-outlined search\"> search </span>\r\n        </div>\r\n        <div class=\"contacts-list\">\r\n            <div class=\"contact-item\" *ngFor=\"let c of filteredList\">\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?.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=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\">\r\n                    <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\r\n                    <!-- <span class=\"label\">Hold</span> -->\r\n                </button>\r\n                <button class=\"conference-contact\" (click)=\"onEndIncomingCall()\">\r\n                    <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                    <!-- <span class=\"label\">End</span> -->\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n        <!-- Incoming call user details shown in model -->\r\n    <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n        <div class=\"mb-2 user-info-section\" >\r\n            <div class=\"text-center my-3\">\r\n                <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n            </div>\r\n            <!-- <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                <img class=\"avatar-img\" [src]=\"'assets/images/user.jpg'\" alt=\"\" width=\"100\" />\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 class=\"call-action-btns mt-0\">\r\n            <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n            </button>\r\n            <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\"  (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\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            <div class=\"record-btn-container\">\r\n                <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\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=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n                        <span class=\"material-symbols-outlined\"> pause </span>\r\n                    </button>\r\n                    <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n                        <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <button class=\"call-btn reject-btn\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n            </button>\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            <!-- <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span> -->\r\n            <div class=\"title\">Contacts</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()\">\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 && !c?.IsConnected\">\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)\" 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            <!-- <ng-container *ngFor=\"let c of filteredList; let i = index\"> -->\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\">\r\n                    <img class=\"contact-avatar\" [src]=\"'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\">{{selectedCallerId?.number}}</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"contact-item\" *ngFor=\"let c of filteredParticipentList\">\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                        <!-- <span class=\"label\">Hold</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                        <!-- <span class=\"label\">End</span> -->\r\n                    </button>\r\n                </div>\r\n                <hr class=\"m-2\">\r\n                <div class=\"mt-3 px-2\">\r\n                    <h5 class=\"mb-0 title\">Contacts</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 || '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=\"call-sec-btn mr-3\" [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)\" *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\">\r\n                    <div class=\"contact-item\">\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 : 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            <!-- </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"] }] });
 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                <div class=\"held-call-content\" *ngIf=\"isConferenceCallHold\">\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 mr-2\" [ngClass]=\"{ 'on-hold': isConferenceCallHold }\" (click)=\"swapCalls({},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>\r\n                </div>\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\">\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 multiple incoming calls but not any call progress -->\r\n\r\n\r\n            <!-- For single active call -->\r\n            <div *ngIf=\"(!isConference || isConferenceCallHold) && !!currentCall?.id\"\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()\">\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\r\n            <!-- conference call view -->\r\n            <div class=\"conference-call-view\" *ngIf=\"isConference && !isConferenceCallHold\">\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                <!-- <div class=\"conf-record\">\r\n                <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\r\n                    <span class=\"material-symbols-outlined\"> stop_circle </span>\r\n                </button>\r\n            </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-remove\">\r\n                    <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\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()\">\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\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        <!-- </ng-container> -->\r\n    </div>\r\n\r\n    <!-- Add remove participant panel -->\r\n    <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant && false\">\r\n        <div class=\"contacts-header\">\r\n            <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\r\n            <div class=\"title\">Contacts</div>\r\n            <span class=\"material-symbols-outlined search\"> search </span>\r\n        </div>\r\n        <div class=\"contacts-list\">\r\n            <div class=\"contact-item\" *ngFor=\"let c of filteredList\">\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?.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=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\">\r\n                    <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\r\n                    <!-- <span class=\"label\">Hold</span> -->\r\n                </button>\r\n                <button class=\"conference-contact\" (click)=\"onEndIncomingCall()\">\r\n                    <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                    <!-- <span class=\"label\">End</span> -->\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n        <!-- Incoming call user details shown in model -->\r\n    <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n        <div class=\"mb-2 user-info-section\" >\r\n            <div class=\"text-center my-3\">\r\n                <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n            </div>\r\n            <!-- <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                <img class=\"avatar-img\" [src]=\"'assets/images/user.jpg'\" alt=\"\" width=\"100\" />\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 class=\"call-action-btns mt-0\">\r\n            <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n            </button>\r\n            <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\"  (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\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            <div class=\"record-btn-container\">\r\n                <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\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=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n                        <span class=\"material-symbols-outlined\"> pause </span>\r\n                    </button>\r\n                    <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n                        <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <button class=\"call-btn reject-btn\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n            </button>\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            <!-- <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span> -->\r\n            <div class=\"title\">Contacts</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()\">\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            <!-- <div class=\"d-flex\" *ngIf=\"isDirectCallOptionShow && searchText\" (click)=\"CallToUnsavedNumber(searchText)\">\r\n                <div class=\"call-to-text\">Call to <span class=\"text-primary\">{{searchText}}</span>\r\n                </div>\r\n            </div> -->\r\n            <ng-container *ngFor=\"let c of filteredList\">\r\n                <div class=\"contact-item\" *ngIf=\"isDirectCallOptionShow && searchText && !c?.IsConnected\">\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\" (click)=\"callContact(c)\" *ngIf=\"!c?.IsConnected\" title=\"Add to conference call\">\r\n                        <span class=\"material-symbols-outlined\"> call </span>\r\n                        <!-- <span class=\"label\">Call</span> -->\r\n                    </button>\r\n                    <button class=\"contact-call-btn\" (click)=\"CallToUnsavedNumber(c)\" *ngIf=\"!c?.IsConnected\" title=\"New Call\">\r\n                        <span class=\"material-symbols-outlined\"> call </span>\r\n                        <!-- <span class=\"label\">Call</span> -->\r\n                    </button>\r\n                    <!-- <button class=\"call-sec-btn mr-3\" [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                </div>\r\n            </ng-container>\r\n        </div>\r\n        <div class=\"contacts-list\">\r\n            <!-- <ng-container *ngFor=\"let c of filteredList; let i = index\"> -->\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\">\r\n                    <img class=\"contact-avatar\" [src]=\"'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\">{{selectedCallerId?.number}}</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"contact-item\" *ngFor=\"let c of filteredParticipentList\">\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                        <!-- <span class=\"label\">Hold</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                        <!-- <span class=\"label\">End</span> -->\r\n                    </button>\r\n                </div>\r\n                <hr class=\"m-2\">\r\n                <div class=\"mt-3 px-2\">\r\n                    <h5 class=\"mb-0 title\">Contacts</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\">\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\" (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=\"call-sec-btn mr-3\" [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)\" *ngIf=\"c?.IsConnected\">\r\n                            <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\r\n                            <!-- <span class=\"label\">Hold</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                            <!-- <span class=\"label\">End</span> -->\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let c of leftParticipent\">\r\n                    <div class=\"contact-item\" *ngIf=\"false\">\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 : 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\" (click)=\"CallToUnsavedNumber(c.direction == 'outgoing-call' ? c?.to : c?.from)\" >\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> -->\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:44px;height:44px}.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:6px 10px;cursor:pointer}.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            <!-- 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>\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\">\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 multiple incoming calls but not any call progress -->\r\n\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()\">\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\r\n            <!-- conference call view -->\r\n            <div class=\"conference-call-view\" *ngIf=\"isConference && !isConferenceCallHold\">\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                <!-- <div class=\"conf-record\">\r\n                <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\r\n                    <span class=\"material-symbols-outlined\"> stop_circle </span>\r\n                </button>\r\n            </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-remove\">\r\n                    <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\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()\">\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\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        <!-- </ng-container> -->\r\n    </div>\r\n\r\n    <!-- Add remove participant panel -->\r\n    <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant && false\">\r\n        <div class=\"contacts-header\">\r\n            <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\r\n            <div class=\"title\">Contacts</div>\r\n            <span class=\"material-symbols-outlined search\"> search </span>\r\n        </div>\r\n        <div class=\"contacts-list\">\r\n            <div class=\"contact-item\" *ngFor=\"let c of filteredList\">\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?.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=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\">\r\n                    <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\r\n                    <!-- <span class=\"label\">Hold</span> -->\r\n                </button>\r\n                <button class=\"conference-contact\" (click)=\"onEndIncomingCall()\">\r\n                    <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\r\n                    <!-- <span class=\"label\">End</span> -->\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n        <!-- Incoming call user details shown in model -->\r\n    <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\r\n        <div class=\"mb-2 user-info-section\" >\r\n            <div class=\"text-center my-3\">\r\n                <h3 class=\"text-white\">C2C -POINT {{selectedUserInfo?.pointName}}</h3>\r\n            </div>\r\n            <!-- <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                <img class=\"avatar-img\" [src]=\"'assets/images/user.jpg'\" alt=\"\" width=\"100\" />\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 class=\"call-action-btns mt-0\">\r\n            <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n            </button>\r\n            <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\"  (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\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            <div class=\"record-btn-container\">\r\n                <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\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=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n                        <span class=\"material-symbols-outlined\"> pause </span>\r\n                    </button>\r\n                    <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n                        <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n            <button class=\"call-btn reject-btn\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n            </button>\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            <!-- <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span> -->\r\n            <div class=\"title\">Contacts</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()\">\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 && !c?.IsConnected\">\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)\" 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            <!-- <ng-container *ngFor=\"let c of filteredList; let i = index\"> -->\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\">\r\n                    <img class=\"contact-avatar\" [src]=\"'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\">{{selectedCallerId?.number}}</div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"contact-item\" *ngFor=\"let c of filteredParticipentList\">\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                        <!-- <span class=\"label\">Hold</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                        <!-- <span class=\"label\">End</span> -->\r\n                    </button>\r\n                </div>\r\n                <hr class=\"m-2\">\r\n                <div class=\"mt-3 px-2\">\r\n                    <h5 class=\"mb-0 title\">Contacts</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 || '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=\"call-sec-btn mr-3\" [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)\" *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\">\r\n                    <div class=\"contact-item\">\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 : 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            <!-- </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"] }]
         }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: TwilioService }, { type: IpAddressService }, { type: IncomeingCallSocketService }]; }, propDecorators: { callData: [{
                 type: Input
             }], selectedCallerId: [{