@vgroup/dialbox 0.0.39 → 0.0.41
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 +2 -7
- package/esm2020/lib/components/call-progress/incoming-call/incoming-call.component.mjs +3 -3
- package/esm2020/lib/dialbox.component.mjs +3 -4
- package/fesm2015/vgroup-dialbox.mjs +5 -11
- package/fesm2015/vgroup-dialbox.mjs.map +1 -1
- package/fesm2020/vgroup-dialbox.mjs +5 -11
- package/fesm2020/vgroup-dialbox.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1690,10 +1690,10 @@ class IncomingCallComponent {
|
|
|
1690
1690
|
}
|
|
1691
1691
|
}
|
|
1692
1692
|
IncomingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, deps: [{ token: ExtensionService }, { token: TwilioService }, { token: NotificationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1693
|
-
IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\">\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \n <div class=\"p-2\">\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n <div class=\"img\">\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n </div>\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n <div class=\"callerDetails-wrapper\">\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n </div> \n <div class=\"d-flex align-items-center\">\n <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\" (click)=\"acceptCallFromList(data)\">\n <span class=\"material-symbols-outlined\">call</span>\n </button>\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\">mic_off</span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\">mic</span>\n </button>\n <button class=\"call-btn-wrapper reject-btn\" (click)=\"rejectCallFromList(data)\">\n <span class=\"material-symbols-outlined\">call_end</span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\">\n <i class=\"fa\" [ngClass]=\"{'fa-angle-right': !isClickExpand, 'fa-angle-down': isClickExpand}\"></i>\n </div>\n </div>\n </div>\n \n <!-- Expanded Details Section -->\n <div class=\"w-100 mt-2\" *ngIf=\"isClickExpand && selectedIncomingCall?.parameters?.CallSid === data.parameters?.CallSid\">\n <div class=\"f-13 p-2 bg-dark rounded\">\n <div class=\"row mb-2\">\n <div class=\"col-12\">\n <strong>Subject:</strong> {{data.userInfo?.c2cInformation?.subject || '-'}}\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <strong>Email:</strong> {{data.userInfo?.c2cInformation?.email || '-'}}\n </div>\n <div class=\"col-6\">\n <strong>Language:</strong> {{data.userInfo?.c2cInformation?.language || '-'}}\n </div>\n </div>\n <div class=\"row mb-2\" *ngIf=\"data.userInfo?.c2cInformation?.message\">\n <div class=\"col-12\">\n <strong>Message:</strong> {{data.userInfo?.c2cInformation?.message}}\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <strong>Number:</strong> {{data.userInfo?.c2cInformation?.number || '-'}}\n </div>\n <div class=\"col-6\">\n <strong>Extension:</strong> {{data.userInfo?.c2cInformation?.extension || '-'}}\n </div>\n </div>\n <div class=\"row mb-2\" *ngIf=\"data.userInfo?.c2cInformation?.pointName || data.userInfo?.c2cInformation?.sourceName\">\n <div class=\"col-6\" *ngIf=\"data.userInfo?.c2cInformation?.pointName\">\n <strong>Point Name:</strong> {{data.userInfo?.c2cInformation?.pointName}}\n </div>\n <div class=\"col-6\" *ngIf=\"data.userInfo?.c2cInformation?.sourceName\">\n <strong>Source Name:</strong> {{data.userInfo?.c2cInformation?.sourceName}}\n </div>\n </div>\n <div class=\"row mb-2\" *ngIf=\"data.userInfo?.c2cInformation?.image && data.userInfo?.c2cInformation?.image !== '-'\">\n <div class=\"col-12\">\n <strong>Image:</strong>\n <img [src]=\"data.userInfo?.c2cInformation?.image\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n<div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n</div>", 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{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:680px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:645px}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px}.call-btn-wrapper span{color:#fff;line-height:unset!important}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1693
|
+
IncomingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: { incomingCallData: "incomingCallData", newIncomingCallsList: "newIncomingCallsList" }, outputs: { closeIncomingCallDiv: "closeIncomingCallDiv", incomingCallsNewList: "incomingCallsNewList", selectedIncomingCallInfo: "selectedIncomingCallInfo" }, ngImport: i0, template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\">\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \n <div class=\"p-2 \">\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n <div class=\"img\">\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n </div>\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n <div class=\"callerDetails-wrapper\">\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n </div> \n <div class=\"d-flex align-items-center\">\n <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n </button>\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"call-btn-wrapper reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand\"> \n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n </div>\n <div class=\"text-center\">\n <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n </div>\n <div class=\"f-13\">\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Subject:</div>\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n </div> \n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Email:</div>\n <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n </div> \n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Number:</div>\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Extension:</div>\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n </div>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Image:</div>\n <div class=\"text-ellipsis\">\n <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n </ng-container>\n <ng-template #noImage>\n <span class=\"ml-2\">No Image Available</span>\n </ng-template>\n </div>\n </div> \n </div>\n\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Point Name:</div>\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n </div>\n <div class=\"col-6 mb-2\">\n <div class=\"\">Source Name:</div>\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n </div>\n </div>\n </div>\n <div class=\"call-action-btns mt-0\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.parameters?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.parameters?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>", styles: [".call-container{width: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{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:680px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:645px}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px;span {color: white; line-height: unset !important;}}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
1694
1694
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, decorators: [{
|
|
1695
1695
|
type: Component,
|
|
1696
|
-
args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\">\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \n <div class=\"p-2\">\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n <div class=\"img\">\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n </div>\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n <div class=\"callerDetails-wrapper\">\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n </div> \n <div class=\"d-flex align-items-center\">\n <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\" (click)=\"acceptCallFromList(data)\">\n <span class=\"material-symbols-outlined\">call</span>\n </button>\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\">mic_off</span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\">mic</span>\n </button>\n <button class=\"call-btn-wrapper reject-btn\" (click)=\"rejectCallFromList(data)\">\n <span class=\"material-symbols-outlined\">call_end</span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\">\n <i class=\"fa\" [ngClass]=\"{'fa-angle-right': !isClickExpand, 'fa-angle-down': isClickExpand}\"></i>\n </div>\n </div>\n </div>\n \n <!-- Expanded Details Section -->\n <div class=\"w-100 mt-2\" *ngIf=\"isClickExpand && selectedIncomingCall?.parameters?.CallSid === data.parameters?.CallSid\">\n <div class=\"f-13 p-2 bg-dark rounded\">\n <div class=\"row mb-2\">\n <div class=\"col-12\">\n <strong>Subject:</strong> {{data.userInfo?.c2cInformation?.subject || '-'}}\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <strong>Email:</strong> {{data.userInfo?.c2cInformation?.email || '-'}}\n </div>\n <div class=\"col-6\">\n <strong>Language:</strong> {{data.userInfo?.c2cInformation?.language || '-'}}\n </div>\n </div>\n <div class=\"row mb-2\" *ngIf=\"data.userInfo?.c2cInformation?.message\">\n <div class=\"col-12\">\n <strong>Message:</strong> {{data.userInfo?.c2cInformation?.message}}\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6\">\n <strong>Number:</strong> {{data.userInfo?.c2cInformation?.number || '-'}}\n </div>\n <div class=\"col-6\">\n <strong>Extension:</strong> {{data.userInfo?.c2cInformation?.extension || '-'}}\n </div>\n </div>\n <div class=\"row mb-2\" *ngIf=\"data.userInfo?.c2cInformation?.pointName || data.userInfo?.c2cInformation?.sourceName\">\n <div class=\"col-6\" *ngIf=\"data.userInfo?.c2cInformation?.pointName\">\n <strong>Point Name:</strong> {{data.userInfo?.c2cInformation?.pointName}}\n </div>\n <div class=\"col-6\" *ngIf=\"data.userInfo?.c2cInformation?.sourceName\">\n <strong>Source Name:</strong> {{data.userInfo?.c2cInformation?.sourceName}}\n </div>\n </div>\n <div class=\"row mb-2\" *ngIf=\"data.userInfo?.c2cInformation?.image && data.userInfo?.c2cInformation?.image !== '-'\">\n <div class=\"col-12\">\n <strong>Image:</strong>\n <img [src]=\"data.userInfo?.c2cInformation?.image\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n<div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n</div>", 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{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:680px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:645px}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px}.call-btn-wrapper span{color:#fff;line-height:unset!important}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}\n"] }]
|
|
1696
|
+
args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" style=\"width: 100%;\" *ngIf=\"newIncomingCallsList.length > 0\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\">\n <div class=\"callToNum\">Incoming call <br/><span>{{dedicatedNum}}</span></div>\n <ng-container *ngFor=\"let data of newIncomingCallsList\"> \n <div class=\"p-2 \">\n <div class=\"call-info-wrapper w-100 d-flex align-items-center\">\n <div class=\"img\">\n <img class=\"avatar-img-wrapper\" [src]=\"data?.img\" alt=\"\" width=\"45\" />\n </div>\n <div class=\"d-flex justify-content-between w-100 align-items-center mr-2\">\n <div class=\"callerDetails-wrapper\">\n <h5 class=\"break-word\">{{data?.userInfo?.c2cInformation?.name || '-'}}</h5>\n <p class=\"break-word\">{{data.userInfo?.displayNum ? data.userInfo?.c2cInformation.number : data.userInfo?.c2cInformation.number }}</p>\n </div> \n <div class=\"d-flex align-items-center\">\n <button class=\"call-btn-wrapper receive-btn\" [disabled]=\"!data?.parameters?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(data)\"> call </span>\n </button>\n <button class=\"call-btn-wrapper mute-btn\" *ngIf=\"data?.parameters?.isCallConnected\" (click)=\"toggleMute(data)\" [ngClass]=\"{'active-mute': isMute}\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"call-btn-wrapper reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(data)\"> call_end </span>\n </button>\n <div class=\"togglearrow-arrow me-2\" id=\"togglearrow\" (click)=\"onClickExpand(data)\"><i class=\"fa fa-angle-right\"></i></div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"call-container p-3 text-white model-content\" *ngIf=\"isClickExpand\"> \n <div class=\"mb-2\" style=\"width: 100%; height: 100%;\">\n <div class=\"call-animation\" [ngClass]=\"{'call-animation-play': showRingAnimation}\">\n <img class=\"avatar-img\" [src]=\"incomingCallData.img\" alt=\"\" width=\"100\" />\n </div>\n <div class=\"text-center\">\n <h3 class=\"text-white\">{{selectedIncomingCall?.userInfo?.c2cInformation?.name || '-'}}</h3>\n </div>\n <div class=\"f-13\">\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Subject:</div>\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.subject || '-'}}</div>\n </div> \n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Email:</div>\n <div>{{selectedIncomingCall?.userInfo?.c2cInformation?.email || '-'}}</div>\n </div> \n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Number:</div>\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.number}}</div>\n </div>\n <div class=\"col-6\">\n <div class=\"\">Language:</div>\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.language || '-'}}</div>\n </div>\n </div>\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Extension:</div>\n <div class=\"ml-2\">{{selectedIncomingCall?.userInfo?.c2cInformation?.extension || '-'}}</div>\n </div>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-12 d-flex align-items-center mb-2\">\n <div class=\"me-2\">Image:</div>\n <div class=\"text-ellipsis\">\n <ng-container *ngIf=\"selectedIncomingCall?.userInfo?.c2cInformation?.image && selectedIncomingCall?.userInfo?.c2cInformation?.image !== '-'; else noImage\">\n <img src=\"{{selectedIncomingCall?.userInfo?.c2cInformation?.image}}\" alt=\"\" width=\"42\" height=\"42\" class=\"ml-2\"/>\n </ng-container>\n <ng-template #noImage>\n <span class=\"ml-2\">No Image Available</span>\n </ng-template>\n </div>\n </div> \n </div>\n\n <div class=\" mb-4\">\n <div class=\"\">\n <div class=\"\">Message:</div>\n <div class=\"text-ellipsis\">{{selectedIncomingCall?.userInfo?.c2cInformation?.message || '-'}}</div>\n </div>\n </div>\n\n <div class=\"row mb-2\">\n <div class=\"col-6 mb-2\">\n <div class=\"\">Point Name:</div>\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.pointName || '-'}}</div>\n </div>\n <div class=\"col-6 mb-2\">\n <div class=\"\">Source Name:</div>\n <div class=\"\">{{selectedIncomingCall?.userInfo?.c2cInformation?.sourceName || '-'}}</div>\n </div>\n </div>\n </div>\n <div class=\"call-action-btns mt-0\">\n <button class=\"call-btn receive-btn\" *ngIf=\"!selectedIncomingCall?.parameters?.isCallConnected\">\n <span class=\"material-symbols-outlined\" (click)=\"acceptCallFromList(selectedIncomingCall)\"> call </span>\n </button>\n <button class=\"call-btn mute-btn\" *ngIf=\"selectedIncomingCall?.parameters?.isCallConnected\" (click)=\"toggleMute(selectedIncomingCall)\" [ngClass]=\"{'active-mute': isMute}\">\n <span class=\"material-symbols-outlined\" *ngIf=\"isMute\"> mic_off </span>\n <span class=\"material-symbols-outlined\" *ngIf=\"!isMute\"> mic </span>\n </button>\n <button class=\"call-btn reject-btn\">\n <span class=\"material-symbols-outlined\" (click)=\"rejectCallFromList(selectedIncomingCall)\"> call_end </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"wave-container\">\n <svg class=\"waves\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 24 150 28\" preserveAspectRatio=\"none\" shape-rendering=\"auto\" [ngStyle]=\"{'width': '756px'}\">\n <defs>\n <path id=\"gentle-wave\" d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\" />\n </defs>\n <g class=\"parallax\">\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"0\" fill=\"rgba(255,255,255,0.7)\" />\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"3\" fill=\"rgba(255,255,255,0.5)\" /> \n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\n </g>\n </svg>\n </div>\n</div>", styles: [".call-container{width: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{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:680px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width:645px}.calls-side-by-side{position:fixed;top:0;width:30%;height:498px;z-index:1050;pointer-events:auto;display:flex;align-items:flex-start;left:-10rem;transform:translate(.2rem);transition:left 1s ease-in-out}.move{left:41vw!important}.f-13{font-size:13px!important}.call-animation{background:#fff;width:100px;height:100px;position:relative;margin:20px auto;border-radius:100%;border:solid 4px #fff}.call-animation:before{position:absolute;content:\"\";top:0;left:0;width:100%;height:100%;backface-visibility:hidden;border-radius:50%}.avatar-img-wrapper{border-radius:100%;margin:0 5px}.call-btn-wrapper{height:38px;background-color:#fff;border-radius:30px;margin:0 4px;opacity:.9;width:40px;span {color: white; line-height: unset !important;}}.hold-btn{background-color:#bebebe26;border:none}.hold-btn span,.mute-btn span{color:#fff!important}.active-hold{background-color:#fff!important}.active-hold span{color:#000!important}.active-mute{background-color:transparent}.call-info-wrapper{border:1px solid white;border-radius:7px;padding:8px 1px!important;word-break:break-all}.call-animation-play{animation:play 3s linear infinite}.avatar-img{width:94px;height:94px;border-radius:100%;position:absolute;left:0;top:0}@keyframes play{0%{transform:scale(1)}15%{box-shadow:0 0 0 2px #fff6}25%{box-shadow:0 0 0 4px #fff6,0 0 0 8px #fff3}25%{box-shadow:0 0 0 8px #fff6,0 0 0 16px #fff3}50%{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3}to{box-shadow:0 0 0 10px #fff6,0 0 0 20px #fff3;transform:scale(1.1);opacity:0}}.callerDetails{margin-top:8px;color:#fff;display:flex;flex-direction:column;align-items:center}.callerDetails h1{margin:12px 0 0;color:#fff}.callerDetails-wrapper{margin:0 5px;color:#fff;display:flex;flex-direction:column}.callerDetails-wrapper h3,.callerDetails-wrapper h5{margin:0;color:#fff}.togglearrow-arrow{left:100%;background-color:#fff;width:25px;height:25px;text-align:center;cursor:pointer;border:1px solid #ccc;border-radius:50%;line-height:22px}.callerDetails h4{margin:0;color:#fff}.callerDetails p,.callerDetails-wrapper p{margin-top:-3px;margin-bottom:0;color:#fff}.call-sec-btn{position:relative;width:50px;height:50px;box-sizing:border-box;border:1px solid #cccbcb;background-color:transparent;border-radius:25px;padding:12px;box-shadow:6px 6px 10px -1px #bebebe26,-5px -4px 10px -1px #d2d2d226}.call-sec-btn span{color:#cccbcb}.call-btn{width:48px;height:45px;background-color:#fff;border-radius:30px;box-sizing:border-box;margin:0 8px;opacity:.9}.call-btn:hover{opacity:1}.call-btn span{color:#fff;line-height:unset!important}.receive-btn{background-color:#28a745;border:2px solid #28a745}.mute-btn{position:relative;border:none;background-color:#bebebe26}.reject-btn{background-color:#e03131;border:2px solid #e03131}.btn-container{display:flex;flex-wrap:wrap;padding:0 30px}.key-btn{width:50px;height:50px;background-color:transparent;text-align:center;box-sizing:border-box;margin:0 18px;font-size:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#d3d3d3;cursor:pointer;opacity:.8}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.call-action-btns{text-align:center;margin-top:240px}#call-input{background-color:transparent;border:none;outline:none;text-align:center;color:#fff}.wave-container{position:absolute;bottom:0}.waves{width:660px;position:relative;margin-bottom:-7px;height:40px;min-height:40px}.parallax>use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}.parallax>use:nth-child(1){animation-delay:-2s;animation-duration:7s}.parallax>use:nth-child(2){animation-delay:-3s;animation-duration:10s}.parallax>use:nth-child(3){animation-delay:-4s;animation-duration:13s}.parallax>use:nth-child(4){animation-delay:-5s;animation-duration:20s}@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}to{transform:translate3d(85px,0,0)}}.animated-margin{transition:margin-top .5s ease}.callToNum{color:#fff;font-weight:400;text-align:center}.callToNum span{font-weight:600}.text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}\n"] }]
|
|
1697
1697
|
}], ctorParameters: function () { return [{ type: ExtensionService }, { type: TwilioService }, { type: NotificationService }]; }, propDecorators: { incomingCallData: [{
|
|
1698
1698
|
type: Input
|
|
1699
1699
|
}], newIncomingCallsList: [{
|
|
@@ -1738,17 +1738,12 @@ class CallProgressComponent {
|
|
|
1738
1738
|
}
|
|
1739
1739
|
ngOnChanges(changes) {
|
|
1740
1740
|
var _a, _b, _c, _d, _e;
|
|
1741
|
-
// console.log('Call Progress Component ngOnChanges');
|
|
1742
|
-
// console.log('Call Progress Component ngOnChanges changes', changes);
|
|
1743
1741
|
if (changes['callData']) {
|
|
1744
|
-
// console.log('Call Progress Component ngOnChanges callData', changes['callData'].currentValue);
|
|
1745
1742
|
if ((_a = changes['callData'].currentValue) === null || _a === void 0 ? void 0 : _a.isIncomingCall) {
|
|
1746
|
-
// console.log('Incoming call detected, showing incoming call UI');
|
|
1747
1743
|
this.incomingCallDiv = true;
|
|
1748
|
-
this.cdr.detectChanges();
|
|
1744
|
+
this.cdr.detectChanges();
|
|
1749
1745
|
}
|
|
1750
1746
|
else {
|
|
1751
|
-
// For outgoing call
|
|
1752
1747
|
this.startCall(changes['callData'].currentValue);
|
|
1753
1748
|
}
|
|
1754
1749
|
}
|
|
@@ -3061,12 +3056,11 @@ class DialboxComponent {
|
|
|
3061
3056
|
newIncomingCallInitiated() {
|
|
3062
3057
|
this.isCallInProgress = true;
|
|
3063
3058
|
this.newIncomingCalls = [];
|
|
3064
|
-
this.incomingCallInitiated.emit();
|
|
3059
|
+
// this.incomingCallInitiated.emit();
|
|
3065
3060
|
}
|
|
3066
3061
|
incomingCallsNewInfo(data) {
|
|
3067
|
-
// console.log('incomingCallsNewInfo', data);
|
|
3068
3062
|
this.incomingCallsList = data;
|
|
3069
|
-
this.incomingCallsNewInfoEvent.emit(data);
|
|
3063
|
+
// this.incomingCallsNewInfoEvent.emit(data);
|
|
3070
3064
|
}
|
|
3071
3065
|
ngOnDestroy() {
|
|
3072
3066
|
try {
|