@vgroup/dialbox 0.0.2 → 0.0.3

package/fesm2020/vgroup-dialbox.mjs

@@ -1,50 +1,1217 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core';
+import { AsYouType } from 'libphonenumber-js';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
+import * as i2 from '@angular/router';
+import { RouterLink } from '@angular/router';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+const keypad = [
+    {
+        num: 1,
+        text: 'voicemail'
+    },
+    {
+        num: 2,
+        text: 'abc'
+    },
+    {
+        num: 3,
+        text: 'def'
+    }, {
+        num: 4,
+        text: 'ghi'
+    }, {
+        num: 5,
+        text: 'jkl'
+    }, {
+        num: 6,
+        text: 'mno'
+    }, {
+        num: 7,
+        text: 'pqrs'
+    }, {
+        num: 8,
+        text: 'tuv'
+    }, {
+        num: 9,
+        text: 'wxyz'
+    },
+    {
+        num: '*',
+        text: ' '
+    },
+    {
+        num: 0,
+        text: '+'
+    },
+    {
+        num: '#',
+        text: ''
+    }
+];
+
+const environment = {
+    abb: "d",
+    production: false,
+    secureCookies: true,
+    feUrl: 'https://dev.vgroupinc.com:91/',
+    apiUrl: 'https://apis.vgroupinc.com/test_softphone',
+    captchaKey: "6LfpOmEaAAAAAGsI6JXlMzOl3b7rW4YmYXFDjldD",
+    stripePublishableKey: "pk_test_51K6aTuBiNVV2TMlQfmBWY8jziwiDo0IZ3TrqWPqth1m32cpMAAg5Qpi2AlSMDEAX6hCZRBXoTzBB1uQQLc8B4tco00q2SgG6zO",
+    sessionTimeout: 15,
+    deviceType: "web",
+    appVersion: "2.3",
+    channelId: '61481b12e138eb7dc3007579',
+    c2c_support_point_id: '60424735f74ac306c1bfa900',
+    c2c_support_channel_id: '677f67f3be93ab507fbbfdfc',
+    c2c_point_url: 'https://bit.ly/3blWnPv',
+    c2c_call_label_id: 'ye2XFLfOHCr12GFVRzPh',
+    c2c_email_label_id: 'mvjVgOP2VCiYsVovQqdq',
+    radarAPIKey: 'prj_live_sk_569b6f639edde6120a26f703511c61aaecd3f7ef',
+    firebase: {
+        apiKey: "AIzaSyCA8LSPrqlDq_thk26LhBQexAQeY6pkU5Y",
+        authDomain: "softphone-d5777.firebaseapp.com",
+        projectId: "softphone-d5777",
+        storageBucket: "softphone-d5777.appspot.com",
+        messagingSenderId: "850812494538",
+        appId: "1:850812494538:web:74f8a30fc18e28ded78a33",
+        measurementId: "G-NGXTSV9SH3",
+        vapidKey: "BD6EgcQgbZTjOQfleG3YlEc0_SajB03prqTdDy-qGJkxTxezbq-A_qtuXE1l3yT47o8hnTAbTKBcH15D2AJB2To"
+    },
+    perspectiveApiKey: 'AIzaSyClf32lvLH4QOy-vOnzLzwSNntKIgapH8s'
+};
+
+class TwilioService {
+    constructor(http) {
+        this.http = http;
+        this.openInProgressDialpad = new BehaviorSubject(false);
+        this.currentCall = new BehaviorSubject(null);
+        this.currentCallState = new BehaviorSubject('none'); //in-progress, out-progress, none
+        //   incomingCallToken:string;
+        //   outgoingCallToken:string;
+        this.callType = new BehaviorSubject('NIL');
+        this.isIncomingCallPicked = new BehaviorSubject(false); // for both incoming and outgoing
+        this.token = localStorage.getItem('ext_token');
+        this.isNewContactAdded = new BehaviorSubject(false);
+        this.updateRecentCall = new BehaviorSubject(false);
+        this.callhandleFromNotification = new BehaviorSubject({});
+        this.endCall = new BehaviorSubject(false);
+        this.dialNumberFromOtherModule = new BehaviorSubject({ number: '', name: '', img: '', callerId: '', isDialFromHistory: false, from: '' });
+        this.toggleCallerIdAlert = new BehaviorSubject(true);
+        this.isTrialOver = new BehaviorSubject(false);
+        this.isPaymentDue = new BehaviorSubject(false);
+        this.isAvailableNumber = new BehaviorSubject(false);
+        this.callerIdList = new BehaviorSubject([]);
+        this.triggerSMSReload = new BehaviorSubject(false);
+    }
+    // onIncomingCall(){
+    //   this.device.on('incoming', (call:any) => {
+    //     console.log(call);
+    //     //call.accept();
+    //   });
+    // }
+    saveContact(payload) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/add/contacts/manually', payload, httpOptions);
+    }
+    updateContact(payload) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + this.token }) };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/update/contact', payload, httpOptions);
+    }
+    deleteContact(id) {
+        let payload = {
+            phonebookid: id
+        };
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/delete/contact/' + id, payload, httpOptions);
+    }
+    getContactList() {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.get(environment.apiUrl + '/utilities/phonebook/read/contacts', httpOptions);
+    }
+    addContactToFavourite(payload) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/update/favourite', payload, httpOptions);
+    }
+    getFavouritContacts() {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.get(environment.apiUrl + '/utilities/phonebook/favourite/contacts', httpOptions);
+    }
+    getRecentCalls(pageIndex, pageSize) {
+        // let params = new HttpParams();
+        // params = params.set('size', pageSize);
+        // params = params.set('page', pageIndex);
+        const headers = { 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') };
+        const httpOptions = { headers };
+        return this.http.get(environment.apiUrl + '/utilities/phonebook/recent/calls', httpOptions);
+    }
+    deleteRecentCallLog(id) {
+        let payload = {
+            recordId: id
+        };
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/delete/calls/' + id, payload, httpOptions);
+    }
+    uploadPhoto(payload) {
+        let httpOptions = {
+            headers: new HttpHeaders({
+                'Auth-Key': "Bearer " + localStorage.getItem('ext_token')
+            })
+        };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/upload/photo', payload, httpOptions);
+    }
+    deletePhoto(id) {
+        let payload = {
+            phonebookid: id
+        };
+        let httpOptions = {
+            headers: new HttpHeaders({
+                'Auth-Key': "Bearer " + localStorage.getItem('ext_token')
+            })
+        };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/delete/photo/' + id, payload, httpOptions);
+    }
+    // toggleCallerIdAlertFn(val: any) {
+    //   let httpOptions = {
+    //     headers: new HttpHeaders({
+    //       'Auth-Key': "Bearer " + localStorage.getItem('ext_token')
+    //     })
+    //   };
+    //   return this.http.put<[]>(environment.apiUrl + '/utilities/softphone/callerid/alert/' + val, {}, httpOptions);
+    // }
+    toggleCoutryCodeToast(val) {
+        let httpOptions = {
+            headers: new HttpHeaders({
+                'Auth-Key': "Bearer " + localStorage.getItem('ext_token')
+            })
+        };
+        return this.http.put(environment.apiUrl + '/utilities/softphone/countrycode/alert/' + val, {}, httpOptions);
+    }
+    getToNumber(dialledNo, isoCode) {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }),
+            params: new HttpParams().set('isoCode', isoCode)
+        };
+        const params = new HttpParams().set('isoCode', isoCode);
+        return this.http.get(environment.apiUrl + '/utilities/softphone/check/countryCode/' + dialledNo, httpOptions);
+    }
+}
+TwilioService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TwilioService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+TwilioService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TwilioService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TwilioService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
 class DialboxComponent {
+    constructor(twilioService, 
+    // private extService: ExtensionService,
+    // private dialog: MatDialog,
+    // private ipService: IpAddressService,
+    // private extensionService: ExtensionService,
+    router) {
+        this.twilioService = twilioService;
+        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.token = '';
+        this.showDedicatedPopup = false;
+        this.newIncomingCalls = [];
+        this.incomingCallsList = [];
+        this.subscriptions = new Subscription();
+        this.shakeDedicatedBtn = false;
+        this.isSmartDialCall = false;
+        this.isMinimised = 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;
+                    }
+                    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);
+        }
+    }
+    // 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();
+    }
+    ngOnChanges(changes) {
+        if (changes['isDialpadHidden'] && !this.isDialpadHidden) {
+            this.getContactList();
+            // this.getUserCallSetting();
+            setTimeout(() => {
+                this.dialInputElement.nativeElement.focus();
+            }, 0);
+        }
+    }
+    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);
+        }
+    }
+    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]);
+        }
+    }
+    hideDialpad() {
+        this.isDialpadHidden = true;
+        this.closeDialpadEvent.emit();
+        this.clearAllDialed();
+        this.filteredContactList = [];
+    }
+    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);
+        }
+    }
+    getFirstLetter(name) {
+        return name ? name.charAt(0).toUpperCase() : '';
+    }
+    clearInput() {
+        if (this.dialedNumber.length > 0) {
+            this.dialedNumber = this.dialedNumber.slice(0, -1);
+            this.showInputClearBtn = this.dialedNumber.length !== 0;
+            this.onDialInputChange(this.dialedNumber);
+        }
+    }
+    clearAllDialed() {
+        this.dialedNumber = '';
+        this.sanitizedNum = '';
+        this.showInputClearBtn = false;
+    }
+    // getCallerIdList() {
+    //   this.extService.displayID(this.token).subscribe((res: any) => {
+    //     //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];
+    //     } else {
+    //       if (this.callPreference === 'alwaysAsk' || this.callPreference === 'smartDialing') {
+    //         this.selectedCallerId = null;
+    //       } else {
+    //         this.selectedCallerId = this.callerIdList.find(item => (item.number == this.callPreference));
+    //       }
+    //     }
+    //   });
+    // }
+    getContactList() {
+        this.twilioService.getContactList().subscribe((resp) => {
+            if (resp.response == 'Success') {
+                this.contactList = resp.phoneBook;
+            }
+        }, err => {
+            console.log(err);
+        });
+    }
+    getFullName(contact) {
+        let fullName = contact.firstName || '';
+        if (contact.middleName) {
+            fullName += ` ${contact.middleName}`;
+        }
+        if (contact.lastName) {
+            fullName += ` ${contact.lastName}`;
+        }
+        return fullName.trim();
+    }
+    toggleCallerIdDiv() {
+        this.isCallerIdHidden = !this.isCallerIdHidden;
+    }
+    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 {
+            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 (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();
+        }
+    }
+    // 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;
+        }
+        catch (e) {
+            console.error('Error in initiateCall:', e);
+            this.showDialAlert('Failed to initiate call. Please try again.');
+            this.isCallInProgress = false;
+            return false;
+        }
+    }
+    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;
+        }
+        catch (error) {
+            this.showDialAlert('Invalid Number');
+            return true; // Return true if an error occurred, meaning the number is invalid
+        }
+    }
+    // saveLastDialed() {
+    //   const contact = this.filteredContactList.find(c => c.numbersList.some(n => n.number === this.dialedNumber));
+    //   if (contact) {
+    //     this.lastDialed = {
+    //       name: contact.name,
+    //       image: contact.image,
+    //       number: this.dialedNumber
+    //     };
+    //   } else {
+    //     if(this.dialedNumber){
+    //       this.lastDialed = { number: this.dialedNumber };
+    //     }
+    //   }
+    // }
+    isSavedContactDialled() {
+        let phoneNum = this.sanitizedNum.replace(/\s+/g, '');
+        let contact = this.contactList.filter(contact => {
+            // return contact.numbersList.some(num => num.number === phoneNum)
+        });
+        if (contact.length) {
+            this.callData.name = `${contact[0].firstName} ${contact[0].middleName} ${contact[0].lastName}`.toLowerCase();
+            this.callData.img = contact[0].image || 'assets/images/user.jpg';
+            this.callData.phone = this.sanitizedNum;
+            return true;
+        }
+        return false;
+    }
+    showDialAlert(message) {
+        this.dialAlert = {
+            msg: message,
+            show: true
+        };
+        setTimeout(() => {
+            this.dialAlert.show = false;
+        }, 3000);
+    }
+    // async isCallerIdSet(): Promise<boolean> {
+    //   try {
+    //     const tkn = localStorage.getItem('ext_token');
+    //     const res: any = 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');
+    //   } catch (e) {
+    //     console.log(e);
+    //     return false;
+    //   }
+    // }
+    // async checkMicrophonePermission(): Promise<boolean> {
+    //   try {
+    //     const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+    //     stream.getTracks().forEach(track => track.stop());
+    //     return true;
+    //   } catch (error) {
+    //     if (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: string) {
+    //     if (dialedNumber[0] !== '+') {
+    //       // this is case when user geolocation dial code is on
+    //       let ipAddress: any = await this.ipService.getIpAddressInfo().toPromise();
+    //       const res: any = await this.twilioService.getToNumber(dialedNumber,ipAddress.address.countryCode).toPromise();
+    //       if (res.status == 200) {
+    //         this.toastTimeout = res.timeInterval * 1000;
+    //         await this.showNumberToast(res);
+    //       }
+    //     }
+    // }
+    isAlertEnable() {
+        return localStorage.getItem('isAlertEnable');
+    }
+    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.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;
+        }
+    }
+    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: any) => {
+    //     if (resp.status == 200) {
+    //       //this.callPrefernce = resp.userSetting;
+    //       this.callPreference = resp.callerid;
+    //       this.getCallerIdList();
+    //     }
+    //   })
+    // }
+    // onDedicatedNumSelect(id: any) {
+    //   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);
+                }
+            }
+        }
+    }
+    onCallBtnMouseEnter(ev) {
+        if (!this.selectedCallerId || (this.selectedCallerId == 'alwaysAsk') || (this.selectedCallerId == 'smartDialing')) {
+            this.shakeDedicatedBtn = true;
+        }
+    }
+    onCallBtnMouseLeave(ev) {
+        if (!this.selectedCallerId || (this.selectedCallerId == 'alwaysAsk') || (this.selectedCallerId == 'smartDialing')) {
+            this.shakeDedicatedBtn = false;
+        }
+    }
+    acceptNewIncomingCall(call) {
+        //first cut the current call
+        //this.callData = call;
+        this.newIncomingCallData = call;
+    }
+    // rejectNewIncomingCall(call: Call) {
+    //   call.reject();
+    //   this.newIncomingCalls = this.newIncomingCalls.filter(item => item.parameters.CallSid !== call.parameters.CallSid);
+    //   this.incomingCallsList = this.incomingCallsList.filter(item => item.parameters.CallSid !== call.parameters.CallSid);
+    // }
+    newIncomingCallInitiated() {
+        this.isCallInProgress = true;
+        this.newIncomingCalls = [];
+        this.incomingCallInitiated.emit();
+    }
+    incomingCallsNewInfo(data) {
+        this.incomingCallsList = data;
+        this.incomingCallsNewInfoEvent.emit(data);
+    }
+    ngOnDestroy() {
+        try {
+            console.log('Cleaning up C2cDialpadComponent');
+            // Unsubscribe from all subscriptions
+            if (this.subscriptions) {
+                this.subscriptions.unsubscribe();
+            }
+            // End any active call
+            if (this.isCallInProgress) {
+                this.endCall();
+            }
+            // Clear any timeouts or intervals if they exist
+            if (this.toastTimeout) {
+                clearTimeout(this.toastTimeout);
+            }
+            console.log('C2cDialpadComponent cleanup complete');
+        }
+        catch (error) {
+            console.error('Error during component cleanup:', error);
+        }
+    }
 }
-DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", ngImport: i0, template: `
-    <div style="padding: 20px; border: 1px solid #ccc; border-radius: 4px;">
-      <h3>Dialbox Component</h3>
-      <p>
-        Dialbox is working!
-      </p>
-    </div>
-  `, isInline: true, styles: [":host{display:block}\n"] });
+DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: i2.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 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.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 style="padding: 20px; border: 1px solid #ccc; border-radius: 4px;">
-      <h3>Dialbox Component</h3>
-      <p>
-        Dialbox is working!
-      </p>
-    </div>
-  `, styles: [":host{display:block}\n"] }]
-        }] });
+            args: [{ selector: 'lib-dialbox', template: "<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: i2.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
+            }] } });
 
 class DialboxModule {
 }
 DialboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DialboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DialboxModule, declarations: [DialboxComponent], exports: [DialboxComponent] });
-DialboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxModule });
+DialboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DialboxModule, declarations: [DialboxComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        RouterLink], exports: [DialboxComponent] });
+DialboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxModule, imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
-                        DialboxComponent
+                        DialboxComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        HttpClientModule,
+                        RouterLink,
                     ],
-                    imports: [],
                     exports: [
-                        DialboxComponent
+                        DialboxComponent,
                     ]
                 }]
         }] });
 
 /*
  * Public API Surface of dialbox
- */
+ */
+// Components
+// export * from './lib/components/dialpad/dialpad.component';
+// export * from './lib/components/dial-button/dial-button.component';
+// // Services
+// export * from './lib/components/services/dialer.service';
+// export * from './lib/components/services/call-handler.service';
+// // Models
+// export * from './lib/components/models/call.interface';
+// export * from './lib/components/models/dialer-options.interface';
+// // Utils
+// export * from './lib/components/utils/phone-validator.util';
+// export * from './lib/components/utils/format-phone.util';
+// // Module
+// export * from './lib/dialbox.module';
 
 /**
  * Generated bundle index. Do not edit.