@vgroup/dialbox 0.1.97 → 0.1.98

package/fesm2015/vgroup-dialbox.mjs

@@ -2147,6 +2147,10 @@ class CallProgressComponent {
             const callerName = ((_b = this.call.customParameters) === null || _b === void 0 ? void 0 : _b.get('name')) || '-';
             const callerImg = ((_c = this.call.customParameters) === null || _c === void 0 ? void 0 : _c.get('image')) || 'assets/images/user.jpg';
             this.callData = Object.assign(Object.assign({}, this.callData), { phone: fromNumber, displayNum: fromNumber, name: callerName, img: callerImg });
+            // Ensure UI flags are properly set
+            this.isConcurrentIncoming = false;
+            this.incomingCallDiv = false;
+            this.showRingAnimation = false;
             // Restart timer for the resumed call
             this.startTimer();
             this.disbaleEndCallBtn = false;
@@ -2289,6 +2293,7 @@ class CallProgressComponent {
         }
     }
     closeIncomingCall(data) {
+        var _a, _b, _c, _d;
         // this.incomingCallDiv = false;
         if (data.show) {
             //this.showCallProgressEvent.emit()
@@ -2311,12 +2316,43 @@ class CallProgressComponent {
         }
         else {
             // incoming call rejected or auto-cancelled
+            console.log('Incoming call rejected/cancelled');
+            console.log('Current call status:', (_a = this.call) === null || _a === void 0 ? void 0 : _a.status());
+            console.log('Held call status:', (_b = this.heldCall) === null || _b === void 0 ? void 0 : _b.status());
             this.isConcurrentIncoming = false;
             this.incomingCallDiv = false;
-            // If there is NO active call, then propagate end. Otherwise keep ongoing UI.
-            if (!this.call || this.call.status() !== 'open') {
+            // Check if there's a held call that needs to be restored
+            if (this.heldCall && this.heldCall.status() === 'open') {
+                console.log('Restoring held call to active');
+                // Make held call the active call
+                this.call = this.heldCall;
+                this.heldCall = undefined;
+                this.isCallOnHold = false;
+                // Unmute the resumed call
+                this.call.mute(false);
+                this.isMute = false;
+                // Update UI with the resumed call info
+                const fromNumber = this.call.parameters['From'];
+                const callerName = ((_c = this.call.customParameters) === null || _c === void 0 ? void 0 : _c.get('name')) || '-';
+                const callerImg = ((_d = this.call.customParameters) === null || _d === void 0 ? void 0 : _d.get('image')) || 'assets/images/user.jpg';
+                this.callData = Object.assign(Object.assign({}, this.callData), { phone: fromNumber, displayNum: fromNumber, name: callerName, img: callerImg });
+                this.disbaleEndCallBtn = false;
+                this.showRingAnimation = false;
+                console.log('Held call restored successfully');
+            }
+            // Check if there's an active call (for cases where incoming was rejected before being answered)
+            else if (this.call && this.call.status() === 'open') {
+                console.log('Active call exists, keeping UI visible');
+                // Just ensure UI flags are correct to show the active call
+                this.disbaleEndCallBtn = false;
+                this.showRingAnimation = false;
+            }
+            // No active or held call - completely end
+            else {
+                console.log('No active or held call, ending completely');
                 this.endCallEvent.emit();
             }
+            this.cdr.detectChanges();
         }
     }
     clearInputs() {
@@ -2472,10 +2508,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 }, { token: TwilioService }], 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\"\n    [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n    <lib-incoming-call *ngIf=\"incomingCallDiv || !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n        [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n        (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n        (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n\n    <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n        <div class=\"held-call-banner\" *ngIf=\"isCallOnHold && heldCall\">\n            <div class=\"held-call-content\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Hold</span>\n                        <span class=\"held-number\">{{heldCall.customParameters?.get('displayNumber') ||\n                            heldCall.parameters?.['From'] || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"held-btn swap-btn\" (click)=\"swapCalls()\" title=\"Swap calls\">\n                        <span>Swap</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Compact banner for concurrent incoming -->\n        <div class=\"incoming-banner\" *ngIf=\"isConcurrentIncoming && newIncomingCallsList?.length > 0\">\n            <div class=\"incoming-banner-content\">\n                <div class=\"incoming-info\">\n                    <span class=\"incoming-label\">Incoming call</span>\n                    <div class=\"incoming-caller\">\n                        <span class=\"caller-name\">{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name ||\n                            newIncomingCallsList[0]?.customParameters?.get('name') || '-'}}</span>\n                        <span class=\"caller-number\">{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.number ||\n                            newIncomingCallsList[0]?.parameters?.From || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"incoming-actions\">\n                    <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(newIncomingCallsList[0])\">\n                        <span class=\"material-symbols-outlined\">call</span>\n                    </button>\n                    <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(newIncomingCallsList[0])\">\n                        <span class=\"material-symbols-outlined\">call_end</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div\n            [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\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n            <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"flex justify-content-center\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n                <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\">\n                    <span>Merge</span>\n                </button>\n            </div>\n            <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n                <div class=\"flex align-items-center justify-content-evenly\">\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\"\n                        [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" (click)=\"toggleMute()\">\n                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n                    </button>\n                    <button class=\"call-sec-btn mr-3\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\"\n                        [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n                    </button>\n                    <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\"\n                        [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                        <span class=\"material-symbols-outlined\"> add </span>\n                    </button>\n                </div>\n\n                <div>\n                    <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                        <span class=\"material-symbols-outlined\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n\n\n            <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n                <div class=\"contacts-header\">\n                    <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                    <div class=\"title\">Contacts</div>\n                    <span class=\"material-symbols-outlined search\"> search </span>\n                </div>\n                <div class=\"contacts-list\">\n                    <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                        <img class=\"contact-avatar\" [src]=\"c.img\" alt=\"\" />\n                        <div class=\"contact-info\">\n                            <div class=\"contact-name\">{{c.name}}</div>\n                            <div class=\"contact-title\">{{c.title}}</div>\n                        </div>\n                        <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                            <span class=\"material-symbols-outlined\"> call </span>\n                            <span class=\"label\">Call</span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n\n            <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n        </div>\n\n        <div class=\"wave-container\">\n            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n                <defs>\n                    <path id=\"gentle-wave\"\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n                </defs>\n                <g class=\"parallax\">\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                    <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n                </g>\n            </svg>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;justify-content:center;align-items:center;z-index:100000}.collops{height:660px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.incoming-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:0 0 16px 16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:-46px;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:6px 10px;cursor:pointer}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList", "deviceId"], 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\"\n    [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n    <lib-incoming-call *ngIf=\"incomingCallDiv && !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n        [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n        (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n        (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n\n    <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n        <div class=\"held-call-banner\" *ngIf=\"isCallOnHold && heldCall\">\n            <div class=\"held-call-content\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Hold</span>\n                        <span class=\"held-number\">{{heldCall.customParameters?.get('displayNumber') ||\n                            heldCall.parameters?.['From'] || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"held-btn swap-btn\" (click)=\"swapCalls()\" title=\"Swap calls\">\n                        <span>Swap</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Compact banner for concurrent incoming -->\n        <div class=\"incoming-banner\" *ngIf=\"isConcurrentIncoming && newIncomingCallsList?.length > 0\">\n            <div class=\"incoming-banner-content\">\n                <div class=\"incoming-info\">\n                    <span class=\"incoming-label\">Incoming call</span>\n                    <div class=\"incoming-caller\">\n                        <span class=\"caller-name\">{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name ||\n                            newIncomingCallsList[0]?.customParameters?.get('name') || '-'}}</span>\n                        <span class=\"caller-number\">{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.number ||\n                            newIncomingCallsList[0]?.parameters?.From || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"incoming-actions\">\n                    <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(newIncomingCallsList[0])\">\n                        <span class=\"material-symbols-outlined\">call</span>\n                    </button>\n                    <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(newIncomingCallsList[0])\">\n                        <span class=\"material-symbols-outlined\">call_end</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div\n            [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\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n            <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"flex justify-content-center\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n                <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\">\n                    <span>Merge</span>\n                </button>\n            </div>\n            <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n                <div class=\"flex align-items-center justify-content-evenly\">\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\"\n                        [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" (click)=\"toggleMute()\">\n                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n                    </button>\n                    <button class=\"call-sec-btn mr-3\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\"\n                        [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n                    </button>\n                    <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\"\n                        [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                        <span class=\"material-symbols-outlined\"> add </span>\n                    </button>\n                </div>\n\n                <div>\n                    <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                        <span class=\"material-symbols-outlined\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n\n\n            <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n                <div class=\"contacts-header\">\n                    <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                    <div class=\"title\">Contacts</div>\n                    <span class=\"material-symbols-outlined search\"> search </span>\n                </div>\n                <div class=\"contacts-list\">\n                    <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                        <img class=\"contact-avatar\" [src]=\"c.img\" alt=\"\" />\n                        <div class=\"contact-info\">\n                            <div class=\"contact-name\">{{c.name}}</div>\n                            <div class=\"contact-title\">{{c.title}}</div>\n                        </div>\n                        <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                            <span class=\"material-symbols-outlined\"> call </span>\n                            <span class=\"label\">Call</span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n\n            <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n        </div>\n\n        <div class=\"wave-container\">\n            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n                <defs>\n                    <path id=\"gentle-wave\"\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n                </defs>\n                <g class=\"parallax\">\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                    <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n                </g>\n            </svg>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;justify-content:center;align-items:center;z-index:100000}.collops{height:660px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.incoming-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:0 0 16px 16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:-46px;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:6px 10px;cursor:pointer}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList", "deviceId"], 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\"\n    [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n    <lib-incoming-call *ngIf=\"incomingCallDiv || !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n        [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n        (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n        (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n\n    <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n        <div class=\"held-call-banner\" *ngIf=\"isCallOnHold && heldCall\">\n            <div class=\"held-call-content\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Hold</span>\n                        <span class=\"held-number\">{{heldCall.customParameters?.get('displayNumber') ||\n                            heldCall.parameters?.['From'] || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"held-btn swap-btn\" (click)=\"swapCalls()\" title=\"Swap calls\">\n                        <span>Swap</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Compact banner for concurrent incoming -->\n        <div class=\"incoming-banner\" *ngIf=\"isConcurrentIncoming && newIncomingCallsList?.length > 0\">\n            <div class=\"incoming-banner-content\">\n                <div class=\"incoming-info\">\n                    <span class=\"incoming-label\">Incoming call</span>\n                    <div class=\"incoming-caller\">\n                        <span class=\"caller-name\">{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name ||\n                            newIncomingCallsList[0]?.customParameters?.get('name') || '-'}}</span>\n                        <span class=\"caller-number\">{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.number ||\n                            newIncomingCallsList[0]?.parameters?.From || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"incoming-actions\">\n                    <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(newIncomingCallsList[0])\">\n                        <span class=\"material-symbols-outlined\">call</span>\n                    </button>\n                    <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(newIncomingCallsList[0])\">\n                        <span class=\"material-symbols-outlined\">call_end</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div\n            [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\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n            <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"flex justify-content-center\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n                <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\">\n                    <span>Merge</span>\n                </button>\n            </div>\n            <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n                <div class=\"flex align-items-center justify-content-evenly\">\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\"\n                        [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" (click)=\"toggleMute()\">\n                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n                    </button>\n                    <button class=\"call-sec-btn mr-3\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\"\n                        [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n                    </button>\n                    <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\"\n                        [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                        <span class=\"material-symbols-outlined\"> add </span>\n                    </button>\n                </div>\n\n                <div>\n                    <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                        <span class=\"material-symbols-outlined\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n\n\n            <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n                <div class=\"contacts-header\">\n                    <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                    <div class=\"title\">Contacts</div>\n                    <span class=\"material-symbols-outlined search\"> search </span>\n                </div>\n                <div class=\"contacts-list\">\n                    <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                        <img class=\"contact-avatar\" [src]=\"c.img\" alt=\"\" />\n                        <div class=\"contact-info\">\n                            <div class=\"contact-name\">{{c.name}}</div>\n                            <div class=\"contact-title\">{{c.title}}</div>\n                        </div>\n                        <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                            <span class=\"material-symbols-outlined\"> call </span>\n                            <span class=\"label\">Call</span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n\n            <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n        </div>\n\n        <div class=\"wave-container\">\n            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n                <defs>\n                    <path id=\"gentle-wave\"\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n                </defs>\n                <g class=\"parallax\">\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                    <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n                </g>\n            </svg>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;justify-content:center;align-items:center;z-index:100000}.collops{height:660px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.incoming-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:0 0 16px 16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:-46px;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:6px 10px;cursor:pointer}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.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\"\n    [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand, 'contacts-open': showContactsPanel }\">\n    <!-- <div id=\"minimize-btn-div\">\n        <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n            minimize\n        </span>\n    </div> -->\n    <lib-incoming-call *ngIf=\"incomingCallDiv && !isConcurrentIncoming\" [incomingCallData]=\"callData\"\n        [deviceId]=\"deviceId\" [newIncomingCallsList]=\"newIncomingCallsList\"\n        (closeIncomingCallDiv)=\"closeIncomingCall($event)\" (incomingCallsNewList)=\"incomingCallsNewList($event)\"\n        (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n\n    <ng-container *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n        <div class=\"held-call-banner\" *ngIf=\"isCallOnHold && heldCall\">\n            <div class=\"held-call-content\">\n                <div class=\"held-info\">\n                    <span class=\"material-symbols-outlined hold-icon\">pause_circle</span>\n                    <div class=\"held-caller\">\n                        <span class=\"held-label\">Hold</span>\n                        <span class=\"held-number\">{{heldCall.customParameters?.get('displayNumber') ||\n                            heldCall.parameters?.['From'] || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"held-actions\">\n                    <button class=\"held-btn swap-btn\" (click)=\"swapCalls()\" title=\"Swap calls\">\n                        <span>Swap</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <!-- Compact banner for concurrent incoming -->\n        <div class=\"incoming-banner\" *ngIf=\"isConcurrentIncoming && newIncomingCallsList?.length > 0\">\n            <div class=\"incoming-banner-content\">\n                <div class=\"incoming-info\">\n                    <span class=\"incoming-label\">Incoming call</span>\n                    <div class=\"incoming-caller\">\n                        <span class=\"caller-name\">{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.name ||\n                            newIncomingCallsList[0]?.customParameters?.get('name') || '-'}}</span>\n                        <span class=\"caller-number\">{{newIncomingCallsList[0]?.userInfo?.c2cInformation?.number ||\n                            newIncomingCallsList[0]?.parameters?.From || ''}}</span>\n                    </div>\n                </div>\n                <div class=\"incoming-actions\">\n                    <button class=\"banner-btn accept-btn\" (click)=\"acceptConcurrentCall(newIncomingCallsList[0])\">\n                        <span class=\"material-symbols-outlined\">call</span>\n                    </button>\n                    <button class=\"banner-btn reject-btn\" (click)=\"rejectConcurrentCall(newIncomingCallsList[0])\">\n                        <span class=\"material-symbols-outlined\">call_end</span>\n                    </button>\n                </div>\n            </div>\n        </div>\n\n        <div\n            [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\"\n                        [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\"\n                        [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"recording-icon\"></span>\n                    </button>\n                    <div class=\"pause-resume-btns\">\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\"\n                            (click)=\"pauseRecording()\">\n                            <span class=\"material-symbols-outlined\"> pause </span>\n                        </button>\n                        <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n                            <span class=\"material-symbols-outlined\"> play_arrow </span>\n                        </button>\n                    </div>\n                </div>\n                <div *ngIf=\"isRecording\" class=\"timer-display\">\n                    {{ getFormattedTime() }}\n                </div>\n            </div>\n            <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n                <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\"\n                    (keyup)=\"onCallInputEnter($event)\">\n                <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\"\n                    (click)=\"clearInputs()\">close_small</span>\n            </div>\n            <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n                <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n                    {{key.num}}\n                    <span class=\"btn-albhabets\">{{key.text ? key.text : '&nbsp;'}}</span>\n                </div>\n            </div>\n\n            <div class=\"flex justify-content-center\" *ngIf=\"!incomingCallDiv || isConcurrentIncoming\">\n                <button class=\"held-btn merge-btn\" (click)=\"mergeCalls()\" title=\"Merge calls\">\n                    <span>Merge</span>\n                </button>\n            </div>\n            <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n                <div class=\"flex align-items-center justify-content-evenly\">\n                    <button class=\"call-sec-btn mr-3\" [disabled]=\"disbaleEndCallBtn\"\n                        [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\" (click)=\"toggleMute()\">\n                        <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n                        <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n                    </button>\n                    <button class=\"call-sec-btn mr-3\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\"\n                        [disabled]=\"disbaleEndCallBtn\">\n                        <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n                    </button>\n                    <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-32px'}\"\n                        [disabled]=\"disbaleEndCallBtn\" (click)=\"toggleContactsPanel()\">\n                        <span class=\"material-symbols-outlined\"> add </span>\n                    </button>\n                </div>\n\n                <div>\n                    <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n                        <span class=\"material-symbols-outlined\"> call_end </span>\n                    </button>\n                </div>\n            </div>\n\n\n            <div class=\"contacts-panel\" *ngIf=\"showContactsPanel\">\n                <div class=\"contacts-header\">\n                    <span class=\"material-symbols-outlined back\" (click)=\"toggleContactsPanel()\"> chevron_left </span>\n                    <div class=\"title\">Contacts</div>\n                    <span class=\"material-symbols-outlined search\"> search </span>\n                </div>\n                <div class=\"contacts-list\">\n                    <div class=\"contact-item\" *ngFor=\"let c of contacts\">\n                        <img class=\"contact-avatar\" [src]=\"c.img\" alt=\"\" />\n                        <div class=\"contact-info\">\n                            <div class=\"contact-name\">{{c.name}}</div>\n                            <div class=\"contact-title\">{{c.title}}</div>\n                        </div>\n                        <button class=\"contact-call-btn\" (click)=\"callContact(c)\">\n                            <span class=\"material-symbols-outlined\"> call </span>\n                            <span class=\"label\">Call</span>\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n\n            <!-- <div class=\"mt-2 px-3 call-info-wrapper \"  [ngClass]=\"{'open-collops': isCollops}\">\n            <div class=\"text-center\" >\n                <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n                <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n            </div>\n            <ng-container *ngIf=\"isCollops\">\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div >First Name:</div>\n                        <div >test ttttt</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div>Last Name:</div>\n                        <div>tetst test </div>\n                    </div>\n                </div>\n                <div class=\"mb-2\">\n                    <div class=\"\">Email:</div>\n                    <div class=\"\">abcdeft@vgroup.com</div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Number:</div>\n                        <div class=\"\">63545985264225</div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Language:</div>\n                        <div class=\"\">English</div>\n                    </div>\n                </div>\n                <div class=\"row mb-2\">\n                    <div class=\"col-6\">\n                        <div class=\"\">Image :</div>\n                        <div class=\"\">test.jpg </div>\n                    </div>\n                    <div class=\"col-6\">\n                        <div class=\"\">Extension :</div>\n                        <div class=\"\">4596</div>\n                    </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">Note :</div>\n                    <div class=\"\">tes test test </div>\n                </div>\n                <div class=\" mb-2\">\n                    <div class=\"\">\n                        <div class=\"\">Subject:</div>\n                        <div class=\"\">hello world | test</div>\n                    </div>\n                </div>\n                <div class=\" mb-4\">\n                    <div class=\"\">\n                        <div class=\"\">Message:</div>\n                        <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n                    </div>\n                </div>\n            </ng-container>\n        </div> -->\n        </div>\n\n        <div class=\"wave-container\">\n            <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n                viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n                <defs>\n                    <path id=\"gentle-wave\"\n                        d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n                </defs>\n                <g class=\"parallax\">\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n                    <!-- <use\n                xlink:href=\"#gentle-wave\"\n                x=\"48\"\n                y=\"5\"\n                fill=\"rgba(255,255,255,0.3)\"\n              /> -->\n                    <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n                </g>\n            </svg>\n        </div>\n    </ng-container>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n    <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n    <div style=\"display: flex; width: 100%\">\n        <div>\n            <div class=\"min-call-animation\" id=\"call-avatar\">\n                <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n            </div>\n        </div>\n        <div>\n            <div class=\"min-callerDetails\">\n                <div class=\"name\">\n                    {{callData.name}}\n                </div>\n                <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n            </div>\n        </div>\n    </div>\n    <div class=\"min-btn-container\">\n        <div class=\"min-timer\">{{timer}}</div>\n        <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n            <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n            <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n        </button>\n        <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n            <span class=\"material-symbols-outlined\"> call_end </span>\n        </button>\n    </div>\n</div>", styles: [".call-container{width:385px;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;justify-content:center;align-items:center;z-index:100000}.collops{height:660px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0;overflow:hidden;width:100%}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.held-call-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:10px 16px;z-index:2100;box-shadow:0 4px 12px #0000004d;border-radius:0 0 16px 16px}.held-call-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.held-info{display:flex;align-items:center;gap:10px;flex:1}.hold-icon{font-size:24px;color:#fbbf24}.held-caller{display:flex;flex-direction:column;gap:2px}.held-label{font-size:10px;color:#ffffffb3;text-transform:uppercase;letter-spacing:.5px}.held-number{font-size:13px;font-weight:500;color:#fff}.held-actions{display:flex;gap:8px;align-items:center}.held-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.held-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px #0003}.swap-btn{background:#3b82f6;color:#fff}.merge-btn{background:#10b981;color:#fff}.incoming-banner{position:absolute;top:0;left:0;right:0;background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);padding:12px 16px;z-index:2000;box-shadow:0 4px 12px #0003;border-radius:0 0 16px 16px}.incoming-banner-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.incoming-info{flex:1;display:flex;flex-direction:column;gap:4px}.incoming-label{font-size:11px;color:#fffc;text-transform:uppercase;letter-spacing:.5px}.incoming-caller{display:flex;flex-direction:column;gap:2px}.caller-name{font-size:15px;font-weight:600;color:#fff}.caller-number{font-size:13px;color:#ffffffe6}.incoming-actions{display:flex;gap:8px;align-items:center}.banner-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s}.banner-btn:hover{transform:scale(1.1)}.banner-btn .material-symbols-outlined{font-size:20px}.accept-btn{background:#10b981}.accept-btn .material-symbols-outlined{color:#fff}.reject-btn{background:#ef4444}.reject-btn .material-symbols-outlined{color:#fff}.contacts-panel{position:absolute;top:-46px;bottom:12px;width:340px;background:#ffffff;border-radius:16px;box-shadow:0 10px 25px #00000026;display:flex;flex-direction:column;overflow:hidden;height:40.4rem;left:24.1rem;z-index:1000}.contacts-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #f0f0f0}.contacts-header .title{font-weight:600}.contacts-header .back,.contacts-header .search{color:#9aa0a6;cursor:pointer}.contacts-list{padding:8px 8px 12px;overflow-y:auto}.contact-item{display:flex;align-items:center;padding:10px 8px;border-radius:10px}.contact-item:hover{background:#f7f9fc}.contact-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;margin-right:12px}.contact-info{flex:1}.contact-name{font-weight:600;color:#111827}.contact-title{font-size:12px;color:#6b7280}.contact-call-btn{display:inline-flex;align-items:center;gap:6px;background:#234de8;color:#fff;border:none;border-radius:16px;padding:6px 10px;cursor:pointer}.contact-call-btn .material-symbols-outlined{font-size:18px;color:#fff}.contact-call-btn .label{font-size:12px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.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 }, { type: TwilioService }]; }, propDecorators: { callData: [{
                 type: Input
             }], newIncomingCallData: [{