@vgroup/dialbox 0.0.3 → 0.0.5

package/fesm2020/vgroup-dialbox.mjs

@@ -1,14 +1,15 @@
 import * as i0 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 { BehaviorSubject, throwError, 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 { catchError, switchMap, map } from 'rxjs/operators';
+import * as i4 from '@angular/router';
 import { RouterLink } from '@angular/router';
-import * as i3 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
+import * as i6 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 const keypad = [
@@ -211,14 +212,1215 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
 
+class IpAddressService {
+    constructor(http) {
+        this.http = http;
+        this.apiUrl = 'https://api.radar.io/v1/geocode/ip';
+    }
+    getIpAddressInfo() {
+        const authKey = environment.radarAPIKey;
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Authorization': authKey }),
+            fraud: true
+        };
+        return this.http.get(this.apiUrl, httpOptions).pipe(catchError((error) => {
+            return throwError(new Error("Network is blocking the server, please check the proxy or your network."));
+        }));
+    }
+}
+IpAddressService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IpAddressService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+IpAddressService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IpAddressService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IpAddressService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
+
+class ExtensionService {
+    setCallSid(callSid, recordCall) {
+        this.callSid = callSid;
+        this.recordCall = recordCall;
+    }
+    getCallSid() {
+        return {
+            callSid: this.callSid,
+            recordCall: this.recordCall
+        };
+    }
+    setCallerId(callerId) {
+        this.callerIdSubject.next(callerId);
+    }
+    constructor(http, ipAddressService) {
+        this.http = http;
+        this.ipAddressService = ipAddressService;
+        this.callSid = '';
+        this.messageSource = new BehaviorSubject('');
+        this.channelId = environment.channelId;
+        this.currentMessage = this.messageSource.asObservable();
+        this.platform = 'web';
+        this.dedicatedStateSource = new BehaviorSubject('');
+        this.dedicatedState = this.dedicatedStateSource.asObservable();
+        this.callerIdStateSource = new BehaviorSubject('');
+        this.callerIdState = this.callerIdStateSource.asObservable();
+        this.sendSmsSource = new BehaviorSubject('');
+        this.sendMessage = this.sendSmsSource.asObservable();
+        this.draftSmsSource = new BehaviorSubject('');
+        this.draftMessage = this.draftSmsSource.asObservable();
+        this.isInputFocus$ = new BehaviorSubject(false);
+        this.token = localStorage.getItem('ext_token') || '';
+        this.isNewContactAdded = new BehaviorSubject(false);
+        this.isProfileUpdated = new BehaviorSubject(false);
+        this.callerIdSubject = new BehaviorSubject(null);
+        this.callerId$ = this.callerIdSubject.asObservable();
+    }
+    changeMessage(message) {
+        this.messageSource.next(message);
+    }
+    GetUserUsage(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/ext/usage', httpOptions);
+    }
+    GetUserProfile(token, data) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/user', data, httpOptions);
+    }
+    UpdateProfile(userProfile, token) {
+        const userProfileObj = {
+            "billingAddress1": userProfile.billingAddress1,
+            "billingAddress2": userProfile.billingAddress2,
+            "billingCityid": userProfile.billingCity,
+            "billingCountryid": userProfile.billingCountry,
+            "billingStateid": userProfile.billingState,
+            "billingZipid": userProfile.billingZip,
+            "email": userProfile.email,
+            "mobile": userProfile.mobile,
+            "countrycode": userProfile.countrycode,
+            "timezone": userProfile.timezone,
+            "firstname": userProfile.firstname,
+            "lastname": userProfile.lastname,
+            "shippingAddress1": (userProfile.shippingAddress1 !== null && userProfile.shippingAddress1 !== undefined && userProfile.shippingAddress1 !== "") ? userProfile.shippingAddress1 : userProfile.billingAddress1,
+            "shippingAddress2": (userProfile.shippingAddress2 !== null && userProfile.shippingAddress2 !== undefined && userProfile.shippingAddress2 !== "") ? userProfile.shippingAddress2 : userProfile.billingAddress2,
+            "shippingCityid": (userProfile.shippingCity !== null && userProfile.shippingCity !== undefined && userProfile.shippingCity !== "") ? userProfile.shippingCity : userProfile.billingCity,
+            "shippingCountryid": (userProfile.shippingCountry !== null && userProfile.shippingCountry !== undefined && userProfile.shippingCountry !== "") ? userProfile.shippingCountry : userProfile.billingCountry,
+            "shippingStateid": (userProfile.shippingState !== null && userProfile.shippingState !== undefined && userProfile.shippingState !== "") ? userProfile.shippingState : userProfile.billingState,
+            "shippingZipid": (userProfile.shippingZip !== null && userProfile.shippingZip !== undefined && userProfile.shippingZip !== "") ? userProfile.shippingZip : userProfile.billingZip,
+            "imageId": (userProfile.imageId),
+            "imageName": (userProfile.imageName),
+            "companyName": userProfile.companyName,
+            "companySize": userProfile.companySize,
+            "companyFirstName": userProfile.companyFirstName,
+            "companyLastName": userProfile.companyLastName,
+            "companyContactNumber": userProfile.companyContactNumber
+        };
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.put(environment.apiUrl + '/utilities/ext/update', userProfileObj, httpOptions);
+    }
+    deleteProfilePhoto(token) {
+        const params = {
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + token }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/delete/profile/photo', params, httpOptions);
+    }
+    getOtpCode(countryCode, number, mode, token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const numberObj = {
+            "countrycode": countryCode,
+            "number": number,
+            "mode": mode
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/sms/otp', numberObj, httpOptions);
+    }
+    getVerifyMobile(countryName, countrycode, number, otp, token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const verifyObj = {
+            "countryName": countryName,
+            "countrycode": countrycode,
+            "number": number,
+            "otp": otp
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/sms/verify/otp', verifyObj, httpOptions);
+    }
+    connectWithStripe(token) {
+        const params = {
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + token }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/stripe/connect', params, httpOptions);
+    }
+    connectWithStripeRedirection(redirection, token) {
+        const params = {
+            'Auth-Key': "Bearer " + token,
+            "redirection": redirection
+        };
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + token }) };
+        return this.http.post(environment.apiUrl + `/utilities/ext/stripe/connect/${redirection}`, params, httpOptions);
+    }
+    validateStripeSession(sessionId, token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const data = {
+            "sessionid": sessionId,
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/validate/session', data, httpOptions);
+    }
+    loadPaymentMethods(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/ext/payment/methods', httpOptions);
+    }
+    setPaymentDefaultMethod(paymentMethodId, token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const data = {
+            "methodid": paymentMethodId,
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/update/default', data, httpOptions);
+    }
+    sendEmailVerifyLink(emailval, token) {
+        const params = {
+            'Auth-Key': "Bearer " + token,
+            "email": emailval
+        };
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + token }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/verify/email', params, httpOptions);
+    }
+    VerifyEmailLink(key) {
+        const keyobj = { "key": key };
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/ur/verify/request', keyobj, httpOptions);
+    }
+    DeleteMethod(paymentMethodId, token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const data = {
+            "methodid": paymentMethodId,
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/detach/method', data, httpOptions);
+    }
+    VerifySession(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/ext/verify/session', httpOptions);
+    }
+    GetAllCountryList() {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.get(environment.apiUrl + '/global/master/ur/countrylist', httpOptions);
+    }
+    GetAllStateList(_countryId) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.get(environment.apiUrl + '/global/master/ur/statelist/' + _countryId, httpOptions);
+    }
+    LogoutUser(authKey) {
+        const auth = { "Auth-Key": authKey };
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': authKey }) };
+        return this.http.post(environment.apiUrl + '/client/user/logout', auth, httpOptions);
+    }
+    purchasedNumber(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/softphone/view/purchased/number', httpOptions);
+    }
+    availableNumber(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json;charset=UTF-8',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/softphone/available/number', dtModel, httpOptions);
+    }
+    urAvailableNumber(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json;charset=UTF-8',
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/softphone/ur/available/number', dtModel, httpOptions);
+    }
+    stagingNumber(token, dtModel) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/ur/save/staging/number', dtModel, httpOptions);
+    }
+    saveCompanyDetail(dtModel) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/ur/signup/company/details', dtModel, httpOptions);
+    }
+    saveAddressInfo(dtModel) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/ur/signup/address', dtModel, httpOptions);
+    }
+    saveStripeInfo(userId) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/ur/stripe/connect/' + userId, httpOptions);
+    }
+    saveCardInfo(dtModel) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/ur/save/card/info', dtModel, httpOptions);
+    }
+    deleteCard(dtModel) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/ur/delete/saved/card', dtModel, httpOptions);
+    }
+    purchasePlan(dtModel) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/utilities/softphone/ur/purchase/signup/number', dtModel, httpOptions);
+    }
+    getUserStagingInfo(data) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/ur/signup/staging', data, httpOptions);
+    }
+    costCheckOut(token, cost) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/softphone/number/checkout/' + cost, httpOptions);
+    }
+    buyNumber(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/softphone/purchase/number', dtModel, httpOptions);
+    }
+    fetchCallerId(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/softphone/fetch/callerid', httpOptions);
+    }
+    updateNumberLabel(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.put(environment.apiUrl + '/utilities/softphone/update/number/label', dtModel, httpOptions);
+    }
+    releaseNumber(token, twilioNum) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        // return this.http.post<[]>(environment.apiUrl + '/utilities/softphone/delete/twilio/number', httpOptions);
+        return this.http.get(environment.apiUrl + '/utilities/softphone/delete/twilio/number/' + twilioNum, httpOptions);
+    }
+    // Call forwarding api's
+    sendOTP(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/send/otp', dtModel, httpOptions);
+    }
+    verifyOTP(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/verify/otp', dtModel, httpOptions);
+    }
+    updateCallForwarding(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/softphone/configure/call/forwarding', dtModel, httpOptions);
+    }
+    getSingleNumForwardingSetting(token, number) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/softphone/view/call/forwarding/' + number, httpOptions);
+    }
+    deleteCallForwarding(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/softphone/call/forwarding/action', dtModel, httpOptions);
+    }
+    //calling prefernece api
+    displayID(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/softphone/display/callerids', httpOptions);
+    }
+    verifyNumber(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/softphone/add/callerid', dtModel, httpOptions);
+    }
+    verifyStatus(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/softphone/callerid/status/' + dtModel, httpOptions);
+    }
+    existingListmakeCallerID(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/softphone/make/callerid', dtModel, httpOptions);
+    }
+    makeCallerID(token, dtModel, number) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/softphone/markas/callerid/${number}`, dtModel, httpOptions);
+    }
+    deleteCallerID(token, dtModel, id) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/softphone/delete/callerid/${id}`, dtModel, httpOptions);
+    }
+    deregisterCallerID(token, dtModel, id) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/softphone/deregister/callerid/${id}`, dtModel, httpOptions);
+    }
+    updateCallerIDLabel(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.put(environment.apiUrl + '/utilities/softphone/update/callerid/label', dtModel, httpOptions);
+    }
+    initiateCall(payload) {
+        return this.fetchBlockedCountries().pipe(switchMap(blockedCountries => {
+            return this.ipAddressService.getIpAddressInfo().pipe(switchMap(ipAddressInfo => {
+                const params = {
+                    'Content-Type': 'application/json',
+                    'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token'),
+                    'ip-address': ipAddressInfo.ip,
+                    'ip-country': ipAddressInfo.address.country,
+                };
+                payload = { ...payload, proxy: ipAddressInfo.proxy.toString() };
+                const httpOptions = { headers: new HttpHeaders(params) };
+                return this.http.post(environment.apiUrl + '/utilities/ext/ur/initiate/call', payload, httpOptions).pipe(catchError(error => {
+                    return throwError(error);
+                }));
+            }), catchError(error => {
+                // Catch error from getIpAddressInfo
+                return throwError(error);
+            }));
+        }));
+    }
+    fetchBlockedCountries() {
+        return this.http.get(environment.apiUrl + '/global/master/ur/blacklisted/countrylist').pipe(map(response => {
+            if (response.response === 'Success' && Array.isArray(response.countries)) {
+                return response.countries.map((country) => country.isocode);
+            }
+            else {
+                throw new Error('Unable to fetch blocked countries');
+            }
+        }));
+    }
+    // initiateCall(payload: any): Observable<any> {
+    //   return this.ipAddressService.getIpAddressInfo().pipe(
+    //     switchMap(ipAddressInfo => {
+    //       const params = {
+    //         'Content-Type': 'application/json',
+    //         'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token'),
+    //         'ip-address': ipAddressInfo.ip,
+    //         'ip-country': ipAddressInfo.address.country
+    //       };
+    //       const httpOptions = { headers: new HttpHeaders(params) };
+    //       return this.http.post<[]>(environment.apiUrl + '/utilities/ext/ur/initiate/call', payload, httpOptions);
+    //     })
+    //   );
+    // }
+    getIncomingCallToken() {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + localStorage.getItem('ext_token')
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/twilio/incomingcall/token/web', httpOptions);
+    }
+    getOutgoingCallToken(payload) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + localStorage.getItem('ext_token'),
+            'c2c-request': window.location.hostname
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/ur/generate/token', payload, httpOptions);
+    }
+    getCallRecording(callSid) {
+        const headers = new HttpHeaders({
+            'Content-Type': 'application/json',
+            'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token')
+        });
+        const httpOptions = { headers: headers };
+        return this.http.post(environment.apiUrl + '/utilities/twilio/call/callrecording?callSid=' + callSid, {}, httpOptions);
+    }
+    pauseOrResumeRecording(callSid, status) {
+        const headers = new HttpHeaders({
+            'Content-Type': 'application/json',
+            'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token')
+        });
+        const httpOptions = { headers: headers };
+        return this.http.post(environment.apiUrl + `/utilities/twilio/update/recording/status?callSid=${callSid}&status=${status}`, {}, httpOptions);
+    }
+    getCallStatus(callAuthId) {
+        const headers = new HttpHeaders({
+            'Content-Type': 'application/json',
+            'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token')
+        });
+        const httpOptions = { headers: headers };
+        return this.http.get(environment.apiUrl + `/utilities/twilio/call/status/${callAuthId}`, httpOptions);
+    }
+    //sms api
+    sendSms(c2c_latlong, c2c_request, dtModel) {
+        return this.fetchBlockedCountries().pipe(switchMap(blockedCountries => {
+            return this.ipAddressService.getIpAddressInfo().pipe(switchMap((ipAddressInfo) => {
+                if (blockedCountries.includes(ipAddressInfo.address.countryCode)) {
+                    return throwError({ message: ['User from blocked country'] });
+                }
+                else {
+                    const params = {
+                        'Content-Type': 'application/json',
+                        'c2c-latlong': c2c_latlong,
+                        'c2c-request': c2c_request,
+                        'ip-address': ipAddressInfo.ip,
+                        'ip-country': ipAddressInfo.address.country,
+                    };
+                    dtModel = { ...dtModel, proxy: ipAddressInfo.proxy.toString() };
+                    const httpOptions = { headers: new HttpHeaders(params) };
+                    return this.http.post(environment.apiUrl + '/utilities/ext/ur/send/sms', dtModel, httpOptions).pipe(catchError(error => {
+                        // Handle HTTP errors here if needed
+                        return throwError(error);
+                    }));
+                }
+            }), catchError(error => {
+                // Catch error from getIpAddressInfo
+                return throwError(error);
+            }));
+        }), catchError(error => {
+            // Catch error from fetchBlockedCountries
+            return throwError(error);
+        }));
+    }
+    // sendSms(c2c_latlong: string, c2c_request: string, dtModel: any): Observable<any> {
+    //   return this.ipAddressService.getIpAddressInfo().pipe(
+    //     switchMap(ipAddressInfo => {
+    //       const params = {
+    //         'Content-Type': 'application/json',
+    //         'c2c-latlong': c2c_latlong,
+    //         'c2c-request': c2c_request,
+    //         'ip-address': ipAddressInfo.ip,
+    //         'ip-country': ipAddressInfo.address.country
+    //       };
+    //       const httpOptions = { headers: new HttpHeaders(params) };
+    //       return this.http.post<[]>(environment.apiUrl + '/utilities/ext/ur/send/sms', dtModel, httpOptions);
+    //     })
+    //   );
+    // }
+    readContacts(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/phonebook/read/contacts', httpOptions);
+    }
+    sentSMS(token, pageSize, pageIndex) {
+        const headers = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token,
+        };
+        let params = new HttpParams();
+        params = params.set('size', pageSize || '10');
+        params = params.set('page', pageIndex || '1');
+        const httpOptions = { headers, params };
+        return this.http.get(environment.apiUrl + '/utilities/sms/sent/', httpOptions);
+    }
+    deleteSMS(token, recordIds, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/sms/delete/${recordIds}`, dtModel, httpOptions);
+    }
+    // inboxSMS(token: string) {
+    //   const params = {
+    //     'Content-Type': 'application/json',
+    //     'Auth-Key': "Bearer " + token
+    //   }
+    //   const httpOptions = { headers: new HttpHeaders(params) };
+    //   return this.http.get<[]>(environment.apiUrl + '/utilities/sms/inbox', httpOptions);
+    // }
+    inboxSMS(token, page, size) {
+        const params = new HttpParams()
+            .set('page', page.toString())
+            .set('size', size.toString());
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + token }),
+            params: params
+        };
+        return this.http.get(environment.apiUrl + '/utilities/sms/inbox', httpOptions);
+    }
+    readInboxStatus(token, recordId, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/sms/markas/read/${recordId}`, dtModel, httpOptions);
+    }
+    markAsFavourite(token, recordIds, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/sms/mark/favourite/${recordIds}`, dtModel, httpOptions);
+    }
+    markAsUnFavourite(token, recordIds, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/sms/mark/unfavourite/${recordIds}`, dtModel, httpOptions);
+    }
+    viewfavouriteSMS(token, page, size) {
+        const params = new HttpParams()
+            .set('page', page.toString())
+            .set('size', size.toString());
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + token }),
+            params: params
+        };
+        return this.http.get(environment.apiUrl + '/utilities/sms/view/favourite', httpOptions);
+    }
+    saveDraft(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/sms/save/draft', dtModel, httpOptions);
+    }
+    viewDraft(token, page, size) {
+        const params = new HttpParams()
+            .set('page', page.toString())
+            .set('size', size.toString());
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + token }),
+            params: params
+        };
+        return this.http.get(environment.apiUrl + '/utilities/sms/view/draft', httpOptions);
+    }
+    deleteDraftSMS(token, draftIds, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/sms/delete/draft/${draftIds}`, dtModel, httpOptions);
+    }
+    //Address Book 
+    viewContactLists(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/phonebook/read/contacts', httpOptions);
+    }
+    deleteContact(token, phonebookid, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/phonebook/delete/contact/${phonebookid}`, dtModel, httpOptions);
+    }
+    updateFavContacts(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/update/favourite', dtModel, httpOptions);
+    }
+    // saveContacts(token: string, dtModel: any){
+    //   const params = {
+    //     'Content-Type': 'application/json',
+    //     'Auth-Key': "Bearer " + token
+    //   }
+    //   const httpOptions = { headers: new HttpHeaders(params) };
+    //   return this.http.post<[]>(environment.apiUrl + '/utilities/phonebook/add/contacts/manually',dtModel, httpOptions);
+    // }
+    uploadImage(token, dtModel) {
+        const params = {
+            //'Content-Type': 'multipart/form-data',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/upload/photo', dtModel, httpOptions);
+    }
+    //Call Histroy 
+    recentCallHistory(token, page, size) {
+        const params = new HttpParams()
+            .set('page', page.toString())
+            .set('size', size.toString());
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + token }),
+            params: params
+        };
+        return this.http.get(environment.apiUrl + '/utilities/phonebook/recent/calls', httpOptions);
+    }
+    deleteCalls(token, recordId, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/phonebook/delete/calls/${recordId}`, dtModel, httpOptions);
+    }
+    //SMS History
+    recentSMSHistory(token, page, size) {
+        const params = new HttpParams()
+            .set('page', page.toString())
+            .set('size', size.toString());
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + token }),
+            params: params
+        };
+        return this.http.get(environment.apiUrl + '/utilities/sms/history', httpOptions);
+    }
+    getRecentVoiceRecordingData(token, filterData, page, size) {
+        const params = new HttpParams()
+            .set('page', page.toString())
+            .set('size', size.toString());
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + token }),
+            params: params
+        };
+        const filterObj = {};
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/recent/voicerecording', filterData, httpOptions);
+    }
+    // save voice mail recording 
+    saveVoiceMailReocrding(token, recordingData) {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + token }),
+            // params: params
+        };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/update/recording', recordingData, httpOptions);
+    }
+    deleteVoiceRecording(token, recordingId) {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + token }),
+            // params: params
+        };
+        return this.http.delete(environment.apiUrl + `/utilities/phonebook/delete/voicerecordings/${recordingId}`, httpOptions);
+    }
+    markAsVoiceRecording(token, recordingId, dtModel) {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + token }),
+        };
+        return this.http.post(environment.apiUrl + `/utilities/phonebook/markas/voicemail/read/${recordingId}`, dtModel, httpOptions);
+    }
+    editContactById(token, id) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/phonebook/search/contactid/' + id, httpOptions);
+    }
+    updateContacts(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/update/contact', dtModel, 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);
+    }
+    saveContacts(token, payload) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + token }) };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/add/contacts/manually', payload, httpOptions);
+    }
+    //Dowload csv template 
+    downloadCsvTemplate(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/phonebook/download/csv', httpOptions);
+    }
+    //Upload csv contacts 
+    updateCSVContacts(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/phonebook/add/contacts', dtModel, httpOptions);
+    }
+    //City list  
+    GetAllCityList(_countryId, _stateName) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.get(environment.apiUrl + '/global/master/ur/citylist/' + _countryId + '/' + _stateName, httpOptions);
+    }
+    //zip list
+    GetAllZipList(dataModel) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/global/master/ur/postalcodes', dataModel, httpOptions);
+    }
+    //Get all invoices 
+    GetInvoices(viewType, token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/billing/invoices/' + viewType, httpOptions);
+    }
+    DownloadInvoice(invoiceId, token) {
+        const httpOptions = {
+            responseType: 'blob',
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json',
+                'Auth-Key': "Bearer " + token
+            })
+        };
+        return this.http.get(environment.apiUrl + '/utilities/billing/invoice/file/' + invoiceId, httpOptions);
+    }
+    GetInvoice(invoiceId) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.get(environment.apiUrl + '/utilities/billing/invoice/' + invoiceId, httpOptions);
+    }
+    //Billing summary 
+    GetBillingSummary(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/billing/summary', httpOptions);
+    }
+    //Billing Plan & Pricing
+    GetAllPlans(token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/billing/tiers', httpOptions);
+    }
+    //Pay Now
+    payNow(invoiceId, cardId, token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const data = {
+            "invoiceId": invoiceId,
+            "cardId": cardId
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/billing/pay/invoice/${invoiceId}/${cardId}`, data, httpOptions);
+    }
+    confirmInvoicePayment(customerId, token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + `/utilities/billing/invoice/confirmation/${customerId}`, {}, httpOptions);
+    }
+    loadStripeMethods(sessionid, token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + '/utilities/ext/duplicate/card/' + sessionid, httpOptions);
+    }
+    logOut(authKey) {
+        const auth = { "Auth-Key": authKey };
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + authKey }) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/logout', {}, httpOptions);
+    }
+    registerFCMToken(payload) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.post(environment.apiUrl + '/firebase/register/device', payload, httpOptions);
+    }
+    getNotificationList(pageIndex, pageSize) {
+        let params = new HttpParams();
+        params = params.set('size', pageSize || '10');
+        params = params.set('page', pageIndex || '1');
+        const headers = { 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') };
+        const httpOptions = { headers, params };
+        return this.http.get(environment.apiUrl + '/utilities/sms/stored/notification', httpOptions);
+    }
+    getTotalUnreadCount() {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.get(environment.apiUrl + '/utilities/sms/notification/count', httpOptions);
+    }
+    markNotification(payload) {
+        //const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.post(environment.apiUrl + '/firebase/ur/markas/seen/' + payload.notificationId + '/' + payload.status, {}, httpOptions);
+    }
+    deleteNotification(payload) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.post(environment.apiUrl + '/firebase/markas/seen/' + payload.notificationId + '/' + payload.status, {}, httpOptions);
+    }
+    getVoicemailDetails(recordId, token) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + `/utilities/phonebook/play/voicerecordings/${recordId}`, httpOptions);
+    }
+    deleteNotifications(token, notificationIds) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.get(environment.apiUrl + `/utilities/sms/delete/notification/${notificationIds}`, httpOptions);
+    }
+    getReports(filterData, pageIndex, pageSize) {
+        const filterObj = {
+            accountStatus: filterData.accountStatus || "",
+            dateType: filterData.dateType || "",
+            fieldType: filterData.fieldType || "",
+            fieldValue: filterData.fieldValue || "",
+            fromDate: filterData.fromDate || "",
+            pendingDues: filterData.pendingDues,
+            toDate: filterData.toDate || "",
+        };
+        const params = new HttpParams()
+            .set('page', pageIndex?.toString() || '1')
+            .set('size', pageSize?.toString() || '10');
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }),
+            params: params };
+        return this.http.post(environment.apiUrl + '/utilities/report/user/details', filterObj, httpOptions);
+    }
+    getReportsFilter() {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.get(environment.apiUrl + '/utilities/report/dropdown', httpOptions);
+    }
+    getSyncReportData() {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token') }) };
+        return this.http.post(environment.apiUrl + '/utilities/report/update/cache', {}, httpOptions);
+    }
+    getDownloadCSV(filterData, pageIndex, pageSize) {
+        const filterObj = {
+            accountStatus: filterData.accountStatus || "",
+            dateType: filterData.dateType || "",
+            fieldType: filterData.fieldType || "",
+            fieldValue: filterData.fieldValue || "",
+            fromDate: filterData.fromDate || "",
+            pendingDues: filterData.pendingDues,
+            toDate: filterData.toDate || "",
+        };
+        const params = new HttpParams()
+            .set('page', pageIndex > 0 ? pageIndex.toString() : '1')
+            .set('size', pageSize.toString());
+        const httpOptions = { headers: new HttpHeaders({ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }), params: params };
+        return this.http.post(environment.apiUrl + '/utilities/report/csv/download', filterObj, httpOptions);
+    }
+    getDeleteFile(filePathValue) {
+        const httpOptions = {
+            body: { filePath: filePathValue },
+            headers: new HttpHeaders({ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') })
+        };
+        return this.http.post(environment.apiUrl + '/utilities/report/download/complete', httpOptions);
+    }
+    getDownloadPDF(filterData, pageIndex, pageSize) {
+        const filterObj = {
+            accountStatus: filterData.accountStatus || "",
+            dateType: filterData.dateType || "",
+            fieldType: filterData.fieldType || "",
+            fieldValue: filterData.fieldValue || "",
+            fromDate: filterData.fromDate || "",
+            pendingDues: filterData.pendingDues,
+            toDate: filterData.toDate || "",
+        };
+        const params = new HttpParams()
+            .set('page', pageIndex > 0 ? pageIndex.toString() : '1')
+            .set('size', pageSize.toString());
+        const httpOptions = { headers: new HttpHeaders({ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }), params: params };
+        return this.http.post(environment.apiUrl + '/utilities/report/pdf/download', filterObj, httpOptions);
+    }
+    getSuspendCategoriesData() {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') })
+        };
+        return this.http.get(environment.apiUrl + '/utilities/report/suspend/category/dropdown', httpOptions);
+    }
+    getUserDetailsForSuspend(userIds) {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') })
+        };
+        return this.http.post(`${environment.apiUrl}/admin/suspension/data/${encodeURIComponent(userIds)}`, null, httpOptions);
+    }
+    suspendUsers(userData) {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') })
+        };
+        return this.http.post(`${environment.apiUrl}/admin/suspend/user`, userData, httpOptions);
+    }
+    resumeUser(userData) {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') })
+        };
+        return this.http.post(`${environment.apiUrl}/admin/resume/user`, userData, httpOptions);
+    }
+    resumeUnpaidUsers(userData) {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') })
+        };
+        return this.http.post(`${environment.apiUrl}/admin/resume/unpaid/user`, userData, httpOptions);
+    }
+    deleteUser(userData) {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') })
+        };
+        return this.http.post(`${environment.apiUrl}/admin/delete/user`, userData, httpOptions);
+    }
+    deleteUserAccount() {
+        const httpOptions = {
+            headers: new HttpHeaders({ 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') })
+        };
+        // return this.http.post<any[]>(`${environment.apiUrl}/utilities/ext/delete/user/`, userData, httpOptions);
+        return this.ipAddressService.getIpAddressInfo().pipe(switchMap((ipAddressInfo) => {
+            return this.http.post(`${environment.apiUrl}/utilities/ext/delete/user/${this.platform}/${ipAddressInfo.ip}`, null, httpOptions);
+        }), catchError((error) => {
+            // Properly catch errors
+            return throwError(error);
+        }));
+    }
+    getIPDetailsForCall(recordId, callStatus) {
+        return this.ipAddressService.getIpAddressInfo().pipe(switchMap((ipAddressInfo) => {
+            const IpObj = {
+                'ipAddress': ipAddressInfo.ip,
+                'ipCountry': ipAddressInfo.address.country,
+                'recordId': recordId,
+                'callStatus': callStatus,
+            };
+            const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+            return this.http.post(environment.apiUrl + '/utilities/twilio/incoming/call/ip', IpObj, httpOptions).pipe(catchError(postError => {
+                // console.log('Error during HTTP POST request:', postError);
+                return throwError(postError);
+            }));
+        }), catchError(ipError => {
+            //  console.log('Error fetching IP address info:', ipError);
+            return throwError(ipError);
+        }));
+    }
+    getIPDetailsForSMS(recordId) {
+        return this.ipAddressService.getIpAddressInfo().pipe(switchMap((ipAddressInfo) => {
+            const IpObj = {
+                'ipAddress': ipAddressInfo.ip,
+                'ipCountry': ipAddressInfo.address.country,
+                'recordId': recordId,
+            };
+            const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+            return this.http.post(environment.apiUrl + '/utilities/twilio/inbound/sms/ip', IpObj, httpOptions);
+        }, catchError(error => {
+            // Catch error from getIpAddressInfo
+            return throwError(error);
+        })));
+    }
+    GetAllAvailableCountryList() {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };
+        return this.http.get(environment.apiUrl + '/global/master/ur/dedicated/countrylist');
+        // return this.http.get<string>(environment.apiUrl + '/global/master/ur/countrylist', httpOptions);
+    }
+    getUserSettings() {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token') }) };
+        return this.http.get(environment.apiUrl + '/utilities/ext/settings', httpOptions);
+    }
+    updateDialCodePreference(settings) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token') }) };
+        return this.http.put(environment.apiUrl + '/utilities/ext/update/settings', settings, httpOptions);
+    }
+    updateLongPressTime(time) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token') }) };
+        return this.http.put(environment.apiUrl + '/utilities/ext/update/longpress/' + time, {}, httpOptions);
+    }
+    exportToCSV() {
+        const httpOptions = { headers: new HttpHeaders({ 'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token') }), responseType: 'blob' };
+        return this.http.get(environment.apiUrl + '/utilities/phonebook/download/contacts', httpOptions);
+    }
+    getDialPreferenceNums() {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token') }) };
+        return this.http.get(environment.apiUrl + '/utilities/ext/dial/preference/dropdown', httpOptions);
+    }
+    updateVASSettings(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/value/added/service', dtModel, httpOptions);
+    }
+    updateVoiceMailSettings(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/update/voicemail/setting', dtModel, httpOptions);
+    }
+    updateVoiceRecordSettings(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/utilities/ext/update/call/recording/setting', dtModel, httpOptions);
+    }
+    getManualLinks(deviceType) {
+        return `${environment.apiUrl}/landing/support/ur/user/manual/${deviceType}`;
+    }
+    updateSignupProfile(body) {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token') }) };
+        return this.http.put(environment.apiUrl + '/utilities/ext/ur/update/signup/profile', body, httpOptions);
+    }
+    getAdminSettings() {
+        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
+        return this.http.get(environment.apiUrl + '/admin/settings', httpOptions);
+    }
+    updateActions(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/admin/change/settings', dtModel, httpOptions);
+    }
+    updateValueAddedServices(token, dtModel) {
+        const params = {
+            'Content-Type': 'application/json',
+            'Auth-Key': "Bearer " + token
+        };
+        const httpOptions = { headers: new HttpHeaders(params) };
+        return this.http.post(environment.apiUrl + '/admin/value/added/service', dtModel, httpOptions);
+    }
+    deleteAdminUsers(token, userIds) {
+        const httpOptions = {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json',
+                'Auth-Key': 'Bearer ' + token
+            })
+        };
+        return this.http.delete(environment.apiUrl + `/admin/delete/value/usage/${userIds}`, httpOptions);
+    }
+    getUserInformation(twilioAuthId) {
+        const httpOptions = {
+            headers: new HttpHeaders({
+                'Content-Type': 'application/json',
+                'Auth-Key': 'Bearer ' + this.token
+            })
+        };
+        return this.http.get(environment.apiUrl + '/utilities/twilio/c2c/information/' + twilioAuthId, httpOptions);
+    }
+}
+ExtensionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExtensionService, deps: [{ token: i1.HttpClient }, { token: IpAddressService }], target: i0.ɵɵFactoryTarget.Injectable });
+ExtensionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExtensionService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ExtensionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: IpAddressService }]; } });
+
 class DialboxComponent {
-    constructor(twilioService, 
-    // private extService: ExtensionService,
+    constructor(twilioService, extService, 
     // private dialog: MatDialog,
-    // private ipService: IpAddressService,
-    // private extensionService: ExtensionService,
-    router) {
+    ipService, extensionService, router) {
         this.twilioService = twilioService;
+        this.extService = extService;
+        this.ipService = ipService;
+        this.extensionService = extensionService;
         this.router = router;
         this.isDialpadHidden = false;
         this.closeDialpadEvent = new EventEmitter();
@@ -260,7 +1462,6 @@ class DialboxComponent {
             msg: '',
             show: false
         };
-        this.token = '';
         this.showDedicatedPopup = false;
         this.newIncomingCalls = [];
         this.incomingCallsList = [];
@@ -522,22 +1723,24 @@ class DialboxComponent {
         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));
-    //       }
-    //     }
-    //   });
-    // }
+    getCallerIdList() {
+        this.extService.displayID(this.token || '').subscribe((res) => {
+            //this.callerIdList = res.callerIdList.filter(item => item.type === "C2C Softphone Number");
+            this.callerIdList = res.callerIdList.filter((item) => item.voiceFeature === true);
+            // this.callerIdList = res.callerIdList;
+            if (this.callerIdList.length == 1) {
+                this.selectedCallerId = this.callerIdList[0];
+            }
+            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') {
@@ -949,42 +2152,46 @@ class DialboxComponent {
             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 isCallerIdSet() {
+        try {
+            const tkn = localStorage.getItem('ext_token');
+            const res = await this.extService.fetchCallerId(tkn || '').toPromise();
+            if (res.status == 200) {
+                localStorage.setItem('trialOver', res.trialOver);
+                this.twilioService.isTrialOver.next(res.trialOver);
+                localStorage.setItem('paymentDue', res.paymentDue);
+                this.twilioService.isPaymentDue.next(res.paymentDue);
+            }
+            if (res.callerid) {
+                localStorage.setItem('callerID', res.callerid);
+                this.extService.changeMessage(res.callerid);
+            }
+            else {
+                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() {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            stream.getTracks().forEach(track => track.stop());
+            return true;
+        }
+        catch (error) {
+            if (error instanceof DOMException && error.name === 'NotAllowedError') {
+                return false;
+            }
+            else {
+                return false;
+            }
+        }
+    }
     async askForMicrophonePermission() {
         try {
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
@@ -995,17 +2202,17 @@ class DialboxComponent {
         }
     }
     // 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);
-    //       }
-    //     }
-    // }
+    async getToNumber(dialedNumber) {
+        if (dialedNumber[0] !== '+') {
+            // this is case when user geolocation dial code is on
+            let ipAddress = await this.ipService.getIpAddressInfo().toPromise();
+            const res = await this.twilioService.getToNumber(dialedNumber, ipAddress.address.countryCode).toPromise();
+            if (res.status == 200) {
+                this.toastTimeout = res.timeInterval * 1000;
+                await this.showNumberToast(res);
+            }
+        }
+    }
     isAlertEnable() {
         return localStorage.getItem('isAlertEnable');
     }
@@ -1049,21 +2256,21 @@ class DialboxComponent {
         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);
-    // }
+    getUserCallSetting() {
+        const tkn = localStorage.getItem('ext_token');
+        this.extService.fetchCallerId(tkn || '').subscribe((resp) => {
+            if (resp.status == 200) {
+                //this.callPrefernce = resp.userSetting;
+                this.callPreference = resp.callerid;
+                this.getCallerIdList();
+            }
+        });
+    }
+    onDedicatedNumSelect(id) {
+        this.selectedCallerId = id;
+        this.isCallerIdHidden = true;
+        this.extService.setCallerId(id);
+    }
     cancelDialNumber() {
         this.terminateCall = true;
         this.callNumberToast.show = false;
@@ -1102,11 +2309,11 @@ class DialboxComponent {
         //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);
-    // }
+    rejectNewIncomingCall(call) {
+        call.reject();
+        this.newIncomingCalls = this.newIncomingCalls.filter((item) => item.parameters['CallSid'] !== call.parameters['CallSid']);
+        this.incomingCallsList = this.incomingCallsList.filter((item) => item.parameters['CallSid'] !== call.parameters['CallSid']);
+    }
     newIncomingCallInitiated() {
         this.isCallInProgress = true;
         this.newIncomingCalls = [];
@@ -1138,12 +2345,12 @@ class DialboxComponent {
         }
     }
 }
-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"] }] });
+DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: IpAddressService }, { token: ExtensionService }, { token: i4.Router }], target: i0.ɵɵFactoryTarget.Component });
+DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { isDialpadHidden: "isDialpadHidden" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", numberDialed: "numberDialed" }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n    <!-- <app-call-progress *ngIf=\"isCallInProgress\"\r\n     (endCallEvent)=\"endCall()\"\r\n     (minimiseEvent) = \"onMinimise($event)\"\r\n     (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n     [newIncomingCallData]=\"newIncomingCallData\"\r\n     [newIncomingCallsList]=\"incomingCallsList\"\r\n     (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n      [callData]=\"callData\"></app-call-progress> -->\r\n    <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n      <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n        <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n          <div class=\"no-selection-alert\">\r\n            <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n            <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n            <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n          </div>\r\n        </div>\r\n        <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n          <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n            <div class=\"d-flex justify-content-between\">\r\n              <div class=\"flex-grow-1 my-auto text-left\">\r\n                You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n              </div>\r\n              <div class=\"text-right\">\r\n                <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n                <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n              </div>\r\n        \r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n          <div class=\"d-flex justify-content-between mt-2\">\r\n            <p></p>\r\n            <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n            </span>\r\n          </div>\r\n          <div class=\"input-box\">\r\n            <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n            <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n              <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n                <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n              </svg>        \r\n            </span>\r\n            <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n          </div>\r\n          <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n            <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n          </div>\r\n          <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n            <span>{{dialAlert.msg}}</span>\r\n          </div> -->\r\n          <div>\r\n            <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n              <div class=\"contact-img\">\r\n                <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n                <ng-template #alphaName>\r\n                  <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n                </ng-template>\r\n              </div>\r\n              <div class=\"contact-details\">\r\n                <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n                <p>{{contact.numbersList[0].number}}</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"wave-container\">\r\n          <svg\r\n            class=\"waves\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n            xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n            viewBox=\"0 24 150 28\"\r\n            preserveAspectRatio=\"none\"\r\n            shape-rendering=\"auto\"\r\n          >\r\n            <defs>\r\n              <path\r\n                id=\"gentle-wave\"\r\n                d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n              />\r\n            </defs>\r\n            <g class=\"parallax\">\r\n              <use\r\n                xlink:href=\"#gentle-wave\"\r\n                x=\"48\"\r\n                y=\"0\"\r\n                fill=\"rgba(255,255,255,0.7)\"\r\n              />\r\n              <use\r\n                xlink:href=\"#gentle-wave\"\r\n                x=\"48\"\r\n                y=\"3\"\r\n                fill=\"rgba(255,255,255,0.5)\"\r\n              />\r\n              <!-- <use\r\n                xlink:href=\"#gentle-wave\"\r\n                x=\"48\"\r\n                y=\"5\"\r\n                fill=\"rgba(255,255,255,0.3)\"\r\n              /> -->\r\n              <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n            </g>\r\n          </svg>\r\n        </div>\r\n      </div>\r\n      <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n        <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n        (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n        [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n         [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n          {{key.num}} \r\n          <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n            voicemail\r\n          </span>\r\n          <ng-template #otherThanOne>\r\n            <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n          </ng-template>\r\n        </button>\r\n      </div>\r\n      <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n        <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n          [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n          <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n            call\r\n          </span>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n        <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n          <div>\r\n            <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n            {{selectedCallerId?.number}}\r\n          </div>\r\n        </div>\r\n        <ng-template #askBlock>\r\n          <div class=\"shownCallerId\"  (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <h5 class=\"mb-0\">Select C2C number</h5>\r\n              <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n                <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n              </span> -->\r\n              <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n        <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n          <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n        </div>\r\n      </div>\r\n  \r\n      <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n      <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\"  [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n        <div style=\"display: flex; justify-content: space-between\">\r\n          <!-- <h4>Select C2C Softphone Number</h4> -->\r\n           <h4>Make outgoing call using</h4>\r\n          <span\r\n            class=\"material-symbols-outlined\"\r\n            style=\"cursor: pointer\"\r\n            (click)=\"isCallerIdHidden = true\"\r\n          >\r\n            close\r\n          </span>\r\n        </div>\r\n        <ul>\r\n          <ng-container *ngFor=\"let callerId of callerIdList\">\r\n            <!-- <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n              <div>\r\n                <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                {{callerId?.number}}\r\n              </div>\r\n              <span>{{callerId?.countryName}}</span>\r\n            </li> -->\r\n          </ng-container>\r\n        </ul>\r\n      </div>\r\n      </div>\r\n      <ng-template #noCallerIdMessage>\r\n        <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n        </span>\r\n      </ng-template>\r\n      <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n        <div class=\"card dedicatedNumPopup\">\r\n          <div class=\"card-header chooseDedicatedHeader\">\r\n            <h5>Choose C2C Number</h5>\r\n            <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n          </div>\r\n          <div class=\"card-body dedicatedNumList\">\r\n            <ul>\r\n              <ng-container *ngFor=\"let callerId of callerIdList\">\r\n                <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n                  <div>\r\n                    <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n                    {{callerId?.number}}\r\n                  </div>\r\n                  <span>{{callerId?.countryName}}</span>\r\n                </li>\r\n              </ng-container>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n        <div>\r\n          <div class=\"inc-user-img\">\r\n            <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n          </div>\r\n          \r\n        </div>\r\n        <div class=\"flex-grow-1\">\r\n          <!-- <h6 class=\"mb-1 font-weight-bold\">Incoming Call</h6> -->\r\n          <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n          <p>{{call.parameters.From}}</p>\r\n  \r\n          <!-- <p class=\"inc-user-name\">John Doe</p> \r\n          <p>+12337472489</p>\r\n          <p style=\"font-size: 12px;color:#d5d5d5 !important;margin-top:2px\">Call on +12264584100</p> -->\r\n  \r\n        </div>\r\n        <div class=\"d-flex\">\r\n          <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n            <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n              call\r\n            </span>\r\n          </button>\r\n          <!-- <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n            <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n              call_end\r\n            </span>\r\n          </button> -->\r\n        </div>\r\n       \r\n      </div>\r\n    </div>\r\n  </div>\r\n  ", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px;height:600px;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-dialbox', template: "<div 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: [{
+        }], ctorParameters: function () { return [{ type: TwilioService }, { type: ExtensionService }, { type: IpAddressService }, { type: ExtensionService }, { type: i4.Router }]; }, propDecorators: { isDialpadHidden: [{
                 type: Input
             }], closeDialpadEvent: [{
                 type: Output