@vgroup/dialbox 0.3.46 → 0.3.47

package/fesm2015/vgroup-dialbox.mjs

@@ -8,13 +8,13 @@ import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
 import { catchError, switchMap, map, tap, shareReplay } from 'rxjs/operators';
 import { Device } from '@twilio/voice-sdk';
-import * as i3$1 from '@angular/material/dialog';
+import * as i3 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i5 from '@angular/router';
 import { RouterLink, RouterModule } from '@angular/router';
-import * as i3 from '@angular/common';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
+import * as i4$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 
@@ -1710,1182 +1710,1515 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }] });
 
-class CallProgressComponent {
-    // contacts: any[] = [
-    //   { name: 'Pamela Cox', title: 'Product Designer', img: 'assets/images/user.jpg' },
-    //   { name: 'Roger S. Wood', title: 'JavaScript Programmer', img: 'assets/images/user.jpg' },
-    //   { name: 'Victor Blackston', title: 'Database Administrator', img: 'assets/images/user.jpg' },
-    //   { name: 'Tammy Rios', title: 'Support', img: 'assets/images/user.jpg' },
-    //   { name: 'Carlos Henderson', title: 'Software Architect', img: 'assets/images/user.jpg' },
-    //   { name: 'Elizabeth Bailey', title: 'HR', img: 'assets/images/user.jpg' }
-    // ];
-    constructor(extensionService, cdr, twilioService) {
+const GlobalConstant = {
+    ErrorMsg500: "Unable to process request. Please try again later.",
+    isSMSVisible: true,
+    dedicatedNumText: 'C2C Number'
+};
+
+class IncomingCallComponent {
+    constructor(extensionService, twilioService, notificationSerivce) {
         this.extensionService = extensionService;
-        this.cdr = cdr;
         this.twilioService = twilioService;
-        this.newIncomingCallsList = [];
-        this.endCallEvent = new EventEmitter();
-        this.incomingCallsNewInfo = new EventEmitter();
-        this.minimiseEvent = new EventEmitter();
-        this.showRingAnimation = false;
-        this.timer = '00:00';
-        this.showKeypad = false;
-        this.keypadVal = keypad;
-        this.callInput = '';
-        this.isMute = false;
-        this.disbaleEndCallBtn = true;
-        this.showClearBtn = false;
-        this.isCollops = false;
-        // Conference state flag
-        this.isConference = false;
-        this.isOutgoingCall = true;
-        // Incoming call variables
-        this.incomingCallDiv = false;
-        //@Output() showCallProgressEvent: EventEmitter<void> = new EventEmitter<void>();
-        this.incomingCallInitiated = new EventEmitter();
+        this.notificationSerivce = notificationSerivce;
+        this.showRingAnimation = true;
+        this.selectedIncomingCall = {};
+        this.dedicatedNum = '';
+        this.shouldRecordCall = false;
+        this.isClickExpand = false;
         this.isRecording = false;
         this.isPaused = false;
-        this.timeElapsed = 0; // in seconds
-        this.recordCall = false;
-        this.callStatus = 'ringing';
-        this.showContactsPanel = false;
-        this.isAddRemoveParticipant = false;
-        this.isConcurrentIncoming = false;
-        this.isCallOnHold = false;
-        this.contacts = [];
-        this.currentCallList = [];
-        this.isMinimised = false;
-        console.log('Call Progress Component');
+        this.isTwilioConnected = false;
+        this.closeIncomingCallDiv = new EventEmitter();
+        this.incomingCallsNewList = new EventEmitter();
+        this.selectedIncomingCallInfo = new EventEmitter();
+        this.disbaleEndCallBtn = false;
+        this.incomingCallSid = '';
+        this.incomingRecordCall = false;
+        this.timeElapsed = 0;
+        console.log('IncomingCallComponent');
     }
     ngOnInit() {
-        console.log('Call Progress Component ngOnInit');
-        // Subscribe to incoming calls from TwilioService
+        // this.twilioService.currentCall.subscribe((call: any) => {
+        //   if (call) {
+        //     this.twilioCallData = call;
+        //     this.notificationSerivce.showNotification(call);
+        //     // Handle the call UI
+        //   }
+        // });
+        console.log('IncomingCallComponent ngOnInit');
         try {
-            this.twilioService.currentCall.subscribe((incoming) => {
-                var _a;
-                if (!incoming) {
-                    return;
-                }
-                console.log('TwilioService.currentCall emitted:', incoming);
-                console.log('Current call status:', (_a = this.call) === null || _a === void 0 ? void 0 : _a.status());
-                // If there is an ongoing call, show concurrent incoming banner
-                if (this.call && this.call.status() === 'open') {
-                    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) => { var _a, _b; return ((_a = c === null || c === void 0 ? void 0 : c.parameters) === null || _a === void 0 ? void 0 : _a.CallSid) === ((_b = incoming === null || incoming === void 0 ? void 0 : incoming.parameters) === null || _b === void 0 ? void 0 : _b.CallSid); });
-                    if (!exists) {
-                        this.newIncomingCallsList = [...(this.newIncomingCallsList || []), incoming];
-                        this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
+            this.twilioService.currentCall.subscribe(call => {
+                if (call) {
+                    this.twilioCallData = call;
+                    this.twilioAuthId = call.customParameters.get('twilioAuthId');
+                    if (!call.parameters) {
+                        call.parameters = {};
                     }
-                    this.cdr.detectChanges();
+                    this.sendIPforIncomingCall(this.twilioAuthId, '');
+                    call.on('cancel', () => {
+                        if (this.incomingCallData && this.incomingCallData.parameters && this.incomingCallData.parameters.CallSid) {
+                            this.newIncomingCallsList = this.newIncomingCallsList.filter((item) => item.parameters && item.parameters.CallSid !== this.incomingCallData.parameters.CallSid);
+                        }
+                        this.rejectCallFromList(call);
+                    });
+                    call.on('disconnect', () => {
+                        if (this.incomingCallData && this.incomingCallData.parameters && this.incomingCallData.parameters.CallSid) {
+                            this.newIncomingCallsList = this.newIncomingCallsList.filter((item) => item.parameters && item.parameters.CallSid !== this.incomingCallData.parameters.CallSid);
+                        }
+                        this.rejectCallFromList(call);
+                    });
                 }
             });
         }
         catch (e) {
-            console.error('Error subscribing to incoming calls:', e);
+            console.log(e);
         }
     }
-    ngOnChanges(changes) {
-        var _a, _b, _c;
-        console.log('Call Progress Component ngOnChanges');
-        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();
+    acceptCallFromList(data) {
+        if (!data) {
+            return;
+        }
+        // Disconnect any other connected call before accepting this one
+        if (this.newIncomingCallsList && this.newIncomingCallsList.length) {
+            const otherConnected = this.newIncomingCallsList.find((item) => item.isCallConnected && item !== data);
+            if (otherConnected) {
+                try {
+                    otherConnected.disconnect();
+                }
+                catch (_a) { }
+                otherConnected.isCallConnected = false;
+                otherConnected.isFirstCall = false;
             }
-            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)) {
-                console.log('test-startCall123', changes['callData'].currentValue);
-                this.currentCall = Object.assign(Object.assign({}, changes['callData'].currentValue), { img: 'assets/images/user.jpg' });
-                this.startCall(changes['callData'].currentValue);
+        }
+        // Accept this call and mark as the active one
+        data.accept();
+        data.isCallConnected = true;
+        data.isFirstCall = true;
+        this.extensionService.setCallSid(this.CallSid, this.recordCall);
+        this.sendIPforIncomingCall(data.customParameters.get('twilioAuthId'), 'answered').then(() => {
+            this.closeIncomingCallWrapper(1);
+        });
+    }
+    rejectCallFromList(data) {
+        if (!data)
+            return;
+        if (data.reject)
+            data.reject();
+        if (data.disconnect)
+            data.disconnect();
+        if (data.parameters) {
+            data.parameters['isCallConnected'] = false; // Should be false when rejecting
+        }
+        if (data.customParameters) {
+            this.sendIPforIncomingCall(data.customParameters.get('twilioAuthId'), 'answered');
+        }
+        if (this.newIncomingCallsList && data && data.parameters && data.parameters.CallSid) {
+            this.newIncomingCallsList = this.newIncomingCallsList.filter((item) => item.parameters && item.parameters.CallSid !== data.parameters.CallSid);
+            this.incomingCallsNewList.emit(this.newIncomingCallsList);
+            if (this.newIncomingCallsList.length == 0) {
+                this.closeIncomingCallDiv.emit({ show: 0, call: data });
             }
         }
-        if (changes['newIncomingCallsList']) {
-            try {
-                if (changes['newIncomingCallsList'].currentValue) {
-                    // Check if there's an active ongoing call
-                    if (this.call && (this.call.status() == 'open')) {
-                        // Concurrent incoming - show banner on top of active call
-                        this.isConcurrentIncoming = true;
-                        this.incomingCallDiv = false;
-                        // const inc = changes['newIncomingCallData'].currentValue;
-                        // if (this.newIncomingCallsList && Array.isArray(this.newIncomingCallsList)) {
-                        //   const exists = this.newIncomingCallsList.some((c: any) => c?.parameters?.CallSid === inc?.parameters?.CallSid);
-                        //   if (!exists) {
-                        //     this.newIncomingCallsList = [...this.newIncomingCallsList, inc];
-                        //     this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
-                        //   }
-                        // } else {
-                        //   this.newIncomingCallsList = [inc];
-                        //   this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
-                        // }
-                        console.log(changes['newIncomingCallsList'].currentValue);
-                        this.newIncomingCallsList.forEach((res) => {
-                            this.currentCallList.push(Object.assign(Object.assign({}, res), { img: 'assets/images/user.jpg', isIncomingCall: true, isHold: false, isMute: false, isConference: false }));
-                        });
-                        this.cdr.detectChanges();
+    }
+    closeIncomingCallWrapper(val) {
+        this.closeIncomingCallDiv.emit({ show: val, call: this.twilioCallData });
+    }
+    toggleMute(data) {
+        this.isMute = !this.isMute;
+        data.mute(this.isMute);
+    }
+    sendIPforIncomingCall(recordId, callstatus) {
+        console.log('sendIPforIncomingCall');
+        return new Promise((resolve, reject) => {
+            this.extensionService.getIPDetailsForCall(recordId, callstatus, this.deviceId).subscribe((res) => {
+                const resp = res;
+                if (res.status == 200) {
+                    if (resp.callAuth) {
+                        this.CallSid = resp.callAuth.callSid;
+                        this.recordCall = resp.callAuth.recordCall;
+                        // Handle the recordCall flag
+                        if (resp.callAuth.recordCall) {
+                            this.shouldRecordCall = true;
+                        }
+                        else {
+                            this.shouldRecordCall = false;
+                        }
                     }
                     else {
-                        // Pure incoming - show full incoming UI
-                        this.isConcurrentIncoming = false;
-                        this.incomingCallDiv = true;
-                        this.cdr.detectChanges();
+                        // swal("Error", "Missing call authentication details.", "error");
                     }
+                    resolve();
                 }
-            }
-            catch (e) {
-                console.log(e);
-            }
-        }
+                else {
+                    swal("Error", resp.message.join("<br/>"), "error");
+                    resolve();
+                }
+            }, (error) => {
+                swal("Error", GlobalConstant.ErrorMsg500, "error");
+                resolve();
+            });
+        });
     }
-    ngAfterViewInit() {
-        // this.isRecording = false;
-        // setTimeout(() => {
-        //   this.isRecording = false;
-        // }, 3000);
+    onUserInfoByCallSid() {
+        if (this.selectedIncomingCall && this.selectedIncomingCall.userInfo) {
+        }
+        return this.selectedIncomingCall ? Object.keys(this.selectedIncomingCall).length ? true : false : false;
     }
-    GetContactsList() {
-        const token = localStorage.getItem('ext_token') || '';
-        this.extensionService.readContacts(token).subscribe((res) => {
-            console.log('API Response:', res);
-            // Note: Capital B in phoneBook
-            if (res && res.phoneBook) {
-                this.contacts = res.phoneBook;
-                console.log('Contacts array:', this.contacts);
-            }
-            else if (Array.isArray(res)) {
-                this.contacts = res;
-            }
-            else {
-                this.contacts = [];
-            }
-            console.log('Contacts array:', this.contacts);
-            this.cdr.detectChanges();
-        }, (error) => {
-            console.error('Error fetching contacts:', error);
-            this.contacts = [];
-        });
+    // Check if call has detailed information available for expansion
+    hasDetailedInfo(callData) {
+        if (!callData)
+            return false;
+        // Check if userInfo exists and has meaningful data
+        if (callData.userInfo && callData.userInfo.c2cInformation) {
+            const info = callData.userInfo.c2cInformation;
+            return !!(info.subject && info.subject !== '-' ||
+                info.email && info.email !== '-' ||
+                info.message && info.message !== '-' ||
+                info.pointName && info.pointName !== '-' ||
+                info.sourceName && info.sourceName !== '-' ||
+                info.extension && info.extension !== '-' ||
+                info.url ||
+                info.latitude ||
+                info.longitude);
+        }
+        return false;
     }
-    startCall(callData) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            console.log(callData, 'callData');
-            try {
-                this.showRingAnimation = true;
-                const payload = {
-                    channelId: environment.channelId,
-                    userId: localStorage.getItem('userId'),
-                    to: callData.phone,
-                    fromNumber: callData.from,
-                    scope: 'local',
-                };
-                const response = yield this.initiateCall(payload);
-                this.conferenceId = (_a = response === null || response === void 0 ? void 0 : response.callauth) === null || _a === void 0 ? void 0 : _a.id;
-                if (response.status == 200) {
-                    const { id: callAuthId, recordCall } = yield this.getCallAuthId(response);
-                    this.getUserInformation(callAuthId);
-                    this.recordCall = recordCall; // Store the recordCall value
-                    const tokenData = yield this.getOutgoingCallToken(callAuthId);
-                    yield this.connectToDevice(tokenData.token, callData);
-                    yield this.pollCallStatus(callAuthId);
-                    setTimeout(() => __awaiter(this, void 0, void 0, function* () {
-                        var _b, _c;
-                        try {
-                            this.addRes = yield this.addParticipantToCall({
-                                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
-                            });
-                            this.callData = Object.assign(Object.assign({}, callData), { participantId: (_b = this.addRes) === null || _b === void 0 ? void 0 : _b.participantId, isHold: false, isLeft: false, isIncomingCall: false, isConference: false });
-                            this.call['callInfo'] = JSON.parse(JSON.stringify(this.callData));
-                            console.log('test111111');
-                            this.currentCall = Object.assign(Object.assign({}, this.callData), { img: callData.img || 'assets/images/user.jpg' });
-                            this.currentCallList.push(Object.assign(Object.assign({}, this.callData), { img: callData.img || 'assets/images/user.jpg' }));
-                            console.log('Initial participantId:', (_c = this.addRes) === null || _c === void 0 ? void 0 : _c.participantId);
-                        }
-                        catch (e) {
-                            console.error('Error adding initial participant:', e);
-                        }
-                    }), 1000);
-                    // Poll the status for 30-45 seconds
-                }
-                else if (response.status == 201) {
-                    swal("Error", response.message.join("<br/>"), "error");
-                    console.log('test2');
-                    this.endCall();
-                }
+    onClickExpand(data) {
+        if (this.selectedIncomingCall === data && this.isClickExpand) {
+            this.isClickExpand = false;
+            this.selectedIncomingCall = null;
+            this.selectedIncomingCallInfo.emit({});
+            return;
+        }
+        this.isClickExpand = true;
+        this.selectedIncomingCall = data;
+        if (this.selectedIncomingCall) {
+            this.selectedIncomingCall['isClickExpand'] = true;
+            if (this.newIncomingCallsList && this.newIncomingCallsList.length > 0) {
+                this.newIncomingCallsList.forEach((call) => {
+                    if (call !== this.selectedIncomingCall) {
+                        call['isClickExpand'] = false;
+                    }
+                });
             }
-            catch (error) {
-                this.showRingAnimation = false;
-                this.handleError(error);
-                console.log('test3');
-                this.endCall();
+            this.selectedIncomingCallInfo.emit(this.selectedIncomingCall);
+            if (!this.selectedIncomingCall.userInfo || this.selectedIncomingCall.userInfo.status == 201) {
+                this.getUserInformation(this.selectedIncomingCall);
             }
-        });
+        }
     }
-    onHoldCall(c) {
-        console.log(c, 'dsdsdsdsdsdsadsa');
-        this.onholdOrUnholdParticipant({
-            participantId: c.participantId,
-            conferenceId: this.conferenceId,
-            hold: !c.hold
+    getUserInformation(incomingCallData) {
+        let data = this.fromEntries(Array.from(incomingCallData.customParameters.entries()));
+        this.extensionService.getUserInformation(data['twilioAuthId']).subscribe(response => {
+            setTimeout(() => {
+                incomingCallData['userInfo'] = response;
+            }, 5000);
+        }, error => {
+            console.error('Error starting recording', error);
         });
-        c.hold = !c.hold;
-        this.cdr.detectChanges();
     }
-    onEndCall(c, isAllCallEnd) {
-        return __awaiter(this, void 0, void 0, function* () {
-            console.log(c, 'dsdsdsdsdsdsadsa');
-            let participantId = isAllCallEnd ? 'all' : c.participantId || c.participantId;
-            let res = yield this.getRemoveParticipants(participantId, this.conferenceId);
-            if ((res === null || res === void 0 ? void 0 : res.status) == 201 && (res === null || res === void 0 ? void 0 : res.message) == 'participant already left') {
-                this.currentCallList = this.currentCallList.filter((item) => item.participantId !== c.participantId);
-                this.currentCall = this.currentCallList.length > 0 ? this.currentCallList[0] : null;
-                this.cdr.detectChanges();
-            }
-            yield this.getAllParticipants(this.conferenceId);
-        });
+    fromEntries(entries) {
+        return entries.reduce((acc, [key, value]) => {
+            acc[key] = value;
+            return acc;
+        }, {});
     }
-    initiateCall(payload) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.extensionService.initiateCall(payload).toPromise();
-        });
+    toggleRecording(sid) {
+        if (this.isRecording) {
+            this.stopRecording();
+        }
+        else {
+            this.startRecording();
+        }
     }
-    onholdOrUnholdParticipant(payload) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.extensionService.holdParticipant(payload).toPromise();
+    startRecording() {
+        let sid;
+        const details = this.extensionService.getCallSid();
+        this.incomingCallSid = details.callSid;
+        this.incomingRecordCall = details.recordCall;
+        sid = this.incomingCallSid ? this.incomingCallSid : this.CallSid;
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return;
+        // }
+        this.extensionService.getCallRecording(sid).subscribe(response => {
+            this.isRecording = true;
+            this.isPaused = false;
+            // this.timeElapsed = 0;
+            this.startTimer1();
+        }, error => {
+            console.error('Error starting recording', error);
         });
     }
-    addParticipantToCall(payload) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.extensionService.addParticipant(payload).toPromise();
-        });
+    stopRecording() {
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return;
+        // }
+        this.isRecording = false;
+        this.isPaused = false;
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe();
+        }
     }
-    getCallStatusOfParticipants(participantId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.extensionService.getCallStatusOfParticipants(participantId).toPromise();
+    pauseRecording() {
+        const details = this.extensionService.getCallSid();
+        this.incomingCallSid = details.callSid;
+        this.incomingRecordCall = details.recordCall;
+        const sid = this.incomingCallSid ? this.incomingCallSid : this.CallSid;
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return;
+        // }
+        this.extensionService.pauseOrResumeRecording(sid, 'pause').subscribe(response => {
+            //   this.stopRecordingTimer();
+            this.isPaused = true;
+        }, error => {
+            console.error('Error pausing recording:', error);
+            // Consider updating the UI to show the error state
         });
     }
-    getRemoveParticipants(participantId, conferenceId) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.extensionService.getRemoveParticipants(participantId, conferenceId).toPromise();
+    resumeRecording(sid) {
+        //   let sid;
+        const details = this.extensionService.getCallSid();
+        this.incomingCallSid = details.callSid;
+        this.incomingRecordCall = details.recordCall;
+        sid = this.incomingCallSid ? this.incomingCallSid : this.CallSid;
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return; // Skip if recording is not enabled
+        // }
+        this.extensionService.pauseOrResumeRecording(sid, 'resume').subscribe(response => {
+            this.isPaused = false;
+            this.startTimer1();
+        }, error => {
+            console.error('Error resuming recording', error);
         });
     }
-    getCallAuthId(response) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return {
-                id: response.callauth.id,
-                recordCall: response.callauth.recordCall
-            };
+    startTimer1() {
+        this.timerSubscription = interval(1000).subscribe(() => {
+            this.timeElapsed++;
         });
     }
-    getOutgoingCallToken(callAuthId) {
+    stopRecordingTimer() {
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe(); // Pause the timer
+            this.timerSubscription = undefined; // Optionally reset the subscription
+        }
+    }
+    // device: any;
+    onEndCall() {
+        this.extensionService.getRemoveParticipants(this.incomingCallData.participantId, this.incomingCallData.conferenceId).toPromise();
+    }
+    add(data) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this.extensionService.getConferenceCallToken({ authId: callAuthId }).toPromise();
+            if ((data === null || data === void 0 ? void 0 : data.status) != 'ringing') {
+                let device = yield this.twilioService.connect('');
+                console.log(device, 'callConnect');
+            }
+            else if ((data === null || data === void 0 ? void 0 : data.status) == 'ringing') {
+                this.twilioService.addIncomingParticipant(data === null || data === void 0 ? void 0 : data.id, this.twilioService.conferenceCallInfo.conferenceId).subscribe((data) => {
+                    console.log(data, 'bhhhhhhhhhhhhhhhhhhh');
+                });
+            }
+            // this.device = new Device();/
+            // Device.connect({ conferenceName: 'my-conference-room' });
+            // this.device = new Device({ conferenceName: 'my-conference-room' });
         });
     }
-    connectToDevice(token, callData) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const options = {
-                codecPreferences: ['opus', 'pcmu'],
-                closeProtection: true,
-            };
-            this.device = new Device(token.value, options);
-            this.call = yield this.device.connect({
-                params: {
-                    From: callData.from,
-                    To: callData.phone,
-                    Env: environment.abb,
-                    Token: token.id,
-                    Ext: callData.extNum
-                },
-                rtcConstraints: { audio: { deviceId: 'default' } },
-            });
-            this.call['callInfo'] = JSON.parse(JSON.stringify(callData));
-            this.setupEventListeners();
-        });
-    }
-    setupEventListeners() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        this.startTimer();
-        (_a = this.device) === null || _a === void 0 ? void 0 : _a.on('error', (err) => {
-            console.log(err);
-            this.showRingAnimation = false;
-            this.stopTimer();
-        });
-        (_b = this.call) === null || _b === void 0 ? void 0 : _b.on('error', (error) => {
-            this.showRingAnimation = false;
-            this.stopTimer();
-        });
-        (_c = this.call) === null || _c === void 0 ? void 0 : _c.on('disconnect', (item) => {
-            console.log('test-disconnect');
-            // this.endCall();
-        });
-        (_d = this.call) === null || _d === void 0 ? void 0 : _d.on('ringing', () => {
-        });
-        (_e = this.call) === null || _e === void 0 ? void 0 : _e.on('reject', () => {
-            console.log('test5');
-            this.endCall();
-        });
-        (_f = this.call) === null || _f === void 0 ? void 0 : _f.on('accept', () => {
-            this.showRingAnimation = false;
-            this.disbaleEndCallBtn = false;
-            // Start recording if recordCall is true and call is accepted for 30 seconds
-            // if (this.recordCall) {
-            //   setTimeout(() => {
-            //     if (this.isRecording) return; // If already recording, skip
-            //     this.startRecording();
-            //   }, 30000);
-            // } else {
-            //   this.stopRecording();
-            // }
-        });
-        (_g = this.call) === null || _g === void 0 ? void 0 : _g.on('messageReceived', (message) => {
-        });
-    }
-    startTimer() {
-        let seconds = 0;
-        this.intervalId = setInterval(() => {
-            seconds++;
-            this.timer = this.formatTime(seconds);
-        }, 1000);
-    }
-    stopTimer() {
-        clearInterval(this.intervalId);
+}
+IncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, deps: [{ token: ExtensionService }, { token: TwilioService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
+IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1\">\r\n    <div style=\"display: flex; flex-direction: column;\">\r\n        <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n            <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n        </div>\r\n        <div class=\"callerDetails\">\r\n            <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n            <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n             <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n             <p>{{incomingCallData?.phone}}</p>\r\n        </div>\r\n      \r\n        <!-- <div class=\"callerDetails\">\r\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n        </div> -->\r\n        <div class=\"call-action-btns\">\r\n            <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"add(newIncomingCallsList[0])\"> call </span> \r\n            </button>\r\n                <!-- <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\r\n                </button> -->\r\n            <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [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=\"newIncomingCallsList[0]?.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=\"\">\r\n                    <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.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=\"newIncomingCallsList[0]?.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(newIncomingCallsList[0])\"> call_end </span>\r\n            </button> -->\r\n            <button class=\"call-btn reject-btn\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"onEndCall()\"> 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\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n            </defs>\r\n            <g class=\"parallax\">\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n    <div class=\"collops\">\r\n        <div class=\"d-flex w-100\">\r\n            <div class=\"d-flex flex-column container-fluid\" >\r\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">            \r\n                    <div class=\"p-2 \">\r\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n                            <div class=\"img\">\r\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n                            </div>\r\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n                                <div class=\"callerDetails-wrapper\">\r\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n                                    <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n                                </div>  \r\n                                <div class=\"d-flex align-items-center\">\r\n                                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n                                        <!-- <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span> -->\r\n                                        <span class=\"material-symbols-outlined\" (click)=\"add(data)\"> call </span>\r\n                                    </button>\r\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\"  (click)=\"toggleMute(data)\" [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=\"data?.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=\"\">\r\n                                            <button class=\"record-btn pause-resume\" *ngIf=\"data?.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=\"data?.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-wrapper reject-btn\">\r\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n                                    </button>\r\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n                                         (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n                                         [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n                                         [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n                                        <i class=\"fa fa-angle-right\"></i>\r\n                                    </div>\r\n                                    <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\">                                       \r\n                                        <i class=\"fa fa-angle-right\"></i>                                \r\n                                    </div> -->\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \">   \r\n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n              </div>\r\n              <div class=\"text-center\">\r\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n              </div>\r\n              <div class=\"f-13\">\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Subject:</div>\r\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n                    </div>  \r\n                </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Email:</div>\r\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n                    </div>                      \r\n                </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                      <div class=\"col-6 mb-2\">\r\n                          <div class=\"\">Number:</div>\r\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n                      </div>\r\n                      <div class=\"col-6\">\r\n                          <div class=\"\">Language:</div>\r\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n                  <div class=\"row mb-2\">\r\n                      <div class=\"col-6 mb-2\">\r\n                          <div class=\"\">Extension:</div>\r\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n\r\n                  <div class=\"row mb-3\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Image:</div>\r\n                        <div class=\"text-ellipsis\">\r\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" 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=\"\">Message:</div>\r\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"\">Point Name:</div>\r\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"\">Source Name:</div>\r\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.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          </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\" [ngStyle]=\"{'width': '756px'}\">\r\n            <defs>\r\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n            </defs>\r\n            <g class=\"parallax\">\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>", styles: [".call-container{width:385px!important;height:646px!important;margin:auto;border-radius:30px;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}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.call-container-open{width:752px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px}.call-btn-wrapper span{color:#fff;line-height:unset!important}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@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}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.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}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;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}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.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}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;display:flex;justify-content:center;align-items:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.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}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;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;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.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%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1\">\r\n    <div style=\"display: flex; flex-direction: column;\">\r\n        <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n            <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n        </div>\r\n        <div class=\"callerDetails\">\r\n            <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n            <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n             <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n             <p>{{incomingCallData?.phone}}</p>\r\n        </div>\r\n      \r\n        <!-- <div class=\"callerDetails\">\r\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n        </div> -->\r\n        <div class=\"call-action-btns\">\r\n            <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"add(newIncomingCallsList[0])\"> call </span> \r\n            </button>\r\n                <!-- <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\r\n                </button> -->\r\n            <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [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=\"newIncomingCallsList[0]?.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=\"\">\r\n                    <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.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=\"newIncomingCallsList[0]?.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(newIncomingCallsList[0])\"> call_end </span>\r\n            </button> -->\r\n            <button class=\"call-btn reject-btn\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"onEndCall()\"> 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\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n            </defs>\r\n            <g class=\"parallax\">\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n    <div class=\"collops\">\r\n        <div class=\"d-flex w-100\">\r\n            <div class=\"d-flex flex-column container-fluid\" >\r\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">            \r\n                    <div class=\"p-2 \">\r\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n                            <div class=\"img\">\r\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n                            </div>\r\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n                                <div class=\"callerDetails-wrapper\">\r\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n                                    <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n                                </div>  \r\n                                <div class=\"d-flex align-items-center\">\r\n                                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n                                        <!-- <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span> -->\r\n                                        <span class=\"material-symbols-outlined\" (click)=\"add(data)\"> call </span>\r\n                                    </button>\r\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\"  (click)=\"toggleMute(data)\" [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=\"data?.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=\"\">\r\n                                            <button class=\"record-btn pause-resume\" *ngIf=\"data?.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=\"data?.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-wrapper reject-btn\">\r\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n                                    </button>\r\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n                                         (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n                                         [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n                                         [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n                                        <i class=\"fa fa-angle-right\"></i>\r\n                                    </div>\r\n                                    <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\">                                       \r\n                                        <i class=\"fa fa-angle-right\"></i>                                \r\n                                    </div> -->\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \">   \r\n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n              </div>\r\n              <div class=\"text-center\">\r\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n              </div>\r\n              <div class=\"f-13\">\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Subject:</div>\r\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n                    </div>  \r\n                </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Email:</div>\r\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n                    </div>                      \r\n                </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                      <div class=\"col-6 mb-2\">\r\n                          <div class=\"\">Number:</div>\r\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n                      </div>\r\n                      <div class=\"col-6\">\r\n                          <div class=\"\">Language:</div>\r\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n                  <div class=\"row mb-2\">\r\n                      <div class=\"col-6 mb-2\">\r\n                          <div class=\"\">Extension:</div>\r\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n\r\n                  <div class=\"row mb-3\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Image:</div>\r\n                        <div class=\"text-ellipsis\">\r\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" 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=\"\">Message:</div>\r\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"\">Point Name:</div>\r\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"\">Source Name:</div>\r\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.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          </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\" [ngStyle]=\"{'width': '756px'}\">\r\n            <defs>\r\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n            </defs>\r\n            <g class=\"parallax\">\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>", styles: [".call-container{width:385px!important;height:646px!important;margin:auto;border-radius:30px;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}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.call-container-open{width:752px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px}.call-btn-wrapper span{color:#fff;line-height:unset!important}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@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}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.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}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;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}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.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}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;display:flex;justify-content:center;align-items:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.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}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;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;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.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%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"] }]
+        }], ctorParameters: function () { return [{ type: ExtensionService }, { type: TwilioService }, { type: NotificationService }]; }, propDecorators: { incomingCallData: [{
+                type: Input
+            }], newIncomingCallsList: [{
+                type: Input
+            }], deviceId: [{
+                type: Input
+            }], closeIncomingCallDiv: [{
+                type: Output
+            }], incomingCallsNewList: [{
+                type: Output
+            }], selectedIncomingCallInfo: [{
+                type: Output
+            }] } });
+
+class CallProgressComponent {
+    // contacts: any[] = [
+    //   { name: 'Pamela Cox', title: 'Product Designer', img: 'assets/images/user.jpg' },
+    //   { name: 'Roger S. Wood', title: 'JavaScript Programmer', img: 'assets/images/user.jpg' },
+    //   { name: 'Victor Blackston', title: 'Database Administrator', img: 'assets/images/user.jpg' },
+    //   { name: 'Tammy Rios', title: 'Support', img: 'assets/images/user.jpg' },
+    //   { name: 'Carlos Henderson', title: 'Software Architect', img: 'assets/images/user.jpg' },
+    //   { name: 'Elizabeth Bailey', title: 'HR', img: 'assets/images/user.jpg' }
+    // ];
+    constructor(extensionService, cdr, twilioService) {
+        this.extensionService = extensionService;
+        this.cdr = cdr;
+        this.twilioService = twilioService;
+        this.newIncomingCallsList = [];
+        this.endCallEvent = new EventEmitter();
+        this.incomingCallsNewInfo = new EventEmitter();
+        this.minimiseEvent = new EventEmitter();
+        this.showRingAnimation = false;
         this.timer = '00:00';
+        this.showKeypad = false;
+        this.keypadVal = keypad;
+        this.callInput = '';
+        this.isMute = false;
+        this.disbaleEndCallBtn = true;
+        this.showClearBtn = false;
+        this.isCollops = false;
+        // Conference state flag
+        this.isConference = false;
+        this.isOutgoingCall = true;
+        // Incoming call variables
+        this.incomingCallDiv = false;
+        //@Output() showCallProgressEvent: EventEmitter<void> = new EventEmitter<void>();
+        this.incomingCallInitiated = new EventEmitter();
+        this.isRecording = false;
+        this.isPaused = false;
+        this.timeElapsed = 0; // in seconds
+        this.recordCall = false;
+        this.callStatus = 'ringing';
+        this.showContactsPanel = false;
+        this.isAddRemoveParticipant = false;
+        this.isConcurrentIncoming = false;
+        this.isCallOnHold = false;
+        this.contacts = [];
+        this.currentCallList = [];
+        this.isMinimised = false;
+        console.log('Call Progress Component');
     }
-    formatTime(totalSeconds) {
-        const minutes = Math.floor(totalSeconds / 60);
-        const seconds = totalSeconds % 60;
-        return `${this.pad(minutes)}:${this.pad(seconds)}`;
-    }
-    pad(value) {
-        return value < 10 ? `0${value}` : `${value}`;
-    }
-    handleError(error) {
-        swal("Error", error, "error");
-    }
-    // endCall() {
-    //   console.log('endCall() called');
-    //   console.log('Current call:', this.call?.parameters['From']);
-    //   console.log('Held call exists:', !!this.heldCall);
-    //   // Disconnect the current active call
-    //   if (this.call) {
-    //     this.call.disconnect();
-    //     this.call = undefined;
-    //   }
-    //   this.showRingAnimation = false;
-    //   this.stopTimer();
-    //   // If there's a held call, make it active
-    //   if (this.heldCall) {
-    //     console.log('Resuming held call:', this.heldCall.parameters['From']);
-    //     // Make held call the active call
-    //     this.call = this.heldCall;
-    //     this.heldCall = undefined;
-    //     // this.isCallOnHold = false;
-    //     this.isCallOnHold = !!this.heldCall;
-    //     // Unmute the resumed call
-    //     this.call.mute(false);
-    //     // Update UI with the resumed call info
-    //     const fromNumber = this.call.parameters['From'];
-    //     const callerName = this.call.customParameters?.get('name') || '-';
-    //     const callerImg = this.call.customParameters?.get('image') || 'assets/images/user.jpg';
-    //     this.callData = {
-    //       ...this.callData,
-    //       phone: fromNumber,
-    //       displayNum: fromNumber,
-    //       name: callerName,
-    //       img: callerImg
-    //     };
-    //     // Restart timer for the resumed call
-    //     this.startTimer();
-    //     this.disbaleEndCallBtn = false;
-    //     console.log('Held call is now active:', this.callData);
-    //     this.cdr.detectChanges();
-    //   } else {
-    //     // No held call, completely end
-    //     console.log('No held call, ending completely');
-    //     this.endCallEvent.emit();
-    //     this.maximiseDialpad();
-    //   }
-    // }
-    endCall(isAllCallEnd) {
-        var _a, _b;
-        return __awaiter(this, void 0, void 0, function* () {
-            console.log('endCall() called');
-            console.log('Current call:', (_a = this.call) === null || _a === void 0 ? void 0 : _a.parameters['From']);
-            console.log('Held call exists:', !!this.heldCall);
-            // Leaving conference state when ending current call action
-            this.isConference = false;
-            // if (this.call) {
-            //     this.call.disconnect();
-            //     this.call.reject();
-            //     this.call = undefined;
-            // }
-            this.showRingAnimation = false;
-            this.stopTimer();
-            if (isAllCallEnd) {
-                this.onEndCall({}, isAllCallEnd);
-                this.currentCallList = [];
-                this.endCallEvent.emit();
-            }
-            else {
-                this.onEndCall(this.currentCall, isAllCallEnd);
-                this.currentCallList = this.currentCallList.filter((c) => (c === null || c === void 0 ? void 0 : c.participantId) !== this.currentCall.participantId);
-                if (this.currentCallList.length > 0) {
-                    this.currentCallList[0].isHold = false;
-                    this.currentCall = this.currentCallList[0];
-                    yield this.onholdOrUnholdParticipant({
-                        participantId: (_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.participantId,
-                        conferenceId: this.conferenceId,
-                        hold: false
-                    });
+    ngOnInit() {
+        console.log('Call Progress Component ngOnInit');
+        // Subscribe to incoming calls from TwilioService
+        try {
+            this.twilioService.currentCall.subscribe((incoming) => {
+                var _a;
+                if (!incoming) {
+                    return;
                 }
-                else {
-                    this.currentCall = null;
-                    this.currentCallList = [];
-                    this.endCallEvent.emit();
+                console.log('TwilioService.currentCall emitted:', incoming);
+                console.log('Current call status:', (_a = this.call) === null || _a === void 0 ? void 0 : _a.status());
+                // If there is an ongoing call, show concurrent incoming banner
+                if (this.call && this.call.status() === 'open') {
+                    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) => { var _a, _b; return ((_a = c === null || c === void 0 ? void 0 : c.parameters) === null || _a === void 0 ? void 0 : _a.CallSid) === ((_b = incoming === null || incoming === void 0 ? void 0 : incoming.parameters) === null || _b === void 0 ? void 0 : _b.CallSid); });
+                    if (!exists) {
+                        this.newIncomingCallsList = [...(this.newIncomingCallsList || []), incoming];
+                        this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
+                    }
+                    this.cdr.detectChanges();
                 }
-            }
-        });
-    }
-    toggleMute() {
-        var _a;
-        this.isMute = !this.isMute;
-        (_a = this.call) === null || _a === void 0 ? void 0 : _a.mute(this.isMute);
-    }
-    toggleKeypad() {
-        this.showKeypad = !this.showKeypad;
-        this.callInput = '';
-    }
-    toggleContactsPanel(isRemove) {
-        if (isRemove) {
-            this.showContactsPanel = false;
-            this.isAddRemoveParticipant = !this.isAddRemoveParticipant;
+            });
         }
-        else {
-            this.isAddRemoveParticipant = false;
-            this.showContactsPanel = !this.showContactsPanel;
-            this.GetContactsList();
+        catch (e) {
+            console.error('Error subscribing to incoming calls:', e);
         }
     }
-    addRemoveParticipant() {
-        var _a;
-        const conferenceSId = (_a = this.addRes) === null || _a === void 0 ? void 0 : _a.conferenceSid;
-        this.isAddRemoveParticipant = !this.isAddRemoveParticipant;
-        this.allParticipentList = this.getAllParticipants(conferenceSId);
-    }
-    add(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if ((data === null || data === void 0 ? void 0 : data.status) != 'ringing') {
-                let device = yield this.twilioService.connect('');
-                console.log(device, 'callConnect');
+    ngOnChanges(changes) {
+        var _a, _b, _c;
+        console.log('Call Progress Component ngOnChanges');
+        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 ((data === null || data === void 0 ? void 0 : data.status) == 'ringing') {
-                this.twilioService.addIncomingParticipant(data === null || data === void 0 ? void 0 : data.id, this.twilioService.conferenceCallInfo.conferenceId).subscribe((data) => {
-                    console.log(data, 'bhhhhhhhhhhhhhhhhhhh');
-                });
+            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)) {
+                console.log('test-startCall123', changes['callData'].currentValue);
+                this.currentCall = Object.assign(Object.assign({}, changes['callData'].currentValue), { img: 'assets/images/user.jpg' });
+                this.startCall(changes['callData'].currentValue);
             }
-            // this.device = new Device();/
-            // Device.connect({ conferenceName: 'my-conference-room' });
-            // this.device = new Device({ conferenceName: 'my-conference-room' });
-        });
+        }
+        if (changes['newIncomingCallsList']) {
+            try {
+                if (changes['newIncomingCallsList'].currentValue) {
+                    // Check if there's an active ongoing call
+                    if (this.call && (this.call.status() == 'open')) {
+                        // Concurrent incoming - show banner on top of active call
+                        this.isConcurrentIncoming = true;
+                        this.incomingCallDiv = false;
+                        // const inc = changes['newIncomingCallData'].currentValue;
+                        // if (this.newIncomingCallsList && Array.isArray(this.newIncomingCallsList)) {
+                        //   const exists = this.newIncomingCallsList.some((c: any) => c?.parameters?.CallSid === inc?.parameters?.CallSid);
+                        //   if (!exists) {
+                        //     this.newIncomingCallsList = [...this.newIncomingCallsList, inc];
+                        //     this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
+                        //   }
+                        // } else {
+                        //   this.newIncomingCallsList = [inc];
+                        //   this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
+                        // }
+                        console.log(changes['newIncomingCallsList'].currentValue);
+                        this.newIncomingCallsList.forEach((res) => {
+                            this.currentCallList.push(Object.assign(Object.assign({}, res), { img: 'assets/images/user.jpg', isIncomingCall: true, isHold: false, isMute: false, isConference: false }));
+                        });
+                        this.cdr.detectChanges();
+                    }
+                    else {
+                        // Pure incoming - show full incoming UI
+                        this.isConcurrentIncoming = false;
+                        this.incomingCallDiv = true;
+                        this.cdr.detectChanges();
+                    }
+                }
+            }
+            catch (e) {
+                console.log(e);
+            }
+        }
     }
-    rejectCallFromList(data) {
-        console.log(data, '266565655');
-        // this.twilioService.rejectIncomingParticipant(data?.id, this.twilioService.conferenceCallInfo.conferenceId).subscribe((data: any) => {
-        //   console.log(data,'bhhhhhhhhhhhhhhhhhhh')
-        // })
+    ngAfterViewInit() {
+        // this.isRecording = false;
+        // setTimeout(() => {
+        //   this.isRecording = false;
+        // }, 3000);
     }
-    callContact(contact) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        return __awaiter(this, void 0, void 0, function* () {
-            console.log('Adding participant:', contact);
-            console.log('this.call', this.call);
-            console.log('this.call', this.call.status());
-            // Check if there's an active call
-            if (!this.call || this.call.status() !== 'open') {
-                console.error('No active call');
-                return;
+    GetContactsList() {
+        const token = localStorage.getItem('ext_token') || '';
+        this.extensionService.readContacts(token).subscribe((res) => {
+            console.log('API Response:', res);
+            // Note: Capital B in phoneBook
+            if (res && res.phoneBook) {
+                this.contacts = res.phoneBook;
+                console.log('Contacts array:', this.contacts);
             }
-            // Get the phone number from the contact
-            const phoneNumber = (_b = (_a = contact === null || contact === void 0 ? void 0 : contact.numbersList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.number;
-            const currentCall = this.currentCallList.find((c) => (c === null || c === void 0 ? void 0 : c.phone) === phoneNumber);
-            if (!phoneNumber || currentCall) {
-                console.error('No phone number found for contact');
-                return;
+            else if (Array.isArray(res)) {
+                this.contacts = res;
             }
+            else {
+                this.contacts = [];
+            }
+            console.log('Contacts array:', this.contacts);
+            this.cdr.detectChanges();
+        }, (error) => {
+            console.error('Error fetching contacts:', error);
+            this.contacts = [];
+        });
+    }
+    startCall(callData) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log(callData, 'callData');
             try {
-                if (this.isConference) {
-                    let data = yield this.addParticipantToCall({
-                        from: ((_c = this.callData) === null || _c === void 0 ? void 0 : _c.from) || ((_d = this.selectedCallerId) === null || _d === void 0 ? void 0 : _d.number),
-                        route: "OUTGOING",
-                        participantNumber: phoneNumber,
-                        conferenceId: this.conferenceId
-                    });
-                    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,
-                        img: (contact === null || contact === void 0 ? void 0 : contact.img) || 'assets/images/user.jpg',
-                        participantId: data === null || data === void 0 ? void 0 : data.participantId,
-                        from: (_e = this.selectedCallerId) === null || _e === void 0 ? void 0 : _e.number,
-                        isIncomingCall: false,
-                        isHold: false,
-                        isLeft: false,
-                        isConference: true
-                    };
-                    this.cdr.detectChanges();
-                    console.log(this.callData, 'this.callData5656');
-                    console.log('test1111115555555555');
-                    this.currentCall = this.callData;
-                    this.currentCallList.push(Object.assign({}, this.callData));
-                    console.log("Participant added to conference:", phoneNumber);
-                    this.showRingAnimation = false;
-                }
-                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;
-                            yield this.onholdOrUnholdParticipant({
-                                participantId: c === null || c === void 0 ? void 0 : c.participantId,
-                                conferenceId: this.conferenceId,
-                                hold: c === null || c === void 0 ? void 0 : c.isHold
+                this.showRingAnimation = true;
+                const payload = {
+                    channelId: environment.channelId,
+                    userId: localStorage.getItem('userId'),
+                    to: callData.phone,
+                    fromNumber: callData.from,
+                    scope: 'local',
+                };
+                const response = yield this.initiateCall(payload);
+                this.conferenceId = (_a = response === null || response === void 0 ? void 0 : response.callauth) === null || _a === void 0 ? void 0 : _a.id;
+                if (response.status == 200) {
+                    const { id: callAuthId, recordCall } = yield this.getCallAuthId(response);
+                    this.getUserInformation(callAuthId);
+                    this.recordCall = recordCall; // Store the recordCall value
+                    const tokenData = yield this.getOutgoingCallToken(callAuthId);
+                    yield this.connectToDevice(tokenData.token, callData);
+                    yield this.pollCallStatus(callAuthId);
+                    setTimeout(() => __awaiter(this, void 0, void 0, function* () {
+                        var _b, _c;
+                        try {
+                            this.addRes = yield this.addParticipantToCall({
+                                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
                             });
+                            this.callData = Object.assign(Object.assign({}, callData), { participantId: (_b = this.addRes) === null || _b === void 0 ? void 0 : _b.participantId, isHold: false, isLeft: false, isIncomingCall: false, isConference: false });
+                            this.call['callInfo'] = JSON.parse(JSON.stringify(this.callData));
+                            console.log('test111111');
+                            this.currentCall = Object.assign(Object.assign({}, this.callData), { img: callData.img || 'assets/images/user.jpg' });
+                            this.currentCallList.push(Object.assign(Object.assign({}, this.callData), { img: callData.img || 'assets/images/user.jpg' }));
+                            console.log('Initial participantId:', (_c = this.addRes) === null || _c === void 0 ? void 0 : _c.participantId);
                         }
-                    }));
-                    // 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;
-                    }
-                    // Add participant to the conference
-                    let data = yield this.addParticipantToCall({
-                        from: ((_f = this.callData) === null || _f === void 0 ? void 0 : _f.from) || ((_g = this.selectedCallerId) === null || _g === void 0 ? void 0 : _g.number),
-                        route: "OUTGOING",
-                        participantNumber: phoneNumber,
-                        conferenceId: this.conferenceId
-                    });
-                    // this.callData = {
-                    //   ...this.callData,
-                    //   participantId: ,
-                    // }
-                    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,
-                        img: (contact === null || contact === void 0 ? void 0 : contact.img) || 'assets/images/user.jpg',
-                        participantId: data === null || data === void 0 ? void 0 : data.participantId,
-                        from: (_h = this.selectedCallerId) === null || _h === void 0 ? void 0 : _h.number,
-                        isIncomingCall: false,
-                        isHold: false,
-                        isLeft: false,
-                        isConference: false
-                    };
-                    this.cdr.detectChanges();
-                    console.log(this.callData, 'this.callData');
-                    console.log('test111111');
-                    this.currentCall = this.callData;
-                    this.currentCallList.push(Object.assign({}, this.callData));
-                    console.log("Participant added to conference:", phoneNumber);
-                    this.showRingAnimation = false;
+                        catch (e) {
+                            console.error('Error adding initial participant:', e);
+                        }
+                    }), 1000);
+                    // Poll the status for 30-45 seconds
+                }
+                else if (response.status == 201) {
+                    swal("Error", response.message.join("<br/>"), "error");
+                    console.log('test2');
+                    this.endCall();
                 }
             }
             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);
+                console.log('test3');
+                this.endCall();
             }
         });
     }
-    getAllParticipants(conferenceSid) {
-        this.extensionService.getAllParticipants(conferenceSid).subscribe((res) => {
-            this.allParticipentList = res.participants;
+    onHoldCall(c) {
+        console.log(c, 'dsdsdsdsdsdsadsa');
+        this.onholdOrUnholdParticipant({
+            participantId: c.participantId,
+            conferenceId: this.conferenceId,
+            hold: !c.hold
         });
-    }
-    // acceptConcurrentCall(incomingCall: any) {
-    //   if (!incomingCall) return;
-    //   // Put current call on hold instead of disconnecting
-    //   if (this.call) {
-    //     this.heldCall = this.call;
-    //     this.isCallOnHold = true;
-    //     // Mute the held call
-    //     this.heldCall.mute(true);
-    //   }
-    //   incomingCall.accept();
-    //   this.call = incomingCall;
-    //   this.callData.phone = incomingCall.parameters['From'];
-    //   this.callData.name = incomingCall.customParameters?.get('name') || '-';
-    //   this.callData.img = incomingCall.customParameters?.get('image') || 'assets/images/user.jpg';
-    //   this.isConcurrentIncoming = false;
-    //   this.incomingCallDiv = false;
-    //   this.disbaleEndCallBtn = false;
-    //   // Reset timer for new call
-    //   this.stopTimer();
-    //   this.startTimer();
-    //   this.cdr.detectChanges();
-    // }
-    acceptConcurrentCall(incomingCall) {
-        var _a, _b;
-        if (!incomingCall)
-            return;
-        // Put current call on hold instead of disconnecting
-        // if (this.call) {
-        //   this.heldCall = this.call;
-        this.isCallOnHold = true;
-        //   // Mute the held call
-        //   this.heldCall.mute(true);
-        // }
-        // Accept the new call
-        incomingCall.accept();
-        this.call = incomingCall;
-        this.callData.phone = incomingCall.parameters['From'];
-        this.callData.name = ((_a = incomingCall.customParameters) === null || _a === void 0 ? void 0 : _a.get('name')) || '-';
-        this.callData.img = ((_b = incomingCall.customParameters) === null || _b === void 0 ? void 0 : _b.get('image')) || 'assets/images/user.jpg';
-        this.isConcurrentIncoming = false;
-        this.incomingCallDiv = false;
-        this.disbaleEndCallBtn = false;
-        // 🟢 Remove the accepted call from incoming list
-        this.newIncomingCallsList = (this.newIncomingCallsList || []).filter((c) => { var _a, _b; return ((_a = c === null || c === void 0 ? void 0 : c.parameters) === null || _a === void 0 ? void 0 : _a.CallSid) !== ((_b = incomingCall === null || incomingCall === void 0 ? void 0 : incomingCall.parameters) === null || _b === void 0 ? void 0 : _b.CallSid); });
-        this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
-        // 🕒 Reset timer for new call
-        this.stopTimer();
-        this.startTimer();
+        c.hold = !c.hold;
         this.cdr.detectChanges();
     }
-    swapCalls(callInfo) {
-        var _a, _b, _c;
+    onEndCall(c, isAllCallEnd) {
         return __awaiter(this, void 0, void 0, function* () {
-            // if (!this.heldCall || !this.call) return;
-            console.log(this.call, 'this.call');
-            console.log(this.heldCall, 'this.heldCall');
-            console.log(this.currentCallList, 'this.currentCallList');
-            console.log(callInfo, 'callInfo for swapCalls');
-            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: this.conferenceId,
-                        hold: c === null || c === void 0 ? void 0 : c.isHold
-                    });
-                }
-                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: this.conferenceId,
-                        hold: c === null || c === void 0 ? void 0 : c.isHold
-                    });
-                    this.currentCall = c;
-                }
-            }));
-            // await this.onholdOrUnholdParticipant({
-            //   participantId: this.call?.callInfo?.participantId,
-            //   conferenceId: this.conferenceId,
-            //   hold: true
-            // });
-            // await this.onholdOrUnholdParticipant({
-            //   participantId: this.heldCall?.callInfo?.participantId,
-            //   conferenceId: this.conferenceId,
-            //   hold: false
-            // });
-            console.log('Swapping calls...');
-            console.log('Before swap - Active call:', this.call.parameters['From']);
-            console.log('Before swap - Held call:', this.heldCall.parameters['From']);
-            // Swap the calls
-            // const temp = this.call;
-            // this.call = this.heldCall;
-            // this.heldCall = temp;
-            // this.call.mute(false);
-            // this.heldCall.mute(true);
-            // Update UI with active call info - extract from call parameters
-            const fromNumber = this.call.parameters['From'];
-            const callerName = ((_a = this.call.customParameters) === null || _a === void 0 ? void 0 : _a.get('name')) || '-';
-            const callerImg = ((_b = this.call.customParameters) === null || _b === void 0 ? void 0 : _b.get('image')) || 'assets/images/user.jpg';
-            const displayNumber = ((_c = this.call.customParameters) === null || _c === void 0 ? void 0 : _c.get('displayNumber')) || '-';
-            // Update callData to refresh the main UI
-            // this.callData = {
-            //   ...this.callData,
-            //   phone: fromNumber,
-            //   displayNum: (displayNumber && displayNumber !== '-') ? displayNumber : fromNumber,
-            //   name: (callerName && callerName !== '-') ? callerName : (this.callData?.name || fromNumber),
-            //   img: callerImg || this.callData?.img || 'assets/images/user.jpg'
-            // };
-            // console.log('After swap - Active call:', this.call.parameters['From']);
-            // console.log('After swap - Held call:', this.heldCall.parameters['From']);
-            // console.log('Updated callData:', this.callData);
-            console.log('this.currentCallList after swap', this.currentCallList);
-            this.cdr.detectChanges();
+            console.log(c, 'dsdsdsdsdsdsadsa');
+            let participantId = isAllCallEnd ? 'all' : c.participantId || c.participantId;
+            let res = yield this.getRemoveParticipants(participantId, this.conferenceId);
+            if ((res === null || res === void 0 ? void 0 : res.status) == 201 && (res === null || res === void 0 ? void 0 : res.message) == 'participant already left') {
+                this.currentCallList = this.currentCallList.filter((item) => item.participantId !== c.participantId);
+                this.currentCall = this.currentCallList.length > 0 ? this.currentCallList[0] : null;
+                this.cdr.detectChanges();
+            }
+            yield this.getAllParticipants(this.conferenceId);
         });
     }
-    mergeCalls() {
+    initiateCall(payload) {
         return __awaiter(this, void 0, void 0, function* () {
-            // Merge functionality - unmute both calls for conference
-            if (this.currentCallList.length > 1) {
-                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 = false;
-                        yield this.onholdOrUnholdParticipant({
-                            participantId: c === null || c === void 0 ? void 0 : c.participantId,
-                            conferenceId: this.conferenceId,
-                            hold: false
-                        });
-                    }
-                    c.isConference = true;
-                }));
-                // await this.onholdOrUnholdParticipant({
-                //   participantId: this.heldCall?.callInfo?.participantId,
-                //   conferenceId: this.conferenceId,
-                //   hold: false
-                // });
-                // this.heldCall.mute(false);
-                // this.call.mute(false);
-                this.isCallOnHold = false;
-                this.isConference = true;
-                this.cdr.detectChanges();
-            }
+            return yield this.extensionService.initiateCall(payload).toPromise();
         });
     }
-    endHeldCall() {
-        // if (this.heldCall) {
-        //   this.heldCall.disconnect();
-        //   this.heldCall = undefined;
-        //   this.isCallOnHold = false;
-        //   this.cdr.detectChanges();
-        // }
+    onholdOrUnholdParticipant(payload) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.extensionService.holdParticipant(payload).toPromise();
+        });
     }
-    rejectConcurrentCall(incomingCall) {
-        if (!incomingCall)
-            return;
-        if (incomingCall.reject) {
-            incomingCall.reject();
-        }
-        if (incomingCall.disconnect)
-            incomingCall.disconnect();
-        // Remove from list
-        this.newIncomingCallsList = (this.newIncomingCallsList || []).filter((c) => { var _a, _b; return ((_a = c === null || c === void 0 ? void 0 : c.parameters) === null || _a === void 0 ? void 0 : _a.CallSid) !== ((_b = incomingCall === null || incomingCall === void 0 ? void 0 : incomingCall.parameters) === null || _b === void 0 ? void 0 : _b.CallSid); });
-        this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
-        // If no more incoming, hide banner
-        if (!this.newIncomingCallsList || this.newIncomingCallsList.length === 0) {
-            this.isConcurrentIncoming = false;
-            this.incomingCallDiv = false;
-        }
-        this.cdr.detectChanges();
+    addParticipantToCall(payload) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.extensionService.addParticipant(payload).toPromise();
+        });
     }
-    onCallInputs(num) {
-        var _a;
-        try {
-            if (Number.isInteger(num) || num == '+' || num == '*' || num == '#') {
-                if (num == '#') {
-                    new Audio(`/assets/dial-tones/dtmf/dtmf-hash-.mp3`).play();
-                }
-                else if (num == '*') {
-                    new Audio(`/assets/dial-tones/dtmf/dtmf-star-.mp3`).play();
-                }
-                else {
-                    new Audio(`/assets/dial-tones/dtmf/dtmf-${num}-.mp3`).play();
-                }
-                this.callInput = this.callInput + String(num);
-                this.showClearBtn = true;
-            }
-            let str = String(num);
-            (_a = this.call) === null || _a === void 0 ? void 0 : _a.sendDigits(str);
-        }
-        catch (e) {
-            console.log(e);
-        }
+    getCallStatusOfParticipants(participantId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.extensionService.getCallStatusOfParticipants(participantId).toPromise();
+        });
     }
-    onCallInputEnter(ev) {
-        var _a;
-        try {
-            (_a = this.call) === null || _a === void 0 ? void 0 : _a.sendDigits(String(ev.key));
-        }
-        catch (e) {
-            console.log(e);
-        }
+    getRemoveParticipants(participantId, conferenceId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.extensionService.getRemoveParticipants(participantId, conferenceId).toPromise();
+        });
     }
-    closeIncomingCall(data) {
-        // this.incomingCallDiv = false;
-        if (data.show) {
-            //this.showCallProgressEvent.emit()
-            // handle incoming call accepted
-            this.startTimer();
-            this.disbaleEndCallBtn = false;
-            this.call = data.call;
-            this.isConcurrentIncoming = false;
-            this.incomingCallDiv = false;
-            const incomingDetail = this.extensionService.getCallSid();
-            this.incomingRecordCall = incomingDetail.recordCall;
-            if (this.incomingRecordCall) {
-                this.startRecording();
-            }
-            else {
-                this.isRecording = false;
-            }
-            this.cdr.detectChanges();
-        }
-        else {
-            // incoming call rejected or auto-cancelled
-            this.isConcurrentIncoming = false;
-            this.incomingCallDiv = false;
-            // If there is NO active call, then propagate end. Otherwise keep ongoing UI.
-            if (!this.call || this.call.status() !== 'open') {
-                console.log('test7');
-                this.endCallEvent.emit();
-            }
-        }
-    }
-    clearInputs() {
-        this.callInput = this.callInput.slice(0, -1);
-    }
-    minimiseDialpad() {
-        this.minimiseEvent.emit(true);
-        this.isMinimised = true;
-    }
-    maximiseDialpad() {
-        this.minimiseEvent.emit(false);
-        this.isMinimised = false;
-    }
-    toggleRecording() {
-        if (this.isRecording) {
-            this.stopRecording();
-        }
-        else {
-            this.startRecording();
-        }
-    }
-    startRecording() {
-        var _a;
-        let sid;
-        const details = this.extensionService.getCallSid();
-        this.incomingCallSid = details.callSid;
-        this.incomingRecordCall = details.recordCall;
-        sid = this.incomingCallSid ? this.incomingCallSid : this.callSid || ((_a = this.addRes) === null || _a === void 0 ? void 0 : _a.conferenceSid);
-        // if (!this.incomingRecordCall && !this.recordCall) {
-        //   return;
-        // }
-        this.extensionService.getCallRecording(sid).subscribe(response => {
-            this.isRecording = true;
-            this.isPaused = false;
-            this.timeElapsed = 0;
-            this.startTimer1();
-        }, error => {
-            console.error('Error starting recording', error);
+    getCallAuthId(response) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return {
+                id: response.callauth.id,
+                recordCall: response.callauth.recordCall
+            };
         });
     }
-    stopRecording() {
-        // if (!this.incomingRecordCall && !this.recordCall) {
-        //   return;
-        // }
-        this.isRecording = false;
-        this.isPaused = false;
-        if (this.timerSubscription) {
-            this.timerSubscription.unsubscribe();
-        }
-    }
-    pauseRecording() {
-        const details = this.extensionService.getCallSid();
-        this.incomingCallSid = details.callSid;
-        this.incomingRecordCall = details.recordCall;
-        const sid = this.incomingCallSid ? this.incomingCallSid : this.callSid;
-        // if (!this.incomingRecordCall && !this.recordCall) {
-        //   return;
-        // }
-        this.extensionService.pauseOrResumeRecording(sid, 'pause').subscribe(response => {
-            this.stopRecordingTimer();
-            this.isPaused = true;
-        }, (error) => {
-            console.error('Error pausing recording:', error);
-            // Consider updating the UI to show the error state
+    getOutgoingCallToken(callAuthId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.extensionService.getConferenceCallToken({ authId: callAuthId }).toPromise();
         });
     }
-    resumeRecording() {
-        let sid;
-        const details = this.extensionService.getCallSid();
-        this.incomingCallSid = details.callSid;
-        this.incomingRecordCall = details.recordCall;
-        sid = this.incomingCallSid ? this.incomingCallSid : this.callSid;
-        // if (!this.incomingRecordCall && !this.recordCall) {
-        //   return; // Skip if recording is not enabled
-        // }
-        this.extensionService.pauseOrResumeRecording(sid, 'resume').subscribe(response => {
-            this.isPaused = false;
-            this.startTimer1();
-        }, error => {
-            console.error('Error resuming recording', error);
+    connectToDevice(token, callData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const options = {
+                codecPreferences: ['opus', 'pcmu'],
+                closeProtection: true,
+            };
+            this.device = new Device(token.value, options);
+            this.call = yield this.device.connect({
+                params: {
+                    From: callData.from,
+                    To: callData.phone,
+                    Env: environment.abb,
+                    Token: token.id,
+                    Ext: callData.extNum
+                },
+                rtcConstraints: { audio: { deviceId: 'default' } },
+            });
+            this.call['callInfo'] = JSON.parse(JSON.stringify(callData));
+            this.setupEventListeners();
         });
     }
-    startTimer1() {
-        this.timerSubscription = interval(1000).subscribe(() => {
-            this.timeElapsed++;
+    setupEventListeners() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        this.startTimer();
+        (_a = this.device) === null || _a === void 0 ? void 0 : _a.on('error', (err) => {
+            console.log(err);
+            this.showRingAnimation = false;
+            this.stopTimer();
+        });
+        (_b = this.call) === null || _b === void 0 ? void 0 : _b.on('error', (error) => {
+            this.showRingAnimation = false;
+            this.stopTimer();
+        });
+        (_c = this.call) === null || _c === void 0 ? void 0 : _c.on('disconnect', (item) => {
+            console.log('test-disconnect');
+            // this.endCall();
+        });
+        (_d = this.call) === null || _d === void 0 ? void 0 : _d.on('ringing', () => {
+        });
+        (_e = this.call) === null || _e === void 0 ? void 0 : _e.on('reject', () => {
+            console.log('test5');
+            this.endCall();
+        });
+        (_f = this.call) === null || _f === void 0 ? void 0 : _f.on('accept', () => {
+            this.showRingAnimation = false;
+            this.disbaleEndCallBtn = false;
+            // Start recording if recordCall is true and call is accepted for 30 seconds
+            // if (this.recordCall) {
+            //   setTimeout(() => {
+            //     if (this.isRecording) return; // If already recording, skip
+            //     this.startRecording();
+            //   }, 30000);
+            // } else {
+            //   this.stopRecording();
+            // }
+        });
+        (_g = this.call) === null || _g === void 0 ? void 0 : _g.on('messageReceived', (message) => {
         });
     }
-    stopRecordingTimer() {
-        if (this.timerSubscription) {
-            this.timerSubscription.unsubscribe(); // Pause the timer
-            this.timerSubscription = undefined; // Optionally reset the subscription
-        }
-    }
-    getFormattedTime() {
-        const minutes = Math.floor(this.timeElapsed / 60);
-        const seconds = this.timeElapsed % 60;
-        return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
-    }
-    pollCallStatus(callAuthId) {
-        const maxTime = 30000; // Poll for up to 30 seconds
-        const pollInterval = 3000; // Poll every 3 seconds
-        let elapsedTime = 0;
-        const intervalId = setInterval(() => __awaiter(this, void 0, void 0, function* () {
-            elapsedTime += pollInterval;
-            try {
-                const statusResponse = yield this.extensionService.getCallStatus(callAuthId).toPromise();
-                if (statusResponse && statusResponse.callDetails) {
-                    this.callStatus = statusResponse.callDetails.callStatus;
-                    if (this.callStatus === 'in-progress') {
-                        this.callSid = statusResponse.callDetails.callSid;
-                        if (this.recordCall && !this.isRecording) {
-                            this.startRecording();
-                        }
-                        clearInterval(intervalId);
-                    }
-                    else if (this.callStatus === 'completed') {
-                        clearInterval(intervalId);
-                        console.log('test1');
-                        this.endCall();
-                        this.stopRecording();
-                    }
-                    else if (this.callStatus === 'ringing') {
-                        // Continue polling; do not clear the interval yet
-                    }
-                }
-            }
-            catch (error) {
-                clearInterval(intervalId);
-            }
-            if (elapsedTime >= maxTime) {
-                // console.log('Max polling time reached. Stopping poll.');
-                clearInterval(intervalId);
-            }
-        }), pollInterval);
+    startTimer() {
+        let seconds = 0;
+        this.intervalId = setInterval(() => {
+            seconds++;
+            this.timer = this.formatTime(seconds);
+        }, 1000);
     }
-    getUserInformation(id) {
-        this.extensionService.getUserInformation(id).subscribe(response => {
-            console.log(response);
-        }, error => {
-            console.error('Error starting recording', error);
-        });
+    stopTimer() {
+        clearInterval(this.intervalId);
+        this.timer = '00:00';
     }
-    incomingCallsNewList(data) {
-        console.log(data, 'newIncomingCallsListOUR');
-        this.newIncomingCallsList = data;
-        this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
+    formatTime(totalSeconds) {
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = totalSeconds % 60;
+        return `${this.pad(minutes)}:${this.pad(seconds)}`;
     }
-    selectedIncomingCallInfo(data) {
-        this.selectedIncomingCall = data;
+    pad(value) {
+        return value < 10 ? `0${value}` : `${value}`;
     }
-    ngOnDestroy() {
-        this.callData.dial = false;
-        if (this.timerSubscription) {
-            this.timerSubscription.unsubscribe();
-        }
+    handleError(error) {
+        swal("Error", error, "error");
     }
-}
-CallProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, deps: [{ token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: TwilioService }], 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" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"!isMinimised\"\n    [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n    <!-- <lib-incoming-call *ngIf=\"incomingCallDiv && !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n        [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n        (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n        (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call> -->\n\n    <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n        <div class=\"held-call-banner\" *ngIf=\"isCallOnHold\">\n            <ng-container *ngFor=\"let heldCall of currentCallList\">\n            <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Hold</span>\n                        <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n                        <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\n                        <span>Swap</span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Incoming Call</span>\n                        <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n                        <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!heldCall?.isCallConnected\">\n                        <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\n                    </button>\n                    <button class=\"call-btn-wrapper reject-btn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(heldCall)\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n            </ng-container>\n        </div>\n\n        <!-- Compact banners for concurrent incoming (one per call) -->\n        <ng-container>\n            <div class=\"incoming-banners-container\" *ngIf=\"!isConference\">\n                <div class=\"incoming-banner\" *ngFor=\"let inc of newIncomingCallsList; let i = index\"\n                    [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 80) + 'px' }\">\n                    <div class=\"incoming-banner-content\">\n                        <div class=\"incoming-info\">\n                            <span class=\"incom ing-label\">Incoming call</span>\n                            <div class=\"incoming-caller\">\n                                <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\n                                    inc?.customParameters?.get('name') || '-' }}</span>\n                                <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\n                                    inc?.parameters?.From || '' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"incoming-actions\">\n                            <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(inc)\">\n                                <span class=\"material-symbols-outlined\">call</span>\n                            </button>\n                            <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(inc)\">\n                                <span class=\"material-symbols-outlined\">call_end</span>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <div *ngIf=\"!isConference\" [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\">\n\n            <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                <img class=\"avatar-img\" [src]=\"currentCall.img\" alt=\"\" width=\"120\" />\n            </div>\n            <div class=\"callerDetails\">\n                <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall.name || 'Unknown number'}}</h1>\n                <p>{{currentCall.displayNum ? currentCall.displayNum : currentCall.phone }}</p>\n                <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n            </div>\n\n            <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n                <div class=\"record-btn-container\">\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n            <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '110px'}\">\n                <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n                    <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\n                        [disabled]=\"currentCallList.length < 2\">\n                        <span>Merge</span>\n                    </button>\n                </div>\n                <div class=\"flex align-items-center justify-content-evenly mb-3\">\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute()\">\n                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n                    </button>\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n                    </button>\n                    <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                        <span class=\"material-symbols-outlined\"> add </span>\n                    </button>\n                </div>\n\n                <div>\n                    <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                        <span class=\"material-symbols-outlined\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n\n\n            <!-- <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n                <div class=\"contacts-header\">\n                    <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                    <div class=\"title\">Contacts</div>\n                    <span class=\"material-symbols-outlined search\"> search </span>\n                </div>\n                <div class=\"contacts-list\">\n                    <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                        <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                        <div class=\"contact-info\">\n                            <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n                            <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</div>\n                        </div>\n                        <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                            <span class=\"material-symbols-outlined\"> call </span>\n                            <span class=\"label\">Call</span>\n                        </button>\n                    </div>\n                </div>\n            </div> -->\n\n\n            <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n        </div>\n        <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n            <div class=\"contacts-header\">\n                <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                <div class=\"title\">Contacts</div>\n                <span class=\"material-symbols-outlined search\"> search </span>\n            </div>\n            <div class=\"contacts-list\">\n                <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                    <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                    <div class=\"contact-info\">\n                        <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n                        <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</div>\n                    </div>\n                    <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                        <span class=\"material-symbols-outlined\"> call </span>\n                        <span class=\"label\">Call</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"conference-call-view\" *ngIf=\"isConference\">\n            <div class=\"conf-heading\">\n                <span class=\"conf-icon material-symbols-outlined\"> groups </span>\n                <span class=\"conf-title\">Conference Call</span>\n            </div>\n\n            <div class=\"conf-name\">\n                <!-- {{ (callData?.name || callData?.displayNum || callData?.phone || '-') }} &\n                {{ (newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.name\n                || newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.number\n                || newIncomingCallsList?.[0]?.parameters?.From\n                || heldCall?.customParameters?.get('displayNumber')\n                || '-') }} -->\n                {{currentCallList?.[0]?.name || 'Unknown number'}} & {{currentCallList?.[1]?.name || 'Unknown number'}}\n            </div>\n            <div class=\"conf-timer\">{{ timer }}</div>\n            <!-- <div class=\"conf-record\">\n                <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\n                    <span class=\"material-symbols-outlined\"> stop_circle </span>\n                </button>\n            </div> -->\n\n            <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n                <div class=\"record-btn-container\">\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n\n            <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"conf-remove\" >\n                <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\n            </div>\n\n            <div class=\"conf-actions\">\n                <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute()\"\n                    [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n                </button>\n                <button class=\"circle-btn\" (click)=\"toggleKeypad()\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n                </button>\n                <button class=\"circle-btn\"  [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                    <span class=\"material-symbols-outlined\"> add </span>\n                </button>\n            </div>\n\n            <div class=\"conf-end\">\n                <button class=\"circle-btn danger\" (click)=\"endCall(true)\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> call_end </span>\n                </button>\n            </div>\n        </div>\n\n\n        <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\n            <div class=\"contacts-header\">\n                <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\n                <div class=\"title\">Contacts</div>\n                <span class=\"material-symbols-outlined search\"> search </span>\n            </div>\n            <div class=\"contacts-list\">\n                <div class=\"contact-item\" *ngFor=\"let c of allParticipentList\">\n                    <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                    <div class=\"contact-info\">\n                        <div class=\"contact-name\">{{c?.toName || 'Unknown'}}</div>\n                        <div class=\"contact-title\">{{ c?.to || 'Unknown'}}</div>\n                    </div>\n                    <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c.hold }\" (click)=\"onHoldCall(c)\">\n                        <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\n                        <!-- <span class=\"label\">Hold</span> -->\n                    </button>\n                     <button class=\"conference-contact\" (click)=\"onEndCall(c)\">\n                        <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n                        <!-- <span class=\"label\">End</span> -->\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"wave-container\">\n            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n                <defs>\n                    <path id=\"gentle-wave\"\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n                </defs>\n                <g class=\"parallax\">\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                    <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n                </g>\n            </svg>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;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:100000;flex-flow:column}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important;width:752px!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}.callerDetails h1{width:230px;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}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-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}.receive-btn{background-color:#28a745;border:2px solid #28a745}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.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{display:flex;flex-direction:column;gap:8px;width:100%}.incoming-banner{position:absolute;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:0 0 16px 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:1000}.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}.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:44px;height:44px;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}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;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:30px;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%}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 24px;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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.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=\"call-container\" *ngIf=\"!isMinimised\"\n    [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n    <!-- <lib-incoming-call *ngIf=\"incomingCallDiv && !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n        [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n        (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n        (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call> -->\n\n    <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n        <div class=\"held-call-banner\" *ngIf=\"isCallOnHold\">\n            <ng-container *ngFor=\"let heldCall of currentCallList\">\n            <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Hold</span>\n                        <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n                        <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\n                        <span>Swap</span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Incoming Call</span>\n                        <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n                        <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!heldCall?.isCallConnected\">\n                        <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\n                    </button>\n                    <button class=\"call-btn-wrapper reject-btn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(heldCall)\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n            </ng-container>\n        </div>\n\n        <!-- Compact banners for concurrent incoming (one per call) -->\n        <ng-container>\n            <div class=\"incoming-banners-container\" *ngIf=\"!isConference\">\n                <div class=\"incoming-banner\" *ngFor=\"let inc of newIncomingCallsList; let i = index\"\n                    [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 80) + 'px' }\">\n                    <div class=\"incoming-banner-content\">\n                        <div class=\"incoming-info\">\n                            <span class=\"incom ing-label\">Incoming call</span>\n                            <div class=\"incoming-caller\">\n                                <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\n                                    inc?.customParameters?.get('name') || '-' }}</span>\n                                <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\n                                    inc?.parameters?.From || '' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"incoming-actions\">\n                            <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(inc)\">\n                                <span class=\"material-symbols-outlined\">call</span>\n                            </button>\n                            <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(inc)\">\n                                <span class=\"material-symbols-outlined\">call_end</span>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <div *ngIf=\"!isConference\" [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\">\n\n            <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                <img class=\"avatar-img\" [src]=\"currentCall.img\" alt=\"\" width=\"120\" />\n            </div>\n            <div class=\"callerDetails\">\n                <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall.name || 'Unknown number'}}</h1>\n                <p>{{currentCall.displayNum ? currentCall.displayNum : currentCall.phone }}</p>\n                <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n            </div>\n\n            <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n                <div class=\"record-btn-container\">\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n            <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '110px'}\">\n                <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n                    <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\n                        [disabled]=\"currentCallList.length < 2\">\n                        <span>Merge</span>\n                    </button>\n                </div>\n                <div class=\"flex align-items-center justify-content-evenly mb-3\">\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute()\">\n                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n                    </button>\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n                    </button>\n                    <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                        <span class=\"material-symbols-outlined\"> add </span>\n                    </button>\n                </div>\n\n                <div>\n                    <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                        <span class=\"material-symbols-outlined\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n\n\n            <!-- <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n                <div class=\"contacts-header\">\n                    <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                    <div class=\"title\">Contacts</div>\n                    <span class=\"material-symbols-outlined search\"> search </span>\n                </div>\n                <div class=\"contacts-list\">\n                    <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                        <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                        <div class=\"contact-info\">\n                            <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n                            <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</div>\n                        </div>\n                        <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                            <span class=\"material-symbols-outlined\"> call </span>\n                            <span class=\"label\">Call</span>\n                        </button>\n                    </div>\n                </div>\n            </div> -->\n\n\n            <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n        </div>\n        <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n            <div class=\"contacts-header\">\n                <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                <div class=\"title\">Contacts</div>\n                <span class=\"material-symbols-outlined search\"> search </span>\n            </div>\n            <div class=\"contacts-list\">\n                <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                    <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                    <div class=\"contact-info\">\n                        <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n                        <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</div>\n                    </div>\n                    <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                        <span class=\"material-symbols-outlined\"> call </span>\n                        <span class=\"label\">Call</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"conference-call-view\" *ngIf=\"isConference\">\n            <div class=\"conf-heading\">\n                <span class=\"conf-icon material-symbols-outlined\"> groups </span>\n                <span class=\"conf-title\">Conference Call</span>\n            </div>\n\n            <div class=\"conf-name\">\n                <!-- {{ (callData?.name || callData?.displayNum || callData?.phone || '-') }} &\n                {{ (newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.name\n                || newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.number\n                || newIncomingCallsList?.[0]?.parameters?.From\n                || heldCall?.customParameters?.get('displayNumber')\n                || '-') }} -->\n                {{currentCallList?.[0]?.name || 'Unknown number'}} & {{currentCallList?.[1]?.name || 'Unknown number'}}\n            </div>\n            <div class=\"conf-timer\">{{ timer }}</div>\n            <!-- <div class=\"conf-record\">\n                <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\n                    <span class=\"material-symbols-outlined\"> stop_circle </span>\n                </button>\n            </div> -->\n\n            <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n                <div class=\"record-btn-container\">\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n\n            <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"conf-remove\" >\n                <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\n            </div>\n\n            <div class=\"conf-actions\">\n                <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute()\"\n                    [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n                </button>\n                <button class=\"circle-btn\" (click)=\"toggleKeypad()\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n                </button>\n                <button class=\"circle-btn\"  [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                    <span class=\"material-symbols-outlined\"> add </span>\n                </button>\n            </div>\n\n            <div class=\"conf-end\">\n                <button class=\"circle-btn danger\" (click)=\"endCall(true)\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> call_end </span>\n                </button>\n            </div>\n        </div>\n\n\n        <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\n            <div class=\"contacts-header\">\n                <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\n                <div class=\"title\">Contacts</div>\n                <span class=\"material-symbols-outlined search\"> search </span>\n            </div>\n            <div class=\"contacts-list\">\n                <div class=\"contact-item\" *ngFor=\"let c of allParticipentList\">\n                    <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                    <div class=\"contact-info\">\n                        <div class=\"contact-name\">{{c?.toName || 'Unknown'}}</div>\n                        <div class=\"contact-title\">{{ c?.to || 'Unknown'}}</div>\n                    </div>\n                    <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c.hold }\" (click)=\"onHoldCall(c)\">\n                        <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\n                        <!-- <span class=\"label\">Hold</span> -->\n                    </button>\n                     <button class=\"conference-contact\" (click)=\"onEndCall(c)\">\n                        <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n                        <!-- <span class=\"label\">End</span> -->\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"wave-container\">\n            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n                <defs>\n                    <path id=\"gentle-wave\"\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n                </defs>\n                <g class=\"parallax\">\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                    <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n                </g>\n            </svg>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;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:100000;flex-flow:column}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important;width:752px!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}.callerDetails h1{width:230px;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}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-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}.receive-btn{background-color:#28a745;border:2px solid #28a745}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.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{display:flex;flex-direction:column;gap:8px;width:100%}.incoming-banner{position:absolute;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:0 0 16px 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:1000}.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}.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:44px;height:44px;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}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;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:30px;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%}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 24px;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 }]; }, propDecorators: { callData: [{
-                type: Input
-            }], selectedCallerId: [{
-                type: Input
-            }], newIncomingCallData: [{
-                type: Input
-            }], newIncomingCallsList: [{
-                type: Input
-            }], deviceId: [{
-                type: Input
-            }], endCallEvent: [{
-                type: Output
-            }], incomingCallsNewInfo: [{
-                type: Output
-            }], minimiseEvent: [{
-                type: Output
-            }], incomingCallInitiated: [{
-                type: Output
-            }] } });
-
-class DialboxComponent {
-    set isDialpadHidden(value) {
-        this._isDialpadHidden = value;
-        if (!value) {
-            // When dialpad becomes visible, ensure Twilio is initialized
-            this.initializeTwilio();
-        }
+    // endCall() {
+    //   console.log('endCall() called');
+    //   console.log('Current call:', this.call?.parameters['From']);
+    //   console.log('Held call exists:', !!this.heldCall);
+    //   // Disconnect the current active call
+    //   if (this.call) {
+    //     this.call.disconnect();
+    //     this.call = undefined;
+    //   }
+    //   this.showRingAnimation = false;
+    //   this.stopTimer();
+    //   // If there's a held call, make it active
+    //   if (this.heldCall) {
+    //     console.log('Resuming held call:', this.heldCall.parameters['From']);
+    //     // Make held call the active call
+    //     this.call = this.heldCall;
+    //     this.heldCall = undefined;
+    //     // this.isCallOnHold = false;
+    //     this.isCallOnHold = !!this.heldCall;
+    //     // Unmute the resumed call
+    //     this.call.mute(false);
+    //     // Update UI with the resumed call info
+    //     const fromNumber = this.call.parameters['From'];
+    //     const callerName = this.call.customParameters?.get('name') || '-';
+    //     const callerImg = this.call.customParameters?.get('image') || 'assets/images/user.jpg';
+    //     this.callData = {
+    //       ...this.callData,
+    //       phone: fromNumber,
+    //       displayNum: fromNumber,
+    //       name: callerName,
+    //       img: callerImg
+    //     };
+    //     // Restart timer for the resumed call
+    //     this.startTimer();
+    //     this.disbaleEndCallBtn = false;
+    //     console.log('Held call is now active:', this.callData);
+    //     this.cdr.detectChanges();
+    //   } else {
+    //     // No held call, completely end
+    //     console.log('No held call, ending completely');
+    //     this.endCallEvent.emit();
+    //     this.maximiseDialpad();
+    //   }
+    // }
+    endCall(isAllCallEnd) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log('endCall() called');
+            console.log('Current call:', (_a = this.call) === null || _a === void 0 ? void 0 : _a.parameters['From']);
+            console.log('Held call exists:', !!this.heldCall);
+            // Leaving conference state when ending current call action
+            this.isConference = false;
+            // if (this.call) {
+            //     this.call.disconnect();
+            //     this.call.reject();
+            //     this.call = undefined;
+            // }
+            this.showRingAnimation = false;
+            this.stopTimer();
+            if (isAllCallEnd) {
+                this.onEndCall({}, isAllCallEnd);
+                this.currentCallList = [];
+                this.endCallEvent.emit();
+            }
+            else {
+                this.onEndCall(this.currentCall, isAllCallEnd);
+                this.currentCallList = this.currentCallList.filter((c) => (c === null || c === void 0 ? void 0 : c.participantId) !== this.currentCall.participantId);
+                if (this.currentCallList.length > 0) {
+                    this.currentCallList[0].isHold = false;
+                    this.currentCall = this.currentCallList[0];
+                    yield this.onholdOrUnholdParticipant({
+                        participantId: (_b = this.currentCall) === null || _b === void 0 ? void 0 : _b.participantId,
+                        conferenceId: this.conferenceId,
+                        hold: false
+                    });
+                }
+                else {
+                    this.currentCall = null;
+                    this.currentCallList = [];
+                    this.endCallEvent.emit();
+                }
+            }
+        });
     }
-    get isDialpadHidden() {
-        return this._isDialpadHidden;
+    toggleMute() {
+        var _a;
+        this.isMute = !this.isMute;
+        (_a = this.call) === null || _a === void 0 ? void 0 : _a.mute(this.isMute);
     }
-    constructor(twilioService, extService, dialog, ipService, extensionService, cdk, router, incomeingCallSocketService) {
-        this.twilioService = twilioService;
-        this.extService = extService;
-        this.dialog = dialog;
-        this.ipService = ipService;
-        this.extensionService = extensionService;
-        this.cdk = cdk;
-        this.router = router;
-        this.incomeingCallSocketService = incomeingCallSocketService;
-        this._isDialpadHidden = true;
-        // Let the library decide to auto-open on incoming call without host wiring
-        this.autoOpenOnIncoming = true;
-        this.closeDialpadEvent = new EventEmitter();
-        this.callInitiated = new EventEmitter();
-        this.endCallEvent = new EventEmitter();
-        this.minimiseEvent = new EventEmitter();
-        this.incomingCallsNewInfoEvent = new EventEmitter();
-        this.incomingCallInitiated = new EventEmitter();
-        this.numberDialed = new EventEmitter();
-        this.isCallInProgress = false;
-        this.keypadVal = keypad;
-        this.showInputClearBtn = false;
-        this.dialedNumber = '';
-        this.contactList = [];
-        this.filteredContactList = [];
-        this.callerIdList = [];
-        this.isCallerIdHidden = true;
-        this.isTrialPeriodOver = false;
-        this.isPaymentDue = false;
-        this.terminateCall = false;
-        this.toastTimeout = 7000;
-        this.callNumberToast = {
-            show: false,
-            type: 'alert-success',
-            number: '',
-            displayNum: ''
-        };
-        this.callData = {
-            phone: '',
-            displayNum: '',
-            dial: false,
-            name: '',
-            img: 'assets/images/user.jpg',
-            isIncomingCall: false,
-            extNum: ''
-        };
-        this.lastDialed = null;
-        this.dialAlert = {
-            msg: '',
-            show: false
-        };
-        this.showDedicatedPopup = false;
-        this.newIncomingCalls = [];
-        this.incomingCallsList = [];
-        this.subscriptions = new Subscription();
-        this.shakeDedicatedBtn = false;
-        this.isSmartDialCall = false;
-        this.isInitialized = false;
-        this.isMinimised = false;
-        // Initialize if dialpad is visible by default
-        if (!this.isDialpadHidden) {
-            console.log('sfsdfdsf');
-            this.initializeTwilio();
+    toggleKeypad() {
+        this.showKeypad = !this.showKeypad;
+        this.callInput = '';
+    }
+    toggleContactsPanel(isRemove) {
+        if (isRemove) {
+            this.showContactsPanel = false;
+            this.isAddRemoveParticipant = !this.isAddRemoveParticipant;
+        }
+        else {
+            this.isAddRemoveParticipant = false;
+            this.showContactsPanel = !this.showContactsPanel;
+            this.GetContactsList();
         }
-        console.log('DialboxComponent constructor');
     }
-    initializeTwilio() {
-        console.log('initializeTwilio');
-        if (!this.isInitialized) {
-            this.token = localStorage.getItem('ext_token') || '';
-            if (!this.token) {
-                console.error('No authentication token found');
-                return;
+    addRemoveParticipant() {
+        var _a;
+        const conferenceSId = (_a = this.addRes) === null || _a === void 0 ? void 0 : _a.conferenceSid;
+        this.isAddRemoveParticipant = !this.isAddRemoveParticipant;
+        this.allParticipentList = this.getAllParticipants(conferenceSId);
+    }
+    add(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if ((data === null || data === void 0 ? void 0 : data.status) != 'ringing') {
+                let device = yield this.twilioService.connect('');
+                console.log(device, 'callConnect');
             }
-            this.isInitialized = true;
-            // Initialize Twilio service
-            this.twilioService.initializeTwilioDevice(this.deviceId);
-        }
+            else if ((data === null || data === void 0 ? void 0 : data.status) == 'ringing') {
+                this.twilioService.addIncomingParticipant(data === null || data === void 0 ? void 0 : data.id, this.twilioService.conferenceCallInfo.conferenceId).subscribe((data) => {
+                    console.log(data, 'bhhhhhhhhhhhhhhhhhhh');
+                });
+            }
+            // this.device = new Device();/
+            // Device.connect({ conferenceName: 'my-conference-room' });
+            // this.device = new Device({ conferenceName: 'my-conference-room' });
+        });
     }
-    // ngOnChange() {
-    //   this.initializeTwilio();
-    // }
-    // ngOnInit() {
-    //   try {
-    //     this.getContactList();
-    //     this.getUserCallSetting();
-    //     // Subscribe to dial number events
-    //     const sub1 = this.twilioService.dialNumberFromOtherModule.subscribe((contact: any) => {
-    //       if (contact.number) {
-    //         this.isSmartDialCall = false;
-    //         if (contact.isDialFromHistory) {
-    //           //handle dialing from history page
-    //           if(contact.callerId == 'smartDialing'){
-    //             this.selectedCallerId = { number: contact.from };
-    //             this.isSmartDialCall = true;
-    //             setTimeout(() => {
-    //               this.isDialpadHidden = false;
-    //             }, 2000);
-    //             this.callData.phone = contact.number;
-    //             this.callData.name = contact.name;
-    //             this.callData.img = contact.img;
-    //             this.callData.from = contact.from;
-    //             this.sanitizedNum = contact.number;
-    //             this.getUserInformation(contact);
-    //           // this.incomingCallsList.push(contact)
-    //           this.initiateCall();
-    //         }else{
-    //           this.getUserCallSetting();
-    //           setTimeout(() => {
-    //             this.isDialpadHidden = false;
-    //           }, 1000);
-    //           this.getUserInformation(contact);
-    //           // this.incomingCallsList.push(contact)
-    //             this.dialedNumber = contact.number;
-    //             this.sanitizedNum = contact.number;
-    //           }
-    //         } else {
-    //           if (contact.callerId == 'alwaysAsk' || contact.callerId == 'smartDialing') {
-    //             this.getUserCallSetting();
-    //             setTimeout(() => {
-    //               this.isDialpadHidden = false;
-    //             }, 1000);
-    //             this.dialedNumber = contact.number;
-    //             this.sanitizedNum = contact.number;
-    //           } else {
-    //             setTimeout(() => {
-    //               this.isDialpadHidden = false;
-    //             }, 2000);
-    //             this.callData.phone = contact.number;
-    //             this.callData.name = contact.name;
+    rejectCallFromList(data) {
+        console.log(data, '266565655');
+        // this.twilioService.rejectIncomingParticipant(data?.id, this.twilioService.conferenceCallInfo.conferenceId).subscribe((data: any) => {
+        //   console.log(data,'bhhhhhhhhhhhhhhhhhhh')
+        // })
+    }
+    callContact(contact) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return __awaiter(this, void 0, void 0, function* () {
+            console.log('Adding participant:', contact);
+            console.log('this.call', this.call);
+            console.log('this.call', this.call.status());
+            // Check if there's an active call
+            if (!this.call || this.call.status() !== 'open') {
+                console.error('No active call');
+                return;
+            }
+            // Get the phone number from the contact
+            const phoneNumber = (_b = (_a = contact === null || contact === void 0 ? void 0 : contact.numbersList) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.number;
+            const currentCall = this.currentCallList.find((c) => (c === null || c === void 0 ? void 0 : c.phone) === phoneNumber);
+            if (!phoneNumber || currentCall) {
+                console.error('No phone number found for contact');
+                return;
+            }
+            try {
+                if (this.isConference) {
+                    let data = yield this.addParticipantToCall({
+                        from: ((_c = this.callData) === null || _c === void 0 ? void 0 : _c.from) || ((_d = this.selectedCallerId) === null || _d === void 0 ? void 0 : _d.number),
+                        route: "OUTGOING",
+                        participantNumber: phoneNumber,
+                        conferenceId: this.conferenceId
+                    });
+                    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,
+                        img: (contact === null || contact === void 0 ? void 0 : contact.img) || 'assets/images/user.jpg',
+                        participantId: data === null || data === void 0 ? void 0 : data.participantId,
+                        from: (_e = this.selectedCallerId) === null || _e === void 0 ? void 0 : _e.number,
+                        isIncomingCall: false,
+                        isHold: false,
+                        isLeft: false,
+                        isConference: true
+                    };
+                    this.cdr.detectChanges();
+                    console.log(this.callData, 'this.callData5656');
+                    console.log('test1111115555555555');
+                    this.currentCall = this.callData;
+                    this.currentCallList.push(Object.assign({}, this.callData));
+                    console.log("Participant added to conference:", phoneNumber);
+                    this.showRingAnimation = false;
+                }
+                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;
+                            yield this.onholdOrUnholdParticipant({
+                                participantId: c === null || c === void 0 ? void 0 : c.participantId,
+                                conferenceId: this.conferenceId,
+                                hold: c === null || c === void 0 ? void 0 : c.isHold
+                            });
+                        }
+                    }));
+                    // 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;
+                    }
+                    // Add participant to the conference
+                    let data = yield this.addParticipantToCall({
+                        from: ((_f = this.callData) === null || _f === void 0 ? void 0 : _f.from) || ((_g = this.selectedCallerId) === null || _g === void 0 ? void 0 : _g.number),
+                        route: "OUTGOING",
+                        participantNumber: phoneNumber,
+                        conferenceId: this.conferenceId
+                    });
+                    // this.callData = {
+                    //   ...this.callData,
+                    //   participantId: ,
+                    // }
+                    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,
+                        img: (contact === null || contact === void 0 ? void 0 : contact.img) || 'assets/images/user.jpg',
+                        participantId: data === null || data === void 0 ? void 0 : data.participantId,
+                        from: (_h = this.selectedCallerId) === null || _h === void 0 ? void 0 : _h.number,
+                        isIncomingCall: false,
+                        isHold: false,
+                        isLeft: false,
+                        isConference: false
+                    };
+                    this.cdr.detectChanges();
+                    console.log(this.callData, 'this.callData');
+                    console.log('test111111');
+                    this.currentCall = this.callData;
+                    this.currentCallList.push(Object.assign({}, this.callData));
+                    console.log("Participant added to conference:", phoneNumber);
+                    this.showRingAnimation = false;
+                }
+            }
+            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);
+            }
+        });
+    }
+    getAllParticipants(conferenceSid) {
+        this.extensionService.getAllParticipants(conferenceSid).subscribe((res) => {
+            this.allParticipentList = res.participants;
+        });
+    }
+    // acceptConcurrentCall(incomingCall: any) {
+    //   if (!incomingCall) return;
+    //   // Put current call on hold instead of disconnecting
+    //   if (this.call) {
+    //     this.heldCall = this.call;
+    //     this.isCallOnHold = true;
+    //     // Mute the held call
+    //     this.heldCall.mute(true);
+    //   }
+    //   incomingCall.accept();
+    //   this.call = incomingCall;
+    //   this.callData.phone = incomingCall.parameters['From'];
+    //   this.callData.name = incomingCall.customParameters?.get('name') || '-';
+    //   this.callData.img = incomingCall.customParameters?.get('image') || 'assets/images/user.jpg';
+    //   this.isConcurrentIncoming = false;
+    //   this.incomingCallDiv = false;
+    //   this.disbaleEndCallBtn = false;
+    //   // Reset timer for new call
+    //   this.stopTimer();
+    //   this.startTimer();
+    //   this.cdr.detectChanges();
+    // }
+    acceptConcurrentCall(incomingCall) {
+        var _a, _b;
+        if (!incomingCall)
+            return;
+        // Put current call on hold instead of disconnecting
+        // if (this.call) {
+        //   this.heldCall = this.call;
+        this.isCallOnHold = true;
+        //   // Mute the held call
+        //   this.heldCall.mute(true);
+        // }
+        // Accept the new call
+        incomingCall.accept();
+        this.call = incomingCall;
+        this.callData.phone = incomingCall.parameters['From'];
+        this.callData.name = ((_a = incomingCall.customParameters) === null || _a === void 0 ? void 0 : _a.get('name')) || '-';
+        this.callData.img = ((_b = incomingCall.customParameters) === null || _b === void 0 ? void 0 : _b.get('image')) || 'assets/images/user.jpg';
+        this.isConcurrentIncoming = false;
+        this.incomingCallDiv = false;
+        this.disbaleEndCallBtn = false;
+        // 🟢 Remove the accepted call from incoming list
+        this.newIncomingCallsList = (this.newIncomingCallsList || []).filter((c) => { var _a, _b; return ((_a = c === null || c === void 0 ? void 0 : c.parameters) === null || _a === void 0 ? void 0 : _a.CallSid) !== ((_b = incomingCall === null || incomingCall === void 0 ? void 0 : incomingCall.parameters) === null || _b === void 0 ? void 0 : _b.CallSid); });
+        this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
+        // 🕒 Reset timer for new call
+        this.stopTimer();
+        this.startTimer();
+        this.cdr.detectChanges();
+    }
+    swapCalls(callInfo) {
+        var _a, _b, _c;
+        return __awaiter(this, void 0, void 0, function* () {
+            // if (!this.heldCall || !this.call) return;
+            console.log(this.call, 'this.call');
+            console.log(this.heldCall, 'this.heldCall');
+            console.log(this.currentCallList, 'this.currentCallList');
+            console.log(callInfo, 'callInfo for swapCalls');
+            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: this.conferenceId,
+                        hold: c === null || c === void 0 ? void 0 : c.isHold
+                    });
+                }
+                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: this.conferenceId,
+                        hold: c === null || c === void 0 ? void 0 : c.isHold
+                    });
+                    this.currentCall = c;
+                }
+            }));
+            // await this.onholdOrUnholdParticipant({
+            //   participantId: this.call?.callInfo?.participantId,
+            //   conferenceId: this.conferenceId,
+            //   hold: true
+            // });
+            // await this.onholdOrUnholdParticipant({
+            //   participantId: this.heldCall?.callInfo?.participantId,
+            //   conferenceId: this.conferenceId,
+            //   hold: false
+            // });
+            console.log('Swapping calls...');
+            console.log('Before swap - Active call:', this.call.parameters['From']);
+            console.log('Before swap - Held call:', this.heldCall.parameters['From']);
+            // Swap the calls
+            // const temp = this.call;
+            // this.call = this.heldCall;
+            // this.heldCall = temp;
+            // this.call.mute(false);
+            // this.heldCall.mute(true);
+            // Update UI with active call info - extract from call parameters
+            const fromNumber = this.call.parameters['From'];
+            const callerName = ((_a = this.call.customParameters) === null || _a === void 0 ? void 0 : _a.get('name')) || '-';
+            const callerImg = ((_b = this.call.customParameters) === null || _b === void 0 ? void 0 : _b.get('image')) || 'assets/images/user.jpg';
+            const displayNumber = ((_c = this.call.customParameters) === null || _c === void 0 ? void 0 : _c.get('displayNumber')) || '-';
+            // Update callData to refresh the main UI
+            // this.callData = {
+            //   ...this.callData,
+            //   phone: fromNumber,
+            //   displayNum: (displayNumber && displayNumber !== '-') ? displayNumber : fromNumber,
+            //   name: (callerName && callerName !== '-') ? callerName : (this.callData?.name || fromNumber),
+            //   img: callerImg || this.callData?.img || 'assets/images/user.jpg'
+            // };
+            // console.log('After swap - Active call:', this.call.parameters['From']);
+            // console.log('After swap - Held call:', this.heldCall.parameters['From']);
+            // console.log('Updated callData:', this.callData);
+            console.log('this.currentCallList after swap', this.currentCallList);
+            this.cdr.detectChanges();
+        });
+    }
+    mergeCalls() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Merge functionality - unmute both calls for conference
+            if (this.currentCallList.length > 1) {
+                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 = false;
+                        yield this.onholdOrUnholdParticipant({
+                            participantId: c === null || c === void 0 ? void 0 : c.participantId,
+                            conferenceId: this.conferenceId,
+                            hold: false
+                        });
+                    }
+                    c.isConference = true;
+                }));
+                // await this.onholdOrUnholdParticipant({
+                //   participantId: this.heldCall?.callInfo?.participantId,
+                //   conferenceId: this.conferenceId,
+                //   hold: false
+                // });
+                // this.heldCall.mute(false);
+                // this.call.mute(false);
+                this.isCallOnHold = false;
+                this.isConference = true;
+                this.cdr.detectChanges();
+            }
+        });
+    }
+    endHeldCall() {
+        // if (this.heldCall) {
+        //   this.heldCall.disconnect();
+        //   this.heldCall = undefined;
+        //   this.isCallOnHold = false;
+        //   this.cdr.detectChanges();
+        // }
+    }
+    rejectConcurrentCall(incomingCall) {
+        if (!incomingCall)
+            return;
+        if (incomingCall.reject) {
+            incomingCall.reject();
+        }
+        if (incomingCall.disconnect)
+            incomingCall.disconnect();
+        // Remove from list
+        this.newIncomingCallsList = (this.newIncomingCallsList || []).filter((c) => { var _a, _b; return ((_a = c === null || c === void 0 ? void 0 : c.parameters) === null || _a === void 0 ? void 0 : _a.CallSid) !== ((_b = incomingCall === null || incomingCall === void 0 ? void 0 : incomingCall.parameters) === null || _b === void 0 ? void 0 : _b.CallSid); });
+        this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
+        // If no more incoming, hide banner
+        if (!this.newIncomingCallsList || this.newIncomingCallsList.length === 0) {
+            this.isConcurrentIncoming = false;
+            this.incomingCallDiv = false;
+        }
+        this.cdr.detectChanges();
+    }
+    onCallInputs(num) {
+        var _a;
+        try {
+            if (Number.isInteger(num) || num == '+' || num == '*' || num == '#') {
+                if (num == '#') {
+                    new Audio(`/assets/dial-tones/dtmf/dtmf-hash-.mp3`).play();
+                }
+                else if (num == '*') {
+                    new Audio(`/assets/dial-tones/dtmf/dtmf-star-.mp3`).play();
+                }
+                else {
+                    new Audio(`/assets/dial-tones/dtmf/dtmf-${num}-.mp3`).play();
+                }
+                this.callInput = this.callInput + String(num);
+                this.showClearBtn = true;
+            }
+            let str = String(num);
+            (_a = this.call) === null || _a === void 0 ? void 0 : _a.sendDigits(str);
+        }
+        catch (e) {
+            console.log(e);
+        }
+    }
+    onCallInputEnter(ev) {
+        var _a;
+        try {
+            (_a = this.call) === null || _a === void 0 ? void 0 : _a.sendDigits(String(ev.key));
+        }
+        catch (e) {
+            console.log(e);
+        }
+    }
+    closeIncomingCall(data) {
+        // this.incomingCallDiv = false;
+        if (data.show) {
+            //this.showCallProgressEvent.emit()
+            // handle incoming call accepted
+            this.startTimer();
+            this.disbaleEndCallBtn = false;
+            this.call = data.call;
+            this.isConcurrentIncoming = false;
+            this.incomingCallDiv = false;
+            const incomingDetail = this.extensionService.getCallSid();
+            this.incomingRecordCall = incomingDetail.recordCall;
+            if (this.incomingRecordCall) {
+                this.startRecording();
+            }
+            else {
+                this.isRecording = false;
+            }
+            this.cdr.detectChanges();
+        }
+        else {
+            // incoming call rejected or auto-cancelled
+            this.isConcurrentIncoming = false;
+            this.incomingCallDiv = false;
+            // If there is NO active call, then propagate end. Otherwise keep ongoing UI.
+            if (!this.call || this.call.status() !== 'open') {
+                console.log('test7');
+                this.endCallEvent.emit();
+            }
+        }
+    }
+    clearInputs() {
+        this.callInput = this.callInput.slice(0, -1);
+    }
+    minimiseDialpad() {
+        this.minimiseEvent.emit(true);
+        this.isMinimised = true;
+    }
+    maximiseDialpad() {
+        this.minimiseEvent.emit(false);
+        this.isMinimised = false;
+    }
+    toggleRecording() {
+        if (this.isRecording) {
+            this.stopRecording();
+        }
+        else {
+            this.startRecording();
+        }
+    }
+    startRecording() {
+        var _a;
+        let sid;
+        const details = this.extensionService.getCallSid();
+        this.incomingCallSid = details.callSid;
+        this.incomingRecordCall = details.recordCall;
+        sid = this.incomingCallSid ? this.incomingCallSid : this.callSid || ((_a = this.addRes) === null || _a === void 0 ? void 0 : _a.conferenceSid);
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return;
+        // }
+        this.extensionService.getCallRecording(sid).subscribe(response => {
+            this.isRecording = true;
+            this.isPaused = false;
+            this.timeElapsed = 0;
+            this.startTimer1();
+        }, error => {
+            console.error('Error starting recording', error);
+        });
+    }
+    stopRecording() {
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return;
+        // }
+        this.isRecording = false;
+        this.isPaused = false;
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe();
+        }
+    }
+    pauseRecording() {
+        const details = this.extensionService.getCallSid();
+        this.incomingCallSid = details.callSid;
+        this.incomingRecordCall = details.recordCall;
+        const sid = this.incomingCallSid ? this.incomingCallSid : this.callSid;
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return;
+        // }
+        this.extensionService.pauseOrResumeRecording(sid, 'pause').subscribe(response => {
+            this.stopRecordingTimer();
+            this.isPaused = true;
+        }, (error) => {
+            console.error('Error pausing recording:', error);
+            // Consider updating the UI to show the error state
+        });
+    }
+    resumeRecording() {
+        let sid;
+        const details = this.extensionService.getCallSid();
+        this.incomingCallSid = details.callSid;
+        this.incomingRecordCall = details.recordCall;
+        sid = this.incomingCallSid ? this.incomingCallSid : this.callSid;
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return; // Skip if recording is not enabled
+        // }
+        this.extensionService.pauseOrResumeRecording(sid, 'resume').subscribe(response => {
+            this.isPaused = false;
+            this.startTimer1();
+        }, error => {
+            console.error('Error resuming recording', error);
+        });
+    }
+    startTimer1() {
+        this.timerSubscription = interval(1000).subscribe(() => {
+            this.timeElapsed++;
+        });
+    }
+    stopRecordingTimer() {
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe(); // Pause the timer
+            this.timerSubscription = undefined; // Optionally reset the subscription
+        }
+    }
+    getFormattedTime() {
+        const minutes = Math.floor(this.timeElapsed / 60);
+        const seconds = this.timeElapsed % 60;
+        return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+    }
+    pollCallStatus(callAuthId) {
+        const maxTime = 30000; // Poll for up to 30 seconds
+        const pollInterval = 3000; // Poll every 3 seconds
+        let elapsedTime = 0;
+        const intervalId = setInterval(() => __awaiter(this, void 0, void 0, function* () {
+            elapsedTime += pollInterval;
+            try {
+                const statusResponse = yield this.extensionService.getCallStatus(callAuthId).toPromise();
+                if (statusResponse && statusResponse.callDetails) {
+                    this.callStatus = statusResponse.callDetails.callStatus;
+                    if (this.callStatus === 'in-progress') {
+                        this.callSid = statusResponse.callDetails.callSid;
+                        if (this.recordCall && !this.isRecording) {
+                            this.startRecording();
+                        }
+                        clearInterval(intervalId);
+                    }
+                    else if (this.callStatus === 'completed') {
+                        clearInterval(intervalId);
+                        console.log('test1');
+                        this.endCall();
+                        this.stopRecording();
+                    }
+                    else if (this.callStatus === 'ringing') {
+                        // Continue polling; do not clear the interval yet
+                    }
+                }
+            }
+            catch (error) {
+                clearInterval(intervalId);
+            }
+            if (elapsedTime >= maxTime) {
+                // console.log('Max polling time reached. Stopping poll.');
+                clearInterval(intervalId);
+            }
+        }), pollInterval);
+    }
+    getUserInformation(id) {
+        this.extensionService.getUserInformation(id).subscribe(response => {
+            console.log(response);
+        }, error => {
+            console.error('Error starting recording', error);
+        });
+    }
+    incomingCallsNewList(data) {
+        console.log(data, 'newIncomingCallsListOUR');
+        this.newIncomingCallsList = data;
+        this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
+    }
+    selectedIncomingCallInfo(data) {
+        this.selectedIncomingCall = data;
+    }
+    ngOnDestroy() {
+        this.callData.dial = false;
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe();
+        }
+    }
+}
+CallProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, deps: [{ token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: TwilioService }], 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" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"!isMinimised\"\n    [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n    <lib-incoming-call *ngIf=\"incomingCallDiv && !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n        [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n        (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n        (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n\n    <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n        <div class=\"held-call-banner\" *ngIf=\"isCallOnHold\">\n            <ng-container *ngFor=\"let heldCall of currentCallList\">\n            <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Hold</span>\n                        <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n                        <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\n                        <span>Swap</span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Incoming Call</span>\n                        <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n                        <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!heldCall?.isCallConnected\">\n                        <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\n                    </button>\n                    <button class=\"call-btn-wrapper reject-btn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(heldCall)\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n            </ng-container>\n        </div>\n\n        <!-- Compact banners for concurrent incoming (one per call) -->\n        <ng-container>\n            <div class=\"incoming-banners-container\" *ngIf=\"!isConference\">\n                <div class=\"incoming-banner\" *ngFor=\"let inc of newIncomingCallsList; let i = index\"\n                    [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 80) + 'px' }\">\n                    <div class=\"incoming-banner-content\">\n                        <div class=\"incoming-info\">\n                            <span class=\"incom ing-label\">Incoming call</span>\n                            <div class=\"incoming-caller\">\n                                <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\n                                    inc?.customParameters?.get('name') || '-' }}</span>\n                                <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\n                                    inc?.parameters?.From || '' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"incoming-actions\">\n                            <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(inc)\">\n                                <span class=\"material-symbols-outlined\">call</span>\n                            </button>\n                            <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(inc)\">\n                                <span class=\"material-symbols-outlined\">call_end</span>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <div *ngIf=\"!isConference\" [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\">\n\n            <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                <img class=\"avatar-img\" [src]=\"currentCall.img\" alt=\"\" width=\"120\" />\n            </div>\n            <div class=\"callerDetails\">\n                <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall.name || 'Unknown number'}}</h1>\n                <p>{{currentCall.displayNum ? currentCall.displayNum : currentCall.phone }}</p>\n                <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n            </div>\n\n            <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n                <div class=\"record-btn-container\">\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n            <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '110px'}\">\n                <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n                    <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\n                        [disabled]=\"currentCallList.length < 2\">\n                        <span>Merge</span>\n                    </button>\n                </div>\n                <div class=\"flex align-items-center justify-content-evenly mb-3\">\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute()\">\n                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n                    </button>\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n                    </button>\n                    <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                        <span class=\"material-symbols-outlined\"> add </span>\n                    </button>\n                </div>\n\n                <div>\n                    <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                        <span class=\"material-symbols-outlined\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n\n\n            <!-- <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n                <div class=\"contacts-header\">\n                    <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                    <div class=\"title\">Contacts</div>\n                    <span class=\"material-symbols-outlined search\"> search </span>\n                </div>\n                <div class=\"contacts-list\">\n                    <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                        <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                        <div class=\"contact-info\">\n                            <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n                            <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</div>\n                        </div>\n                        <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                            <span class=\"material-symbols-outlined\"> call </span>\n                            <span class=\"label\">Call</span>\n                        </button>\n                    </div>\n                </div>\n            </div> -->\n\n\n            <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n        </div>\n        <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n            <div class=\"contacts-header\">\n                <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                <div class=\"title\">Contacts</div>\n                <span class=\"material-symbols-outlined search\"> search </span>\n            </div>\n            <div class=\"contacts-list\">\n                <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                    <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                    <div class=\"contact-info\">\n                        <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n                        <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</div>\n                    </div>\n                    <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                        <span class=\"material-symbols-outlined\"> call </span>\n                        <span class=\"label\">Call</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"conference-call-view\" *ngIf=\"isConference\">\n            <div class=\"conf-heading\">\n                <span class=\"conf-icon material-symbols-outlined\"> groups </span>\n                <span class=\"conf-title\">Conference Call</span>\n            </div>\n\n            <div class=\"conf-name\">\n                <!-- {{ (callData?.name || callData?.displayNum || callData?.phone || '-') }} &\n                {{ (newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.name\n                || newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.number\n                || newIncomingCallsList?.[0]?.parameters?.From\n                || heldCall?.customParameters?.get('displayNumber')\n                || '-') }} -->\n                {{currentCallList?.[0]?.name || 'Unknown number'}} & {{currentCallList?.[1]?.name || 'Unknown number'}}\n            </div>\n            <div class=\"conf-timer\">{{ timer }}</div>\n            <!-- <div class=\"conf-record\">\n                <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\n                    <span class=\"material-symbols-outlined\"> stop_circle </span>\n                </button>\n            </div> -->\n\n            <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n                <div class=\"record-btn-container\">\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n\n            <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"conf-remove\" >\n                <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\n            </div>\n\n            <div class=\"conf-actions\">\n                <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute()\"\n                    [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n                </button>\n                <button class=\"circle-btn\" (click)=\"toggleKeypad()\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n                </button>\n                <button class=\"circle-btn\"  [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                    <span class=\"material-symbols-outlined\"> add </span>\n                </button>\n            </div>\n\n            <div class=\"conf-end\">\n                <button class=\"circle-btn danger\" (click)=\"endCall(true)\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> call_end </span>\n                </button>\n            </div>\n        </div>\n\n\n        <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\n            <div class=\"contacts-header\">\n                <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\n                <div class=\"title\">Contacts</div>\n                <span class=\"material-symbols-outlined search\"> search </span>\n            </div>\n            <div class=\"contacts-list\">\n                <div class=\"contact-item\" *ngFor=\"let c of allParticipentList\">\n                    <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                    <div class=\"contact-info\">\n                        <div class=\"contact-name\">{{c?.toName || 'Unknown'}}</div>\n                        <div class=\"contact-title\">{{ c?.to || 'Unknown'}}</div>\n                    </div>\n                    <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c.hold }\" (click)=\"onHoldCall(c)\">\n                        <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\n                        <!-- <span class=\"label\">Hold</span> -->\n                    </button>\n                     <button class=\"conference-contact\" (click)=\"onEndCall(c)\">\n                        <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n                        <!-- <span class=\"label\">End</span> -->\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"wave-container\">\n            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n                <defs>\n                    <path id=\"gentle-wave\"\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n                </defs>\n                <g class=\"parallax\">\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                    <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n                </g>\n            </svg>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;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:100000;flex-flow:column}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important;width:752px!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}.callerDetails h1{width:230px;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}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-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}.receive-btn{background-color:#28a745;border:2px solid #28a745}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.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{display:flex;flex-direction:column;gap:8px;width:100%}.incoming-banner{position:absolute;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:0 0 16px 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:1000}.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}.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:44px;height:44px;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}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;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:30px;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%}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 24px;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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList", "deviceId"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
+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=\"call-container\" *ngIf=\"!isMinimised\"\n    [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n    <lib-incoming-call *ngIf=\"incomingCallDiv && !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n        [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n        (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n        (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n\n    <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n        <div class=\"held-call-banner\" *ngIf=\"isCallOnHold\">\n            <ng-container *ngFor=\"let heldCall of currentCallList\">\n            <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Hold</span>\n                        <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n                        <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\n                        <span>Swap</span>\n                    </button>\n                </div>\n            </div>\n            <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Incoming Call</span>\n                        <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n                        <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!heldCall?.isCallConnected\">\n                        <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\n                    </button>\n                    <button class=\"call-btn-wrapper reject-btn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(heldCall)\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n            </ng-container>\n        </div>\n\n        <!-- Compact banners for concurrent incoming (one per call) -->\n        <ng-container>\n            <div class=\"incoming-banners-container\" *ngIf=\"!isConference\">\n                <div class=\"incoming-banner\" *ngFor=\"let inc of newIncomingCallsList; let i = index\"\n                    [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 80) + 'px' }\">\n                    <div class=\"incoming-banner-content\">\n                        <div class=\"incoming-info\">\n                            <span class=\"incom ing-label\">Incoming call</span>\n                            <div class=\"incoming-caller\">\n                                <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\n                                    inc?.customParameters?.get('name') || '-' }}</span>\n                                <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\n                                    inc?.parameters?.From || '' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"incoming-actions\">\n                            <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(inc)\">\n                                <span class=\"material-symbols-outlined\">call</span>\n                            </button>\n                            <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(inc)\">\n                                <span class=\"material-symbols-outlined\">call_end</span>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </ng-container>\n\n        <div *ngIf=\"!isConference\" [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\">\n\n            <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                <img class=\"avatar-img\" [src]=\"currentCall.img\" alt=\"\" width=\"120\" />\n            </div>\n            <div class=\"callerDetails\">\n                <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall.name || 'Unknown number'}}</h1>\n                <p>{{currentCall.displayNum ? currentCall.displayNum : currentCall.phone }}</p>\n                <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n            </div>\n\n            <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n                <div class=\"record-btn-container\">\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n            <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '110px'}\">\n                <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n                    <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\n                        [disabled]=\"currentCallList.length < 2\">\n                        <span>Merge</span>\n                    </button>\n                </div>\n                <div class=\"flex align-items-center justify-content-evenly mb-3\">\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute()\">\n                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n                    </button>\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n                    </button>\n                    <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                        <span class=\"material-symbols-outlined\"> add </span>\n                    </button>\n                </div>\n\n                <div>\n                    <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                        <span class=\"material-symbols-outlined\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n\n\n            <!-- <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n                <div class=\"contacts-header\">\n                    <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                    <div class=\"title\">Contacts</div>\n                    <span class=\"material-symbols-outlined search\"> search </span>\n                </div>\n                <div class=\"contacts-list\">\n                    <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                        <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                        <div class=\"contact-info\">\n                            <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n                            <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</div>\n                        </div>\n                        <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                            <span class=\"material-symbols-outlined\"> call </span>\n                            <span class=\"label\">Call</span>\n                        </button>\n                    </div>\n                </div>\n            </div> -->\n\n\n            <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n        </div>\n        <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n            <div class=\"contacts-header\">\n                <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                <div class=\"title\">Contacts</div>\n                <span class=\"material-symbols-outlined search\"> search </span>\n            </div>\n            <div class=\"contacts-list\">\n                <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                    <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                    <div class=\"contact-info\">\n                        <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n                        <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</div>\n                    </div>\n                    <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                        <span class=\"material-symbols-outlined\"> call </span>\n                        <span class=\"label\">Call</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"conference-call-view\" *ngIf=\"isConference\">\n            <div class=\"conf-heading\">\n                <span class=\"conf-icon material-symbols-outlined\"> groups </span>\n                <span class=\"conf-title\">Conference Call</span>\n            </div>\n\n            <div class=\"conf-name\">\n                <!-- {{ (callData?.name || callData?.displayNum || callData?.phone || '-') }} &\n                {{ (newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.name\n                || newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.number\n                || newIncomingCallsList?.[0]?.parameters?.From\n                || heldCall?.customParameters?.get('displayNumber')\n                || '-') }} -->\n                {{currentCallList?.[0]?.name || 'Unknown number'}} & {{currentCallList?.[1]?.name || 'Unknown number'}}\n            </div>\n            <div class=\"conf-timer\">{{ timer }}</div>\n            <!-- <div class=\"conf-record\">\n                <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\n                    <span class=\"material-symbols-outlined\"> stop_circle </span>\n                </button>\n            </div> -->\n\n            <div class=\"record-action-btns mt-auto\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n                <div class=\"record-btn-container\">\n                    <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n\n            <div *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"conf-remove\" >\n                <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\n            </div>\n\n            <div class=\"conf-actions\">\n                <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute()\"\n                    [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n                </button>\n                <button class=\"circle-btn\" (click)=\"toggleKeypad()\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n                </button>\n                <button class=\"circle-btn\"  [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                    <span class=\"material-symbols-outlined\"> add </span>\n                </button>\n            </div>\n\n            <div class=\"conf-end\">\n                <button class=\"circle-btn danger\" (click)=\"endCall(true)\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"material-symbols-outlined\"> call_end </span>\n                </button>\n            </div>\n        </div>\n\n\n        <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\n            <div class=\"contacts-header\">\n                <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\n                <div class=\"title\">Contacts</div>\n                <span class=\"material-symbols-outlined search\"> search </span>\n            </div>\n            <div class=\"contacts-list\">\n                <div class=\"contact-item\" *ngFor=\"let c of allParticipentList\">\n                    <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n                    <div class=\"contact-info\">\n                        <div class=\"contact-name\">{{c?.toName || 'Unknown'}}</div>\n                        <div class=\"contact-title\">{{ c?.to || 'Unknown'}}</div>\n                    </div>\n                    <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c.hold }\" (click)=\"onHoldCall(c)\">\n                        <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\n                        <!-- <span class=\"label\">Hold</span> -->\n                    </button>\n                     <button class=\"conference-contact\" (click)=\"onEndCall(c)\">\n                        <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n                        <!-- <span class=\"label\">End</span> -->\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"wave-container\">\n            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n                <defs>\n                    <path id=\"gentle-wave\"\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n                </defs>\n                <g class=\"parallax\">\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                    <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n                </g>\n            </svg>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;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:100000;flex-flow:column}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important;width:752px!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}.callerDetails h1{width:230px;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}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-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}.receive-btn{background-color:#28a745;border:2px solid #28a745}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.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{display:flex;flex-direction:column;gap:8px;width:100%}.incoming-banner{position:absolute;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:0 0 16px 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:1000}.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}.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:44px;height:44px;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}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;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:30px;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%}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 24px;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 }]; }, propDecorators: { callData: [{
+                type: Input
+            }], selectedCallerId: [{
+                type: Input
+            }], newIncomingCallData: [{
+                type: Input
+            }], newIncomingCallsList: [{
+                type: Input
+            }], deviceId: [{
+                type: Input
+            }], endCallEvent: [{
+                type: Output
+            }], incomingCallsNewInfo: [{
+                type: Output
+            }], minimiseEvent: [{
+                type: Output
+            }], incomingCallInitiated: [{
+                type: Output
+            }] } });
+
+class DialboxComponent {
+    set isDialpadHidden(value) {
+        this._isDialpadHidden = value;
+        if (!value) {
+            // When dialpad becomes visible, ensure Twilio is initialized
+            this.initializeTwilio();
+        }
+    }
+    get isDialpadHidden() {
+        return this._isDialpadHidden;
+    }
+    constructor(twilioService, extService, dialog, ipService, extensionService, cdk, router, incomeingCallSocketService) {
+        this.twilioService = twilioService;
+        this.extService = extService;
+        this.dialog = dialog;
+        this.ipService = ipService;
+        this.extensionService = extensionService;
+        this.cdk = cdk;
+        this.router = router;
+        this.incomeingCallSocketService = incomeingCallSocketService;
+        this._isDialpadHidden = true;
+        // Let the library decide to auto-open on incoming call without host wiring
+        this.autoOpenOnIncoming = true;
+        this.closeDialpadEvent = new EventEmitter();
+        this.callInitiated = new EventEmitter();
+        this.endCallEvent = new EventEmitter();
+        this.minimiseEvent = new EventEmitter();
+        this.incomingCallsNewInfoEvent = new EventEmitter();
+        this.incomingCallInitiated = new EventEmitter();
+        this.numberDialed = new EventEmitter();
+        this.isCallInProgress = false;
+        this.keypadVal = keypad;
+        this.showInputClearBtn = false;
+        this.dialedNumber = '';
+        this.contactList = [];
+        this.filteredContactList = [];
+        this.callerIdList = [];
+        this.isCallerIdHidden = true;
+        this.isTrialPeriodOver = false;
+        this.isPaymentDue = false;
+        this.terminateCall = false;
+        this.toastTimeout = 7000;
+        this.callNumberToast = {
+            show: false,
+            type: 'alert-success',
+            number: '',
+            displayNum: ''
+        };
+        this.callData = {
+            phone: '',
+            displayNum: '',
+            dial: false,
+            name: '',
+            img: 'assets/images/user.jpg',
+            isIncomingCall: false,
+            extNum: ''
+        };
+        this.lastDialed = null;
+        this.dialAlert = {
+            msg: '',
+            show: false
+        };
+        this.showDedicatedPopup = false;
+        this.newIncomingCalls = [];
+        this.incomingCallsList = [];
+        this.subscriptions = new Subscription();
+        this.shakeDedicatedBtn = false;
+        this.isSmartDialCall = false;
+        this.isInitialized = false;
+        this.isMinimised = false;
+        // Initialize if dialpad is visible by default
+        if (!this.isDialpadHidden) {
+            console.log('sfsdfdsf');
+            this.initializeTwilio();
+        }
+        console.log('DialboxComponent constructor');
+    }
+    initializeTwilio() {
+        console.log('initializeTwilio');
+        if (!this.isInitialized) {
+            this.token = localStorage.getItem('ext_token') || '';
+            if (!this.token) {
+                console.error('No authentication token found');
+                return;
+            }
+            this.isInitialized = true;
+            // Initialize Twilio service
+            this.twilioService.initializeTwilioDevice(this.deviceId);
+        }
+    }
+    // ngOnChange() {
+    //   this.initializeTwilio();
+    // }
+    // ngOnInit() {
+    //   try {
+    //     this.getContactList();
+    //     this.getUserCallSetting();
+    //     // Subscribe to dial number events
+    //     const sub1 = this.twilioService.dialNumberFromOtherModule.subscribe((contact: any) => {
+    //       if (contact.number) {
+    //         this.isSmartDialCall = false;
+    //         if (contact.isDialFromHistory) {
+    //           //handle dialing from history page
+    //           if(contact.callerId == 'smartDialing'){
+    //             this.selectedCallerId = { number: contact.from };
+    //             this.isSmartDialCall = true;
+    //             setTimeout(() => {
+    //               this.isDialpadHidden = false;
+    //             }, 2000);
+    //             this.callData.phone = contact.number;
+    //             this.callData.name = contact.name;
+    //             this.callData.img = contact.img;
+    //             this.callData.from = contact.from;
+    //             this.sanitizedNum = contact.number;
+    //             this.getUserInformation(contact);
+    //           // this.incomingCallsList.push(contact)
+    //           this.initiateCall();
+    //         }else{
+    //           this.getUserCallSetting();
+    //           setTimeout(() => {
+    //             this.isDialpadHidden = false;
+    //           }, 1000);
+    //           this.getUserInformation(contact);
+    //           // this.incomingCallsList.push(contact)
+    //             this.dialedNumber = contact.number;
+    //             this.sanitizedNum = contact.number;
+    //           }
+    //         } else {
+    //           if (contact.callerId == 'alwaysAsk' || contact.callerId == 'smartDialing') {
+    //             this.getUserCallSetting();
+    //             setTimeout(() => {
+    //               this.isDialpadHidden = false;
+    //             }, 1000);
+    //             this.dialedNumber = contact.number;
+    //             this.sanitizedNum = contact.number;
+    //           } else {
+    //             setTimeout(() => {
+    //               this.isDialpadHidden = false;
+    //             }, 2000);
+    //             this.callData.phone = contact.number;
+    //             this.callData.name = contact.name;
     //             this.callData.img = contact.img;
     //             this.sanitizedNum = contact.number;
     //             this.initiateCall();
@@ -3684,703 +4017,370 @@ class DialboxComponent {
     //     // } else {
     //     //   swal('Error', 'Trial period is over. Please setup payment method to continue services')
     //     // }
-    //   }catch(e){
-    //     console.error('Error in initiateCall:', e);
-    //     this.showDialAlert('Failed to initiate call. Please try again.');
-    //     this.isCallInProgress = false;
-    //     return false;
-    //   }
-    // }
-    initiateCall() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                if (!this.dialedNumber && this.lastDialed) {
-                    this.sanitizedNum = this.lastDialed.number;
-                }
-                const isInvalid = yield this.isInvalidNumber();
-                if (isInvalid) {
-                    return false;
-                }
-                this.saveLastDialed();
-                this.isSavedContactDialled();
-                this.isPaymentDue = localStorage.getItem('paymentDue') === 'false' ? false : true;
-                if (this.isPaymentDue) {
-                    swal('Warning', 'Please note that your payment is due, To continue on your services kindly subscribe to use uninterrupted services.');
-                    return false;
-                }
-                this.isTrialPeriodOver = localStorage.getItem('trialOver') === 'false' ? false : true;
-                if (this.sanitizedNum === localStorage.getItem('twilioNumber')) {
-                    swal('Error', 'You can not dial this number');
-                    return false;
-                }
-                const hasPermission = yield this.checkMicrophonePermission();
-                if (!hasPermission) {
-                    yield this.askForMicrophonePermission();
-                    return false;
-                }
-                if (!this.selectedCallerId) {
-                    this.shakeDedicatedBtn = true;
-                    this.showDialAlert('Select a C2C number to call');
-                    setTimeout(() => {
-                        this.shakeDedicatedBtn = false;
-                    }, 3000);
-                    return false;
-                }
-                // Clear displayNum if value is bound from previous call
-                this.callData.displayNum = '';
-                // Get number to be dialed from backend
-                yield this.getToNumber(this.sanitizedNum);
-                if (this.terminateCall) {
-                    this.terminateCall = false;
-                    return;
-                }
-                // Update call data in a single operation
-                this.callData = Object.assign(Object.assign({}, this.callData), { phone: this.sanitizedNum, isIncomingCall: false, dial: true, from: this.isSmartDialCall ? this.callData.from : this.selectedCallerId.number, timestamp: new Date().toISOString() });
-                // console.log('Initiating call with data:', this.callData);
-                console.log('dd10');
-                this.isCallInProgress = true;
-                this.callInitiated.emit(Object.assign({}, this.callData));
-                return true;
-            }
-            catch (e) {
-                // console.error('Error in initiateCall:', e);
-                this.showDialAlert('Failed to initiate call. Please try again.');
-                console.log('dd11');
-                this.isCallInProgress = false;
-                return false;
-            }
-        });
-    }
-    isInvalidNumber() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                if (this.sanitizedNum == '') {
-                    this.showDialAlert('Invalid Number');
-                    return true;
-                }
-                const validNumberPattern = /^[+\d\s()-]*$/; // Regular expression to match valid characters
-                const phoneNumber = this.sanitizedNum;
-                if (!validNumberPattern.test(phoneNumber)) {
-                    this.showDialAlert('Invalid Number');
-                    return true;
-                }
-                return false;
-            }
-            catch (error) {
-                this.showDialAlert('Invalid Number');
-                return true; // Return true if an error occurred, meaning the number is invalid
-            }
-        });
-    }
-    saveLastDialed() {
-        const contact = this.filteredContactList.find((c) => c.numbersList.some((n) => n.number === this.dialedNumber));
-        if (contact) {
-            this.lastDialed = {
-                name: contact.name,
-                image: contact.image,
-                number: this.dialedNumber
-            };
-        }
-        else {
-            if (this.dialedNumber) {
-                this.lastDialed = { number: this.dialedNumber };
-            }
-        }
-    }
-    isSavedContactDialled() {
-        let phoneNum = this.sanitizedNum.replace(/\s+/g, '');
-        let contact = this.contactList.filter((contact) => {
-            return contact.numbersList.some((num) => num.number === phoneNum);
-        });
-        if (contact.length) {
-            this.callData.name = `${contact[0].firstName} ${contact[0].middleName} ${contact[0].lastName}`.toLowerCase();
-            this.callData.img = contact[0].image || 'assets/images/user.jpg';
-            this.callData.phone = this.sanitizedNum;
-            return true;
-        }
-        return false;
-    }
-    showDialAlert(message) {
-        this.dialAlert = {
-            msg: message,
-            show: true
-        };
-        setTimeout(() => {
-            this.dialAlert.show = false;
-        }, 3000);
-    }
-    isCallerIdSet() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const tkn = localStorage.getItem('ext_token');
-                const res = yield this.extService.fetchCallerId(tkn || '').toPromise();
-                if (res.status == 200) {
-                    localStorage.setItem('trialOver', res.trialOver);
-                    this.twilioService.isTrialOver.next(res.trialOver);
-                    localStorage.setItem('paymentDue', res.paymentDue);
-                    this.twilioService.isPaymentDue.next(res.paymentDue);
-                }
-                if (res.callerid) {
-                    localStorage.setItem('callerID', res.callerid);
-                    this.extService.changeMessage(res.callerid);
-                }
-                else {
-                    localStorage.setItem('callerID', 'Not set');
-                    this.extService.changeMessage('Not set');
-                }
-                return (localStorage.getItem('callerID') !== 'Not set');
-            }
-            catch (e) {
-                console.log(e);
-                return false;
-            }
-        });
-    }
-    checkMicrophonePermission() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const stream = yield navigator.mediaDevices.getUserMedia({ audio: true });
-                stream.getTracks().forEach(track => track.stop());
-                return true;
-            }
-            catch (error) {
-                if (error.name === 'NotAllowedError') {
-                    return false;
-                }
-                else {
-                    return false;
-                }
-            }
-        });
-    }
-    askForMicrophonePermission() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const stream = yield navigator.mediaDevices.getUserMedia({ audio: true });
-                stream.getTracks().forEach(track => track.stop());
-            }
-            catch (error) {
-                console.error('User denied microphone permission:', error);
-            }
-        });
-    }
-    // below function is to get the country code with number from server 
-    getToNumber(dialedNumber) {
+    //   }catch(e){
+    //     console.error('Error in initiateCall:', e);
+    //     this.showDialAlert('Failed to initiate call. Please try again.');
+    //     this.isCallInProgress = false;
+    //     return false;
+    //   }
+    // }
+    initiateCall() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (dialedNumber[0] !== '+') {
-                // this is case when user geolocation dial code is on
-                let ipAddress = yield this.ipService.getIpAddressInfo().toPromise();
-                const res = yield this.twilioService.getToNumber(dialedNumber, ipAddress.address.countryCode).toPromise();
-                if (res.status == 200) {
-                    this.toastTimeout = res.timeInterval * 1000;
-                    yield this.showNumberToast(res);
+            try {
+                if (!this.dialedNumber && this.lastDialed) {
+                    this.sanitizedNum = this.lastDialed.number;
                 }
-            }
-        });
-    }
-    isAlertEnable() {
-        return localStorage.getItem('isAlertEnable');
-    }
-    showNumberToast(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const isAlertOn = (localStorage.getItem('isCountryCodeToastOn'));
-            if (isAlertOn == 'true') {
-                this.callNumberToast.show = true;
-                this.callNumberToast.number = data.toNumber;
-                this.callNumberToast.displayNum = data.displayNumber;
-            }
-            this.callData.displayNum = data.displayNumber;
-            //this.callData.phone = data.toNumber;
-            yield this.delay(this.toastTimeout);
-            this.dialedNumber = data.toNumber;
-            this.sanitizedNum = data.toNumber;
-            this.callNumberToast.show = false;
-            this.callNumberToast.number = '';
-            this.callNumberToast.displayNum = '';
-        });
-    }
-    delay(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
-    }
-    onMinimise(isMinimised) {
-        this.isMinimised = isMinimised;
-        this.minimiseEvent.emit(isMinimised);
-    }
-    handleNumberPaste(event) {
-        event.preventDefault();
-        const clipboardData = event.clipboardData || window.clipboardData;
-        const pastedData = clipboardData.getData('text');
-        // Log the pasted content to the console
-        if (pastedData) {
-            this.dialedNumber = pastedData;
-            this.sanitizedNum = pastedData;
-        }
-    }
-    onEnter(num) {
-        // console.log(num, 'number fn')
-        this.dialedNumber = this.dialedNumber + num;
-        this.sanitizedNum = this.dialedNumber;
-        this.showInputClearBtn = true;
-        this.numberDialed.emit(this.dialedNumber);
-    }
-    getUserCallSetting() {
-        const tkn = localStorage.getItem('ext_token');
-        this.extService.fetchCallerId(tkn || '').subscribe((resp) => {
-            if (resp.status == 200) {
-                //this.callPrefernce = resp.userSetting;
-                this.callPreference = resp.callerid;
-                this.getCallerIdList();
-            }
-        });
-    }
-    onDedicatedNumSelect(id) {
-        this.selectedCallerId = id;
-        this.isCallerIdHidden = true;
-        this.extService.setCallerId(id);
-    }
-    cancelDialNumber() {
-        this.terminateCall = true;
-        this.callNumberToast.show = false;
-    }
-    handleDivKeydown(ev) {
-        if (this.dialedNumber.length == 0) {
-            this.dialInputElement.nativeElement.focus();
-        }
-        if (ev.key === 'Enter') {
-            // Check if the dialpad is open
-            if (!this.isDialpadHidden) {
-                if (this.dialedNumber.length > 2 && this.selectedCallerId) {
-                    this.initiateCall();
+                const isInvalid = yield this.isInvalidNumber();
+                if (isInvalid) {
+                    return false;
                 }
-                if (!this.selectedCallerId) {
-                    this.shakeDedicatedBtn = true;
-                    setTimeout(() => {
-                        this.shakeDedicatedBtn = false;
-                    }, 10000);
+                this.saveLastDialed();
+                this.isSavedContactDialled();
+                this.isPaymentDue = localStorage.getItem('paymentDue') === 'false' ? false : true;
+                if (this.isPaymentDue) {
+                    swal('Warning', 'Please note that your payment is due, To continue on your services kindly subscribe to use uninterrupted services.');
+                    return false;
                 }
-            }
-        }
-    }
-    onCallBtnMouseEnter(ev) {
-        if (!this.selectedCallerId || (this.selectedCallerId == 'alwaysAsk') || (this.selectedCallerId == 'smartDialing')) {
-            this.shakeDedicatedBtn = true;
-        }
-    }
-    onCallBtnMouseLeave(ev) {
-        if (!this.selectedCallerId || (this.selectedCallerId == 'alwaysAsk') || (this.selectedCallerId == 'smartDialing')) {
-            this.shakeDedicatedBtn = false;
-        }
-    }
-    acceptNewIncomingCall(call) {
-        //first cut the current call
-        //this.callData = call;
-        this.newIncomingCallData = call;
-    }
-    rejectNewIncomingCall(call) {
-        call.reject();
-        this.newIncomingCalls = this.newIncomingCalls.filter((item) => item.parameters.CallSid !== call.parameters['CallSid']);
-        this.incomingCallsList = this.incomingCallsList.filter((item) => item.parameters.CallSid !== call.parameters['CallSid']);
-    }
-    newIncomingCallInitiated() {
-        console.log('dd12');
-        this.isCallInProgress = true;
-        this.newIncomingCalls = [];
-        this.incomingCallInitiated.emit();
-    }
-    incomingCallsNewInfo(data) {
-        this.incomingCallsList = data;
-        this.incomingCallsNewInfoEvent.emit(data);
-    }
-    ngOnDestroy() {
-        try {
-            console.log('Cleaning up C2cDialpadComponent');
-            // Unsubscribe from all subscriptions
-            if (this.subscriptions) {
-                this.subscriptions.unsubscribe();
-            }
-            // Clean up Twilio device when component is destroyed
-            if (this.twilioService['device']) {
-                this.twilioService['device'].destroy();
-            }
-            // End any active call
-            if (this.isCallInProgress) {
-                this.endCall();
-            }
-            // Clear any timeouts or intervals if they exist
-            if (this.toastTimeout) {
-                clearTimeout(this.toastTimeout);
-            }
-            console.log('C2cDialpadComponent cleanup complete');
-        }
-        catch (error) {
-            console.error('Error during component cleanup:', error);
-        }
-    }
-}
-DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: i3$1.MatDialog }, { token: IpAddressService }, { token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: i5.Router }, { token: IncomeingCallSocketService }], target: i0.ɵɵFactoryTarget.Component });
-DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", numberDialed: "numberDialed" }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\"\r\n   (endCallEvent)=\"endCall()\"\r\n   (minimiseEvent)=\"onMinimise($event)\"\r\n   (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n   [newIncomingCallData]=\"newIncomingCallData\"\r\n   [deviceId]=\"deviceId\"\r\n   [newIncomingCallsList]=\"incomingCallsList\"\r\n   (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n   [selectedCallerId]=\"selectedCallerId\"\r\n   [callData]=\"callData\">\r\n  </lib-call-progress>\r\n  <div class=\"dialpad-container\" *ngIf=\"!isCallInProgress\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n    <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n      <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n        <div class=\"no-selection-alert\">\r\n          <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n          <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n          <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n        <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"flex-grow-1 my-auto text-left\">\r\n              You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n            </div>\r\n            <div class=\"text-right\">\r\n              <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n              <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n            </div>\r\n      \r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n        <div class=\"d-flex justify-content-between mt-2\">\r\n          <p></p>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n          </span>\r\n        </div>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n          <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n            <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n              <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n            </svg>        \r\n          </span>\r\n          <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n        </div>\r\n        <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n          <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n        </div>\r\n        <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n          <span>{{dialAlert.msg}}</span>\r\n        </div> -->\r\n        <div>\r\n          <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n            <div class=\"contact-img\">\r\n              <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n              <ng-template #alphaName>\r\n                <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n              </ng-template>\r\n            </div>\r\n            <div class=\"contact-details\">\r\n              <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n              <p>{{contact.numbersList[0].number}}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg\r\n          class=\"waves\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\"\r\n          preserveAspectRatio=\"none\"\r\n          shape-rendering=\"auto\"\r\n        >\r\n          <defs>\r\n            <path\r\n              id=\"gentle-wave\"\r\n              d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n            />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"0\"\r\n              fill=\"rgba(255,255,255,0.7)\"\r\n            />\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"3\"\r\n              fill=\"rgba(255,255,255,0.5)\"\r\n            />\r\n            <!-- <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"5\"\r\n              fill=\"rgba(255,255,255,0.3)\"\r\n            /> -->\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n      (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n      [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n       [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n        {{key.num}} \r\n        <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n          voicemail\r\n        </span>\r\n        <ng-template #otherThanOne>\r\n          <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n      <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n        [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n        <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n          call\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n      <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n        <div>\r\n          <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n          {{selectedCallerId?.number}}\r\n        </div>\r\n      </div>\r\n      <ng-template #askBlock>\r\n        <div class=\"shownCallerId\"  (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <h5 class=\"mb-0\">Select C2C number</h5>\r\n            <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n              <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n            </span> -->\r\n            <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n        <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n    <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"  [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n      <div style=\"display: flex; justify-content: space-between\">\r\n        <!-- <h4>Select C2C Softphone Number</h4> -->\r\n         <h4>Make outgoing call using</h4>\r\n        <span\r\n          class=\"material-symbols-outlined\"\r\n          style=\"cursor: pointer\"\r\n          (click)=\"isCallerIdHidden = true\"\r\n        >\r\n          close\r\n        </span>\r\n      </div>\r\n      <ul>\r\n        <ng-container *ngFor=\"let callerId of callerIdList\">\r\n          <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n            <div>\r\n              <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n              {{callerId?.number}}\r\n            </div>\r\n            <span>{{callerId?.countryName}}</span>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    </div>\r\n    <ng-template #noCallerIdMessage>\r\n      <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n      </span>\r\n    </ng-template>\r\n    <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n      <div class=\"card dedicatedNumPopup\">\r\n        <div class=\"card-header chooseDedicatedHeader\">\r\n          <h5>Choose C2C Number</h5>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n        </div>\r\n        <div class=\"card-body dedicatedNumList\">\r\n          <ul>\r\n            <ng-container *ngFor=\"let callerId of callerIdList\">\r\n              <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n                <div>\r\n                  <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                  {{callerId?.number}}\r\n                </div>\r\n                <span>{{callerId?.countryName}}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n      <div>\r\n        <div class=\"inc-user-img\">\r\n          <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n        </div>\r\n        \r\n      </div>\r\n      <div class=\"flex-grow-1\">\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call\r\n          </span>\r\n        </button>\r\n        <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call_end\r\n          </span>\r\n        </button>\r\n      </div>\r\n     \r\n    </div> -->\r\n  </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "selectedCallerId", "newIncomingCallData", "newIncomingCallsList", "deviceId"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\"\r\n   (endCallEvent)=\"endCall()\"\r\n   (minimiseEvent)=\"onMinimise($event)\"\r\n   (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n   [newIncomingCallData]=\"newIncomingCallData\"\r\n   [deviceId]=\"deviceId\"\r\n   [newIncomingCallsList]=\"incomingCallsList\"\r\n   (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n   [selectedCallerId]=\"selectedCallerId\"\r\n   [callData]=\"callData\">\r\n  </lib-call-progress>\r\n  <div class=\"dialpad-container\" *ngIf=\"!isCallInProgress\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n    <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n      <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n        <div class=\"no-selection-alert\">\r\n          <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n          <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n          <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n        <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"flex-grow-1 my-auto text-left\">\r\n              You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n            </div>\r\n            <div class=\"text-right\">\r\n              <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n              <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n            </div>\r\n      \r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n        <div class=\"d-flex justify-content-between mt-2\">\r\n          <p></p>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n          </span>\r\n        </div>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n          <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n            <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n              <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n            </svg>        \r\n          </span>\r\n          <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n        </div>\r\n        <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n          <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n        </div>\r\n        <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n          <span>{{dialAlert.msg}}</span>\r\n        </div> -->\r\n        <div>\r\n          <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n            <div class=\"contact-img\">\r\n              <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n              <ng-template #alphaName>\r\n                <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n              </ng-template>\r\n            </div>\r\n            <div class=\"contact-details\">\r\n              <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n              <p>{{contact.numbersList[0].number}}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg\r\n          class=\"waves\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\"\r\n          preserveAspectRatio=\"none\"\r\n          shape-rendering=\"auto\"\r\n        >\r\n          <defs>\r\n            <path\r\n              id=\"gentle-wave\"\r\n              d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n            />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"0\"\r\n              fill=\"rgba(255,255,255,0.7)\"\r\n            />\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"3\"\r\n              fill=\"rgba(255,255,255,0.5)\"\r\n            />\r\n            <!-- <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"5\"\r\n              fill=\"rgba(255,255,255,0.3)\"\r\n            /> -->\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n      (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n      [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n       [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n        {{key.num}} \r\n        <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n          voicemail\r\n        </span>\r\n        <ng-template #otherThanOne>\r\n          <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n      <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n        [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n        <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n          call\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n      <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n        <div>\r\n          <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n          {{selectedCallerId?.number}}\r\n        </div>\r\n      </div>\r\n      <ng-template #askBlock>\r\n        <div class=\"shownCallerId\"  (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <h5 class=\"mb-0\">Select C2C number</h5>\r\n            <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n              <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n            </span> -->\r\n            <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n        <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n    <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"  [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n      <div style=\"display: flex; justify-content: space-between\">\r\n        <!-- <h4>Select C2C Softphone Number</h4> -->\r\n         <h4>Make outgoing call using</h4>\r\n        <span\r\n          class=\"material-symbols-outlined\"\r\n          style=\"cursor: pointer\"\r\n          (click)=\"isCallerIdHidden = true\"\r\n        >\r\n          close\r\n        </span>\r\n      </div>\r\n      <ul>\r\n        <ng-container *ngFor=\"let callerId of callerIdList\">\r\n          <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n            <div>\r\n              <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n              {{callerId?.number}}\r\n            </div>\r\n            <span>{{callerId?.countryName}}</span>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    </div>\r\n    <ng-template #noCallerIdMessage>\r\n      <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n      </span>\r\n    </ng-template>\r\n    <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n      <div class=\"card dedicatedNumPopup\">\r\n        <div class=\"card-header chooseDedicatedHeader\">\r\n          <h5>Choose C2C Number</h5>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n        </div>\r\n        <div class=\"card-body dedicatedNumList\">\r\n          <ul>\r\n            <ng-container *ngFor=\"let callerId of callerIdList\">\r\n              <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n                <div>\r\n                  <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                  {{callerId?.number}}\r\n                </div>\r\n                <span>{{callerId?.countryName}}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n      <div>\r\n        <div class=\"inc-user-img\">\r\n          <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n        </div>\r\n        \r\n      </div>\r\n      <div class=\"flex-grow-1\">\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call\r\n          </span>\r\n        </button>\r\n        <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call_end\r\n          </span>\r\n        </button>\r\n      </div>\r\n     \r\n    </div> -->\r\n  </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"] }]
-        }], ctorParameters: function () { return [{ type: TwilioService }, { type: ExtensionService }, { type: i3$1.MatDialog }, { type: IpAddressService }, { type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: i5.Router }, { type: IncomeingCallSocketService }]; }, propDecorators: { autoOpenOnIncoming: [{
-                type: Input
-            }], contactInfo: [{
-                type: Input
-            }], deviceId: [{
-                type: Input
-            }], isDialpadHidden: [{
-                type: Input
-            }], incomingCallData: [{
-                type: Input
-            }], closeDialpadEvent: [{
-                type: Output
-            }], callInitiated: [{
-                type: Output
-            }], endCallEvent: [{
-                type: Output
-            }], minimiseEvent: [{
-                type: Output
-            }], incomingCallsNewInfoEvent: [{
-                type: Output
-            }], incomingCallInitiated: [{
-                type: Output
-            }], dialInputElement: [{
-                type: ViewChild,
-                args: ['dialInput']
-            }], numberDialed: [{
-                type: Output
-            }] } });
-
-const GlobalConstant = {
-    ErrorMsg500: "Unable to process request. Please try again later.",
-    isSMSVisible: true,
-    dedicatedNumText: 'C2C Number'
-};
-
-class IncomingCallComponent {
-    constructor(extensionService, twilioService, notificationSerivce) {
-        this.extensionService = extensionService;
-        this.twilioService = twilioService;
-        this.notificationSerivce = notificationSerivce;
-        this.showRingAnimation = true;
-        this.selectedIncomingCall = {};
-        this.dedicatedNum = '';
-        this.shouldRecordCall = false;
-        this.isClickExpand = false;
-        this.isRecording = false;
-        this.isPaused = false;
-        this.isTwilioConnected = false;
-        this.closeIncomingCallDiv = new EventEmitter();
-        this.incomingCallsNewList = new EventEmitter();
-        this.selectedIncomingCallInfo = new EventEmitter();
-        this.disbaleEndCallBtn = false;
-        this.incomingCallSid = '';
-        this.incomingRecordCall = false;
-        this.timeElapsed = 0;
-        console.log('IncomingCallComponent');
-    }
-    ngOnInit() {
-        // this.twilioService.currentCall.subscribe((call: any) => {
-        //   if (call) {
-        //     this.twilioCallData = call;
-        //     this.notificationSerivce.showNotification(call);
-        //     // Handle the call UI
-        //   }
-        // });
-        console.log('IncomingCallComponent ngOnInit');
-        try {
-            this.twilioService.currentCall.subscribe(call => {
-                if (call) {
-                    this.twilioCallData = call;
-                    this.twilioAuthId = call.customParameters.get('twilioAuthId');
-                    if (!call.parameters) {
-                        call.parameters = {};
-                    }
-                    this.sendIPforIncomingCall(this.twilioAuthId, '');
-                    call.on('cancel', () => {
-                        if (this.incomingCallData && this.incomingCallData.parameters && this.incomingCallData.parameters.CallSid) {
-                            this.newIncomingCallsList = this.newIncomingCallsList.filter((item) => item.parameters && item.parameters.CallSid !== this.incomingCallData.parameters.CallSid);
-                        }
-                        this.rejectCallFromList(call);
-                    });
-                    call.on('disconnect', () => {
-                        if (this.incomingCallData && this.incomingCallData.parameters && this.incomingCallData.parameters.CallSid) {
-                            this.newIncomingCallsList = this.newIncomingCallsList.filter((item) => item.parameters && item.parameters.CallSid !== this.incomingCallData.parameters.CallSid);
-                        }
-                        this.rejectCallFromList(call);
-                    });
+                this.isTrialPeriodOver = localStorage.getItem('trialOver') === 'false' ? false : true;
+                if (this.sanitizedNum === localStorage.getItem('twilioNumber')) {
+                    swal('Error', 'You can not dial this number');
+                    return false;
                 }
-            });
-        }
-        catch (e) {
-            console.log(e);
-        }
+                const hasPermission = yield this.checkMicrophonePermission();
+                if (!hasPermission) {
+                    yield this.askForMicrophonePermission();
+                    return false;
+                }
+                if (!this.selectedCallerId) {
+                    this.shakeDedicatedBtn = true;
+                    this.showDialAlert('Select a C2C number to call');
+                    setTimeout(() => {
+                        this.shakeDedicatedBtn = false;
+                    }, 3000);
+                    return false;
+                }
+                // Clear displayNum if value is bound from previous call
+                this.callData.displayNum = '';
+                // Get number to be dialed from backend
+                yield this.getToNumber(this.sanitizedNum);
+                if (this.terminateCall) {
+                    this.terminateCall = false;
+                    return;
+                }
+                // Update call data in a single operation
+                this.callData = Object.assign(Object.assign({}, this.callData), { phone: this.sanitizedNum, isIncomingCall: false, dial: true, from: this.isSmartDialCall ? this.callData.from : this.selectedCallerId.number, timestamp: new Date().toISOString() });
+                // console.log('Initiating call with data:', this.callData);
+                console.log('dd10');
+                this.isCallInProgress = true;
+                this.callInitiated.emit(Object.assign({}, this.callData));
+                return true;
+            }
+            catch (e) {
+                // console.error('Error in initiateCall:', e);
+                this.showDialAlert('Failed to initiate call. Please try again.');
+                console.log('dd11');
+                this.isCallInProgress = false;
+                return false;
+            }
+        });
     }
-    acceptCallFromList(data) {
-        if (!data) {
-            return;
-        }
-        // Disconnect any other connected call before accepting this one
-        if (this.newIncomingCallsList && this.newIncomingCallsList.length) {
-            const otherConnected = this.newIncomingCallsList.find((item) => item.isCallConnected && item !== data);
-            if (otherConnected) {
-                try {
-                    otherConnected.disconnect();
+    isInvalidNumber() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                if (this.sanitizedNum == '') {
+                    this.showDialAlert('Invalid Number');
+                    return true;
                 }
-                catch (_a) { }
-                otherConnected.isCallConnected = false;
-                otherConnected.isFirstCall = false;
+                const validNumberPattern = /^[+\d\s()-]*$/; // Regular expression to match valid characters
+                const phoneNumber = this.sanitizedNum;
+                if (!validNumberPattern.test(phoneNumber)) {
+                    this.showDialAlert('Invalid Number');
+                    return true;
+                }
+                return false;
+            }
+            catch (error) {
+                this.showDialAlert('Invalid Number');
+                return true; // Return true if an error occurred, meaning the number is invalid
             }
-        }
-        // Accept this call and mark as the active one
-        data.accept();
-        data.isCallConnected = true;
-        data.isFirstCall = true;
-        this.extensionService.setCallSid(this.CallSid, this.recordCall);
-        this.sendIPforIncomingCall(data.customParameters.get('twilioAuthId'), 'answered').then(() => {
-            this.closeIncomingCallWrapper(1);
         });
     }
-    rejectCallFromList(data) {
-        if (!data)
-            return;
-        if (data.reject)
-            data.reject();
-        if (data.disconnect)
-            data.disconnect();
-        if (data.parameters) {
-            data.parameters['isCallConnected'] = false; // Should be false when rejecting
-        }
-        if (data.customParameters) {
-            this.sendIPforIncomingCall(data.customParameters.get('twilioAuthId'), 'answered');
+    saveLastDialed() {
+        const contact = this.filteredContactList.find((c) => c.numbersList.some((n) => n.number === this.dialedNumber));
+        if (contact) {
+            this.lastDialed = {
+                name: contact.name,
+                image: contact.image,
+                number: this.dialedNumber
+            };
         }
-        if (this.newIncomingCallsList && data && data.parameters && data.parameters.CallSid) {
-            this.newIncomingCallsList = this.newIncomingCallsList.filter((item) => item.parameters && item.parameters.CallSid !== data.parameters.CallSid);
-            this.incomingCallsNewList.emit(this.newIncomingCallsList);
-            if (this.newIncomingCallsList.length == 0) {
-                this.closeIncomingCallDiv.emit({ show: 0, call: data });
+        else {
+            if (this.dialedNumber) {
+                this.lastDialed = { number: this.dialedNumber };
             }
         }
     }
-    closeIncomingCallWrapper(val) {
-        this.closeIncomingCallDiv.emit({ show: val, call: this.twilioCallData });
+    isSavedContactDialled() {
+        let phoneNum = this.sanitizedNum.replace(/\s+/g, '');
+        let contact = this.contactList.filter((contact) => {
+            return contact.numbersList.some((num) => num.number === phoneNum);
+        });
+        if (contact.length) {
+            this.callData.name = `${contact[0].firstName} ${contact[0].middleName} ${contact[0].lastName}`.toLowerCase();
+            this.callData.img = contact[0].image || 'assets/images/user.jpg';
+            this.callData.phone = this.sanitizedNum;
+            return true;
+        }
+        return false;
     }
-    toggleMute(data) {
-        this.isMute = !this.isMute;
-        data.mute(this.isMute);
+    showDialAlert(message) {
+        this.dialAlert = {
+            msg: message,
+            show: true
+        };
+        setTimeout(() => {
+            this.dialAlert.show = false;
+        }, 3000);
     }
-    sendIPforIncomingCall(recordId, callstatus) {
-        console.log('sendIPforIncomingCall');
-        return new Promise((resolve, reject) => {
-            this.extensionService.getIPDetailsForCall(recordId, callstatus, this.deviceId).subscribe((res) => {
-                const resp = res;
+    isCallerIdSet() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const tkn = localStorage.getItem('ext_token');
+                const res = yield this.extService.fetchCallerId(tkn || '').toPromise();
                 if (res.status == 200) {
-                    if (resp.callAuth) {
-                        this.CallSid = resp.callAuth.callSid;
-                        this.recordCall = resp.callAuth.recordCall;
-                        // Handle the recordCall flag
-                        if (resp.callAuth.recordCall) {
-                            this.shouldRecordCall = true;
-                        }
-                        else {
-                            this.shouldRecordCall = false;
-                        }
-                    }
-                    else {
-                        // swal("Error", "Missing call authentication details.", "error");
-                    }
-                    resolve();
+                    localStorage.setItem('trialOver', res.trialOver);
+                    this.twilioService.isTrialOver.next(res.trialOver);
+                    localStorage.setItem('paymentDue', res.paymentDue);
+                    this.twilioService.isPaymentDue.next(res.paymentDue);
+                }
+                if (res.callerid) {
+                    localStorage.setItem('callerID', res.callerid);
+                    this.extService.changeMessage(res.callerid);
                 }
                 else {
-                    swal("Error", resp.message.join("<br/>"), "error");
-                    resolve();
+                    localStorage.setItem('callerID', 'Not set');
+                    this.extService.changeMessage('Not set');
                 }
-            }, (error) => {
-                swal("Error", GlobalConstant.ErrorMsg500, "error");
-                resolve();
-            });
+                return (localStorage.getItem('callerID') !== 'Not set');
+            }
+            catch (e) {
+                console.log(e);
+                return false;
+            }
         });
     }
-    onUserInfoByCallSid() {
-        if (this.selectedIncomingCall && this.selectedIncomingCall.userInfo) {
-        }
-        return this.selectedIncomingCall ? Object.keys(this.selectedIncomingCall).length ? true : false : false;
+    checkMicrophonePermission() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const stream = yield navigator.mediaDevices.getUserMedia({ audio: true });
+                stream.getTracks().forEach(track => track.stop());
+                return true;
+            }
+            catch (error) {
+                if (error.name === 'NotAllowedError') {
+                    return false;
+                }
+                else {
+                    return false;
+                }
+            }
+        });
     }
-    // Check if call has detailed information available for expansion
-    hasDetailedInfo(callData) {
-        if (!callData)
-            return false;
-        // Check if userInfo exists and has meaningful data
-        if (callData.userInfo && callData.userInfo.c2cInformation) {
-            const info = callData.userInfo.c2cInformation;
-            return !!(info.subject && info.subject !== '-' ||
-                info.email && info.email !== '-' ||
-                info.message && info.message !== '-' ||
-                info.pointName && info.pointName !== '-' ||
-                info.sourceName && info.sourceName !== '-' ||
-                info.extension && info.extension !== '-' ||
-                info.url ||
-                info.latitude ||
-                info.longitude);
-        }
-        return false;
+    askForMicrophonePermission() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const stream = yield navigator.mediaDevices.getUserMedia({ audio: true });
+                stream.getTracks().forEach(track => track.stop());
+            }
+            catch (error) {
+                console.error('User denied microphone permission:', error);
+            }
+        });
     }
-    onClickExpand(data) {
-        if (this.selectedIncomingCall === data && this.isClickExpand) {
-            this.isClickExpand = false;
-            this.selectedIncomingCall = null;
-            this.selectedIncomingCallInfo.emit({});
-            return;
-        }
-        this.isClickExpand = true;
-        this.selectedIncomingCall = data;
-        if (this.selectedIncomingCall) {
-            this.selectedIncomingCall['isClickExpand'] = true;
-            if (this.newIncomingCallsList && this.newIncomingCallsList.length > 0) {
-                this.newIncomingCallsList.forEach((call) => {
-                    if (call !== this.selectedIncomingCall) {
-                        call['isClickExpand'] = false;
-                    }
-                });
+    // below function is to get the country code with number from server 
+    getToNumber(dialedNumber) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (dialedNumber[0] !== '+') {
+                // this is case when user geolocation dial code is on
+                let ipAddress = yield this.ipService.getIpAddressInfo().toPromise();
+                const res = yield this.twilioService.getToNumber(dialedNumber, ipAddress.address.countryCode).toPromise();
+                if (res.status == 200) {
+                    this.toastTimeout = res.timeInterval * 1000;
+                    yield this.showNumberToast(res);
+                }
             }
-            this.selectedIncomingCallInfo.emit(this.selectedIncomingCall);
-            if (!this.selectedIncomingCall.userInfo || this.selectedIncomingCall.userInfo.status == 201) {
-                this.getUserInformation(this.selectedIncomingCall);
+        });
+    }
+    isAlertEnable() {
+        return localStorage.getItem('isAlertEnable');
+    }
+    showNumberToast(data) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const isAlertOn = (localStorage.getItem('isCountryCodeToastOn'));
+            if (isAlertOn == 'true') {
+                this.callNumberToast.show = true;
+                this.callNumberToast.number = data.toNumber;
+                this.callNumberToast.displayNum = data.displayNumber;
             }
+            this.callData.displayNum = data.displayNumber;
+            //this.callData.phone = data.toNumber;
+            yield this.delay(this.toastTimeout);
+            this.dialedNumber = data.toNumber;
+            this.sanitizedNum = data.toNumber;
+            this.callNumberToast.show = false;
+            this.callNumberToast.number = '';
+            this.callNumberToast.displayNum = '';
+        });
+    }
+    delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+    onMinimise(isMinimised) {
+        this.isMinimised = isMinimised;
+        this.minimiseEvent.emit(isMinimised);
+    }
+    handleNumberPaste(event) {
+        event.preventDefault();
+        const clipboardData = event.clipboardData || window.clipboardData;
+        const pastedData = clipboardData.getData('text');
+        // Log the pasted content to the console
+        if (pastedData) {
+            this.dialedNumber = pastedData;
+            this.sanitizedNum = pastedData;
         }
     }
-    getUserInformation(incomingCallData) {
-        let data = this.fromEntries(Array.from(incomingCallData.customParameters.entries()));
-        this.extensionService.getUserInformation(data['twilioAuthId']).subscribe(response => {
-            setTimeout(() => {
-                incomingCallData['userInfo'] = response;
-            }, 5000);
-        }, error => {
-            console.error('Error starting recording', error);
+    onEnter(num) {
+        // console.log(num, 'number fn')
+        this.dialedNumber = this.dialedNumber + num;
+        this.sanitizedNum = this.dialedNumber;
+        this.showInputClearBtn = true;
+        this.numberDialed.emit(this.dialedNumber);
+    }
+    getUserCallSetting() {
+        const tkn = localStorage.getItem('ext_token');
+        this.extService.fetchCallerId(tkn || '').subscribe((resp) => {
+            if (resp.status == 200) {
+                //this.callPrefernce = resp.userSetting;
+                this.callPreference = resp.callerid;
+                this.getCallerIdList();
+            }
         });
     }
-    fromEntries(entries) {
-        return entries.reduce((acc, [key, value]) => {
-            acc[key] = value;
-            return acc;
-        }, {});
+    onDedicatedNumSelect(id) {
+        this.selectedCallerId = id;
+        this.isCallerIdHidden = true;
+        this.extService.setCallerId(id);
     }
-    toggleRecording(sid) {
-        if (this.isRecording) {
-            this.stopRecording();
+    cancelDialNumber() {
+        this.terminateCall = true;
+        this.callNumberToast.show = false;
+    }
+    handleDivKeydown(ev) {
+        if (this.dialedNumber.length == 0) {
+            this.dialInputElement.nativeElement.focus();
         }
-        else {
-            this.startRecording();
+        if (ev.key === 'Enter') {
+            // Check if the dialpad is open
+            if (!this.isDialpadHidden) {
+                if (this.dialedNumber.length > 2 && this.selectedCallerId) {
+                    this.initiateCall();
+                }
+                if (!this.selectedCallerId) {
+                    this.shakeDedicatedBtn = true;
+                    setTimeout(() => {
+                        this.shakeDedicatedBtn = false;
+                    }, 10000);
+                }
+            }
         }
     }
-    startRecording() {
-        let sid;
-        const details = this.extensionService.getCallSid();
-        this.incomingCallSid = details.callSid;
-        this.incomingRecordCall = details.recordCall;
-        sid = this.incomingCallSid ? this.incomingCallSid : this.CallSid;
-        // if (!this.incomingRecordCall && !this.recordCall) {
-        //   return;
-        // }
-        this.extensionService.getCallRecording(sid).subscribe(response => {
-            this.isRecording = true;
-            this.isPaused = false;
-            // this.timeElapsed = 0;
-            this.startTimer1();
-        }, error => {
-            console.error('Error starting recording', error);
-        });
-    }
-    stopRecording() {
-        // if (!this.incomingRecordCall && !this.recordCall) {
-        //   return;
-        // }
-        this.isRecording = false;
-        this.isPaused = false;
-        if (this.timerSubscription) {
-            this.timerSubscription.unsubscribe();
+    onCallBtnMouseEnter(ev) {
+        if (!this.selectedCallerId || (this.selectedCallerId == 'alwaysAsk') || (this.selectedCallerId == 'smartDialing')) {
+            this.shakeDedicatedBtn = true;
         }
     }
-    pauseRecording() {
-        const details = this.extensionService.getCallSid();
-        this.incomingCallSid = details.callSid;
-        this.incomingRecordCall = details.recordCall;
-        const sid = this.incomingCallSid ? this.incomingCallSid : this.CallSid;
-        // if (!this.incomingRecordCall && !this.recordCall) {
-        //   return;
-        // }
-        this.extensionService.pauseOrResumeRecording(sid, 'pause').subscribe(response => {
-            //   this.stopRecordingTimer();
-            this.isPaused = true;
-        }, error => {
-            console.error('Error pausing recording:', error);
-            // Consider updating the UI to show the error state
-        });
+    onCallBtnMouseLeave(ev) {
+        if (!this.selectedCallerId || (this.selectedCallerId == 'alwaysAsk') || (this.selectedCallerId == 'smartDialing')) {
+            this.shakeDedicatedBtn = false;
+        }
     }
-    resumeRecording(sid) {
-        //   let sid;
-        const details = this.extensionService.getCallSid();
-        this.incomingCallSid = details.callSid;
-        this.incomingRecordCall = details.recordCall;
-        sid = this.incomingCallSid ? this.incomingCallSid : this.CallSid;
-        // if (!this.incomingRecordCall && !this.recordCall) {
-        //   return; // Skip if recording is not enabled
-        // }
-        this.extensionService.pauseOrResumeRecording(sid, 'resume').subscribe(response => {
-            this.isPaused = false;
-            this.startTimer1();
-        }, error => {
-            console.error('Error resuming recording', error);
-        });
+    acceptNewIncomingCall(call) {
+        //first cut the current call
+        //this.callData = call;
+        this.newIncomingCallData = call;
     }
-    startTimer1() {
-        this.timerSubscription = interval(1000).subscribe(() => {
-            this.timeElapsed++;
-        });
+    rejectNewIncomingCall(call) {
+        call.reject();
+        this.newIncomingCalls = this.newIncomingCalls.filter((item) => item.parameters.CallSid !== call.parameters['CallSid']);
+        this.incomingCallsList = this.incomingCallsList.filter((item) => item.parameters.CallSid !== call.parameters['CallSid']);
     }
-    stopRecordingTimer() {
-        if (this.timerSubscription) {
-            this.timerSubscription.unsubscribe(); // Pause the timer
-            this.timerSubscription = undefined; // Optionally reset the subscription
-        }
+    newIncomingCallInitiated() {
+        console.log('dd12');
+        this.isCallInProgress = true;
+        this.newIncomingCalls = [];
+        this.incomingCallInitiated.emit();
     }
-    // device: any;
-    onEndCall() {
-        this.extensionService.getRemoveParticipants(this.incomingCallData.participantId, this.incomingCallData.conferenceId).toPromise();
+    incomingCallsNewInfo(data) {
+        this.incomingCallsList = data;
+        this.incomingCallsNewInfoEvent.emit(data);
     }
-    add(data) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if ((data === null || data === void 0 ? void 0 : data.status) != 'ringing') {
-                let device = yield this.twilioService.connect('');
-                console.log(device, 'callConnect');
+    ngOnDestroy() {
+        try {
+            console.log('Cleaning up C2cDialpadComponent');
+            // Unsubscribe from all subscriptions
+            if (this.subscriptions) {
+                this.subscriptions.unsubscribe();
             }
-            else if ((data === null || data === void 0 ? void 0 : data.status) == 'ringing') {
-                this.twilioService.addIncomingParticipant(data === null || data === void 0 ? void 0 : data.id, this.twilioService.conferenceCallInfo.conferenceId).subscribe((data) => {
-                    console.log(data, 'bhhhhhhhhhhhhhhhhhhh');
-                });
+            // Clean up Twilio device when component is destroyed
+            if (this.twilioService['device']) {
+                this.twilioService['device'].destroy();
             }
-            // this.device = new Device();/
-            // Device.connect({ conferenceName: 'my-conference-room' });
-            // this.device = new Device({ conferenceName: 'my-conference-room' });
-        });
+            // End any active call
+            if (this.isCallInProgress) {
+                this.endCall();
+            }
+            // Clear any timeouts or intervals if they exist
+            if (this.toastTimeout) {
+                clearTimeout(this.toastTimeout);
+            }
+            console.log('C2cDialpadComponent cleanup complete');
+        }
+        catch (error) {
+            console.error('Error during component cleanup:', error);
+        }
     }
 }
-IncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, deps: [{ token: ExtensionService }, { token: TwilioService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1\">\r\n    <div style=\"display: flex; flex-direction: column;\">\r\n        <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n            <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n        </div>\r\n        <div class=\"callerDetails\">\r\n            <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n            <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n             <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n             <p>{{incomingCallData?.phone}}</p>\r\n        </div>\r\n      \r\n        <!-- <div class=\"callerDetails\">\r\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n        </div> -->\r\n        <div class=\"call-action-btns\">\r\n            <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"add(newIncomingCallsList[0])\"> call </span> \r\n            </button>\r\n                <!-- <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\r\n                </button> -->\r\n            <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [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=\"newIncomingCallsList[0]?.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=\"\">\r\n                    <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.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=\"newIncomingCallsList[0]?.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(newIncomingCallsList[0])\"> call_end </span>\r\n            </button> -->\r\n            <button class=\"call-btn reject-btn\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"onEndCall()\"> 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\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n            </defs>\r\n            <g class=\"parallax\">\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n    <div class=\"collops\">\r\n        <div class=\"d-flex w-100\">\r\n            <div class=\"d-flex flex-column container-fluid\" >\r\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">            \r\n                    <div class=\"p-2 \">\r\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n                            <div class=\"img\">\r\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n                            </div>\r\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n                                <div class=\"callerDetails-wrapper\">\r\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n                                    <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n                                </div>  \r\n                                <div class=\"d-flex align-items-center\">\r\n                                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n                                        <!-- <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span> -->\r\n                                        <span class=\"material-symbols-outlined\" (click)=\"add(data)\"> call </span>\r\n                                    </button>\r\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\"  (click)=\"toggleMute(data)\" [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=\"data?.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=\"\">\r\n                                            <button class=\"record-btn pause-resume\" *ngIf=\"data?.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=\"data?.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-wrapper reject-btn\">\r\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n                                    </button>\r\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n                                         (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n                                         [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n                                         [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n                                        <i class=\"fa fa-angle-right\"></i>\r\n                                    </div>\r\n                                    <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\">                                       \r\n                                        <i class=\"fa fa-angle-right\"></i>                                \r\n                                    </div> -->\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \">   \r\n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n              </div>\r\n              <div class=\"text-center\">\r\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n              </div>\r\n              <div class=\"f-13\">\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Subject:</div>\r\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n                    </div>  \r\n                </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Email:</div>\r\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n                    </div>                      \r\n                </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                      <div class=\"col-6 mb-2\">\r\n                          <div class=\"\">Number:</div>\r\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n                      </div>\r\n                      <div class=\"col-6\">\r\n                          <div class=\"\">Language:</div>\r\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n                  <div class=\"row mb-2\">\r\n                      <div class=\"col-6 mb-2\">\r\n                          <div class=\"\">Extension:</div>\r\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n\r\n                  <div class=\"row mb-3\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Image:</div>\r\n                        <div class=\"text-ellipsis\">\r\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" 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=\"\">Message:</div>\r\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"\">Point Name:</div>\r\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"\">Source Name:</div>\r\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.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          </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\" [ngStyle]=\"{'width': '756px'}\">\r\n            <defs>\r\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n            </defs>\r\n            <g class=\"parallax\">\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>", styles: [".call-container{width:385px!important;height:646px!important;margin:auto;border-radius:30px;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}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.call-container-open{width:752px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px}.call-btn-wrapper span{color:#fff;line-height:unset!important}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@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}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.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}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;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}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.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}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;display:flex;justify-content:center;align-items:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.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}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;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;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.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%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, decorators: [{
+DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: i3.MatDialog }, { token: IpAddressService }, { token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: i5.Router }, { token: IncomeingCallSocketService }], target: i0.ɵɵFactoryTarget.Component });
+DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", numberDialed: "numberDialed" }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\"\r\n   (endCallEvent)=\"endCall()\"\r\n   (minimiseEvent)=\"onMinimise($event)\"\r\n   (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n   [newIncomingCallData]=\"newIncomingCallData\"\r\n   [deviceId]=\"deviceId\"\r\n   [newIncomingCallsList]=\"incomingCallsList\"\r\n   (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n   [selectedCallerId]=\"selectedCallerId\"\r\n   [callData]=\"callData\">\r\n  </lib-call-progress>\r\n  <div class=\"dialpad-container\" *ngIf=\"!isCallInProgress\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n    <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n      <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n        <div class=\"no-selection-alert\">\r\n          <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n          <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n          <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n        <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"flex-grow-1 my-auto text-left\">\r\n              You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n            </div>\r\n            <div class=\"text-right\">\r\n              <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n              <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n            </div>\r\n      \r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n        <div class=\"d-flex justify-content-between mt-2\">\r\n          <p></p>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n          </span>\r\n        </div>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n          <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n            <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n              <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n            </svg>        \r\n          </span>\r\n          <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n        </div>\r\n        <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n          <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n        </div>\r\n        <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n          <span>{{dialAlert.msg}}</span>\r\n        </div> -->\r\n        <div>\r\n          <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n            <div class=\"contact-img\">\r\n              <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n              <ng-template #alphaName>\r\n                <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n              </ng-template>\r\n            </div>\r\n            <div class=\"contact-details\">\r\n              <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n              <p>{{contact.numbersList[0].number}}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg\r\n          class=\"waves\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\"\r\n          preserveAspectRatio=\"none\"\r\n          shape-rendering=\"auto\"\r\n        >\r\n          <defs>\r\n            <path\r\n              id=\"gentle-wave\"\r\n              d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n            />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"0\"\r\n              fill=\"rgba(255,255,255,0.7)\"\r\n            />\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"3\"\r\n              fill=\"rgba(255,255,255,0.5)\"\r\n            />\r\n            <!-- <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"5\"\r\n              fill=\"rgba(255,255,255,0.3)\"\r\n            /> -->\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n      (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n      [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n       [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n        {{key.num}} \r\n        <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n          voicemail\r\n        </span>\r\n        <ng-template #otherThanOne>\r\n          <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n      <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n        [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n        <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n          call\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n      <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n        <div>\r\n          <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n          {{selectedCallerId?.number}}\r\n        </div>\r\n      </div>\r\n      <ng-template #askBlock>\r\n        <div class=\"shownCallerId\"  (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <h5 class=\"mb-0\">Select C2C number</h5>\r\n            <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n              <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n            </span> -->\r\n            <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n        <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n    <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"  [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n      <div style=\"display: flex; justify-content: space-between\">\r\n        <!-- <h4>Select C2C Softphone Number</h4> -->\r\n         <h4>Make outgoing call using</h4>\r\n        <span\r\n          class=\"material-symbols-outlined\"\r\n          style=\"cursor: pointer\"\r\n          (click)=\"isCallerIdHidden = true\"\r\n        >\r\n          close\r\n        </span>\r\n      </div>\r\n      <ul>\r\n        <ng-container *ngFor=\"let callerId of callerIdList\">\r\n          <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n            <div>\r\n              <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n              {{callerId?.number}}\r\n            </div>\r\n            <span>{{callerId?.countryName}}</span>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    </div>\r\n    <ng-template #noCallerIdMessage>\r\n      <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n      </span>\r\n    </ng-template>\r\n    <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n      <div class=\"card dedicatedNumPopup\">\r\n        <div class=\"card-header chooseDedicatedHeader\">\r\n          <h5>Choose C2C Number</h5>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n        </div>\r\n        <div class=\"card-body dedicatedNumList\">\r\n          <ul>\r\n            <ng-container *ngFor=\"let callerId of callerIdList\">\r\n              <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n                <div>\r\n                  <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                  {{callerId?.number}}\r\n                </div>\r\n                <span>{{callerId?.countryName}}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n      <div>\r\n        <div class=\"inc-user-img\">\r\n          <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n        </div>\r\n        \r\n      </div>\r\n      <div class=\"flex-grow-1\">\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call\r\n          </span>\r\n        </button>\r\n        <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call_end\r\n          </span>\r\n        </button>\r\n      </div>\r\n     \r\n    </div> -->\r\n  </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.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: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "selectedCallerId", "newIncomingCallData", "newIncomingCallsList", "deviceId"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1\">\r\n    <div style=\"display: flex; flex-direction: column;\">\r\n        <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n            <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n        </div>\r\n        <div class=\"callerDetails\">\r\n            <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n            <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n             <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n             <p>{{incomingCallData?.phone}}</p>\r\n        </div>\r\n      \r\n        <!-- <div class=\"callerDetails\">\r\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n        </div> -->\r\n        <div class=\"call-action-btns\">\r\n            <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"add(newIncomingCallsList[0])\"> call </span> \r\n            </button>\r\n                <!-- <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\r\n                </button> -->\r\n            <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [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=\"newIncomingCallsList[0]?.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=\"\">\r\n                    <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.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=\"newIncomingCallsList[0]?.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(newIncomingCallsList[0])\"> call_end </span>\r\n            </button> -->\r\n            <button class=\"call-btn reject-btn\">\r\n                <span class=\"material-symbols-outlined\" (click)=\"onEndCall()\"> 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\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n            </defs>\r\n            <g class=\"parallax\">\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n    <div class=\"collops\">\r\n        <div class=\"d-flex w-100\">\r\n            <div class=\"d-flex flex-column container-fluid\" >\r\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">            \r\n                    <div class=\"p-2 \">\r\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n                            <div class=\"img\">\r\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n                            </div>\r\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n                                <div class=\"callerDetails-wrapper\">\r\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n                                    <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n                                </div>  \r\n                                <div class=\"d-flex align-items-center\">\r\n                                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n                                        <!-- <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span> -->\r\n                                        <span class=\"material-symbols-outlined\" (click)=\"add(data)\"> call </span>\r\n                                    </button>\r\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\"  (click)=\"toggleMute(data)\" [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=\"data?.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=\"\">\r\n                                            <button class=\"record-btn pause-resume\" *ngIf=\"data?.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=\"data?.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-wrapper reject-btn\">\r\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n                                    </button>\r\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n                                         (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n                                         [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n                                         [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n                                        <i class=\"fa fa-angle-right\"></i>\r\n                                    </div>\r\n                                    <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\">                                       \r\n                                        <i class=\"fa fa-angle-right\"></i>                                \r\n                                    </div> -->\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \">   \r\n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n              </div>\r\n              <div class=\"text-center\">\r\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n              </div>\r\n              <div class=\"f-13\">\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Subject:</div>\r\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n                    </div>  \r\n                </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Email:</div>\r\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n                    </div>                      \r\n                </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                      <div class=\"col-6 mb-2\">\r\n                          <div class=\"\">Number:</div>\r\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n                      </div>\r\n                      <div class=\"col-6\">\r\n                          <div class=\"\">Language:</div>\r\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n                  <div class=\"row mb-2\">\r\n                      <div class=\"col-6 mb-2\">\r\n                          <div class=\"\">Extension:</div>\r\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n\r\n                  <div class=\"row mb-3\">\r\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\r\n                        <div class=\"me-2\">Image:</div>\r\n                        <div class=\"text-ellipsis\">\r\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" 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=\"\">Message:</div>\r\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n                      </div>\r\n                  </div>\r\n\r\n                  <div class=\"row mb-2\">\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"\">Point Name:</div>\r\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n                    </div>\r\n                    <div class=\"col-6 mb-2\">\r\n                        <div class=\"\">Source Name:</div>\r\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.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          </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\" [ngStyle]=\"{'width': '756px'}\">\r\n            <defs>\r\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n            </defs>\r\n            <g class=\"parallax\">\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \r\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n            </g>\r\n        </svg>\r\n    </div>\r\n</div>", styles: [".call-container{width:385px!important;height:646px!important;margin:auto;border-radius:30px;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}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.call-container-open{width:752px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px}.call-btn-wrapper span{color:#fff;line-height:unset!important}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@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}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.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}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;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}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.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}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;display:flex;justify-content:center;align-items:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.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}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;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;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.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%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"] }]
-        }], ctorParameters: function () { return [{ type: ExtensionService }, { type: TwilioService }, { type: NotificationService }]; }, propDecorators: { incomingCallData: [{
+            args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\"\r\n   (endCallEvent)=\"endCall()\"\r\n   (minimiseEvent)=\"onMinimise($event)\"\r\n   (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n   [newIncomingCallData]=\"newIncomingCallData\"\r\n   [deviceId]=\"deviceId\"\r\n   [newIncomingCallsList]=\"incomingCallsList\"\r\n   (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n   [selectedCallerId]=\"selectedCallerId\"\r\n   [callData]=\"callData\">\r\n  </lib-call-progress>\r\n  <div class=\"dialpad-container\" *ngIf=\"!isCallInProgress\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n    <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n      <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n        <div class=\"no-selection-alert\">\r\n          <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n          <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n          <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n        </div>\r\n      </div>\r\n      <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n        <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n          <div class=\"d-flex justify-content-between\">\r\n            <div class=\"flex-grow-1 my-auto text-left\">\r\n              You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n            </div>\r\n            <div class=\"text-right\">\r\n              <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n              <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n            </div>\r\n      \r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n        <div class=\"d-flex justify-content-between mt-2\">\r\n          <p></p>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n          </span>\r\n        </div>\r\n        <div class=\"input-box\">\r\n          <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n          <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n            <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n              <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n            </svg>        \r\n          </span>\r\n          <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n        </div>\r\n        <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n          <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n        </div>\r\n        <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n          <span>{{dialAlert.msg}}</span>\r\n        </div> -->\r\n        <div>\r\n          <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n            <div class=\"contact-img\">\r\n              <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n              <ng-template #alphaName>\r\n                <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n              </ng-template>\r\n            </div>\r\n            <div class=\"contact-details\">\r\n              <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n              <p>{{contact.numbersList[0].number}}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg\r\n          class=\"waves\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\"\r\n          preserveAspectRatio=\"none\"\r\n          shape-rendering=\"auto\"\r\n        >\r\n          <defs>\r\n            <path\r\n              id=\"gentle-wave\"\r\n              d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n            />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"0\"\r\n              fill=\"rgba(255,255,255,0.7)\"\r\n            />\r\n            <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"3\"\r\n              fill=\"rgba(255,255,255,0.5)\"\r\n            />\r\n            <!-- <use\r\n              xlink:href=\"#gentle-wave\"\r\n              x=\"48\"\r\n              y=\"5\"\r\n              fill=\"rgba(255,255,255,0.3)\"\r\n            /> -->\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n      (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n      [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n       [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n        {{key.num}} \r\n        <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n          voicemail\r\n        </span>\r\n        <ng-template #otherThanOne>\r\n          <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n      <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n        [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n        <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n          call\r\n        </span>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n      <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n        <div>\r\n          <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n          {{selectedCallerId?.number}}\r\n        </div>\r\n      </div>\r\n      <ng-template #askBlock>\r\n        <div class=\"shownCallerId\"  (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <h5 class=\"mb-0\">Select C2C number</h5>\r\n            <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n              <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n            </span> -->\r\n            <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n      <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n        <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n    <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"  [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n      <div style=\"display: flex; justify-content: space-between\">\r\n        <!-- <h4>Select C2C Softphone Number</h4> -->\r\n         <h4>Make outgoing call using</h4>\r\n        <span\r\n          class=\"material-symbols-outlined\"\r\n          style=\"cursor: pointer\"\r\n          (click)=\"isCallerIdHidden = true\"\r\n        >\r\n          close\r\n        </span>\r\n      </div>\r\n      <ul>\r\n        <ng-container *ngFor=\"let callerId of callerIdList\">\r\n          <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n            <div>\r\n              <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n              {{callerId?.number}}\r\n            </div>\r\n            <span>{{callerId?.countryName}}</span>\r\n          </li>\r\n        </ng-container>\r\n      </ul>\r\n    </div>\r\n    </div>\r\n    <ng-template #noCallerIdMessage>\r\n      <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n      </span>\r\n    </ng-template>\r\n    <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n      <div class=\"card dedicatedNumPopup\">\r\n        <div class=\"card-header chooseDedicatedHeader\">\r\n          <h5>Choose C2C Number</h5>\r\n          <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n        </div>\r\n        <div class=\"card-body dedicatedNumList\">\r\n          <ul>\r\n            <ng-container *ngFor=\"let callerId of callerIdList\">\r\n              <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n                <div>\r\n                  <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                  {{callerId?.number}}\r\n                </div>\r\n                <span>{{callerId?.countryName}}</span>\r\n              </li>\r\n            </ng-container>\r\n          </ul>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n      <div>\r\n        <div class=\"inc-user-img\">\r\n          <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n        </div>\r\n        \r\n      </div>\r\n      <div class=\"flex-grow-1\">\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n      </div>\r\n      <div class=\"d-flex\">\r\n        <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call\r\n          </span>\r\n        </button>\r\n        <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call_end\r\n          </span>\r\n        </button>\r\n      </div>\r\n     \r\n    </div> -->\r\n  </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"] }]
+        }], ctorParameters: function () { return [{ type: TwilioService }, { type: ExtensionService }, { type: i3.MatDialog }, { type: IpAddressService }, { type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: i5.Router }, { type: IncomeingCallSocketService }]; }, propDecorators: { autoOpenOnIncoming: [{
                 type: Input
-            }], newIncomingCallsList: [{
+            }], contactInfo: [{
                 type: Input
             }], deviceId: [{
                 type: Input
-            }], closeIncomingCallDiv: [{
+            }], isDialpadHidden: [{
+                type: Input
+            }], incomingCallData: [{
+                type: Input
+            }], closeDialpadEvent: [{
                 type: Output
-            }], incomingCallsNewList: [{
+            }], callInitiated: [{
                 type: Output
-            }], selectedIncomingCallInfo: [{
+            }], endCallEvent: [{
+                type: Output
+            }], minimiseEvent: [{
+                type: Output
+            }], incomingCallsNewInfoEvent: [{
+                type: Output
+            }], incomingCallInitiated: [{
+                type: Output
+            }], dialInputElement: [{
+                type: ViewChild,
+                args: ['dialInput']
+            }], numberDialed: [{
                 type: Output
             }] } });
 
@@ -4423,13 +4423,13 @@ class CallerIdDialogComponent {
         console.log('doNotShowAgain');
     }
 }
-CallerIdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallerIdDialogComponent, deps: [{ token: i5.Router }, { token: TwilioService }, { token: i3$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-CallerIdDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallerIdDialogComponent, selector: "lib-caller-id-dialog", ngImport: i0, template: "<div class=\"main-theme {{storedTheme}}\">\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\"> Caller ID Not Set</h5>\n    <button class=\"close\" (click)=\"closeModal()\">\n      <span>x</span>\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <p class=\"mb-1\"><strong>There is no caller ID set in your account</strong> <br /></p>\n    <p>The receiver will not be able to identify your call or call you back</p>\n    <div class=\"d-flex align-items-center justify-content-center\">\n      <input type=\"checkbox\"  checked (change)=\"hideMessage($event)\" [(ngModel)]=\"alertToggle\" class=\"mr-2\">\n      <label for=\"\" class=\"mb-0 text-muted\">I do not want to see this message again</label>\n    </div>\n    <button class=\"btn btn-black-outline\" (click)=\"doNotShowAgain()\">Do not show this message again</button>\n  </div>\n  <div class=\"modal-footer border-top d-flex justify-content-between\">\n    <button class=\"btn btn-black-outline\" (click)=\"redirectToCallingPreference()\">Click to set caller ID</button>\n    \n    <button class=\"btn btn-blue ms-2\" (click)=\"proceed()\">Proceed without Caller ID</button>\n  </div>\n</div>", styles: ["::ng-deep .mat-dialog-container{padding:0!important;border-radius:8px;box-shadow:0 4px 10px #0003;text-align:center}::ng-deep .cus-dialog{z-index:111111!important}.btn-black-outline{border:1px solid #000000;border-radius:10px}.btn-blue{background-color:#234de8;color:#fff!important;margin-left:8px}::ng-deep .cdk-overlay-container{z-index:111111}\n"], dependencies: [{ kind: "directive", type: i4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+CallerIdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallerIdDialogComponent, deps: [{ token: i5.Router }, { token: TwilioService }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+CallerIdDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallerIdDialogComponent, selector: "lib-caller-id-dialog", ngImport: i0, template: "<div class=\"main-theme {{storedTheme}}\">\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\"> Caller ID Not Set</h5>\n    <button class=\"close\" (click)=\"closeModal()\">\n      <span>x</span>\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <p class=\"mb-1\"><strong>There is no caller ID set in your account</strong> <br /></p>\n    <p>The receiver will not be able to identify your call or call you back</p>\n    <div class=\"d-flex align-items-center justify-content-center\">\n      <input type=\"checkbox\"  checked (change)=\"hideMessage($event)\" [(ngModel)]=\"alertToggle\" class=\"mr-2\">\n      <label for=\"\" class=\"mb-0 text-muted\">I do not want to see this message again</label>\n    </div>\n    <button class=\"btn btn-black-outline\" (click)=\"doNotShowAgain()\">Do not show this message again</button>\n  </div>\n  <div class=\"modal-footer border-top d-flex justify-content-between\">\n    <button class=\"btn btn-black-outline\" (click)=\"redirectToCallingPreference()\">Click to set caller ID</button>\n    \n    <button class=\"btn btn-blue ms-2\" (click)=\"proceed()\">Proceed without Caller ID</button>\n  </div>\n</div>", styles: ["::ng-deep .mat-dialog-container{padding:0!important;border-radius:8px;box-shadow:0 4px 10px #0003;text-align:center}::ng-deep .cus-dialog{z-index:111111!important}.btn-black-outline{border:1px solid #000000;border-radius:10px}.btn-blue{background-color:#234de8;color:#fff!important;margin-left:8px}::ng-deep .cdk-overlay-container{z-index:111111}\n"], dependencies: [{ kind: "directive", type: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.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: CallerIdDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-caller-id-dialog', template: "<div class=\"main-theme {{storedTheme}}\">\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\"> Caller ID Not Set</h5>\n    <button class=\"close\" (click)=\"closeModal()\">\n      <span>x</span>\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <p class=\"mb-1\"><strong>There is no caller ID set in your account</strong> <br /></p>\n    <p>The receiver will not be able to identify your call or call you back</p>\n    <div class=\"d-flex align-items-center justify-content-center\">\n      <input type=\"checkbox\"  checked (change)=\"hideMessage($event)\" [(ngModel)]=\"alertToggle\" class=\"mr-2\">\n      <label for=\"\" class=\"mb-0 text-muted\">I do not want to see this message again</label>\n    </div>\n    <button class=\"btn btn-black-outline\" (click)=\"doNotShowAgain()\">Do not show this message again</button>\n  </div>\n  <div class=\"modal-footer border-top d-flex justify-content-between\">\n    <button class=\"btn btn-black-outline\" (click)=\"redirectToCallingPreference()\">Click to set caller ID</button>\n    \n    <button class=\"btn btn-blue ms-2\" (click)=\"proceed()\">Proceed without Caller ID</button>\n  </div>\n</div>", styles: ["::ng-deep .mat-dialog-container{padding:0!important;border-radius:8px;box-shadow:0 4px 10px #0003;text-align:center}::ng-deep .cus-dialog{z-index:111111!important}.btn-black-outline{border:1px solid #000000;border-radius:10px}.btn-blue{background-color:#234de8;color:#fff!important;margin-left:8px}::ng-deep .cdk-overlay-container{z-index:111111}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i5.Router }, { type: TwilioService }, { type: i3$1.MatDialogRef }, { type: undefined, decorators: [{
+        return [{ type: i5.Router }, { type: TwilioService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [MAT_DIALOG_DATA]
                     }] }];