@vgroup/dialbox 0.1.55 → 0.1.57

package/fesm2015/vgroup-dialbox.mjs

@@ -1571,10 +1571,16 @@ class IncomingCallComponent {
         this.dedicatedNum = '';
         this.shouldRecordCall = false;
         this.isClickExpand = false;
+        this.isRecording = false;
+        this.isPaused = false;
         this.isTwilioConnected = false;
         this.closeIncomingCallDiv = new EventEmitter();
         this.incomingCallsNewList = new EventEmitter();
         this.selectedIncomingCallInfo = new EventEmitter();
+        this.disbaleEndCallBtn = false;
+        this.incomingCallSid = '';
+        this.incomingRecordCall = false;
+        this.timeElapsed = 0;
         console.log('IncomingCallComponent');
     }
     ngOnInit() {
@@ -1744,12 +1750,91 @@ class IncomingCallComponent {
             return acc;
         }, {});
     }
+    toggleRecording(sid) {
+        if (this.isRecording) {
+            this.stopRecording();
+        }
+        else {
+            this.startRecording();
+        }
+    }
+    startRecording() {
+        let sid;
+        const details = this.extensionService.getCallSid();
+        this.incomingCallSid = details.callSid;
+        this.incomingRecordCall = details.recordCall;
+        sid = this.incomingCallSid ? this.incomingCallSid : this.CallSid;
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return;
+        // }
+        this.extensionService.getCallRecording(sid).subscribe(response => {
+            this.isRecording = true;
+            this.isPaused = false;
+            // this.timeElapsed = 0;
+            this.startTimer1();
+        }, error => {
+            console.error('Error starting recording', error);
+        });
+    }
+    stopRecording() {
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return;
+        // }
+        this.isRecording = false;
+        this.isPaused = false;
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe();
+        }
+    }
+    pauseRecording() {
+        const details = this.extensionService.getCallSid();
+        this.incomingCallSid = details.callSid;
+        this.incomingRecordCall = details.recordCall;
+        const sid = this.incomingCallSid ? this.incomingCallSid : this.CallSid;
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return;
+        // }
+        this.extensionService.pauseOrResumeRecording(sid, 'pause').subscribe(response => {
+            //   this.stopRecordingTimer();
+            this.isPaused = true;
+        }, error => {
+            console.error('Error pausing recording:', error);
+            // Consider updating the UI to show the error state
+        });
+    }
+    resumeRecording(sid) {
+        //   let sid;
+        const details = this.extensionService.getCallSid();
+        this.incomingCallSid = details.callSid;
+        this.incomingRecordCall = details.recordCall;
+        sid = this.incomingCallSid ? this.incomingCallSid : this.CallSid;
+        // if (!this.incomingRecordCall && !this.recordCall) {
+        //   return; // Skip if recording is not enabled
+        // }
+        this.extensionService.pauseOrResumeRecording(sid, 'resume').subscribe(response => {
+            this.isPaused = false;
+            this.startTimer1();
+        }, error => {
+            console.error('Error resuming recording', error);
+        });
+    }
+    startTimer1() {
+        this.timerSubscription = interval(1000).subscribe(() => {
+            this.timeElapsed++;
+        });
+    }
+    stopRecordingTimer() {
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe(); // Pause the timer
+            this.timerSubscription = undefined; // Optionally reset the subscription
+        }
+    }
 }
 IncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, deps: [{ token: ExtensionService }, { token: TwilioService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
-IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" style=\"width: 100%; left: 116px;\" *ngIf=\"newIncomingCallsList?.length > 0\">\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\" >\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">            \n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\"  (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand || newIncomingCallsList?.length == 1\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\"  (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n                    <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                    <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                </button>\n                <button class=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\n          </div>\n          </div>\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [".call-container{width:752px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px;span {color: white; line-height: unset !important;}}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" style=\"width: 100%; left: 116px;\" *ngIf=\"newIncomingCallsList?.length > 0\">\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\" *ngIf=\"newIncomingCallsList?.length > 1\">\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">            \n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\"  (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\n                                    </button>\n                                    <div class=\"record-btn-container\">\n                                        <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                                            <span class=\"recording-icon\"></span>\n                                        </button>   \n                                        <div class=\"pause-resume-btns\">\n                                            <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n                                                <span class=\"material-symbols-outlined\"> pause </span>\n                                            </button>\n                                            <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording('')\">\n                                                <span class=\"material-symbols-outlined\"> play_arrow </span>\n                                            </button>\n                                        </div>\n                                    </div>\n                                    <button class=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand || newIncomingCallsList?.length == 1\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\"  (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n                    <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                    <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                </button>\n                <button class=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\n          </div>\n          </div>\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [".call-container{width:752px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px;span {color: white; line-height: unset !important;}}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" style=\"width: 100%; left: 116px;\" *ngIf=\"newIncomingCallsList?.length > 0\">\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\" >\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">            \n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\"  (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand || newIncomingCallsList?.length == 1\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\"  (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n                    <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                    <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                </button>\n                <button class=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\n          </div>\n          </div>\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [".call-container{width:752px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px;span {color: white; line-height: unset !important;}}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}\n"] }]
+            args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" style=\"width: 100%; left: 116px;\" *ngIf=\"newIncomingCallsList?.length > 0\">\n    <div class=\"collops\">\n        <div class=\"d-flex w-100\">\n            <div class=\"d-flex flex-column container-fluid\" *ngIf=\"newIncomingCallsList?.length > 1\">\n                <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n                <ng-container *ngFor=\"let data of newIncomingCallsList\">            \n                    <div class=\"p-2 \">\n                        <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n                            <div class=\"img\">\n                                <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n                            </div>\n                            <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n                                <div class=\"callerDetails-wrapper\">\n                                    <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n                                    <p class=\"break-word\">{{data?.userInfo?.displayNum ? data?.userInfo?.c2cInformation?.number : data?.userInfo?.c2cInformation?.number }}</p>\n                                </div>  \n                                <div class=\"d-flex align-items-center\">\n                                    <button class=\"call-btn-wrapper receive-btn\" *ngIf=\"!data?.isCallConnected\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n                                    </button>\n                                    <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.isCallConnected\"  (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic</span>\n                                    </button>\n                                    <div class=\"record-btn-container\">\n                                        <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording('')\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                                            <span class=\"recording-icon\"></span>\n                                        </button>   \n                                        <div class=\"pause-resume-btns\">\n                                            <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n                                                <span class=\"material-symbols-outlined\"> pause </span>\n                                            </button>\n                                            <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording('')\">\n                                                <span class=\"material-symbols-outlined\"> play_arrow </span>\n                                            </button>\n                                        </div>\n                                    </div>\n                                    <button class=\"call-btn-wrapper reject-btn\">\n                                        <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n                                    </button>\n                                    <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n         <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand || newIncomingCallsList?.length == 1\">   \n            <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n              <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n                  <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n              </div>\n              <div class=\"text-center\">\n                  <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n              </div>\n              <div class=\"f-13\">\n                <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Subject:</div>\n                        <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n                    </div>  \n                </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Email:</div>\n                        <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n                    </div>                      \n                </div>\n\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Number:</div>\n                          <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n                      </div>\n                      <div class=\"col-6\">\n                          <div class=\"\">Language:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n                      </div>\n                  </div>\n                  <div class=\"row mb-2\">\n                      <div class=\"col-6 mb-2\">\n                          <div class=\"\">Extension:</div>\n                          <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-3\">\n                    <div class=\"col-12 d-flex align-items-center mb-2\">\n                        <div class=\"me-2\">Image:</div>\n                        <div class=\"text-ellipsis\">\n                            <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n                                <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n                            </ng-container>\n                            <ng-template #noImage>\n                                <span class=\"ml-2\">No Image Available</span>\n                            </ng-template>\n                        </div>\n                    </div>  \n                </div>\n\n                  <div class=\" mb-4\">\n                      <div class=\"\">\n                          <div class=\"\">Message:</div>\n                          <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n                      </div>\n                  </div>\n\n                  <div class=\"row mb-2\">\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Point Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n                    </div>\n                    <div class=\"col-6 mb-2\">\n                        <div class=\"\">Source Name:</div>\n                        <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n                    </div>\n                </div>\n              </div>\n              <div class=\"call-action-btns mt-0\">\n                <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.isCallConnected\">\n                    <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n                </button>\n                <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.isCallConnected\"  (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n                    <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                    <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n                </button>\n                <button class=\"call-btn reject-btn\">\n                    <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n                </button>\n            </div>\n          </div>\n          </div>\n          </div>\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />               \n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>", styles: [".call-container{width:752px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:395px!important}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px;span {color: white; line-height: unset !important;}}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: ExtensionService }, { type: TwilioService }, { type: NotificationService }]; }, propDecorators: { incomingCallData: [{
                 type: Input
             }], newIncomingCallsList: [{
@@ -1828,7 +1913,12 @@ class CallProgressComponent {
             }
         }
     }
-    ngAfterViewInit() { }
+    ngAfterViewInit() {
+        // this.isRecording = false;
+        // setTimeout(() => {
+        //   this.isRecording = false;
+        // }, 3000);
+    }
     startCall(callData) {
         return __awaiter(this, void 0, void 0, function* () {
             try {
@@ -2185,10 +2275,10 @@ class CallProgressComponent {
     }
 }
 CallProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, deps: [{ token: ExtensionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CallProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallProgressComponent, selector: "lib-call-progress", inputs: { callData: "callData", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand}\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n        <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n        (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n        <div [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative', 'width': '100%', 'left': callData?.isIncomingCall ? '100px' : '0'}\">\n            \n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n            <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n        </div>\n        <div class=\"callerDetails\">\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n        </div>\n        <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n            <div class=\"record-btn-container\">\n                <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"recording-icon\"></span>\n                </button>\n                <div class=\"pause-resume-btns\">\n                    <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n                        <span class=\"material-symbols-outlined\"> pause </span>\n                    </button>\n                    <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                        <span class=\"material-symbols-outlined\"> play_arrow </span>\n                    </button>\n                </div>\n            </div>\n            <div *ngIf=\"isRecording\" class=\"timer-display\">\n                {{ getFormattedTime() }}\n              </div>\n        </div>\n        <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n            <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n            <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n        </div>\n        <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n            <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                {{key.num}}\n                <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n            </div>\n        </div>\n        <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n            <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (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-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                <span class=\"material-symbols-outlined\"> call_end </span>\n            </button>\n            <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n                <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n            </button>\n        </div>\n        <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList", "deviceId"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
+CallProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CallProgressComponent, selector: "lib-call-progress", inputs: { callData: "callData", newIncomingCallData: "newIncomingCallData", newIncomingCallsList: "newIncomingCallsList", deviceId: "deviceId" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand && newIncomingCallsList?.length > 1}\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n        <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n        (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n        <div [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative', 'width': '100%', 'left': callData?.isIncomingCall ? '100px' : '0'}\">\n            \n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n            <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n        </div>\n        <div class=\"callerDetails\">\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n        </div>\n        <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n            <div class=\"record-btn-container\">\n                <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"recording-icon\"></span>\n                </button>       \n                <div class=\"pause-resume-btns\">\n                    <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n                        <span class=\"material-symbols-outlined\"> pause </span>\n                    </button>\n                    <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                        <span class=\"material-symbols-outlined\"> play_arrow </span>\n                    </button>\n                </div>\n            </div>\n            <div *ngIf=\"isRecording\" class=\"timer-display\">\n                {{ getFormattedTime() }}\n              </div>\n        </div>\n        <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n            <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n            <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n        </div>\n        <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n            <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                {{key.num}}\n                <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n            </div>\n        </div>\n        <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n            <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (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-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                <span class=\"material-symbols-outlined\"> call_end </span>\n            </button>\n            <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n                <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n            </button>\n        </div>\n        <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList", "deviceId"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-call-progress', template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand}\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n        <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n        (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n        <div [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative', 'width': '100%', 'left': callData?.isIncomingCall ? '100px' : '0'}\">\n            \n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n            <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n        </div>\n        <div class=\"callerDetails\">\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n        </div>\n        <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n            <div class=\"record-btn-container\">\n                <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"recording-icon\"></span>\n                </button>\n                <div class=\"pause-resume-btns\">\n                    <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n                        <span class=\"material-symbols-outlined\"> pause </span>\n                    </button>\n                    <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                        <span class=\"material-symbols-outlined\"> play_arrow </span>\n                    </button>\n                </div>\n            </div>\n            <div *ngIf=\"isRecording\" class=\"timer-display\">\n                {{ getFormattedTime() }}\n              </div>\n        </div>\n        <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n            <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n            <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n        </div>\n        <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n            <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                {{key.num}}\n                <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n            </div>\n        </div>\n        <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n            <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (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-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                <span class=\"material-symbols-outlined\"> call_end </span>\n            </button>\n            <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n                <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n            </button>\n        </div>\n        <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"] }]
+            args: [{ selector: 'lib-call-progress', template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand && newIncomingCallsList?.length > 1}\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n        <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n        (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n        <div [ngStyle]=\"{'display': 'flex', 'flex-direction': 'column', 'position': 'relative', 'width': '100%', 'left': callData?.isIncomingCall ? '100px' : '0'}\">\n            \n        <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n            <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n        </div>\n        <div class=\"callerDetails\">\n            <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n            <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n        </div>\n        <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n            <div class=\"record-btn-container\">\n                <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                    <span class=\"recording-icon\"></span>\n                </button>       \n                <div class=\"pause-resume-btns\">\n                    <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n                        <span class=\"material-symbols-outlined\"> pause </span>\n                    </button>\n                    <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                        <span class=\"material-symbols-outlined\"> play_arrow </span>\n                    </button>\n                </div>\n            </div>\n            <div *ngIf=\"isRecording\" class=\"timer-display\">\n                {{ getFormattedTime() }}\n              </div>\n        </div>\n        <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n            <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n            <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n        </div>\n        <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n            <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                {{key.num}}\n                <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n            </div>\n        </div>\n        <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n            <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (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-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                <span class=\"material-symbols-outlined\"> call_end </span>\n            </button>\n            <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n                <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n            </button>\n        </div>\n        <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n    </div>\n\n    <div class=\"wave-container\">\n        <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n            viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n            <defs>\n                <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n            </defs>\n            <g class=\"parallax\">\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n            </g>\n        </svg>\n    </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"] }]
         }], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { callData: [{
                 type: Input
             }], newIncomingCallData: [{