@vgroup/dialbox 0.0.81 → 0.0.82

package/esm2020/lib/components/incoming-call-overlay/incoming-call-overlay.component.mjs

@@ -0,0 +1,65 @@
+import { Component } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "../../service/twilio.service";
+import * as i2 from "@angular/common";
+export class IncomingCallOverlayComponent {
+    constructor(twilioService) {
+        this.twilioService = twilioService;
+        this.showOverlay = false;
+        this.callData = {
+            phone: '',
+            name: 'Unknown',
+            img: 'assets/images/user.jpg',
+            isIncomingCall: false
+        };
+    }
+    ngOnInit() {
+        // Subscribe to call state changes
+        this.callStateSubscription = this.twilioService.currentCallState.subscribe(state => {
+            if (state === 'incoming') {
+                this.showOverlay = true;
+            }
+            else if (state === 'none') {
+                this.showOverlay = false;
+            }
+        });
+        // Subscribe to call object changes
+        this.callSubscription = this.twilioService.currentCall.subscribe((call) => {
+            if (call) {
+                this.callData = {
+                    phone: call.parameters['From'],
+                    name: call.customParameters?.get('name') || 'Unknown',
+                    img: call.customParameters?.get('image') || 'assets/images/user.jpg',
+                    isIncomingCall: true,
+                    call: call
+                };
+            }
+        });
+    }
+    acceptCall() {
+        this.twilioService.isIncomingCallPicked.next(true);
+        this.twilioService.currentCallState.next('in-progress');
+        this.showOverlay = false;
+        // The actual call acceptance is handled by the Twilio service
+    }
+    rejectCall() {
+        const call = this.twilioService.currentCall.value;
+        if (call) {
+            call.reject();
+            this.twilioService.currentCall.next(null);
+            this.twilioService.currentCallState.next('none');
+        }
+        this.showOverlay = false;
+    }
+    ngOnDestroy() {
+        this.callSubscription?.unsubscribe();
+        this.callStateSubscription?.unsubscribe();
+    }
+}
+IncomingCallOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallOverlayComponent, deps: [{ token: i1.TwilioService }], target: i0.ɵɵFactoryTarget.Component });
+IncomingCallOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IncomingCallOverlayComponent, selector: "lib-incoming-call-overlay", ngImport: i0, template: "<div *ngIf=\"showOverlay\" class=\"incoming-call-overlay\">\n  <div class=\"incoming-call-container\">\n    <div class=\"caller-info\">\n      <img [src]=\"callData.img\" alt=\"Caller\" class=\"caller-avatar\">\n      <h3>{{ callData.name }}</h3>\n      <p>{{ callData.phone }}</p>\n      <p class=\"call-status\">Incoming Call</p>\n    </div>\n    <div class=\"call-actions\">\n      <button class=\"btn-reject\" (click)=\"rejectCall()\">\n        <i class=\"fas fa-phone-slash\"></i>\n      </button>\n      <button class=\"btn-accept\" (click)=\"acceptCall()\">\n        <i class=\"fas fa-phone\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".incoming-call-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.incoming-call-container{background:white;border-radius:12px;padding:30px;text-align:center;width:300px;box-shadow:0 4px 20px #0003}.caller-avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 20px;object-fit:cover;border:4px solid #4CAF50}.caller-info h3{margin:10px 0 5px;color:#333;font-size:1.5em}.caller-info p{color:#666;margin:5px 0}.call-status{font-weight:700;color:#4caf50!important;margin-top:15px!important}.call-actions{display:flex;justify-content:center;gap:30px;margin-top:25px}.btn-accept,.btn-reject{width:60px;height:60px;border-radius:50%;border:none;color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-accept{background-color:#4caf50}.btn-reject{background-color:#f44336}.btn-accept:hover{background-color:#45a049;transform:scale(1.1)}.btn-reject:hover{background-color:#d32f2f;transform:scale(1.1)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IncomingCallOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-incoming-call-overlay', template: "<div *ngIf=\"showOverlay\" class=\"incoming-call-overlay\">\n  <div class=\"incoming-call-container\">\n    <div class=\"caller-info\">\n      <img [src]=\"callData.img\" alt=\"Caller\" class=\"caller-avatar\">\n      <h3>{{ callData.name }}</h3>\n      <p>{{ callData.phone }}</p>\n      <p class=\"call-status\">Incoming Call</p>\n    </div>\n    <div class=\"call-actions\">\n      <button class=\"btn-reject\" (click)=\"rejectCall()\">\n        <i class=\"fas fa-phone-slash\"></i>\n      </button>\n      <button class=\"btn-accept\" (click)=\"acceptCall()\">\n        <i class=\"fas fa-phone\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".incoming-call-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.incoming-call-container{background:white;border-radius:12px;padding:30px;text-align:center;width:300px;box-shadow:0 4px 20px #0003}.caller-avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 20px;object-fit:cover;border:4px solid #4CAF50}.caller-info h3{margin:10px 0 5px;color:#333;font-size:1.5em}.caller-info p{color:#666;margin:5px 0}.call-status{font-weight:700;color:#4caf50!important;margin-top:15px!important}.call-actions{display:flex;justify-content:center;gap:30px;margin-top:25px}.btn-accept,.btn-reject{width:60px;height:60px;border-radius:50%;border:none;color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.btn-accept{background-color:#4caf50}.btn-reject{background-color:#f44336}.btn-accept:hover{background-color:#45a049;transform:scale(1.1)}.btn-reject:hover{background-color:#d32f2f;transform:scale(1.1)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.TwilioService }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5jb21pbmctY2FsbC1vdmVybGF5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2RpYWxib3gvc3JjL2xpYi9jb21wb25lbnRzL2luY29taW5nLWNhbGwtb3ZlcmxheS9pbmNvbWluZy1jYWxsLW92ZXJsYXkuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvZGlhbGJveC9zcmMvbGliL2NvbXBvbmVudHMvaW5jb21pbmctY2FsbC1vdmVybGF5L2luY29taW5nLWNhbGwtb3ZlcmxheS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFxQixNQUFNLGVBQWUsQ0FBQzs7OztBQVU3RCxNQUFNLE9BQU8sNEJBQTRCO0lBV3ZDLFlBQW9CLGFBQTRCO1FBQTVCLGtCQUFhLEdBQWIsYUFBYSxDQUFlO1FBVmhELGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLGFBQVEsR0FBUTtZQUNkLEtBQUssRUFBRSxFQUFFO1lBQ1QsSUFBSSxFQUFFLFNBQVM7WUFDZixHQUFHLEVBQUUsd0JBQXdCO1lBQzdCLGNBQWMsRUFBRSxLQUFLO1NBQ3RCLENBQUM7SUFJaUQsQ0FBQztJQUVwRCxRQUFRO1FBQ04sa0NBQWtDO1FBQ2xDLElBQUksQ0FBQyxxQkFBcUIsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLGdCQUFnQixDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsRUFBRTtZQUNqRixJQUFJLEtBQUssS0FBSyxVQUFVLEVBQUU7Z0JBQ3hCLElBQUksQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO2FBQ3pCO2lCQUFNLElBQUksS0FBSyxLQUFLLE1BQU0sRUFBRTtnQkFDM0IsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7YUFDMUI7UUFDSCxDQUFDLENBQUMsQ0FBQztRQUVILG1DQUFtQztRQUNuQyxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUMsU0FBUyxDQUFDLENBQUMsSUFBaUIsRUFBRSxFQUFFO1lBQ3JGLElBQUksSUFBSSxFQUFFO2dCQUNSLElBQUksQ0FBQyxRQUFRLEdBQUc7b0JBQ2QsS0FBSyxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxDQUFDO29CQUM5QixJQUFJLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixFQUFFLEdBQUcsQ0FBQyxNQUFNLENBQUMsSUFBSSxTQUFTO29CQUNyRCxHQUFHLEVBQUUsSUFBSSxDQUFDLGdCQUFnQixFQUFFLEdBQUcsQ0FBQyxPQUFPLENBQUMsSUFBSSx3QkFBd0I7b0JBQ3BFLGNBQWMsRUFBRSxJQUFJO29CQUNwQixJQUFJLEVBQUUsSUFBSTtpQkFDWCxDQUFDO2FBQ0g7UUFDSCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxVQUFVO1FBQ1IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLGFBQWEsQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDeEQsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDekIsOERBQThEO0lBQ2hFLENBQUM7SUFFRCxVQUFVO1FBQ1IsTUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDO1FBQ2xELElBQUksSUFBSSxFQUFFO1lBQ1IsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDO1lBQ2QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQzFDLElBQUksQ0FBQyxhQUFhLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1NBQ2xEO1FBQ0QsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7SUFDM0IsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsV0FBVyxFQUFFLENBQUM7UUFDckMsSUFBSSxDQUFDLHFCQUFxQixFQUFFLFdBQVcsRUFBRSxDQUFDO0lBQzVDLENBQUM7OzBIQXpEVSw0QkFBNEI7OEdBQTVCLDRCQUE0QixpRUNWekMsK29CQWtCQTs0RkRSYSw0QkFBNEI7a0JBTHhDLFNBQVM7K0JBQ0UsMkJBQTJCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVHdpbGlvU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2UvdHdpbGlvLnNlcnZpY2UnO1xuaW1wb3J0IHsgQ2FsbCB9IGZyb20gJ0B0d2lsaW8vdm9pY2Utc2RrJztcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItaW5jb21pbmctY2FsbC1vdmVybGF5JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2luY29taW5nLWNhbGwtb3ZlcmxheS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2luY29taW5nLWNhbGwtb3ZlcmxheS5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgSW5jb21pbmdDYWxsT3ZlcmxheUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25EZXN0cm95IHtcbiAgc2hvd092ZXJsYXkgPSBmYWxzZTtcbiAgY2FsbERhdGE6IGFueSA9IHtcbiAgICBwaG9uZTogJycsXG4gICAgbmFtZTogJ1Vua25vd24nLFxuICAgIGltZzogJ2Fzc2V0cy9pbWFnZXMvdXNlci5qcGcnLFxuICAgIGlzSW5jb21pbmdDYWxsOiBmYWxzZVxuICB9O1xuICBwcml2YXRlIGNhbGxTdWJzY3JpcHRpb24/OiBTdWJzY3JpcHRpb247XG4gIHByaXZhdGUgY2FsbFN0YXRlU3Vic2NyaXB0aW9uPzogU3Vic2NyaXB0aW9uO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgdHdpbGlvU2VydmljZTogVHdpbGlvU2VydmljZSkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICAvLyBTdWJzY3JpYmUgdG8gY2FsbCBzdGF0ZSBjaGFuZ2VzXG4gICAgdGhpcy5jYWxsU3RhdGVTdWJzY3JpcHRpb24gPSB0aGlzLnR3aWxpb1NlcnZpY2UuY3VycmVudENhbGxTdGF0ZS5zdWJzY3JpYmUoc3RhdGUgPT4ge1xuICAgICAgaWYgKHN0YXRlID09PSAnaW5jb21pbmcnKSB7XG4gICAgICAgIHRoaXMuc2hvd092ZXJsYXkgPSB0cnVlO1xuICAgICAgfSBlbHNlIGlmIChzdGF0ZSA9PT0gJ25vbmUnKSB7XG4gICAgICAgIHRoaXMuc2hvd092ZXJsYXkgPSBmYWxzZTtcbiAgICAgIH1cbiAgICB9KTtcblxuICAgIC8vIFN1YnNjcmliZSB0byBjYWxsIG9iamVjdCBjaGFuZ2VzXG4gICAgdGhpcy5jYWxsU3Vic2NyaXB0aW9uID0gdGhpcy50d2lsaW9TZXJ2aWNlLmN1cnJlbnRDYWxsLnN1YnNjcmliZSgoY2FsbDogQ2FsbCB8IG51bGwpID0+IHtcbiAgICAgIGlmIChjYWxsKSB7XG4gICAgICAgIHRoaXMuY2FsbERhdGEgPSB7XG4gICAgICAgICAgcGhvbmU6IGNhbGwucGFyYW1ldGVyc1snRnJvbSddLFxuICAgICAgICAgIG5hbWU6IGNhbGwuY3VzdG9tUGFyYW1ldGVycz8uZ2V0KCduYW1lJykgfHwgJ1Vua25vd24nLFxuICAgICAgICAgIGltZzogY2FsbC5jdXN0b21QYXJhbWV0ZXJzPy5nZXQoJ2ltYWdlJykgfHwgJ2Fzc2V0cy9pbWFnZXMvdXNlci5qcGcnLFxuICAgICAgICAgIGlzSW5jb21pbmdDYWxsOiB0cnVlLFxuICAgICAgICAgIGNhbGw6IGNhbGxcbiAgICAgICAgfTtcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuXG4gIGFjY2VwdENhbGwoKSB7XG4gICAgdGhpcy50d2lsaW9TZXJ2aWNlLmlzSW5jb21pbmdDYWxsUGlja2VkLm5leHQodHJ1ZSk7XG4gICAgdGhpcy50d2lsaW9TZXJ2aWNlLmN1cnJlbnRDYWxsU3RhdGUubmV4dCgnaW4tcHJvZ3Jlc3MnKTtcbiAgICB0aGlzLnNob3dPdmVybGF5ID0gZmFsc2U7XG4gICAgLy8gVGhlIGFjdHVhbCBjYWxsIGFjY2VwdGFuY2UgaXMgaGFuZGxlZCBieSB0aGUgVHdpbGlvIHNlcnZpY2VcbiAgfVxuXG4gIHJlamVjdENhbGwoKSB7XG4gICAgY29uc3QgY2FsbCA9IHRoaXMudHdpbGlvU2VydmljZS5jdXJyZW50Q2FsbC52YWx1ZTtcbiAgICBpZiAoY2FsbCkge1xuICAgICAgY2FsbC5yZWplY3QoKTtcbiAgICAgIHRoaXMudHdpbGlvU2VydmljZS5jdXJyZW50Q2FsbC5uZXh0KG51bGwpO1xuICAgICAgdGhpcy50d2lsaW9TZXJ2aWNlLmN1cnJlbnRDYWxsU3RhdGUubmV4dCgnbm9uZScpO1xuICAgIH1cbiAgICB0aGlzLnNob3dPdmVybGF5ID0gZmFsc2U7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLmNhbGxTdWJzY3JpcHRpb24/LnVuc3Vic2NyaWJlKCk7XG4gICAgdGhpcy5jYWxsU3RhdGVTdWJzY3JpcHRpb24/LnVuc3Vic2NyaWJlKCk7XG4gIH1cbn1cbiIsIjxkaXYgKm5nSWY9XCJzaG93T3ZlcmxheVwiIGNsYXNzPVwiaW5jb21pbmctY2FsbC1vdmVybGF5XCI+XG4gIDxkaXYgY2xhc3M9XCJpbmNvbWluZy1jYWxsLWNvbnRhaW5lclwiPlxuICAgIDxkaXYgY2xhc3M9XCJjYWxsZXItaW5mb1wiPlxuICAgICAgPGltZyBbc3JjXT1cImNhbGxEYXRhLmltZ1wiIGFsdD1cIkNhbGxlclwiIGNsYXNzPVwiY2FsbGVyLWF2YXRhclwiPlxuICAgICAgPGgzPnt7IGNhbGxEYXRhLm5hbWUgfX08L2gzPlxuICAgICAgPHA+e3sgY2FsbERhdGEucGhvbmUgfX08L3A+XG4gICAgICA8cCBjbGFzcz1cImNhbGwtc3RhdHVzXCI+SW5jb21pbmcgQ2FsbDwvcD5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiY2FsbC1hY3Rpb25zXCI+XG4gICAgICA8YnV0dG9uIGNsYXNzPVwiYnRuLXJlamVjdFwiIChjbGljayk9XCJyZWplY3RDYWxsKClcIj5cbiAgICAgICAgPGkgY2xhc3M9XCJmYXMgZmEtcGhvbmUtc2xhc2hcIj48L2k+XG4gICAgICA8L2J1dHRvbj5cbiAgICAgIDxidXR0b24gY2xhc3M9XCJidG4tYWNjZXB0XCIgKGNsaWNrKT1cImFjY2VwdENhbGwoKVwiPlxuICAgICAgICA8aSBjbGFzcz1cImZhcyBmYS1waG9uZVwiPjwvaT5cbiAgICAgIDwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19