tas-uell-sdk 0.0.1 → 0.0.2

package/fesm2020/tas-uell-sdk.mjs

@@ -1,27 +1,40 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject, Component, Input, ViewChild, NgModule } from '@angular/core';
-import * as i3 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1 from '@ng-bootstrap/ng-bootstrap';
-import { NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
+import { InjectionToken, Injectable, Inject, Component, Input, ViewChild, NgModule } from '@angular/core';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { map, catchError, switchMap } from 'rxjs/operators';
 import * as OT from '@opentok/client';
 import interact from 'interactjs';
+import * as i1 from '@ng-bootstrap/ng-bootstrap';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
 
 /**
  * Injection token for TAS configuration
  */
-const TAS_CONFIG = new InjectionToken("TAS_CONFIG");
-/**
- * Injection token for HTTP client
- */
-const TAS_HTTP_CLIENT = new InjectionToken("TAS_HTTP_CLIENT");
+const TAS_CONFIG = new InjectionToken('TAS_CONFIG');
 /**
- * Injection token for user data provider
+ * Injection token for HTTP client adapter
  */
-const TAS_USER_DATA_PROVIDER = new InjectionToken("TAS_USER_DATA_PROVIDER");
+const TAS_HTTP_CLIENT = new InjectionToken('TAS_HTTP_CLIENT');
 
+var TasRoomType;
+(function (TasRoomType) {
+    TasRoomType["TAS"] = "TAS";
+    TasRoomType["JM"] = "JM";
+    TasRoomType["WEBINAR"] = "WEBINAR";
+})(TasRoomType || (TasRoomType = {}));
+var TasSessionType;
+(function (TasSessionType) {
+    TasSessionType["SPONTANEOUS"] = "SPONTANEOUS";
+    TasSessionType["SCHEDULED"] = "SCHEDULED";
+})(TasSessionType || (TasSessionType = {}));
+var TasUserRole;
+(function (TasUserRole) {
+    TasUserRole["OWNER"] = "OWNER";
+    TasUserRole["USER"] = "USER";
+    TasUserRole["MODERATOR"] = "MODERATOR";
+})(TasUserRole || (TasUserRole = {}));
+// Enums for TAS Service state management
 var CallState;
 (function (CallState) {
     CallState["IDLE"] = "IDLE";
@@ -35,10 +48,11 @@ var ViewMode;
     ViewMode["FULLSCREEN"] = "FULLSCREEN";
     ViewMode["PIP"] = "PIP";
 })(ViewMode || (ViewMode = {}));
+
 class TasService {
-    constructor(config, httpClient) {
-        this.config = config;
+    constructor(httpClient, config) {
         this.httpClient = httpClient;
+        this.config = config;
         this.session = null;
         this.publisher = null;
         this.subscribers = [];
@@ -51,9 +65,6 @@ class TasService {
         // Session info for PiP mode restoration
         this.currentSessionId = null;
         this.currentToken = null;
-        if (!this.config || !this.httpClient) {
-            console.warn("TasService: Configuration not provided. Make sure to use TasModule.forRoot()");
-        }
     }
     // Getters
     get currentSession() {
@@ -91,7 +102,14 @@ class TasService {
     toggleMute() {
         if (this.publisher) {
             const newMuteState = !this.isMutedSubject.getValue();
-            this.publisher.publishAudio(!newMuteState);
+            const shouldEnableAudio = !newMuteState;
+            // Use OpenTok's publishAudio
+            this.publisher.publishAudio(shouldEnableAudio);
+            // Also directly control the MediaStreamTrack as backup
+            const audioTrack = this.publisher.getAudioSource?.();
+            if (audioTrack) {
+                audioTrack.enabled = shouldEnableAudio;
+            }
             this.isMutedSubject.next(newMuteState);
         }
     }
@@ -111,7 +129,7 @@ class TasService {
         this.subscribers = [];
         this.currentSessionId = null;
         this.currentToken = null;
-        this.isMutedSubject.next(false);
+        this.isMutedSubject.next(false); // Reset mute state
         this.viewModeSubject.next(ViewMode.FULLSCREEN);
         this.callStateSubject.next(CallState.DISCONNECTED);
     }
@@ -120,21 +138,13 @@ class TasService {
     }
     // API Methods
     createRoom(payload) {
-        if (!this.config || !this.httpClient) {
-            throw new Error("TasService not configured. Use TasModule.forRoot()");
-        }
-        const url = `${this.config.apiBaseUrl}/v2/room`;
-        return this.httpClient.post(url, payload).pipe(map((response) => response), catchError((error) => {
+        return this.httpClient.post("v2/room", { body: payload, headers: {} }).pipe(map((response) => response), catchError((error) => {
             console.error("TAS Service: createRoom failed", error);
             throw error;
         }));
     }
     generateToken(payload) {
-        if (!this.config || !this.httpClient) {
-            throw new Error("TasService not configured. Use TasModule.forRoot()");
-        }
-        const url = `${this.config.apiBaseUrl}/v2/room/token`;
-        return this.httpClient.post(url, payload).pipe(map((response) => response), catchError((error) => {
+        return this.httpClient.post("v2/room/token", { body: payload, headers: {} }).pipe(map((response) => response), catchError((error) => {
             console.error("TAS Service: generateToken failed", error);
             throw error;
         }));
@@ -147,11 +157,6 @@ class TasService {
         this.currentSessionId = sessionId;
         this.currentToken = token;
         return new Promise((resolve, reject) => {
-            if (!this.config) {
-                this.callStateSubject.next(CallState.ERROR);
-                reject(new Error("TasService not configured. Use TasModule.forRoot()"));
-                return;
-            }
             if (!OT.checkSystemRequirements()) {
                 this.callStateSubject.next(CallState.ERROR);
                 reject(new Error("Browser not compatible with TokBox"));
@@ -260,25 +265,23 @@ class TasService {
      * Moves videos back to fullscreen containers
      */
     moveVideosToFullscreen() {
-        this.moveSubscribersTo("subscriber-container");
-        this.movePublisherTo("publisher-container");
+        this.moveSubscribersTo('subscriber-container');
+        this.movePublisherTo('publisher-container');
     }
 }
-TasService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasService, deps: [{ token: TAS_CONFIG, optional: true }, { token: TAS_HTTP_CLIENT, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+TasService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasService, deps: [{ token: TAS_HTTP_CLIENT }, { token: TAS_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
 TasService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasService, providedIn: "root" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: "root" }]
+            args: [{
+                    providedIn: "root",
+                }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
                     type: Inject,
-                    args: [TAS_CONFIG]
+                    args: [TAS_HTTP_CLIENT]
                 }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
                     type: Inject,
-                    args: [TAS_HTTP_CLIENT]
+                    args: [TAS_CONFIG]
                 }] }]; } });
 
 class TasVideocallComponent {
@@ -300,10 +303,11 @@ class TasVideocallComponent {
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
+        // Only disconnect if not in PiP mode (keep session alive for floating window)
         if (!this.tasService.isPipMode()) {
             this.tasService.disconnectSession();
         }
-        interact(".publisher-view").unset();
+        interact('.publisher-view').unset();
     }
     // Public Methods
     hangUp() {
@@ -313,7 +317,8 @@ class TasVideocallComponent {
         this.tasService.toggleMute();
     }
     minimize() {
-        this.tasService.moveMainVideoTo("pip-main-video");
+        this.tasService.moveMainVideoTo('pip-main-video');
+        // Small delay to ensure video is moved before closing modal
         setTimeout(() => this.tasService.enterPipMode(), 50);
     }
     toggleSwap() {
@@ -326,30 +331,33 @@ class TasVideocallComponent {
     }
     // Private Methods
     setupSubscriptions() {
-        this.subscriptions.add(this.tasService.callState$.subscribe((state) => {
+        // Call state subscription
+        this.subscriptions.add(this.tasService.callState$.subscribe(state => {
             this.callState = state;
             if (state === CallState.DISCONNECTED) {
-                this.activeModal.close("hangup");
+                this.activeModal.close('hangup');
             }
         }));
-        this.subscriptions.add(this.tasService.viewMode$.subscribe((mode) => {
+        // View mode subscription
+        this.subscriptions.add(this.tasService.viewMode$.subscribe(mode => {
             if (mode === ViewMode.PIP) {
-                this.activeModal.close("pip");
+                this.activeModal.close('pip');
             }
         }));
-        this.subscriptions.add(this.tasService.isMuted$.subscribe((muted) => {
+        // Mute state subscription
+        this.subscriptions.add(this.tasService.isMuted$.subscribe(muted => {
             this.isMuted = muted;
         }));
     }
     initializeCall() {
         if (this.isReturningFromPip) {
+            // Returning from PiP - just move videos back
             setTimeout(() => this.tasService.moveVideosToFullscreen(), 100);
         }
         else if (this.sessionId && this.token) {
-            this.tasService
-                .connectSession(this.sessionId, this.token, "publisher-container", "subscriber-container")
-                .catch((err) => {
-                console.error("Error connecting to video call:", err);
+            // New call - connect to session
+            this.tasService.connectSession(this.sessionId, this.token, 'publisher-container', 'subscriber-container').catch(err => {
+                console.error('Error connecting to video call:', err);
             });
         }
     }
@@ -357,69 +365,69 @@ class TasVideocallComponent {
         const publisherEl = this.publisherContainer?.nativeElement;
         const subscriberEl = this.subscriberContainer?.nativeElement;
         if (publisherEl) {
-            publisherEl.removeAttribute("style");
-            publisherEl.removeAttribute("data-x");
-            publisherEl.removeAttribute("data-y");
+            publisherEl.removeAttribute('style');
+            publisherEl.removeAttribute('data-x');
+            publisherEl.removeAttribute('data-y');
         }
         if (subscriberEl) {
-            subscriberEl.removeAttribute("style");
-            subscriberEl.removeAttribute("data-x");
-            subscriberEl.removeAttribute("data-y");
+            subscriberEl.removeAttribute('style');
+            subscriberEl.removeAttribute('data-x');
+            subscriberEl.removeAttribute('data-y');
         }
     }
     initInteract() {
-        interact(".publisher-view").unset();
-        interact(".publisher-view")
+        interact('.publisher-view').unset();
+        interact('.publisher-view')
             .draggable({
             inertia: true,
             modifiers: [
                 interact.modifiers.restrictRect({
-                    restriction: "parent",
-                    endOnly: true,
-                }),
+                    restriction: 'parent',
+                    endOnly: true
+                })
             ],
             autoScroll: true,
             listeners: {
                 move: (event) => {
                     const target = event.target;
-                    const x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
-                    const y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
+                    const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+                    const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
                     target.style.transform = `translate(${x}px, ${y}px)`;
-                    target.setAttribute("data-x", String(x));
-                    target.setAttribute("data-y", String(y));
-                },
-            },
+                    target.setAttribute('data-x', String(x));
+                    target.setAttribute('data-y', String(y));
+                }
+            }
         })
             .resizable({
             edges: { left: false, right: true, bottom: true, top: false },
             listeners: {
                 move: (event) => {
                     const target = event.target;
-                    let x = parseFloat(target.getAttribute("data-x")) || 0;
-                    let y = parseFloat(target.getAttribute("data-y")) || 0;
+                    let x = parseFloat(target.getAttribute('data-x')) || 0;
+                    let y = parseFloat(target.getAttribute('data-y')) || 0;
                     target.style.width = `${event.rect.width}px`;
                     target.style.height = `${event.rect.height}px`;
                     x += event.deltaRect.left;
                     y += event.deltaRect.top;
                     target.style.transform = `translate(${x}px, ${y}px)`;
-                    target.setAttribute("data-x", String(x));
-                    target.setAttribute("data-y", String(y));
-                },
+                    target.setAttribute('data-x', String(x));
+                    target.setAttribute('data-y', String(y));
+                }
             },
             modifiers: [
-                interact.modifiers.restrictEdges({ outer: "parent" }),
+                interact.modifiers.restrictEdges({ outer: 'parent' }),
                 interact.modifiers.restrictSize({ min: { width: 150, height: 100 } }),
-                interact.modifiers.aspectRatio({ ratio: "preserve" }),
+                interact.modifiers.aspectRatio({ ratio: 'preserve' })
             ],
-            inertia: true,
+            inertia: true
         });
     }
 }
 TasVideocallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasVideocallComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }], target: i0.ɵɵFactoryTarget.Component });
-TasVideocallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TasVideocallComponent, selector: "tas-videocall", inputs: { sessionId: "sessionId", token: "token", isReturningFromPip: "isReturningFromPip" }, viewQueries: [{ propertyName: "publisherContainer", first: true, predicate: ["publisherContainer"], descendants: true }, { propertyName: "subscriberContainer", first: true, predicate: ["subscriberContainer"], descendants: true }], ngImport: i0, template: "<div class=\"tas-videocall-container\">\n  <div\n    id=\"subscriber-container\"\n    [class.subscriber-view]=\"isPublisherSmall\"\n    [class.publisher-view]=\"!isPublisherSmall\"\n    #subscriberContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <div\n    id=\"publisher-container\"\n    [class.publisher-view]=\"isPublisherSmall\"\n    [class.subscriber-view]=\"!isPublisherSmall\"\n    #publisherContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <div class=\"controls-container\">\n    <button class=\"btn swap-btn\" (click)=\"toggleSwap()\" title=\"Cambiar vista\">\n      <i class=\"fa fa-refresh\"></i>\n    </button>\n    <button\n      class=\"btn pip-btn\"\n      (click)=\"minimize()\"\n      title=\"Minimizar (Picture in Picture)\"\n    >\n      <i class=\"fa fa-compress\"></i>\n    </button>\n    <button\n      class=\"btn mute-btn\"\n      [class.muted]=\"isMuted\"\n      (click)=\"toggleMute()\"\n      [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n    >\n      <i\n        class=\"fa\"\n        [class.fa-microphone]=\"!isMuted\"\n        [class.fa-microphone-slash]=\"isMuted\"\n      ></i>\n    </button>\n    <button class=\"btn hangup-btn\" (click)=\"hangUp()\" title=\"Colgar\">\n      <i class=\"fa fa-phone\" style=\"transform: rotate(135deg)\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".tas-videocall-container{position:relative;width:100vw;height:100vh;background-color:#000;overflow:hidden}.tas-videocall-container ::ng-deep .OT_edge-bar-item,.tas-videocall-container ::ng-deep .OT_mute,.tas-videocall-container ::ng-deep .OT_audio-level-meter,.tas-videocall-container ::ng-deep .OT_bar,.tas-videocall-container ::ng-deep .OT_name{display:none!important}.tas-videocall-container .subscriber-view{width:100%;height:100%;z-index:1}.tas-videocall-container .publisher-view{position:absolute;top:20px;right:20px;width:200px;height:150px;z-index:2;border:2px solid #fff;border-radius:8px;background-color:#333}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:20px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#00000080;padding:15px 25px;border-radius:50px;backdrop-filter:blur(5px)}.tas-videocall-container .controls-container .hangup-btn,.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn,.tas-videocall-container .controls-container .mute-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:none;box-shadow:0 4px 6px #0000004d;transition:all .2s ease}.tas-videocall-container .controls-container .hangup-btn i,.tas-videocall-container .controls-container .swap-btn i,.tas-videocall-container .controls-container .pip-btn i,.tas-videocall-container .controls-container .mute-btn i{color:#fff}.tas-videocall-container .controls-container .hangup-btn{background:#dc3545}.tas-videocall-container .controls-container .hangup-btn:hover{background:#c82333;transform:scale(1.05)}.tas-videocall-container .controls-container .swap-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .swap-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .pip-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .pip-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .mute-btn.muted:hover{background:#e67e22}\n"] });
+TasVideocallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TasVideocallComponent, selector: "tas-videocall", inputs: { sessionId: "sessionId", token: "token", isReturningFromPip: "isReturningFromPip" }, viewQueries: [{ propertyName: "publisherContainer", first: true, predicate: ["publisherContainer"], descendants: true }, { propertyName: "subscriberContainer", first: true, predicate: ["subscriberContainer"], descendants: true }], ngImport: i0, template: "<div class=\"tas-videocall-container\">\n\t<div id=\"subscriber-container\" \n\t\t[class.subscriber-view]=\"isPublisherSmall\" \n\t\t[class.publisher-view]=\"!isPublisherSmall\"\n\t\t#subscriberContainer\n\t\t(dblclick)=\"onDoubleClick()\">\n\t</div>\n\n\t<div id=\"publisher-container\" \n\t\t[class.publisher-view]=\"isPublisherSmall\" \n\t\t[class.subscriber-view]=\"!isPublisherSmall\"\n\t\t#publisherContainer \n\t\t(dblclick)=\"onDoubleClick()\">\n\t</div>\n\t\n\t<div class=\"controls-container\">\n\t\t<button class=\"btn swap-btn\" (click)=\"toggleSwap()\" title=\"Swap view\">\n\t\t\t<i class=\"fa fa-refresh\"></i>\n\t\t</button>\n\t\t<button class=\"btn pip-btn\" (click)=\"minimize()\" title=\"Minimize (Picture in Picture)\">\n\t\t\t<i class=\"fa fa-compress\"></i>\n\t\t</button>\n\t\t<button class=\"btn mute-btn\" [class.muted]=\"isMuted\" (click)=\"toggleMute()\" [title]=\"isMuted ? 'Unmute microphone' : 'Mute microphone'\">\n\t\t\t<i class=\"fa\" [class.fa-microphone]=\"!isMuted\" [class.fa-microphone-slash]=\"isMuted\"></i>\n\t\t</button>\n\t\t<button class=\"btn hangup-btn\" (click)=\"hangUp()\" title=\"Hang up\">\n\t\t\t<i class=\"fa fa-phone\" style=\"transform: rotate(135deg);\"></i>\n\t\t</button>\n\t</div>\n</div>\n\n", styles: [".tas-videocall-container{position:relative;width:100vw;height:100vh;background-color:#000;overflow:hidden}.tas-videocall-container ::ng-deep .OT_edge-bar-item,.tas-videocall-container ::ng-deep .OT_mute,.tas-videocall-container ::ng-deep .OT_audio-level-meter,.tas-videocall-container ::ng-deep .OT_bar,.tas-videocall-container ::ng-deep .OT_name{display:none!important}.tas-videocall-container .subscriber-view{width:100%;height:100%;z-index:1}.tas-videocall-container .publisher-view{position:absolute;top:20px;right:20px;width:200px;height:150px;z-index:2;border:2px solid #fff;border-radius:8px;background-color:#333}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:20px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#00000080;padding:15px 25px;border-radius:50px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.tas-videocall-container .controls-container .hangup-btn,.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn,.tas-videocall-container .controls-container .mute-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:none;box-shadow:0 4px 6px #0000004d;transition:all .2s ease}.tas-videocall-container .controls-container .hangup-btn i,.tas-videocall-container .controls-container .swap-btn i,.tas-videocall-container .controls-container .pip-btn i,.tas-videocall-container .controls-container .mute-btn i{color:#fff}.tas-videocall-container .controls-container .hangup-btn{background:#dc3545}.tas-videocall-container .controls-container .hangup-btn:hover{background:#c82333;transform:scale(1.05)}.tas-videocall-container .controls-container .swap-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .swap-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .pip-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .pip-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .mute-btn.muted:hover{background:#e67e22}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasVideocallComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tas-videocall", template: "<div class=\"tas-videocall-container\">\n  <div\n    id=\"subscriber-container\"\n    [class.subscriber-view]=\"isPublisherSmall\"\n    [class.publisher-view]=\"!isPublisherSmall\"\n    #subscriberContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <div\n    id=\"publisher-container\"\n    [class.publisher-view]=\"isPublisherSmall\"\n    [class.subscriber-view]=\"!isPublisherSmall\"\n    #publisherContainer\n    (dblclick)=\"onDoubleClick()\"\n  ></div>\n\n  <div class=\"controls-container\">\n    <button class=\"btn swap-btn\" (click)=\"toggleSwap()\" title=\"Cambiar vista\">\n      <i class=\"fa fa-refresh\"></i>\n    </button>\n    <button\n      class=\"btn pip-btn\"\n      (click)=\"minimize()\"\n      title=\"Minimizar (Picture in Picture)\"\n    >\n      <i class=\"fa fa-compress\"></i>\n    </button>\n    <button\n      class=\"btn mute-btn\"\n      [class.muted]=\"isMuted\"\n      (click)=\"toggleMute()\"\n      [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n    >\n      <i\n        class=\"fa\"\n        [class.fa-microphone]=\"!isMuted\"\n        [class.fa-microphone-slash]=\"isMuted\"\n      ></i>\n    </button>\n    <button class=\"btn hangup-btn\" (click)=\"hangUp()\" title=\"Colgar\">\n      <i class=\"fa fa-phone\" style=\"transform: rotate(135deg)\"></i>\n    </button>\n  </div>\n</div>\n", styles: [".tas-videocall-container{position:relative;width:100vw;height:100vh;background-color:#000;overflow:hidden}.tas-videocall-container ::ng-deep .OT_edge-bar-item,.tas-videocall-container ::ng-deep .OT_mute,.tas-videocall-container ::ng-deep .OT_audio-level-meter,.tas-videocall-container ::ng-deep .OT_bar,.tas-videocall-container ::ng-deep .OT_name{display:none!important}.tas-videocall-container .subscriber-view{width:100%;height:100%;z-index:1}.tas-videocall-container .publisher-view{position:absolute;top:20px;right:20px;width:200px;height:150px;z-index:2;border:2px solid #fff;border-radius:8px;background-color:#333}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:20px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#00000080;padding:15px 25px;border-radius:50px;backdrop-filter:blur(5px)}.tas-videocall-container .controls-container .hangup-btn,.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn,.tas-videocall-container .controls-container .mute-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:none;box-shadow:0 4px 6px #0000004d;transition:all .2s ease}.tas-videocall-container .controls-container .hangup-btn i,.tas-videocall-container .controls-container .swap-btn i,.tas-videocall-container .controls-container .pip-btn i,.tas-videocall-container .controls-container .mute-btn i{color:#fff}.tas-videocall-container .controls-container .hangup-btn{background:#dc3545}.tas-videocall-container .controls-container .hangup-btn:hover{background:#c82333;transform:scale(1.05)}.tas-videocall-container .controls-container .swap-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .swap-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .pip-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .pip-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .mute-btn.muted:hover{background:#e67e22}\n"] }]
+            args: [{ selector: 'tas-videocall', template: "<div class=\"tas-videocall-container\">\n\t<div id=\"subscriber-container\" \n\t\t[class.subscriber-view]=\"isPublisherSmall\" \n\t\t[class.publisher-view]=\"!isPublisherSmall\"\n\t\t#subscriberContainer\n\t\t(dblclick)=\"onDoubleClick()\">\n\t</div>\n\n\t<div id=\"publisher-container\" \n\t\t[class.publisher-view]=\"isPublisherSmall\" \n\t\t[class.subscriber-view]=\"!isPublisherSmall\"\n\t\t#publisherContainer \n\t\t(dblclick)=\"onDoubleClick()\">\n\t</div>\n\t\n\t<div class=\"controls-container\">\n\t\t<button class=\"btn swap-btn\" (click)=\"toggleSwap()\" title=\"Swap view\">\n\t\t\t<i class=\"fa fa-refresh\"></i>\n\t\t</button>\n\t\t<button class=\"btn pip-btn\" (click)=\"minimize()\" title=\"Minimize (Picture in Picture)\">\n\t\t\t<i class=\"fa fa-compress\"></i>\n\t\t</button>\n\t\t<button class=\"btn mute-btn\" [class.muted]=\"isMuted\" (click)=\"toggleMute()\" [title]=\"isMuted ? 'Unmute microphone' : 'Mute microphone'\">\n\t\t\t<i class=\"fa\" [class.fa-microphone]=\"!isMuted\" [class.fa-microphone-slash]=\"isMuted\"></i>\n\t\t</button>\n\t\t<button class=\"btn hangup-btn\" (click)=\"hangUp()\" title=\"Hang up\">\n\t\t\t<i class=\"fa fa-phone\" style=\"transform: rotate(135deg);\"></i>\n\t\t</button>\n\t</div>\n</div>\n\n", styles: [".tas-videocall-container{position:relative;width:100vw;height:100vh;background-color:#000;overflow:hidden}.tas-videocall-container ::ng-deep .OT_edge-bar-item,.tas-videocall-container ::ng-deep .OT_mute,.tas-videocall-container ::ng-deep .OT_audio-level-meter,.tas-videocall-container ::ng-deep .OT_bar,.tas-videocall-container ::ng-deep .OT_name{display:none!important}.tas-videocall-container .subscriber-view{width:100%;height:100%;z-index:1}.tas-videocall-container .publisher-view{position:absolute;top:20px;right:20px;width:200px;height:150px;z-index:2;border:2px solid #fff;border-radius:8px;background-color:#333}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:20px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#00000080;padding:15px 25px;border-radius:50px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.tas-videocall-container .controls-container .hangup-btn,.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn,.tas-videocall-container .controls-container .mute-btn{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;border:none;box-shadow:0 4px 6px #0000004d;transition:all .2s ease}.tas-videocall-container .controls-container .hangup-btn i,.tas-videocall-container .controls-container .swap-btn i,.tas-videocall-container .controls-container .pip-btn i,.tas-videocall-container .controls-container .mute-btn i{color:#fff}.tas-videocall-container .controls-container .hangup-btn{background:#dc3545}.tas-videocall-container .controls-container .hangup-btn:hover{background:#c82333;transform:scale(1.05)}.tas-videocall-container .controls-container .swap-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .swap-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .pip-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .pip-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.05)}.tas-videocall-container .controls-container .mute-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .mute-btn.muted:hover{background:#e67e22}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }]; }, propDecorators: { sessionId: [{
                 type: Input
             }], token: [{
@@ -428,124 +436,279 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], publisherContainer: [{
                 type: ViewChild,
-                args: ["publisherContainer"]
+                args: ['publisherContainer']
             }], subscriberContainer: [{
                 type: ViewChild,
-                args: ["subscriberContainer"]
+                args: ['subscriberContainer']
             }] } });
 
-class TasButtonComponent {
-    constructor(tasService, modalService, userDataProvider) {
+var WaitingRoomState;
+(function (WaitingRoomState) {
+    WaitingRoomState["IDLE"] = "IDLE";
+    WaitingRoomState["CREATING_ROOM"] = "CREATING_ROOM";
+    WaitingRoomState["GETTING_TOKEN"] = "GETTING_TOKEN";
+    WaitingRoomState["READY"] = "READY";
+    WaitingRoomState["ERROR"] = "ERROR";
+})(WaitingRoomState || (WaitingRoomState = {}));
+class TasWaitingRoomComponent {
+    constructor(activeModal, tasService, modalService) {
+        this.activeModal = activeModal;
         this.tasService = tasService;
         this.modalService = modalService;
-        this.userDataProvider = userDataProvider;
-        this.isLoading = false;
-        this.userData = null;
-        this.tenantId = null;
+        // Room configuration inputs
+        this.appointmentId = 1;
+        this.product = 'uell';
+        this.tenantId = '';
+        this.regularUserIds = [];
+        this.moderatorUserIds = [];
+        // Component state
+        this.state = WaitingRoomState.IDLE;
+        this.WaitingRoomState = WaitingRoomState; // Expose enum to template
+        this.errorMessage = '';
+        // Session data
+        this.sessionId = '';
+        this.token = '';
+        this.users = [];
         this.subscriptions = new Subscription();
-        this.currentModalRef = null;
+        this.videoCallModalRef = null;
     }
     ngOnInit() {
-        this.loadUserData();
+        this.buildUsersArray();
         this.setupViewModeSubscription();
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-    onClick() {
-        if (!this.userData || !this.tenantId) {
-            console.error("User data or tenant ID not available");
+    /**
+     * Creates the room and fetches the token
+     */
+    createRoom() {
+        if (!this.tenantId || !this.currentUser?.name) {
+            this.state = WaitingRoomState.ERROR;
+            this.errorMessage = 'Missing configuration data (tenant or user)';
             return;
         }
-        this.isLoading = true;
-        this.subscriptions.add(this.tasService
-            .createRoom({
+        this.state = WaitingRoomState.CREATING_ROOM;
+        this.errorMessage = '';
+        const body = {
+            roomType: TasRoomType.TAS,
+            type: TasSessionType.SPONTANEOUS,
             tenant: this.tenantId,
-            userId: this.userData.id.toString(),
-            product: "Uell",
-            record: true,
-            roomType: "TAS",
-            type: "SPONTANEOUS",
-        })
-            .pipe(switchMap((response) => {
-            const sessionId = response.content.sessionId;
-            return this.tasService
-                .generateToken({
-                sessionId: sessionId,
-                name: this.userData.name,
-                lastname: this.userData.surname,
-            })
-                .pipe(switchMap((tokenResponse) => {
-                return [
-                    {
-                        sessionId,
-                        token: tokenResponse.content.token,
-                    },
-                ];
-            }));
-        }))
-            .subscribe({
-            next: ({ sessionId, token }) => {
-                this.isLoading = false;
-                this.openVideoCallModal(sessionId, token);
+            appointmentId: this.appointmentId,
+            users: this.users,
+            product: this.product
+        };
+        this.subscriptions.add(this.tasService.createRoom(body).pipe(switchMap(response => {
+            this.sessionId = response.content.sessionId;
+            this.state = WaitingRoomState.GETTING_TOKEN;
+            return this.tasService.generateToken({
+                sessionId: this.sessionId,
+                name: this.currentUser.name,
+                lastname: this.currentUser.lastname,
+                roleVC: this.currentUser.role
+            });
+        })).subscribe({
+            next: (tokenResponse) => {
+                this.token = tokenResponse.content.token;
+                this.state = WaitingRoomState.READY;
             },
             error: (err) => {
-                console.error("Error starting video call:", err);
-                this.isLoading = false;
-            },
+                console.error('Error creating room or getting token:', err);
+                this.state = WaitingRoomState.ERROR;
+                this.errorMessage = 'Error creating room. Please try again.';
+            }
         }));
     }
-    // Private Methods
-    loadUserData() {
-        if (!this.userDataProvider) {
-            console.warn("TasButtonComponent: UserDataProvider not configured");
+    /**
+     * Joins the video call session
+     */
+    joinSession() {
+        if (!this.sessionId || !this.token) {
+            this.errorMessage = 'Cannot join session. Incomplete data.';
             return;
         }
-        this.userData = this.userDataProvider.getUserData();
-        this.tenantId = this.userDataProvider.getTenantId();
+        // Close waiting room and open video call
+        this.activeModal.close('joining');
+        this.openVideoCallModal();
+    }
+    /**
+     * Closes the waiting room
+     */
+    cancel() {
+        this.activeModal.dismiss('cancel');
+    }
+    /**
+     * Retry after an error
+     */
+    retry() {
+        this.state = WaitingRoomState.IDLE;
+        this.errorMessage = '';
+        this.sessionId = '';
+        this.token = '';
+    }
+    // Private Methods
+    buildUsersArray() {
+        this.users = [];
+        // Add owners from input
+        this.ownerUserIds.forEach(id => {
+            this.users.push({ userExternalId: id, rol: TasUserRole.OWNER });
+        });
+        // Add regular users from input
+        this.regularUserIds.forEach(id => {
+            this.users.push({ userExternalId: id, rol: TasUserRole.USER });
+        });
+        // Add moderators from input
+        this.moderatorUserIds.forEach(id => {
+            this.users.push({ userExternalId: id, rol: TasUserRole.MODERATOR });
+        });
     }
     setupViewModeSubscription() {
-        this.subscriptions.add(this.tasService.viewMode$.subscribe((mode) => {
+        this.subscriptions.add(this.tasService.viewMode$.subscribe(mode => {
+            // Re-open video call modal when returning from PiP mode
             if (mode === ViewMode.FULLSCREEN &&
                 this.tasService.isCallActive() &&
-                !this.currentModalRef) {
+                !this.videoCallModalRef) {
                 const sessionId = this.tasService.sessionId;
                 const token = this.tasService.token;
                 if (sessionId && token) {
-                    this.openVideoCallModal(sessionId, token, true);
+                    this.openVideoCallModal(true);
                 }
             }
         }));
     }
-    openVideoCallModal(sessionId, token, isReturningFromPip = false) {
-        this.currentModalRef = this.modalService.open(TasVideocallComponent, {
-            size: "xl",
-            windowClass: "tas-video-modal",
+    openVideoCallModal(isReturningFromPip = false) {
+        this.videoCallModalRef = this.modalService.open(TasVideocallComponent, {
+            size: 'xl',
+            windowClass: 'tas-video-modal',
+            backdrop: 'static',
+            keyboard: false
+        });
+        const sessionIdToUse = this.sessionId || this.tasService.sessionId;
+        const tokenToUse = this.token || this.tasService.token;
+        this.videoCallModalRef.componentInstance.sessionId = sessionIdToUse;
+        this.videoCallModalRef.componentInstance.token = tokenToUse;
+        this.videoCallModalRef.componentInstance.isReturningFromPip = isReturningFromPip;
+        this.videoCallModalRef.result.then(() => { this.videoCallModalRef = null; }, () => { this.videoCallModalRef = null; });
+    }
+}
+TasWaitingRoomComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasWaitingRoomComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }, { token: i1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
+TasWaitingRoomComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TasWaitingRoomComponent, selector: "tas-waiting-room", inputs: { appointmentId: "appointmentId", product: "product", tenantId: "tenantId", currentUser: "currentUser", ownerUserIds: "ownerUserIds", regularUserIds: "regularUserIds", moderatorUserIds: "moderatorUserIds" }, ngImport: i0, template: "<div class=\"tas-waiting-room\">\n\t<!-- Header -->\n\t<div class=\"waiting-room-header\">\n\t\t<div class=\"header-icon\">\n\t\t\t<i class=\"fa fa-video-camera\"></i>\n\t\t</div>\n\t\t<h2 class=\"header-title\">Waiting Room</h2>\n\t\t<p class=\"header-subtitle\">Prepare for your video call</p>\n\t\t<button type=\"button\" class=\"close-btn\" (click)=\"cancel()\" aria-label=\"Close\">\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n\n\t<!-- Content -->\n\t<div class=\"waiting-room-content\">\n\t\t<!-- IDLE State -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.IDLE\">\n\t\t\t<div class=\"state-icon idle\">\n\t\t\t\t<i class=\"fa fa-plus-circle\"></i>\n\t\t\t</div>\n\t\t\t<p class=\"state-message\">\n\t\t\t\tCreate a new video call room\n\t\t\t</p>\n\t\t\t<p class=\"state-submessage\">\n\t\t\t\tPress the button to begin\n\t\t\t</p>\n\t\t\t<button \n\t\t\t\ttype=\"button\" \n\t\t\t\tclass=\"btn action-btn create-btn\"\n\t\t\t\t(click)=\"createRoom()\">\n\t\t\t\t<i class=\"fa fa-plus\"></i>\n\t\t\t\tCreate Room\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- CREATING_ROOM State -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.CREATING_ROOM\">\n\t\t\t<div class=\"state-icon loading\">\n\t\t\t\t<div class=\"spinner\"></div>\n\t\t\t</div>\n\t\t\t<p class=\"state-message\">\n\t\t\t\tCreating video call room...\n\t\t\t</p>\n\t\t\t<div class=\"progress-steps\">\n\t\t\t\t<div class=\"step active\">\n\t\t\t\t\t<span class=\"step-indicator\"></span>\n\t\t\t\t\t<span class=\"step-label\">Creating</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step\">\n\t\t\t\t\t<span class=\"step-indicator\"></span>\n\t\t\t\t\t<span class=\"step-label\">Access</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step\">\n\t\t\t\t\t<span class=\"step-indicator\"></span>\n\t\t\t\t\t<span class=\"step-label\">Ready</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- GETTING_TOKEN State -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN\">\n\t\t\t<div class=\"state-icon loading\">\n\t\t\t\t<div class=\"spinner\"></div>\n\t\t\t</div>\n\t\t\t<p class=\"state-message\">\n\t\t\t\tPreparing room access...\n\t\t\t</p>\n\t\t\t<div class=\"progress-steps\">\n\t\t\t\t<div class=\"step completed\">\n\t\t\t\t\t<span class=\"step-indicator\"><i class=\"fa fa-check\"></i></span>\n\t\t\t\t\t<span class=\"step-label\">Created</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step active\">\n\t\t\t\t\t<span class=\"step-indicator\"></span>\n\t\t\t\t\t<span class=\"step-label\">Access</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step\">\n\t\t\t\t\t<span class=\"step-indicator\"></span>\n\t\t\t\t\t<span class=\"step-label\">Ready</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- READY State -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY\">\n\t\t\t<div class=\"state-icon ready\">\n\t\t\t\t<i class=\"fa fa-check-circle\"></i>\n\t\t\t</div>\n\t\t\t<p class=\"state-message success\">\n\t\t\t\tRoom is ready!\n\t\t\t</p>\n\t\t\t<p class=\"state-submessage\">\n\t\t\t\tYou can join the video call when ready\n\t\t\t</p>\n\t\t\t<div class=\"progress-steps\">\n\t\t\t\t<div class=\"step completed\">\n\t\t\t\t\t<span class=\"step-indicator\"><i class=\"fa fa-check\"></i></span>\n\t\t\t\t\t<span class=\"step-label\">Created</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step completed\">\n\t\t\t\t\t<span class=\"step-indicator\"><i class=\"fa fa-check\"></i></span>\n\t\t\t\t\t<span class=\"step-label\">Access</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step completed\">\n\t\t\t\t\t<span class=\"step-indicator\"><i class=\"fa fa-check\"></i></span>\n\t\t\t\t\t<span class=\"step-label\">Ready</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<button \n\t\t\t\ttype=\"button\" \n\t\t\t\tclass=\"btn action-btn join-btn\"\n\t\t\t\t(click)=\"joinSession()\">\n\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\tJoin Session\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- ERROR State -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.ERROR\">\n\t\t\t<div class=\"state-icon error\">\n\t\t\t\t<i class=\"fa fa-exclamation-triangle\"></i>\n\t\t\t</div>\n\t\t\t<p class=\"state-message error\">\n\t\t\t\tAn error occurred\n\t\t\t</p>\n\t\t\t<p class=\"error-details\" *ngIf=\"errorMessage\">\n\t\t\t\t{{ errorMessage }}\n\t\t\t</p>\n\t\t\t<button \n\t\t\t\ttype=\"button\" \n\t\t\t\tclass=\"btn action-btn retry-btn\"\n\t\t\t\t(click)=\"retry()\">\n\t\t\t\t<i class=\"fa fa-refresh\"></i>\n\t\t\t\tRetry\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\n\t<!-- Footer -->\n\t<div class=\"waiting-room-footer\">\n\t\t<button \n\t\t\ttype=\"button\" \n\t\t\tclass=\"btn cancel-btn\"\n\t\t\t(click)=\"cancel()\">\n\t\t\tCancel\n\t\t</button>\n\t</div>\n</div>\n\n", styles: [".tas-waiting-room{display:flex;flex-direction:column;min-height:420px;background:#ffffff;border-radius:5px;overflow:hidden}.waiting-room-header{position:relative;padding:32px 40px 24px;text-align:center;border-bottom:1px solid #e9ecef}.waiting-room-header .header-icon{width:72px;height:72px;margin:0 auto 16px;background:linear-gradient(135deg,#1da4b1 0%,#0077b3 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #1da4b140}.waiting-room-header .header-icon i{font-size:28px;color:#fff}.waiting-room-header .header-title{margin:0 0 8px;font-size:20px;font-weight:700;line-height:28px;color:#212529}.waiting-room-header .header-subtitle{margin:0;font-size:14px;color:#6c757d;font-weight:400}.waiting-room-header .close-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:transparent;border-radius:4px;color:#6c757d;cursor:pointer;transition:all .2s ease;font-size:20px}.waiting-room-header .close-btn:hover{background:#f8f9fa;color:#212529}.waiting-room-content{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 40px;background:#ffffff}.state-container{text-align:center;max-width:360px;width:100%}.state-icon{width:80px;height:80px;margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.state-icon i{font-size:36px}.state-icon.idle{background:rgba(29,164,177,.1);border:2px dashed #1da4b1}.state-icon.idle i{color:#1da4b1}.state-icon.loading{background:rgba(29,164,177,.1);border:2px solid #1da4b1}.state-icon.ready{background:linear-gradient(135deg,#1da4b1 0%,#38b89a 100%);box-shadow:0 4px 16px #1da4b14d}.state-icon.ready i{color:#fff}.state-icon.error{background:rgba(238,49,107,.1);border:2px solid #ee316b}.state-icon.error i{color:#ee316b}.spinner{width:40px;height:40px;border:3px solid #e9ecef;border-top-color:#1da4b1;border-radius:50%;animation:spin 1s linear infinite}.state-message{font-size:16px;font-weight:600;margin:0 0 8px;color:#212529;line-height:24px}.state-message.success{color:#1da4b1}.state-message.error{color:#ee316b}.state-submessage{font-size:14px;color:#6c757d;margin:0 0 24px;font-weight:400}.error-details{font-size:13px;color:#ee316b;margin:0 0 24px;padding:12px 16px;background:rgba(238,49,107,.08);border-radius:8px;border:1px solid rgba(238,49,107,.2)}.progress-steps{display:flex;justify-content:center;gap:24px;margin:24px 0 32px}.step{display:flex;flex-direction:column;align-items:center;gap:8px}.step .step-indicator{width:32px;height:32px;border-radius:50%;background:#f8f9fa;border:2px solid #e9ecef;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.step .step-indicator i{font-size:12px;color:#fff}.step .step-label{font-size:11px;color:#6c757d;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.step.active .step-indicator{background:rgba(29,164,177,.1);border-color:#1da4b1;animation:pulse-active 1.5s infinite}.step.active .step-label{color:#1da4b1;font-weight:600}.step.completed .step-indicator{background:#1da4b1;border-color:#1da4b1}.step.completed .step-label{color:#1da4b1;font-weight:600}.action-btn{padding:12px 32px;font-size:16px;font-weight:600;border-radius:4px;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:10px}.action-btn i{font-size:16px}.action-btn.create-btn{background:#0077b3;color:#fff;box-shadow:0 2px 8px #0077b340}.action-btn.create-btn:hover{background:#005c8a;box-shadow:0 4px 12px #0077b359}.action-btn.create-btn:active{transform:translateY(1px)}.action-btn.join-btn{background:#1da4b1;color:#fff;box-shadow:0 2px 8px #1da4b140;animation:pulse-ready 2s infinite}.action-btn.join-btn:hover{background:#17848e;box-shadow:0 4px 12px #1da4b159}.action-btn.join-btn:active{transform:translateY(1px)}.action-btn.retry-btn{background:transparent;color:#6c757d;border:1px solid #e9ecef}.action-btn.retry-btn:hover{background:#f8f9fa;border-color:#6c757d;color:#212529}.waiting-room-footer{padding:16px 40px 24px;background:#ffffff;border-top:1px solid #e9ecef;display:flex;justify-content:center}.waiting-room-footer .cancel-btn{padding:10px 24px;font-size:14px;font-weight:600;border-radius:4px;background:transparent;color:#6c757d;border:none;cursor:pointer;transition:all .2s ease}.waiting-room-footer .cancel-btn:hover{background:#f8f9fa;color:#212529}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-active{0%,to{box-shadow:0 0 #1da4b166}50%{box-shadow:0 0 0 8px #1da4b100}}@keyframes pulse-ready{0%,to{box-shadow:0 2px 8px #1da4b140}50%{box-shadow:0 4px 16px #1da4b166}}@media (max-width: 576px){.tas-waiting-room{min-height:380px}.waiting-room-header{padding:24px 24px 20px}.waiting-room-header .header-icon{width:56px;height:56px}.waiting-room-header .header-icon i{font-size:22px}.waiting-room-header .header-title{font-size:18px}.waiting-room-content{padding:24px}.state-icon{width:64px;height:64px}.state-icon i{font-size:28px}.spinner{width:32px;height:32px}.progress-steps{gap:12px}.step .step-indicator{width:28px;height:28px}.step .step-label{font-size:9px}.action-btn{padding:10px 24px;font-size:14px}.waiting-room-footer{padding:16px 24px 20px}}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasWaitingRoomComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tas-waiting-room', template: "<div class=\"tas-waiting-room\">\n\t<!-- Header -->\n\t<div class=\"waiting-room-header\">\n\t\t<div class=\"header-icon\">\n\t\t\t<i class=\"fa fa-video-camera\"></i>\n\t\t</div>\n\t\t<h2 class=\"header-title\">Waiting Room</h2>\n\t\t<p class=\"header-subtitle\">Prepare for your video call</p>\n\t\t<button type=\"button\" class=\"close-btn\" (click)=\"cancel()\" aria-label=\"Close\">\n\t\t\t<span aria-hidden=\"true\">&times;</span>\n\t\t</button>\n\t</div>\n\n\t<!-- Content -->\n\t<div class=\"waiting-room-content\">\n\t\t<!-- IDLE State -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.IDLE\">\n\t\t\t<div class=\"state-icon idle\">\n\t\t\t\t<i class=\"fa fa-plus-circle\"></i>\n\t\t\t</div>\n\t\t\t<p class=\"state-message\">\n\t\t\t\tCreate a new video call room\n\t\t\t</p>\n\t\t\t<p class=\"state-submessage\">\n\t\t\t\tPress the button to begin\n\t\t\t</p>\n\t\t\t<button \n\t\t\t\ttype=\"button\" \n\t\t\t\tclass=\"btn action-btn create-btn\"\n\t\t\t\t(click)=\"createRoom()\">\n\t\t\t\t<i class=\"fa fa-plus\"></i>\n\t\t\t\tCreate Room\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- CREATING_ROOM State -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.CREATING_ROOM\">\n\t\t\t<div class=\"state-icon loading\">\n\t\t\t\t<div class=\"spinner\"></div>\n\t\t\t</div>\n\t\t\t<p class=\"state-message\">\n\t\t\t\tCreating video call room...\n\t\t\t</p>\n\t\t\t<div class=\"progress-steps\">\n\t\t\t\t<div class=\"step active\">\n\t\t\t\t\t<span class=\"step-indicator\"></span>\n\t\t\t\t\t<span class=\"step-label\">Creating</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step\">\n\t\t\t\t\t<span class=\"step-indicator\"></span>\n\t\t\t\t\t<span class=\"step-label\">Access</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step\">\n\t\t\t\t\t<span class=\"step-indicator\"></span>\n\t\t\t\t\t<span class=\"step-label\">Ready</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- GETTING_TOKEN State -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN\">\n\t\t\t<div class=\"state-icon loading\">\n\t\t\t\t<div class=\"spinner\"></div>\n\t\t\t</div>\n\t\t\t<p class=\"state-message\">\n\t\t\t\tPreparing room access...\n\t\t\t</p>\n\t\t\t<div class=\"progress-steps\">\n\t\t\t\t<div class=\"step completed\">\n\t\t\t\t\t<span class=\"step-indicator\"><i class=\"fa fa-check\"></i></span>\n\t\t\t\t\t<span class=\"step-label\">Created</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step active\">\n\t\t\t\t\t<span class=\"step-indicator\"></span>\n\t\t\t\t\t<span class=\"step-label\">Access</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step\">\n\t\t\t\t\t<span class=\"step-indicator\"></span>\n\t\t\t\t\t<span class=\"step-label\">Ready</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- READY State -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY\">\n\t\t\t<div class=\"state-icon ready\">\n\t\t\t\t<i class=\"fa fa-check-circle\"></i>\n\t\t\t</div>\n\t\t\t<p class=\"state-message success\">\n\t\t\t\tRoom is ready!\n\t\t\t</p>\n\t\t\t<p class=\"state-submessage\">\n\t\t\t\tYou can join the video call when ready\n\t\t\t</p>\n\t\t\t<div class=\"progress-steps\">\n\t\t\t\t<div class=\"step completed\">\n\t\t\t\t\t<span class=\"step-indicator\"><i class=\"fa fa-check\"></i></span>\n\t\t\t\t\t<span class=\"step-label\">Created</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step completed\">\n\t\t\t\t\t<span class=\"step-indicator\"><i class=\"fa fa-check\"></i></span>\n\t\t\t\t\t<span class=\"step-label\">Access</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"step completed\">\n\t\t\t\t\t<span class=\"step-indicator\"><i class=\"fa fa-check\"></i></span>\n\t\t\t\t\t<span class=\"step-label\">Ready</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<button \n\t\t\t\ttype=\"button\" \n\t\t\t\tclass=\"btn action-btn join-btn\"\n\t\t\t\t(click)=\"joinSession()\">\n\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\tJoin Session\n\t\t\t</button>\n\t\t</div>\n\n\t\t<!-- ERROR State -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.ERROR\">\n\t\t\t<div class=\"state-icon error\">\n\t\t\t\t<i class=\"fa fa-exclamation-triangle\"></i>\n\t\t\t</div>\n\t\t\t<p class=\"state-message error\">\n\t\t\t\tAn error occurred\n\t\t\t</p>\n\t\t\t<p class=\"error-details\" *ngIf=\"errorMessage\">\n\t\t\t\t{{ errorMessage }}\n\t\t\t</p>\n\t\t\t<button \n\t\t\t\ttype=\"button\" \n\t\t\t\tclass=\"btn action-btn retry-btn\"\n\t\t\t\t(click)=\"retry()\">\n\t\t\t\t<i class=\"fa fa-refresh\"></i>\n\t\t\t\tRetry\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\n\t<!-- Footer -->\n\t<div class=\"waiting-room-footer\">\n\t\t<button \n\t\t\ttype=\"button\" \n\t\t\tclass=\"btn cancel-btn\"\n\t\t\t(click)=\"cancel()\">\n\t\t\tCancel\n\t\t</button>\n\t</div>\n</div>\n\n", styles: [".tas-waiting-room{display:flex;flex-direction:column;min-height:420px;background:#ffffff;border-radius:5px;overflow:hidden}.waiting-room-header{position:relative;padding:32px 40px 24px;text-align:center;border-bottom:1px solid #e9ecef}.waiting-room-header .header-icon{width:72px;height:72px;margin:0 auto 16px;background:linear-gradient(135deg,#1da4b1 0%,#0077b3 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #1da4b140}.waiting-room-header .header-icon i{font-size:28px;color:#fff}.waiting-room-header .header-title{margin:0 0 8px;font-size:20px;font-weight:700;line-height:28px;color:#212529}.waiting-room-header .header-subtitle{margin:0;font-size:14px;color:#6c757d;font-weight:400}.waiting-room-header .close-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;border:none;background:transparent;border-radius:4px;color:#6c757d;cursor:pointer;transition:all .2s ease;font-size:20px}.waiting-room-header .close-btn:hover{background:#f8f9fa;color:#212529}.waiting-room-content{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 40px;background:#ffffff}.state-container{text-align:center;max-width:360px;width:100%}.state-icon{width:80px;height:80px;margin:0 auto 24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.state-icon i{font-size:36px}.state-icon.idle{background:rgba(29,164,177,.1);border:2px dashed #1da4b1}.state-icon.idle i{color:#1da4b1}.state-icon.loading{background:rgba(29,164,177,.1);border:2px solid #1da4b1}.state-icon.ready{background:linear-gradient(135deg,#1da4b1 0%,#38b89a 100%);box-shadow:0 4px 16px #1da4b14d}.state-icon.ready i{color:#fff}.state-icon.error{background:rgba(238,49,107,.1);border:2px solid #ee316b}.state-icon.error i{color:#ee316b}.spinner{width:40px;height:40px;border:3px solid #e9ecef;border-top-color:#1da4b1;border-radius:50%;animation:spin 1s linear infinite}.state-message{font-size:16px;font-weight:600;margin:0 0 8px;color:#212529;line-height:24px}.state-message.success{color:#1da4b1}.state-message.error{color:#ee316b}.state-submessage{font-size:14px;color:#6c757d;margin:0 0 24px;font-weight:400}.error-details{font-size:13px;color:#ee316b;margin:0 0 24px;padding:12px 16px;background:rgba(238,49,107,.08);border-radius:8px;border:1px solid rgba(238,49,107,.2)}.progress-steps{display:flex;justify-content:center;gap:24px;margin:24px 0 32px}.step{display:flex;flex-direction:column;align-items:center;gap:8px}.step .step-indicator{width:32px;height:32px;border-radius:50%;background:#f8f9fa;border:2px solid #e9ecef;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.step .step-indicator i{font-size:12px;color:#fff}.step .step-label{font-size:11px;color:#6c757d;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.step.active .step-indicator{background:rgba(29,164,177,.1);border-color:#1da4b1;animation:pulse-active 1.5s infinite}.step.active .step-label{color:#1da4b1;font-weight:600}.step.completed .step-indicator{background:#1da4b1;border-color:#1da4b1}.step.completed .step-label{color:#1da4b1;font-weight:600}.action-btn{padding:12px 32px;font-size:16px;font-weight:600;border-radius:4px;border:none;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:10px}.action-btn i{font-size:16px}.action-btn.create-btn{background:#0077b3;color:#fff;box-shadow:0 2px 8px #0077b340}.action-btn.create-btn:hover{background:#005c8a;box-shadow:0 4px 12px #0077b359}.action-btn.create-btn:active{transform:translateY(1px)}.action-btn.join-btn{background:#1da4b1;color:#fff;box-shadow:0 2px 8px #1da4b140;animation:pulse-ready 2s infinite}.action-btn.join-btn:hover{background:#17848e;box-shadow:0 4px 12px #1da4b159}.action-btn.join-btn:active{transform:translateY(1px)}.action-btn.retry-btn{background:transparent;color:#6c757d;border:1px solid #e9ecef}.action-btn.retry-btn:hover{background:#f8f9fa;border-color:#6c757d;color:#212529}.waiting-room-footer{padding:16px 40px 24px;background:#ffffff;border-top:1px solid #e9ecef;display:flex;justify-content:center}.waiting-room-footer .cancel-btn{padding:10px 24px;font-size:14px;font-weight:600;border-radius:4px;background:transparent;color:#6c757d;border:none;cursor:pointer;transition:all .2s ease}.waiting-room-footer .cancel-btn:hover{background:#f8f9fa;color:#212529}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-active{0%,to{box-shadow:0 0 #1da4b166}50%{box-shadow:0 0 0 8px #1da4b100}}@keyframes pulse-ready{0%,to{box-shadow:0 2px 8px #1da4b140}50%{box-shadow:0 4px 16px #1da4b166}}@media (max-width: 576px){.tas-waiting-room{min-height:380px}.waiting-room-header{padding:24px 24px 20px}.waiting-room-header .header-icon{width:56px;height:56px}.waiting-room-header .header-icon i{font-size:22px}.waiting-room-header .header-title{font-size:18px}.waiting-room-content{padding:24px}.state-icon{width:64px;height:64px}.state-icon i{font-size:28px}.spinner{width:32px;height:32px}.progress-steps{gap:12px}.step .step-indicator{width:28px;height:28px}.step .step-label{font-size:9px}.action-btn{padding:10px 24px;font-size:14px}.waiting-room-footer{padding:16px 24px 20px}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }, { type: i1.NgbModal }]; }, propDecorators: { appointmentId: [{
+                type: Input
+            }], product: [{
+                type: Input
+            }], tenantId: [{
+                type: Input
+            }], currentUser: [{
+                type: Input
+            }], ownerUserIds: [{
+                type: Input
+            }], regularUserIds: [{
+                type: Input
+            }], moderatorUserIds: [{
+                type: Input
+            }] } });
+
+class TasButtonComponent {
+    constructor(modalService, tasService) {
+        this.modalService = modalService;
+        this.tasService = tasService;
+        this.appointmentId = 1;
+        this.product = "uell";
+        this.tenantId = "";
+        this.regularUserIds = [];
+        this.moderatorUserIds = [];
+        this.isLoading = false;
+        this.subscriptions = new Subscription();
+        this.currentModalRef = null;
+        this.videoCallModalRef = null;
+    }
+    ngOnInit() {
+        if (!this.ownerUserIds || this.ownerUserIds.length !== 1) {
+            throw new Error('tas-btn: ownerUserIds input is required and must contain exactly one user');
+        }
+        // Subscribe to viewMode to handle PiP return
+        this.subscriptions.add(this.tasService.viewMode$.subscribe(mode => {
+            // Reopen video call modal when returning from PiP
+            if (mode === ViewMode.FULLSCREEN &&
+                this.tasService.isCallActive() &&
+                !this.videoCallModalRef) {
+                const sessionId = this.tasService.sessionId;
+                const token = this.tasService.token;
+                if (sessionId && token) {
+                    this.openVideoCallModal(true);
+                }
+            }
+            // When entering PiP, clear the videoCallModalRef since modal will close
+            if (mode === ViewMode.PIP) {
+                this.videoCallModalRef = null;
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    onClick() {
+        if (!this.tenantId || !this.currentUser?.name) {
+            console.error("Tenant ID or current user not available");
+            return;
+        }
+        this.openWaitingRoomModal();
+    }
+    openWaitingRoomModal() {
+        this.currentModalRef = this.modalService.open(TasWaitingRoomComponent, {
+            size: "lg",
+            windowClass: "tas-waiting-room-modal",
             backdrop: "static",
             keyboard: false,
+            centered: true
         });
-        this.currentModalRef.componentInstance.sessionId = sessionId;
-        this.currentModalRef.componentInstance.token = token;
-        this.currentModalRef.componentInstance.isReturningFromPip =
-            isReturningFromPip;
-        this.currentModalRef.result.then(() => {
-            this.currentModalRef = null;
-        }, () => {
-            this.currentModalRef = null;
+        // Pass all necessary inputs to the waiting room component
+        this.currentModalRef.componentInstance.appointmentId = this.appointmentId;
+        this.currentModalRef.componentInstance.product = this.product;
+        this.currentModalRef.componentInstance.tenantId = this.tenantId;
+        this.currentModalRef.componentInstance.currentUser = this.currentUser;
+        this.currentModalRef.componentInstance.ownerUserIds = this.ownerUserIds;
+        this.currentModalRef.componentInstance.regularUserIds = this.regularUserIds;
+        this.currentModalRef.componentInstance.moderatorUserIds = this.moderatorUserIds;
+        this.currentModalRef.result.then(() => { this.currentModalRef = null; }, () => { this.currentModalRef = null; });
+    }
+    openVideoCallModal(isReturningFromPip = false) {
+        this.videoCallModalRef = this.modalService.open(TasVideocallComponent, {
+            size: 'xl',
+            windowClass: 'tas-video-modal',
+            backdrop: 'static',
+            keyboard: false
         });
+        this.videoCallModalRef.componentInstance.sessionId = this.tasService.sessionId;
+        this.videoCallModalRef.componentInstance.token = this.tasService.token;
+        this.videoCallModalRef.componentInstance.isReturningFromPip = isReturningFromPip;
+        this.videoCallModalRef.result.then(() => { this.videoCallModalRef = null; }, () => { this.videoCallModalRef = null; });
     }
 }
-TasButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasButtonComponent, deps: [{ token: TasService }, { token: i1.NgbModal }, { token: TAS_USER_DATA_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TasButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TasButtonComponent, selector: "tas-btn", ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"btn btn-primary boton\"\n  (click)=\"onClick()\"\n  [disabled]=\"isLoading\"\n>\n  <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n  <span *ngIf=\"!isLoading\"> Iniciar TAS</span>\n  <span *ngIf=\"isLoading\"> Processing...</span>\n</button>\n", styles: [":host{display:inline-block}.boton{background-color:#ee316b!important;color:#fff!important;margin-right:24px}.boton:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.boton i{margin-right:5px}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TasButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasButtonComponent, deps: [{ token: i1.NgbModal }, { token: TasService }], target: i0.ɵɵFactoryTarget.Component });
+TasButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TasButtonComponent, selector: "tas-btn", inputs: { appointmentId: "appointmentId", product: "product", tenantId: "tenantId", currentUser: "currentUser", ownerUserIds: "ownerUserIds", regularUserIds: "regularUserIds", moderatorUserIds: "moderatorUserIds" }, ngImport: i0, template: "<button\n\ttype=\"button\"\n\tclass=\"btn btn-primary tas-btn\"\n\t(click)=\"onClick()\"\n\t[disabled]=\"isLoading\"\n>\n\t<i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n\t<span *ngIf=\"!isLoading\"> Iniciar TAS</span>\n\t<span *ngIf=\"isLoading\"> Processing...</span>\n</button>\n\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px}.tas-btn:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.tas-btn:hover:not(:disabled){background-color:#d62a5f!important;border-color:#d62a5f!important}.tas-btn i{margin-right:5px}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tas-btn", template: "<button\n  type=\"button\"\n  class=\"btn btn-primary boton\"\n  (click)=\"onClick()\"\n  [disabled]=\"isLoading\"\n>\n  <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n  <span *ngIf=\"!isLoading\"> Iniciar TAS</span>\n  <span *ngIf=\"isLoading\"> Processing...</span>\n</button>\n", styles: [":host{display:inline-block}.boton{background-color:#ee316b!important;color:#fff!important;margin-right:24px}.boton:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.boton i{margin-right:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: TasService }, { type: i1.NgbModal }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [TAS_USER_DATA_PROVIDER]
-                }] }]; } });
+            args: [{ selector: "tas-btn", template: "<button\n\ttype=\"button\"\n\tclass=\"btn btn-primary tas-btn\"\n\t(click)=\"onClick()\"\n\t[disabled]=\"isLoading\"\n>\n\t<i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n\t<span *ngIf=\"!isLoading\"> Iniciar TAS</span>\n\t<span *ngIf=\"isLoading\"> Processing...</span>\n</button>\n\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px}.tas-btn:disabled{background-color:#ccc!important;border-color:#ccc!important;cursor:not-allowed}.tas-btn:hover:not(:disabled){background-color:#d62a5f!important;border-color:#d62a5f!important}.tas-btn i{margin-right:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgbModal }, { type: TasService }]; }, propDecorators: { appointmentId: [{
+                type: Input
+            }], product: [{
+                type: Input
+            }], tenantId: [{
+                type: Input
+            }], currentUser: [{
+                type: Input
+            }], ownerUserIds: [{
+                type: Input
+            }], regularUserIds: [{
+                type: Input
+            }], moderatorUserIds: [{
+                type: Input
+            }] } });
 
 class TasFloatingCallComponent {
     constructor(tasService) {
@@ -553,13 +716,15 @@ class TasFloatingCallComponent {
         this.isVisible = false;
         this.isMuted = false;
         this.subscriptions = new Subscription();
+        // Margin from screen edges (in pixels)
+        this.PIP_MARGIN = 20;
     }
     ngOnInit() {
         this.setupSubscriptions();
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
-        interact(".tas-floating-container").unset();
+        interact('.tas-floating-container').unset();
     }
     // Public Methods
     onExpand() {
@@ -573,115 +738,171 @@ class TasFloatingCallComponent {
     }
     // Private Methods
     setupSubscriptions() {
-        this.subscriptions.add(this.tasService.callState$.subscribe((state) => {
+        // Call state subscription
+        this.subscriptions.add(this.tasService.callState$.subscribe(state => {
             if (state === CallState.DISCONNECTED) {
                 this.isVisible = false;
             }
         }));
-        this.subscriptions.add(this.tasService.viewMode$.subscribe((mode) => {
-            this.isVisible =
-                mode === ViewMode.PIP && this.tasService.isCallActive();
+        // View mode subscription
+        this.subscriptions.add(this.tasService.viewMode$.subscribe(mode => {
+            this.isVisible = mode === ViewMode.PIP && this.tasService.isCallActive();
             if (this.isVisible) {
                 setTimeout(() => this.initInteract(), 100);
             }
         }));
-        this.subscriptions.add(this.tasService.isMuted$.subscribe((muted) => {
+        // Mute state subscription
+        this.subscriptions.add(this.tasService.isMuted$.subscribe(muted => {
             this.isMuted = muted;
         }));
     }
     initInteract() {
-        interact(".tas-floating-container").unset();
-        interact(".tas-floating-container").draggable({
+        interact('.tas-floating-container').unset();
+        // Create restriction area with margin
+        const margin = this.PIP_MARGIN;
+        const restrictToBodyWithMargin = {
+            restriction: () => {
+                return {
+                    left: margin,
+                    top: margin,
+                    right: window.innerWidth - margin,
+                    bottom: window.innerHeight - margin
+                };
+            },
+            elementRect: { left: 0, right: 1, top: 0, bottom: 1 }
+        };
+        interact('.tas-floating-container')
+            .draggable({
             inertia: true,
             modifiers: [
-                interact.modifiers.restrictRect({
-                    restriction: "body",
-                    endOnly: true,
-                }),
+                interact.modifiers.restrict(restrictToBodyWithMargin)
             ],
             autoScroll: false,
             listeners: {
                 move: (event) => {
                     const target = event.target;
-                    const x = (parseFloat(target.getAttribute("data-x")) || 0) + event.dx;
-                    const y = (parseFloat(target.getAttribute("data-y")) || 0) + event.dy;
+                    const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+                    const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+                    target.style.transform = `translate(${x}px, ${y}px)`;
+                    target.setAttribute('data-x', String(x));
+                    target.setAttribute('data-y', String(y));
+                }
+            }
+        })
+            .resizable({
+            edges: { left: false, right: true, bottom: true, top: false },
+            listeners: {
+                move: (event) => {
+                    const target = event.target;
+                    let x = parseFloat(target.getAttribute('data-x')) || 0;
+                    let y = parseFloat(target.getAttribute('data-y')) || 0;
+                    // Update element size
+                    target.style.width = `${event.rect.width}px`;
+                    target.style.height = `${event.rect.height}px`;
+                    // Translate when resizing from top or left edges
+                    x += event.deltaRect.left;
+                    y += event.deltaRect.top;
                     target.style.transform = `translate(${x}px, ${y}px)`;
-                    target.setAttribute("data-x", String(x));
-                    target.setAttribute("data-y", String(y));
-                },
+                    target.setAttribute('data-x', String(x));
+                    target.setAttribute('data-y', String(y));
+                }
             },
+            modifiers: [
+                interact.modifiers.restrictEdges({
+                    outer: {
+                        left: margin,
+                        top: margin,
+                        right: window.innerWidth - margin,
+                        bottom: window.innerHeight - margin
+                    }
+                }),
+                interact.modifiers.restrictSize({
+                    min: { width: 200, height: 130 },
+                    max: { width: 500, height: 350 }
+                }),
+                interact.modifiers.aspectRatio({ ratio: 'preserve' })
+            ],
+            inertia: true
         });
     }
 }
 TasFloatingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasFloatingCallComponent, deps: [{ token: TasService }], target: i0.ɵɵFactoryTarget.Component });
-TasFloatingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TasFloatingCallComponent, selector: "tas-floating-call", ngImport: i0, template: "<div class=\"tas-floating-container\" [class.visible]=\"isVisible\">\n  <div class=\"floating-content\">\n    <div id=\"pip-main-video\" class=\"pip-main-video\"></div>\n\n    <div class=\"floating-controls\">\n      <button\n        class=\"action-btn expand-btn\"\n        (click)=\"onExpand()\"\n        title=\"Expandir a pantalla completa\"\n      >\n        <i class=\"fa fa-expand\"></i>\n      </button>\n      <button\n        class=\"action-btn mute-btn\"\n        [class.muted]=\"isMuted\"\n        (click)=\"toggleMute()\"\n        [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n      >\n        <i\n          class=\"fa\"\n          [class.fa-microphone]=\"!isMuted\"\n          [class.fa-microphone-slash]=\"isMuted\"\n        ></i>\n      </button>\n      <button\n        class=\"action-btn hangup-btn\"\n        (click)=\"onHangUp()\"\n        title=\"Colgar llamada\"\n      >\n        <i class=\"fa fa-phone\" style=\"transform: rotate(135deg)\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".tas-floating-container{position:fixed;bottom:20px;right:20px;width:280px;height:180px;background:#000;border-radius:12px;box-shadow:0 8px 32px #00000080;z-index:9999;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;transition:opacity .3s ease,visibility .3s ease;opacity:0;visibility:hidden;pointer-events:none}.tas-floating-container.visible{opacity:1;visibility:visible;pointer-events:auto}.floating-content{position:relative;width:100%;height:100%;overflow:hidden}.pip-main-video{position:absolute;top:0;left:0;width:100%;height:100%;background:#000}.pip-main-video ::ng-deep video{width:100%;height:100%;object-fit:cover}.pip-main-video ::ng-deep .OT_subscriber,.pip-main-video ::ng-deep .OT_publisher{width:100%!important;height:100%!important}.pip-main-video ::ng-deep .OT_edge-bar-item,.pip-main-video ::ng-deep .OT_mute,.pip-main-video ::ng-deep .OT_audio-level-meter,.pip-main-video ::ng-deep .OT_bar,.pip-main-video ::ng-deep .OT_name{display:none!important}.floating-controls{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:12px;padding:6px 14px;background:rgba(0,0,0,.7);border-radius:24px;backdrop-filter:blur(8px)}.action-btn{width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s ease}.action-btn.expand-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.expand-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn.muted{background:#f39c12;color:#fff}.action-btn.mute-btn.muted:hover{background:#e67e22}.action-btn.hangup-btn{background:#dc3545;color:#fff}.action-btn.hangup-btn:hover{background:#c82333;transform:scale(1.1)}\n"] });
+TasFloatingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: TasFloatingCallComponent, selector: "tas-floating-call", ngImport: i0, template: "<div class=\"tas-floating-container\" [class.visible]=\"isVisible\">\n\t<!-- Video content area - shows main video only -->\n\t<div class=\"floating-content\">\n\t\t<!-- Main video container (subscriber if available, otherwise publisher) -->\n\t\t<div id=\"pip-main-video\" class=\"pip-main-video\"></div>\n\n\t\t<!-- Bottom controls -->\n\t\t<div class=\"floating-controls\">\n\t\t\t<button class=\"action-btn expand-btn\" (click)=\"onExpand()\" title=\"Expand to fullscreen\">\n\t\t\t\t<i class=\"fa fa-expand\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"action-btn mute-btn\" [class.muted]=\"isMuted\" (click)=\"toggleMute()\" [title]=\"isMuted ? 'Unmute microphone' : 'Mute microphone'\">\n\t\t\t\t<i class=\"fa\" [class.fa-microphone]=\"!isMuted\" [class.fa-microphone-slash]=\"isMuted\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"action-btn hangup-btn\" (click)=\"onHangUp()\" title=\"Hang up call\">\n\t\t\t\t<i class=\"fa fa-phone\" style=\"transform: rotate(135deg);\"></i>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n\n", styles: [".tas-floating-container{position:fixed;bottom:20px;right:20px;width:280px;height:180px;background:#000;border-radius:12px;box-shadow:0 8px 32px #00000080;z-index:9999;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;transition:opacity .3s ease,visibility .3s ease,box-shadow .2s ease;opacity:0;visibility:hidden;pointer-events:none}.tas-floating-container.visible{opacity:1;visibility:visible;pointer-events:auto}.tas-floating-container:hover{box-shadow:0 8px 32px #00000080,0 0 0 2px #ffffff4d}.floating-content{position:relative;width:100%;height:100%;overflow:hidden}.pip-main-video{position:absolute;top:0;left:0;width:100%;height:100%;background:#000}.pip-main-video ::ng-deep video{width:100%;height:100%;object-fit:cover}.pip-main-video ::ng-deep .OT_subscriber,.pip-main-video ::ng-deep .OT_publisher{width:100%!important;height:100%!important}.pip-main-video ::ng-deep .OT_edge-bar-item,.pip-main-video ::ng-deep .OT_mute,.pip-main-video ::ng-deep .OT_audio-level-meter,.pip-main-video ::ng-deep .OT_bar,.pip-main-video ::ng-deep .OT_name{display:none!important}.floating-controls{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:12px;padding:6px 14px;background:rgba(0,0,0,.7);border-radius:24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.tas-floating-container:hover .floating-controls{opacity:1;visibility:visible}.action-btn{width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s ease}.action-btn.expand-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.expand-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn.muted{background:#f39c12;color:#fff}.action-btn.mute-btn.muted:hover{background:#e67e22}.action-btn.hangup-btn{background:#dc3545;color:#fff}.action-btn.hangup-btn:hover{background:#c82333;transform:scale(1.1)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasFloatingCallComponent, decorators: [{
             type: Component,
-            args: [{ selector: "tas-floating-call", template: "<div class=\"tas-floating-container\" [class.visible]=\"isVisible\">\n  <div class=\"floating-content\">\n    <div id=\"pip-main-video\" class=\"pip-main-video\"></div>\n\n    <div class=\"floating-controls\">\n      <button\n        class=\"action-btn expand-btn\"\n        (click)=\"onExpand()\"\n        title=\"Expandir a pantalla completa\"\n      >\n        <i class=\"fa fa-expand\"></i>\n      </button>\n      <button\n        class=\"action-btn mute-btn\"\n        [class.muted]=\"isMuted\"\n        (click)=\"toggleMute()\"\n        [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n      >\n        <i\n          class=\"fa\"\n          [class.fa-microphone]=\"!isMuted\"\n          [class.fa-microphone-slash]=\"isMuted\"\n        ></i>\n      </button>\n      <button\n        class=\"action-btn hangup-btn\"\n        (click)=\"onHangUp()\"\n        title=\"Colgar llamada\"\n      >\n        <i class=\"fa fa-phone\" style=\"transform: rotate(135deg)\"></i>\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".tas-floating-container{position:fixed;bottom:20px;right:20px;width:280px;height:180px;background:#000;border-radius:12px;box-shadow:0 8px 32px #00000080;z-index:9999;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;transition:opacity .3s ease,visibility .3s ease;opacity:0;visibility:hidden;pointer-events:none}.tas-floating-container.visible{opacity:1;visibility:visible;pointer-events:auto}.floating-content{position:relative;width:100%;height:100%;overflow:hidden}.pip-main-video{position:absolute;top:0;left:0;width:100%;height:100%;background:#000}.pip-main-video ::ng-deep video{width:100%;height:100%;object-fit:cover}.pip-main-video ::ng-deep .OT_subscriber,.pip-main-video ::ng-deep .OT_publisher{width:100%!important;height:100%!important}.pip-main-video ::ng-deep .OT_edge-bar-item,.pip-main-video ::ng-deep .OT_mute,.pip-main-video ::ng-deep .OT_audio-level-meter,.pip-main-video ::ng-deep .OT_bar,.pip-main-video ::ng-deep .OT_name{display:none!important}.floating-controls{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:12px;padding:6px 14px;background:rgba(0,0,0,.7);border-radius:24px;backdrop-filter:blur(8px)}.action-btn{width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s ease}.action-btn.expand-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.expand-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn.muted{background:#f39c12;color:#fff}.action-btn.mute-btn.muted:hover{background:#e67e22}.action-btn.hangup-btn{background:#dc3545;color:#fff}.action-btn.hangup-btn:hover{background:#c82333;transform:scale(1.1)}\n"] }]
+            args: [{ selector: 'tas-floating-call', template: "<div class=\"tas-floating-container\" [class.visible]=\"isVisible\">\n\t<!-- Video content area - shows main video only -->\n\t<div class=\"floating-content\">\n\t\t<!-- Main video container (subscriber if available, otherwise publisher) -->\n\t\t<div id=\"pip-main-video\" class=\"pip-main-video\"></div>\n\n\t\t<!-- Bottom controls -->\n\t\t<div class=\"floating-controls\">\n\t\t\t<button class=\"action-btn expand-btn\" (click)=\"onExpand()\" title=\"Expand to fullscreen\">\n\t\t\t\t<i class=\"fa fa-expand\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"action-btn mute-btn\" [class.muted]=\"isMuted\" (click)=\"toggleMute()\" [title]=\"isMuted ? 'Unmute microphone' : 'Mute microphone'\">\n\t\t\t\t<i class=\"fa\" [class.fa-microphone]=\"!isMuted\" [class.fa-microphone-slash]=\"isMuted\"></i>\n\t\t\t</button>\n\t\t\t<button class=\"action-btn hangup-btn\" (click)=\"onHangUp()\" title=\"Hang up call\">\n\t\t\t\t<i class=\"fa fa-phone\" style=\"transform: rotate(135deg);\"></i>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n</div>\n\n", styles: [".tas-floating-container{position:fixed;bottom:20px;right:20px;width:280px;height:180px;background:#000;border-radius:12px;box-shadow:0 8px 32px #00000080;z-index:9999;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;transition:opacity .3s ease,visibility .3s ease,box-shadow .2s ease;opacity:0;visibility:hidden;pointer-events:none}.tas-floating-container.visible{opacity:1;visibility:visible;pointer-events:auto}.tas-floating-container:hover{box-shadow:0 8px 32px #00000080,0 0 0 2px #ffffff4d}.floating-content{position:relative;width:100%;height:100%;overflow:hidden}.pip-main-video{position:absolute;top:0;left:0;width:100%;height:100%;background:#000}.pip-main-video ::ng-deep video{width:100%;height:100%;object-fit:cover}.pip-main-video ::ng-deep .OT_subscriber,.pip-main-video ::ng-deep .OT_publisher{width:100%!important;height:100%!important}.pip-main-video ::ng-deep .OT_edge-bar-item,.pip-main-video ::ng-deep .OT_mute,.pip-main-video ::ng-deep .OT_audio-level-meter,.pip-main-video ::ng-deep .OT_bar,.pip-main-video ::ng-deep .OT_name{display:none!important}.floating-controls{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:12px;padding:6px 14px;background:rgba(0,0,0,.7);border-radius:24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.tas-floating-container:hover .floating-controls{opacity:1;visibility:visible}.action-btn{width:32px;height:32px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s ease}.action-btn.expand-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.expand-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn{background:rgba(255,255,255,.2);color:#fff}.action-btn.mute-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.1)}.action-btn.mute-btn.muted{background:#f39c12;color:#fff}.action-btn.mute-btn.muted:hover{background:#e67e22}.action-btn.hangup-btn{background:#dc3545;color:#fff}.action-btn.hangup-btn:hover{background:#c82333;transform:scale(1.1)}\n"] }]
         }], ctorParameters: function () { return [{ type: TasService }]; } });
 
-class TasModule {
+class TasUellSdkModule {
     /**
-     * Use this method in your app module to configure the TAS SDK
+     * Use forRoot() to configure the TAS SDK module with required dependencies.
+     * This should only be called once in your root AppModule.
      *
      * @example
      * ```typescript
-     * TasModule.forRoot({
-     *   config: {
-     *     tokBoxApiKey: environment.tokBox,
-     *     apiBaseUrl: environment.apiUrl
-     *   },
-     *   httpClient: MyHttpClientAdapter,
-     *   userDataProvider: MyUserDataProvider
+     * import { TasUellSdkModule, TasHttpClient } from 'tas-uell-sdk';
+     *
+     * // Create an adapter that implements TasHttpClient
+     * @Injectable({ providedIn: 'root' })
+     * export class MyHttpAdapter implements TasHttpClient {
+     *   constructor(private http: HttpClient) {}
+     *   post<T>(url: string, options: { body: any; headers?: Record<string, string> }): Observable<T> {
+     *     return this.http.post<T>(url, options.body, { headers: options.headers });
+     *   }
+     * }
+     *
+     * // In your AppModule
+     * @NgModule({
+     *   imports: [
+     *     TasUellSdkModule.forRoot({
+     *       config: { tokBoxApiKey: 'YOUR_TOKBOX_API_KEY' },
+     *       httpClient: MyHttpAdapter
+     *     })
+     *   ]
      * })
+     * export class AppModule { }
      * ```
      */
-    static forRoot(moduleConfig) {
-        const providers = [
-            {
-                provide: TAS_CONFIG,
-                useValue: moduleConfig.config,
-            },
-        ];
-        if (moduleConfig.httpClient) {
-            providers.push({
-                provide: TAS_HTTP_CLIENT,
-                useClass: moduleConfig.httpClient,
-            });
-        }
-        if (moduleConfig.userDataProvider) {
-            providers.push({
-                provide: TAS_USER_DATA_PROVIDER,
-                useClass: moduleConfig.userDataProvider,
-            });
-        }
+    static forRoot(options) {
         return {
-            ngModule: TasModule,
-            providers,
+            ngModule: TasUellSdkModule,
+            providers: [
+                { provide: TAS_CONFIG, useValue: options.config },
+                { provide: TAS_HTTP_CLIENT, useClass: options.httpClient },
+                TasService
+            ]
         };
     }
 }
-TasModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TasModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasModule, declarations: [TasButtonComponent,
+TasUellSdkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasUellSdkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TasUellSdkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasUellSdkModule, declarations: [TasButtonComponent,
         TasVideocallComponent,
-        TasFloatingCallComponent], imports: [CommonModule, NgbModalModule], exports: [TasButtonComponent,
+        TasFloatingCallComponent,
+        TasWaitingRoomComponent], imports: [CommonModule], exports: [TasButtonComponent,
         TasVideocallComponent,
-        TasFloatingCallComponent] });
-TasModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasModule, imports: [[CommonModule, NgbModalModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasModule, decorators: [{
+        TasFloatingCallComponent,
+        TasWaitingRoomComponent] });
+TasUellSdkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasUellSdkModule, imports: [[
+            CommonModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasUellSdkModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         TasButtonComponent,
                         TasVideocallComponent,
                         TasFloatingCallComponent,
+                        TasWaitingRoomComponent
+                    ],
+                    imports: [
+                        CommonModule,
                     ],
-                    imports: [CommonModule, NgbModalModule],
                     exports: [
                         TasButtonComponent,
                         TasVideocallComponent,
                         TasFloatingCallComponent,
-                    ],
+                        TasWaitingRoomComponent
+                    ]
                 }]
         }] });
 
@@ -693,5 +914,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CallState, TAS_CONFIG, TAS_HTTP_CLIENT, TAS_USER_DATA_PROVIDER, TasButtonComponent, TasFloatingCallComponent, TasModule, TasService, TasVideocallComponent, ViewMode };
+export { CallState, TAS_CONFIG, TAS_HTTP_CLIENT, TasButtonComponent, TasFloatingCallComponent, TasRoomType, TasService, TasSessionType, TasUellSdkModule, TasUserRole, TasVideocallComponent, TasWaitingRoomComponent, ViewMode, WaitingRoomState };
 //# sourceMappingURL=tas-uell-sdk.mjs.map