@vgroup/dialbox 0.0.70 → 0.0.71
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/call-progress/call-progress.component.mjs +3 -3
- package/esm2020/lib/dialbox.component.mjs +2 -2
- package/fesm2015/vgroup-dialbox.mjs +3 -3
- package/fesm2015/vgroup-dialbox.mjs.map +1 -1
- package/fesm2020/vgroup-dialbox.mjs +3 -3
- package/fesm2020/vgroup-dialbox.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2110,10 +2110,10 @@ class CallProgressComponent {
|
|
|
2110
2110
|
}
|
|
2111
2111
|
}
|
|
2112
2112
|
CallProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, deps: [{ token: ExtensionService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2113
|
-
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" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand}\">\n <div id=\"minimize-btn-div\">\n <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n minimize\n </span>\n </div>\n <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n <div style=\"display: flex; flex-direction: column;position: relative; width: 100%; left: 107px\">\n \n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div>\n <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button>\n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isRecording\" class=\"timer-display\">\n {{ getFormattedTime() }}\n </div>\n </div>\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n </div>\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n {{key.num}}\n <span class=\"btn-albhabets\">{{key.text ? key.text : ' '}}</span>\n </div>\n </div>\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (click)=\"toggleMute()\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n </button>\n <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n </div>\n <!-- <div class=\"mt-2 px-3 call-info-wrapper \" [ngClass]=\"{'open-collops': isCollops}\">\n <div class=\"text-center\" >\n <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n </div>\n <ng-container *ngIf=\"isCollops\">\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div >First Name:</div>\n <div >test ttttt</div>\n </div>\n <div class=\"col-6\">\n <div>Last Name:</div>\n <div>tetst test </div>\n </div>\n </div>\n <div class=\"mb-2\">\n <div class=\"\">Email:</div>\n <div class=\"\">abcdeft@vgroup.com</div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Number:</div>\n <div class=\"\">63545985264225</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"\">English</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Image :</div>\n <div class=\"\">test.jpg </div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Extension :</div>\n <div class=\"\">4596</div>\n </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">Note :</div>\n <div class=\"\">tes test test </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">\n <div class=\"\">Subject:</div>\n <div class=\"\">hello world | test</div>\n </div>\n </div>\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n </div>\n </div>\n </ng-container>\n </div> -->\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <!-- <use\n xlink:href=\"#gentle-wave\"\n x=\"48\"\n y=\"5\"\n fill=\"rgba(255,255,255,0.3)\"\n /> -->\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n <div style=\"display: flex; width: 100%\">\n <div>\n <div class=\"min-call-animation\" id=\"call-avatar\">\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n </div>\n </div>\n <div>\n <div class=\"min-callerDetails\">\n <div class=\"name\">\n {{callData.name}}\n </div>\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n </div>\n </div>\n </div>\n <div class=\"min-btn-container\">\n <div class=\"min-timer\">{{timer}}</div>\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n</div>", styles: [".call-container{width:385px;height:646px;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
|
|
2113
|
+
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" }, outputs: { endCallEvent: "endCallEvent", incomingCallsNewInfo: "incomingCallsNewInfo", minimiseEvent: "minimiseEvent", incomingCallInitiated: "incomingCallInitiated" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand}\">\n <div id=\"minimize-btn-div\">\n <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n minimize\n </span>\n </div>\n <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n <div style=\"display: flex; flex-direction: column;position: relative; width: 100%;\">\n \n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div>\n <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button>\n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isRecording\" class=\"timer-display\">\n {{ getFormattedTime() }}\n </div>\n </div>\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n </div>\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n {{key.num}}\n <span class=\"btn-albhabets\">{{key.text ? key.text : ' '}}</span>\n </div>\n </div>\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (click)=\"toggleMute()\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n </button>\n <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n </div>\n <!-- <div class=\"mt-2 px-3 call-info-wrapper \" [ngClass]=\"{'open-collops': isCollops}\">\n <div class=\"text-center\" >\n <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n </div>\n <ng-container *ngIf=\"isCollops\">\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div >First Name:</div>\n <div >test ttttt</div>\n </div>\n <div class=\"col-6\">\n <div>Last Name:</div>\n <div>tetst test </div>\n </div>\n </div>\n <div class=\"mb-2\">\n <div class=\"\">Email:</div>\n <div class=\"\">abcdeft@vgroup.com</div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Number:</div>\n <div class=\"\">63545985264225</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"\">English</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Image :</div>\n <div class=\"\">test.jpg </div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Extension :</div>\n <div class=\"\">4596</div>\n </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">Note :</div>\n <div class=\"\">tes test test </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">\n <div class=\"\">Subject:</div>\n <div class=\"\">hello world | test</div>\n </div>\n </div>\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n </div>\n </div>\n </ng-container>\n </div> -->\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <!-- <use\n xlink:href=\"#gentle-wave\"\n x=\"48\"\n y=\"5\"\n fill=\"rgba(255,255,255,0.3)\"\n /> -->\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n <div style=\"display: flex; width: 100%\">\n <div>\n <div class=\"min-call-animation\" id=\"call-avatar\">\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n </div>\n </div>\n <div>\n <div class=\"min-callerDetails\">\n <div class=\"name\">\n {{callData.name}}\n </div>\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n </div>\n </div>\n </div>\n <div class=\"min-btn-container\">\n <div class=\"min-timer\">{{timer}}</div>\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n</div>", styles: [".call-container{width:385px;height:646px;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
|
|
2114
2114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
|
|
2115
2115
|
type: Component,
|
|
2116
|
-
args: [{ selector: 'lib-call-progress', template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand}\">\n <div id=\"minimize-btn-div\">\n <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n minimize\n </span>\n </div>\n <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n <div style=\"display: flex; flex-direction: column;position: relative; width: 100%; left: 107px\">\n \n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div>\n <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button>\n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isRecording\" class=\"timer-display\">\n {{ getFormattedTime() }}\n </div>\n </div>\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n </div>\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n {{key.num}}\n <span class=\"btn-albhabets\">{{key.text ? key.text : ' '}}</span>\n </div>\n </div>\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (click)=\"toggleMute()\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n </button>\n <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n </div>\n <!-- <div class=\"mt-2 px-3 call-info-wrapper \" [ngClass]=\"{'open-collops': isCollops}\">\n <div class=\"text-center\" >\n <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n </div>\n <ng-container *ngIf=\"isCollops\">\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div >First Name:</div>\n <div >test ttttt</div>\n </div>\n <div class=\"col-6\">\n <div>Last Name:</div>\n <div>tetst test </div>\n </div>\n </div>\n <div class=\"mb-2\">\n <div class=\"\">Email:</div>\n <div class=\"\">abcdeft@vgroup.com</div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Number:</div>\n <div class=\"\">63545985264225</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"\">English</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Image :</div>\n <div class=\"\">test.jpg </div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Extension :</div>\n <div class=\"\">4596</div>\n </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">Note :</div>\n <div class=\"\">tes test test </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">\n <div class=\"\">Subject:</div>\n <div class=\"\">hello world | test</div>\n </div>\n </div>\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n </div>\n </div>\n </ng-container>\n </div> -->\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <!-- <use\n xlink:href=\"#gentle-wave\"\n x=\"48\"\n y=\"5\"\n fill=\"rgba(255,255,255,0.3)\"\n /> -->\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n <div style=\"display: flex; width: 100%\">\n <div>\n <div class=\"min-call-animation\" id=\"call-avatar\">\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n </div>\n </div>\n <div>\n <div class=\"min-callerDetails\">\n <div class=\"name\">\n {{callData.name}}\n </div>\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n </div>\n </div>\n </div>\n <div class=\"min-btn-container\">\n <div class=\"min-timer\">{{timer}}</div>\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n</div>", styles: [".call-container{width:385px;height:646px;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"] }]
|
|
2116
|
+
args: [{ selector: 'lib-call-progress', template: "<div class=\"call-container\" *ngIf=\"!isMinimised\" [ngClass]=\"{'collops': isCollops, 'incoming-call-container': selectedIncomingCall?.isClickExpand}\">\n <div id=\"minimize-btn-div\">\n <span class=\"material-symbols-outlined minimize-btn\" (click)=\"minimiseDialpad()\">\n minimize\n </span>\n </div>\n <lib-incoming-call *ngIf=\"incomingCallDiv\" [incomingCallData]=\"callData\" [newIncomingCallsList]=\"newIncomingCallsList\" (closeIncomingCallDiv)=\"closeIncomingCall($event)\" \n (incomingCallsNewList)=\"incomingCallsNewList($event)\" (selectedIncomingCallInfo)=\"selectedIncomingCallInfo($event)\"></lib-incoming-call>\n <div style=\"display: flex; flex-direction: column;position: relative; width: 100%;\">\n \n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"callData.img\" alt=\"\" width=\"120\" />\n </div>\n <div class=\"callerDetails\">\n <h1 [ngStyle]=\"{'margin-top': showKeypad ? '0': '8px'}\">{{callData.name}}</h1>\n <p>{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n <h4 style=\"margin-top: 4px\">{{timer}}</h4>\n </div>\n <div class=\"record-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '20px'}\">\n <div class=\"record-btn-container\">\n <button class=\"record-btn start-stop\" *ngIf=\"!isRecording\" [ngClass]=\"{'recording': isRecording, 'stopped': !isRecording}\" (click)=\"toggleRecording()\" [title]=\"isRecording ? 'Stop Recording' : 'Start Recording'\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"recording-icon\"></span>\n </button>\n <div class=\"pause-resume-btns\">\n <button class=\"record-btn pause-resume\" *ngIf=\"isRecording && !isPaused\" (click)=\"pauseRecording()\">\n <span class=\"material-symbols-outlined\"> pause </span>\n </button>\n <button class=\"record-btn pause-resume\" *ngIf=\"isPaused\" (click)=\"resumeRecording()\">\n <span class=\"material-symbols-outlined\"> play_arrow </span>\n </button>\n </div>\n </div>\n <div *ngIf=\"isRecording\" class=\"timer-display\">\n {{ getFormattedTime() }}\n </div>\n </div>\n <div *ngIf=\"showKeypad\" class=\"sendDigit\">\n <input type=\"text\" name=\"call-inputs\" id=\"call-input\" [(ngModel)]=\"callInput\" (keyup)=\"onCallInputEnter($event)\">\n <span class=\"material-symbols-outlined input-clear-btn\" *ngIf=\"callInput\" (click)=\"clearInputs()\">close_small</span>\n </div>\n <div class=\"btn-container justify-content-center\" *ngIf=\"showKeypad\">\n <div class=\"key-btn\" *ngFor=\"let key of keypadVal\" (click)=\"onCallInputs(key.num)\">\n {{key.num}}\n <span class=\"btn-albhabets\">{{key.text ? key.text : ' '}}</span>\n </div>\n </div>\n <div class=\"call-action-btns\" [ngStyle]=\"{'margin-top': showKeypad ? '0': '160px'}\">\n <button class=\"call-sec-btn\" [disabled]=\"disbaleEndCallBtn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" (click)=\"toggleMute()\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n\n </button>\n <button class=\"call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n <button class=\"call-sec-btn\" [ngStyle]=\"{'top': showKeypad ? '0': '-70px'}\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" (click)=\"toggleKeypad()\"> transition_dissolve </span>\n </button>\n </div>\n <!-- <div class=\"mt-2 px-3 call-info-wrapper \" [ngClass]=\"{'open-collops': isCollops}\">\n <div class=\"text-center\" >\n <i class=\"fa fa-angle-down\" *ngIf=\"isCollops\" (click)=\"isCollops = !isCollops\"></i>\n <i class=\"fa fa-angle-up\" *ngIf=\"!isCollops\" (click)=\"isCollops = !isCollops\"></i>\n </div>\n <ng-container *ngIf=\"isCollops\">\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div >First Name:</div>\n <div >test ttttt</div>\n </div>\n <div class=\"col-6\">\n <div>Last Name:</div>\n <div>tetst test </div>\n </div>\n </div>\n <div class=\"mb-2\">\n <div class=\"\">Email:</div>\n <div class=\"\">abcdeft@vgroup.com</div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Number:</div>\n <div class=\"\">63545985264225</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"\">English</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <div class=\"\">Image :</div>\n <div class=\"\">test.jpg </div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Extension :</div>\n <div class=\"\">4596</div>\n </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">Note :</div>\n <div class=\"\">tes test test </div>\n </div>\n <div class=\" mb-2\">\n <div class=\"\">\n <div class=\"\">Subject:</div>\n <div class=\"\">hello world | test</div>\n </div>\n </div>\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"\">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>\n </div>\n </div>\n </ng-container>\n </div> -->\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" />\n <!-- <use\n xlink:href=\"#gentle-wave\"\n x=\"48\"\n y=\"5\"\n fill=\"rgba(255,255,255,0.3)\"\n /> -->\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>\n\n<div class=\"min-call-container\" *ngIf=\"isMinimised\">\n <span class=\"material-symbols-outlined fullscreen\" (click)=\"maximiseDialpad()\"> open_in_full </span>\n <div style=\"display: flex; width: 100%\">\n <div>\n <div class=\"min-call-animation\" id=\"call-avatar\">\n <img class=\"min-avatar-img\" [src]=\"callData.img\" alt=\"\" />\n </div>\n </div>\n <div>\n <div class=\"min-callerDetails\">\n <div class=\"name\">\n {{callData.name}}\n </div>\n <p style=\"margin: 0\">{{callData.displayNum ? callData.displayNum : callData.phone }}</p>\n </div>\n </div>\n </div>\n <div class=\"min-btn-container\">\n <div class=\"min-timer\">{{timer}}</div>\n <button class=\"min-call-sec-btn\" (click)=\"toggleMute()\" [disabled]=\"disbaleEndCallBtn\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"min-call-btn end-call-btn\" [disabled]=\"disbaleEndCallBtn\" (click)=\"endCall()\">\n <span class=\"material-symbols-outlined\"> call_end </span>\n </button>\n </div>\n</div>", styles: [".call-container{width:385px;height:646px;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{height:660px!important}.incoming-call-container{width:752px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto 0;border-radius:100%;border:solid 4px #fff;display:flex;align-items:center;justify-content:center}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.call-animation-play{animation:play 3s linear infinite}.call-info-wrapper{height:20px;overflow-y:auto;background:white;transition:height 1s}.open-collops{height:180px!important}.avatar-img{width:94px;height:94px;border-radius:100%}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 0;color:#fff;text-transform:capitalize;text-align:center}.callerDetails h4{margin:0;color:#fff}.callerDetails p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:60px;height:60px;background-color:#fff;border-radius:30px;box-sizing:border-box;border:2px solid white;margin:0 16px}.end-call-btn{background-color:#e14e4e}.end-call-btn span{color:#fff!important}.call-btn span{color:#234de8}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.call-action-btns{text-align:center}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.sendDigit{position:relative;text-align:center;width:80%;margin:auto;background-color:#ffffff1a;padding:2px 0;border-radius:3px}.input-clear-btn{position:absolute;right:6px;color:#fff;cursor:pointer}#minimize-btn-div{position:absolute;right:14px;top:12px;z-index:10}.minimize-btn{color:#fff;cursor:pointer}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}app-incoming-call{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1001}.min-call-container{width:320px;height:124px;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;flex-direction:column;box-sizing:border-box;position:relative;overflow:hidden;margin:auto;align-items:center;padding:12px 16px;color:#fff}.min-call-animation{background:#fff;width:48px;height:48px;position:relative;margin:0 12px 0 auto;border-radius:100%;border:solid 2px #fff}.min-avatar-img{width:46px;height:46px;border-radius:100%;position:absolute;left:0;top:0}.min-callerDetails{color:#fff;display:flex;flex-direction:column;align-items:flex-start}.name{width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:20px;margin:0;color:#fff}.min-callerDetails p{margin:0;color:#fff}.min-btn-container{position:relative;display:flex;width:100%;justify-content:flex-start;align-items:center;margin-top:6px}.min-call-sec-btn{width:40px;height:40px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.min-call-sec-btn span{color:#cccbcb}.min-call-btn{width:40px;height:40px;border-radius:20px;box-sizing:border-box;border:2px solid white;display:flex;align-items:center;justify-content:center}.fullscreen{position:absolute;right:18px;top:14px;color:#e8e8e8;font-size:18px;cursor:pointer}.btn-container{display:flex;flex-wrap:wrap;padding:0 24px}.dial-btn{width:40px;height:40px;background-color:transparent;text-align:center;box-sizing:border-box;margin:4px 25px;font-size:24px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#b5b5b5;cursor:pointer}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.min-timer{width:50px;font-size:18px;margin-right:10px;border-radius:4px;height:35px;display:flex;align-items:center}.record-action-btns{display:flex;flex-direction:column;align-items:center}.record-btn-container{position:relative}.record-btn{border:none;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0 5px;position:relative;overflow:hidden}.record-btn.start-stop .recording-icon{width:50%;height:50%;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.record-btn.start-stop.recording .recording-icon{background-color:#000}.record-btn.start-stop.recording{border:3px solid #000}.record-btn.start-stop.stopped .recording-icon{background-color:red;border:3px solid #ff0000;border-radius:50%;position:absolute}.record-btn.start-stop.stopped{border:3px solid #ff0000}.record-btn.start-stop.stopped .recording-icon{width:40%;height:40%;border-radius:0;background-color:red}.pause-resume-btns{display:flex;flex-direction:column;align-items:center;margin-top:10px}.record-btn.pause-resume{border:none;border-radius:50%;width:50px;height:50px;background:white;display:flex;align-items:center;justify-content:center;margin:5px 0}.record-btn.pause-resume .material-symbols-outlined{font-size:20px;color:#000}.timer-display{font-size:1.2em;margin-top:10px;color:#000}.w-40{width:40%}.w-60{width:60%}\n"] }]
|
|
2117
2117
|
}], ctorParameters: function () { return [{ type: ExtensionService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { callData: [{
|
|
2118
2118
|
type: Input
|
|
2119
2119
|
}], newIncomingCallData: [{
|
|
@@ -2216,7 +2216,7 @@ class DialboxComponent {
|
|
|
2216
2216
|
const callSub = this.twilioService.currentCall.subscribe(call => {
|
|
2217
2217
|
if (call) {
|
|
2218
2218
|
this.isCallInProgress = true;
|
|
2219
|
-
this.
|
|
2219
|
+
this.isDialpadHidden = false; // Show dialpad on incoming call
|
|
2220
2220
|
}
|
|
2221
2221
|
});
|
|
2222
2222
|
this.subscriptions.add(callSub);
|