@vgroup/dialbox 0.0.7 → 0.0.9

package/fesm2020/vgroup-dialbox.mjs

@@ -1,19 +1,19 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Input, Output, ViewChild, Inject, NgModule } from '@angular/core';
 import { AsYouType } from 'libphonenumber-js';
-import { BehaviorSubject, throwError, Subscription, interval } from 'rxjs';
+import { BehaviorSubject, throwError, interval, Subscription } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
 import { catchError, switchMap, map } from 'rxjs/operators';
 import * as i4 from '@angular/router';
 import { RouterLink } from '@angular/router';
-import * as i5 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i6 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Device } from '@twilio/voice-sdk';
 import swal from 'sweetalert2';
-import * as i3 from '@angular/material/dialog';
+import * as i3$2 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 const keypad = [
@@ -1417,1579 +1417,1579 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: IpAddressService }]; } });
 
-class DialboxComponent {
-    constructor(twilioService, extService, 
-    // private dialog: MatDialog,
-    ipService, extensionService, router) {
-        this.twilioService = twilioService;
-        this.extService = extService;
-        this.ipService = ipService;
+const GlobalConstant = {
+    ErrorMsg500: "Unable to process request. Please try again later.",
+    isSMSVisible: true,
+    dedicatedNumText: 'C2C Number'
+};
+
+class IncomingCallComponent {
+    constructor(extensionService, twilioService) {
         this.extensionService = extensionService;
-        this.router = router;
-        this.isDialpadHidden = false;
-        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.isMinimised = false;
+        this.twilioService = twilioService;
+        this.showRingAnimation = true;
+        this.selectedIncomingCall = {};
+        this.twilioAuthId = '';
+        this.dedicatedNum = '';
+        this.recordCall = false;
+        this.shouldRecordCall = false;
+        this.isClickExpand = false;
+        this.disbaleEndCallBtn = true;
+        this.closeIncomingCallDiv = new EventEmitter();
+        this.incomingCallsNewList = new EventEmitter();
+        this.selectedIncomingCallInfo = new EventEmitter();
+        this.isMute = false;
     }
     ngOnInit() {
         try {
-            this.token = localStorage.getItem('ext_token');
-            //this.isCallInProgress = true; 
-            this.getContactList();
-            // this.getUserCallSetting();
-            const sub1 = this.twilioService.dialNumberFromOtherModule.subscribe((contact) => {
-                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();
-                        }
-                    }
-                }
-            });
-            // handle incoming call
-            const sub2 = this.twilioService.currentCall.subscribe(incomingCallData => {
-                // if (incomingCallData) {
-                //   this.isCallInProgress = true;
-                //   this.isDialpadHidden = false;
-                //   this.callData.phone = incomingCallData.parameters.From;
-                //   this.callData.name = incomingCallData.customParameters.get('name');
-                //   this.callData.img = incomingCallData.customParameters.get('image');
-                //   this.callData.isIncomingCall = true;
-                // }
-                if (incomingCallData) {
-                    if (this.isCallInProgress) {
-                        this.newIncomingCalls.push(incomingCallData);
-                        // this.getUserInformation(incomingCallData);
-                    }
-                    else {
-                        this.isCallInProgress = true;
-                        this.isDialpadHidden = false;
-                        this.callData.phone = incomingCallData.parameters['From'];
-                        // this.getUserInformation(incomingCallData);
-                        this.callData.name = incomingCallData.customParameters.get('name');
-                        this.callData.img = incomingCallData.customParameters.get('image') || 'assets/images/user.jpg';
-                        this.callData.isIncomingCall = true;
+            this.twilioService.currentCall.subscribe(call => {
+                if (call) {
+                    this.twilioCallData = call;
+                    this.twilioAuthId = call.customParameters.get('twilioAuthId') || '';
+                    if (!call.parameters) {
+                        call.parameters = {};
                     }
-                    incomingCallData.on('cancel', () => {
-                        // this.incomingCallsList = this.incomingCallsList.filter((item:any) => item.parameters.CallSid !== incomingCallData.parameters.CallSid);
-                        if (this.incomingCallsList.length == 0) {
-                            this.isCallInProgress = false;
+                    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);
                     });
-                    incomingCallData.on('disconnect', () => {
-                        // this.incomingCallsList = this.incomingCallsList.filter((item:any) => item.parameters.CallSid !== incomingCallData.parameters.CallSid);
-                        if (this.incomingCallsList.length == 0) {
-                            this.isCallInProgress = false;
+                    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.subscriptions.add(sub1);
-            this.subscriptions.add(sub2);
         }
         catch (e) {
             console.log(e);
         }
     }
-    // getUserInformation(incomingCallData: any) {
-    //   let data = this.fromEntries(Array.from(incomingCallData.customParameters.entries()));
-    //   this.extensionService.getUserInformation(data.twilioAuthId).subscribe(
-    //   response => {
-    //     incomingCallData['userInfo']=response
-    //     this.incomingCallsList.push(incomingCallData);
-    //   }, error => {
-    //     console.error('Error starting recording', error);
-    //   });
-    // }
-    fromEntries(entries) {
-        return entries.reduce((acc, [key, value]) => {
-            acc[key] = value;
-            return acc;
-        }, {});
-    }
-    ngAfterViewInit() {
-        this.registerDragElement();
+    acceptCallFromList(data) {
+        console.log(data, 'checking dii');
+        data.accept();
+        // data.parameters['isCallConnected'] = true;
+        data.isCallConnected = true;
+        this.sendIPforIncomingCall(data.customParameters.get('twilioAuthId'), 'answered').then(() => {
+            if (this.shouldRecordCall) { // default recording 
+                this.extensionService.setCallSid(this.CallSid, this.recordCall);
+                this.closeIncomingCallWrapper(1);
+            }
+            else { // manual recording     
+                this.extensionService.setCallSid(this.CallSid, this.recordCall);
+                this.closeIncomingCallWrapper(1);
+            }
+        });
     }
-    ngOnChanges(changes) {
-        if (changes['isDialpadHidden'] && !this.isDialpadHidden) {
-            this.getContactList();
-            // this.getUserCallSetting();
-            setTimeout(() => {
-                this.dialInputElement.nativeElement.focus();
-            }, 0);
+    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 });
+            }
         }
     }
-    registerDragElement() {
-        try {
-            const elmnt = document.getElementById('dragparent1');
-            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-            const dragMouseDown = (e) => {
-                // If the target is an input, return and don't initiate dragging
-                if (e.target.tagName.toLowerCase() === 'input') {
-                    return;
-                }
-                e = e || window.event;
-                // get the mouse cursor position at startup:
-                pos3 = e.clientX;
-                pos4 = e.clientY;
-                document.onmouseup = closeDragElement;
-                // call a function whenever the cursor moves:
-                document.onmousemove = elementDrag;
-            };
-            const elementDrag = (e) => {
-                e = e || window.event;
-                // calculate the new cursor position:
-                pos1 = pos3 - e.clientX;
-                pos2 = pos4 - e.clientY;
-                pos3 = e.clientX;
-                pos4 = e.clientY;
-                // set the element's new position:
-                // elmnt.style.top = elmnt.offsetTop - pos2 + 'px';
-                // elmnt.style.left = elmnt.offsetLeft - pos1 + 'px';
-            };
-            const closeDragElement = () => {
-                /* stop moving when mouse button is released:*/
-                document.onmouseup = null;
-                document.onmousemove = null;
-            };
-            // if (document.getElementById(elmnt.id + 'header')) {
-            //   /* if present, the header is where you move the DIV from:*/
-            //   document.getElementById(elmnt.id + 'header').onmousedown = dragMouseDown;
-            // } else {
-            //   /* otherwise, move the DIV from anywhere inside the DIV:*/
-            //   elmnt.onmousedown = dragMouseDown;
-            // }
-        }
-        catch (e) {
-            console.log(e);
-        }
+    closeIncomingCallWrapper(val) {
+        this.closeIncomingCallDiv.emit({ show: val, call: this.twilioCallData });
     }
-    addNumber(num) {
-        if (num == '#' || num == '*' || num == '+' || Number.isInteger(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.dialedNumber += num;
-            this.showInputClearBtn = true;
-            this.numberDialed.emit(this.dialedNumber);
-            this.onDialInputChange(this.dialedNumber);
-            // this.dialInputRef.nativeElement.focus();
-        }
-        else if (num === 'voicemail') {
-            // this.showDedicatedPopup = true;
-            this.router.navigate(['extension/voicemail/' + this.token]);
-        }
+    toggleMute(data) {
+        this.isMute = !this.isMute;
+        data.mute(this.isMute);
     }
-    hideDialpad() {
-        this.isDialpadHidden = true;
-        this.closeDialpadEvent.emit();
-        this.clearAllDialed();
-        this.filteredContactList = [];
+    sendIPforIncomingCall(recordId, callstatus) {
+        return new Promise((resolve, reject) => {
+            this.extensionService.getIPDetailsForCall(recordId, callstatus).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 {
+                        // swal("Error", "Missing call authentication details.", "error");
+                    }
+                    resolve();
+                }
+                else {
+                    swal("Error", resp.message.join("<br/>"), "error");
+                    resolve();
+                }
+            }, (error) => {
+                swal("Error", GlobalConstant.ErrorMsg500, "error");
+                resolve();
+            });
+        });
     }
-    onDialInputChange(inputVal) {
-        try {
-            // Updated regex to include x, X, ext., Ext., and ,
-            const isNumericInput = /^[\d\s+\-]+$/.test(inputVal);
-            let mainNumber = inputVal;
-            // Check for extension indicators and split the input
-            const extMatch = inputVal.match(/(x|X|ext\.|Ext\.|,)(.*)/);
-            if (extMatch) {
-                mainNumber = inputVal.substring(0, extMatch.index).trim();
-                this.callData.extNum = extMatch[2].trim();
-            }
-            this.sanitizedNum = isNumericInput ? mainNumber.replace(/[\s\-]+/g, '') : mainNumber;
-            this.callData.phone = isNumericInput ? this.sanitizedNum : '';
-            this.showInputClearBtn = inputVal.length > 0;
-            if (isNumericInput) {
-                this.dialedNumber = new AsYouType().input(this.sanitizedNum);
-            }
-            // emit current number whenever input changes
-            this.numberDialed.emit(this.dialedNumber);
-            if (inputVal.length > 2) {
-                this.filteredContactList = this.contactList.filter(contact => {
-                    const fullName = `${contact.firstName} ${contact.middleName} ${contact.lastName}`.toLowerCase();
-                    // return fullName.includes(this.sanitizedNum.toLowerCase()) || contact.numbersList.some(num => num.number.includes(this.sanitizedNum));
-                }).slice(0, 2);
+    onUserInfoByCallSid() {
+        if (this.selectedIncomingCall && this.selectedIncomingCall.userInfo) {
+        }
+        return this.selectedIncomingCall ? Object.keys(this.selectedIncomingCall).length ? true : false : false;
+    }
+    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;
+                    }
+                });
             }
-            else {
-                this.filteredContactList = [];
+            this.selectedIncomingCallInfo.emit(this.selectedIncomingCall);
+            if (!this.selectedIncomingCall.userInfo || this.selectedIncomingCall.userInfo.status == 201) {
+                this.getUserInformation(this.selectedIncomingCall);
             }
         }
-        catch (e) {
-            console.log(e);
-        }
     }
-    getFirstLetter(name) {
-        return name ? name.charAt(0).toUpperCase() : '';
+    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);
+        });
     }
-    clearInput() {
-        if (this.dialedNumber.length > 0) {
-            this.dialedNumber = this.dialedNumber.slice(0, -1);
-            this.showInputClearBtn = this.dialedNumber.length !== 0;
-            this.onDialInputChange(this.dialedNumber);
-        }
+    fromEntries(entries) {
+        return entries.reduce((acc, [key, value]) => {
+            acc[key] = value;
+            return acc;
+        }, {});
     }
-    clearAllDialed() {
-        this.dialedNumber = '';
-        this.sanitizedNum = '';
-        this.showInputClearBtn = false;
+}
+IncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, deps: [{ token: ExtensionService }, { token: TwilioService }], 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" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\">\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">\n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"incomingCallData.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\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=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.parameters?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\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=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\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\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\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\" />\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 xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px;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:680px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:645px}.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;span {color: white; 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;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}\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: [{
+            type: Component,
+            args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\">\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">\n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"incomingCallData.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\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=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.parameters?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\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=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\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\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\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\" />\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 xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px;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:680px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:645px}.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;span {color: white; 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;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}\n"] }]
+        }], ctorParameters: function () { return [{ type: ExtensionService }, { type: TwilioService }]; }, propDecorators: { incomingCallData: [{
+                type: Input
+            }], newIncomingCallsList: [{
+                type: Input
+            }], closeIncomingCallDiv: [{
+                type: Output
+            }], incomingCallsNewList: [{
+                type: Output
+            }], selectedIncomingCallInfo: [{
+                type: Output
+            }] } });
+
+class CallProgressComponent {
+    constructor(extensionService, cdr) {
+        this.extensionService = extensionService;
+        this.cdr = cdr;
+        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;
+        // Incoming call variables
+        this.incomingCallDiv = false;
+        this.showCallProgressEvent = new EventEmitter();
+        this.incomingCallInitiated = new EventEmitter();
+        this.isRecording = false;
+        this.isPaused = false;
+        this.timeElapsed = 0; // in seconds
+        this.recordCall = false;
+        this.callStatus = 'ringing';
+        this.isMinimised = false;
     }
-    getCallerIdList() {
-        this.extService.displayID(this.token || '').subscribe((res) => {
-            //this.callerIdList = res.callerIdList.filter(item => item.type === "C2C Softphone Number");
-            this.callerIdList = res.callerIdList.filter((item) => item.voiceFeature === true);
-            // this.callerIdList = res.callerIdList;
-            if (this.callerIdList.length == 1) {
-                this.selectedCallerId = this.callerIdList[0];
+    ngOnInit() {
+        console.log('Call Progress Component');
+    }
+    ngOnChanges(changes) {
+        console.log('Call Progress Component ngOnChanges');
+        if (changes['callData']) {
+            console.log('Call Progress Component ngOnChanges callData', changes['callData']);
+            if (changes['callData'].currentValue.isIncomingCall) {
+                this.incomingCallDiv = true;
             }
             else {
-                if (this.callPreference === 'alwaysAsk' || this.callPreference === 'smartDialing') {
-                    this.selectedCallerId = null;
-                }
-                else {
-                    this.selectedCallerId = this.callerIdList.find(item => (item.number == this.callPreference));
+                //for outgoing call
+                this.startCall(changes['callData'].currentValue);
+            }
+        }
+        if (changes['newIncomingCallData']) {
+            try {
+                if (changes['newIncomingCallData'].currentValue) {
+                    if (this.call && (this.call.status() == 'open')) {
+                        this.call.disconnect();
+                        this.call = changes['newIncomingCallData'].currentValue;
+                        this.call?.accept();
+                        this.callData.phone = this.call?.parameters['From'];
+                        this.callData.name = this.call?.customParameters.get('name');
+                        this.callData.img = this.call?.customParameters.get('image') || 'assets/images/user.jpg';
+                        this.incomingCallInitiated.emit();
+                        this.startTimer();
+                    }
                 }
             }
-        });
+            catch (e) {
+                console.log(e);
+            }
+        }
     }
-    getContactList() {
-        this.twilioService.getContactList().subscribe((resp) => {
-            if (resp.response == 'Success') {
-                this.contactList = resp.phoneBook;
+    ngAfterViewInit() { }
+    async startCall(callData) {
+        try {
+            this.showRingAnimation = true;
+            const payload = {
+                channelId: environment.channelId,
+                userId: localStorage.getItem('userId'),
+                to: callData.phone,
+                scope: 'local',
+                fromNumber: callData.from
+            };
+            const response = await this.initiateCall(payload);
+            if (response.status == 200) {
+                const { id: callAuthId, recordCall } = await this.getCallAuthId(response);
+                this.getUserInformation(callAuthId);
+                this.recordCall = recordCall; // Store the recordCall value
+                const tokenData = await this.getOutgoingCallToken(callAuthId);
+                await this.connectToDevice(tokenData.token, callData);
+                // Poll the status for 30-45 seconds
+                this.pollCallStatus(callAuthId);
             }
-        }, err => {
+            else if (response.status == 201) {
+                swal("Error", response.message.join("<br/>"), "error");
+                this.endCall();
+            }
+        }
+        catch (error) {
+            this.showRingAnimation = false;
+            this.handleError(error);
+            this.endCall();
+        }
+    }
+    async initiateCall(payload) {
+        return await this.extensionService.initiateCall(payload).toPromise();
+    }
+    async getCallAuthId(response) {
+        return {
+            id: response.callauth.id,
+            recordCall: response.callauth.recordCall
+        };
+    }
+    async getOutgoingCallToken(callAuthId) {
+        return await this.extensionService.getOutgoingCallToken({ authId: callAuthId }).toPromise();
+    }
+    async connectToDevice(token, callData) {
+        const options = {
+            codecPreferences: ['opus', 'pcmu'],
+            closeProtection: true,
+        };
+        this.device = new Device(token.value, options);
+        this.call = await this.device.connect({
+            params: {
+                From: callData.from,
+                To: callData.phone,
+                Env: environment.abb,
+                Token: token.id,
+                Ext: callData.extNum
+            },
+            rtcConstraints: { audio: { deviceId: 'default' } },
+        });
+        this.setupEventListeners();
+    }
+    setupEventListeners() {
+        this.startTimer();
+        this.device?.on('error', (err) => {
             console.log(err);
+            this.showRingAnimation = false;
+            this.stopTimer();
+        });
+        this.call?.on('error', (error) => {
+            this.showRingAnimation = false;
+            this.stopTimer();
+        });
+        this.call?.on('disconnect', () => {
+            this.endCall();
+        });
+        this.call?.on('ringing', () => {
+        });
+        this.call?.on('reject', () => {
+            this.endCall();
+        });
+        this.call?.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();
+            // }
+        });
+        this.call?.on('messageReceived', (message) => {
         });
     }
-    getFullName(contact) {
-        let fullName = contact.firstName || '';
-        if (contact.middleName) {
-            fullName += ` ${contact.middleName}`;
-        }
-        if (contact.lastName) {
-            fullName += ` ${contact.lastName}`;
-        }
-        return fullName.trim();
+    startTimer() {
+        let seconds = 0;
+        this.intervalId = setInterval(() => {
+            seconds++;
+            this.timer = this.formatTime(seconds);
+        }, 1000);
     }
-    toggleCallerIdDiv() {
-        this.isCallerIdHidden = !this.isCallerIdHidden;
+    stopTimer() {
+        clearInterval(this.intervalId);
+        this.timer = '00:00';
     }
-    onContactSelect(contact) {
-        this.dialedNumber = contact.numbersList[0].number;
-        this.callData.name = this.getFullName(contact);
-        this.callData.img = contact.image || 'assets/images/user.jpg';
-        this.onDialInputChange(this.dialedNumber);
-        this.filteredContactList = [];
+    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() {
+        this.endCallEvent.emit();
+        if (this.call) {
+            this.call.disconnect();
+        }
+        this.showRingAnimation = false;
+        this.stopTimer();
+        this.maximiseDialpad();
+    }
+    toggleMute() {
+        this.isMute = !this.isMute;
+        this.call?.mute(this.isMute);
+    }
+    toggleKeypad() {
+        this.showKeypad = !this.showKeypad;
+        this.callInput = '';
+    }
+    onCallInputs(num) {
         try {
-            console.log('Ending call');
-            this.isCallInProgress = false;
-            this.filteredContactList = [];
-            // Reset call data
-            this.callData = {
-                phone: '',
-                name: '',
-                img: 'assets/images/user.jpg',
-                isIncomingCall: false,
-                dial: false,
-                displayNum: '',
-                extNum: ''
-            };
-            // Reset dialed number
-            this.dialedNumber = '';
-            this.sanitizedNum = '';
-            // Emit end call event
-            this.endCallEvent.emit();
-            console.log('Call ended successfully');
+            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);
+            this.call?.sendDigits(str);
         }
-        catch (error) {
-            console.error('Error in endCall:', error);
-            // Even if there's an error, try to reset the state
-            this.isCallInProgress = false;
-            this.callData = {
-                phone: '',
-                name: '',
-                img: 'assets/images/user.jpg',
-                isIncomingCall: false,
-                dial: false,
-                displayNum: '',
-                extNum: ''
-            };
+        catch (e) {
+            console.log(e);
+        }
+    }
+    onCallInputEnter(ev) {
+        try {
+            this.call?.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;
+            const incomingDetail = this.extensionService.getCallSid();
+            this.incomingRecordCall = incomingDetail.recordCall;
+            // Start recording if the call is answered and recording is enabled
+            if (this.incomingRecordCall) {
+                this.startRecording();
+            }
+            else {
+                this.isRecording = false;
+            }
+            this.cdr.detectChanges();
+        }
+        else {
+            // incoming call rejected
             this.endCallEvent.emit();
         }
     }
-    // async initiateCall() {
-    //   try {
-    //     console.log('Initiating call with number:', this.dialedNumber);
-    //     if (!this.dialedNumber && this.lastDialed) {
-    //       console.log('Using last dialed number:', this.lastDialed.number);
-    //       this.sanitizedNum = this.lastDialed.number;
-    //     }
-    //     const isInvalid = await this.isInvalidNumber();
-    //     if (isInvalid) {
-    //       console.error('Invalid number format');
-    //       return false;
-    //     }
-    //     this.saveLastDialed();
-    //     this.isSavedContactDialled();
-    //     // Check payment status
-    //     this.isPaymentDue = localStorage.getItem('paymentDue') === 'true';
-    //     if (this.isPaymentDue) {
-    //       console.warn('Payment is due');
-    //       swal('Warning', 'Please note that your payment is due. To continue using our services, kindly subscribe to avoid interruptions.');
-    //       return false;
-    //     }
-    //     // Check if dialing own number
-    //     if (this.sanitizedNum === localStorage.getItem('twilioNumber')) {
-    //       console.error('Attempted to dial own number');
-    //       swal('Error', 'You cannot dial your own number');
-    //       return false;
-    //     }
-    //     // Check microphone permissions
-    //     const hasPermission = await this.checkMicrophonePermission();
-    //     if (!hasPermission) {
-    //       console.warn('Microphone permission not granted');
-    //       await this.askForMicrophonePermission();
-    //       return false;
-    //     }
-    //     if (!this.selectedCallerId) {
-    //       console.error('No caller ID selected');
-    //       this.shakeDedicatedBtn = true;
-    //       this.showDialAlert('Please select a C2C number to call from');
-    //       setTimeout(() => {
-    //         this.shakeDedicatedBtn = false;
-    //       }, 3000);
-    //       return false;
-    //     }
-    //     console.log('Getting number with country code...');
-    //     this.callData.displayNum = '';
-    //     try {
-    //       await this.getToNumber(this.sanitizedNum);
-    //     } catch (error) {
-    //       console.error('Error getting number with country code:', error);
-    //       this.showDialAlert('Error processing number. Please try again.');
-    //       return false;
-    //     }
-    //     if (this.terminateCall) {
-    //       console.log('Call terminated by user');
-    //       this.terminateCall = false;
-    //       return false;
-    //     }
-    //     // Prepare call data
-    //     this.callData = {
-    //       ...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);
-    //     this.isCallInProgress = true;
-    //     this.callInitiated.emit({ ...this.callData });
-    //     return true;
-    //   } catch (error) {
-    //     console.error('Error in initiateCall:', error);
-    //     this.showDialAlert('Failed to initiate call. Please try again.');
-    //     this.isCallInProgress = false;
-    //     return false;
-    //   }
-    //     //this.clearAllDialed();
-    //   // } else {
-    //   //   swal('Error', 'Trial period is over. Please setup payment method to continue services')
-    //   // }
-    // }
-    //  async initiateCall() {
-    //   if (!this.dialedNumber && this.lastDialed) {
-    //     this.sanitizedNum = this.lastDialed.number;
-    //   }
-    //   const isInvalid = await this.isInvalidNumber();
-    //   if (isInvalid) {
-    //     return false;
-    //   }
-    //   this.saveLastDialed();
-    //   this.isSavedContactDialled();
-    //   //let isCallerIdSet = await this.isCallerIdSet();
-    //   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;
-    //   }
-    //   this.isTrialPeriodOver = localStorage.getItem('trialOver') == 'false' ? false : true;
-    //   // if (!this.isTrialPeriodOver) {
-    //     if (this.sanitizedNum == localStorage.getItem('twilioNumber')) {
-    //       swal('Error', 'You can not dial this number');
-    //       return;
-    //     }
-    //     const hasPermission = await this.checkMicrophonePermission();
-    //     if (hasPermission) {
-    //       if (this.selectedCallerId) {
-    //         //clear displayNum if value is binded from previous call
-    //         this.callData.displayNum = '';
-    //         // get number to be dialled from backend
-    //         await this.getToNumber(this.sanitizedNum);
-    //         if (this.terminateCall) {
-    //           this.terminateCall = false;
-    //           return;
-    //         }
-    //         this.callData.phone = this.sanitizedNum;
-    //         this.callData.isIncomingCall = false;
-    //         this.callData.dial = true;
-    //         if (!this.isSmartDialCall) {
-    //           this.callData.from = this.selectedCallerId.number;
-    //         }
-    //         this.isCallInProgress = true;
-    //               this.callData = {
-    //               ...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);
-    //             this.isCallInProgress = true;
-    //             this.callInitiated.emit({ ...this.callData });
-    //         return true;
-    //       } else {
-    //         this.shakeDedicatedBtn = true;
-    //         this.showDialAlert('Select a C2C number to call');
-    //         setTimeout(() => {
-    //           this.shakeDedicatedBtn = false;
-    //         }, 3000);
-    //         return false;
-    //       }
-    //       //this.callingOpenEvent.emit({ phone: this.dialedNumber });
-    //     } else {
-    //       await this.askForMicrophonePermission();
-    //     }
-    //     //this.clearAllDialed();
-    //   // } else {
-    //   //   swal('Error', 'Trial period is over. Please setup payment method to continue services')
-    //   // }
-    // }
-    // async initiateCall() {
-    //   try{
-    //     if (!this.dialedNumber && this.lastDialed) {
-    //       this.sanitizedNum = this.lastDialed.number;
-    //     }
-    //     const isInvalid = await this.isInvalidNumber();
-    //     if (isInvalid) {
-    //       return false;
-    //     }
-    //     this.saveLastDialed();
-    //     this.isSavedContactDialled();
-    //     //let isCallerIdSet = await this.isCallerIdSet();
-    //     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.isTrialPeriodOver) {
-    //       if (this.sanitizedNum == localStorage.getItem('twilioNumber')) {
-    //         swal('Error', 'You can not dial this number');
-    //         return false;
-    //       }
-    //       const hasPermission = await this.checkMicrophonePermission();
-    //       if (hasPermission) {
-    //         if (this.selectedCallerId) {
-    //           //clear displayNum if value is binded from previous call
-    //           this.callData.displayNum = '';
-    //           // get number to be dialled from backend
-    //           await this.getToNumber(this.sanitizedNum);
-    //           if (this.terminateCall) {
-    //             this.terminateCall = false;
-    //             return;
-    //           }
-    //           this.callData.phone = this.sanitizedNum;
-    //           this.callData.isIncomingCall = false;
-    //           this.callData.dial = true;
-    //           if (!this.isSmartDialCall) {
-    //             this.callData.from = this.selectedCallerId.number;
-    //           }
-    //           this.isCallInProgress = true;
-    //                 this.callData = {
-    //                 ...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);
-    //               this.isCallInProgress = true;
-    //               this.callInitiated.emit({ ...this.callData });
-    //           return true;
-    //         } else {
-    //           this.shakeDedicatedBtn = true;
-    //           this.showDialAlert('Select a C2C number to call');
-    //           setTimeout(() => {
-    //             this.shakeDedicatedBtn = false;
-    //           }, 3000);
-    //           return false;
-    //         }
-    //         //this.callingOpenEvent.emit({ phone: this.dialedNumber });
-    //       } else {
-    //         await this.askForMicrophonePermission();
-    //       }
-    //       //this.clearAllDialed();
-    //     // } 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;
-    //   }
-    // }
-    async initiateCall() {
-        try {
-            if (!this.dialedNumber && this.lastDialed) {
-                this.sanitizedNum = this.lastDialed.number;
-            }
-            const isInvalid = await 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 = await this.checkMicrophonePermission();
-            // if (!hasPermission) {
-            //   await 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
-            // await this.getToNumber(this.sanitizedNum);
-            if (this.terminateCall) {
-                this.terminateCall = false;
-                return;
-            }
-            // Update call data in a single operation
-            this.callData = {
-                ...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);
-            this.isCallInProgress = true;
-            this.callInitiated.emit({ ...this.callData });
-            return true;
+    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();
         }
-        catch (e) {
-            console.error('Error in initiateCall:', e);
-            this.showDialAlert('Failed to initiate call. Please try again.');
-            this.isCallInProgress = false;
-            return false;
+        else {
+            this.startRecording();
         }
     }
-    async isInvalidNumber() {
-        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;
+    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();
         }
-        catch (error) {
-            this.showDialAlert('Invalid Number');
-            return true; // Return true if an error occurred, meaning the number is invalid
+    }
+    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
         }
     }
-    // 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)
+    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(async () => {
+            elapsedTime += pollInterval;
+            try {
+                const statusResponse = await 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);
+                        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);
         });
-        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;
+    }
+    incomingCallsNewList(data) {
+        this.newIncomingCallsList = data;
+        this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
+    }
+    selectedIncomingCallInfo(data) {
+        this.selectedIncomingCall = data;
+    }
+    ngOnDestroy() {
+        this.callData.dial = false;
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe();
         }
-        return false;
     }
-    showDialAlert(message) {
+}
+CallProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, deps: [{ token: ExtensionService }, { token: i0.ChangeDetectorRef }], 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", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", showCallProgressEvent: "showCallProgressEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand}\">\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\" [incomingCallData]=\"callData\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n        (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n        <div style=\"display: flex; flex-direction: column;position: relative; width: 100%;\">\n            \n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n            <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n        </div>\n        <div class=\"callerDetails\">\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n        </div>\n        <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n            <div class=\"record-btn-container\">\n                <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [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\" (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\" (keyup)=\"onCallInputEnter($event)\">\n            <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (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        <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n            <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (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-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                <span class=\"material-symbols-outlined\"> call_end </span>\n            </button>\n            <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n                <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n            </button>\n        </div>\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\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\" 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</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;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{height:660px!important}.incoming-call-container{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}.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}.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}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%}\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: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$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"], 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\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand}\">\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\" [incomingCallData]=\"callData\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n        (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n        <div style=\"display: flex; flex-direction: column;position: relative; width: 100%;\">\n            \n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n            <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n        </div>\n        <div class=\"callerDetails\">\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n        </div>\n        <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n            <div class=\"record-btn-container\">\n                <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [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\" (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\" (keyup)=\"onCallInputEnter($event)\">\n            <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (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        <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n            <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (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-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                <span class=\"material-symbols-outlined\"> call_end </span>\n            </button>\n            <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n                <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n            </button>\n        </div>\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\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\" 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</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;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{height:660px!important}.incoming-call-container{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}.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}.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}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%}\n"] }]
+        }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { callData: [{
+                type: Input
+            }], newIncomingCallData: [{
+                type: Input
+            }], newIncomingCallsList: [{
+                type: Input
+            }], endCallEvent: [{
+                type: Output
+            }], incomingCallsNewInfo: [{
+                type: Output
+            }], minimiseEvent: [{
+                type: Output
+            }], showCallProgressEvent: [{
+                type: Output
+            }], incomingCallInitiated: [{
+                type: Output
+            }] } });
+
+class DialboxComponent {
+    constructor(twilioService, extService, 
+    // private dialog: MatDialog,
+    ipService, extensionService, router) {
+        this.twilioService = twilioService;
+        this.extService = extService;
+        this.ipService = ipService;
+        this.extensionService = extensionService;
+        this.router = router;
+        this.isDialpadHidden = false;
+        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: message,
-            show: true
+            msg: '',
+            show: false
         };
-        setTimeout(() => {
-            this.dialAlert.show = false;
-        }, 3000);
+        this.showDedicatedPopup = false;
+        this.newIncomingCalls = [];
+        this.incomingCallsList = [];
+        this.subscriptions = new Subscription();
+        this.shakeDedicatedBtn = false;
+        this.isSmartDialCall = false;
+        this.isMinimised = false;
     }
-    async isCallerIdSet() {
+    ngOnInit() {
         try {
-            const tkn = localStorage.getItem('ext_token');
-            const res = await 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');
+            this.token = localStorage.getItem('ext_token');
+            //this.isCallInProgress = true; 
+            this.getContactList();
+            // this.getUserCallSetting();
+            const sub1 = this.twilioService.dialNumberFromOtherModule.subscribe((contact) => {
+                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();
+                        }
+                    }
+                }
+            });
+            // handle incoming call
+            const sub2 = this.twilioService.currentCall.subscribe(incomingCallData => {
+                // if (incomingCallData) {
+                //   this.isCallInProgress = true;
+                //   this.isDialpadHidden = false;
+                //   this.callData.phone = incomingCallData.parameters.From;
+                //   this.callData.name = incomingCallData.customParameters.get('name');
+                //   this.callData.img = incomingCallData.customParameters.get('image');
+                //   this.callData.isIncomingCall = true;
+                // }
+                if (incomingCallData) {
+                    if (this.isCallInProgress) {
+                        this.newIncomingCalls.push(incomingCallData);
+                        // this.getUserInformation(incomingCallData);
+                    }
+                    else {
+                        this.isCallInProgress = true;
+                        this.isDialpadHidden = false;
+                        this.callData.phone = incomingCallData.parameters['From'];
+                        // this.getUserInformation(incomingCallData);
+                        this.callData.name = incomingCallData.customParameters.get('name');
+                        this.callData.img = incomingCallData.customParameters.get('image') || 'assets/images/user.jpg';
+                        this.callData.isIncomingCall = true;
+                    }
+                    incomingCallData.on('cancel', () => {
+                        // this.incomingCallsList = this.incomingCallsList.filter((item:any) => item.parameters.CallSid !== incomingCallData.parameters.CallSid);
+                        if (this.incomingCallsList.length == 0) {
+                            this.isCallInProgress = false;
+                        }
+                    });
+                    incomingCallData.on('disconnect', () => {
+                        // this.incomingCallsList = this.incomingCallsList.filter((item:any) => item.parameters.CallSid !== incomingCallData.parameters.CallSid);
+                        if (this.incomingCallsList.length == 0) {
+                            this.isCallInProgress = false;
+                        }
+                    });
+                }
+            });
+            this.subscriptions.add(sub1);
+            this.subscriptions.add(sub2);
         }
         catch (e) {
             console.log(e);
-            return false;
-        }
-    }
-    async checkMicrophonePermission() {
-        try {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            stream.getTracks().forEach(track => track.stop());
-            return true;
-        }
-        catch (error) {
-            if (error instanceof DOMException && error.name === 'NotAllowedError') {
-                return false;
-            }
-            else {
-                return false;
-            }
-        }
-    }
-    async askForMicrophonePermission() {
-        try {
-            const stream = await 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 
-    async getToNumber(dialedNumber) {
-        if (dialedNumber[0] !== '+') {
-            // this is case when user geolocation dial code is on
-            let ipAddress = await this.ipService.getIpAddressInfo().toPromise();
-            const res = await this.twilioService.getToNumber(dialedNumber, ipAddress.address.countryCode).toPromise();
-            if (res.status == 200) {
-                this.toastTimeout = res.timeInterval * 1000;
-                await this.showNumberToast(res);
-            }
-        }
+    // getUserInformation(incomingCallData: any) {
+    //   let data = this.fromEntries(Array.from(incomingCallData.customParameters.entries()));
+    //   this.extensionService.getUserInformation(data.twilioAuthId).subscribe(
+    //   response => {
+    //     incomingCallData['userInfo']=response
+    //     this.incomingCallsList.push(incomingCallData);
+    //   }, error => {
+    //     console.error('Error starting recording', error);
+    //   });
+    // }
+    fromEntries(entries) {
+        return entries.reduce((acc, [key, value]) => {
+            acc[key] = value;
+            return acc;
+        }, {});
     }
-    isAlertEnable() {
-        return localStorage.getItem('isAlertEnable');
+    ngAfterViewInit() {
+        this.registerDragElement();
     }
-    async showNumberToast(data) {
-        const isAlertOn = (localStorage.getItem('isCountryCodeToastOn'));
-        if (isAlertOn == 'true') {
-            this.callNumberToast.show = true;
-            this.callNumberToast.number = data.toNumber;
-            this.callNumberToast.displayNum = data.displayNumber;
+    ngOnChanges(changes) {
+        if (changes['isDialpadHidden'] && !this.isDialpadHidden) {
+            this.getContactList();
+            // this.getUserCallSetting();
+            setTimeout(() => {
+                this.dialInputElement.nativeElement.focus();
+            }, 0);
         }
-        this.callData.displayNum = data.displayNumber;
-        //this.callData.phone = data.toNumber;
-        await 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;
+    registerDragElement() {
+        try {
+            const elmnt = document.getElementById('dragparent1');
+            let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+            const dragMouseDown = (e) => {
+                // If the target is an input, return and don't initiate dragging
+                if (e.target.tagName.toLowerCase() === 'input') {
+                    return;
+                }
+                e = e || window.event;
+                // get the mouse cursor position at startup:
+                pos3 = e.clientX;
+                pos4 = e.clientY;
+                document.onmouseup = closeDragElement;
+                // call a function whenever the cursor moves:
+                document.onmousemove = elementDrag;
+            };
+            const elementDrag = (e) => {
+                e = e || window.event;
+                // calculate the new cursor position:
+                pos1 = pos3 - e.clientX;
+                pos2 = pos4 - e.clientY;
+                pos3 = e.clientX;
+                pos4 = e.clientY;
+                // set the element's new position:
+                // elmnt.style.top = elmnt.offsetTop - pos2 + 'px';
+                // elmnt.style.left = elmnt.offsetLeft - pos1 + 'px';
+            };
+            const closeDragElement = () => {
+                /* stop moving when mouse button is released:*/
+                document.onmouseup = null;
+                document.onmousemove = null;
+            };
+            // if (document.getElementById(elmnt.id + 'header')) {
+            //   /* if present, the header is where you move the DIV from:*/
+            //   document.getElementById(elmnt.id + 'header').onmousedown = dragMouseDown;
+            // } else {
+            //   /* otherwise, move the DIV from anywhere inside the DIV:*/
+            //   elmnt.onmousedown = dragMouseDown;
+            // }
+        }
+        catch (e) {
+            console.log(e);
         }
     }
-    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();
+    addNumber(num) {
+        if (num == '#' || num == '*' || num == '+' || Number.isInteger(num)) {
+            if (num == '#') {
+                new Audio(`/assets/dial-tones/dtmf/dtmf-hash-.mp3`).play();
             }
-        });
-    }
-    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();
-                }
-                if (!this.selectedCallerId) {
-                    this.shakeDedicatedBtn = true;
-                    setTimeout(() => {
-                        this.shakeDedicatedBtn = false;
-                    }, 10000);
-                }
+            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.dialedNumber += num;
+            this.showInputClearBtn = true;
+            this.numberDialed.emit(this.dialedNumber);
+            this.onDialInputChange(this.dialedNumber);
+            // this.dialInputRef.nativeElement.focus();
         }
-    }
-    onCallBtnMouseEnter(ev) {
-        if (!this.selectedCallerId || (this.selectedCallerId == 'alwaysAsk') || (this.selectedCallerId == 'smartDialing')) {
-            this.shakeDedicatedBtn = true;
+        else if (num === 'voicemail') {
+            // this.showDedicatedPopup = true;
+            this.router.navigate(['extension/voicemail/' + this.token]);
         }
     }
-    onCallBtnMouseLeave(ev) {
-        if (!this.selectedCallerId || (this.selectedCallerId == 'alwaysAsk') || (this.selectedCallerId == 'smartDialing')) {
-            this.shakeDedicatedBtn = false;
-        }
+    hideDialpad() {
+        this.isDialpadHidden = true;
+        this.closeDialpadEvent.emit();
+        this.clearAllDialed();
+        this.filteredContactList = [];
     }
-    acceptNewIncomingCall(call) {
-        //first cut the current call
-        //this.callData = call;
-        this.newIncomingCallData = call;
+    onDialInputChange(inputVal) {
+        try {
+            // Updated regex to include x, X, ext., Ext., and ,
+            const isNumericInput = /^[\d\s+\-]+$/.test(inputVal);
+            let mainNumber = inputVal;
+            // Check for extension indicators and split the input
+            const extMatch = inputVal.match(/(x|X|ext\.|Ext\.|,)(.*)/);
+            if (extMatch) {
+                mainNumber = inputVal.substring(0, extMatch.index).trim();
+                this.callData.extNum = extMatch[2].trim();
+            }
+            this.sanitizedNum = isNumericInput ? mainNumber.replace(/[\s\-]+/g, '') : mainNumber;
+            this.callData.phone = isNumericInput ? this.sanitizedNum : '';
+            this.showInputClearBtn = inputVal.length > 0;
+            if (isNumericInput) {
+                this.dialedNumber = new AsYouType().input(this.sanitizedNum);
+            }
+            // emit current number whenever input changes
+            this.numberDialed.emit(this.dialedNumber);
+            if (inputVal.length > 2) {
+                this.filteredContactList = this.contactList.filter(contact => {
+                    const fullName = `${contact.firstName} ${contact.middleName} ${contact.lastName}`.toLowerCase();
+                    // return fullName.includes(this.sanitizedNum.toLowerCase()) || contact.numbersList.some(num => num.number.includes(this.sanitizedNum));
+                }).slice(0, 2);
+            }
+            else {
+                this.filteredContactList = [];
+            }
+        }
+        catch (e) {
+            console.log(e);
+        }
     }
-    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']);
+    getFirstLetter(name) {
+        return name ? name.charAt(0).toUpperCase() : '';
     }
-    newIncomingCallInitiated() {
-        this.isCallInProgress = true;
-        this.newIncomingCalls = [];
-        this.incomingCallInitiated.emit();
+    clearInput() {
+        if (this.dialedNumber.length > 0) {
+            this.dialedNumber = this.dialedNumber.slice(0, -1);
+            this.showInputClearBtn = this.dialedNumber.length !== 0;
+            this.onDialInputChange(this.dialedNumber);
+        }
     }
-    incomingCallsNewInfo(data) {
-        this.incomingCallsList = data;
-        this.incomingCallsNewInfoEvent.emit(data);
+    clearAllDialed() {
+        this.dialedNumber = '';
+        this.sanitizedNum = '';
+        this.showInputClearBtn = false;
     }
-    ngOnDestroy() {
-        try {
-            console.log('Cleaning up C2cDialpadComponent');
-            // Unsubscribe from all subscriptions
-            if (this.subscriptions) {
-                this.subscriptions.unsubscribe();
+    getCallerIdList() {
+        this.extService.displayID(this.token || '').subscribe((res) => {
+            //this.callerIdList = res.callerIdList.filter(item => item.type === "C2C Softphone Number");
+            this.callerIdList = res.callerIdList.filter((item) => item.voiceFeature === true);
+            // this.callerIdList = res.callerIdList;
+            if (this.callerIdList.length == 1) {
+                this.selectedCallerId = this.callerIdList[0];
             }
-            // End any active call
-            if (this.isCallInProgress) {
-                this.endCall();
+            else {
+                if (this.callPreference === 'alwaysAsk' || this.callPreference === 'smartDialing') {
+                    this.selectedCallerId = null;
+                }
+                else {
+                    this.selectedCallerId = this.callerIdList.find(item => (item.number == this.callPreference));
+                }
             }
-            // Clear any timeouts or intervals if they exist
-            if (this.toastTimeout) {
-                clearTimeout(this.toastTimeout);
+        });
+    }
+    getContactList() {
+        this.twilioService.getContactList().subscribe((resp) => {
+            if (resp.response == 'Success') {
+                this.contactList = resp.phoneBook;
             }
-            console.log('C2cDialpadComponent cleanup complete');
+        }, err => {
+            console.log(err);
+        });
+    }
+    getFullName(contact) {
+        let fullName = contact.firstName || '';
+        if (contact.middleName) {
+            fullName += ` ${contact.middleName}`;
         }
-        catch (error) {
-            console.error('Error during component cleanup:', error);
+        if (contact.lastName) {
+            fullName += ` ${contact.lastName}`;
         }
+        return fullName.trim();
     }
-}
-DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: IpAddressService }, { token: ExtensionService }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component });
-DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { isDialpadHidden: "isDialpadHidden" }, 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>\r\n  lib all called\r\n</div>\r\n<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <!-- <app-call-progress *ngIf=\"isCallInProgress\"\r\n   (endCallEvent)=\"endCall()\"\r\n   (minimiseEvent) = \"onMinimise($event)\"\r\n   (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n   [newIncomingCallData]=\"newIncomingCallData\"\r\n   [newIncomingCallsList]=\"incomingCallsList\"\r\n   (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n    [callData]=\"callData\"></app-call-progress> -->\r\n  <div class=\"dialpad-container\" [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        <!-- <h6 class=\"mb-1 font-weight-bold\">Incoming Call</h6> -->\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n\r\n        <!-- <p class=\"inc-user-name\">John Doe</p> \r\n        <p>+12337472489</p>\r\n        <p style=\"font-size: 12px;color:#d5d5d5 !important;margin-top:2px\">Call on +12264584100</p> -->\r\n\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;height:600px;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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-dialbox', template: "<div>\r\n  lib all called\r\n</div>\r\n<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <!-- <app-call-progress *ngIf=\"isCallInProgress\"\r\n   (endCallEvent)=\"endCall()\"\r\n   (minimiseEvent) = \"onMinimise($event)\"\r\n   (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n   [newIncomingCallData]=\"newIncomingCallData\"\r\n   [newIncomingCallsList]=\"incomingCallsList\"\r\n   (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n    [callData]=\"callData\"></app-call-progress> -->\r\n  <div class=\"dialpad-container\" [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        <!-- <h6 class=\"mb-1 font-weight-bold\">Incoming Call</h6> -->\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n\r\n        <!-- <p class=\"inc-user-name\">John Doe</p> \r\n        <p>+12337472489</p>\r\n        <p style=\"font-size: 12px;color:#d5d5d5 !important;margin-top:2px\">Call on +12264584100</p> -->\r\n\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;height:600px;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: IpAddressService }, { type: ExtensionService }, { type: i4.Router }]; }, propDecorators: { isDialpadHidden: [{
-                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) {
-        this.extensionService = extensionService;
-        this.twilioService = twilioService;
-        this.showRingAnimation = true;
-        this.selectedIncomingCall = {};
-        this.twilioAuthId = '';
-        this.dedicatedNum = '';
-        this.recordCall = false;
-        this.shouldRecordCall = false;
-        this.isClickExpand = false;
-        this.disbaleEndCallBtn = true;
-        this.closeIncomingCallDiv = new EventEmitter();
-        this.incomingCallsNewList = new EventEmitter();
-        this.selectedIncomingCallInfo = new EventEmitter();
-        this.isMute = false;
+    toggleCallerIdDiv() {
+        this.isCallerIdHidden = !this.isCallerIdHidden;
     }
-    ngOnInit() {
+    onContactSelect(contact) {
+        this.dialedNumber = contact.numbersList[0].number;
+        this.callData.name = this.getFullName(contact);
+        this.callData.img = contact.image || 'assets/images/user.jpg';
+        this.onDialInputChange(this.dialedNumber);
+        this.filteredContactList = [];
+    }
+    endCall() {
         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);
-                    });
-                }
-            });
+            console.log('Ending call');
+            this.isCallInProgress = false;
+            this.filteredContactList = [];
+            // Reset call data
+            this.callData = {
+                phone: '',
+                name: '',
+                img: 'assets/images/user.jpg',
+                isIncomingCall: false,
+                dial: false,
+                displayNum: '',
+                extNum: ''
+            };
+            // Reset dialed number
+            this.dialedNumber = '';
+            this.sanitizedNum = '';
+            // Emit end call event
+            this.endCallEvent.emit();
+            console.log('Call ended successfully');
         }
-        catch (e) {
-            console.log(e);
+        catch (error) {
+            console.error('Error in endCall:', error);
+            // Even if there's an error, try to reset the state
+            this.isCallInProgress = false;
+            this.callData = {
+                phone: '',
+                name: '',
+                img: 'assets/images/user.jpg',
+                isIncomingCall: false,
+                dial: false,
+                displayNum: '',
+                extNum: ''
+            };
+            this.endCallEvent.emit();
         }
     }
-    acceptCallFromList(data) {
-        console.log(data, 'checking dii');
-        data.accept();
-        // data.parameters['isCallConnected'] = true;
-        data.isCallConnected = true;
-        this.sendIPforIncomingCall(data.customParameters.get('twilioAuthId'), 'answered').then(() => {
-            if (this.shouldRecordCall) { // default recording 
-                this.extensionService.setCallSid(this.CallSid, this.recordCall);
-                this.closeIncomingCallWrapper(1);
+    // async initiateCall() {
+    //   try {
+    //     console.log('Initiating call with number:', this.dialedNumber);
+    //     if (!this.dialedNumber && this.lastDialed) {
+    //       console.log('Using last dialed number:', this.lastDialed.number);
+    //       this.sanitizedNum = this.lastDialed.number;
+    //     }
+    //     const isInvalid = await this.isInvalidNumber();
+    //     if (isInvalid) {
+    //       console.error('Invalid number format');
+    //       return false;
+    //     }
+    //     this.saveLastDialed();
+    //     this.isSavedContactDialled();
+    //     // Check payment status
+    //     this.isPaymentDue = localStorage.getItem('paymentDue') === 'true';
+    //     if (this.isPaymentDue) {
+    //       console.warn('Payment is due');
+    //       swal('Warning', 'Please note that your payment is due. To continue using our services, kindly subscribe to avoid interruptions.');
+    //       return false;
+    //     }
+    //     // Check if dialing own number
+    //     if (this.sanitizedNum === localStorage.getItem('twilioNumber')) {
+    //       console.error('Attempted to dial own number');
+    //       swal('Error', 'You cannot dial your own number');
+    //       return false;
+    //     }
+    //     // Check microphone permissions
+    //     const hasPermission = await this.checkMicrophonePermission();
+    //     if (!hasPermission) {
+    //       console.warn('Microphone permission not granted');
+    //       await this.askForMicrophonePermission();
+    //       return false;
+    //     }
+    //     if (!this.selectedCallerId) {
+    //       console.error('No caller ID selected');
+    //       this.shakeDedicatedBtn = true;
+    //       this.showDialAlert('Please select a C2C number to call from');
+    //       setTimeout(() => {
+    //         this.shakeDedicatedBtn = false;
+    //       }, 3000);
+    //       return false;
+    //     }
+    //     console.log('Getting number with country code...');
+    //     this.callData.displayNum = '';
+    //     try {
+    //       await this.getToNumber(this.sanitizedNum);
+    //     } catch (error) {
+    //       console.error('Error getting number with country code:', error);
+    //       this.showDialAlert('Error processing number. Please try again.');
+    //       return false;
+    //     }
+    //     if (this.terminateCall) {
+    //       console.log('Call terminated by user');
+    //       this.terminateCall = false;
+    //       return false;
+    //     }
+    //     // Prepare call data
+    //     this.callData = {
+    //       ...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);
+    //     this.isCallInProgress = true;
+    //     this.callInitiated.emit({ ...this.callData });
+    //     return true;
+    //   } catch (error) {
+    //     console.error('Error in initiateCall:', error);
+    //     this.showDialAlert('Failed to initiate call. Please try again.');
+    //     this.isCallInProgress = false;
+    //     return false;
+    //   }
+    //     //this.clearAllDialed();
+    //   // } else {
+    //   //   swal('Error', 'Trial period is over. Please setup payment method to continue services')
+    //   // }
+    // }
+    //  async initiateCall() {
+    //   if (!this.dialedNumber && this.lastDialed) {
+    //     this.sanitizedNum = this.lastDialed.number;
+    //   }
+    //   const isInvalid = await this.isInvalidNumber();
+    //   if (isInvalid) {
+    //     return false;
+    //   }
+    //   this.saveLastDialed();
+    //   this.isSavedContactDialled();
+    //   //let isCallerIdSet = await this.isCallerIdSet();
+    //   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;
+    //   }
+    //   this.isTrialPeriodOver = localStorage.getItem('trialOver') == 'false' ? false : true;
+    //   // if (!this.isTrialPeriodOver) {
+    //     if (this.sanitizedNum == localStorage.getItem('twilioNumber')) {
+    //       swal('Error', 'You can not dial this number');
+    //       return;
+    //     }
+    //     const hasPermission = await this.checkMicrophonePermission();
+    //     if (hasPermission) {
+    //       if (this.selectedCallerId) {
+    //         //clear displayNum if value is binded from previous call
+    //         this.callData.displayNum = '';
+    //         // get number to be dialled from backend
+    //         await this.getToNumber(this.sanitizedNum);
+    //         if (this.terminateCall) {
+    //           this.terminateCall = false;
+    //           return;
+    //         }
+    //         this.callData.phone = this.sanitizedNum;
+    //         this.callData.isIncomingCall = false;
+    //         this.callData.dial = true;
+    //         if (!this.isSmartDialCall) {
+    //           this.callData.from = this.selectedCallerId.number;
+    //         }
+    //         this.isCallInProgress = true;
+    //               this.callData = {
+    //               ...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);
+    //             this.isCallInProgress = true;
+    //             this.callInitiated.emit({ ...this.callData });
+    //         return true;
+    //       } else {
+    //         this.shakeDedicatedBtn = true;
+    //         this.showDialAlert('Select a C2C number to call');
+    //         setTimeout(() => {
+    //           this.shakeDedicatedBtn = false;
+    //         }, 3000);
+    //         return false;
+    //       }
+    //       //this.callingOpenEvent.emit({ phone: this.dialedNumber });
+    //     } else {
+    //       await this.askForMicrophonePermission();
+    //     }
+    //     //this.clearAllDialed();
+    //   // } else {
+    //   //   swal('Error', 'Trial period is over. Please setup payment method to continue services')
+    //   // }
+    // }
+    // async initiateCall() {
+    //   try{
+    //     if (!this.dialedNumber && this.lastDialed) {
+    //       this.sanitizedNum = this.lastDialed.number;
+    //     }
+    //     const isInvalid = await this.isInvalidNumber();
+    //     if (isInvalid) {
+    //       return false;
+    //     }
+    //     this.saveLastDialed();
+    //     this.isSavedContactDialled();
+    //     //let isCallerIdSet = await this.isCallerIdSet();
+    //     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.isTrialPeriodOver) {
+    //       if (this.sanitizedNum == localStorage.getItem('twilioNumber')) {
+    //         swal('Error', 'You can not dial this number');
+    //         return false;
+    //       }
+    //       const hasPermission = await this.checkMicrophonePermission();
+    //       if (hasPermission) {
+    //         if (this.selectedCallerId) {
+    //           //clear displayNum if value is binded from previous call
+    //           this.callData.displayNum = '';
+    //           // get number to be dialled from backend
+    //           await this.getToNumber(this.sanitizedNum);
+    //           if (this.terminateCall) {
+    //             this.terminateCall = false;
+    //             return;
+    //           }
+    //           this.callData.phone = this.sanitizedNum;
+    //           this.callData.isIncomingCall = false;
+    //           this.callData.dial = true;
+    //           if (!this.isSmartDialCall) {
+    //             this.callData.from = this.selectedCallerId.number;
+    //           }
+    //           this.isCallInProgress = true;
+    //                 this.callData = {
+    //                 ...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);
+    //               this.isCallInProgress = true;
+    //               this.callInitiated.emit({ ...this.callData });
+    //           return true;
+    //         } else {
+    //           this.shakeDedicatedBtn = true;
+    //           this.showDialAlert('Select a C2C number to call');
+    //           setTimeout(() => {
+    //             this.shakeDedicatedBtn = false;
+    //           }, 3000);
+    //           return false;
+    //         }
+    //         //this.callingOpenEvent.emit({ phone: this.dialedNumber });
+    //       } else {
+    //         await this.askForMicrophonePermission();
+    //       }
+    //       //this.clearAllDialed();
+    //     // } 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;
+    //   }
+    // }
+    async initiateCall() {
+        try {
+            if (!this.dialedNumber && this.lastDialed) {
+                this.sanitizedNum = this.lastDialed.number;
             }
-            else { // manual recording     
-                this.extensionService.setCallSid(this.CallSid, this.recordCall);
-                this.closeIncomingCallWrapper(1);
+            const isInvalid = await this.isInvalidNumber();
+            if (isInvalid) {
+                return false;
             }
-        });
-    }
-    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 });
+            // 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 = await this.checkMicrophonePermission();
+            // if (!hasPermission) {
+            //   await 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
+            // await this.getToNumber(this.sanitizedNum);
+            if (this.terminateCall) {
+                this.terminateCall = false;
+                return;
             }
+            // Update call data in a single operation
+            this.callData = {
+                ...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);
+            this.isCallInProgress = true;
+            this.callInitiated.emit({ ...this.callData });
+            return true;
         }
-    }
-    closeIncomingCallWrapper(val) {
-        this.closeIncomingCallDiv.emit({ show: val, call: this.twilioCallData });
-    }
-    toggleMute(data) {
-        this.isMute = !this.isMute;
-        data.mute(this.isMute);
-    }
-    sendIPforIncomingCall(recordId, callstatus) {
-        return new Promise((resolve, reject) => {
-            this.extensionService.getIPDetailsForCall(recordId, callstatus).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 {
-                        // swal("Error", "Missing call authentication details.", "error");
-                    }
-                    resolve();
-                }
-                else {
-                    swal("Error", resp.message.join("<br/>"), "error");
-                    resolve();
-                }
-            }, (error) => {
-                swal("Error", GlobalConstant.ErrorMsg500, "error");
-                resolve();
-            });
-        });
-    }
-    onUserInfoByCallSid() {
-        if (this.selectedIncomingCall && this.selectedIncomingCall.userInfo) {
+        catch (e) {
+            console.error('Error in initiateCall:', e);
+            this.showDialAlert('Failed to initiate call. Please try again.');
+            this.isCallInProgress = false;
+            return false;
         }
-        return this.selectedIncomingCall ? Object.keys(this.selectedIncomingCall).length ? true : false : false;
     }
-    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;
-                    }
-                });
+    async isInvalidNumber() {
+        try {
+            if (this.sanitizedNum == '') {
+                this.showDialAlert('Invalid Number');
+                return true;
             }
-            this.selectedIncomingCallInfo.emit(this.selectedIncomingCall);
-            if (!this.selectedIncomingCall.userInfo || this.selectedIncomingCall.userInfo.status == 201) {
-                this.getUserInformation(this.selectedIncomingCall);
+            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
         }
     }
-    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);
+    // 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;
     }
-    fromEntries(entries) {
-        return entries.reduce((acc, [key, value]) => {
-            acc[key] = value;
-            return acc;
-        }, {});
-    }
-}
-IncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, deps: [{ token: ExtensionService }, { token: TwilioService }], 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" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\">\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">\n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"incomingCallData.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\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=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.parameters?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\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=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\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\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\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\" />\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 xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px;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:680px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:645px}.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;span {color: white; 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;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}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-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\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\">\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">\n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"incomingCallData.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\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=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.parameters?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\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=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\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\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\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\" />\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 xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px;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:680px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:645px}.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;span {color: white; 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;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}\n"] }]
-        }], ctorParameters: function () { return [{ type: ExtensionService }, { type: TwilioService }]; }, propDecorators: { incomingCallData: [{
-                type: Input
-            }], newIncomingCallsList: [{
-                type: Input
-            }], closeIncomingCallDiv: [{
-                type: Output
-            }], incomingCallsNewList: [{
-                type: Output
-            }], selectedIncomingCallInfo: [{
-                type: Output
-            }] } });
-
-class CallProgressComponent {
-    constructor(extensionService, cdr) {
-        this.extensionService = extensionService;
-        this.cdr = cdr;
-        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;
-        // Incoming call variables
-        this.incomingCallDiv = false;
-        this.showCallProgressEvent = new EventEmitter();
-        this.incomingCallInitiated = new EventEmitter();
-        this.isRecording = false;
-        this.isPaused = false;
-        this.timeElapsed = 0; // in seconds
-        this.recordCall = false;
-        this.callStatus = 'ringing';
-        this.isMinimised = false;
-    }
-    ngOnInit() {
-        console.log('Call Progress Component');
+    showDialAlert(message) {
+        this.dialAlert = {
+            msg: message,
+            show: true
+        };
+        setTimeout(() => {
+            this.dialAlert.show = false;
+        }, 3000);
     }
-    ngOnChanges(changes) {
-        console.log('Call Progress Component ngOnChanges');
-        if (changes['callData']) {
-            console.log('Call Progress Component ngOnChanges callData', changes['callData']);
-            if (changes['callData'].currentValue.isIncomingCall) {
-                this.incomingCallDiv = true;
+    async isCallerIdSet() {
+        try {
+            const tkn = localStorage.getItem('ext_token');
+            const res = await 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 {
-                //for outgoing call
-                this.startCall(changes['callData'].currentValue);
+                localStorage.setItem('callerID', 'Not set');
+                this.extService.changeMessage('Not set');
             }
+            return (localStorage.getItem('callerID') !== 'Not set');
         }
-        if (changes['newIncomingCallData']) {
-            try {
-                if (changes['newIncomingCallData'].currentValue) {
-                    if (this.call && (this.call.status() == 'open')) {
-                        this.call.disconnect();
-                        this.call = changes['newIncomingCallData'].currentValue;
-                        this.call?.accept();
-                        this.callData.phone = this.call?.parameters['From'];
-                        this.callData.name = this.call?.customParameters.get('name');
-                        this.callData.img = this.call?.customParameters.get('image') || 'assets/images/user.jpg';
-                        this.incomingCallInitiated.emit();
-                        this.startTimer();
-                    }
-                }
-            }
-            catch (e) {
-                console.log(e);
-            }
+        catch (e) {
+            console.log(e);
+            return false;
         }
     }
-    ngAfterViewInit() { }
-    async startCall(callData) {
+    async checkMicrophonePermission() {
         try {
-            this.showRingAnimation = true;
-            const payload = {
-                channelId: environment.channelId,
-                userId: localStorage.getItem('userId'),
-                to: callData.phone,
-                scope: 'local',
-                fromNumber: callData.from
-            };
-            const response = await this.initiateCall(payload);
-            if (response.status == 200) {
-                const { id: callAuthId, recordCall } = await this.getCallAuthId(response);
-                this.getUserInformation(callAuthId);
-                this.recordCall = recordCall; // Store the recordCall value
-                const tokenData = await this.getOutgoingCallToken(callAuthId);
-                await this.connectToDevice(tokenData.token, callData);
-                // Poll the status for 30-45 seconds
-                this.pollCallStatus(callAuthId);
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            stream.getTracks().forEach(track => track.stop());
+            return true;
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === 'NotAllowedError') {
+                return false;
             }
-            else if (response.status == 201) {
-                swal("Error", response.message.join("<br/>"), "error");
-                this.endCall();
+            else {
+                return false;
             }
         }
+    }
+    async askForMicrophonePermission() {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            stream.getTracks().forEach(track => track.stop());
+        }
         catch (error) {
-            this.showRingAnimation = false;
-            this.handleError(error);
-            this.endCall();
+            console.error('User denied microphone permission:', error);
         }
     }
-    async initiateCall(payload) {
-        return await this.extensionService.initiateCall(payload).toPromise();
-    }
-    async getCallAuthId(response) {
-        return {
-            id: response.callauth.id,
-            recordCall: response.callauth.recordCall
-        };
-    }
-    async getOutgoingCallToken(callAuthId) {
-        return await this.extensionService.getOutgoingCallToken({ authId: callAuthId }).toPromise();
-    }
-    async connectToDevice(token, callData) {
-        const options = {
-            codecPreferences: ['opus', 'pcmu'],
-            closeProtection: true,
-        };
-        this.device = new Device(token.value, options);
-        this.call = await this.device.connect({
-            params: {
-                From: callData.from,
-                To: callData.phone,
-                Env: environment.abb,
-                Token: token.id,
-                Ext: callData.extNum
-            },
-            rtcConstraints: { audio: { deviceId: 'default' } },
-        });
-        this.setupEventListeners();
-    }
-    setupEventListeners() {
-        this.startTimer();
-        this.device?.on('error', (err) => {
-            console.log(err);
-            this.showRingAnimation = false;
-            this.stopTimer();
-        });
-        this.call?.on('error', (error) => {
-            this.showRingAnimation = false;
-            this.stopTimer();
-        });
-        this.call?.on('disconnect', () => {
-            this.endCall();
-        });
-        this.call?.on('ringing', () => {
-        });
-        this.call?.on('reject', () => {
-            this.endCall();
-        });
-        this.call?.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();
-            // }
-        });
-        this.call?.on('messageReceived', (message) => {
-        });
-    }
-    startTimer() {
-        let seconds = 0;
-        this.intervalId = setInterval(() => {
-            seconds++;
-            this.timer = this.formatTime(seconds);
-        }, 1000);
-    }
-    stopTimer() {
-        clearInterval(this.intervalId);
-        this.timer = '00:00';
-    }
-    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}`;
+    // below function is to get the country code with number from server 
+    async getToNumber(dialedNumber) {
+        if (dialedNumber[0] !== '+') {
+            // this is case when user geolocation dial code is on
+            let ipAddress = await this.ipService.getIpAddressInfo().toPromise();
+            const res = await this.twilioService.getToNumber(dialedNumber, ipAddress.address.countryCode).toPromise();
+            if (res.status == 200) {
+                this.toastTimeout = res.timeInterval * 1000;
+                await this.showNumberToast(res);
+            }
+        }
     }
-    handleError(error) {
-        swal("Error", error, "error");
+    isAlertEnable() {
+        return localStorage.getItem('isAlertEnable');
     }
-    endCall() {
-        this.endCallEvent.emit();
-        if (this.call) {
-            this.call.disconnect();
+    async showNumberToast(data) {
+        const isAlertOn = (localStorage.getItem('isCountryCodeToastOn'));
+        if (isAlertOn == 'true') {
+            this.callNumberToast.show = true;
+            this.callNumberToast.number = data.toNumber;
+            this.callNumberToast.displayNum = data.displayNumber;
         }
-        this.showRingAnimation = false;
-        this.stopTimer();
-        this.maximiseDialpad();
-    }
-    toggleMute() {
-        this.isMute = !this.isMute;
-        this.call?.mute(this.isMute);
+        this.callData.displayNum = data.displayNumber;
+        //this.callData.phone = data.toNumber;
+        await this.delay(this.toastTimeout);
+        this.dialedNumber = data.toNumber;
+        this.sanitizedNum = data.toNumber;
+        this.callNumberToast.show = false;
+        this.callNumberToast.number = '';
+        this.callNumberToast.displayNum = '';
     }
-    toggleKeypad() {
-        this.showKeypad = !this.showKeypad;
-        this.callInput = '';
+    delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
     }
-    onCallInputs(num) {
-        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);
-            this.call?.sendDigits(str);
-        }
-        catch (e) {
-            console.log(e);
-        }
+    onMinimise(isMinimised) {
+        this.isMinimised = isMinimised;
+        this.minimiseEvent.emit(isMinimised);
     }
-    onCallInputEnter(ev) {
-        try {
-            this.call?.sendDigits(String(ev.key));
-        }
-        catch (e) {
-            console.log(e);
+    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;
         }
     }
-    closeIncomingCall(data) {
-        // this.incomingCallDiv = false;
-        if (data.show) {
-            //this.showCallProgressEvent.emit()
-            // handle incoming call accepted
-            this.startTimer();
-            this.disbaleEndCallBtn = false;
-            this.call = data.call;
-            const incomingDetail = this.extensionService.getCallSid();
-            this.incomingRecordCall = incomingDetail.recordCall;
-            // Start recording if the call is answered and recording is enabled
-            if (this.incomingRecordCall) {
-                this.startRecording();
-            }
-            else {
-                this.isRecording = false;
-            }
-            this.cdr.detectChanges();
-        }
-        else {
-            // incoming call rejected
-            this.endCallEvent.emit();
-        }
+    onEnter(num) {
+        console.log(num, 'number fn');
+        this.dialedNumber = this.dialedNumber + num;
+        this.sanitizedNum = this.dialedNumber;
+        this.showInputClearBtn = true;
+        this.numberDialed.emit(this.dialedNumber);
     }
-    clearInputs() {
-        this.callInput = this.callInput.slice(0, -1);
+    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();
+            }
+        });
     }
-    minimiseDialpad() {
-        this.minimiseEvent.emit(true);
-        this.isMinimised = true;
+    onDedicatedNumSelect(id) {
+        this.selectedCallerId = id;
+        this.isCallerIdHidden = true;
+        this.extService.setCallerId(id);
     }
-    maximiseDialpad() {
-        this.minimiseEvent.emit(false);
-        this.isMinimised = false;
+    cancelDialNumber() {
+        this.terminateCall = true;
+        this.callNumberToast.show = false;
     }
-    toggleRecording() {
-        if (this.isRecording) {
-            this.stopRecording();
+    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() {
-        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() {
+        this.isCallInProgress = true;
+        this.newIncomingCalls = [];
+        this.incomingCallInitiated.emit();
     }
-    getFormattedTime() {
-        const minutes = Math.floor(this.timeElapsed / 60);
-        const seconds = this.timeElapsed % 60;
-        return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+    incomingCallsNewInfo(data) {
+        this.incomingCallsList = data;
+        this.incomingCallsNewInfoEvent.emit(data);
     }
-    pollCallStatus(callAuthId) {
-        const maxTime = 30000; // Poll for up to 30 seconds
-        const pollInterval = 3000; // Poll every 3 seconds
-        let elapsedTime = 0;
-        const intervalId = setInterval(async () => {
-            elapsedTime += pollInterval;
-            try {
-                const statusResponse = await 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);
-                        this.endCall();
-                        this.stopRecording();
-                    }
-                    else if (this.callStatus === 'ringing') {
-                        // Continue polling; do not clear the interval yet
-                    }
-                }
+    ngOnDestroy() {
+        try {
+            console.log('Cleaning up C2cDialpadComponent');
+            // Unsubscribe from all subscriptions
+            if (this.subscriptions) {
+                this.subscriptions.unsubscribe();
             }
-            catch (error) {
-                clearInterval(intervalId);
+            // End any active call
+            if (this.isCallInProgress) {
+                this.endCall();
             }
-            if (elapsedTime >= maxTime) {
-                // console.log('Max polling time reached. Stopping poll.');
-                clearInterval(intervalId);
+            // Clear any timeouts or intervals if they exist
+            if (this.toastTimeout) {
+                clearTimeout(this.toastTimeout);
             }
-        }, pollInterval);
-    }
-    getUserInformation(id) {
-        this.extensionService.getUserInformation(id).subscribe(response => {
-            console.log(response);
-        }, error => {
-            console.error('Error starting recording', error);
-        });
-    }
-    incomingCallsNewList(data) {
-        this.newIncomingCallsList = data;
-        this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
-    }
-    selectedIncomingCallInfo(data) {
-        this.selectedIncomingCall = data;
-    }
-    ngOnDestroy() {
-        this.callData.dial = false;
-        if (this.timerSubscription) {
-            this.timerSubscription.unsubscribe();
+            console.log('C2cDialpadComponent cleanup complete');
+        }
+        catch (error) {
+            console.error('Error during component cleanup:', error);
         }
     }
 }
-CallProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, deps: [{ token: ExtensionService }, { token: i0.ChangeDetectorRef }], 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", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", showCallProgressEvent: "showCallProgressEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand}\">\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\" [incomingCallData]=\"callData\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n        (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n        <div style=\"display: flex; flex-direction: column;position: relative; width: 100%;\">\n            \n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n            <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n        </div>\n        <div class=\"callerDetails\">\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n        </div>\n        <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n            <div class=\"record-btn-container\">\n                <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [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\" (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\" (keyup)=\"onCallInputEnter($event)\">\n            <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (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        <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n            <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (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-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                <span class=\"material-symbols-outlined\"> call_end </span>\n            </button>\n            <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n                <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n            </button>\n        </div>\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\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\" 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</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;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{height:660px!important}.incoming-call-container{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}.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}.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}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%}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
+DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: IpAddressService }, { token: ExtensionService }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component });
+DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { isDialpadHidden: "isDialpadHidden" }, 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>\r\n  msssmsm\r\n</div>\r\n<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   [newIncomingCallsList]=\"incomingCallsList\"\r\n   (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n   [callData]=\"callData\">\r\n  </lib-call-progress>\r\n  <div class=\"dialpad-container\" [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        <!-- <h6 class=\"mb-1 font-weight-bold\">Incoming Call</h6> -->\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n\r\n        <!-- <p class=\"inc-user-name\">John Doe</p> \r\n        <p>+12337472489</p>\r\n        <p style=\"font-size: 12px;color:#d5d5d5 !important;margin-top:2px\">Call on +12264584100</p> -->\r\n\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;height:600px;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: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "newIncomingCallData", "newIncomingCallsList"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "showCallProgressEvent", "incomingCallInitiated"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-call-progress', template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand}\">\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\" [incomingCallData]=\"callData\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n        (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n        <div style=\"display: flex; flex-direction: column;position: relative; width: 100%;\">\n            \n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n            <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n        </div>\n        <div class=\"callerDetails\">\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n        </div>\n        <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n            <div class=\"record-btn-container\">\n                <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [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\" (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\" (keyup)=\"onCallInputEnter($event)\">\n            <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (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        <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n            <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (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-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                <span class=\"material-symbols-outlined\"> call_end </span>\n            </button>\n            <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n                <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n            </button>\n        </div>\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\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\" 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</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;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{height:660px!important}.incoming-call-container{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}.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}.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}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%}\n"] }]
-        }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { callData: [{
-                type: Input
-            }], newIncomingCallData: [{
-                type: Input
-            }], newIncomingCallsList: [{
+            args: [{ selector: 'lib-dialbox', template: "<div>\r\n  msssmsm\r\n</div>\r\n<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   [newIncomingCallsList]=\"incomingCallsList\"\r\n   (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n   [callData]=\"callData\">\r\n  </lib-call-progress>\r\n  <div class=\"dialpad-container\" [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        <!-- <h6 class=\"mb-1 font-weight-bold\">Incoming Call</h6> -->\r\n        <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n        <p>{{call.parameters.From}}</p>\r\n\r\n        <!-- <p class=\"inc-user-name\">John Doe</p> \r\n        <p>+12337472489</p>\r\n        <p style=\"font-size: 12px;color:#d5d5d5 !important;margin-top:2px\">Call on +12264584100</p> -->\r\n\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;height:600px;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: IpAddressService }, { type: ExtensionService }, { type: i4.Router }]; }, propDecorators: { isDialpadHidden: [{
                 type: Input
-            }], endCallEvent: [{
+            }], closeDialpadEvent: [{
                 type: Output
-            }], incomingCallsNewInfo: [{
+            }], callInitiated: [{
+                type: Output
+            }], endCallEvent: [{
                 type: Output
             }], minimiseEvent: [{
                 type: Output
-            }], showCallProgressEvent: [{
+            }], incomingCallsNewInfoEvent: [{
                 type: Output
             }], incomingCallInitiated: [{
                 type: Output
+            }], dialInputElement: [{
+                type: ViewChild,
+                args: ['dialInput']
+            }], numberDialed: [{
+                type: Output
             }] } });
 
 class CallerIdDialogComponent {
@@ -3031,12 +3031,12 @@ class CallerIdDialogComponent {
         console.log('doNotShowAgain');
     }
 }
-CallerIdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallerIdDialogComponent, deps: [{ token: i4.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: [""], dependencies: [{ kind: "directive", type: i6.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+CallerIdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallerIdDialogComponent, deps: [{ token: i4.Router }, { token: TwilioService }, { token: i3$2.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: [""], dependencies: [{ kind: "directive", type: i3$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$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>" }]
-        }], ctorParameters: function () { return [{ type: i4.Router }, { type: TwilioService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i4.Router }, { type: TwilioService }, { type: i3$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }]; } });
@@ -3066,20 +3066,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DialboxComponent,
                         CallProgressComponent,
                         CallerIdDialogComponent,
-                        IncomingCallComponent,
+                        IncomingCallComponent
                     ],
                     imports: [
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
                         HttpClientModule,
-                        RouterLink,
+                        RouterLink
                     ],
                     exports: [
                         DialboxComponent,
                         CallProgressComponent,
                         CallerIdDialogComponent,
-                        IncomingCallComponent,
+                        IncomingCallComponent
                     ]
                 }]
         }] });