@vgroup/dialbox 0.1.82 → 0.1.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2020/lib/components/call-progress/call-progress.component.mjs +37 -9
  2. package/esm2020/lib/components/call-progress/incoming-call/incoming-call.component.mjs +6 -3
  3. package/fesm2015/vgroup-dialbox.mjs +45 -15
  4. package/fesm2015/vgroup-dialbox.mjs.map +1 -1
  5. package/fesm2020/vgroup-dialbox.mjs +45 -15
  6. package/fesm2020/vgroup-dialbox.mjs.map +1 -1
  7. package/lib/components/call-progress/call-progress.component.d.ts +4 -1
  8. package/lib/components/call-progress/incoming-call/incoming-call.component.d.ts +2 -1
  9. package/package.json +1 -1
package/fesm2020/vgroup-dialbox.mjs CHANGED
@@ -7,13 +7,13 @@ import * as i1 from '@angular/common/http';
7
7
  import { HttpHeaders, HttpParams, HttpClientModule } from '@angular/common/http';
8
8
  import { catchError, switchMap, map, tap, shareReplay } from 'rxjs/operators';
9
9
  import { Device } from '@twilio/voice-sdk';
10
- import * as i3$1 from '@angular/material/dialog';
10
+ import * as i3 from '@angular/material/dialog';
11
11
  import { MAT_DIALOG_DATA } from '@angular/material/dialog';
12
12
  import * as i5 from '@angular/router';
13
13
  import { RouterLink, RouterModule } from '@angular/router';
14
14
  import * as i4 from '@angular/common';
15
15
  import { CommonModule } from '@angular/common';
16
- import * as i3 from '@angular/forms';
16
+ import * as i4$1 from '@angular/forms';
17
17
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
18
18
  import { BrowserModule } from '@angular/platform-browser';
19
19
 
@@ -1565,6 +1565,7 @@ class IncomingCallComponent {
1565
1565
  this.extensionService = extensionService;
1566
1566
  this.twilioService = twilioService;
1567
1567
  this.notificationSerivce = notificationSerivce;
1568
+ this.isConcurrentIncoming = false;
1568
1569
  this.showRingAnimation = true;
1569
1570
  this.selectedIncomingCall = {};
1570
1571
  this.dedicatedNum = '';
@@ -1849,16 +1850,18 @@ class IncomingCallComponent {
1849
1850
  }
1850
1851
  }
1851
1852
  IncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, deps: [{ token: ExtensionService }, { token: TwilioService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
1852
- IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1\">\n <div style=\"display: flex; flex-direction: column; padding-left: 14rem;\">\n <div class=\"callToNum\">Incoming call on <br/><span>{{dedicatedNum}}</span></div>\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || '-'}}</h1>\n <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p>\n </div>\n \n <!-- <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div> -->\n <div class=\"call-action-btns\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [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 <div class=\"record-btn-container \">\n <button class=\"record-btn start-stop\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"\">\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\n </button>\n </div>\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"call-container\" style=\"width: 100%; left: 116px;\" *ngIf=\"newIncomingCallsList?.length > 1\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\" >\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \n <div class=\"p-2 \">\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n <div class=\"img\">\n <img class=\"avatar-img-wrapper\" [src]=\"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\" *ngIf=\"!data?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n </button>\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.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 <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"data?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"\">\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\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\" \n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\n <i class=\"fa fa-angle-right\"></i>\n </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?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.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 <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\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:752px!important;height:646px!important;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:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.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;display:flex;justify-content:center;align-items: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}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1853
+ IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId", isConcurrentIncoming: "isConcurrentIncoming" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1\">\n <div style=\"display: flex; flex-direction: column; padding-left: 14rem;\">\n <div class=\"callToNum\">Incoming call on <br/><span>{{dedicatedNum}}</span></div>\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || '-'}}</h1>\n <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p>\n </div>\n \n <!-- <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div> -->\n <div class=\"call-action-btns\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [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 <div class=\"record-btn-container \">\n <button class=\"record-btn start-stop\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"\">\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\n </button>\n </div>\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"call-container\" style=\"width: 100%; left: 116px;\" *ngIf=\"isConcurrentIncoming || newIncomingCallsList?.length > 1\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\" >\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \n <div class=\"p-2 \">\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n <div class=\"img\">\n <img class=\"avatar-img-wrapper\" [src]=\"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\" *ngIf=\"!data?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n </button>\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.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 <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"data?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"\">\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\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\" \n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\n <i class=\"fa fa-angle-right\"></i>\n </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?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.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 <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\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:752px!important;height:646px!important;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:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.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;display:flex;justify-content:center;align-items: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}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
1853
1854
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, decorators: [{
1854
1855
  type: Component,
1855
- args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1\">\n <div style=\"display: flex; flex-direction: column; padding-left: 14rem;\">\n <div class=\"callToNum\">Incoming call on <br/><span>{{dedicatedNum}}</span></div>\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || '-'}}</h1>\n <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p>\n </div>\n \n <!-- <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div> -->\n <div class=\"call-action-btns\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [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 <div class=\"record-btn-container \">\n <button class=\"record-btn start-stop\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"\">\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\n </button>\n </div>\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"call-container\" style=\"width: 100%; left: 116px;\" *ngIf=\"newIncomingCallsList?.length > 1\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\" >\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \n <div class=\"p-2 \">\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n <div class=\"img\">\n <img class=\"avatar-img-wrapper\" [src]=\"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\" *ngIf=\"!data?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n </button>\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.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 <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"data?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"\">\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\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\" \n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\n <i class=\"fa fa-angle-right\"></i>\n </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?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.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 <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\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:752px!important;height:646px!important;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:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.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;display:flex;justify-content:center;align-items: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}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"] }]
1856
+ args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1\">\n <div style=\"display: flex; flex-direction: column; padding-left: 14rem;\">\n <div class=\"callToNum\">Incoming call on <br/><span>{{dedicatedNum}}</span></div>\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || '-'}}</h1>\n <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p>\n </div>\n \n <!-- <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div> -->\n <div class=\"call-action-btns\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [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 <div class=\"record-btn-container \">\n <button class=\"record-btn start-stop\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"\">\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\n </button>\n </div>\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"call-container\" style=\"width: 100%; left: 116px;\" *ngIf=\"isConcurrentIncoming || newIncomingCallsList?.length > 1\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\" >\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \n <div class=\"p-2 \">\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n <div class=\"img\">\n <img class=\"avatar-img-wrapper\" [src]=\"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\" *ngIf=\"!data?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n </button>\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.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 <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"data?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"\">\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\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\" \n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\n <i class=\"fa fa-angle-right\"></i>\n </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?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.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 <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\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:752px!important;height:646px!important;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:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.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;display:flex;justify-content:center;align-items: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}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:48px;height:48px!important;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn-side{border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;width:48px;height:48px;background-color:#fff;border-radius:30px}.record-btn.pause-resume{border:none;border-radius:50%;width:48px;height:48px;background:white;display:flex;align-items:center;justify-content:center}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}\n"] }]
1856
1857
  }], ctorParameters: function () { return [{ type: ExtensionService }, { type: TwilioService }, { type: NotificationService }]; }, propDecorators: { incomingCallData: [{
1857
1858
  type: Input
1858
1859
  }], newIncomingCallsList: [{
1859
1860
  type: Input
1860
1861
  }], deviceId: [{
1861
1862
  type: Input
1863
+ }], isConcurrentIncoming: [{
1864
+ type: Input
1862
1865
  }], closeIncomingCallDiv: [{
1863
1866
  type: Output
1864
1867
  }], incomingCallsNewList: [{
@@ -1868,9 +1871,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
1868
1871
  }] } });
1869
1872
 
1870
1873
  class CallProgressComponent {
1871
- constructor(extensionService, cdr) {
1874
+ constructor(extensionService, cdr, twilioService) {
1872
1875
  this.extensionService = extensionService;
1873
1876
  this.cdr = cdr;
1877
+ this.twilioService = twilioService;
1874
1878
  this.newIncomingCallsList = [];
1875
1879
  this.endCallEvent = new EventEmitter();
1876
1880
  this.incomingCallsNewInfo = new EventEmitter();
@@ -1894,6 +1898,7 @@ class CallProgressComponent {
1894
1898
  this.recordCall = false;
1895
1899
  this.callStatus = 'ringing';
1896
1900
  this.showContactsPanel = false;
1901
+ this.isConcurrentIncoming = false;
1897
1902
  this.contacts = [
1898
1903
  { name: 'Pamela Cox', title: 'Product Designer', img: 'assets/images/user.jpg' },
1899
1904
  { name: 'Roger S. Wood', title: 'JavaScript Programmer', img: 'assets/images/user.jpg' },
@@ -1907,6 +1912,26 @@ class CallProgressComponent {
1907
1912
  }
1908
1913
  ngOnInit() {
1909
1914
  console.log('Call Progress Component');
1915
+ try {
1916
+ this.twilioService.currentCall.subscribe((incoming) => {
1917
+ if (!incoming) {
1918
+ return;
1919
+ }
1920
+ // If there is an ongoing call, surface the overlay for the new inbound call
1921
+ if (this.call && this.call.status() === 'open') {
1922
+ this.incomingCallDiv = true;
1923
+ this.isConcurrentIncoming = true;
1924
+ // add to list if not present
1925
+ const exists = (this.newIncomingCallsList || []).some((c) => c?.parameters?.CallSid === incoming?.parameters?.CallSid);
1926
+ if (!exists) {
1927
+ this.newIncomingCallsList = [...(this.newIncomingCallsList || []), incoming];
1928
+ this.incomingCallsNewInfo.emit(this.newIncomingCallsList);
1929
+ }
1930
+ this.cdr.detectChanges();
1931
+ }
1932
+ });
1933
+ }
1934
+ catch { }
1910
1935
  }
1911
1936
  ngOnChanges(changes) {
1912
1937
  console.log('Call Progress Component ngOnChanges');
@@ -1925,6 +1950,7 @@ class CallProgressComponent {
1925
1950
  // If a call is already active, do NOT auto-switch. Show incoming overlay.
1926
1951
  if (this.call && (this.call.status() == 'open')) {
1927
1952
  this.incomingCallDiv = true;
1953
+ this.isConcurrentIncoming = true;
1928
1954
  // Ensure the incoming call appears in list for the overlay component
1929
1955
  const inc = changes['newIncomingCallData'].currentValue;
1930
1956
  if (this.newIncomingCallsList && Array.isArray(this.newIncomingCallsList)) {
@@ -2136,6 +2162,8 @@ class CallProgressComponent {
2136
2162
  this.startTimer();
2137
2163
  this.disbaleEndCallBtn = false;
2138
2164
  this.call = data.call;
2165
+ this.isConcurrentIncoming = false;
2166
+ this.incomingCallDiv = false;
2139
2167
  const incomingDetail = this.extensionService.getCallSid();
2140
2168
  this.incomingRecordCall = incomingDetail.recordCall;
2141
2169
  // Start recording if the call is answered and recording is enabled
@@ -2150,6 +2178,8 @@ class CallProgressComponent {
2150
2178
  else {
2151
2179
  // incoming call rejected
2152
2180
  this.endCallEvent.emit();
2181
+ this.isConcurrentIncoming = false;
2182
+ this.incomingCallDiv = false;
2153
2183
  }
2154
2184
  }
2155
2185
  clearInputs() {
@@ -2304,12 +2334,12 @@ class CallProgressComponent {
2304
2334
  }
2305
2335
  }
2306
2336
  }
2307
- CallProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, deps: [{ token: ExtensionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
2308
- CallProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallProgressComponent, selector: "lib-call-progress", inputs: { callData: "callData", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n <!-- <div id=\"minimize-btn-div\">\n <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n minimize\n </span>\n </div> -->\n <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n <div [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative', 'width': '100%', 'left': callData?.isIncomingCall ? '100px' : '0'}\">\n \n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div>\n <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isRecording\" class=\"timer-display\">\n {{ getFormattedTime() }}\n </div>\n </div>\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n </div>\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n {{key.num}}\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n </div>\n </div>\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n <div class=\"flex align-items-center justify-content-evenly\">\n <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" (click)=\"toggleMute()\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n </button>\n <button class=\"call-sec-btn mr-3\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> add </span>\n </button>\n </div>\n\n <div>\n <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n \n \n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n <div class=\"title\">Contacts</div>\n <span class=\"material-symbols-outlined search\"> search </span>\n </div>\n <div class=\"contacts-list\">\n <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n <img class=\"contact-avatar\" [src]=\"c.img\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.name}}</div>\n <div class=\"contact-title\">{{c.title}}</div>\n </div>\n <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n <span class=\"material-symbols-outlined\"> call </span>\n <span class=\"label\">Call</span>\n </button>\n </div>\n </div>\n </div>\n\n \n <!-- <div class=\"mt-2 px-3 call-info-wrapper \" [ngClass]=\"{'open-collops': isCollops}\">\n <div class=\"text-center\" >\n <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n </div>\n <ng-container *ngIf=\"isCollops\">\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div >First Name:</div>\n <div >test ttttt</div>\n </div>\n <div class=\"col-6\">\n <div>Last Name:</div>\n <div>tetst test </div>\n </div>\n </div>\n <div class=\"mb-2\">\n <div class=\"\">Email:</div>\n <div class=\"\">abcdeft@vgroup.com</div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Number:</div>\n <div class=\"\">63545985264225</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"\">English</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Image :</div>\n <div class=\"\">test.jpg </div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Extension :</div>\n <div class=\"\">4596</div>\n </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">Note :</div>\n <div class=\"\">tes test test </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">\n <div class=\"\">Subject:</div>\n <div class=\"\">hello world | test</div>\n </div>\n </div>\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n </div>\n </div>\n </ng-container>\n </div> -->\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <!-- <use\n xlink:href=\"#gentle-wave\"\n x=\"48\"\n y=\"5\"\n fill=\"rgba(255,255,255,0.3)\"\n /> -->\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n <div style=\"display: flex; width: 100%\">\n <div>\n <div class=\"min-call-animation\" id=\"call-avatar\">\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n </div>\n </div>\n <div>\n <div class=\"min-callerDetails\">\n <div class=\"name\">\n {{callData.name}}\n </div>\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n </div>\n </div>\n </div>\n <div class=\"min-btn-container\">\n <div class=\"min-timer\">{{timer}}</div>\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;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;justify-content:center;align-items:center;z-index:100000}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.contacts-panel{position:absolute;top:-46px;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:6px 10px;cursor:pointer}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}lib-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList", "deviceId"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
2337
+ CallProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, deps: [{ token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: TwilioService }], target: i0.ɵɵFactoryTarget.Component });
2338
+ CallProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallProgressComponent, selector: "lib-call-progress", inputs: { callData: "callData", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n <!-- <div id=\"minimize-btn-div\">\n <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n minimize\n </span>\n </div> -->\n <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\" [isConcurrentIncoming]=\"isConcurrentIncoming\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n <div [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative', 'width': '100%', 'left': callData?.isIncomingCall ? '100px' : '0'}\">\n \n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div>\n <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isRecording\" class=\"timer-display\">\n {{ getFormattedTime() }}\n </div>\n </div>\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n </div>\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n {{key.num}}\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n </div>\n </div>\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n <div class=\"flex align-items-center justify-content-evenly\">\n <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" (click)=\"toggleMute()\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n </button>\n <button class=\"call-sec-btn mr-3\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> add </span>\n </button>\n </div>\n\n <div>\n <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n \n \n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n <div class=\"title\">Contacts</div>\n <span class=\"material-symbols-outlined search\"> search </span>\n </div>\n <div class=\"contacts-list\">\n <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n <img class=\"contact-avatar\" [src]=\"c.img\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.name}}</div>\n <div class=\"contact-title\">{{c.title}}</div>\n </div>\n <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n <span class=\"material-symbols-outlined\"> call </span>\n <span class=\"label\">Call</span>\n </button>\n </div>\n </div>\n </div>\n\n \n <!-- <div class=\"mt-2 px-3 call-info-wrapper \" [ngClass]=\"{'open-collops': isCollops}\">\n <div class=\"text-center\" >\n <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n </div>\n <ng-container *ngIf=\"isCollops\">\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div >First Name:</div>\n <div >test ttttt</div>\n </div>\n <div class=\"col-6\">\n <div>Last Name:</div>\n <div>tetst test </div>\n </div>\n </div>\n <div class=\"mb-2\">\n <div class=\"\">Email:</div>\n <div class=\"\">abcdeft@vgroup.com</div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Number:</div>\n <div class=\"\">63545985264225</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"\">English</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Image :</div>\n <div class=\"\">test.jpg </div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Extension :</div>\n <div class=\"\">4596</div>\n </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">Note :</div>\n <div class=\"\">tes test test </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">\n <div class=\"\">Subject:</div>\n <div class=\"\">hello world | test</div>\n </div>\n </div>\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n </div>\n </div>\n </ng-container>\n </div> -->\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <!-- <use\n xlink:href=\"#gentle-wave\"\n x=\"48\"\n y=\"5\"\n fill=\"rgba(255,255,255,0.3)\"\n /> -->\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n <div style=\"display: flex; width: 100%\">\n <div>\n <div class=\"min-call-animation\" id=\"call-avatar\">\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n </div>\n </div>\n <div>\n <div class=\"min-callerDetails\">\n <div class=\"name\">\n {{callData.name}}\n </div>\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n </div>\n </div>\n </div>\n <div class=\"min-btn-container\">\n <div class=\"min-timer\">{{timer}}</div>\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;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;justify-content:center;align-items:center;z-index:100000}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.contacts-panel{position:absolute;top:-46px;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:6px 10px;cursor:pointer}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}lib-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList", "deviceId", "isConcurrentIncoming"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
2309
2339
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
2310
2340
  type: Component,
2311
- args: [{ selector: 'lib-call-progress', template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n <!-- <div id=\"minimize-btn-div\">\n <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n minimize\n </span>\n </div> -->\n <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n <div [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative', 'width': '100%', 'left': callData?.isIncomingCall ? '100px' : '0'}\">\n \n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div>\n <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isRecording\" class=\"timer-display\">\n {{ getFormattedTime() }}\n </div>\n </div>\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n </div>\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n {{key.num}}\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n </div>\n </div>\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n <div class=\"flex align-items-center justify-content-evenly\">\n <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" (click)=\"toggleMute()\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n </button>\n <button class=\"call-sec-btn mr-3\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> add </span>\n </button>\n </div>\n\n <div>\n <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n \n \n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n <div class=\"title\">Contacts</div>\n <span class=\"material-symbols-outlined search\"> search </span>\n </div>\n <div class=\"contacts-list\">\n <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n <img class=\"contact-avatar\" [src]=\"c.img\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.name}}</div>\n <div class=\"contact-title\">{{c.title}}</div>\n </div>\n <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n <span class=\"material-symbols-outlined\"> call </span>\n <span class=\"label\">Call</span>\n </button>\n </div>\n </div>\n </div>\n\n \n <!-- <div class=\"mt-2 px-3 call-info-wrapper \" [ngClass]=\"{'open-collops': isCollops}\">\n <div class=\"text-center\" >\n <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n </div>\n <ng-container *ngIf=\"isCollops\">\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div >First Name:</div>\n <div >test ttttt</div>\n </div>\n <div class=\"col-6\">\n <div>Last Name:</div>\n <div>tetst test </div>\n </div>\n </div>\n <div class=\"mb-2\">\n <div class=\"\">Email:</div>\n <div class=\"\">abcdeft@vgroup.com</div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Number:</div>\n <div class=\"\">63545985264225</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"\">English</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Image :</div>\n <div class=\"\">test.jpg </div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Extension :</div>\n <div class=\"\">4596</div>\n </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">Note :</div>\n <div class=\"\">tes test test </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">\n <div class=\"\">Subject:</div>\n <div class=\"\">hello world | test</div>\n </div>\n </div>\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n </div>\n </div>\n </ng-container>\n </div> -->\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <!-- <use\n xlink:href=\"#gentle-wave\"\n x=\"48\"\n y=\"5\"\n fill=\"rgba(255,255,255,0.3)\"\n /> -->\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n <div style=\"display: flex; width: 100%\">\n <div>\n <div class=\"min-call-animation\" id=\"call-avatar\">\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n </div>\n </div>\n <div>\n <div class=\"min-callerDetails\">\n <div class=\"name\">\n {{callData.name}}\n </div>\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n </div>\n </div>\n </div>\n <div class=\"min-btn-container\">\n <div class=\"min-timer\">{{timer}}</div>\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;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;justify-content:center;align-items:center;z-index:100000}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.contacts-panel{position:absolute;top:-46px;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:6px 10px;cursor:pointer}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}lib-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"] }]
2312
- }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { callData: [{
2341
+ args: [{ selector: 'lib-call-progress', template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n <!-- <div id=\"minimize-btn-div\">\n <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n minimize\n </span>\n </div> -->\n <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\" [isConcurrentIncoming]=\"isConcurrentIncoming\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n <div [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative', 'width': '100%', 'left': callData?.isIncomingCall ? '100px' : '0'}\">\n \n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div>\n <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isRecording\" class=\"timer-display\">\n {{ getFormattedTime() }}\n </div>\n </div>\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n </div>\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n {{key.num}}\n <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n </div>\n </div>\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n <div class=\"flex align-items-center justify-content-evenly\">\n <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" (click)=\"toggleMute()\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n </button>\n <button class=\"call-sec-btn mr-3\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> add </span>\n </button>\n </div>\n\n <div>\n <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n \n \n <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n <div class=\"title\">Contacts</div>\n <span class=\"material-symbols-outlined search\"> search </span>\n </div>\n <div class=\"contacts-list\">\n <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n <img class=\"contact-avatar\" [src]=\"c.img\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.name}}</div>\n <div class=\"contact-title\">{{c.title}}</div>\n </div>\n <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n <span class=\"material-symbols-outlined\"> call </span>\n <span class=\"label\">Call</span>\n </button>\n </div>\n </div>\n </div>\n\n \n <!-- <div class=\"mt-2 px-3 call-info-wrapper \" [ngClass]=\"{'open-collops': isCollops}\">\n <div class=\"text-center\" >\n <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n </div>\n <ng-container *ngIf=\"isCollops\">\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div >First Name:</div>\n <div >test ttttt</div>\n </div>\n <div class=\"col-6\">\n <div>Last Name:</div>\n <div>tetst test </div>\n </div>\n </div>\n <div class=\"mb-2\">\n <div class=\"\">Email:</div>\n <div class=\"\">abcdeft@vgroup.com</div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Number:</div>\n <div class=\"\">63545985264225</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"\">English</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Image :</div>\n <div class=\"\">test.jpg </div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Extension :</div>\n <div class=\"\">4596</div>\n </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">Note :</div>\n <div class=\"\">tes test test </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">\n <div class=\"\">Subject:</div>\n <div class=\"\">hello world | test</div>\n </div>\n </div>\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n </div>\n </div>\n </ng-container>\n </div> -->\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <!-- <use\n xlink:href=\"#gentle-wave\"\n x=\"48\"\n y=\"5\"\n fill=\"rgba(255,255,255,0.3)\"\n /> -->\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n <div style=\"display: flex; width: 100%\">\n <div>\n <div class=\"min-call-animation\" id=\"call-avatar\">\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n </div>\n </div>\n <div>\n <div class=\"min-callerDetails\">\n <div class=\"name\">\n {{callData.name}}\n </div>\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n </div>\n </div>\n </div>\n <div class=\"min-btn-container\">\n <div class=\"min-timer\">{{timer}}</div>\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;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;justify-content:center;align-items:center;z-index:100000}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.contacts-panel{position:absolute;top:-46px;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:6px 10px;cursor:pointer}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}lib-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"] }]
2342
+ }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: TwilioService }]; }, propDecorators: { callData: [{
2313
2343
  type: Input
2314
2344
  }], newIncomingCallData: [{
2315
2345
  type: Input
@@ -3504,12 +3534,12 @@ class DialboxComponent {
3504
3534
  }
3505
3535
  }
3506
3536
  }
3507
- DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: i3$1.MatDialog }, { token: IpAddressService }, { token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: i5.Router }], target: i0.ɵɵFactoryTarget.Component });
3508
- DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", numberDialed: "numberDialed" }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\"\r\n (endCallEvent)=\"endCall()\"\r\n (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\"\r\n [newIncomingCallsList]=\"incomingCallsList\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n [callData]=\"callData\">\r\n </lib-call-progress>\r\n <div class=\"dialpad-container\" *ngIf=\"!isCallInProgress\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n </svg> \r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n <span>{{dialAlert.msg}}</span>\r\n </div> -->\r\n <div>\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.numbersList[0].number}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg\r\n class=\"waves\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\"\r\n preserveAspectRatio=\"none\"\r\n shape-rendering=\"auto\"\r\n >\r\n <defs>\r\n <path\r\n id=\"gentle-wave\"\r\n d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"0\"\r\n fill=\"rgba(255,255,255,0.7)\"\r\n />\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"3\"\r\n fill=\"rgba(255,255,255,0.5)\"\r\n />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}} \r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n </span> -->\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\" [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span\r\n class=\"material-symbols-outlined\"\r\n style=\"cursor: pointer\"\r\n (click)=\"isCallerIdHidden = true\"\r\n >\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n <div>\r\n <div class=\"inc-user-img\">\r\n <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n <p>{{call.parameters.From}}</p>\r\n </div>\r\n <div class=\"d-flex\">\r\n <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </button>\r\n <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call_end\r\n </span>\r\n </button>\r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!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}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "newIncomingCallData", "newIncomingCallsList", "deviceId"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated"] }] });
3537
+ DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: i3.MatDialog }, { token: IpAddressService }, { token: ExtensionService }, { token: i0.ChangeDetectorRef }, { token: i5.Router }], target: i0.ɵɵFactoryTarget.Component });
3538
+ DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { autoOpenOnIncoming: "autoOpenOnIncoming", contactInfo: "contactInfo", deviceId: "deviceId", isDialpadHidden: "isDialpadHidden", incomingCallData: "incomingCallData" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", numberDialed: "numberDialed" }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\"\r\n (endCallEvent)=\"endCall()\"\r\n (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\"\r\n [newIncomingCallsList]=\"incomingCallsList\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n [callData]=\"callData\">\r\n </lib-call-progress>\r\n <div class=\"dialpad-container\" *ngIf=\"!isCallInProgress\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n </svg> \r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n <span>{{dialAlert.msg}}</span>\r\n </div> -->\r\n <div>\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.numbersList[0].number}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg\r\n class=\"waves\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\"\r\n preserveAspectRatio=\"none\"\r\n shape-rendering=\"auto\"\r\n >\r\n <defs>\r\n <path\r\n id=\"gentle-wave\"\r\n d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"0\"\r\n fill=\"rgba(255,255,255,0.7)\"\r\n />\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"3\"\r\n fill=\"rgba(255,255,255,0.5)\"\r\n />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}} \r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n </span> -->\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\" [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span\r\n class=\"material-symbols-outlined\"\r\n style=\"cursor: pointer\"\r\n (click)=\"isCallerIdHidden = true\"\r\n >\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n <div>\r\n <div class=\"inc-user-img\">\r\n <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n <p>{{call.parameters.From}}</p>\r\n </div>\r\n <div class=\"d-flex\">\r\n <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </button>\r\n <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call_end\r\n </span>\r\n </button>\r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!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}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "newIncomingCallData", "newIncomingCallsList", "deviceId"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated"] }] });
3509
3539
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
3510
3540
  type: Component,
3511
3541
  args: [{ selector: 'lib-dialbox', template: "<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\"\r\n (endCallEvent)=\"endCall()\"\r\n (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n [newIncomingCallData]=\"newIncomingCallData\"\r\n [deviceId]=\"deviceId\"\r\n [newIncomingCallsList]=\"incomingCallsList\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n [callData]=\"callData\">\r\n </lib-call-progress>\r\n <div class=\"dialpad-container\" *ngIf=\"!isCallInProgress\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n </svg> \r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n <span>{{dialAlert.msg}}</span>\r\n </div> -->\r\n <div>\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.numbersList[0].number}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg\r\n class=\"waves\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\"\r\n preserveAspectRatio=\"none\"\r\n shape-rendering=\"auto\"\r\n >\r\n <defs>\r\n <path\r\n id=\"gentle-wave\"\r\n d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"0\"\r\n fill=\"rgba(255,255,255,0.7)\"\r\n />\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"3\"\r\n fill=\"rgba(255,255,255,0.5)\"\r\n />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}} \r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : '&nbsp;'}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n </span> -->\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\" [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span\r\n class=\"material-symbols-outlined\"\r\n style=\"cursor: pointer\"\r\n (click)=\"isCallerIdHidden = true\"\r\n >\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n <div>\r\n <div class=\"inc-user-img\">\r\n <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n <p>{{call.parameters.From}}</p>\r\n </div>\r\n <div class=\"d-flex\">\r\n <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </button>\r\n <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call_end\r\n </span>\r\n </button>\r\n </div>\r\n \r\n </div> -->\r\n </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px!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}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"] }]
3512
- }], ctorParameters: function () { return [{ type: TwilioService }, { type: ExtensionService }, { type: i3$1.MatDialog }, { type: IpAddressService }, { type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: i5.Router }]; }, propDecorators: { autoOpenOnIncoming: [{
3542
+ }], ctorParameters: function () { return [{ type: TwilioService }, { type: ExtensionService }, { type: i3.MatDialog }, { type: IpAddressService }, { type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: i5.Router }]; }, propDecorators: { autoOpenOnIncoming: [{
3513
3543
  type: Input
3514
3544
  }], contactInfo: [{
3515
3545
  type: Input
@@ -3577,12 +3607,12 @@ class CallerIdDialogComponent {
3577
3607
  console.log('doNotShowAgain');
3578
3608
  }
3579
3609
  }
3580
- CallerIdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallerIdDialogComponent, deps: [{ token: i5.Router }, { token: TwilioService }, { token: i3$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
3581
- CallerIdDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallerIdDialogComponent, selector: "lib-caller-id-dialog", ngImport: i0, template: "<div class=\"main-theme {{storedTheme}}\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\"> Caller ID Not Set</h5>\n <button class=\"close\" (click)=\"closeModal()\">\n <span>x</span>\n </button>\n </div>\n <div class=\"modal-body\">\n <p class=\"mb-1\"><strong>There is no caller ID set in your account</strong> <br /></p>\n <p>The receiver will not be able to identify your call or call you back</p>\n <div class=\"d-flex align-items-center justify-content-center\">\n <input type=\"checkbox\" checked (change)=\"hideMessage($event)\" [(ngModel)]=\"alertToggle\" class=\"mr-2\">\n <label for=\"\" class=\"mb-0 text-muted\">I do not want to see this message again</label>\n </div>\n <button class=\"btn btn-black-outline\" (click)=\"doNotShowAgain()\">Do not show this message again</button>\n </div>\n <div class=\"modal-footer border-top d-flex justify-content-between\">\n <button class=\"btn btn-black-outline\" (click)=\"redirectToCallingPreference()\">Click to set caller ID</button>\n \n <button class=\"btn btn-blue ms-2\" (click)=\"proceed()\">Proceed without Caller ID</button>\n </div>\n</div>", styles: ["::ng-deep .mat-dialog-container{padding:0!important;border-radius:8px;box-shadow:0 4px 10px #0003;text-align:center}::ng-deep .cus-dialog{z-index:111111!important}.btn-black-outline{border:1px solid #000000;border-radius:10px}.btn-blue{background-color:#234de8;color:#fff!important;margin-left:8px}::ng-deep .cdk-overlay-container{z-index:111111}\n"], dependencies: [{ kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
3610
+ CallerIdDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallerIdDialogComponent, deps: [{ token: i5.Router }, { token: TwilioService }, { token: i3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
3611
+ CallerIdDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallerIdDialogComponent, selector: "lib-caller-id-dialog", ngImport: i0, template: "<div class=\"main-theme {{storedTheme}}\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\"> Caller ID Not Set</h5>\n <button class=\"close\" (click)=\"closeModal()\">\n <span>x</span>\n </button>\n </div>\n <div class=\"modal-body\">\n <p class=\"mb-1\"><strong>There is no caller ID set in your account</strong> <br /></p>\n <p>The receiver will not be able to identify your call or call you back</p>\n <div class=\"d-flex align-items-center justify-content-center\">\n <input type=\"checkbox\" checked (change)=\"hideMessage($event)\" [(ngModel)]=\"alertToggle\" class=\"mr-2\">\n <label for=\"\" class=\"mb-0 text-muted\">I do not want to see this message again</label>\n </div>\n <button class=\"btn btn-black-outline\" (click)=\"doNotShowAgain()\">Do not show this message again</button>\n </div>\n <div class=\"modal-footer border-top d-flex justify-content-between\">\n <button class=\"btn btn-black-outline\" (click)=\"redirectToCallingPreference()\">Click to set caller ID</button>\n \n <button class=\"btn btn-blue ms-2\" (click)=\"proceed()\">Proceed without Caller ID</button>\n </div>\n</div>", styles: ["::ng-deep .mat-dialog-container{padding:0!important;border-radius:8px;box-shadow:0 4px 10px #0003;text-align:center}::ng-deep .cus-dialog{z-index:111111!important}.btn-black-outline{border:1px solid #000000;border-radius:10px}.btn-blue{background-color:#234de8;color:#fff!important;margin-left:8px}::ng-deep .cdk-overlay-container{z-index:111111}\n"], dependencies: [{ kind: "directive", type: i4$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
3582
3612
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallerIdDialogComponent, decorators: [{
3583
3613
  type: Component,
3584
3614
  args: [{ selector: 'lib-caller-id-dialog', template: "<div class=\"main-theme {{storedTheme}}\">\n <div class=\"modal-header\">\n <h5 class=\"modal-title\"> Caller ID Not Set</h5>\n <button class=\"close\" (click)=\"closeModal()\">\n <span>x</span>\n </button>\n </div>\n <div class=\"modal-body\">\n <p class=\"mb-1\"><strong>There is no caller ID set in your account</strong> <br /></p>\n <p>The receiver will not be able to identify your call or call you back</p>\n <div class=\"d-flex align-items-center justify-content-center\">\n <input type=\"checkbox\" checked (change)=\"hideMessage($event)\" [(ngModel)]=\"alertToggle\" class=\"mr-2\">\n <label for=\"\" class=\"mb-0 text-muted\">I do not want to see this message again</label>\n </div>\n <button class=\"btn btn-black-outline\" (click)=\"doNotShowAgain()\">Do not show this message again</button>\n </div>\n <div class=\"modal-footer border-top d-flex justify-content-between\">\n <button class=\"btn btn-black-outline\" (click)=\"redirectToCallingPreference()\">Click to set caller ID</button>\n \n <button class=\"btn btn-blue ms-2\" (click)=\"proceed()\">Proceed without Caller ID</button>\n </div>\n</div>", styles: ["::ng-deep .mat-dialog-container{padding:0!important;border-radius:8px;box-shadow:0 4px 10px #0003;text-align:center}::ng-deep .cus-dialog{z-index:111111!important}.btn-black-outline{border:1px solid #000000;border-radius:10px}.btn-blue{background-color:#234de8;color:#fff!important;margin-left:8px}::ng-deep .cdk-overlay-container{z-index:111111}\n"] }]
3585
- }], ctorParameters: function () { return [{ type: i5.Router }, { type: TwilioService }, { type: i3$1.MatDialogRef }, { type: undefined, decorators: [{
3615
+ }], ctorParameters: function () { return [{ type: i5.Router }, { type: TwilioService }, { type: i3.MatDialogRef }, { type: undefined, decorators: [{
3586
3616
  type: Inject,
3587
3617
  args: [MAT_DIALOG_DATA]
3588
3618
  }] }]; } });