@vgroup/dialbox 0.2.99 → 0.3.1

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 (10) hide show
  1. package/esm2020/lib/components/call-progress/call-progress.component.mjs +17 -16
  2. package/esm2020/lib/components/call-progress/incoming-call/incoming-call.component.mjs +8 -4
  3. package/esm2020/lib/dialbox.component.mjs +7 -2
  4. package/fesm2015/vgroup-dialbox.mjs +30 -20
  5. package/fesm2015/vgroup-dialbox.mjs.map +1 -1
  6. package/fesm2020/vgroup-dialbox.mjs +29 -19
  7. package/fesm2020/vgroup-dialbox.mjs.map +1 -1
  8. package/lib/components/call-progress/call-progress.component.d.ts +2 -2
  9. package/lib/components/call-progress/incoming-call/incoming-call.component.d.ts +1 -1
  10. package/package.json +1 -1
package/fesm2015/vgroup-dialbox.mjs CHANGED
@@ -1991,10 +1991,14 @@ class IncomingCallComponent {
1991
1991
  this.timerSubscription = undefined; // Optionally reset the subscription
1992
1992
  }
1993
1993
  }
1994
+ // device: any;
1995
+ onEndCall() {
1996
+ this.extensionService.getRemoveParticipants(this.incomingCallData.participantId, this.incomingCallData.conferenceId).toPromise();
1997
+ }
1994
1998
  add() {
1995
1999
  return __awaiter(this, void 0, void 0, function* () {
1996
2000
  let device = yield this.twilioService.connect('');
1997
- console.log(device);
2001
+ console.log(device, 'callConnect');
1998
2002
  // this.device = new Device();/
1999
2003
  // Device.connect({ conferenceName: 'my-conference-room' });
2000
2004
  // this.device = new Device({ conferenceName: 'my-conference-room' });
@@ -2002,10 +2006,10 @@ class IncomingCallComponent {
2002
2006
  }
2003
2007
  }
2004
2008
  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 });
2005
- 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 || incomingCallData\">\r\n <div style=\"display: flex; flex-direction: column;\">\r\n <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n <p>{{incomingCallData?.phone}}</p>\r\n </div>\r\n \r\n <!-- <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n </div> -->\r\n <div class=\"call-action-btns\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add()\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container \">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n <div class=\"collops\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column container-fluid\" >\r\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \r\n <div class=\"p-2 \">\r\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n </div>\r\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n <div class=\"callerDetails-wrapper\">\r\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n </div> \r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\r\n </button>\r\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn-wrapper reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"> \r\n <i class=\"fa fa-angle-right\"></i> \r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \"> \r\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n </div>\r\n <div class=\"text-center\">\r\n <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Email:</div>\r\n <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Number:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"\">Language:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div> \r\n </div>\r\n\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"\">Message:</div>\r\n <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Point Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Source Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"call-action-btns mt-0\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>", styles: [".call-container{width:385px!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}.call-container-open{width:752px!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}.call-btn-wrapper span{color:#fff;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"] }] });
2009
+ 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 || incomingCallData\">\r\n <div style=\"display: flex; flex-direction: column;\">\r\n <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n <p>{{incomingCallData?.phone}}</p>\r\n </div>\r\n \r\n <!-- <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n </div> -->\r\n <div class=\"call-action-btns\">\r\n <!-- <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add()\"> call </span> \r\n </button> -->\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container \">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\r\n </button> -->\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall()\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n <div class=\"collops\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column container-fluid\" >\r\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \r\n <div class=\"p-2 \">\r\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n </div>\r\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n <div class=\"callerDetails-wrapper\">\r\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n </div> \r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\r\n </button>\r\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn-wrapper reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"> \r\n <i class=\"fa fa-angle-right\"></i> \r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \"> \r\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n </div>\r\n <div class=\"text-center\">\r\n <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Email:</div>\r\n <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Number:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"\">Language:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div> \r\n </div>\r\n\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"\">Message:</div>\r\n <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Point Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Source Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"call-action-btns mt-0\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>", styles: [".call-container{width:385px!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}.call-container-open{width:752px!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}.call-btn-wrapper span{color:#fff;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"] }] });
2006
2010
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, decorators: [{
2007
2011
  type: Component,
2008
- args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1 || incomingCallData\">\r\n <div style=\"display: flex; flex-direction: column;\">\r\n <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n <p>{{incomingCallData?.phone}}</p>\r\n </div>\r\n \r\n <!-- <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n </div> -->\r\n <div class=\"call-action-btns\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add()\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container \">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n <div class=\"collops\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column container-fluid\" >\r\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \r\n <div class=\"p-2 \">\r\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n </div>\r\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n <div class=\"callerDetails-wrapper\">\r\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n </div> \r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\r\n </button>\r\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn-wrapper reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"> \r\n <i class=\"fa fa-angle-right\"></i> \r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \"> \r\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n </div>\r\n <div class=\"text-center\">\r\n <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Email:</div>\r\n <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Number:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"\">Language:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div> \r\n </div>\r\n\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"\">Message:</div>\r\n <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Point Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Source Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"call-action-btns mt-0\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>", styles: [".call-container{width:385px!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}.call-container-open{width:752px!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}.call-btn-wrapper span{color:#fff;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"] }]
2012
+ args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" *ngIf=\"newIncomingCallsList?.length === 1 || incomingCallData\">\r\n <div style=\"display: flex; flex-direction: column;\">\r\n <div class=\"callToNum\">Incoming call on <br/><span>{{incomingCallData?.phone || 'Unknown Number'}}</span></div>\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"newIncomingCallsList[0]?.img || incomingCallData?.img\" alt=\"\" width=\"120\" />\r\n </div>\r\n <div class=\"callerDetails\">\r\n <!-- <h1>{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name || incomingCallData?.name || 'Unknown Number'}}</h1> -->\r\n <!-- <p>{{newIncomingCallsList[0]?.userInfo?.displayNum ? newIncomingCallsList[0]?.userInfo?.c2cInformation?.number : newIncomingCallsList[0]?.userInfo?.c2cInformation?.number || incomingCallData?.displayNum || incomingCallData?.phone}}</p> -->\r\n <h1>{{incomingCallData?.name || 'Unknown Number'}}</h1>\r\n <p>{{incomingCallData?.phone}}</p>\r\n </div>\r\n \r\n <!-- <div class=\"callerDetails\">\r\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\r\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\r\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\r\n </div> -->\r\n <div class=\"call-action-btns\">\r\n <!-- <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"add()\"> call </span> \r\n </button> -->\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected || incomingCallData\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(newIncomingCallsList[0])\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected\" (click)=\"toggleMute(newIncomingCallsList[0])\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container \">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"newIncomingCallsList[0]?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <!-- <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(newIncomingCallsList[0])\"> call_end </span>\r\n </button> -->\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall()\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>\r\n\r\n<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList?.length > 1\" [ngClass]=\"{'call-container-open': selectedIncomingCall?.isClickExpand}\">\r\n <div class=\"collops\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex flex-column container-fluid\" >\r\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\r\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \r\n <div class=\"p-2 \">\r\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\r\n <div class=\"img\">\r\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\r\n </div>\r\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\r\n <div class=\"callerDetails-wrapper\">\r\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\r\n <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\r\n </div> \r\n <div class=\"d-flex align-items-center\">\r\n <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\r\n </button>\r\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"data?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn-wrapper reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\r\n </button>\r\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" \r\n (click)=\"hasDetailedInfo(data) ? onClickExpand(data) : null\" \r\n [ngClass]=\"{'disabled': !hasDetailedInfo(data)}\"\r\n [title]=\"hasDetailedInfo(data) ? 'View details' : 'No details available'\">\r\n <i class=\"fa fa-angle-right\"></i>\r\n </div>\r\n <!-- <div *ngIf=\"data?.customParameters?.get('c2cNumber') === true || data?.customParameters?.get('c2cNumber') === 'true'\" class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"> \r\n <i class=\"fa fa-angle-right\"></i> \r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand \"> \r\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\r\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\r\n <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\r\n </div>\r\n <div class=\"text-center\">\r\n <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\r\n </div>\r\n <div class=\"f-13\">\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Subject:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Email:</div>\r\n <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\r\n </div> \r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Number:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"\">Language:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Extension:</div>\r\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-12 d-flex align-items-center mb-2\">\r\n <div class=\"me-2\">Image:</div>\r\n <div class=\"text-ellipsis\">\r\n <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\r\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\r\n </ng-container>\r\n <ng-template #noImage>\r\n <span class=\"ml-2\">No Image Available</span>\r\n </ng-template>\r\n </div>\r\n </div> \r\n </div>\r\n\r\n <div class=\" mb-4\">\r\n <div class=\"\">\r\n <div class=\"\">Message:</div>\r\n <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"row mb-2\">\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Point Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\r\n </div>\r\n <div class=\"col-6 mb-2\">\r\n <div class=\"\">Source Name:</div>\r\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"call-action-btns mt-0\">\r\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\r\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\r\n </button>\r\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\r\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\r\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\r\n </button>\r\n <div class=\"record-btn-container\">\r\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\">\r\n <span class=\"recording-icon\"></span>\r\n </button> \r\n <div class=\"pause-resume-btns\">\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\r\n <span class=\"material-symbols-outlined\"> pause </span>\r\n </button>\r\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\r\n <span class=\"material-symbols-outlined\"> play_arrow </span>\r\n </button>\r\n </div>\r\n </div>\r\n <button class=\"call-btn reject-btn\">\r\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"wave-container\">\r\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\r\n <defs>\r\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n</div>", styles: [".call-container{width:385px!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}.call-container-open{width:752px!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}.call-btn-wrapper span{color:#fff;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"] }]
2009
2013
  }], ctorParameters: function () { return [{ type: ExtensionService }, { type: TwilioService }, { type: NotificationService }]; }, propDecorators: { incomingCallData: [{
2010
2014
  type: Input
2011
2015
  }], newIncomingCallsList: [{
@@ -2236,10 +2240,11 @@ class CallProgressComponent {
2236
2240
  hold: true
2237
2241
  });
2238
2242
  }
2239
- onEndCall(c) {
2243
+ onEndCall(c, isAllCallEnd) {
2240
2244
  return __awaiter(this, void 0, void 0, function* () {
2241
2245
  console.log(c, 'dsdsdsdsdsdsadsa');
2242
- yield this.getRemoveParticipants(c.paricipantId || c.participantId, this.conferenceId);
2246
+ let participantId = isAllCallEnd ? 'all' : c.participantId || c.participantId;
2247
+ yield this.getRemoveParticipants(participantId, this.conferenceId);
2243
2248
  yield this.getAllParticipants(this.conferenceId);
2244
2249
  });
2245
2250
  }
@@ -2406,7 +2411,7 @@ class CallProgressComponent {
2406
2411
  // this.maximiseDialpad();
2407
2412
  // }
2408
2413
  // }
2409
- endCall() {
2414
+ endCall(isAllCallEnd) {
2410
2415
  var _a, _b, _c, _d, _e;
2411
2416
  console.log('endCall() called');
2412
2417
  console.log('Current call:', (_a = this.call) === null || _a === void 0 ? void 0 : _a.parameters['From']);
@@ -2422,13 +2427,13 @@ class CallProgressComponent {
2422
2427
  this.stopTimer();
2423
2428
  if (this.heldCall) {
2424
2429
  if (this.call) {
2425
- this.call.disconnect();
2426
- this.call = undefined;
2427
- this.onEndCall((_b = this.call) === null || _b === void 0 ? void 0 : _b.callInfo);
2430
+ // this.call.disconnect();
2431
+ // this.call = undefined;
2432
+ this.onEndCall((_b = this.call) === null || _b === void 0 ? void 0 : _b.callInfo, isAllCallEnd);
2428
2433
  }
2429
2434
  console.log('Resuming held call:', this.heldCall.parameters['From']);
2430
2435
  // Promote held call
2431
- this.call = this.heldCall;
2436
+ this.call = JSON.parse(JSON.stringify(this.heldCall));
2432
2437
  this.heldCall = undefined;
2433
2438
  this.isCallOnHold = false;
2434
2439
  this.incomingCallDiv = false; // Ensure UI renders
@@ -2455,7 +2460,7 @@ class CallProgressComponent {
2455
2460
  this.endCallEvent.emit();
2456
2461
  if (this.call) {
2457
2462
  this.call.disconnect();
2458
- this.onEndCall((_e = this.call) === null || _e === void 0 ? void 0 : _e.callInfo);
2463
+ this.onEndCall((_e = this.call) === null || _e === void 0 ? void 0 : _e.callInfo, isAllCallEnd);
2459
2464
  // this.call = undefined;
2460
2465
  }
2461
2466
  this.maximiseDialpad();
@@ -2504,7 +2509,7 @@ class CallProgressComponent {
2504
2509
  hold: true
2505
2510
  });
2506
2511
  // Put current call on hold
2507
- this.heldCall = this.call;
2512
+ this.heldCall = JSON.parse(JSON.stringify(this.call));
2508
2513
  this.isCallOnHold = true;
2509
2514
  this.heldCall.mute(true);
2510
2515
  this.heldCall['parameters']['caller_name'] = Object.assign({}, this.callData);
@@ -2541,7 +2546,7 @@ class CallProgressComponent {
2541
2546
  this.showRingAnimation = false;
2542
2547
  // Restore held call on error
2543
2548
  if (this.heldCall) {
2544
- this.call = this.heldCall;
2549
+ this.call = JSON.parse(JSON.stringify(this.heldCall));
2545
2550
  this.heldCall = undefined;
2546
2551
  this.isCallOnHold = false;
2547
2552
  this.call.mute(false);
@@ -2583,7 +2588,7 @@ class CallProgressComponent {
2583
2588
  return;
2584
2589
  // Put current call on hold instead of disconnecting
2585
2590
  if (this.call) {
2586
- this.heldCall = this.call;
2591
+ this.heldCall = JSON.parse(JSON.stringify(this.call));
2587
2592
  this.isCallOnHold = true;
2588
2593
  // Mute the held call
2589
2594
  this.heldCall.mute(true);
@@ -2627,8 +2632,8 @@ class CallProgressComponent {
2627
2632
  console.log('Before swap - Held call:', this.heldCall.parameters['From']);
2628
2633
  // Swap the calls
2629
2634
  const temp = this.call;
2630
- this.call = this.heldCall;
2631
- this.heldCall = temp;
2635
+ this.call = JSON.parse(JSON.stringify(this.heldCall));
2636
+ this.heldCall = JSON.parse(JSON.stringify(temp));
2632
2637
  this.call.mute(false);
2633
2638
  this.heldCall.mute(true);
2634
2639
  // Update UI with active call info - extract from call parameters
@@ -2907,10 +2912,10 @@ class CallProgressComponent {
2907
2912
  }
2908
2913
  }
2909
2914
  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 });
2910
- 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\"\n [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 && !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n\n <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n <div class=\"held-call-banner\" *ngIf=\"isCallOnHold && heldCall\">\n <div class=\"held-call-content\">\n <div class=\"held-info\">\n <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n <div class=\"held-caller\">\n <span class=\"held-label\">Hold</span>\n <span class=\"held-name\">{{heldCall.callInfo?.name || 'Unknown'}}</span>\n <span class=\"held-number\">{{heldCall.callInfo?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"held-btn swap-btn\" (click)=\"swapCalls()\" title=\"Swap calls\">\n <span>Swap</span>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Compact banners for concurrent incoming (one per call) -->\n <ng-container>\n <div class=\"incoming-banners-container\" *ngIf=\"!isConference\">\n <div class=\"incoming-banner\" *ngFor=\"let inc of newIncomingCallsList; let i = index\"\n [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 80) + 'px' }\">\n <div class=\"incoming-banner-content\">\n <div class=\"incoming-info\">\n <span class=\"incom ing-label\">Incoming call</span>\n <div class=\"incoming-caller\">\n <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\n inc?.customParameters?.get('name') || '-' }}</span>\n <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\n inc?.parameters?.From || '' }}</span>\n </div>\n </div>\n <div class=\"incoming-actions\">\n <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(inc)\">\n <span class=\"material-symbols-outlined\">call</span>\n </button>\n <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(inc)\">\n <span class=\"material-symbols-outlined\">call_end</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf=\"!isConference\" [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\">\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\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n [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\"\n (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\"\n (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n (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\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '110px'}\">\n <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\n [disabled]=\"!heldCall || !call\">\n <span>Merge</span>\n </button>\n </div>\n <div class=\"flex align-items-center justify-content-evenly mb-3\">\n <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" (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\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n <button class=\"call-sec-btn\" [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 || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</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 <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 || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</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 <div class=\"conference-call-view\" *ngIf=\"isConference\">\n <div class=\"conf-heading\">\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\n <span class=\"conf-title\">Conference Call</span>\n </div>\n\n <div class=\"conf-name\">\n {{ (callData?.name || callData?.displayNum || callData?.phone || '-') }} &\n {{ (newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.name\n || newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.number\n || newIncomingCallsList?.[0]?.parameters?.From\n || heldCall?.customParameters?.get('displayNumber')\n || '-') }}\n </div>\n\n <div class=\"conf-timer\">{{ timer }}</div>\n\n <!-- <div class=\"conf-record\">\n <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\n <span class=\"material-symbols-outlined\"> stop_circle </span>\n </button>\n </div> -->\n\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\"\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n [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\"\n (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\n <div class=\"conf-remove\" >\n <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\n </div>\n\n <div class=\"conf-actions\">\n <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute()\"\n [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n </button>\n <button class=\"circle-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> add </span>\n </button>\n </div>\n\n <div class=\"conf-end\">\n <button class=\"circle-btn danger\" (click)=\"endCall()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n\n\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\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 allParticipentList\">\n <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.toName || 'Unknown'}}</div>\n <div class=\"contact-title\">{{ c?.to || 'Unknown'}}</div>\n </div>\n <button class=\"conference-contact\" (click)=\"onHoldCall(c)\">\n <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\n <!-- <span class=\"label\">Hold</span> -->\n </button>\n <button class=\"conference-contact\" (click)=\"onEndCall(c)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n <!-- <span class=\"label\">End</span> -->\n </button>\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\">\n <defs>\n <path id=\"gentle-wave\"\n 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 </ng-container>\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;flex-flow:column}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important;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;width:50px;height:50px}.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}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{display:flex;flex-direction:column;gap:8px;width:100%}.incoming-banner{position:absolute;top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:0 0 16px 16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;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}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;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}.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%}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 24px;color:#fff}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#fff;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center}.conf-title{font-weight:600;font-size:17px}.conf-name{margin-top:10px;font-size:18px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#000;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}\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"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
2915
+ 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\"\n [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 && !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n\n <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n <div class=\"held-call-banner\" *ngIf=\"isCallOnHold && heldCall\">\n <div class=\"held-call-content\">\n <div class=\"held-info\">\n <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n <div class=\"held-caller\">\n <span class=\"held-label\">Hold</span>\n <span class=\"held-name\">{{heldCall.callInfo?.name || 'Unknown'}}</span>\n <span class=\"held-number\">{{heldCall.callInfo?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"held-btn swap-btn\" (click)=\"swapCalls()\" title=\"Swap calls\">\n <span>Swap</span>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Compact banners for concurrent incoming (one per call) -->\n <ng-container>\n <div class=\"incoming-banners-container\" *ngIf=\"!isConference\">\n <div class=\"incoming-banner\" *ngFor=\"let inc of newIncomingCallsList; let i = index\"\n [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 80) + 'px' }\">\n <div class=\"incoming-banner-content\">\n <div class=\"incoming-info\">\n <span class=\"incom ing-label\">Incoming call</span>\n <div class=\"incoming-caller\">\n <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\n inc?.customParameters?.get('name') || '-' }}</span>\n <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\n inc?.parameters?.From || '' }}</span>\n </div>\n </div>\n <div class=\"incoming-actions\">\n <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(inc)\">\n <span class=\"material-symbols-outlined\">call</span>\n </button>\n <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(inc)\">\n <span class=\"material-symbols-outlined\">call_end</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf=\"!isConference\" [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\">\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\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n [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\"\n (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\"\n (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n (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\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '110px'}\">\n <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\n [disabled]=\"!heldCall || !call\">\n <span>Merge</span>\n </button>\n </div>\n <div class=\"flex align-items-center justify-content-evenly mb-3\">\n <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" (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\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n <button class=\"call-sec-btn\" [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(true)\">\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 || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</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 <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 || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</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 <div class=\"conference-call-view\" *ngIf=\"isConference\">\n <div class=\"conf-heading\">\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\n <span class=\"conf-title\">Conference Call</span>\n </div>\n\n <div class=\"conf-name\">\n {{ (callData?.name || callData?.displayNum || callData?.phone || '-') }} &\n {{ (newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.name\n || newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.number\n || newIncomingCallsList?.[0]?.parameters?.From\n || heldCall?.customParameters?.get('displayNumber')\n || '-') }}\n </div>\n\n <div class=\"conf-timer\">{{ timer }}</div>\n\n <!-- <div class=\"conf-record\">\n <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\n <span class=\"material-symbols-outlined\"> stop_circle </span>\n </button>\n </div> -->\n\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\"\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n [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\"\n (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\n <div class=\"conf-remove\" >\n <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\n </div>\n\n <div class=\"conf-actions\">\n <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute()\"\n [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n </button>\n <button class=\"circle-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> add </span>\n </button>\n </div>\n\n <div class=\"conf-end\">\n <button class=\"circle-btn danger\" (click)=\"endCall(true)\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n\n\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\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 allParticipentList\">\n <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.toName || 'Unknown'}}</div>\n <div class=\"contact-title\">{{ c?.to || 'Unknown'}}</div>\n </div>\n <button class=\"conference-contact\" (click)=\"onHoldCall(c)\">\n <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\n <!-- <span class=\"label\">Hold</span> -->\n </button>\n <button class=\"conference-contact\" (click)=\"onEndCall(c)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n <!-- <span class=\"label\">End</span> -->\n </button>\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\">\n <defs>\n <path id=\"gentle-wave\"\n 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 </ng-container>\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;flex-flow:column}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important;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;width:50px;height:50px}.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}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{display:flex;flex-direction:column;gap:8px;width:100%}.incoming-banner{position:absolute;top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:0 0 16px 16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;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}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;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}.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%}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 24px;color:#fff}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#fff;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center}.conf-title{font-weight:600;font-size:17px}.conf-name{margin-top:10px;font-size:18px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#000;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}\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"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
2911
2916
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
2912
2917
  type: Component,
2913
- args: [{ selector: 'lib-call-progress', template: "<div class=\"call-container\" *ngIf=\"!isMinimised\"\n [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 && !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n\n <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n <div class=\"held-call-banner\" *ngIf=\"isCallOnHold && heldCall\">\n <div class=\"held-call-content\">\n <div class=\"held-info\">\n <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n <div class=\"held-caller\">\n <span class=\"held-label\">Hold</span>\n <span class=\"held-name\">{{heldCall.callInfo?.name || 'Unknown'}}</span>\n <span class=\"held-number\">{{heldCall.callInfo?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"held-btn swap-btn\" (click)=\"swapCalls()\" title=\"Swap calls\">\n <span>Swap</span>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Compact banners for concurrent incoming (one per call) -->\n <ng-container>\n <div class=\"incoming-banners-container\" *ngIf=\"!isConference\">\n <div class=\"incoming-banner\" *ngFor=\"let inc of newIncomingCallsList; let i = index\"\n [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 80) + 'px' }\">\n <div class=\"incoming-banner-content\">\n <div class=\"incoming-info\">\n <span class=\"incom ing-label\">Incoming call</span>\n <div class=\"incoming-caller\">\n <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\n inc?.customParameters?.get('name') || '-' }}</span>\n <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\n inc?.parameters?.From || '' }}</span>\n </div>\n </div>\n <div class=\"incoming-actions\">\n <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(inc)\">\n <span class=\"material-symbols-outlined\">call</span>\n </button>\n <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(inc)\">\n <span class=\"material-symbols-outlined\">call_end</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf=\"!isConference\" [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\">\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\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n [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\"\n (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\"\n (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n (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\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '110px'}\">\n <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\n [disabled]=\"!heldCall || !call\">\n <span>Merge</span>\n </button>\n </div>\n <div class=\"flex align-items-center justify-content-evenly mb-3\">\n <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" (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\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n <button class=\"call-sec-btn\" [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 || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</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 <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 || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</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 <div class=\"conference-call-view\" *ngIf=\"isConference\">\n <div class=\"conf-heading\">\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\n <span class=\"conf-title\">Conference Call</span>\n </div>\n\n <div class=\"conf-name\">\n {{ (callData?.name || callData?.displayNum || callData?.phone || '-') }} &\n {{ (newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.name\n || newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.number\n || newIncomingCallsList?.[0]?.parameters?.From\n || heldCall?.customParameters?.get('displayNumber')\n || '-') }}\n </div>\n\n <div class=\"conf-timer\">{{ timer }}</div>\n\n <!-- <div class=\"conf-record\">\n <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\n <span class=\"material-symbols-outlined\"> stop_circle </span>\n </button>\n </div> -->\n\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\"\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n [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\"\n (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\n <div class=\"conf-remove\" >\n <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\n </div>\n\n <div class=\"conf-actions\">\n <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute()\"\n [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n </button>\n <button class=\"circle-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> add </span>\n </button>\n </div>\n\n <div class=\"conf-end\">\n <button class=\"circle-btn danger\" (click)=\"endCall()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n\n\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\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 allParticipentList\">\n <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.toName || 'Unknown'}}</div>\n <div class=\"contact-title\">{{ c?.to || 'Unknown'}}</div>\n </div>\n <button class=\"conference-contact\" (click)=\"onHoldCall(c)\">\n <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\n <!-- <span class=\"label\">Hold</span> -->\n </button>\n <button class=\"conference-contact\" (click)=\"onEndCall(c)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n <!-- <span class=\"label\">End</span> -->\n </button>\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\">\n <defs>\n <path id=\"gentle-wave\"\n 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 </ng-container>\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;flex-flow:column}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important;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;width:50px;height:50px}.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}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{display:flex;flex-direction:column;gap:8px;width:100%}.incoming-banner{position:absolute;top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:0 0 16px 16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;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}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;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}.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%}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 24px;color:#fff}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#fff;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center}.conf-title{font-weight:600;font-size:17px}.conf-name{margin-top:10px;font-size:18px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#000;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}\n"] }]
2918
+ args: [{ selector: 'lib-call-progress', template: "<div class=\"call-container\" *ngIf=\"!isMinimised\"\n [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 && !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n\n <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n <div class=\"held-call-banner\" *ngIf=\"isCallOnHold && heldCall\">\n <div class=\"held-call-content\">\n <div class=\"held-info\">\n <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n <div class=\"held-caller\">\n <span class=\"held-label\">Hold</span>\n <span class=\"held-name\">{{heldCall.callInfo?.name || 'Unknown'}}</span>\n <span class=\"held-number\">{{heldCall.callInfo?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"held-btn swap-btn\" (click)=\"swapCalls()\" title=\"Swap calls\">\n <span>Swap</span>\n </button>\n </div>\n </div>\n </div>\n\n <!-- Compact banners for concurrent incoming (one per call) -->\n <ng-container>\n <div class=\"incoming-banners-container\" *ngIf=\"!isConference\">\n <div class=\"incoming-banner\" *ngFor=\"let inc of newIncomingCallsList; let i = index\"\n [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 80) + 'px' }\">\n <div class=\"incoming-banner-content\">\n <div class=\"incoming-info\">\n <span class=\"incom ing-label\">Incoming call</span>\n <div class=\"incoming-caller\">\n <span class=\"caller-name\">{{ inc?.userInfo?.c2cInformation?.name ||\n inc?.customParameters?.get('name') || '-' }}</span>\n <span class=\"caller-number\">{{ inc?.userInfo?.c2cInformation?.number ||\n inc?.parameters?.From || '' }}</span>\n </div>\n </div>\n <div class=\"incoming-actions\">\n <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(inc)\">\n <span class=\"material-symbols-outlined\">call</span>\n </button>\n <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(inc)\">\n <span class=\"material-symbols-outlined\">call_end</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <div *ngIf=\"!isConference\" [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\">\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\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\"\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n [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\"\n (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\"\n (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n (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\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '110px'}\">\n <div class=\"mb-3\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\"\n [disabled]=\"!heldCall || !call\">\n <span>Merge</span>\n </button>\n </div>\n <div class=\"flex align-items-center justify-content-evenly mb-3\">\n <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\" (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\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n <button class=\"call-sec-btn\" [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(true)\">\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 || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</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 <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 || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c.firstName}} {{c.middleName}} {{c.lastName}}</div>\n <div class=\"contact-title\">{{ (c.numbersList && c.numbersList[0]?.number)}}</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 <div class=\"conference-call-view\" *ngIf=\"isConference\">\n <div class=\"conf-heading\">\n <span class=\"conf-icon material-symbols-outlined\"> groups </span>\n <span class=\"conf-title\">Conference Call</span>\n </div>\n\n <div class=\"conf-name\">\n {{ (callData?.name || callData?.displayNum || callData?.phone || '-') }} &\n {{ (newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.name\n || newIncomingCallsList?.[0]?.userInfo?.c2cInformation?.number\n || newIncomingCallsList?.[0]?.parameters?.From\n || heldCall?.customParameters?.get('displayNumber')\n || '-') }}\n </div>\n\n <div class=\"conf-timer\">{{ timer }}</div>\n\n <!-- <div class=\"conf-record\">\n <button class=\"record-stop-btn\" *ngIf=\"isRecording\" (click)=\"toggleRecording()\" title=\"Stop Recording\">\n <span class=\"material-symbols-outlined\"> stop_circle </span>\n </button>\n </div> -->\n\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\"\n [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n [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\"\n (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\n <div class=\"conf-remove\" >\n <button class=\"remove-btn\" (click)=\"addRemoveParticipant()\">Remove</button>\n </div>\n\n <div class=\"conf-actions\">\n <button class=\"circle-btn\" [ngClass]=\"{'active': isMute}\" (click)=\"toggleMute()\"\n [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n </button>\n <button class=\"circle-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> add </span>\n </button>\n </div>\n\n <div class=\"conf-end\">\n <button class=\"circle-btn danger\" (click)=\"endCall(true)\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n\n\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\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 allParticipentList\">\n <img class=\"contact-avatar\" [src]=\"c.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.toName || 'Unknown'}}</div>\n <div class=\"contact-title\">{{ c?.to || 'Unknown'}}</div>\n </div>\n <button class=\"conference-contact\" (click)=\"onHoldCall(c)\">\n <span class=\"material-symbols-outlined\" title=\"Hold\"> phone_paused </span>\n <!-- <span class=\"label\">Hold</span> -->\n </button>\n <button class=\"conference-contact\" (click)=\"onEndCall(c)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n <!-- <span class=\"label\">End</span> -->\n </button>\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\">\n <defs>\n <path id=\"gentle-wave\"\n 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 </ng-container>\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;flex-flow:column}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important;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;width:50px;height:50px}.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}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-name{font-size:14px;font-weight:600;color:#fff}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.h-77px{height:77px}.incoming-banners-container{display:flex;flex-direction:column;gap:8px;width:100%}.incoming-banner{position:absolute;top:0;left:0;width:100%;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:0 0 16px 16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:0;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}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;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}.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%}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 24px;color:#fff}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#fff;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center}.conf-title{font-weight:600;font-size:17px}.conf-name{margin-top:10px;font-size:18px;font-weight:600;text-align:center}.conf-timer{margin-top:4px;font-size:12px;opacity:.9}.conf-record{margin-top:14px}.record-stop-btn{width:44px;height:44px;border-radius:50%;border:none;background:#fff;display:flex;align-items:center;justify-content:center}.record-stop-btn .material-symbols-outlined{color:#e14e4e;font-size:28px}.conf-remove{margin-top:8px}.remove-btn{background:#000;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px}.conf-actions{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:18px}.circle-btn{width:56px;height:56px;border-radius:50%;border:none;background:#000;display:flex;align-items:center;justify-content:center}.circle-btn .material-symbols-outlined{color:#fff;font-size:24px}.circle-btn.active{opacity:.85}.conf-end{margin-top:16px}.circle-btn.danger{background:#e14e4e}.circle-btn.danger .material-symbols-outlined{color:#fff}\n"] }]
2914
2919
  }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: TwilioService }]; }, propDecorators: { callData: [{
2915
2920
  type: Input
2916
2921
  }], newIncomingCallData: [{
@@ -3127,7 +3132,7 @@ class DialboxComponent {
3127
3132
  this.initializeTwilio();
3128
3133
  this.incomeingCallSocketService.connect();
3129
3134
  try {
3130
- this.incomeingCallSocketService.listen().subscribe((incomingCallData) => {
3135
+ this.incomeingCallSocketService.listen().subscribe((incomingCallData) => __awaiter(this, void 0, void 0, function* () {
3131
3136
  // const data = JSON.parse(incomingCallData.data);
3132
3137
  console.log("WS Event Received:", incomingCallData);
3133
3138
  console.log("WS Event Received:", incomingCallData.data);
@@ -3140,7 +3145,12 @@ class DialboxComponent {
3140
3145
  this.callData.name = "";
3141
3146
  this.callData.img = "assets/images/user.jpg";
3142
3147
  this.callData.isIncomingCall = true;
3148
+ this.callData.participantId = incomingCallData.participants[0].participantId;
3149
+ this.callData.conferenceId = incomingCallData.conferenceId;
3150
+ this.callData.conferenceSid = incomingCallData.conferenceSid;
3143
3151
  }
3152
+ let device = yield this.twilioService.connect('');
3153
+ console.log(device, 'callConnect');
3144
3154
  // this.initializeTwilio();
3145
3155
  // if (incomingCallData.type === "/incoming/call") {
3146
3156
  // if (incomingCallData) {
@@ -3179,7 +3189,7 @@ class DialboxComponent {
3179
3189
  // });
3180
3190
  // }
3181
3191
  // }
3182
- });
3192
+ }));
3183
3193
  this.token = localStorage.getItem('ext_token') || '';
3184
3194
  //this.isCallInProgress = true;
3185
3195
  this.getContactList();