@vgroup/dialbox 0.0.25 → 0.0.27

package/fesm2015/vgroup-dialbox.mjs

@@ -15,7 +15,7 @@ import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Device as Device$1 } from '@twilio/voice-sdk';
+import { Device } from '@twilio/voice-sdk';
 
 const keypad = [
     {
@@ -115,61 +115,13 @@ class TwilioService {
         this.isAvailableNumber = new BehaviorSubject(false);
         this.callerIdList = new BehaviorSubject([]);
         this.triggerSMSReload = new BehaviorSubject(false);
-        this.initializeTwilioDevice();
-    }
-    // Initialize Twilio device and set up event listeners
-    initializeTwilioDevice() {
-        // Get the Twilio token from localStorage
-        const token = localStorage.getItem('twilio_token');
-        if (!token) {
-            console.error('Twilio token not found in localStorage');
-            return;
-        }
-        // Initialize the Twilio Device
-        // @ts-ignore - We'll handle the device setup
-        this.device = new Device(token, {
-            codecPreferences: ['opus', 'pcmu'],
-            debug: true
-        });
-        // Set up device event listeners
-        this.device.on('ready', (device) => {
-            console.log('Twilio Device Ready');
-        });
-        this.device.on('error', (error) => {
-            console.error('Twilio Device Error:', error);
-            this.currentCallState.next('error');
-        });
-        // Handle incoming calls
-        this.device.on('incoming', (call) => {
-            console.log('Incoming call:', call);
-            this.currentCall.next(call);
-            this.currentCallState.next('incoming');
-            this.callType.next('INCOMING');
-            // Set up call event handlers
-            call.on('accept', () => {
-                console.log('Call accepted');
-                this.currentCallState.next('in-progress');
-                this.isIncomingCallPicked.next(true);
-            });
-            call.on('disconnect', () => {
-                console.log('Call disconnected');
-                this.currentCall.next(null);
-                this.currentCallState.next('none');
-                this.isIncomingCallPicked.next(false);
-            });
-            call.on('reject', () => {
-                console.log('Call rejected');
-                this.currentCall.next(null);
-                this.currentCallState.next('none');
-            });
-        });
-    }
-    // Update Twilio token when needed
-    updateToken(token) {
-        if (this.device) {
-            this.device.updateToken(token);
-        }
     }
+    // onIncomingCall(){
+    //   this.device.on('incoming', (call:any) => {
+    //     console.log(call);
+    //     //call.accept();
+    //   });
+    // }
     saveContact(payload) {
         const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Auth-Key': "Bearer " + localStorage.getItem('ext_token') }) };
         return this.http.post(environment.apiUrl + '/utilities/phonebook/add/contacts/manually', payload, httpOptions);
@@ -1494,22 +1446,6 @@ class IncomingCallComponent {
                     if (!call.parameters) {
                         call.parameters = {};
                     }
-                    // Fetch user information when call is received
-                    if (this.twilioAuthId) {
-                        this.extensionService.getUserInformation(this.twilioAuthId).subscribe({
-                            next: (userInfo) => {
-                                console.log('User information:', userInfo);
-                                // Update the call data with user information
-                                if (userInfo && userInfo.data) {
-                                    this.incomingCallData = Object.assign(Object.assign({}, this.incomingCallData), { callerInfo: userInfo.data });
-                                    this.selectedIncomingCallInfo.emit(this.incomingCallData);
-                                }
-                            },
-                            error: (error) => {
-                                console.error('Error fetching user information:', error);
-                            }
-                        });
-                    }
                     this.sendIPforIncomingCall(this.twilioAuthId, '');
                     call.on('cancel', () => {
                         if (this.incomingCallData && this.incomingCallData.parameters && this.incomingCallData.parameters.CallSid) {
@@ -1652,10 +1588,10 @@ class IncomingCallComponent {
     }
 }
 IncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, deps: [{ token: ExtensionService }, { token: TwilioService }], target: i0.ɵɵFactoryTarget.Component });
-IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n    {{newIncomingCallsList | json}}\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\">\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">\n                    {{data | json}}\n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.parameters?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n                    <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                    <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                </button>\n                <button class=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\n          </div>\n          </div>\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:680px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:645px}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px;span {color: white; line-height: unset !important;}}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }] });
+IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n    {{newIncomingCallsList | json}}\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\">\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">\n                    {{data | json}}\n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\"  (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.parameters?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.parameters?.isCallConnected\"  (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n                    <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                    <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                </button>\n                <button class=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\n          </div>\n          </div>\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n    {{newIncomingCallsList | json}}\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\">\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">\n                    {{data | json}}\n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.parameters?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.parameters?.isCallConnected\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n                    <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                    <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                </button>\n                <button class=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\n          </div>\n          </div>\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:680px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:645px}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px;span {color: white; line-height: unset !important;}}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}\n"] }]
+            args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n    {{newIncomingCallsList | json}}\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\">\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">\n                    {{data | json}}\n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\"  (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.parameters?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.parameters?.isCallConnected\"  (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n                    <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                    <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                </button>\n                <button class=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\n          </div>\n          </div>\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: ExtensionService }, { type: TwilioService }]; }, propDecorators: { incomingCallData: [{
                 type: Input
             }], newIncomingCallsList: [{
@@ -1789,7 +1725,7 @@ class CallProgressComponent {
                 codecPreferences: ['opus', 'pcmu'],
                 closeProtection: true,
             };
-            this.device = new Device$1(token.value, options);
+            this.device = new Device(token.value, options);
             this.call = yield this.device.connect({
                 params: {
                     From: callData.from,