@vgroup/dialbox 0.4.37 → 0.4.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2020/lib/components/call-progress/call-progress.component.mjs +40 -16
  2. package/esm2020/lib/service/extension.service.mjs +9 -1
  3. package/fesm2015/vgroup-dialbox.mjs +47 -15
  4. package/fesm2015/vgroup-dialbox.mjs.map +1 -1
  5. package/fesm2020/vgroup-dialbox.mjs +47 -15
  6. package/fesm2020/vgroup-dialbox.mjs.map +1 -1
  7. package/lib/components/call-progress/call-progress.component.d.ts +2 -1
  8. package/lib/service/extension.service.d.ts +1 -0
  9. package/package.json +1 -1
package/fesm2020/vgroup-dialbox.mjs CHANGED
@@ -716,6 +716,14 @@ class ExtensionService {
716
716
  const httpOptions = { headers: headers };
717
717
  return this.http.get(environment.apiUrl + `/utilities/twilio/call/status/${callAuthId}`, httpOptions);
718
718
  }
719
+ setIncomingCallStatus(payload) {
720
+ const headers = new HttpHeaders({
721
+ 'Content-Type': 'application/json',
722
+ 'Auth-Key': 'Bearer ' + localStorage.getItem('ext_token')
723
+ });
724
+ const httpOptions = { headers: headers };
725
+ return this.http.post(environment.apiUrl + `/utilities/twilio/incoming/conference/ip`, payload, httpOptions);
726
+ }
719
727
  //sms api
720
728
  sendSms(c2c_latlong, c2c_request, dtModel) {
721
729
  return this.fetchBlockedCountries().pipe(switchMap(blockedCountries => {
@@ -1853,6 +1861,9 @@ class CallProgressComponent {
1853
1861
  name: res.name || res?.fromName || res?.toName,
1854
1862
  time: this.getTimeDifference(res.joinedAt || new Date().toUTCString()),
1855
1863
  });
1864
+ if (this.showContactsPanel) {
1865
+ this.getAllParticipants(this.twilioService.conferenceCallInfo.conferenceSid);
1866
+ }
1856
1867
  }
1857
1868
  else if (index != -1 && res.isLeft) {
1858
1869
  if (this.currentCallList[index]?.id == this.currentCall?.id) {
@@ -1890,6 +1901,9 @@ class CallProgressComponent {
1890
1901
  else {
1891
1902
  this.currentCallList.splice(index, 1);
1892
1903
  }
1904
+ if (this.showContactsPanel) {
1905
+ this.getAllParticipants(this.twilioService.conferenceCallInfo.conferenceSid);
1906
+ }
1893
1907
  }
1894
1908
  else if (index != -1) {
1895
1909
  this.currentCallList[index] = {
@@ -1967,13 +1981,17 @@ class CallProgressComponent {
1967
1981
  }
1968
1982
  }
1969
1983
  getStatus(res) {
1970
- const statusList = ["answered", "participant-hold", "participant-mute", "participant-join", "queued", "in-progress", "initiated", 'ringing', '"connected"'];
1971
- if (statusList.includes(res.status) && res.direction != "incoming-call") {
1984
+ // const statusList = ["answered", "participant-hold", "participant-mute", "participant-join", "queued", "in-progress", "initiated", 'ringing', '"connected"'];
1985
+ // if (statusList.includes(res.status) && res.direction != "incoming-call") {
1986
+ // return true;
1987
+ // } else if (res.direction == "incoming-call") {
1988
+ // return this.isCurrentIncomingCallList.includes(res.id);
1989
+ // } else {
1990
+ // return false;
1991
+ // }
1992
+ if (res.incomingStatus == 'answered' && res.direction == "incoming-call") {
1972
1993
  return true;
1973
1994
  }
1974
- else if (res.direction == "incoming-call") {
1975
- return this.isCurrentIncomingCallList.includes(res.id);
1976
- }
1977
1995
  else {
1978
1996
  return false;
1979
1997
  }
@@ -2417,6 +2435,7 @@ class CallProgressComponent {
2417
2435
  this.isCurrentIncomingCallList.push(data?.id || data?.participantId);
2418
2436
  data.isAcceptCall = true;
2419
2437
  this.currentCall = data;
2438
+ this.setIncomingCallStatus(data);
2420
2439
  });
2421
2440
  }
2422
2441
  else {
@@ -2425,6 +2444,7 @@ class CallProgressComponent {
2425
2444
  console.log(this.call, 'callConnect');
2426
2445
  data.isAcceptCall = true;
2427
2446
  this.currentCall = data;
2447
+ this.setIncomingCallStatus(data);
2428
2448
  }
2429
2449
  // } else if(data?.status == 'ringing'){
2430
2450
  // this.twilioService.addIncomingParticipant(data?.id, this.twilioService.conferenceCallInfo.conferenceId).subscribe((data: any) => {
@@ -2568,14 +2588,15 @@ class CallProgressComponent {
2568
2588
  }
2569
2589
  getAllParticipants(conferenceSid) {
2570
2590
  this.extensionService.getAllParticipants(conferenceSid).subscribe((res) => {
2571
- let index = this.contacts.findIndex((c) => c?.numbersList[0]?.number == res?.to);
2572
- if (index > -1) {
2573
- this.contacts[index].isCallOnHold = true;
2574
- }
2575
- else {
2576
- res['IsConnected'] = true;
2577
- this.contacts.push(res);
2578
- }
2591
+ this.allParticipentList = res.participants;
2592
+ // let index = this.contacts.findIndex((c:any)=> c?.numbersList[0]?.number == res?.to);
2593
+ // if(index > -1){
2594
+ // this.contacts[index].isCallOnHold = true;
2595
+ // }
2596
+ // else {
2597
+ // res['IsConnected'] = true;
2598
+ // this.contacts.push(res)
2599
+ // }
2579
2600
  });
2580
2601
  }
2581
2602
  // acceptConcurrentCall(incomingCall: any) {
@@ -3097,6 +3118,17 @@ class CallProgressComponent {
3097
3118
  this.isClickExpand = !this.isClickExpand;
3098
3119
  this.selectedUserInfo = { ...data };
3099
3120
  }
3121
+ setIncomingCallStatus(data) {
3122
+ let payload = {
3123
+ recordID: data?.id,
3124
+ ipAddress: '',
3125
+ ipCountry: '',
3126
+ CallStatus: this.callStatus,
3127
+ };
3128
+ this.extensionService.setIncomingCallStatus(payload).subscribe((res) => {
3129
+ console.log(res);
3130
+ });
3131
+ }
3100
3132
  toggleSearch() {
3101
3133
  this.isSearchVisible = !this.isSearchVisible;
3102
3134
  // if closing search — reset results
@@ -3140,10 +3172,10 @@ class CallProgressComponent {
3140
3172
  }
3141
3173
  }
3142
3174
  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 });
3143
- CallProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallProgressComponent, selector: "lib-call-progress", inputs: { callData: "callData", selectedCallerId: "selectedCallerId", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex\">\n <div class=\"call-container\" *ngIf=\"!isMinimised\"\n [ngClass]=\"{'collops': isCollops, 'incoming-call-container': 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 <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\n <!-- All type Call Hold list -->\n <div class=\"held-call-banner\"\n *ngIf=\"currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)\">\n <div class=\"held-call-content\" *ngIf=\"isConferenceCallHold\">\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\">Conference Call</span>\n <!-- <span class=\"held-number\" *ngFor=\"let heldCall of currentCallList\">{{heldCall?.phone || ''}}</span> -->\n </div>\n </div>\n <div class=\"held-actions\">\n ////////////////////\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': isConferenceCallHold }\" (click)=\"swapCalls({},true)\">\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)=\"endCall(true)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n </button>\n <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls({},true)\" title=\"Swap calls\">\n <span class=\"material-symbols-outlined swap-icon\"> swap_vert </span>\n </button> -->\n </div>\n </div>\n <ng-container *ngFor=\"let heldCall of currentCallList\">\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold && !heldCall?.isConference\">\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?.name || 'Unknown number'}}</span>\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': heldCall?.isHold }\" (click)=\"swapCalls(heldCall)\">\n <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\"> phone_paused </span>\n <!-- <span class=\"label\">Hold</span> -->\n </button>\n <button class=\"conference-contact\" (click)=\"onEndCall(heldCall)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n <!-- <span class=\"label\">End</span> -->\n </button>\n <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\n <span class=\"material-symbols-outlined swap-icon\">swap_vert</span>\n </button> -->\n </div>\n </div>\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall && !heldCall?.isAcceptCall\">\n <div class=\"held-info\">\n <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\n <div class=\"held-caller\">\n <span class=\"held-label\">Incoming Call</span>\n <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"banner-btn receive-btn\" *ngIf=\"!heldCall?.isAcceptCall\">\n <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\n </button>\n <button class=\"call-btn-wrapper banner-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(heldCall)\"> call_end\n </span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\n (click)=\"onClickExpand(heldCall)\">\n <i class=\"fa fa-angle-right\"></i>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Compact banners for concurrent incoming (one per call) -->\n <ng-container *ngIf=\"currentCallList.length > 1 && !currentCall?.id\">\n <div class=\"incoming-banners-container\" *ngIf=\"!isConference && currentCallList.length > 1\">\n <div class=\"\">\n <ng-container *ngFor=\"let inc of currentCallList; let i = index\">\n <div class=\"incoming-banner\" *ngIf=\"inc?.isIncomingCall && !inc?.isAcceptCall\"\n [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 70) + '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)=\"add(inc)\">\n <span class=\"material-symbols-outlined\">call</span>\n </button>\n <button class=\"banner-btn reject-btn\" (click)=\"onEndCall(inc)\">\n <span class=\"material-symbols-outlined\">call_end</span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\n (click)=\"onClickExpand(inc)\">\n <i class=\"fa fa-angle-right\"></i>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- For single incoming call -->\n <div class=\"h-100 my-5\" style=\"display: flex; flex-direction: column;\"\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.phone || 'Unknown\n Number'}}</span>\n </div>\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1>{{currentCallList[0]?.c2cInformation?.name || 'Unknown Number'}}</h1>\n <p>{{currentCallList[0]?.c2cInformation?.number}}</p>\n </div>\n\n <div class=\"call-action-btns mt-auto\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"add(currentCallList[0])\"> call </span>\n </button>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\n </span>\n </button>\n </div>\n </div>\n\n <!-- For multiple incoming calls but not any call progress -->\n\n\n <!-- For single active call -->\n <div *ngIf=\"(!isConference || isConferenceCallHold) && !!currentCall?.id\"\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\n\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"currentCall?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\n </h1>\n <p>{{currentCall?.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\n </div>\n\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\"\n [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'\"\n [disabled]=\"!currentCall?.isAcceptCall\">\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]=\"currentCallList.length < 2\">\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]=\"!currentCall?.isAcceptCall\"\n (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]=\"!currentCall?.isAcceptCall\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\n </span>\n </button>\n <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\n (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]=\"!currentCall?.isAcceptCall\"\n (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\n\n <!-- conference call view -->\n <div class=\"conference-call-view\" *ngIf=\"isConference && !isConferenceCallHold\">\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=\"scroll-container\">\n <div class=\"scroll-text conf-name\">\n <ng-container *ngFor=\"let call of currentCallList; let i = index\">\n <ng-container *ngIf=\"call?.isConference\">\n <span *ngIf=\"i != 0\">&</span>\n {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"conf-timer\">{{ timer }}</div>\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 mt-auto\" *ngIf=\"!showKeypad\"\n [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'\">\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 *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\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=\"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(true)\">\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> groups_2 </span>\n </button>\n </div>\n\n <div class=\"conf-end\">\n <button class=\"circle-btn danger\" (click)=\"endCall(true)\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n\n\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 <!-- Add remove participant panel -->\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\n <div class=\"title\">Contacts</div>\n\n <!-- SEARCH ICON -->\n <span class=\"material-symbols-outlined search\" (click)=\"toggleSearch()\"> search </span>\n </div>\n\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\n <div *ngIf=\"isSearchVisible\" class=\"search-bar p-3\">\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\n </div>\n\n <div class=\"contacts-list\">\n <ng-container *ngFor=\"let c of filteredList;let i = index\">\n <div class=\"contact-item\" *ngIf=\"i == 0\">\n <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">You\n </div>\n <div class=\"contact-title\"></div>\n </div>\n </div>\n <div class=\"contact-item\">\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\n </div>\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\n 'Unknown'}}</div>\n </div>\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': c?.hold }\" (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 </ng-container>\n </div>\n </div>\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant && false\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> 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 filteredList\">\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\n </div>\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\n 'Unknown'}}</div>\n </div>\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (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 <!-- contact list panel -->\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 <div class=\"d-flex justify-content-between mt-2\">\n <p></p>\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\n </span>\n </div>\n </div>\n\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\n <div class=\"search-bar p-3\">\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\n </div>\n <div class=\"contacts-list\">\n <div class=\"contact-item\" *ngFor=\"let c of filteredList\">\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)\" *ngIf=\"!c?.IsConnected\">\n <span class=\"material-symbols-outlined\"> call </span>\n <span class=\"label\">Call</span>\n </button>\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\" *ngIf=\"c?.IsConnected\">\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)\" *ngIf=\"c?.IsConnected\">\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 <!-- Incoming call user details shown in model -->\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n <!-- <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"'assets/images/user.jpg'\" alt=\"\" width=\"100\" />\n </div> -->\n <div class=\"text-center\">\n <h3 class=\"text-white\">test</h3>\n </div>\n <div class=\"f-13\">\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Subject:</div>\n <div class=\"ml-2\">test ww</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Email:</div>\n <div>test</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Number:</div>\n <div class=\"\">test</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"ml-2\">test</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Extension:</div>\n <div class=\"ml-2\">test</div>\n </div>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Image:</div>\n <div class=\"text-ellipsis\">\n <!-- <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n </ng-container> -->\n <ng-template #noImage>\n <span class=\"ml-2\">No Image Available</span>\n </ng-template>\n </div>\n </div>\n </div>\n\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"text-ellipsis\">test</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Point Name:</div>\n <div class=\"\">test</div>\n </div>\n <div class=\"col-6 mb-2\">\n <div class=\"\">Source Name:</div>\n <div class=\"\">test</div>\n </div>\n </div>\n </div>\n <!-- <div class=\"call-action-btns mt-0\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n </button>\n </div> -->\n </div>\n </div>\n</div>\n\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:20px;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;overflow:hidden}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important}.active-call{width:385px!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}.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}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.search-bar input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;outline:none;margin-bottom:10px}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}.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}.receive-btn{background-color:#28a745!important;border:2px solid #28a745!important;color:#fff!important}.receive-btn span{color:#fff!important}.scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;padding-left:100%;animation:scroll-left 12s linear infinite;font-size:16px}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.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:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted gray}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.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{width:100%;padding:5px 8px;height:100%;gap:8px}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;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}.incoming-banner{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: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-hold-contact{display:inline-flex;align-items:center;gap:6px;background:#727070;color:#fff;border:none;border-radius:50%;padding:8px 9px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;color:#fff;border:none;border-radius:50%;padding:8px 9px;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:20px;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%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;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:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
3175
+ CallProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallProgressComponent, selector: "lib-call-progress", inputs: { callData: "callData", selectedCallerId: "selectedCallerId", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex\">\n <div class=\"call-container\" *ngIf=\"!isMinimised\"\n [ngClass]=\"{'collops': isCollops, 'incoming-call-container': 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 <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\n <!-- All type Call Hold list -->\n <div class=\"held-call-banner\"\n *ngIf=\"currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)\">\n <div class=\"held-call-content\" *ngIf=\"isConferenceCallHold\">\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\">Conference Call</span>\n <!-- <span class=\"held-number\" *ngFor=\"let heldCall of currentCallList\">{{heldCall?.phone || ''}}</span> -->\n </div>\n </div>\n <div class=\"held-actions\">\n ////////////////////\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': isConferenceCallHold }\" (click)=\"swapCalls({},true)\">\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)=\"endCall(true)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n </button>\n <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls({},true)\" title=\"Swap calls\">\n <span class=\"material-symbols-outlined swap-icon\"> swap_vert </span>\n </button> -->\n </div>\n </div>\n <ng-container *ngFor=\"let heldCall of currentCallList\">\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold && !heldCall?.isConference\">\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?.name || 'Unknown number'}}</span>\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': heldCall?.isHold }\" (click)=\"swapCalls(heldCall)\">\n <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\"> phone_paused </span>\n <!-- <span class=\"label\">Hold</span> -->\n </button>\n <button class=\"conference-contact\" (click)=\"onEndCall(heldCall)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n <!-- <span class=\"label\">End</span> -->\n </button>\n <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\n <span class=\"material-symbols-outlined swap-icon\">swap_vert</span>\n </button> -->\n </div>\n </div>\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall && !heldCall?.isAcceptCall\">\n <div class=\"held-info\">\n <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\n <div class=\"held-caller\">\n <span class=\"held-label\">Incoming Call</span>\n <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"banner-btn receive-btn\" *ngIf=\"!heldCall?.isAcceptCall\">\n <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\n </button>\n <button class=\"call-btn-wrapper banner-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(heldCall)\"> call_end\n </span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\n (click)=\"onClickExpand(heldCall)\">\n <i class=\"fa fa-angle-right\"></i>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Compact banners for concurrent incoming (one per call) -->\n <ng-container *ngIf=\"currentCallList.length > 1 && !currentCall?.id\">\n <div class=\"incoming-banners-container\" *ngIf=\"!isConference && currentCallList.length > 1\">\n <div class=\"\">\n <ng-container *ngFor=\"let inc of currentCallList; let i = index\">\n <div class=\"incoming-banner\" *ngIf=\"inc?.isIncomingCall && !inc?.isAcceptCall\"\n [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 70) + '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)=\"add(inc)\">\n <span class=\"material-symbols-outlined\">call</span>\n </button>\n <button class=\"banner-btn reject-btn\" (click)=\"onEndCall(inc)\">\n <span class=\"material-symbols-outlined\">call_end</span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\n (click)=\"onClickExpand(inc)\">\n <i class=\"fa fa-angle-right\"></i>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- For single incoming call -->\n <div class=\"h-100 my-5\" style=\"display: flex; flex-direction: column;\"\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.phone || 'Unknown\n Number'}}</span>\n </div>\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1>{{currentCallList[0]?.c2cInformation?.name || 'Unknown Number'}}</h1>\n <p>{{currentCallList[0]?.c2cInformation?.number}}</p>\n </div>\n\n <div class=\"call-action-btns mt-auto\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"add(currentCallList[0])\"> call </span>\n </button>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\n </span>\n </button>\n </div>\n </div>\n\n <!-- For multiple incoming calls but not any call progress -->\n\n\n <!-- For single active call -->\n <div *ngIf=\"(!isConference || isConferenceCallHold) && !!currentCall?.id\"\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\n\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"currentCall?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\n </h1>\n <p>{{currentCall?.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\n </div>\n\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\"\n [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'\"\n [disabled]=\"!currentCall?.isAcceptCall\">\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]=\"currentCallList.length < 2\">\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]=\"!currentCall?.isAcceptCall\"\n (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]=\"!currentCall?.isAcceptCall\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\n </span>\n </button>\n <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\n (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]=\"!currentCall?.isAcceptCall\"\n (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\n\n <!-- conference call view -->\n <div class=\"conference-call-view\" *ngIf=\"isConference && !isConferenceCallHold\">\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=\"scroll-container\">\n <div class=\"scroll-text conf-name\">\n <ng-container *ngFor=\"let call of currentCallList; let i = index\">\n <ng-container *ngIf=\"call?.isConference\">\n <span *ngIf=\"i != 0\">&</span>\n {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"conf-timer\">{{ timer }}</div>\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 mt-auto\" *ngIf=\"!showKeypad\"\n [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'\">\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 *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\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=\"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(true)\">\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> groups_2 </span>\n </button>\n </div>\n\n <div class=\"conf-end\">\n <button class=\"circle-btn danger\" (click)=\"endCall(true)\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n\n\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 <!-- Add remove participant panel -->\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\n <div class=\"title\">Contacts</div>\n\n <!-- SEARCH ICON -->\n <span class=\"material-symbols-outlined search\" (click)=\"toggleSearch()\"> search </span>\n </div>\n\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\n <div *ngIf=\"isSearchVisible\" class=\"search-bar p-3\">\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\n </div>\n\n <div class=\"contacts-list\">\n <ng-container *ngFor=\"let c of filteredList;let i = index\">\n <div class=\"contact-item\" *ngIf=\"i == 0\">\n <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">You\n </div>\n <div class=\"contact-title\">{{selectedCallerId}}</div>\n </div>\n </div>\n <div class=\"contact-item\">\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\n </div>\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\n 'Unknown'}}</div>\n </div>\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': c?.hold }\" (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 </ng-container>\n </div>\n </div>\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant && false\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> 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 filteredList\">\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\n </div>\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\n 'Unknown'}}</div>\n </div>\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (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 <!-- contact list panel -->\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 <div class=\"d-flex justify-content-between mt-2\">\n <p></p>\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\n </span>\n </div>\n </div>\n\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\n <div class=\"search-bar p-3\">\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\n </div>\n <div class=\"contacts-list\">\n <!-- <ng-container *ngFor=\"let c of filteredList; let i = index\"> -->\n <div class=\"\">\n <h4>In This Call</h4>\n </div>\n <br class=\"m-2\">\n <div class=\"contact-item\">\n <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">You\n </div>\n <div class=\"contact-title\">{{selectedCallerId}}</div>\n </div>\n </div>\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?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\n </div>\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\n 'Unknown'}}</div>\n </div>\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': c?.hold }\" (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 <br class=\"m-2\">\n <div>\n <h4>Contacts</h4>\n </div>\n <br class=\"m-2\">\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)\" *ngIf=\"!c?.IsConnected\">\n <span class=\"material-symbols-outlined\"> call </span>\n <span class=\"label\">Call</span>\n </button>\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\" *ngIf=\"c?.IsConnected\">\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)\" *ngIf=\"c?.IsConnected\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n <!-- <span class=\"label\">End</span> -->\n </button>\n </div>\n <!-- </ng-container> -->\n </div>\n </div>\n\n <!-- Incoming call user details shown in model -->\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n <!-- <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"'assets/images/user.jpg'\" alt=\"\" width=\"100\" />\n </div> -->\n <div class=\"text-center\">\n <h3 class=\"text-white\">test</h3>\n </div>\n <div class=\"f-13\">\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Subject:</div>\n <div class=\"ml-2\">test ww</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Email:</div>\n <div>test</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Number:</div>\n <div class=\"\">test</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"ml-2\">test</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Extension:</div>\n <div class=\"ml-2\">test</div>\n </div>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Image:</div>\n <div class=\"text-ellipsis\">\n <!-- <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n </ng-container> -->\n <ng-template #noImage>\n <span class=\"ml-2\">No Image Available</span>\n </ng-template>\n </div>\n </div>\n </div>\n\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"text-ellipsis\">test</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Point Name:</div>\n <div class=\"\">test</div>\n </div>\n <div class=\"col-6 mb-2\">\n <div class=\"\">Source Name:</div>\n <div class=\"\">test</div>\n </div>\n </div>\n </div>\n <!-- <div class=\"call-action-btns mt-0\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n </button>\n </div> -->\n </div>\n </div>\n</div>\n\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:20px;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;overflow:hidden}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important}.active-call{width:385px!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}.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}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.search-bar input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;outline:none;margin-bottom:10px}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}.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}.receive-btn{background-color:#28a745!important;border:2px solid #28a745!important;color:#fff!important}.receive-btn span{color:#fff!important}.scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;padding-left:100%;animation:scroll-left 12s linear infinite;font-size:16px}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.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:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted gray}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.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{width:100%;padding:5px 8px;height:100%;gap:8px}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;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}.incoming-banner{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: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-hold-contact{display:inline-flex;align-items:center;gap:6px;background:#727070;color:#fff;border:none;border-radius:50%;padding:8px 9px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;color:#fff;border:none;border-radius:50%;padding:8px 9px;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:20px;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%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;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:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
3144
3176
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
3145
3177
  type: Component,
3146
- args: [{ selector: 'lib-call-progress', template: "<div class=\"d-flex\">\n <div class=\"call-container\" *ngIf=\"!isMinimised\"\n [ngClass]=\"{'collops': isCollops, 'incoming-call-container': 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 <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\n <!-- All type Call Hold list -->\n <div class=\"held-call-banner\"\n *ngIf=\"currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)\">\n <div class=\"held-call-content\" *ngIf=\"isConferenceCallHold\">\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\">Conference Call</span>\n <!-- <span class=\"held-number\" *ngFor=\"let heldCall of currentCallList\">{{heldCall?.phone || ''}}</span> -->\n </div>\n </div>\n <div class=\"held-actions\">\n ////////////////////\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': isConferenceCallHold }\" (click)=\"swapCalls({},true)\">\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)=\"endCall(true)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n </button>\n <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls({},true)\" title=\"Swap calls\">\n <span class=\"material-symbols-outlined swap-icon\"> swap_vert </span>\n </button> -->\n </div>\n </div>\n <ng-container *ngFor=\"let heldCall of currentCallList\">\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold && !heldCall?.isConference\">\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?.name || 'Unknown number'}}</span>\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': heldCall?.isHold }\" (click)=\"swapCalls(heldCall)\">\n <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\"> phone_paused </span>\n <!-- <span class=\"label\">Hold</span> -->\n </button>\n <button class=\"conference-contact\" (click)=\"onEndCall(heldCall)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n <!-- <span class=\"label\">End</span> -->\n </button>\n <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\n <span class=\"material-symbols-outlined swap-icon\">swap_vert</span>\n </button> -->\n </div>\n </div>\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall && !heldCall?.isAcceptCall\">\n <div class=\"held-info\">\n <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\n <div class=\"held-caller\">\n <span class=\"held-label\">Incoming Call</span>\n <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"banner-btn receive-btn\" *ngIf=\"!heldCall?.isAcceptCall\">\n <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\n </button>\n <button class=\"call-btn-wrapper banner-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(heldCall)\"> call_end\n </span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\n (click)=\"onClickExpand(heldCall)\">\n <i class=\"fa fa-angle-right\"></i>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Compact banners for concurrent incoming (one per call) -->\n <ng-container *ngIf=\"currentCallList.length > 1 && !currentCall?.id\">\n <div class=\"incoming-banners-container\" *ngIf=\"!isConference && currentCallList.length > 1\">\n <div class=\"\">\n <ng-container *ngFor=\"let inc of currentCallList; let i = index\">\n <div class=\"incoming-banner\" *ngIf=\"inc?.isIncomingCall && !inc?.isAcceptCall\"\n [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 70) + '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)=\"add(inc)\">\n <span class=\"material-symbols-outlined\">call</span>\n </button>\n <button class=\"banner-btn reject-btn\" (click)=\"onEndCall(inc)\">\n <span class=\"material-symbols-outlined\">call_end</span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\n (click)=\"onClickExpand(inc)\">\n <i class=\"fa fa-angle-right\"></i>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- For single incoming call -->\n <div class=\"h-100 my-5\" style=\"display: flex; flex-direction: column;\"\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.phone || 'Unknown\n Number'}}</span>\n </div>\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1>{{currentCallList[0]?.c2cInformation?.name || 'Unknown Number'}}</h1>\n <p>{{currentCallList[0]?.c2cInformation?.number}}</p>\n </div>\n\n <div class=\"call-action-btns mt-auto\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"add(currentCallList[0])\"> call </span>\n </button>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\n </span>\n </button>\n </div>\n </div>\n\n <!-- For multiple incoming calls but not any call progress -->\n\n\n <!-- For single active call -->\n <div *ngIf=\"(!isConference || isConferenceCallHold) && !!currentCall?.id\"\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\n\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"currentCall?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\n </h1>\n <p>{{currentCall?.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\n </div>\n\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\"\n [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'\"\n [disabled]=\"!currentCall?.isAcceptCall\">\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]=\"currentCallList.length < 2\">\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]=\"!currentCall?.isAcceptCall\"\n (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]=\"!currentCall?.isAcceptCall\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\n </span>\n </button>\n <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\n (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]=\"!currentCall?.isAcceptCall\"\n (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\n\n <!-- conference call view -->\n <div class=\"conference-call-view\" *ngIf=\"isConference && !isConferenceCallHold\">\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=\"scroll-container\">\n <div class=\"scroll-text conf-name\">\n <ng-container *ngFor=\"let call of currentCallList; let i = index\">\n <ng-container *ngIf=\"call?.isConference\">\n <span *ngIf=\"i != 0\">&</span>\n {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"conf-timer\">{{ timer }}</div>\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 mt-auto\" *ngIf=\"!showKeypad\"\n [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'\">\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 *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\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=\"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(true)\">\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> groups_2 </span>\n </button>\n </div>\n\n <div class=\"conf-end\">\n <button class=\"circle-btn danger\" (click)=\"endCall(true)\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n\n\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 <!-- Add remove participant panel -->\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\n <div class=\"title\">Contacts</div>\n\n <!-- SEARCH ICON -->\n <span class=\"material-symbols-outlined search\" (click)=\"toggleSearch()\"> search </span>\n </div>\n\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\n <div *ngIf=\"isSearchVisible\" class=\"search-bar p-3\">\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\n </div>\n\n <div class=\"contacts-list\">\n <ng-container *ngFor=\"let c of filteredList;let i = index\">\n <div class=\"contact-item\" *ngIf=\"i == 0\">\n <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">You\n </div>\n <div class=\"contact-title\"></div>\n </div>\n </div>\n <div class=\"contact-item\">\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\n </div>\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\n 'Unknown'}}</div>\n </div>\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': c?.hold }\" (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 </ng-container>\n </div>\n </div>\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant && false\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> 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 filteredList\">\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\n </div>\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\n 'Unknown'}}</div>\n </div>\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (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 <!-- contact list panel -->\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 <div class=\"d-flex justify-content-between mt-2\">\n <p></p>\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\n </span>\n </div>\n </div>\n\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\n <div class=\"search-bar p-3\">\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\n </div>\n <div class=\"contacts-list\">\n <div class=\"contact-item\" *ngFor=\"let c of filteredList\">\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)\" *ngIf=\"!c?.IsConnected\">\n <span class=\"material-symbols-outlined\"> call </span>\n <span class=\"label\">Call</span>\n </button>\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\" *ngIf=\"c?.IsConnected\">\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)\" *ngIf=\"c?.IsConnected\">\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 <!-- Incoming call user details shown in model -->\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n <!-- <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"'assets/images/user.jpg'\" alt=\"\" width=\"100\" />\n </div> -->\n <div class=\"text-center\">\n <h3 class=\"text-white\">test</h3>\n </div>\n <div class=\"f-13\">\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Subject:</div>\n <div class=\"ml-2\">test ww</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Email:</div>\n <div>test</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Number:</div>\n <div class=\"\">test</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"ml-2\">test</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Extension:</div>\n <div class=\"ml-2\">test</div>\n </div>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Image:</div>\n <div class=\"text-ellipsis\">\n <!-- <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n </ng-container> -->\n <ng-template #noImage>\n <span class=\"ml-2\">No Image Available</span>\n </ng-template>\n </div>\n </div>\n </div>\n\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"text-ellipsis\">test</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Point Name:</div>\n <div class=\"\">test</div>\n </div>\n <div class=\"col-6 mb-2\">\n <div class=\"\">Source Name:</div>\n <div class=\"\">test</div>\n </div>\n </div>\n </div>\n <!-- <div class=\"call-action-btns mt-0\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n </button>\n </div> -->\n </div>\n </div>\n</div>\n\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:20px;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;overflow:hidden}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important}.active-call{width:385px!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}.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}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.search-bar input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;outline:none;margin-bottom:10px}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}.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}.receive-btn{background-color:#28a745!important;border:2px solid #28a745!important;color:#fff!important}.receive-btn span{color:#fff!important}.scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;padding-left:100%;animation:scroll-left 12s linear infinite;font-size:16px}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.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:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted gray}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.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{width:100%;padding:5px 8px;height:100%;gap:8px}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;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}.incoming-banner{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: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-hold-contact{display:inline-flex;align-items:center;gap:6px;background:#727070;color:#fff;border:none;border-radius:50%;padding:8px 9px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;color:#fff;border:none;border-radius:50%;padding:8px 9px;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:20px;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%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;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:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.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"] }]
3178
+ args: [{ selector: 'lib-call-progress', template: "<div class=\"d-flex\">\n <div class=\"call-container\" *ngIf=\"!isMinimised\"\n [ngClass]=\"{'collops': isCollops, 'incoming-call-container': 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 <!-- <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming || true\"> -->\n <!-- All type Call Hold list -->\n <div class=\"held-call-banner\"\n *ngIf=\"currentCallList.length > 1 && !!currentCall && ((isConferenceCallHold || isConference) || !isConference)\">\n <div class=\"held-call-content\" *ngIf=\"isConferenceCallHold\">\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\">Conference Call</span>\n <!-- <span class=\"held-number\" *ngFor=\"let heldCall of currentCallList\">{{heldCall?.phone || ''}}</span> -->\n </div>\n </div>\n <div class=\"held-actions\">\n ////////////////////\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': isConferenceCallHold }\" (click)=\"swapCalls({},true)\">\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)=\"endCall(true)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n </button>\n <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls({},true)\" title=\"Swap calls\">\n <span class=\"material-symbols-outlined swap-icon\"> swap_vert </span>\n </button> -->\n </div>\n </div>\n <ng-container *ngFor=\"let heldCall of currentCallList\">\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isHold && !heldCall?.isConference\">\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?.name || 'Unknown number'}}</span>\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': heldCall?.isHold }\" (click)=\"swapCalls(heldCall)\">\n <span class=\"material-symbols-outlined\" title=\"{{heldCall?.isHold? 'Resume':'Hold'}}\"> phone_paused </span>\n <!-- <span class=\"label\">Hold</span> -->\n </button>\n <button class=\"conference-contact\" (click)=\"onEndCall(heldCall)\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n <!-- <span class=\"label\">End</span> -->\n </button>\n <!-- <button class=\"held-btn swap-btn\" (click)=\"swapCalls(heldCall)\" title=\"Swap calls\">\n <span class=\"material-symbols-outlined swap-icon\">swap_vert</span>\n </button> -->\n </div>\n </div>\n <div class=\"held-call-content\" *ngIf=\"heldCall?.isIncomingCall && !heldCall?.isAcceptCall\">\n <div class=\"held-info\">\n <span class=\"material-symbols-outlined hold-icon\">phone_callback</span>\n <div class=\"held-caller\">\n <span class=\"held-label\">Incoming Call</span>\n <span class=\"held-name\">{{heldCall?.name || 'Unknown number'}}</span>\n <span class=\"held-number\">{{heldCall?.phone || ''}}</span>\n </div>\n </div>\n <div class=\"held-actions\">\n <button class=\"banner-btn receive-btn\" *ngIf=\"!heldCall?.isAcceptCall\">\n <span class=\"material-symbols-outlined\" (click)=\"add(heldCall)\"> call </span>\n </button>\n <button class=\"call-btn-wrapper banner-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(heldCall)\"> call_end\n </span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\n (click)=\"onClickExpand(heldCall)\">\n <i class=\"fa fa-angle-right\"></i>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Compact banners for concurrent incoming (one per call) -->\n <ng-container *ngIf=\"currentCallList.length > 1 && !currentCall?.id\">\n <div class=\"incoming-banners-container\" *ngIf=\"!isConference && currentCallList.length > 1\">\n <div class=\"\">\n <ng-container *ngFor=\"let inc of currentCallList; let i = index\">\n <div class=\"incoming-banner\" *ngIf=\"inc?.isIncomingCall && !inc?.isAcceptCall\"\n [ngStyle]=\"{ top: ((isCallOnHold && heldCall) ? 64 : 0) + (i * 70) + '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)=\"add(inc)\">\n <span class=\"material-symbols-outlined\">call</span>\n </button>\n <button class=\"banner-btn reject-btn\" (click)=\"onEndCall(inc)\">\n <span class=\"material-symbols-outlined\">call_end</span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\"\n (click)=\"onClickExpand(inc)\">\n <i class=\"fa fa-angle-right\"></i>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- For single incoming call -->\n <div class=\"h-100 my-5\" style=\"display: flex; flex-direction: column;\"\n *ngIf=\"currentCallList.length === 1 && currentCallList[0]?.isIncomingCall && !currentCallList[0]?.isAcceptCall \">\n <div class=\"callToNum\">Incoming call on <br /><span>{{currentCallList[0]?.phone || 'Unknown\n Number'}}</span>\n </div>\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"currentCallList[0]?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1>{{currentCallList[0]?.c2cInformation?.name || 'Unknown Number'}}</h1>\n <p>{{currentCallList[0]?.c2cInformation?.number}}</p>\n </div>\n\n <div class=\"call-action-btns mt-auto\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!newIncomingCallsList[0]?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"add(currentCallList[0])\"> call </span>\n </button>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"onEndCall(currentCallList[0])\"> call_end\n </span>\n </button>\n </div>\n </div>\n\n <!-- For multiple incoming calls but not any call progress -->\n\n\n <!-- For single active call -->\n <div *ngIf=\"(!isConference || isConferenceCallHold) && !!currentCall?.id\"\n [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative'}\" class=\"active-call\">\n\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"currentCall?.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{currentCall?.name || 'Unknown number'}}\n </h1>\n <p>{{currentCall?.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{currentCall?.time || timer}}</h4>\n </div>\n\n <div class=\"record-action-btns\" *ngIf=\"!showKeypad\"\n [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'\"\n [disabled]=\"!currentCall?.isAcceptCall\">\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]=\"currentCallList.length < 2\">\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]=\"!currentCall?.isAcceptCall\"\n (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]=\"!currentCall?.isAcceptCall\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve\n </span>\n </button>\n <button class=\"call-sec-btn\" [disabled]=\"!currentCall?.isAcceptCall\"\n (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]=\"!currentCall?.isAcceptCall\"\n (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\n\n <!-- conference call view -->\n <div class=\"conference-call-view\" *ngIf=\"isConference && !isConferenceCallHold\">\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=\"scroll-container\">\n <div class=\"scroll-text conf-name\">\n <ng-container *ngFor=\"let call of currentCallList; let i = index\">\n <ng-container *ngIf=\"call?.isConference\">\n <span *ngIf=\"i != 0\">&</span>\n {{call?.name ? call?.name : call?.phone || 'Unknown number'}}\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"conf-timer\">{{ timer }}</div>\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 mt-auto\" *ngIf=\"!showKeypad\"\n [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'\">\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 *ngIf=\"showKeypad\" class=\"sendDigit mt-2\">\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=\"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(true)\">\n <span class=\"material-symbols-outlined\"> {{ isMute ? 'mic_off' : 'mic' }} </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleKeypad()\">\n <span class=\"material-symbols-outlined\"> transition_dissolve </span>\n </button>\n <button class=\"circle-btn\" (click)=\"toggleContactsPanel()\">\n <span class=\"material-symbols-outlined\"> groups_2 </span>\n </button>\n </div>\n\n <div class=\"conf-end\">\n <button class=\"circle-btn danger\" (click)=\"endCall(true)\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n </div>\n\n\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 <!-- Add remove participant panel -->\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> chevron_left </span>\n <div class=\"title\">Contacts</div>\n\n <!-- SEARCH ICON -->\n <span class=\"material-symbols-outlined search\" (click)=\"toggleSearch()\"> search </span>\n </div>\n\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\n <div *ngIf=\"isSearchVisible\" class=\"search-bar p-3\">\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\n </div>\n\n <div class=\"contacts-list\">\n <ng-container *ngFor=\"let c of filteredList;let i = index\">\n <div class=\"contact-item\" *ngIf=\"i == 0\">\n <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">You\n </div>\n <div class=\"contact-title\">{{selectedCallerId}}</div>\n </div>\n </div>\n <div class=\"contact-item\">\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\n </div>\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\n 'Unknown'}}</div>\n </div>\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': c?.hold }\" (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 </ng-container>\n </div>\n </div>\n <div class=\"contacts-panel\" *ngIf=\"isAddRemoveParticipant && false\">\n <div class=\"contacts-header\">\n <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel(true)\"> 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 filteredList\">\n <img class=\"contact-avatar\" [src]=\"c?.img || 'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">{{c?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\n </div>\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\n 'Unknown'}}</div>\n </div>\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (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 <!-- contact list panel -->\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 <div class=\"d-flex justify-content-between mt-2\">\n <p></p>\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"toggleContactsPanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\n </span>\n </div>\n </div>\n\n <!-- SEARCH INPUT (visible when isSearchVisible = true) -->\n <div class=\"search-bar p-3\">\n <input type=\"text\" placeholder=\"Search...\" [(ngModel)]=\"searchText\" (input)=\"applyFilter()\" />\n </div>\n <div class=\"contacts-list\">\n <!-- <ng-container *ngFor=\"let c of filteredList; let i = index\"> -->\n <div class=\"\">\n <h4>In This Call</h4>\n </div>\n <br class=\"m-2\">\n <div class=\"contact-item\">\n <img class=\"contact-avatar\" [src]=\"'assets/images/user.jpg'\" alt=\"\" />\n <div class=\"contact-info\">\n <div class=\"contact-name\">You\n </div>\n <div class=\"contact-title\">{{selectedCallerId}}</div>\n </div>\n </div>\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?.direction == 'outgoing-call' ? c?.toName || 'Unknown' : c?.fromName || 'Unknown'}}\n </div>\n <div class=\"contact-title\">{{ c?.direction == 'outgoing-call' ? c?.to || 'Unknown' : c?.from ||\n 'Unknown'}}</div>\n </div>\n <button class=\"conference-hold-contact\" [ngClass]=\"{ 'on-hold': c?.hold }\" (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 <br class=\"m-2\">\n <div>\n <h4>Contacts</h4>\n </div>\n <br class=\"m-2\">\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)\" *ngIf=\"!c?.IsConnected\">\n <span class=\"material-symbols-outlined\"> call </span>\n <span class=\"label\">Call</span>\n </button>\n <button class=\"conference-hold-contact mr-2\" [ngClass]=\"{ 'on-hold': c?.hold }\" (click)=\"onHoldCall(c)\" *ngIf=\"c?.IsConnected\">\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)\" *ngIf=\"c?.IsConnected\">\n <span class=\"material-symbols-outlined\" title=\"Call End\"> call_end </span>\n <!-- <span class=\"label\">End</span> -->\n </button>\n </div>\n <!-- </ng-container> -->\n </div>\n </div>\n\n <!-- Incoming call user details shown in model -->\n <div class=\"call-container-model p-3 text-white model-content call-container\" *ngIf=\"isClickExpand\">\n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n <!-- <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"'assets/images/user.jpg'\" alt=\"\" width=\"100\" />\n </div> -->\n <div class=\"text-center\">\n <h3 class=\"text-white\">test</h3>\n </div>\n <div class=\"f-13\">\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Subject:</div>\n <div class=\"ml-2\">test ww</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Email:</div>\n <div>test</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Number:</div>\n <div class=\"\">test</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"ml-2\">test</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Extension:</div>\n <div class=\"ml-2\">test</div>\n </div>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Image:</div>\n <div class=\"text-ellipsis\">\n <!-- <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n </ng-container> -->\n <ng-template #noImage>\n <span class=\"ml-2\">No Image Available</span>\n </ng-template>\n </div>\n </div>\n </div>\n\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"text-ellipsis\">test</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Point Name:</div>\n <div class=\"\">test</div>\n </div>\n <div class=\"col-6 mb-2\">\n <div class=\"\">Source Name:</div>\n <div class=\"\">test</div>\n </div>\n </div>\n </div>\n <!-- <div class=\"call-action-btns mt-0\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"selectedIncomingCall?.isCallConnected && !isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button> \n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"selectedIncomingCall?.isCallConnected && isPaused\" (click)=\"resumeRecording('')\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n </button>\n </div> -->\n </div>\n </div>\n</div>\n\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:20px;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;overflow:hidden}.collops{height:660px!important}.incoming-call-container{flex-flow:row!important}.active-call{width:385px!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}.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}.togglearrow-arrow.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.search-bar input{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;outline:none;margin-bottom:10px}.togglearrow-arrow.disabled:hover{opacity:.3;cursor:not-allowed}.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}.receive-btn{background-color:#28a745!important;border:2px solid #28a745!important;color:#fff!important}.receive-btn span{color:#fff!important}.scroll-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.scroll-text{display:inline-block;padding-left:100%;animation:scroll-left 12s linear infinite;font-size:16px}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-100%)}}.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:#1644f09c;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px;max-height:220px;overflow-y:auto}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 6px 0;padding-bottom:6px;border-bottom:1px dotted gray}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.swap-icon{font-size:24px}.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{width:100%;padding:5px 8px;height:100%;gap:8px}.call-container-model{width:385px!important;height:646px!important;margin:auto 0 0 1px;border-radius:20px;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}.incoming-banner{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: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-hold-contact{display:inline-flex;align-items:center;gap:6px;background:#727070;color:#fff;border:none;border-radius:50%;padding:8px 9px;cursor:pointer}.conference-hold-contact.on-hold{background:#28a745!important;color:#fff}.conference-contact{display:inline-flex;align-items:center;gap:6px;background:#f80909;color:#fff;border:none;border-radius:50%;padding:8px 9px;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:20px;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%}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.conference-call-view{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;padding:12px 16px 35px;color:#fff;height:100%}.conf-heading{display:flex;align-items:center;gap:8px;margin-top:8px}.conf-icon{color:#4579aa;font-size:32px;width:50px;height:50px;border:1px solid gray;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e1e1e1}.conf-title{font-weight:600;font-size:20px}.conf-name{margin-top:10px;font-size:17px;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:#ff0000!important;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:12px;width:82px!important;height:auto}.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"] }]
3147
3179
  }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }, { type: TwilioService }]; }, propDecorators: { callData: [{
3148
3180
  type: Input
3149
3181
  }], selectedCallerId: [{