@vgroup/dialbox 0.7.95 → 0.7.97

package/fesm2015/vgroup-dialbox.mjs

@@ -2464,6 +2464,10 @@ class CallProgressComponent {
                             this.showContactsPanel = false;
                             // No call in progress: reset the incoming-mute switch back to default (off).
                             this.twilioService.setIncomingMuted(false);
+                            // Call has fully ended: close the minimized bar too, otherwise its
+                            // mic/end-call buttons keep showing for a call that no longer exists.
+                            this.isMinimised = false;
+                            this.minimiseEvent.emit(false);
                             // this.isUnholdConferenceCall = false;
                             this.currentCallList = [];
                             this.currentCall = {};
@@ -2660,6 +2664,10 @@ class CallProgressComponent {
                     this.isConferenceCallHold = false;
                     // No call in progress: reset the incoming-mute switch back to default (off).
                     this.twilioService.setIncomingMuted(false);
+                    // Call has fully ended: close the minimized bar too, otherwise its
+                    // mic/end-call buttons keep showing for a call that no longer exists.
+                    this.isMinimised = false;
+                    this.minimiseEvent.emit(false);
                     this.stopTimer();
                     this.cdr.detectChanges();
                 }
@@ -2701,13 +2709,13 @@ class CallProgressComponent {
                     && (resData === null || resData === void 0 ? void 0 : resData.client) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'outgoing-call') || (this.deviceNumberList.includes(resData === null || resData === void 0 ? void 0 : resData.to) && (resData === null || resData === void 0 ? void 0 : resData.direction) == 'incoming-call' && !(resData === null || resData === void 0 ? void 0 : resData.businessNumber) && (resData === null || resData === void 0 ? void 0 : resData.host)) && (resData === null || resData === void 0 ? void 0 : resData.isLeft)));
                 this.showRingAnimation = true;
                 // 1️⃣ Get new token for same conference
-                const tokenData = yield this.getOutgoingCallToken(callInfo === null || callInfo === void 0 ? void 0 : callInfo.conferenceId);
+                const tokenData = rejoinParticipentInfo === null || rejoinParticipentInfo === void 0 ? void 0 : rejoinParticipentInfo.hostToken;
                 // 2️⃣ Reconnect device
                 const options = {
                     codecPreferences: ['opus', 'pcmu'],
                     closeProtection: true,
                 };
-                this.device = new Device(tokenData.token.value, options);
+                this.device = new Device(tokenData, options);
                 this.call = yield this.device.connect({
                     params: {
                         From: rejoinParticipentInfo.from,
@@ -3490,7 +3498,7 @@ class CallProgressComponent {
             this.isIncomingCallBtnDisable = true;
             this.cdr.detectChanges();
             let intervalId = setInterval(() => {
-                var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c, _d, _e, _f, _g;
                 const callToAccept = this.twilioService.getIncomingCallById(data === null || data === void 0 ? void 0 : data.clientSid);
                 if ((_a = callToAccept === null || callToAccept === void 0 ? void 0 : callToAccept.parameters) === null || _a === void 0 ? void 0 : _a.CallSid) {
                     clearInterval(intervalId);
@@ -3542,6 +3550,20 @@ class CallProgressComponent {
                     callToAccept.on('reject', () => {
                         handleTwilioConnectFailure('Call could not be connected.');
                     });
+                    // Registered immediately (not after the accept() -> setIncomingCallStatus BE
+                    // round-trip below) so a far-end hangup landing in that window can't race past
+                    // this listener. If it did, acceptedCallList would stay non-empty forever, which
+                    // permanently blocks teardownSpareDevicesIfIdle(), the idle device.disconnectAll()
+                    // reset in dialbox.component.ts, and twilioService's self-recovery guards.
+                    const acceptedSid = (_b = callToAccept.parameters) === null || _b === void 0 ? void 0 : _b.CallSid;
+                    callToAccept.on('disconnect', () => {
+                        if (acceptedSid) {
+                            this.acceptedCallList = this.acceptedCallList.filter(c => c.callSid !== acceptedSid);
+                            this.twilioService.acceptedCallList = this.twilioService.acceptedCallList.filter((c) => { var _a; return ((_a = c.parameters) === null || _a === void 0 ? void 0 : _a.CallSid) !== acceptedSid; });
+                            this.twilioService.releaseConcurrentCallDevice(acceptedSid);
+                        }
+                        this.twilioService.teardownSpareDevicesIfIdle();
+                    });
                     callToAccept.on('accept', () => {
                         var _a;
                         console.log('call accepted sucessfully !!!!!!!');
@@ -3564,7 +3586,7 @@ class CallProgressComponent {
                             conferenceId: (data === null || data === void 0 ? void 0 : data.conferenceId) || 'no'
                         };
                         this.extensionService.setIncomingCallStatus(payload).subscribe((res) => __awaiter(this, void 0, void 0, function* () {
-                            var _b, _c, _d, _e, _f;
+                            var _b, _c, _d, _e;
                             if (res.status == 200) {
                                 this.isConnectingIncomingCallId = '';
                                 this.conferenceCallIDForParticipantList = data === null || data === void 0 ? void 0 : data.conferenceId;
@@ -3576,19 +3598,10 @@ class CallProgressComponent {
                                 this.twilioService.isConnectingIncomingCallId.next('');
                                 this.incomeingCallSocketService.pause();
                                 this.twilioService.onConcurrentCallAccepted(callToAccept);
-                                const acceptedSid = (_c = callToAccept.parameters) === null || _c === void 0 ? void 0 : _c.CallSid;
-                                callToAccept.on('disconnect', () => {
-                                    if (acceptedSid) {
-                                        this.acceptedCallList = this.acceptedCallList.filter(c => c.callSid !== acceptedSid);
-                                        this.twilioService.acceptedCallList = this.twilioService.acceptedCallList.filter((c) => { var _a; return ((_a = c.parameters) === null || _a === void 0 ? void 0 : _a.CallSid) !== acceptedSid; });
-                                        this.twilioService.releaseConcurrentCallDevice(acceptedSid);
-                                    }
-                                    this.twilioService.teardownSpareDevicesIfIdle();
-                                });
                                 this.cdr.detectChanges();
                             }
                             else {
-                                const sid = (_d = callToAccept.parameters) === null || _d === void 0 ? void 0 : _d.CallSid;
+                                const sid = (_c = callToAccept.parameters) === null || _c === void 0 ? void 0 : _c.CallSid;
                                 this.acceptedCallList = this.acceptedCallList.filter(c => c.callSid !== sid);
                                 this.twilioService.acceptedCallList = this.twilioService.acceptedCallList.filter((c) => { var _a; return ((_a = c.parameters) === null || _a === void 0 ? void 0 : _a.CallSid) !== sid; });
                                 this.twilioService.isConnectingIncomingCallId.next('');
@@ -3602,7 +3615,7 @@ class CallProgressComponent {
                                 this.incomeingCallSocketService.pause();
                                 this.endCallEvent.emit(data);
                                 this.cdr.detectChanges();
-                                swal("Error", ((_f = (_e = res === null || res === void 0 ? void 0 : res.message) === null || _e === void 0 ? void 0 : _e.join) === null || _f === void 0 ? void 0 : _f.call(_e, "<br/>")) || 'Internal Server Error', "error");
+                                swal("Error", ((_e = (_d = res === null || res === void 0 ? void 0 : res.message) === null || _d === void 0 ? void 0 : _d.join) === null || _e === void 0 ? void 0 : _e.call(_d, "<br/>")) || 'Internal Server Error', "error");
                             }
                             setTimeout(() => {
                                 this.isUnholdConferenceCall = false;
@@ -3612,9 +3625,9 @@ class CallProgressComponent {
                     callToAccept.accept();
                     this.cdr.detectChanges();
                 }
-                else if (((_d = (_c = (_b = this.missCallInfo) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.recordId) == (data === null || data === void 0 ? void 0 : data.id) && !((_e = callToAccept.parameters) === null || _e === void 0 ? void 0 : _e.CallSid)) {
+                else if (((_e = (_d = (_c = this.missCallInfo) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.recordId) == (data === null || data === void 0 ? void 0 : data.id) && !((_f = callToAccept.parameters) === null || _f === void 0 ? void 0 : _f.CallSid)) {
                     clearInterval(intervalId);
-                    const sid = (_f = callToAccept.parameters) === null || _f === void 0 ? void 0 : _f.CallSid;
+                    const sid = (_g = callToAccept.parameters) === null || _g === void 0 ? void 0 : _g.CallSid;
                     this.isConnectingIncomingCallId = '';
                     this.isConnectingIncomingCallId = '';
                     this.acceptedCallList = this.acceptedCallList.filter(c => c.callSid !== sid);
@@ -4920,7 +4933,7 @@ class DialboxComponent {
                 }
                 // Filter out conferences with no participants
                 incomingCallData = (incomingCallData === null || incomingCallData === void 0 ? void 0 : incomingCallData.length) > 0
-                    ? incomingCallData.filter((item) => { var _a; return ((_a = item.participants) === null || _a === void 0 ? void 0 : _a.length) > 0; })
+                    ? incomingCallData.filter((item) => { var _a; return ((_a = item.participants) === null || _a === void 0 ? void 0 : _a.length) > 0 && item.callSource == 'Dialpad'; })
                     : [];
                 // All conferenceIds received from socket this tick
                 const socketConferenceIds = incomingCallData.map((c) => c.conferenceId);
@@ -6037,10 +6050,10 @@ class DialboxComponent {
     }
 }
 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: i0.ChangeDetectorRef }, { token: i4.Router }, { token: IncomeingCallSocketService }], target: i0.ɵɵFactoryTarget.Component });
-DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", userId: "userId", callAction: "callAction", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData", incomingCallnotification: "incomingCallnotification", updatedTwilioToken: "updatedTwilioToken" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", conferenceCallList: "conferenceCallList", numberDialed: "numberDialed" }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)", "window:unload": "unloadHandler()" } }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n    (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n    [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\" [missCallInfo]=\"missCallInfo\"\r\n    (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n    [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\"\r\n    [newCallConference]=\"newCallConference\" [userSettingInfo]=\"userSettingInfo\"\r\n    [cancelConnectingAction]=\"cancelConnectingAction\"\r\n    [outgoingContactName]=\"outgoingContactName\"\r\n    [incomingFromImage]=\"incomingFromImage\"\r\n    (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershown)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n  </lib-call-progress>\r\n\r\n    <div class=\"loader-wrapper outgoing-call-loader\" *ngIf=\"isLoadershow\">\r\n      <div class=\"active-call\" style=\"display: flex; flex-direction: column; position: relative;\">\r\n        <div class=\"call-animation call-animation-play\">\r\n          <img class=\"avatar-img\" [src]=\"contactImgForLoader\" alt=\"\" />\r\n        </div>\r\n        <div class=\"callerDetails\">\r\n          <h1 style=\"margin-top: 8px;\">Connecting...</h1>\r\n          <p style=\"text-transform: capitalize;\">{{ contactNameForLoader || dialedNumber }}</p>\r\n        </div>\r\n    \r\n        <div class=\"call-action-btns\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <button class=\"call-btn end-call-btn\" (click)=\"cancelConnectingCall()\">\r\n              <span class=\"material-symbols-outlined\"> call_end </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n    *ngIf=\"(!isCallInProgress && !incomingCallsList.length) && !isLoadershow\" 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\">{{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            </div>\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\">\r\n              <path\r\n                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\" />\r\n            </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\"\r\n            (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\"\r\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n              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\"\r\n                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\"\r\n            ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n              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 style=\"height: 119px; overflow: auto;\">\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.selectedNumber.number}}</p>\r\n            </div>\r\n          </div>\r\n          <div class=\"contact-card\" *ngIf=\"!filteredContactList.length && dialedNumber.length > 2 && !isValidationMessageShow\">\r\n            <div class=\"no-contact-message\">\r\n              No Contacts Found\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n          <defs>\r\n            <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n        [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n        (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 :\r\n            '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n      (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=\"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\"\r\n        [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 class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\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}\"\r\n              (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\r\n          routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n          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}\"\r\n                (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>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.no-contact-message{width:100%;margin:auto 16px;color:#fff}.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}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.outgoing-call-loader{display:flex;flex-direction:column;justify-content:center;align-items:center}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;display:flex;flex-direction:column;align-items:center}.callerDetails h1,.callerDetails p{margin-top:8px;color:#fff}.call-action-btns{text-align:center;margin-top:90px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}::ng-deep .swal2-container.swal-reload-on-top{z-index:10000000000000!important}\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"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "selectedCallerId", "newIncomingCallData", "newIncomingCallsList", "callerIdList", "newCallConference", "missCallInfo", "userSettingInfo", "deviceId", "callAction", "conferenceCallInfo", "incomingFromImage", "cancelConnectingAction", "outgoingContactName"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated", "isLoadershown", "endIncomingCallEvent"] }, { kind: "directive", type: ShortPressDirective, selector: "[shortPress]", outputs: ["shortPress"] }, { kind: "directive", type: LongPressDirective, selector: "[longPress]", outputs: ["longPress"] }] });
+DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", userId: "userId", callAction: "callAction", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData", incomingCallnotification: "incomingCallnotification", updatedTwilioToken: "updatedTwilioToken" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", conferenceCallList: "conferenceCallList", numberDialed: "numberDialed" }, host: { listeners: { "window:beforeunload": "beforeUnloadHandler($event)", "window:unload": "unloadHandler()" } }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n    (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n    [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\" [missCallInfo]=\"missCallInfo\"\r\n    (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n    [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\"\r\n    [newCallConference]=\"newCallConference\" [userSettingInfo]=\"userSettingInfo\"\r\n    [cancelConnectingAction]=\"cancelConnectingAction\"\r\n    [outgoingContactName]=\"outgoingContactName\"\r\n    [incomingFromImage]=\"incomingFromImage\"\r\n    (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershown)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n  </lib-call-progress>\r\n\r\n    <div class=\"loader-wrapper outgoing-call-loader\" *ngIf=\"isLoadershow\">\r\n      <div class=\"active-call\" style=\"display: flex; flex-direction: column; position: relative;\">\r\n        <div class=\"call-animation call-animation-play\">\r\n          <img class=\"avatar-img\" [src]=\"contactImgForLoader\" alt=\"\" />\r\n        </div>\r\n        <div class=\"callerDetails\">\r\n          <h1 style=\"margin-top: 8px;\">Connecting...</h1>\r\n          <p style=\"text-transform: capitalize;\">{{ contactNameForLoader || dialedNumber }}</p>\r\n        </div>\r\n    \r\n        <div class=\"call-action-btns\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <button class=\"call-btn end-call-btn\" disabled style=\"visibility: hidden;\" (click)=\"cancelConnectingCall()\">\r\n              <span class=\"material-symbols-outlined\"> call_end </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n    *ngIf=\"(!isCallInProgress && !incomingCallsList.length) && !isLoadershow\" 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\">{{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            </div>\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\">\r\n              <path\r\n                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\" />\r\n            </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\"\r\n            (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\"\r\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n              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\"\r\n                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\"\r\n            ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n              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 style=\"height: 119px; overflow: auto;\">\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.selectedNumber.number}}</p>\r\n            </div>\r\n          </div>\r\n          <div class=\"contact-card\" *ngIf=\"!filteredContactList.length && dialedNumber.length > 2 && !isValidationMessageShow\">\r\n            <div class=\"no-contact-message\">\r\n              No Contacts Found\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n          <defs>\r\n            <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n        [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n        (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 :\r\n            '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n      (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=\"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\"\r\n        [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 class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\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}\"\r\n              (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\r\n          routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n          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}\"\r\n                (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>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.no-contact-message{width:100%;margin:auto 16px;color:#fff}.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}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.outgoing-call-loader{display:flex;flex-direction:column;justify-content:center;align-items:center}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;display:flex;flex-direction:column;align-items:center}.callerDetails h1,.callerDetails p{margin-top:8px;color:#fff}.call-action-btns{text-align:center;margin-top:90px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}::ng-deep .swal2-container.swal-reload-on-top{z-index:10000000000000!important}\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"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "selectedCallerId", "newIncomingCallData", "newIncomingCallsList", "callerIdList", "newCallConference", "missCallInfo", "userSettingInfo", "deviceId", "callAction", "conferenceCallInfo", "incomingFromImage", "cancelConnectingAction", "outgoingContactName"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated", "isLoadershown", "endIncomingCallEvent"] }, { kind: "directive", type: ShortPressDirective, selector: "[shortPress]", outputs: ["shortPress"] }, { kind: "directive", type: LongPressDirective, selector: "[longPress]", outputs: ["longPress"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n    (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n    [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\" [missCallInfo]=\"missCallInfo\"\r\n    (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n    [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\"\r\n    [newCallConference]=\"newCallConference\" [userSettingInfo]=\"userSettingInfo\"\r\n    [cancelConnectingAction]=\"cancelConnectingAction\"\r\n    [outgoingContactName]=\"outgoingContactName\"\r\n    [incomingFromImage]=\"incomingFromImage\"\r\n    (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershown)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n  </lib-call-progress>\r\n\r\n    <div class=\"loader-wrapper outgoing-call-loader\" *ngIf=\"isLoadershow\">\r\n      <div class=\"active-call\" style=\"display: flex; flex-direction: column; position: relative;\">\r\n        <div class=\"call-animation call-animation-play\">\r\n          <img class=\"avatar-img\" [src]=\"contactImgForLoader\" alt=\"\" />\r\n        </div>\r\n        <div class=\"callerDetails\">\r\n          <h1 style=\"margin-top: 8px;\">Connecting...</h1>\r\n          <p style=\"text-transform: capitalize;\">{{ contactNameForLoader || dialedNumber }}</p>\r\n        </div>\r\n    \r\n        <div class=\"call-action-btns\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <button class=\"call-btn end-call-btn\" (click)=\"cancelConnectingCall()\">\r\n              <span class=\"material-symbols-outlined\"> call_end </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n    *ngIf=\"(!isCallInProgress && !incomingCallsList.length) && !isLoadershow\" 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\">{{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            </div>\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\">\r\n              <path\r\n                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\" />\r\n            </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\"\r\n            (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\"\r\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n              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\"\r\n                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\"\r\n            ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n              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 style=\"height: 119px; overflow: auto;\">\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.selectedNumber.number}}</p>\r\n            </div>\r\n          </div>\r\n          <div class=\"contact-card\" *ngIf=\"!filteredContactList.length && dialedNumber.length > 2 && !isValidationMessageShow\">\r\n            <div class=\"no-contact-message\">\r\n              No Contacts Found\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n          <defs>\r\n            <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n        [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n        (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 :\r\n            '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n      (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=\"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\"\r\n        [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 class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\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}\"\r\n              (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\r\n          routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n          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}\"\r\n                (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>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.no-contact-message{width:100%;margin:auto 16px;color:#fff}.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}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.outgoing-call-loader{display:flex;flex-direction:column;justify-content:center;align-items:center}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;display:flex;flex-direction:column;align-items:center}.callerDetails h1,.callerDetails p{margin-top:8px;color:#fff}.call-action-btns{text-align:center;margin-top:90px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}::ng-deep .swal2-container.swal-reload-on-top{z-index:10000000000000!important}\n"] }]
+            args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n  <lib-call-progress *ngIf=\"isCallInProgress\" (endCallEvent)=\"endCall()\" (minimiseEvent)=\"onMinimise($event)\"\r\n    (incomingCallInitiated)=\"newIncomingCallInitiated()\" [newIncomingCallData]=\"newIncomingCallData\"\r\n    [deviceId]=\"deviceId\" [newIncomingCallsList]=\"incomingCallsList\" [missCallInfo]=\"missCallInfo\"\r\n    (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\" [selectedCallerId]=\"selectedCallerId\"\r\n    [callerIdList]=\"callerIdList\" [callAction]=\"callAction\" [conferenceCallInfo]=\"conferenceCallInfo\"\r\n    [newCallConference]=\"newCallConference\" [userSettingInfo]=\"userSettingInfo\"\r\n    [cancelConnectingAction]=\"cancelConnectingAction\"\r\n    [outgoingContactName]=\"outgoingContactName\"\r\n    [incomingFromImage]=\"incomingFromImage\"\r\n    (endIncomingCallEvent)=\"endIncomingCall($event)\" (isLoadershown)=\"onLoadershow($event)\" [callData]=\"callData\">\r\n  </lib-call-progress>\r\n\r\n    <div class=\"loader-wrapper outgoing-call-loader\" *ngIf=\"isLoadershow\">\r\n      <div class=\"active-call\" style=\"display: flex; flex-direction: column; position: relative;\">\r\n        <div class=\"call-animation call-animation-play\">\r\n          <img class=\"avatar-img\" [src]=\"contactImgForLoader\" alt=\"\" />\r\n        </div>\r\n        <div class=\"callerDetails\">\r\n          <h1 style=\"margin-top: 8px;\">Connecting...</h1>\r\n          <p style=\"text-transform: capitalize;\">{{ contactNameForLoader || dialedNumber }}</p>\r\n        </div>\r\n    \r\n        <div class=\"call-action-btns\">\r\n          <div class=\"d-flex justify-content-center\">\r\n            <button class=\"call-btn end-call-btn\" disabled style=\"visibility: hidden;\" (click)=\"cancelConnectingCall()\">\r\n              <span class=\"material-symbols-outlined\"> call_end </span>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\"\r\n    *ngIf=\"(!isCallInProgress && !incomingCallsList.length) && !isLoadershow\" 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\">{{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            </div>\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\">\r\n              <path\r\n                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\" />\r\n            </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\"\r\n            (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\"\r\n              xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\"\r\n              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\"\r\n                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\"\r\n            ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i\r\n              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 style=\"height: 119px; overflow: auto;\">\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.selectedNumber.number}}</p>\r\n            </div>\r\n          </div>\r\n          <div class=\"contact-card\" *ngIf=\"!filteredContactList.length && dialedNumber.length > 2 && !isValidationMessageShow\">\r\n            <div class=\"no-contact-message\">\r\n              No Contacts Found\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"wave-container\">\r\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n          viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n          <defs>\r\n            <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n          </defs>\r\n          <g class=\"parallax\">\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n            <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n          </g>\r\n        </svg>\r\n      </div>\r\n    </div>\r\n    <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n      <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\" (keydown.enter)=\"onEnter(key.num)\"\r\n        [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\" [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress\r\n        (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 :\r\n            '&nbsp;'}}</span>\r\n        </ng-template>\r\n      </button>\r\n    </div>\r\n    <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\"\r\n      (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=\"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\"\r\n        [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 class=\"material-symbols-outlined\" style=\"cursor: pointer\" (click)=\"isCallerIdHidden = true\">\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}\"\r\n              (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\r\n          routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\"\r\n          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}\"\r\n                (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>\r\n</div>", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!important;height:600px!important;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.no-contact-message{width:100%;margin:auto 16px;color:#fff}.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}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;border-radius:50%}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px}.loader{border:4px solid rgb(123 122 122 / 87%);border-left-color:transparent;width:36px;height:36px;animation:spin89345 1s linear infinite;position:absolute;top:50%;left:44%;z-index:100000}.loader-wrapper{width:320px;height:600px;z-index:100000;display:block;position:absolute;border-radius:31px}@keyframes spin89345{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.outgoing-call-loader{display:flex;flex-direction:column;justify-content:center;align-items:center}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;display:flex;flex-direction:column;align-items:center}.callerDetails h1,.callerDetails p{margin-top:8px;color:#fff}.call-action-btns{text-align:center;margin-top:90px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.call-sec-btn,.mic-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226;width:50px;height:50px}.mic-btn{padding:5px;width:37px;height:37px}::ng-deep .swal2-container.swal-reload-on-top{z-index:10000000000000!important}\n"] }]
         }], ctorParameters: function () { return [{ type: TwilioService }, { type: ExtensionService }, { type: IpAddressService }, { type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: i4.Router }, { type: IncomeingCallSocketService }]; }, propDecorators: { autoOpenOnIncoming: [{
                 type: Input
             }], contactInfo: [{