@vgroup/dialbox 0.0.11 → 0.0.13
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 +14 -16
- package/esm2020/lib/components/call-progress/incoming-call/incoming-call.component.mjs +3 -7
- package/esm2020/lib/dialbox.component.mjs +27 -12
- package/esm2020/public-api.mjs +1 -14
- package/fesm2015/vgroup-dialbox.mjs +36 -46
- package/fesm2015/vgroup-dialbox.mjs.map +1 -1
- package/fesm2020/vgroup-dialbox.mjs +42 -46
- package/fesm2020/vgroup-dialbox.mjs.map +1 -1
- package/lib/components/call-progress/call-progress.component.d.ts +2 -3
- package/lib/components/call-progress/incoming-call/incoming-call.component.d.ts +4 -4
- package/package.json +1 -1
package/esm2020/public-api.mjs
CHANGED
|
@@ -7,17 +7,4 @@ export * from './lib/dialbox.module';
|
|
|
7
7
|
export * from './lib/components/call-progress/call-progress.component';
|
|
8
8
|
export * from './lib/components/call-progress/incoming-call/incoming-call.component';
|
|
9
9
|
export * from './lib/components/caller-id-dialog/caller-id-dialog.component';
|
|
10
|
-
|
|
11
|
-
// export * from './lib/components/dial-button/dial-button.component';
|
|
12
|
-
// // Services
|
|
13
|
-
// export * from './lib/components/services/dialer.service';
|
|
14
|
-
// export * from './lib/components/services/call-handler.service';
|
|
15
|
-
// // Models
|
|
16
|
-
// export * from './lib/components/models/call.interface';
|
|
17
|
-
// export * from './lib/components/models/dialer-options.interface';
|
|
18
|
-
// // Utils
|
|
19
|
-
// export * from './lib/components/utils/phone-validator.util';
|
|
20
|
-
// export * from './lib/components/utils/format-phone.util';
|
|
21
|
-
// // Module
|
|
22
|
-
// export * from './lib/dialbox.module';
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2RpYWxib3gvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsc0JBQXNCLENBQUM7QUFFckMsYUFBYTtBQUNiLGNBQWMsd0RBQXdELENBQUM7QUFDdkUsY0FBYyxzRUFBc0UsQ0FBQztBQUNyRixjQUFjLDhEQUE4RCxDQUFDO0FBQzdFLDhEQUE4RDtBQUM5RCxzRUFBc0U7QUFFdEUsY0FBYztBQUNkLDREQUE0RDtBQUM1RCxrRUFBa0U7QUFFbEUsWUFBWTtBQUNaLDBEQUEwRDtBQUMxRCxvRUFBb0U7QUFFcEUsV0FBVztBQUNYLCtEQUErRDtBQUMvRCw0REFBNEQ7QUFFNUQsWUFBWTtBQUNaLHdDQUF3QyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgZGlhbGJveFxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpYWxib3guY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpYWxib3gubW9kdWxlJztcblxuLy8gQ29tcG9uZW50c1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jYWxsLXByb2dyZXNzL2NhbGwtcHJvZ3Jlc3MuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY2FsbC1wcm9ncmVzcy9pbmNvbWluZy1jYWxsL2luY29taW5nLWNhbGwuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY2FsbGVyLWlkLWRpYWxvZy9jYWxsZXItaWQtZGlhbG9nLmNvbXBvbmVudCc7XG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2RpYWxwYWQvZGlhbHBhZC5jb21wb25lbnQnO1xuLy8gZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9kaWFsLWJ1dHRvbi9kaWFsLWJ1dHRvbi5jb21wb25lbnQnO1xuXG4vLyAvLyBTZXJ2aWNlc1xuLy8gZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9zZXJ2aWNlcy9kaWFsZXIuc2VydmljZSc7XG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL3NlcnZpY2VzL2NhbGwtaGFuZGxlci5zZXJ2aWNlJztcblxuLy8gLy8gTW9kZWxzXG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL21vZGVscy9jYWxsLmludGVyZmFjZSc7XG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL21vZGVscy9kaWFsZXItb3B0aW9ucy5pbnRlcmZhY2UnO1xuXG4vLyAvLyBVdGlsc1xuLy8gZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy91dGlscy9waG9uZS12YWxpZGF0b3IudXRpbCc7XG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL3V0aWxzL2Zvcm1hdC1waG9uZS51dGlsJztcblxuLy8gLy8gTW9kdWxlXG4vLyBleHBvcnQgKiBmcm9tICcuL2xpYi9kaWFsYm94Lm1vZHVsZSc7Il19
|
|
10
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2RpYWxib3gvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsc0JBQXNCLENBQUM7QUFFckMsYUFBYTtBQUNiLGNBQWMsd0RBQXdELENBQUM7QUFDdkUsY0FBYyxzRUFBc0UsQ0FBQztBQUNyRixjQUFjLDhEQUE4RCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBkaWFsYm94XG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlhbGJveC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvZGlhbGJveC5tb2R1bGUnO1xuXG4vLyBDb21wb25lbnRzXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2NhbGwtcHJvZ3Jlc3MvY2FsbC1wcm9ncmVzcy5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jYWxsLXByb2dyZXNzL2luY29taW5nLWNhbGwvaW5jb21pbmctY2FsbC5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jYWxsZXItaWQtZGlhbG9nL2NhbGxlci1pZC1kaWFsb2cuY29tcG9uZW50JztcbiJdfQ==
|
|
@@ -1430,23 +1430,19 @@ class IncomingCallComponent {
|
|
|
1430
1430
|
this.twilioService = twilioService;
|
|
1431
1431
|
this.showRingAnimation = true;
|
|
1432
1432
|
this.selectedIncomingCall = {};
|
|
1433
|
-
this.twilioAuthId = '';
|
|
1434
1433
|
this.dedicatedNum = '';
|
|
1435
|
-
this.recordCall = false;
|
|
1436
1434
|
this.shouldRecordCall = false;
|
|
1437
1435
|
this.isClickExpand = false;
|
|
1438
|
-
this.disbaleEndCallBtn = true;
|
|
1439
1436
|
this.closeIncomingCallDiv = new EventEmitter();
|
|
1440
1437
|
this.incomingCallsNewList = new EventEmitter();
|
|
1441
1438
|
this.selectedIncomingCallInfo = new EventEmitter();
|
|
1442
|
-
this.isMute = false;
|
|
1443
1439
|
}
|
|
1444
1440
|
ngOnInit() {
|
|
1445
1441
|
try {
|
|
1446
1442
|
this.twilioService.currentCall.subscribe(call => {
|
|
1447
1443
|
if (call) {
|
|
1448
1444
|
this.twilioCallData = call;
|
|
1449
|
-
this.twilioAuthId = call.customParameters.get('twilioAuthId')
|
|
1445
|
+
this.twilioAuthId = call.customParameters.get('twilioAuthId');
|
|
1450
1446
|
if (!call.parameters) {
|
|
1451
1447
|
call.parameters = {};
|
|
1452
1448
|
}
|
|
@@ -1576,7 +1572,7 @@ class IncomingCallComponent {
|
|
|
1576
1572
|
}
|
|
1577
1573
|
getUserInformation(incomingCallData) {
|
|
1578
1574
|
let data = this.fromEntries(Array.from(incomingCallData.customParameters.entries()));
|
|
1579
|
-
this.extensionService.getUserInformation(data
|
|
1575
|
+
this.extensionService.getUserInformation(data.twilioAuthId).subscribe(response => {
|
|
1580
1576
|
setTimeout(() => {
|
|
1581
1577
|
incomingCallData['userInfo'] = response;
|
|
1582
1578
|
}, 5000);
|
|
@@ -1626,7 +1622,7 @@ class CallProgressComponent {
|
|
|
1626
1622
|
this.isCollops = false;
|
|
1627
1623
|
// Incoming call variables
|
|
1628
1624
|
this.incomingCallDiv = false;
|
|
1629
|
-
|
|
1625
|
+
//@Output() showCallProgressEvent: EventEmitter<void> = new EventEmitter<void>();
|
|
1630
1626
|
this.incomingCallInitiated = new EventEmitter();
|
|
1631
1627
|
this.isRecording = false;
|
|
1632
1628
|
this.isPaused = false;
|
|
@@ -1641,26 +1637,26 @@ class CallProgressComponent {
|
|
|
1641
1637
|
ngOnChanges(changes) {
|
|
1642
1638
|
var _a, _b, _c, _d;
|
|
1643
1639
|
console.log('Call Progress Component ngOnChanges');
|
|
1644
|
-
if (changes
|
|
1645
|
-
console.log('Call Progress Component ngOnChanges callData', changes
|
|
1646
|
-
if (changes
|
|
1647
|
-
|
|
1640
|
+
if (changes.callData) {
|
|
1641
|
+
console.log('Call Progress Component ngOnChanges callData', changes.callData);
|
|
1642
|
+
if (changes.callData.currentValue.isIncomingCall) {
|
|
1643
|
+
changes.incomingCallDiv = true;
|
|
1648
1644
|
}
|
|
1649
1645
|
else {
|
|
1650
1646
|
//for outgoing call
|
|
1651
|
-
this.startCall(changes
|
|
1647
|
+
this.startCall(changes.callData.currentValue);
|
|
1652
1648
|
}
|
|
1653
1649
|
}
|
|
1654
|
-
if (changes
|
|
1650
|
+
if (changes.newIncomingCallData) {
|
|
1655
1651
|
try {
|
|
1656
|
-
if (changes
|
|
1652
|
+
if (changes.newIncomingCallData.currentValue) {
|
|
1657
1653
|
if (this.call && (this.call.status() == 'open')) {
|
|
1658
1654
|
this.call.disconnect();
|
|
1659
|
-
this.call = changes
|
|
1655
|
+
this.call = changes.newIncomingCallData.currentValue;
|
|
1660
1656
|
(_a = this.call) === null || _a === void 0 ? void 0 : _a.accept();
|
|
1661
|
-
this.callData.phone = (_b = this.call) === null || _b === void 0 ? void 0 : _b.parameters
|
|
1662
|
-
this.callData.name = (_c = this.call) === null || _c === void 0 ? void 0 : _c.customParameters.get('name');
|
|
1663
|
-
this.callData.img = ((_d = this.call) === null || _d === void 0 ? void 0 : _d.customParameters.get('image')
|
|
1657
|
+
this.callData.phone = ((_b = this.call) === null || _b === void 0 ? void 0 : _b.parameters).From;
|
|
1658
|
+
this.callData.name = ((_c = this.call) === null || _c === void 0 ? void 0 : _c.customParameters).get('name');
|
|
1659
|
+
this.callData.img = ((_d = this.call) === null || _d === void 0 ? void 0 : _d.customParameters).get('image') || 'assets/images/user.jpg';
|
|
1664
1660
|
this.incomingCallInitiated.emit();
|
|
1665
1661
|
this.startTimer();
|
|
1666
1662
|
}
|
|
@@ -2028,7 +2024,7 @@ class CallProgressComponent {
|
|
|
2028
2024
|
}
|
|
2029
2025
|
}
|
|
2030
2026
|
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 });
|
|
2031
|
-
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", showCallProgressEvent: "showCallProgressEvent", 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
|
|
2027
|
+
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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IncomingCallComponent, selector: "lib-incoming-call", inputs: ["incomingCallData", "newIncomingCallsList"], outputs: ["closeIncomingCallDiv", "incomingCallsNewList", "selectedIncomingCallInfo"] }] });
|
|
2032
2028
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CallProgressComponent, decorators: [{
|
|
2033
2029
|
type: Component,
|
|
2034
2030
|
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"] }]
|
|
@@ -2044,8 +2040,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2044
2040
|
type: Output
|
|
2045
2041
|
}], minimiseEvent: [{
|
|
2046
2042
|
type: Output
|
|
2047
|
-
}], showCallProgressEvent: [{
|
|
2048
|
-
type: Output
|
|
2049
2043
|
}], incomingCallInitiated: [{
|
|
2050
2044
|
type: Output
|
|
2051
2045
|
}] } });
|
|
@@ -2165,16 +2159,25 @@ class DialboxComponent {
|
|
|
2165
2159
|
}
|
|
2166
2160
|
}
|
|
2167
2161
|
});
|
|
2168
|
-
//
|
|
2169
|
-
const sub2 = this.twilioService.currentCall.subscribe(incomingCallData => {
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2162
|
+
// Handle incoming call
|
|
2163
|
+
const sub2 = this.twilioService.currentCall.subscribe((incomingCallData) => {
|
|
2164
|
+
var _a, _b;
|
|
2165
|
+
if (incomingCallData) {
|
|
2166
|
+
console.log('Incoming call received:', incomingCallData);
|
|
2167
|
+
this.isCallInProgress = true;
|
|
2168
|
+
this.isDialpadHidden = false;
|
|
2169
|
+
// Update call data for the UI
|
|
2170
|
+
this.callData = Object.assign(Object.assign({}, this.callData), { phone: incomingCallData.parameters.From, name: ((_a = incomingCallData.customParameters) === null || _a === void 0 ? void 0 : _a.get('name')) || 'Unknown Caller', img: ((_b = incomingCallData.customParameters) === null || _b === void 0 ? void 0 : _b.get('image')) || 'assets/images/user.jpg', isIncomingCall: true, extNum: incomingCallData.parameters.To || '' });
|
|
2171
|
+
// Add to incoming calls list if not already present
|
|
2172
|
+
const callSid = incomingCallData.parameters.CallSid;
|
|
2173
|
+
const existingCall = this.incomingCallsList.find((call) => call.parameters.CallSid === callSid);
|
|
2174
|
+
if (!existingCall) {
|
|
2175
|
+
this.incomingCallsList.push(incomingCallData);
|
|
2176
|
+
this.incomingCallsNewInfoEvent.emit(this.incomingCallsList);
|
|
2177
|
+
}
|
|
2178
|
+
// Notify parent component about the incoming call
|
|
2179
|
+
this.incomingCallInitiated.emit();
|
|
2180
|
+
}
|
|
2178
2181
|
if (incomingCallData) {
|
|
2179
2182
|
if (this.isCallInProgress) {
|
|
2180
2183
|
this.newIncomingCalls.push(incomingCallData);
|
|
@@ -2990,7 +2993,7 @@ class DialboxComponent {
|
|
|
2990
2993
|
}
|
|
2991
2994
|
}
|
|
2992
2995
|
DialboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, deps: [{ token: TwilioService }, { token: ExtensionService }, { token: i3$2.MatDialog }, { token: IpAddressService }, { token: ExtensionService }, { token: i5.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
2993
|
-
DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { isDialpadHidden: "isDialpadHidden" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", numberDialed: "numberDialed" }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n msssmsm\r\n</div>\r\n<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\"\r\n (endCallEvent)=\"endCall()\"\r\n (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n [newIncomingCallData]=\"newIncomingCallData\"\r\n [newIncomingCallsList]=\"incomingCallsList\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n [callData]=\"callData\">\r\n </lib-call-progress>\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n </svg> \r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n <span>{{dialAlert.msg}}</span>\r\n </div> -->\r\n <div>\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.numbersList[0].number}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg\r\n class=\"waves\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\"\r\n preserveAspectRatio=\"none\"\r\n shape-rendering=\"auto\"\r\n >\r\n <defs>\r\n <path\r\n id=\"gentle-wave\"\r\n d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"0\"\r\n fill=\"rgba(255,255,255,0.7)\"\r\n />\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"3\"\r\n fill=\"rgba(255,255,255,0.5)\"\r\n />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}} \r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : ' '}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n </span> -->\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\" [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span\r\n class=\"material-symbols-outlined\"\r\n style=\"cursor: pointer\"\r\n (click)=\"isCallerIdHidden = true\"\r\n >\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n <div>\r\n <div class=\"inc-user-img\">\r\n <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <!-- <h6 class=\"mb-1 font-weight-bold\">Incoming Call</h6> -->\r\n <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n <p>{{call.parameters.From}}</p>\r\n\r\n <!-- <p class=\"inc-user-name\">John Doe</p> \r\n <p>+12337472489</p>\r\n <p style=\"font-size: 12px;color:#d5d5d5 !important;margin-top:2px\">Call on +12264584100</p> -->\r\n\r\n </div>\r\n <div class=\"d-flex\">\r\n <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </button>\r\n <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call_end\r\n </span>\r\n </button>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px;height:600px;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.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)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "newIncomingCallData", "newIncomingCallsList"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "showCallProgressEvent", "incomingCallInitiated"] }] });
|
|
2996
|
+
DialboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialboxComponent, selector: "lib-dialbox", inputs: { isDialpadHidden: "isDialpadHidden" }, outputs: { closeDialpadEvent: "closeDialpadEvent", callInitiated: "callInitiated", endCallEvent: "endCallEvent", minimiseEvent: "minimiseEvent", incomingCallsNewInfoEvent: "incomingCallsNewInfoEvent", incomingCallInitiated: "incomingCallInitiated", numberDialed: "numberDialed" }, viewQueries: [{ propertyName: "dialInputElement", first: true, predicate: ["dialInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\r\n msssmsm\r\n</div>\r\n<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\"\r\n (endCallEvent)=\"endCall()\"\r\n (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n [newIncomingCallData]=\"newIncomingCallData\"\r\n [newIncomingCallsList]=\"incomingCallsList\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n [callData]=\"callData\">\r\n </lib-call-progress>\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n </svg> \r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n <span>{{dialAlert.msg}}</span>\r\n </div> -->\r\n <div>\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.numbersList[0].number}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg\r\n class=\"waves\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\"\r\n preserveAspectRatio=\"none\"\r\n shape-rendering=\"auto\"\r\n >\r\n <defs>\r\n <path\r\n id=\"gentle-wave\"\r\n d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"0\"\r\n fill=\"rgba(255,255,255,0.7)\"\r\n />\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"3\"\r\n fill=\"rgba(255,255,255,0.5)\"\r\n />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}} \r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : ' '}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n </span> -->\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\" [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span\r\n class=\"material-symbols-outlined\"\r\n style=\"cursor: pointer\"\r\n (click)=\"isCallerIdHidden = true\"\r\n >\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n <div>\r\n <div class=\"inc-user-img\">\r\n <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <!-- <h6 class=\"mb-1 font-weight-bold\">Incoming Call</h6> -->\r\n <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n <p>{{call.parameters.From}}</p>\r\n\r\n <!-- <p class=\"inc-user-name\">John Doe</p> \r\n <p>+12337472489</p>\r\n <p style=\"font-size: 12px;color:#d5d5d5 !important;margin-top:2px\">Call on +12264584100</p> -->\r\n\r\n </div>\r\n <div class=\"d-flex\">\r\n <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </button>\r\n <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call_end\r\n </span>\r\n </button>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px;height:600px;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.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)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CallProgressComponent, selector: "lib-call-progress", inputs: ["callData", "newIncomingCallData", "newIncomingCallsList"], outputs: ["endCallEvent", "incomingCallsNewInfo", "minimiseEvent", "incomingCallInitiated"] }] });
|
|
2994
2997
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialboxComponent, decorators: [{
|
|
2995
2998
|
type: Component,
|
|
2996
2999
|
args: [{ selector: 'lib-dialbox', template: "<div>\r\n msssmsm\r\n</div>\r\n<div id=\"dragparent1\" [ngStyle]=\"{'display':isDialpadHidden ? 'none': 'block'}\">\r\n <lib-call-progress *ngIf=\"isCallInProgress\"\r\n (endCallEvent)=\"endCall()\"\r\n (minimiseEvent)=\"onMinimise($event)\"\r\n (incomingCallInitiated)=\"newIncomingCallInitiated()\"\r\n [newIncomingCallData]=\"newIncomingCallData\"\r\n [newIncomingCallsList]=\"incomingCallsList\"\r\n (incomingCallsNewInfo)=\"incomingCallsNewInfo($event)\"\r\n [callData]=\"callData\">\r\n </lib-call-progress>\r\n <div class=\"dialpad-container\" [ngClass]=\"{'mini-dialpad': isMinimised}\" tabindex=\"0\" (keydown)=\"handleDivKeydown($event)\">\r\n <div id=\"topPanel\" [ngStyle]=\"{'height': callerIdList.length ? '40%' : '39%'}\">\r\n <div class=\"dialpad-alerts\" *ngIf=\"dialAlert.show\">\r\n <div class=\"no-selection-alert\">\r\n <!-- <p class=\"mb-0\">Select C2C number to call</p> -->\r\n <p class=\"mb-0\">{{dialAlert.msg}}</p>\r\n <span class=\"fa fa-times\" (click)=\"shakeDedicatedBtn = false\"></span>\r\n </div>\r\n </div>\r\n <div class=\"dialpad-alerts\" *ngIf=\"callNumberToast.show\">\r\n <div class=\"dialbox-pop1 alert fade show\" [ngClass]=\"callNumberToast.type\" role=\"alert\">\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"flex-grow-1 my-auto text-left\">\r\n You'r calling <strong>{{callNumberToast.displayNum}}</strong>\r\n </div>\r\n <div class=\"text-right\">\r\n <button class=\"btn btn-link btn-disc p-0 px-1\" (click)=\"cancelDialNumber()\">Cancel Call</button>\r\n <!-- <button class=\"btn btn-link btn-success btn-disc p-0 px-2\">Continue</button> -->\r\n </div>\r\n \r\n </div>\r\n </div>\r\n </div>\r\n <div style=\"padding: 0 18px\" (paste)=\"handleNumberPaste($event)\">\r\n <div class=\"d-flex justify-content-between mt-2\">\r\n <p></p>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"hideDialpad()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#ffffff\"><path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"/></svg>\r\n </span>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" #dialInput placeholder=\"Enter a name or number\" tabindex=\"1\" [(ngModel)]=\"dialedNumber\" (ngModelChange)=\"onDialInputChange($event)\"/>\r\n <span class=\"\" id=\"input-clear-btn\" (click)=\"clearInput()\" *ngIf=\"showInputClearBtn\">\r\n <svg width=\"50px\" height=\"30px\" viewBox=\"0 10 40 60\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" baseProfile=\"full\" enable-background=\"new 0 0 76.00 76.00\" xml:space=\"preserve\">\r\n <path fill=\"#5d6061\" fill-opacity=\"1\" stroke-width=\"0.2\" stroke-linejoin=\"round\" d=\"M 47.5282,42.9497L 42.5784,38L 47.5282,33.0502L 44.9497,30.4718L 40,35.4216L 35.0502,30.4718L 32.4718,33.0502L 37.4216,38L 32.4718,42.9497L 35.0502,45.5282L 40,40.5784L 44.9497,45.5282L 47.5282,42.9497 Z M 18.0147,41.5355L 26.9646,50.4854C 28.0683,51.589 29,52 31,52L 52,52C 54.7614,52 57,49.7614 57,47L 57,29C 57,26.2386 54.7614,24 52,24L 31,24C 29,24 28.0683,24.4113 26.9646,25.5149L 18.0147,34.4645C 16.0621,36.4171 16.0621,39.5829 18.0147,41.5355 Z M 31,49C 30,49 29.6048,48.8828 29.086,48.3641L 20.1361,39.4142C 19.355,38.6332 19.355,37.3669 20.1361,36.5858L 29.086,27.6362C 29.6048,27.1175 30,27 31,27.0001L 52,27.0001C 53.1046,27.0001 54,27.8955 54,29.0001L 54,47.0001C 54,48.1046 53.1046,49.0001 52,49.0001L 31,49 Z \"/>\r\n </svg> \r\n </span>\r\n <span class=\"input-info-icon\" placement=\"bottom-right\" tooltipClass=\"input-tooltip\" ngbTooltip=\"For extension dialing, use formats like +12345678910 x123,+12345678910 ext.123, +12345678910,123\"><i class=\"fa fa-info-circle\"></i></span>\r\n </div>\r\n <div class=\"guide\" *ngIf=\"callerIdList.length && !(dialedNumber.length > 2)\">\r\n <span class=\"guidetext\">Please enter a number or select a saved contact</span>\r\n </div>\r\n <!-- <div class=\"input-error\" *ngIf=\"dialAlert.show\">\r\n <span>{{dialAlert.msg}}</span>\r\n </div> -->\r\n <div>\r\n <div class=\"contact-card\" *ngFor=\"let contact of filteredContactList\" (click)=\"onContactSelect(contact)\">\r\n <div class=\"contact-img\">\r\n <img [src]=\"contact.image\" alt=\"user image\" loading=\"lazy\" *ngIf=\"contact.image else alphaName\"/>\r\n <ng-template #alphaName>\r\n <span class=\"contact-alpha-img\">{{getFirstLetter(contact.firstName)}}</span>\r\n </ng-template>\r\n </div>\r\n <div class=\"contact-details\">\r\n <p style=\"margin-bottom: 4px\" class=\"contact-name\">{{getFullName(contact) }}</p>\r\n <p>{{contact.numbersList[0].number}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wave-container\">\r\n <svg\r\n class=\"waves\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n viewBox=\"0 24 150 28\"\r\n preserveAspectRatio=\"none\"\r\n shape-rendering=\"auto\"\r\n >\r\n <defs>\r\n <path\r\n id=\"gentle-wave\"\r\n d=\"M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z\"\r\n />\r\n </defs>\r\n <g class=\"parallax\">\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"0\"\r\n fill=\"rgba(255,255,255,0.7)\"\r\n />\r\n <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"3\"\r\n fill=\"rgba(255,255,255,0.5)\"\r\n />\r\n <!-- <use\r\n xlink:href=\"#gentle-wave\"\r\n x=\"48\"\r\n y=\"5\"\r\n fill=\"rgba(255,255,255,0.3)\"\r\n /> -->\r\n <use xlink:href=\"#gentle-wave\" x=\"48\" y=\"7\" fill=\"#fff\" />\r\n </g>\r\n </svg>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" *ngIf=\"!isMinimised\">\r\n <button class=\"dial-btn\" *ngFor=\"let key of keypadVal;let i = index\"\r\n (keydown.enter)=\"onEnter(key.num)\" (click)=\"addNumber(key.num)\"\r\n [ngStyle]=\"{'margin-top': key.text === '+' ? '3px' : '0'}\"\r\n [tabindex]=\"dialedNumber.length ? '0': i+2\" longPress (longPress)=\"addNumber(key.text)\" shortPress (shortPress)=\"addNumber(key.num)\">\r\n {{key.num}} \r\n <span *ngIf=\"key.num == 1;else otherThanOne\" class=\"material-symbols-outlined voicemail\">\r\n voicemail\r\n </span>\r\n <ng-template #otherThanOne>\r\n <span class=\"btn-albhabets\" [ngClass]=\"{'plusSign': key.text === '+'}\">{{key.text ? key.text : ' '}}</span>\r\n </ng-template>\r\n </button>\r\n </div>\r\n <div class=\"call-btn-container\" *ngIf=\"!isMinimised\" (mouseenter)=\"onCallBtnMouseEnter($event)\" (mouseleave)=\"onCallBtnMouseLeave($event)\">\r\n <div class=\"call-btn\" (click)=\"initiateCall()\" [tabindex]=\"dialedNumber.length ? '2': '15'\"\r\n [ngStyle]=\"{'pointer-events': dialedNumber.length && selectedCallerId ? 'auto' : 'none', 'opacity': dialedNumber.length && selectedCallerId ? '1' : '0.5'}\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </div>\r\n </div>\r\n <div *ngIf=\"callerIdList.length && !isMinimised\" class=\"position-relative\">\r\n <div class=\"shownCallerId\" *ngIf=\"selectedCallerId; else askBlock\" (click)=\"toggleCallerIdDiv()\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + selectedCallerId?.isoCode?.toLowerCase()\"></span>\r\n {{selectedCallerId?.number}}\r\n </div>\r\n </div>\r\n <ng-template #askBlock>\r\n <div class=\"shownCallerId\" (click)=\"toggleCallerIdDiv()\" [ngClass]=\"{ 'tilt-shaking': shakeDedicatedBtn }\">\r\n <div class=\"d-flex justify-content-center\">\r\n <h5 class=\"mb-0\">Select C2C number</h5>\r\n <!-- <span class=\"ml-2\" style=\"opacity:.8;margin-top:2px\">\r\n <img src=\"assets/images/icon_down_arrow.svg\" alt=\"down\" width=\"10px\">\r\n </span> -->\r\n <span class=\"fa fa-angle-down ml-2 text-blue\" style=\"margin-top:2px\"></span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div class=\"guide2\" *ngIf=\"shakeDedicatedBtn\">\r\n <span class=\"guidetext\">Please select a number from below dropdown</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"callerIdList.length; else noCallerIdMessage\">\r\n <div class=\"caller-id-list-container\" *ngIf=\"callerIdList.length && !isMinimised\" id=\"callerIdContainer\" [ngClass]=\"{'visible': !isCallerIdHidden}\" >\r\n <div style=\"display: flex; justify-content: space-between\">\r\n <!-- <h4>Select C2C Softphone Number</h4> -->\r\n <h4>Make outgoing call using</h4>\r\n <span\r\n class=\"material-symbols-outlined\"\r\n style=\"cursor: pointer\"\r\n (click)=\"isCallerIdHidden = true\"\r\n >\r\n close\r\n </span>\r\n </div>\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"onDedicatedNumSelect(callerId)\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n <ng-template #noCallerIdMessage>\r\n <span class=\"no-caller-id-message\">To make any voice calls, please <a routerLink=\"/extension/dedicatednumber/{{token}}\" class=\"click-here-link\" title=\"Settings > C2C Number\">subscribe</a> to a voice capable C2C Number.\r\n </span>\r\n </ng-template>\r\n <div class=\"dedicated-overlay\" *ngIf=\"showDedicatedPopup\">\r\n <div class=\"card dedicatedNumPopup\">\r\n <div class=\"card-header chooseDedicatedHeader\">\r\n <h5>Choose C2C Number</h5>\r\n <span class=\"material-symbols-outlined dial-close-btn\" (click)=\"showDedicatedPopup = false\">close</span>\r\n </div>\r\n <div class=\"card-body dedicatedNumList\">\r\n <ul>\r\n <ng-container *ngFor=\"let callerId of callerIdList\">\r\n <li [ngClass]=\"{'selectedCallerIdClass': callerId?.number == selectedCallerId?.number}\" (click)=\"showDedicatedPopup = false\">\r\n <div>\r\n <span [ngClass]=\"'fi fi-' + callerId?.isoCode?.toLowerCase()\"></span>\r\n {{callerId?.number}}\r\n </div>\r\n <span>{{callerId?.countryName}}</span>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"incoming-call-widget\" *ngFor=\"let call of newIncomingCalls;let i = index\" [ngStyle]=\"{'top': (30 + i * 72) + 'px'}\">\r\n <div>\r\n <div class=\"inc-user-img\">\r\n <img src=\"assets/images/user.jpg\" alt=\"user image\">\r\n </div>\r\n \r\n </div>\r\n <div class=\"flex-grow-1\">\r\n <!-- <h6 class=\"mb-1 font-weight-bold\">Incoming Call</h6> -->\r\n <p class=\"inc-user-name\">{{call.customParameters.get('name')}}</p>\r\n <p>{{call.parameters.From}}</p>\r\n\r\n <!-- <p class=\"inc-user-name\">John Doe</p> \r\n <p>+12337472489</p>\r\n <p style=\"font-size: 12px;color:#d5d5d5 !important;margin-top:2px\">Call on +12264584100</p> -->\r\n\r\n </div>\r\n <div class=\"d-flex\">\r\n <button class=\"inc-call-btn inc-accept-btn mr-2\" (click)=\"acceptNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call\r\n </span>\r\n </button>\r\n <button class=\"inc-call-btn inc-reject-btn\" (click)=\"rejectNewIncomingCall(call)\">\r\n <span class=\"material-symbols-outlined\" style=\"color: white\">\r\n call_end\r\n </span>\r\n </button>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n</div>\r\n", styles: ["#dragparent1{position:fixed;left:100px;z-index:9999999;font-family:Lato,sans-serif;display:none}.dialpad-container{width:320px;height:600px;background:white;margin:auto;border-radius:30px;box-shadow:#00000040 0 54px 55px,#0000001f 0 -12px 30px,#0000001f 0 4px 6px,#0000002b 0 12px 13px,#00000017 0 -3px 5px;display:flex;flex-direction:column;box-sizing:border-box;position:relative;line-height:1.1}.dialpad-alerts{position:absolute;width:calc(100% - 28px);left:14px;top:8px;z-index:1200}.btn-disc{font-size:12px}.dialbox-pop1{font-size:.8rem;z-index:9;padding:8px}.input-error>span{color:#dfdfdf;margin-bottom:2px}.dial-close-btn{cursor:pointer;opacity:.6}.dial-close-btn:hover{opacity:1}.btn-container{display:flex;flex-wrap:wrap;padding:0 18px}.dial-btn{width:50px;height:50px;background-color:#fff;border-radius:4px;text-align:center;box-sizing:border-box;margin:4px 22px;font-size:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Lato,sans-serif;font-weight:900;font-style:normal;color:#2b434d;cursor:pointer;opacity:.8;border:none}.dial-btn:hover{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:focus{opacity:1;box-shadow:#00000026 0 2px 8px}.dial-btn:active{box-shadow:#32325d40 0 30px 60px -12px inset,#0000004d 0 18px 36px -18px inset}.call-btn-container{display:flex;margin-top:8px;justify-content:center;position:relative}.call-btn{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:27px;background-color:#2ecc71;outline:none;border:none;box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;opacity:.8;cursor:pointer}.call-btn:hover{opacity:1}.call-btn:focus{opacity:1}.caller-id-list-container{width:100%;height:auto;position:absolute;bottom:-100%;left:0;border-radius:0 0 30px 30px/0px 0px 30px 30px;padding:8px 12px 32px;box-sizing:border-box;color:#8a8a8a}.visible{animation:slideUp .8s forwards}#callerIdContainer ul{list-style:none;padding-left:0;margin:0}.dialpad-container h4{font-family:Lato,sans-serif;margin:0 0 8px}#callerIdContainer ul li{background-color:#fff;padding:8px;margin-top:7px;display:flex;border-radius:4px;justify-content:space-between;font-size:14px;cursor:pointer}.fi{border-radius:2px;margin-right:2px}@keyframes slideUp{0%{bottom:-100%}to{bottom:0}}.selectedCallerIdClass{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026;border:1px solid #e0e0e0;color:#3a3a3a}.toggleBtn{color:gray;border:none;background-color:#e5eef1}.btn-albhabets{font-family:Lato,sans-serif;font-size:12px;font-weight:400}.plusSign{font-weight:600;font-size:14px}.shownCallerId{text-align:center;padding:8px 10px;font-family:Lato,sans-serif;color:#2ecc71;border:1px solid #d7d7d7;background-color:#fff;width:80%;margin:12px auto auto;border-radius:12px;position:relative;cursor:pointer}.input-box{width:100%;background-color:#fff;padding:4px 10px;border:1px solid rgb(197,197,197);box-sizing:border-box;border-radius:24px;margin-top:12px;display:flex;justify-content:space-between}.input-box:focus-within{box-shadow:6px 6px 10px -1px #00000026,-5px -4px 10px -1px #00000026}.input-box input{font-size:18px;padding:8px 6px;width:100%;box-sizing:border-box;border:none;outline:none;font-weight:600;color:#2b434d}.input-box input::placeholder{font-size:16px;font-weight:500}#input-clear-btn{color:gray;display:flex;align-items:center;cursor:pointer}.contact-card{width:100%;height:54px;display:flex;border-radius:12px;overflow:hidden;margin-top:4px;box-shadow:6px 6px 10px -1px #e6eefc26;cursor:pointer;opacity:0;transform:translateY(20px);animation:slideIn .5s forwards}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.contact-img{width:50px;display:flex;align-items:center;justify-content:center;border-right:1px solid #bebebe;background-color:#fff}.contact-img img{max-width:50px}.contact-alpha-img{width:50px;display:flex;justify-content:center;align-items:center;font-size:38px;font-weight:600}.contact-details{padding:4px 8px;display:flex;flex-direction:column;justify-content:center}.contact-details p{margin:0;line-height:1;color:#fff}.contact-name{font-weight:600}#topPanel{height:39%;position:relative;margin-bottom:4px;padding:0;border-top-right-radius:30px;border-top-left-radius:30px}.wave-container{position:absolute;bottom:2px}.waves{width:320px;position:relative;margin-bottom:-7px;height:31px;min-height:31px}.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)}}app-call-progress{position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1000}.mini-dialpad{height:124px!important}.voicemail{line-height:.7;font-size:18px}.dedicated-overlay{position:absolute;width:100%;height:100%;background-color:#2b434d99;display:flex;align-items:center;justify-content:center}.dedicatedNumPopup{width:90%;height:auto;box-sizing:border-box;color:#8a8a8a;background-color:#cbe7df}.chooseDedicatedHeader{padding:.75rem;display:flex;justify-content:space-between}.chooseDedicatedHeader h5{margin-bottom:0}.dedicatedNumList>ul{list-style-type:none;padding:0}.dedicatedNumList>ul li{background-color:#fff;padding:4px;cursor:pointer}@keyframes tilt-shaking{0%{transform:rotate(0)}25%{transform:rotate(5deg)}50%{transform:rotate(0)}75%{transform:rotate(-5deg)}to{transform:rotate(0)}}.tilt-shaking{background-color:#d45858;animation:tilt-shaking .5s infinite;color:#fff}.tilt-shaking h5,.dark .tilt-shaking span,.tilt-shaking span{color:#fff}.no-caller-id-message{display:inline-block;text-align:center;height:10vh;background-color:#fff3cd;color:#000;font-size:.9rem;line-height:1.5;padding:8px}.click-here-link{color:#0f9aee;text-decoration:underline;font-weight:700}.input-info-icon{margin-top:9px;cursor:pointer;color:#2b434d;opacity:.7}::ng-deep .input-tooltip .tooltip-inner{background-color:#000!important}.no-selection-alert{padding:3px 11px;border:1px solid;border-radius:4px;display:flex;justify-content:space-between;color:#721c24;background-color:#f8d7da;border-color:#f5c6cb;align-items:center}.guide{position:relative;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px}.guide:before{content:\"\";position:absolute;top:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #303030}.guide2{position:absolute;top:-32px;left:24px;padding:8px;background-color:#303030;color:#fff;border-radius:8px;margin-top:8px;font-size:12px;pointer-events:none}.guide2:before{content:\"\";position:absolute;bottom:-8px;left:8px;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #303030}.incoming-call-widget{position:absolute;right:-320px;top:30px;width:320px;height:68px;background-color:#3052cd;border-top-right-radius:8px;border-bottom-right-radius:8px;display:flex;align-items:center;padding:4px 12px}.incoming-call-widget h6,.incoming-call-widget p{margin-bottom:0;line-height:1.2;color:#fff}.inc-user-img{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin-right:8px}.inc-user-img img{width:100%}.inc-call-btn{width:40px;height:40px;border-radius:50%;outline:none;border-width:0;display:flex;align-items:center;justify-content:center}.inc-call-btn span{font-size:16px}.inc-accept-btn{background-color:#2ecc71;color:#fff}.inc-reject-btn{background-color:#e14e4e;color:#fff}.inc-user-name{font-weight:600}\n"] }]
|
|
@@ -3111,20 +3114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3111
3114
|
|
|
3112
3115
|
/*
|
|
3113
3116
|
* Public API Surface of dialbox
|
|
3114
|
-
*/
|
|
3115
|
-
// export * from './lib/components/dialpad/dialpad.component';
|
|
3116
|
-
// export * from './lib/components/dial-button/dial-button.component';
|
|
3117
|
-
// // Services
|
|
3118
|
-
// export * from './lib/components/services/dialer.service';
|
|
3119
|
-
// export * from './lib/components/services/call-handler.service';
|
|
3120
|
-
// // Models
|
|
3121
|
-
// export * from './lib/components/models/call.interface';
|
|
3122
|
-
// export * from './lib/components/models/dialer-options.interface';
|
|
3123
|
-
// // Utils
|
|
3124
|
-
// export * from './lib/components/utils/phone-validator.util';
|
|
3125
|
-
// export * from './lib/components/utils/format-phone.util';
|
|
3126
|
-
// // Module
|
|
3127
|
-
// export * from './lib/dialbox.module';
|
|
3117
|
+
*/
|
|
3128
3118
|
|
|
3129
3119
|
/**
|
|
3130
3120
|
* Generated bundle index. Do not edit.
|