@vgroup/dialbox 0.1.21 → 0.1.23
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/incoming-call/incoming-call.component.mjs +80 -32
- package/fesm2015/vgroup-dialbox.mjs +81 -31
- package/fesm2015/vgroup-dialbox.mjs.map +1 -1
- package/fesm2020/vgroup-dialbox.mjs +79 -31
- package/fesm2020/vgroup-dialbox.mjs.map +1 -1
- package/lib/components/call-progress/incoming-call/incoming-call.component.d.ts +5 -2
- package/package.json +1 -1
|
@@ -1571,6 +1571,12 @@ class IncomingCallComponent {
|
|
|
1571
1571
|
this.incomingCallsNewList = new EventEmitter();
|
|
1572
1572
|
this.selectedIncomingCallInfo = new EventEmitter();
|
|
1573
1573
|
}
|
|
1574
|
+
ngOnChanges(changes) {
|
|
1575
|
+
// Handle input changes if needed
|
|
1576
|
+
if (changes['incomingCallData'] && changes['incomingCallData'].currentValue) {
|
|
1577
|
+
// You can add logic here to handle incomingCallData changes
|
|
1578
|
+
}
|
|
1579
|
+
}
|
|
1574
1580
|
ngOnInit() {
|
|
1575
1581
|
// this.twilioService.currentCall.subscribe((call: any) => {
|
|
1576
1582
|
// if (call) {
|
|
@@ -1580,26 +1586,39 @@ class IncomingCallComponent {
|
|
|
1580
1586
|
// }
|
|
1581
1587
|
// });
|
|
1582
1588
|
try {
|
|
1583
|
-
|
|
1584
|
-
|
|
1589
|
+
// Store the subscription to clean it up later
|
|
1590
|
+
this.callSubscription = this.twilioService.currentCall.subscribe(call => {
|
|
1591
|
+
if (!call)
|
|
1592
|
+
return;
|
|
1593
|
+
const callSid = call.parameters?.['CallSid'];
|
|
1594
|
+
if (!callSid)
|
|
1595
|
+
return;
|
|
1596
|
+
// Initialize newIncomingCallsList if it's undefined
|
|
1597
|
+
if (!this.newIncomingCallsList) {
|
|
1598
|
+
this.newIncomingCallsList = [];
|
|
1599
|
+
}
|
|
1600
|
+
// Check if this call already exists in the list
|
|
1601
|
+
const existingCallIndex = this.newIncomingCallsList.findIndex((item) => item.parameters?.['CallSid'] === callSid);
|
|
1602
|
+
if (existingCallIndex !== -1) {
|
|
1603
|
+
// Update existing call instead of adding a new one
|
|
1604
|
+
this.newIncomingCallsList[existingCallIndex] = call;
|
|
1605
|
+
}
|
|
1606
|
+
else {
|
|
1607
|
+
// Add new call to the list
|
|
1585
1608
|
this.twilioCallData = call;
|
|
1586
|
-
this.twilioAuthId = call.customParameters
|
|
1609
|
+
this.twilioAuthId = call.customParameters?.get('twilioAuthId');
|
|
1587
1610
|
if (!call.parameters) {
|
|
1588
1611
|
call.parameters = {};
|
|
1589
1612
|
}
|
|
1613
|
+
this.newIncomingCallsList = [...this.newIncomingCallsList, call];
|
|
1590
1614
|
this.sendIPforIncomingCall(this.twilioAuthId, '');
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
call.on('disconnect', () =>
|
|
1598
|
-
if (this.incomingCallData && this.incomingCallData.parameters && this.incomingCallData.parameters.CallSid) {
|
|
1599
|
-
this.newIncomingCallsList = this.newIncomingCallsList.filter((item) => item.parameters && item.parameters.CallSid !== this.incomingCallData.parameters.CallSid);
|
|
1600
|
-
}
|
|
1601
|
-
this.rejectCallFromList(call);
|
|
1602
|
-
});
|
|
1615
|
+
}
|
|
1616
|
+
// Emit the updated list
|
|
1617
|
+
this.incomingCallsNewList.emit([...this.newIncomingCallsList]);
|
|
1618
|
+
// Set up event handlers for the call if not already set
|
|
1619
|
+
if (existingCallIndex === -1) {
|
|
1620
|
+
call.on('cancel', () => this.handleCallEnd(call, callSid));
|
|
1621
|
+
call.on('disconnect', () => this.handleCallEnd(call, callSid));
|
|
1603
1622
|
}
|
|
1604
1623
|
});
|
|
1605
1624
|
}
|
|
@@ -1622,25 +1641,54 @@ class IncomingCallComponent {
|
|
|
1622
1641
|
}
|
|
1623
1642
|
});
|
|
1624
1643
|
}
|
|
1644
|
+
// Helper method to handle call end events
|
|
1645
|
+
handleCallEnd(call, callSid) {
|
|
1646
|
+
if (!callSid || !this.newIncomingCallsList)
|
|
1647
|
+
return;
|
|
1648
|
+
// Remove call from the list
|
|
1649
|
+
const initialLength = this.newIncomingCallsList.length;
|
|
1650
|
+
this.newIncomingCallsList = this.newIncomingCallsList.filter((item) => item.parameters?.['CallSid'] !== callSid);
|
|
1651
|
+
// Only emit if the list actually changed
|
|
1652
|
+
if (this.newIncomingCallsList.length !== initialLength) {
|
|
1653
|
+
this.incomingCallsNewList.emit([...this.newIncomingCallsList]);
|
|
1654
|
+
// Close UI if no more calls
|
|
1655
|
+
if (this.newIncomingCallsList.length === 0) {
|
|
1656
|
+
this.closeIncomingCallDiv.emit({ show: 0, call });
|
|
1657
|
+
}
|
|
1658
|
+
}
|
|
1659
|
+
}
|
|
1625
1660
|
rejectCallFromList(data) {
|
|
1626
1661
|
if (!data)
|
|
1627
1662
|
return;
|
|
1628
|
-
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
data.
|
|
1634
|
-
|
|
1635
|
-
if (data.customParameters) {
|
|
1636
|
-
this.sendIPforIncomingCall(data.customParameters.get('twilioAuthId'), 'answered');
|
|
1637
|
-
}
|
|
1638
|
-
if (this.newIncomingCallsList && data && data.parameters && data.parameters.CallSid) {
|
|
1639
|
-
this.newIncomingCallsList = this.newIncomingCallsList.filter((item) => item.parameters && item.parameters.CallSid !== data.parameters.CallSid);
|
|
1640
|
-
this.incomingCallsNewList.emit(this.newIncomingCallsList);
|
|
1641
|
-
if (this.newIncomingCallsList.length == 0) {
|
|
1642
|
-
this.closeIncomingCallDiv.emit({ show: 0, call: data });
|
|
1663
|
+
const callSid = data.parameters?.['CallSid'];
|
|
1664
|
+
if (!callSid)
|
|
1665
|
+
return;
|
|
1666
|
+
try {
|
|
1667
|
+
// Try to reject or disconnect the call
|
|
1668
|
+
if (typeof data.reject === 'function') {
|
|
1669
|
+
data.reject();
|
|
1643
1670
|
}
|
|
1671
|
+
else if (typeof data.disconnect === 'function') {
|
|
1672
|
+
data.disconnect();
|
|
1673
|
+
}
|
|
1674
|
+
// Update call status
|
|
1675
|
+
if (data.parameters) {
|
|
1676
|
+
data.parameters['isCallConnected'] = false;
|
|
1677
|
+
}
|
|
1678
|
+
// Update call status on the server
|
|
1679
|
+
if (data.customParameters) {
|
|
1680
|
+
const twilioAuthId = data.customParameters.get('twilioAuthId');
|
|
1681
|
+
if (twilioAuthId) {
|
|
1682
|
+
this.sendIPforIncomingCall(twilioAuthId, 'completed');
|
|
1683
|
+
}
|
|
1684
|
+
}
|
|
1685
|
+
// Remove call from the list
|
|
1686
|
+
this.handleCallEnd(data, callSid);
|
|
1687
|
+
}
|
|
1688
|
+
catch (error) {
|
|
1689
|
+
console.error('Error rejecting call:', error);
|
|
1690
|
+
// Make sure to clean up even if there's an error
|
|
1691
|
+
this.handleCallEnd(data, callSid);
|
|
1644
1692
|
}
|
|
1645
1693
|
}
|
|
1646
1694
|
closeIncomingCallWrapper(val) {
|
|
@@ -1728,7 +1776,7 @@ class IncomingCallComponent {
|
|
|
1728
1776
|
}
|
|
1729
1777
|
}
|
|
1730
1778
|
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 });
|
|
1731
|
-
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%; left: 116px;\" *ngIf=\"newIncomingCallsList.length > 0\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\">\n <div class=\"callToNum\">Incoming call {{newIncomingCallsList?.length}} <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\"> micisClickExpand </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:752px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width: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"] }] });
|
|
1779
|
+
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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"call-container\" style=\"width: 100%; left: 116px;\" *ngIf=\"newIncomingCallsList.length > 0\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\">\n <div class=\"callToNum\">Incoming call {{newIncomingCallsList?.length}} <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\"> micisClickExpand </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:752px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width: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"] }] });
|
|
1732
1780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallComponent, decorators: [{
|
|
1733
1781
|
type: Component,
|
|
1734
1782
|
args: [{ selector: 'lib-incoming-call', template: "<div class=\"call-container\" style=\"width: 100%; left: 116px;\" *ngIf=\"newIncomingCallsList.length > 0\">\n <div class=\"collops\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex flex-column container-fluid\">\n <div class=\"callToNum\">Incoming call {{newIncomingCallsList?.length}} <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\"> micisClickExpand </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:752px!important;height:646px!important;margin:auto;border-radius:30px;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;display:flex;box-sizing:border-box;position:relative;overflow:hidden;justify-content:center;align-items:center}.collops{display:flex;flex-direction:column;width:100%;height:100%}.container-fluid{width:400px;height:100%;margin-top:10px}.model-content{background-color:#0d6efd;border-radius:20px;width: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"] }]
|