tas-uell-sdk 0.0.5 → 0.0.6

package/fesm2015/tas-uell-sdk.mjs

@@ -1,13 +1,12 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Component, Input, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Component, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
 import { BehaviorSubject, Subscription } from 'rxjs';
-import { map, catchError, switchMap } from 'rxjs/operators';
+import { map, catchError } 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';
-import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 /**
@@ -19,11 +18,13 @@ const TAS_CONFIG = new InjectionToken('TAS_CONFIG');
  */
 const TAS_HTTP_CLIENT = new InjectionToken('TAS_HTTP_CLIENT');
 
+// Enums
 var TasRoomType;
 (function (TasRoomType) {
     TasRoomType["TAS"] = "TAS";
     TasRoomType["JM"] = "JM";
     TasRoomType["WEBINAR"] = "WEBINAR";
+    TasRoomType["WELLNESS_MANAGER"] = "WELLNESS_MANAGER";
 })(TasRoomType || (TasRoomType = {}));
 var TasSessionType;
 (function (TasSessionType) {
@@ -36,7 +37,42 @@ var TasUserRole;
     TasUserRole["USER"] = "USER";
     TasUserRole["MODERATOR"] = "MODERATOR";
 })(TasUserRole || (TasUserRole = {}));
-// Enums for TAS Service state management
+var TasBusinessRole;
+(function (TasBusinessRole) {
+    TasBusinessRole["ADMIN_MANAGER"] = "ADMIN_MANAGER";
+    TasBusinessRole["MANAGER"] = "MANAGER";
+    TasBusinessRole["BACKOFFICE"] = "BACKOFFICE";
+    TasBusinessRole["USER"] = "USER";
+})(TasBusinessRole || (TasBusinessRole = {}));
+var VideoSessionStatus;
+(function (VideoSessionStatus) {
+    VideoSessionStatus["ACTIVE"] = "ACTIVE";
+    VideoSessionStatus["INACTIVE"] = "INACTIVE";
+    VideoSessionStatus["PENDING"] = "PENDING";
+    VideoSessionStatus["SCHEDULED"] = "SCHEDULED";
+})(VideoSessionStatus || (VideoSessionStatus = {}));
+var UserStatus;
+(function (UserStatus) {
+    UserStatus["ACTIVE"] = "ACTIVE";
+    UserStatus["INACTIVE"] = "INACTIVE";
+    UserStatus["ASSIGNED"] = "ASSIGNED";
+})(UserStatus || (UserStatus = {}));
+var UserCallAction;
+(function (UserCallAction) {
+    UserCallAction["WAITING_ROOM_ENTER"] = "WAITING_ROOM_ENTER";
+    UserCallAction["WAITING_ROOM_LEAVE"] = "WAITING_ROOM_LEAVE";
+    UserCallAction["BAN"] = "BAN";
+    UserCallAction["CHANGE_STATUS"] = "CHANGE_STATUS";
+    UserCallAction["REQUEST_GEOLOCALIZATION"] = "REQUEST_GEOLOCALIZATION";
+    UserCallAction["ACTIVATE_GEOLOCATION"] = "ACTIVATE_GEOLOCATION";
+})(UserCallAction || (UserCallAction = {}));
+var RoomUserStatus;
+(function (RoomUserStatus) {
+    RoomUserStatus["ASSIGNED"] = "ASSIGNED";
+    RoomUserStatus["WAITING"] = "WAITING";
+    RoomUserStatus["JOINED"] = "JOINED";
+    RoomUserStatus["FINISHED"] = "FINISHED";
+})(RoomUserStatus || (RoomUserStatus = {}));
 var CallState;
 (function (CallState) {
     CallState["IDLE"] = "IDLE";
@@ -67,6 +103,77 @@ class TasService {
         // Session info for PiP mode restoration
         this.currentSessionId = null;
         this.currentToken = null;
+        this.STORAGE_KEY = 'tas_session_state';
+        this.DISCONNECTED_FLAG_KEY = 'tas_session_disconnected';
+        this.isFinishingSession = false;
+        // Proxy-video circuit state
+        this.proxyVideoSessionId = null;
+        this.proxyVideoToken = null;
+        this.currentBusinessRole = TasBusinessRole.USER;
+        // Waiting room and status polling
+        this.waitingRoomUsersSubject = new BehaviorSubject([]);
+        this.waitingRoomUsers$ = this.waitingRoomUsersSubject.asObservable();
+        this.ownerHasJoinedSubject = new BehaviorSubject(false);
+        this.ownerHasJoined$ = this.ownerHasJoinedSubject.asObservable();
+        // Observable that emits true when owner was present but then left
+        this.ownerHasLeftSubject = new BehaviorSubject(false);
+        this.ownerHasLeft$ = this.ownerHasLeftSubject.asObservable();
+        this.joinableSubject = new BehaviorSubject(false);
+        this.joinable$ = this.joinableSubject.asObservable();
+        this.statusPollingInterval = null;
+        this.DEFAULT_POLL_INTERVAL_MS = 30000; // Default 30s
+        this.wasOwnerPresent = false;
+        // Current call context
+        this.currentAppointmentId = null;
+        this.currentVideoCallId = null;
+        this.currentTenant = null;
+    }
+    // ... (Getters and other methods remain unchanged)
+    /**
+     * Start automatic status polling for the current session.
+     * Status is polled every intervalMs (default 30s).
+     */
+    startStatusPolling(params, intervalMs = this.DEFAULT_POLL_INTERVAL_MS) {
+        this.stopStatusPolling(); // Clear any existing polling
+        // Store context for polling
+        if (params.sessionId) {
+            this.currentSessionId = params.sessionId;
+        }
+        if (params.appointmentId) {
+            this.currentAppointmentId = params.appointmentId;
+        }
+        if (params.tenant) {
+            this.currentTenant = params.tenant;
+        }
+        console.log(`[TAS DEBUG] Starting status polling with interval ${intervalMs}ms`);
+        // Initial status fetch
+        this.fetchAndProcessStatus(params);
+        // Set up periodic polling
+        this.statusPollingInterval = setInterval(() => {
+            this.fetchAndProcessStatus(params);
+        }, intervalMs);
+    }
+    /**
+     * Stop automatic status polling.
+     */
+    stopStatusPolling() {
+        if (this.statusPollingInterval) {
+            clearInterval(this.statusPollingInterval);
+            this.statusPollingInterval = null;
+        }
+        // Do NOT reset waiting room state here, as other components might observe it
+    }
+    /**
+     * Reset polling state (waiting room, owner status, etc)
+     * Call this when completely exiting the flow
+     */
+    resetPollingState() {
+        this.stopStatusPolling();
+        this.waitingRoomUsersSubject.next([]);
+        this.ownerHasJoinedSubject.next(false);
+        this.ownerHasLeftSubject.next(false);
+        this.joinableSubject.next(false);
+        this.wasOwnerPresent = false;
     }
     // Getters
     get currentSession() {
@@ -84,18 +191,36 @@ class TasService {
     get token() {
         return this.currentToken;
     }
+    get proxySessionId() {
+        return this.proxyVideoSessionId;
+    }
+    get proxyToken() {
+        return this.proxyVideoToken;
+    }
+    get businessRole() {
+        return this.currentBusinessRole;
+    }
     get isMuted() {
         return this.isMutedSubject.getValue();
     }
     // View Mode Methods
     setViewMode(mode) {
         this.viewModeSubject.next(mode);
+        if (this.currentSessionId && this.currentToken) {
+            this.saveSessionState(this.currentSessionId, this.currentToken, mode, this.currentBusinessRole);
+        }
     }
     enterPipMode() {
         this.viewModeSubject.next(ViewMode.PIP);
+        if (this.currentSessionId && this.currentToken) {
+            this.saveSessionState(this.currentSessionId, this.currentToken, ViewMode.PIP, this.currentBusinessRole);
+        }
     }
     exitPipMode() {
         this.viewModeSubject.next(ViewMode.FULLSCREEN);
+        if (this.currentSessionId && this.currentToken) {
+            this.saveSessionState(this.currentSessionId, this.currentToken, ViewMode.FULLSCREEN, this.currentBusinessRole);
+        }
     }
     isPipMode() {
         return this.viewModeSubject.getValue() === ViewMode.PIP;
@@ -123,7 +248,17 @@ class TasService {
         }
     }
     // Session Management
-    disconnectSession() {
+    disconnectSession(clearStorage = true) {
+        console.log('[TAS DEBUG] TasService.disconnectSession called. clearStorage:', clearStorage);
+        // Call finishSession before disconnecting if we have a sessionId
+        const sessionIdToFinish = this.currentSessionId;
+        // Clear storage FIRST to prevent any race conditions where state might be saved after disconnect
+        if (clearStorage) {
+            this.clearSessionState();
+            // Set a flag to indicate this session was intentionally disconnected
+            // This prevents reconnection on page reload
+            sessionStorage.setItem(this.DISCONNECTED_FLAG_KEY, 'true');
+        }
         if (this.session) {
             this.session.disconnect();
             this.session = null;
@@ -132,50 +267,261 @@ class TasService {
         this.subscribers = [];
         this.currentSessionId = null;
         this.currentToken = null;
+        this.proxyVideoSessionId = null;
+        this.proxyVideoToken = null;
         this.isMutedSubject.next(false); // Reset mute state
         this.viewModeSubject.next(ViewMode.FULLSCREEN);
         this.callStateSubject.next(CallState.DISCONNECTED);
+        // Call proxy finish after disconnecting (only if not already finishing)
+        if (sessionIdToFinish && !this.isFinishingSession) {
+            this.isFinishingSession = true;
+            this.finishProxyVideoSession({
+                sessionId: sessionIdToFinish,
+                businessRole: this.currentBusinessRole,
+            }).subscribe({
+                next: (response) => {
+                    console.log('[TAS DEBUG] Session finished successfully:', response);
+                    this.isFinishingSession = false;
+                },
+                error: (error) => {
+                    console.error('[TAS DEBUG] Error finishing session:', error);
+                    this.isFinishingSession = false;
+                },
+            });
+        }
     }
     isCallActive() {
         return this.callStateSubject.getValue() === CallState.CONNECTED;
     }
+    // State Persistence
+    saveSessionState(sessionId, token, viewMode, businessRole = TasBusinessRole.USER) {
+        const state = {
+            sessionId,
+            token,
+            viewMode,
+            businessRole,
+        };
+        sessionStorage.setItem(this.STORAGE_KEY, JSON.stringify(state));
+    }
+    clearSessionState() {
+        sessionStorage.removeItem(this.STORAGE_KEY);
+        // Also clear the disconnected flag when clearing state
+        sessionStorage.removeItem(this.DISCONNECTED_FLAG_KEY);
+    }
+    canRestoreSession() {
+        return !!sessionStorage.getItem(this.STORAGE_KEY);
+    }
+    restoreSession(containerId) {
+        const savedState = sessionStorage.getItem(this.STORAGE_KEY);
+        if (!savedState)
+            return;
+        // Check if this session was intentionally disconnected
+        // If so, don't restore it on page reload
+        const wasDisconnected = sessionStorage.getItem(this.DISCONNECTED_FLAG_KEY);
+        if (wasDisconnected === 'true') {
+            console.log('[TAS DEBUG] Session was intentionally disconnected, skipping restore');
+            this.clearSessionState();
+            sessionStorage.removeItem(this.DISCONNECTED_FLAG_KEY);
+            return;
+        }
+        // Don't restore if we're already disconnected or if there's no active session
+        // This prevents restoring sessions that were properly disconnected
+        if (this.callStateSubject.getValue() === CallState.DISCONNECTED) {
+            console.log('[TAS DEBUG] Call state is DISCONNECTED, skipping restore');
+            this.clearSessionState();
+            return;
+        }
+        try {
+            const state = JSON.parse(savedState);
+            if (state.sessionId && state.token) {
+                console.log('[TAS DEBUG] Restoring session from storage');
+                // Force PiP mode for restoration to ensure UI consistency
+                this.viewModeSubject.next(ViewMode.PIP);
+                if (state.businessRole) {
+                    this.currentBusinessRole = state.businessRole;
+                }
+                this.connectSession(state.sessionId, state.token, containerId, // Use the same container for both since we are in PiP
+                containerId, this.currentBusinessRole)
+                    .then(() => {
+                    console.log('[TAS DEBUG] Session restored successfully');
+                    // Clear the disconnected flag if restoration succeeds
+                    sessionStorage.removeItem(this.DISCONNECTED_FLAG_KEY);
+                })
+                    .catch((err) => {
+                    console.error('[TAS DEBUG] Failed to restore session:', err);
+                    this.clearSessionState(); // Clear bad state
+                });
+            }
+        }
+        catch (e) {
+            console.error('[TAS DEBUG] Error parsing saved session state', e);
+            this.clearSessionState();
+        }
+    }
     // API Methods
-    createRoom(payload) {
-        return this.httpClient.post("v2/room", { body: payload, headers: {} }).pipe(map((response) => response), catchError((error) => {
-            console.error("TAS Service: createRoom failed", error);
+    /**
+     * PROXY circuit token: /v2/proxy/video/start
+     */
+    startProxyVideoSession(payload) {
+        return this.httpClient
+            .post('v2/proxy/video/start', {
+            body: payload,
+            headers: {},
+        })
+            .pipe(map((response) => response), catchError((error) => {
+            console.error('TAS Service: startProxyVideoSession failed', error);
+            throw error;
+        }));
+    }
+    /**
+     * PROXY circuit status: /v2/proxy/video/status
+     */
+    getProxyVideoStatus(payload) {
+        return this.httpClient
+            .post('v2/proxy/video/status', {
+            body: payload,
+            headers: {},
+        })
+            .pipe(map((response) => response), catchError((error) => {
+            console.error('TAS Service: getProxyVideoStatus failed', error);
+            throw error;
+        }));
+    }
+    /**
+     * PROXY circuit user modification: /v2/proxy/video/user/modify
+     */
+    modifyProxyVideoUser(payload) {
+        return this.httpClient
+            .patch('v2/proxy/video/user/modify', {
+            body: payload,
+            headers: {},
+        })
+            .pipe(catchError((error) => {
+            console.error('TAS Service: modifyProxyVideoUser failed', error);
             throw error;
         }));
     }
-    generateToken(payload) {
-        return this.httpClient.post("v2/room/token", { body: payload, headers: {} }).pipe(map((response) => response), catchError((error) => {
-            console.error("TAS Service: generateToken failed", error);
+    finishProxyVideoSession(payload) {
+        return this.httpClient
+            .post('v2/proxy/video/finish', {
+            body: payload,
+            headers: {},
+        })
+            .pipe(map((response) => response), catchError((error) => {
+            console.error('TAS Service: finishProxyVideoSession failed', error);
             throw error;
         }));
     }
+    /**
+     * Start automatic status polling for the current session.
+     * Status is polled every STATUS_POLL_INTERVAL_MS milliseconds.
+     */
+    /**
+     * Stop automatic status polling.
+     */
+    /**
+     * Fetch status and process the response.
+     */
+    fetchAndProcessStatus(params) {
+        this.getProxyVideoStatus(params).subscribe({
+            next: (response) => {
+                this.processStatusResponse(response);
+            },
+            error: (err) => {
+                console.error('[TAS DEBUG] Status polling error:', err);
+            },
+        });
+    }
+    /**
+     * Process status response to update waiting room users and owner join status.
+     */
+    processStatusResponse(response) {
+        const content = response.content;
+        // Update videoCallId if available
+        if (content.videoCallId) {
+            this.currentVideoCallId = content.videoCallId;
+        }
+        // Update sessionId if available
+        if (content.sessionId) {
+            this.currentSessionId = content.sessionId;
+            this.proxyVideoSessionId = content.sessionId;
+        }
+        // Update joinable status
+        this.joinableSubject.next(content.joinable);
+        // Check if owner has joined
+        const ownerJoined = this.checkIfOwnerJoined(content.users);
+        this.ownerHasJoinedSubject.next(ownerJoined);
+        // Detect if owner left: was present, now not present
+        if (this.wasOwnerPresent && !ownerJoined) {
+            console.log('[TAS DEBUG] Owner has left the session');
+            this.ownerHasLeftSubject.next(true);
+        }
+        if (ownerJoined) {
+            this.wasOwnerPresent = true;
+        }
+        // Extract waiting room users (status === WAITING)
+        const waitingUsers = content.users
+            .filter((u) => u.status === 'WAITING')
+            .map((u) => ({
+            userId: u.userId,
+            name: `User ${u.userId}`,
+            status: RoomUserStatus.WAITING,
+        }));
+        this.waitingRoomUsersSubject.next(waitingUsers);
+    }
+    /**
+     * Check if at least one OWNER has joined the call.
+     */
+    checkIfOwnerJoined(users) {
+        return users.some((u) => u.rol === TasUserRole.OWNER && u.status === 'JOINED');
+    }
+    /**
+     * Admit a user from the waiting room by changing their status.
+     */
+    admitUserFromWaitingRoom(userId, videoCallId) {
+        return this.modifyProxyVideoUser({
+            userId,
+            videoCallId,
+            action: UserCallAction.WAITING_ROOM_LEAVE,
+        });
+    }
+    // Getters for current call context
+    get appointmentId() {
+        return this.currentAppointmentId;
+    }
+    get videoCallId() {
+        return this.currentVideoCallId;
+    }
     /**
      * Connects to a TokBox video session
      */
-    connectSession(sessionId, token, publisherElement, subscriberElement) {
+    connectSession(sessionId, token, publisherElement, subscriberElement, businessRole = TasBusinessRole.USER) {
         this.callStateSubject.next(CallState.CONNECTING);
         this.currentSessionId = sessionId;
         this.currentToken = token;
+        this.currentBusinessRole = businessRole;
+        this.isFinishingSession = false; // Reset flag for new session
+        // Save initial state (defaulting to current view mode)
+        this.saveSessionState(sessionId, token, this.viewModeSubject.getValue(), businessRole);
+        // Clear the disconnected flag when starting a new connection
+        sessionStorage.removeItem(this.DISCONNECTED_FLAG_KEY);
         return new Promise((resolve, reject) => {
             if (!OT.checkSystemRequirements()) {
                 this.callStateSubject.next(CallState.ERROR);
-                reject(new Error("Browser not compatible with TokBox"));
+                reject(new Error('Browser not compatible with TokBox'));
                 return;
             }
             this.session = OT.initSession(this.config.tokBoxApiKey, sessionId);
             // Handle new streams (remote participants joining)
-            this.session.on("streamCreated", (event) => {
+            this.session.on('streamCreated', (event) => {
                 var _a;
                 const subscriber = (_a = this.session) === null || _a === void 0 ? void 0 : _a.subscribe(event.stream, subscriberElement, {
-                    insertMode: "append",
-                    width: "100%",
-                    height: "100%",
+                    insertMode: 'append',
+                    width: '100%',
+                    height: '100%',
                 }, (error) => {
                     if (error) {
-                        console.error("Error subscribing to stream:", error);
+                        console.error('Error subscribing to stream:', error);
                     }
                 });
                 if (subscriber) {
@@ -183,30 +529,49 @@ class TasService {
                 }
             });
             // Handle streams ending (remote participants leaving)
-            this.session.on("streamDestroyed", (event) => {
+            this.session.on('streamDestroyed', (event) => {
                 this.subscribers = this.subscribers.filter((sub) => { var _a; return ((_a = sub.stream) === null || _a === void 0 ? void 0 : _a.streamId) !== event.stream.streamId; });
             });
             // Handle session disconnection
-            this.session.on("sessionDisconnected", () => {
+            this.session.on('sessionDisconnected', () => {
                 this.callStateSubject.next(CallState.DISCONNECTED);
+                // Call finishSession when session is disconnected (e.g., by server)
+                // Only call if not already finishing (prevents duplicate calls)
+                const sessionIdToFinish = this.currentSessionId;
+                if (sessionIdToFinish && !this.isFinishingSession) {
+                    this.isFinishingSession = true;
+                    this.finishProxyVideoSession({
+                        sessionId: sessionIdToFinish,
+                        businessRole: this.currentBusinessRole,
+                    }).subscribe({
+                        next: (response) => {
+                            console.log('[TAS DEBUG] Session finished on disconnect event:', response);
+                            this.isFinishingSession = false;
+                        },
+                        error: (error) => {
+                            console.error('[TAS DEBUG] Error finishing session on disconnect:', error);
+                            this.isFinishingSession = false;
+                        },
+                    });
+                }
             });
             // Connect to session
             this.session.connect(token, (error) => {
                 if (error) {
-                    console.error("Error connecting to session:", error);
+                    console.error('Error connecting to session:', error);
                     this.callStateSubject.next(CallState.ERROR);
                     reject(error);
                     return;
                 }
                 // Initialize publisher (local video)
                 this.publisher = OT.initPublisher(publisherElement, {
-                    insertMode: "append",
-                    width: "100%",
-                    height: "100%",
+                    insertMode: 'append',
+                    width: '100%',
+                    height: '100%',
                 }, (err) => {
                     var _a;
                     if (err) {
-                        console.error("Error initializing publisher:", err);
+                        console.error('Error initializing publisher:', err);
                         this.callStateSubject.next(CallState.ERROR);
                         reject(err);
                         return;
@@ -214,7 +579,7 @@ class TasService {
                     // Publish to session
                     (_a = this.session) === null || _a === void 0 ? void 0 : _a.publish(this.publisher, (pubErr) => {
                         if (pubErr) {
-                            console.error("Error publishing stream:", pubErr);
+                            console.error('Error publishing stream:', pubErr);
                             this.callStateSubject.next(CallState.ERROR);
                             reject(pubErr);
                         }
@@ -275,12 +640,12 @@ class TasService {
         this.movePublisherTo('publisher-container');
     }
 }
-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: [{
+TasService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", 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.3.12", ngImport: i0, type: TasService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: "root",
+                    providedIn: 'root',
                 }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
@@ -292,14 +657,94 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     }] }];
     } });
 
+class TasAvatarComponent {
+    constructor() {
+        this.name = '';
+        this.size = 80;
+    }
+    get initials() {
+        if (!this.name)
+            return '';
+        return this.name
+            .split(' ')
+            .filter((n) => n.length > 0)
+            .map((n) => n[0])
+            .join('')
+            .toUpperCase()
+            .substring(0, 2);
+    }
+    get fontSize() {
+        return Math.round(this.size * 0.4);
+    }
+}
+TasAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TasAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasAvatarComponent, selector: "tas-avatar", inputs: { name: "name", size: "size" }, ngImport: i0, template: `
+    <div
+      class="avatar"
+      [style.width.px]="size"
+      [style.height.px]="size"
+      [style.fontSize.px]="fontSize"
+    >
+      <span class="initials">{{ initials }}</span>
+    </div>
+  `, isInline: true, styles: [".avatar{display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:#fff;color:#0072ac;font-weight:600;font-family:inherit;box-shadow:0 4px 12px #00000026}.initials{text-transform:uppercase;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasAvatarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'tas-avatar',
+                    template: `
+    <div
+      class="avatar"
+      [style.width.px]="size"
+      [style.height.px]="size"
+      [style.fontSize.px]="fontSize"
+    >
+      <span class="initials">{{ initials }}</span>
+    </div>
+  `,
+                    styles: [
+                        `
+      .avatar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background-color: #ffffff;
+        color: #0072ac;
+        font-weight: 600;
+        font-family: inherit;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      .initials {
+        text-transform: uppercase;
+        user-select: none;
+      }
+    `,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
 class TasVideocallComponent {
     constructor(activeModal, tasService) {
         this.activeModal = activeModal;
         this.tasService = tasService;
+        this.participantName = '';
+        this.tenant = '';
+        this.businessRole = TasBusinessRole.USER;
         this.isReturningFromPip = false;
         this.isPublisherSmall = true;
         this.callState = CallState.IDLE;
         this.isMuted = false;
+        this.waitingRoomUsers = [];
+        this.ownerHasJoined = false;
+        this.hasVideoStream = false;
+        this.dismissedUsers = [];
         this.subscriptions = new Subscription();
     }
     ngOnInit() {
@@ -311,6 +756,7 @@ class TasVideocallComponent {
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
+        this.tasService.resetPollingState();
         // Only disconnect if not in PiP mode (keep session alive for floating window)
         if (!this.tasService.isPipMode()) {
             this.tasService.disconnectSession();
@@ -337,25 +783,83 @@ class TasVideocallComponent {
     onDoubleClick() {
         this.toggleSwap();
     }
+    /**
+     * Check if current user can admit others (OWNER, BACKOFFICE, or MODERATOR)
+     */
+    get canAdmitUsers() {
+        return (this.businessRole === TasBusinessRole.BACKOFFICE ||
+            this.businessRole === TasBusinessRole.ADMIN_MANAGER ||
+            this.businessRole === TasBusinessRole.MANAGER);
+    }
+    /**
+     * Admit a user from the waiting room
+     */
+    admitUser(userId) {
+        if (!this.videoCallId) {
+            console.error('Cannot admit user: videoCallId not set');
+            return;
+        }
+        this.tasService
+            .modifyProxyVideoUser({
+            userId,
+            videoCallId: this.videoCallId,
+            action: UserCallAction.WAITING_ROOM_LEAVE,
+        })
+            .subscribe({
+            next: () => {
+                // Remove user from waiting list after successful admit
+                this.waitingRoomUsers = this.waitingRoomUsers.filter((u) => u.userId !== userId);
+            },
+            error: (err) => {
+                console.error('Error admitting user:', err);
+            },
+        });
+    }
+    /**
+     * Dismiss the waiting room notification for a user
+     */
+    dismissWaitingNotification(userId) {
+        this.dismissedUsers.push(userId);
+        this.waitingRoomUsers = this.waitingRoomUsers.filter((u) => u.userId !== userId);
+    }
     // Private Methods
     setupSubscriptions() {
         // Call state subscription
-        this.subscriptions.add(this.tasService.callState$.subscribe(state => {
+        this.subscriptions.add(this.tasService.callState$.subscribe((state) => {
             this.callState = state;
             if (state === CallState.DISCONNECTED) {
                 this.activeModal.close('hangup');
             }
+            // Track if we have an active video stream
+            this.hasVideoStream = state === CallState.CONNECTED;
         }));
         // View mode subscription
-        this.subscriptions.add(this.tasService.viewMode$.subscribe(mode => {
+        this.subscriptions.add(this.tasService.viewMode$.subscribe((mode) => {
             if (mode === ViewMode.PIP) {
                 this.activeModal.close('pip');
             }
         }));
         // Mute state subscription
-        this.subscriptions.add(this.tasService.isMuted$.subscribe(muted => {
+        this.subscriptions.add(this.tasService.isMuted$.subscribe((muted) => {
             this.isMuted = muted;
         }));
+        // Waiting room users subscription
+        this.subscriptions.add(this.tasService.waitingRoomUsers$.subscribe((users) => {
+            // Filter out dismissed users
+            this.waitingRoomUsers = users.filter((u) => !this.dismissedUsers.includes(u.userId));
+        }));
+        // Owner join status subscription
+        this.subscriptions.add(this.tasService.ownerHasJoined$.subscribe((joined) => {
+            this.ownerHasJoined = joined;
+        }));
+        // Owner left subscription - disconnect non-owners
+        this.subscriptions.add(this.tasService.ownerHasLeft$.subscribe((hasLeft) => {
+            if (hasLeft && !this.canAdmitUsers) { // Non-owner user
+                console.log('[TAS DEBUG] Owner left, disconnecting user');
+                this.hangUp();
+                this.activeModal.close('owner_left');
+            }
+        }));
     }
     initializeCall() {
         if (this.isReturningFromPip) {
@@ -364,9 +868,22 @@ class TasVideocallComponent {
         }
         else if (this.sessionId && this.token) {
             // New call - connect to session
-            this.tasService.connectSession(this.sessionId, this.token, 'publisher-container', 'subscriber-container').catch(err => {
+            this.tasService
+                .connectSession(this.sessionId, this.token, 'publisher-container', 'subscriber-container', this.businessRole)
+                .catch((err) => {
                 console.error('Error connecting to video call:', err);
             });
+            // Start status polling with shorter interval (5s) to detect owner leaving/location requests
+            if (this.appointmentId) {
+                this.tasService.startStatusPolling({
+                    appointmentId: this.appointmentId,
+                    tenant: this.tenant,
+                    businessRole: this.businessRole,
+                    roomType: undefined,
+                    entityId: undefined,
+                    sessionId: this.sessionId
+                }, 5000);
+            }
         }
     }
     resetVideoPositions() {
@@ -392,8 +909,8 @@ class TasVideocallComponent {
             modifiers: [
                 interact.modifiers.restrictRect({
                     restriction: 'parent',
-                    endOnly: true
-                })
+                    endOnly: true,
+                }),
             ],
             autoScroll: true,
             listeners: {
@@ -404,8 +921,8 @@ class TasVideocallComponent {
                     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 },
@@ -421,26 +938,36 @@ class TasVideocallComponent {
                     target.style.transform = `translate(${x}px, ${y}px)`;
                     target.setAttribute('data-x', String(x));
                     target.setAttribute('data-y', String(y));
-                }
+                },
             },
             modifiers: [
                 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\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: [{
+TasVideocallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasVideocallComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }], target: i0.ɵɵFactoryTarget.Component });
+TasVideocallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasVideocallComponent, selector: "tas-videocall", inputs: { sessionId: "sessionId", token: "token", appointmentId: "appointmentId", videoCallId: "videoCallId", participantName: "participantName", tenant: "tenant", businessRole: "businessRole", 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  <!-- Subscriber video (large, background) -->\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  <!-- Publisher video (small, overlay) -->\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  <!-- Centered avatar (shown when no video stream) -->\n  <div class=\"avatar-container\" *ngIf=\"!hasVideoStream\">\n    <tas-avatar [name]=\"participantName\" [size]=\"80\"></tas-avatar>\n  </div>\n\n  <!-- Controls -->\n  <div class=\"controls-container\">\n    <button\n      class=\"btn control-btn mute-btn\"\n      [class.muted]=\"isMuted\"\n      (click)=\"toggleMute()\"\n      [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n      [attr.aria-label]=\"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=\"btn control-btn swap-btn\"\n      (click)=\"toggleSwap()\"\n      title=\"Intercambiar vista\"\n      aria-label=\"Intercambiar vista\"\n    >\n      <i class=\"fa fa-video-camera\"></i>\n    </button>\n    <button\n      class=\"btn control-btn hangup-btn\"\n      (click)=\"hangUp()\"\n      title=\"Finalizar llamada\"\n      aria-label=\"Finalizar llamada\"\n    >\n      <i class=\"fa fa-phone\"></i>\n    </button>\n    <button\n      class=\"btn control-btn more-btn\"\n      title=\"M\u00E1s opciones\"\n      aria-label=\"M\u00E1s opciones\"\n    >\n      <i class=\"fa fa-ellipsis-v\"></i>\n    </button>\n  </div>\n\n  <!-- Waiting room notification (shown for OWNER/BACKOFFICE only) -->\n  <div\n    class=\"waiting-notification\"\n    *ngIf=\"waitingRoomUsers.length > 0 && canAdmitUsers\"\n    role=\"alert\"\n    aria-live=\"polite\"\n  >\n    <span class=\"waiting-text\">\n      {{ waitingRoomUsers[0].name }} est\u00E1 en la sala de espera.\n    </span>\n    <button\n      class=\"admit-btn\"\n      (click)=\"admitUser(waitingRoomUsers[0].userId)\"\n      aria-label=\"Admitir usuario\"\n    >\n      Admitir\n    </button>\n    <button\n      class=\"dismiss-btn\"\n      (click)=\"dismissWaitingNotification(waitingRoomUsers[0].userId)\"\n      aria-label=\"Cerrar notificaci\u00F3n\"\n    >\n      \u00D7\n    </button>\n  </div>\n</div>\n", styles: [".tas-videocall-container{position:relative;width:100vw;height:100vh;overflow:hidden;border-radius:8px;border:1px solid var(--Neutral-GreyLight, #dadfe9);background:linear-gradient(180deg,#e5f1f7 0%,#0072ac 100%)}.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:#0000004d;overflow:hidden}.tas-videocall-container .avatar-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;justify-content:center}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:12px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#33475bb3;padding:12px 20px;border-radius:30px;backdrop-filter:blur(8px)}.tas-videocall-container .controls-container .control-btn{width:44px;height:44px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:18px;border:none;background:var(--Primary-Uell, #1da4b1);cursor:pointer;transition:all .2s ease}.tas-videocall-container .controls-container .control-btn i{color:#fff}.tas-videocall-container .controls-container .control-btn:hover{transform:scale(1.05);filter:brightness(1.1)}.tas-videocall-container .controls-container .control-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .controls-container .control-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .hangup-btn{background:#f44336}.tas-videocall-container .controls-container .hangup-btn i{transform:rotate(135deg)}.tas-videocall-container .controls-container .hangup-btn:hover{background:#d32f2f}.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn{background:var(--Primary-Uell, #1da4b1)}.tas-videocall-container .controls-container .swap-btn:hover,.tas-videocall-container .controls-container .pip-btn:hover{background:#178e99}.tas-videocall-container .controls-container .more-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .more-btn:hover{background:rgba(255,255,255,.35)}.tas-videocall-container .waiting-notification{position:absolute;bottom:100px;left:16px;display:flex;align-items:center;gap:12px;background-color:#33475be6;padding:10px 16px;border-radius:8px;z-index:4;backdrop-filter:blur(4px);max-width:calc(100% - 32px);box-shadow:0 4px 12px #0003}.tas-videocall-container .waiting-notification .waiting-text{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tas-videocall-container .waiting-notification .admit-btn{background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:4px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;white-space:nowrap}.tas-videocall-container .waiting-notification .admit-btn:hover{background:#178e99}.tas-videocall-container .waiting-notification .admit-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .waiting-notification .dismiss-btn{background:transparent;color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;opacity:.7;transition:opacity .2s ease}.tas-videocall-container .waiting-notification .dismiss-btn:hover{opacity:1}.tas-videocall-container .waiting-notification .dismiss-btn:focus{outline:2px solid #fff;outline-offset:2px}\n"], components: [{ type: TasAvatarComponent, selector: "tas-avatar", inputs: ["name", "size"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasVideocallComponent, decorators: [{
             type: Component,
-            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"] }]
+            args: [{ selector: 'tas-videocall', template: "<div class=\"tas-videocall-container\">\n  <!-- Subscriber video (large, background) -->\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  <!-- Publisher video (small, overlay) -->\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  <!-- Centered avatar (shown when no video stream) -->\n  <div class=\"avatar-container\" *ngIf=\"!hasVideoStream\">\n    <tas-avatar [name]=\"participantName\" [size]=\"80\"></tas-avatar>\n  </div>\n\n  <!-- Controls -->\n  <div class=\"controls-container\">\n    <button\n      class=\"btn control-btn mute-btn\"\n      [class.muted]=\"isMuted\"\n      (click)=\"toggleMute()\"\n      [title]=\"isMuted ? 'Activar micr\u00F3fono' : 'Silenciar micr\u00F3fono'\"\n      [attr.aria-label]=\"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=\"btn control-btn swap-btn\"\n      (click)=\"toggleSwap()\"\n      title=\"Intercambiar vista\"\n      aria-label=\"Intercambiar vista\"\n    >\n      <i class=\"fa fa-video-camera\"></i>\n    </button>\n    <button\n      class=\"btn control-btn hangup-btn\"\n      (click)=\"hangUp()\"\n      title=\"Finalizar llamada\"\n      aria-label=\"Finalizar llamada\"\n    >\n      <i class=\"fa fa-phone\"></i>\n    </button>\n    <button\n      class=\"btn control-btn more-btn\"\n      title=\"M\u00E1s opciones\"\n      aria-label=\"M\u00E1s opciones\"\n    >\n      <i class=\"fa fa-ellipsis-v\"></i>\n    </button>\n  </div>\n\n  <!-- Waiting room notification (shown for OWNER/BACKOFFICE only) -->\n  <div\n    class=\"waiting-notification\"\n    *ngIf=\"waitingRoomUsers.length > 0 && canAdmitUsers\"\n    role=\"alert\"\n    aria-live=\"polite\"\n  >\n    <span class=\"waiting-text\">\n      {{ waitingRoomUsers[0].name }} est\u00E1 en la sala de espera.\n    </span>\n    <button\n      class=\"admit-btn\"\n      (click)=\"admitUser(waitingRoomUsers[0].userId)\"\n      aria-label=\"Admitir usuario\"\n    >\n      Admitir\n    </button>\n    <button\n      class=\"dismiss-btn\"\n      (click)=\"dismissWaitingNotification(waitingRoomUsers[0].userId)\"\n      aria-label=\"Cerrar notificaci\u00F3n\"\n    >\n      \u00D7\n    </button>\n  </div>\n</div>\n", styles: [".tas-videocall-container{position:relative;width:100vw;height:100vh;overflow:hidden;border-radius:8px;border:1px solid var(--Neutral-GreyLight, #dadfe9);background:linear-gradient(180deg,#e5f1f7 0%,#0072ac 100%)}.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:#0000004d;overflow:hidden}.tas-videocall-container .avatar-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;justify-content:center}.tas-videocall-container .controls-container{display:flex;flex-direction:row;gap:12px;position:absolute;bottom:30px;left:50%;transform:translate(-50%);z-index:3;background-color:#33475bb3;padding:12px 20px;border-radius:30px;backdrop-filter:blur(8px)}.tas-videocall-container .controls-container .control-btn{width:44px;height:44px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:18px;border:none;background:var(--Primary-Uell, #1da4b1);cursor:pointer;transition:all .2s ease}.tas-videocall-container .controls-container .control-btn i{color:#fff}.tas-videocall-container .controls-container .control-btn:hover{transform:scale(1.05);filter:brightness(1.1)}.tas-videocall-container .controls-container .control-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .controls-container .control-btn.muted{background:#f39c12}.tas-videocall-container .controls-container .hangup-btn{background:#f44336}.tas-videocall-container .controls-container .hangup-btn i{transform:rotate(135deg)}.tas-videocall-container .controls-container .hangup-btn:hover{background:#d32f2f}.tas-videocall-container .controls-container .swap-btn,.tas-videocall-container .controls-container .pip-btn{background:var(--Primary-Uell, #1da4b1)}.tas-videocall-container .controls-container .swap-btn:hover,.tas-videocall-container .controls-container .pip-btn:hover{background:#178e99}.tas-videocall-container .controls-container .more-btn{background:rgba(255,255,255,.2)}.tas-videocall-container .controls-container .more-btn:hover{background:rgba(255,255,255,.35)}.tas-videocall-container .waiting-notification{position:absolute;bottom:100px;left:16px;display:flex;align-items:center;gap:12px;background-color:#33475be6;padding:10px 16px;border-radius:8px;z-index:4;backdrop-filter:blur(4px);max-width:calc(100% - 32px);box-shadow:0 4px 12px #0003}.tas-videocall-container .waiting-notification .waiting-text{color:#fff;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tas-videocall-container .waiting-notification .admit-btn{background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:4px;padding:6px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;white-space:nowrap}.tas-videocall-container .waiting-notification .admit-btn:hover{background:#178e99}.tas-videocall-container .waiting-notification .admit-btn:focus{outline:2px solid #fff;outline-offset:2px}.tas-videocall-container .waiting-notification .dismiss-btn{background:transparent;color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer;padding:0 4px;opacity:.7;transition:opacity .2s ease}.tas-videocall-container .waiting-notification .dismiss-btn:hover{opacity:1}.tas-videocall-container .waiting-notification .dismiss-btn:focus{outline:2px solid #fff;outline-offset:2px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }]; }, propDecorators: { sessionId: [{
                 type: Input
             }], token: [{
                 type: Input
+            }], appointmentId: [{
+                type: Input
+            }], videoCallId: [{
+                type: Input
+            }], participantName: [{
+                type: Input
+            }], tenant: [{
+                type: Input
+            }], businessRole: [{
+                type: Input
             }], isReturningFromPip: [{
                 type: Input
             }], publisherContainer: [{
@@ -453,151 +980,195 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
 
 var WaitingRoomState;
 (function (WaitingRoomState) {
-    WaitingRoomState["IDLE"] = "IDLE";
-    WaitingRoomState["CREATING_ROOM"] = "CREATING_ROOM";
-    WaitingRoomState["GETTING_TOKEN"] = "GETTING_TOKEN";
+    WaitingRoomState["CHECKING_STATUS"] = "CHECKING_STATUS";
+    WaitingRoomState["WAITING_FOR_OWNER"] = "WAITING_FOR_OWNER";
     WaitingRoomState["READY"] = "READY";
+    WaitingRoomState["GETTING_TOKEN"] = "GETTING_TOKEN";
     WaitingRoomState["ERROR"] = "ERROR";
 })(WaitingRoomState || (WaitingRoomState = {}));
 class TasWaitingRoomComponent {
-    constructor(activeModal, tasService, modalService) {
+    constructor(activeModal, tasService, modalService, cdr) {
         this.activeModal = activeModal;
         this.tasService = tasService;
         this.modalService = modalService;
-        // Room configuration inputs
-        this.appointmentId = 1;
-        this.product = 'uell';
-        this.tenantId = '';
-        this.regularUserIds = [];
-        this.moderatorUserIds = [];
-        /** Optional: If provided, skips room creation and goes directly to getting a token */
-        this.existingSessionId = '';
+        this.cdr = cdr;
+        // Status endpoint params
+        this.roomType = TasRoomType.TAS;
+        this.businessRole = TasBusinessRole.USER;
         // Component state
-        this.state = WaitingRoomState.IDLE;
+        this.state = WaitingRoomState.CHECKING_STATUS;
         this.WaitingRoomState = WaitingRoomState; // Expose enum to template
         this.errorMessage = '';
-        /** Whether we have an existing session (passed via input) */
-        this.hasExistingSession = false;
-        /** UI toggle: show "Join Existing" input vs "Create New" */
-        this.showJoinExistingUI = false;
-        /** Manual session ID input by user */
-        this.manualSessionId = '';
-        /** Track if we're joining an existing session (for UI display) */
-        this.isJoiningExisting = false;
-        // Session data
-        this.sessionId = '';
+        // Session data from status response
+        this.resolvedSessionId = '';
+        this.resolvedAppointmentId = null;
         this.token = '';
-        this.users = [];
+        this.videoCallId = null;
+        // Subscriptions
         this.subscriptions = new Subscription();
         this.videoCallModalRef = null;
     }
+    /** Whether current user is an owner */
+    get isOwner() {
+        var _a;
+        return ((_a = this.currentUser) === null || _a === void 0 ? void 0 : _a.role) === TasUserRole.OWNER;
+    }
     ngOnInit() {
-        this.buildUsersArray();
-        this.setupViewModeSubscription();
-        // Check if we have an existing session passed via input
-        if (this.existingSessionId && this.existingSessionId.trim() !== '') {
-            this.hasExistingSession = true;
-            this.sessionId = this.existingSessionId;
-            this.isJoiningExisting = true;
-        }
+        console.log('[TAS DEBUG] TasWaitingRoomComponent.ngOnInit');
+        this.checkStatus();
     }
     ngOnDestroy() {
+        console.log('[TAS DEBUG] TasWaitingRoomComponent.ngOnDestroy');
         this.subscriptions.unsubscribe();
+        this.tasService.stopStatusPolling();
     }
     /**
-     * Creates the room and fetches the token (new session flow)
+     * Check status to get session info
      */
-    createRoom() {
-        var _a;
-        if (!this.tenantId || !((_a = this.currentUser) === null || _a === void 0 ? void 0 : _a.name)) {
-            this.state = WaitingRoomState.ERROR;
-            this.errorMessage = 'Missing configuration data (tenant or user)';
-            return;
-        }
-        this.isJoiningExisting = false;
-        this.state = WaitingRoomState.CREATING_ROOM;
+    checkStatus() {
+        console.log('[TAS DEBUG] checkStatus called with:', {
+            roomType: this.roomType,
+            entityId: this.entityId,
+            tenant: this.tenant,
+            businessRole: this.businessRole,
+            currentUser: this.currentUser,
+        });
+        this.state = WaitingRoomState.CHECKING_STATUS;
         this.errorMessage = '';
-        const body = {
-            roomType: TasRoomType.TAS,
-            type: TasSessionType.SPONTANEOUS,
-            tenant: this.tenantId,
-            appointmentId: this.appointmentId,
-            users: this.users,
-            product: this.product
+        const statusParams = {
+            roomType: this.roomType,
+            entityId: this.entityId,
+            tenant: this.tenant,
+            businessRole: this.businessRole,
         };
-        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;
+        console.log('[TAS DEBUG] Calling getProxyVideoStatus...');
+        this.subscriptions.add(this.tasService.getProxyVideoStatus(statusParams).subscribe({
+            next: (response) => {
+                const content = response.content;
+                // Store session info from response
+                this.resolvedSessionId = content.sessionId;
+                this.resolvedAppointmentId = content.appointmentId;
+                this.videoCallId = content.videoCallId;
+                console.log('[TAS DEBUG] Status response:', content);
+                // Start polling for status updates
+                this.tasService.startStatusPolling(statusParams);
+                // Subscribe to joinable status
+                this.subscriptions.add(this.tasService.joinable$.subscribe((joinable) => {
+                    this.handleJoinableChange(joinable);
+                }));
             },
             error: (err) => {
-                console.error('Error creating room or getting token:', err);
+                console.error('[TAS DEBUG] Status check failed:', err);
                 this.state = WaitingRoomState.ERROR;
-                this.errorMessage = 'Error creating room. Please try again.';
-            }
+                this.errorMessage = 'Error checking session status. Please try again.';
+            },
         }));
     }
     /**
-     * Join existing room with manually entered session ID
+     * Handle changes to joinable status
      */
-    joinExistingWithManualId() {
-        if (!this.manualSessionId || this.manualSessionId.trim() === '') {
-            this.state = WaitingRoomState.ERROR;
-            this.errorMessage = 'Please enter a valid Session ID';
+    handleJoinableChange(joinable) {
+        console.log('[TAS DEBUG] handleJoinableChange called', {
+            joinable,
+            currentState: this.state,
+            isOwner: this.isOwner,
+            isBackoffice: this.isBackoffice,
+            resolvedSessionId: this.resolvedSessionId,
+        });
+        // Don't update state if already getting token, ready, or in error
+        if (this.state === WaitingRoomState.GETTING_TOKEN ||
+            this.state === WaitingRoomState.READY ||
+            this.state === WaitingRoomState.ERROR) {
+            console.log('[TAS DEBUG] Skipping state update - already in:', this.state);
             return;
         }
-        this.sessionId = this.manualSessionId.trim();
-        this.isJoiningExisting = true;
-        this.getTokenForExistingSession();
+        if (this.isOwner || this.isBackoffice) {
+            console.log('[TAS DEBUG] User is owner/backoffice, calling getTokenForOwner');
+            // Owner/Backoffice: call /start to get token first, then show join button
+            if (this.state === WaitingRoomState.CHECKING_STATUS) {
+                this.getTokenForOwner();
+            }
+        }
+        else {
+            // Non-owner: wait until joinable is true
+            if (joinable) {
+                console.log('[TAS DEBUG] Non-owner: joinable is true, getting token');
+                this.getTokenForOwner(); // Also get token when joinable
+            }
+            else {
+                console.log('[TAS DEBUG] Non-owner: waiting for owner');
+                this.state = WaitingRoomState.WAITING_FOR_OWNER;
+                this.cdr.detectChanges();
+            }
+        }
     }
     /**
-     * Gets a token for an existing session (existing session flow)
+     * Check if user has owner/backoffice role
      */
-    getTokenForExistingSession() {
-        var _a;
-        if (!this.sessionId || !((_a = this.currentUser) === null || _a === void 0 ? void 0 : _a.name)) {
+    get isBackoffice() {
+        return (this.businessRole === TasBusinessRole.BACKOFFICE ||
+            this.businessRole === TasBusinessRole.ADMIN_MANAGER ||
+            this.businessRole === TasBusinessRole.MANAGER);
+    }
+    /**
+     * Get token for owner/backoffice - call /start endpoint
+     */
+    getTokenForOwner() {
+        if (!this.resolvedSessionId) {
             this.state = WaitingRoomState.ERROR;
-            this.errorMessage = 'Missing session ID or user data';
+            this.errorMessage = 'Session ID not available';
+            this.tasService.stopStatusPolling();
+            this.cdr.detectChanges();
             return;
         }
-        this.isJoiningExisting = true;
         this.state = WaitingRoomState.GETTING_TOKEN;
         this.errorMessage = '';
-        this.subscriptions.add(this.tasService.generateToken({
-            sessionId: this.sessionId,
+        console.log('[TAS DEBUG] Calling /start for session:', this.resolvedSessionId);
+        this.subscriptions.add(this.tasService
+            .startProxyVideoSession({
+            sessionId: this.resolvedSessionId,
             name: this.currentUser.name,
             lastname: this.currentUser.lastname,
-            roleVC: this.currentUser.role
-        }).subscribe({
+        })
+            .subscribe({
             next: (tokenResponse) => {
+                var _a;
+                console.log('[TAS DEBUG] Token response:', tokenResponse);
+                // Handle case where HTTP adapter returns error in next instead of error handler
+                if (!((_a = tokenResponse === null || tokenResponse === void 0 ? void 0 : tokenResponse.content) === null || _a === void 0 ? void 0 : _a.token)) {
+                    console.error('[TAS DEBUG] Invalid token response:', tokenResponse);
+                    this.state = WaitingRoomState.ERROR;
+                    this.errorMessage = (tokenResponse === null || tokenResponse === void 0 ? void 0 : tokenResponse.message) || 'Error al iniciar la sesión. Respuesta inválida.';
+                    this.tasService.stopStatusPolling();
+                    this.cdr.detectChanges();
+                    return;
+                }
+                console.log('[TAS DEBUG] Token obtained successfully');
                 this.token = tokenResponse.content.token;
                 this.state = WaitingRoomState.READY;
+                this.cdr.detectChanges();
             },
             error: (err) => {
-                console.error('Error getting token:', err);
+                var _a;
+                console.error('[TAS DEBUG] /start request failed:', err);
                 this.state = WaitingRoomState.ERROR;
-                this.errorMessage = 'Error getting session token. Please check the Session ID and try again.';
-            }
+                this.errorMessage = ((_a = err === null || err === void 0 ? void 0 : err.error) === null || _a === void 0 ? void 0 : _a.message) || (err === null || err === void 0 ? void 0 : err.message) || 'Error al iniciar la sesión. Por favor, intente nuevamente.';
+                this.tasService.stopStatusPolling();
+                console.log('[TAS DEBUG] State set to ERROR, errorMessage:', this.errorMessage);
+                this.cdr.detectChanges();
+            },
         }));
     }
     /**
-     * Joins the video call session
+     * Join the session - token already obtained
      */
     joinSession() {
-        if (!this.sessionId || !this.token) {
-            this.errorMessage = 'Cannot join session. Incomplete data.';
+        if (!this.resolvedSessionId || !this.token) {
+            this.errorMessage = 'Session not ready';
             return;
         }
         // Close waiting room and open video call
+        this.tasService.stopStatusPolling();
         this.activeModal.close('joining');
         this.openVideoCallModal();
     }
@@ -605,86 +1176,53 @@ class TasWaitingRoomComponent {
      * Closes the waiting room
      */
     cancel() {
+        this.tasService.stopStatusPolling();
         this.activeModal.dismiss('cancel');
     }
     /**
      * Retry after an error
      */
     retry() {
-        this.state = WaitingRoomState.IDLE;
+        this.state = WaitingRoomState.CHECKING_STATUS;
         this.errorMessage = '';
         this.token = '';
-        this.isJoiningExisting = false;
-        // Only reset sessionId if we don't have an existing one from input
-        if (!this.hasExistingSession) {
-            this.sessionId = '';
-        }
-    }
-    // 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 => {
-            // Re-open video call modal when returning from PiP mode
-            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);
-                }
-            }
-        }));
+        this.checkStatus();
     }
-    openVideoCallModal(isReturningFromPip = false) {
+    openVideoCallModal() {
         this.videoCallModalRef = this.modalService.open(TasVideocallComponent, {
             size: 'xl',
             windowClass: 'tas-video-modal',
             backdrop: 'static',
-            keyboard: false
+            keyboard: false,
+        });
+        this.videoCallModalRef.componentInstance.sessionId = this.resolvedSessionId;
+        this.videoCallModalRef.componentInstance.token = this.token;
+        this.videoCallModalRef.componentInstance.appointmentId = this.resolvedAppointmentId;
+        this.videoCallModalRef.componentInstance.videoCallId = this.videoCallId;
+        this.videoCallModalRef.componentInstance.tenant = this.tenant;
+        this.videoCallModalRef.componentInstance.businessRole = this.businessRole;
+        this.videoCallModalRef.componentInstance.isReturningFromPip = false;
+        this.videoCallModalRef.result.then(() => {
+            this.videoCallModalRef = null;
+        }, () => {
+            this.videoCallModalRef = null;
         });
-        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", existingSessionId: "existingSessionId" }, 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 - Show options -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.IDLE\">\n\t\t\t\n\t\t\t<!-- Tab switcher (only if no existingSessionId was passed) -->\n\t\t\t<div class=\"mode-tabs\" *ngIf=\"!hasExistingSession\">\n\t\t\t\t<button \n\t\t\t\t\ttype=\"button\" \n\t\t\t\t\tclass=\"mode-tab\" \n\t\t\t\t\t[class.active]=\"!showJoinExistingUI\"\n\t\t\t\t\t(click)=\"showJoinExistingUI = false\">\n\t\t\t\t\t<i class=\"fa fa-plus-circle\"></i>\n\t\t\t\t\tCreate New\n\t\t\t\t</button>\n\t\t\t\t<button \n\t\t\t\t\ttype=\"button\" \n\t\t\t\t\tclass=\"mode-tab\" \n\t\t\t\t\t[class.active]=\"showJoinExistingUI\"\n\t\t\t\t\t(click)=\"showJoinExistingUI = true\">\n\t\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\t\tJoin Existing\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<!-- Create New Room UI -->\n\t\t\t<div class=\"mode-content\" *ngIf=\"!showJoinExistingUI && !hasExistingSession\">\n\t\t\t\t<div class=\"state-icon idle\">\n\t\t\t\t\t<i class=\"fa fa-plus-circle\"></i>\n\t\t\t\t</div>\n\t\t\t\t<p class=\"state-message\">\n\t\t\t\t\tCreate a new video call room\n\t\t\t\t</p>\n\t\t\t\t<p class=\"state-submessage\">\n\t\t\t\t\tStart a new session for this appointment\n\t\t\t\t</p>\n\t\t\t\t<button \n\t\t\t\t\ttype=\"button\" \n\t\t\t\t\tclass=\"btn action-btn create-btn\"\n\t\t\t\t\t(click)=\"createRoom()\">\n\t\t\t\t\t<i class=\"fa fa-plus\"></i>\n\t\t\t\t\tCreate Room\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<!-- Join Existing Room UI (manual input) -->\n\t\t\t<div class=\"mode-content\" *ngIf=\"showJoinExistingUI && !hasExistingSession\">\n\t\t\t\t<div class=\"state-icon idle\">\n\t\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\t</div>\n\t\t\t\t<p class=\"state-message\">\n\t\t\t\t\tJoin an existing room\n\t\t\t\t</p>\n\t\t\t\t<p class=\"state-submessage\">\n\t\t\t\t\tEnter the session ID to join\n\t\t\t\t</p>\n\t\t\t\t<div class=\"session-input-container\">\n\t\t\t\t\t<input \n\t\t\t\t\t\ttype=\"text\" \n\t\t\t\t\t\tclass=\"session-input\"\n\t\t\t\t\t\t[(ngModel)]=\"manualSessionId\"\n\t\t\t\t\t\tplaceholder=\"Enter Session ID\"\n\t\t\t\t\t\t(keyup.enter)=\"joinExistingWithManualId()\">\n\t\t\t\t\t<button \n\t\t\t\t\t\ttype=\"button\" \n\t\t\t\t\t\tclass=\"btn action-btn create-btn\"\n\t\t\t\t\t\t[disabled]=\"!manualSessionId || manualSessionId.trim() === ''\"\n\t\t\t\t\t\t(click)=\"joinExistingWithManualId()\">\n\t\t\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\t\t\tJoin Room\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<!-- Join Existing Room UI (pre-filled session ID) -->\n\t\t\t<div class=\"mode-content\" *ngIf=\"hasExistingSession\">\n\t\t\t\t<div class=\"state-icon idle\">\n\t\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\t</div>\n\t\t\t\t<p class=\"state-message\">\n\t\t\t\t\tJoin existing video call room\n\t\t\t\t</p>\n\t\t\t\t<p class=\"state-submessage\">\n\t\t\t\t\tPress the button to get access\n\t\t\t\t</p>\n\t\t\t\t<button \n\t\t\t\t\ttype=\"button\" \n\t\t\t\t\tclass=\"btn action-btn create-btn\"\n\t\t\t\t\t(click)=\"getTokenForExistingSession()\">\n\t\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\t\tJoin Room\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- CREATING_ROOM State (only for new sessions) -->\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 - New Session -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN && !isJoiningExisting\">\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<!-- GETTING_TOKEN State - Joining Existing Session -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN && isJoiningExisting\">\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\tGetting room access...\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\">Connecting</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 - New Session -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY && !isJoiningExisting\">\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<!-- READY State - Joining Existing Session -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY && isJoiningExisting\">\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\tReady to join!\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\">Connected</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", 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:400px;width:100%}.mode-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:24px;padding:4px;background:#f8f9fa;border-radius:8px}.mode-tab{flex:1;padding:10px 16px;font-size:13px;font-weight:600;border:none;border-radius:6px;background:transparent;color:#6c757d;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.mode-tab i{font-size:14px}.mode-tab:hover{color:#212529}.mode-tab.active{background:#ffffff;color:#1da4b1;box-shadow:0 2px 8px #00000014}.mode-content{animation:fadeIn .3s ease}.session-input-container{display:flex;flex-direction:column;gap:16px;margin-top:8px}.session-input{width:100%;padding:14px 16px;font-size:14px;border:2px solid #e9ecef;border-radius:8px;background:#ffffff;color:#212529;transition:all .2s ease;text-align:center;font-family:Monaco,Consolas,monospace;letter-spacing:.5px}.session-input::placeholder{color:#6c757d;font-family:inherit;letter-spacing:normal}.session-input:focus{outline:none;border-color:#1da4b1;box-shadow:0 0 0 3px #1da4b126}.session-input:hover:not(:focus){border-color:#6c757d}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.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"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasWaitingRoomComponent, decorators: [{
+TasWaitingRoomComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasWaitingRoomComponent, deps: [{ token: i1.NgbActiveModal }, { token: TasService }, { token: i1.NgbModal }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TasWaitingRoomComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasWaitingRoomComponent, selector: "tas-waiting-room", inputs: { roomType: "roomType", entityId: "entityId", tenant: "tenant", businessRole: "businessRole", currentUser: "currentUser" }, ngImport: i0, template: "<div class=\"tas-waiting-room\">\n  <!-- Header -->\n  <div class=\"waiting-room-header\">\n    <h2 class=\"header-title\">Iniciar turno</h2>\n    <button type=\"button\" class=\"close-btn\" (click)=\"cancel()\" aria-label=\"Close\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"waiting-room-content\">\n    <!-- CHECKING_STATUS State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.CHECKING_STATUS\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Verificando estado de la sesi\u00F3n...</p>\n    </div>\n\n    <!-- WAITING_FOR_OWNER State (Non-owner waiting) -->\n    <div class=\"state-container waiting-for-owner\" *ngIf=\"state === WaitingRoomState.WAITING_FOR_OWNER\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message waiting-title\">Medicina laboral te va a admitir en unos instantes...</p>\n      <p class=\"state-submessage\">Por favor, permanec\u00E9 en esta pantalla hasta que inicie la consulta.</p>\n    </div>\n\n    <!-- READY State (Owner can join) -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY\">\n      <div class=\"state-icon ready\">\n        <i class=\"fa fa-check-circle\"></i>\n      </div>\n      <p class=\"state-message success\">\u00A1La sala est\u00E1 lista!</p>\n      <p class=\"state-submessage\">Pod\u00E9s unirte a la videollamada cuando quieras</p>\n      <button type=\"button\" class=\"btn action-btn join-btn\" (click)=\"joinSession()\">\n        <i class=\"fa fa-sign-in\"></i>\n        Unirse a la llamada\n      </button>\n    </div>\n\n    <!-- GETTING_TOKEN State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Conectando...</p>\n    </div>\n\n    <!-- ERROR State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.ERROR\">\n      <div class=\"state-icon error\">\n        <i class=\"fa fa-exclamation-triangle\"></i>\n      </div>\n      <p class=\"state-message error\">Ocurri\u00F3 un error</p>\n      <p class=\"error-details\" *ngIf=\"errorMessage\">\n        {{ errorMessage }}\n      </p>\n      <button type=\"button\" class=\"btn action-btn retry-btn\" (click)=\"retry()\">\n        <i class=\"fa fa-refresh\"></i>\n        Reintentar\n      </button>\n    </div>\n  </div>\n</div>\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:20px 40px;border-bottom:1px solid #e9ecef;display:flex;align-items:center;justify-content:space-between}.waiting-room-header .header-title{margin:0;font-size:18px;font-weight:600;line-height:24px;color:#212529}.waiting-room-header .close-btn{width:32px;height:32px;border:none;background:transparent;border-radius:4px;color:#6c757d;cursor:pointer;transition:all .2s ease;font-size:20px;display:flex;align-items:center;justify-content:center}.waiting-room-header .close-btn:hover{background:#f8f9fa;color:#212529}.waiting-title{font-size:16px;font-weight:600;color:#212529;margin-bottom:8px}.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:400px;width:100%}.mode-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:24px;padding:4px;background:#f8f9fa;border-radius:8px}.mode-tab{flex:1;padding:10px 16px;font-size:13px;font-weight:600;border:none;border-radius:6px;background:transparent;color:#6c757d;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.mode-tab i{font-size:14px}.mode-tab:hover{color:#212529}.mode-tab.active{background:#ffffff;color:#1da4b1;box-shadow:0 2px 8px #00000014}.mode-content{animation:fadeIn .3s ease}.session-input-container{display:flex;flex-direction:column;gap:16px;margin-top:8px}.session-input{width:100%;padding:14px 16px;font-size:14px;border:2px solid #e9ecef;border-radius:8px;background:#ffffff;color:#212529;transition:all .2s ease;text-align:center;font-family:Monaco,Consolas,monospace;letter-spacing:.5px}.session-input::placeholder{color:#6c757d;font-family:inherit;letter-spacing:normal}.session-input:focus{outline:none;border-color:#1da4b1;box-shadow:0 0 0 3px #1da4b126}.session-input:hover:not(:focus){border-color:#6c757d}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.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.3.12", 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 - Show options -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.IDLE\">\n\t\t\t\n\t\t\t<!-- Tab switcher (only if no existingSessionId was passed) -->\n\t\t\t<div class=\"mode-tabs\" *ngIf=\"!hasExistingSession\">\n\t\t\t\t<button \n\t\t\t\t\ttype=\"button\" \n\t\t\t\t\tclass=\"mode-tab\" \n\t\t\t\t\t[class.active]=\"!showJoinExistingUI\"\n\t\t\t\t\t(click)=\"showJoinExistingUI = false\">\n\t\t\t\t\t<i class=\"fa fa-plus-circle\"></i>\n\t\t\t\t\tCreate New\n\t\t\t\t</button>\n\t\t\t\t<button \n\t\t\t\t\ttype=\"button\" \n\t\t\t\t\tclass=\"mode-tab\" \n\t\t\t\t\t[class.active]=\"showJoinExistingUI\"\n\t\t\t\t\t(click)=\"showJoinExistingUI = true\">\n\t\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\t\tJoin Existing\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<!-- Create New Room UI -->\n\t\t\t<div class=\"mode-content\" *ngIf=\"!showJoinExistingUI && !hasExistingSession\">\n\t\t\t\t<div class=\"state-icon idle\">\n\t\t\t\t\t<i class=\"fa fa-plus-circle\"></i>\n\t\t\t\t</div>\n\t\t\t\t<p class=\"state-message\">\n\t\t\t\t\tCreate a new video call room\n\t\t\t\t</p>\n\t\t\t\t<p class=\"state-submessage\">\n\t\t\t\t\tStart a new session for this appointment\n\t\t\t\t</p>\n\t\t\t\t<button \n\t\t\t\t\ttype=\"button\" \n\t\t\t\t\tclass=\"btn action-btn create-btn\"\n\t\t\t\t\t(click)=\"createRoom()\">\n\t\t\t\t\t<i class=\"fa fa-plus\"></i>\n\t\t\t\t\tCreate Room\n\t\t\t\t</button>\n\t\t\t</div>\n\n\t\t\t<!-- Join Existing Room UI (manual input) -->\n\t\t\t<div class=\"mode-content\" *ngIf=\"showJoinExistingUI && !hasExistingSession\">\n\t\t\t\t<div class=\"state-icon idle\">\n\t\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\t</div>\n\t\t\t\t<p class=\"state-message\">\n\t\t\t\t\tJoin an existing room\n\t\t\t\t</p>\n\t\t\t\t<p class=\"state-submessage\">\n\t\t\t\t\tEnter the session ID to join\n\t\t\t\t</p>\n\t\t\t\t<div class=\"session-input-container\">\n\t\t\t\t\t<input \n\t\t\t\t\t\ttype=\"text\" \n\t\t\t\t\t\tclass=\"session-input\"\n\t\t\t\t\t\t[(ngModel)]=\"manualSessionId\"\n\t\t\t\t\t\tplaceholder=\"Enter Session ID\"\n\t\t\t\t\t\t(keyup.enter)=\"joinExistingWithManualId()\">\n\t\t\t\t\t<button \n\t\t\t\t\t\ttype=\"button\" \n\t\t\t\t\t\tclass=\"btn action-btn create-btn\"\n\t\t\t\t\t\t[disabled]=\"!manualSessionId || manualSessionId.trim() === ''\"\n\t\t\t\t\t\t(click)=\"joinExistingWithManualId()\">\n\t\t\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\t\t\tJoin Room\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<!-- Join Existing Room UI (pre-filled session ID) -->\n\t\t\t<div class=\"mode-content\" *ngIf=\"hasExistingSession\">\n\t\t\t\t<div class=\"state-icon idle\">\n\t\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\t</div>\n\t\t\t\t<p class=\"state-message\">\n\t\t\t\t\tJoin existing video call room\n\t\t\t\t</p>\n\t\t\t\t<p class=\"state-submessage\">\n\t\t\t\t\tPress the button to get access\n\t\t\t\t</p>\n\t\t\t\t<button \n\t\t\t\t\ttype=\"button\" \n\t\t\t\t\tclass=\"btn action-btn create-btn\"\n\t\t\t\t\t(click)=\"getTokenForExistingSession()\">\n\t\t\t\t\t<i class=\"fa fa-sign-in\"></i>\n\t\t\t\t\tJoin Room\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\n\t\t<!-- CREATING_ROOM State (only for new sessions) -->\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 - New Session -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN && !isJoiningExisting\">\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<!-- GETTING_TOKEN State - Joining Existing Session -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN && isJoiningExisting\">\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\tGetting room access...\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\">Connecting</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 - New Session -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY && !isJoiningExisting\">\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<!-- READY State - Joining Existing Session -->\n\t\t<div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY && isJoiningExisting\">\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\tReady to join!\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\">Connected</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", 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:400px;width:100%}.mode-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:24px;padding:4px;background:#f8f9fa;border-radius:8px}.mode-tab{flex:1;padding:10px 16px;font-size:13px;font-weight:600;border:none;border-radius:6px;background:transparent;color:#6c757d;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.mode-tab i{font-size:14px}.mode-tab:hover{color:#212529}.mode-tab.active{background:#ffffff;color:#1da4b1;box-shadow:0 2px 8px #00000014}.mode-content{animation:fadeIn .3s ease}.session-input-container{display:flex;flex-direction:column;gap:16px;margin-top:8px}.session-input{width:100%;padding:14px 16px;font-size:14px;border:2px solid #e9ecef;border-radius:8px;background:#ffffff;color:#212529;transition:all .2s ease;text-align:center;font-family:Monaco,Consolas,monospace;letter-spacing:.5px}.session-input::placeholder{color:#6c757d;font-family:inherit;letter-spacing:normal}.session-input:focus{outline:none;border-color:#1da4b1;box-shadow:0 0 0 3px #1da4b126}.session-input:hover:not(:focus){border-color:#6c757d}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.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: [{
+            args: [{ selector: 'tas-waiting-room', template: "<div class=\"tas-waiting-room\">\n  <!-- Header -->\n  <div class=\"waiting-room-header\">\n    <h2 class=\"header-title\">Iniciar turno</h2>\n    <button type=\"button\" class=\"close-btn\" (click)=\"cancel()\" aria-label=\"Close\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n\n  <!-- Content -->\n  <div class=\"waiting-room-content\">\n    <!-- CHECKING_STATUS State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.CHECKING_STATUS\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Verificando estado de la sesi\u00F3n...</p>\n    </div>\n\n    <!-- WAITING_FOR_OWNER State (Non-owner waiting) -->\n    <div class=\"state-container waiting-for-owner\" *ngIf=\"state === WaitingRoomState.WAITING_FOR_OWNER\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message waiting-title\">Medicina laboral te va a admitir en unos instantes...</p>\n      <p class=\"state-submessage\">Por favor, permanec\u00E9 en esta pantalla hasta que inicie la consulta.</p>\n    </div>\n\n    <!-- READY State (Owner can join) -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.READY\">\n      <div class=\"state-icon ready\">\n        <i class=\"fa fa-check-circle\"></i>\n      </div>\n      <p class=\"state-message success\">\u00A1La sala est\u00E1 lista!</p>\n      <p class=\"state-submessage\">Pod\u00E9s unirte a la videollamada cuando quieras</p>\n      <button type=\"button\" class=\"btn action-btn join-btn\" (click)=\"joinSession()\">\n        <i class=\"fa fa-sign-in\"></i>\n        Unirse a la llamada\n      </button>\n    </div>\n\n    <!-- GETTING_TOKEN State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.GETTING_TOKEN\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Conectando...</p>\n    </div>\n\n    <!-- ERROR State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.ERROR\">\n      <div class=\"state-icon error\">\n        <i class=\"fa fa-exclamation-triangle\"></i>\n      </div>\n      <p class=\"state-message error\">Ocurri\u00F3 un error</p>\n      <p class=\"error-details\" *ngIf=\"errorMessage\">\n        {{ errorMessage }}\n      </p>\n      <button type=\"button\" class=\"btn action-btn retry-btn\" (click)=\"retry()\">\n        <i class=\"fa fa-refresh\"></i>\n        Reintentar\n      </button>\n    </div>\n  </div>\n</div>\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:20px 40px;border-bottom:1px solid #e9ecef;display:flex;align-items:center;justify-content:space-between}.waiting-room-header .header-title{margin:0;font-size:18px;font-weight:600;line-height:24px;color:#212529}.waiting-room-header .close-btn{width:32px;height:32px;border:none;background:transparent;border-radius:4px;color:#6c757d;cursor:pointer;transition:all .2s ease;font-size:20px;display:flex;align-items:center;justify-content:center}.waiting-room-header .close-btn:hover{background:#f8f9fa;color:#212529}.waiting-title{font-size:16px;font-weight:600;color:#212529;margin-bottom:8px}.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:400px;width:100%}.mode-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:24px;padding:4px;background:#f8f9fa;border-radius:8px}.mode-tab{flex:1;padding:10px 16px;font-size:13px;font-weight:600;border:none;border-radius:6px;background:transparent;color:#6c757d;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.mode-tab i{font-size:14px}.mode-tab:hover{color:#212529}.mode-tab.active{background:#ffffff;color:#1da4b1;box-shadow:0 2px 8px #00000014}.mode-content{animation:fadeIn .3s ease}.session-input-container{display:flex;flex-direction:column;gap:16px;margin-top:8px}.session-input{width:100%;padding:14px 16px;font-size:14px;border:2px solid #e9ecef;border-radius:8px;background:#ffffff;color:#212529;transition:all .2s ease;text-align:center;font-family:Monaco,Consolas,monospace;letter-spacing:.5px}.session-input::placeholder{color:#6c757d;font-family:inherit;letter-spacing:normal}.session-input:focus{outline:none;border-color:#1da4b1;box-shadow:0 0 0 3px #1da4b126}.session-input:hover:not(:focus){border-color:#6c757d}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.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 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { roomType: [{
                 type: Input
-            }], ownerUserIds: [{
+            }], entityId: [{
                 type: Input
-            }], regularUserIds: [{
+            }], tenant: [{
                 type: Input
-            }], moderatorUserIds: [{
+            }], businessRole: [{
                 type: Input
-            }], existingSessionId: [{
+            }], currentUser: [{
                 type: Input
             }] } });
 
@@ -692,117 +1230,214 @@ class TasButtonComponent {
     constructor(modalService, tasService) {
         this.modalService = modalService;
         this.tasService = tasService;
-        this.appointmentId = 1;
-        this.product = "uell";
-        this.tenantId = "";
-        this.regularUserIds = [];
-        this.moderatorUserIds = [];
-        /** Optional: If provided, skips room creation and goes directly to getting a token */
-        this.existingSessionId = "";
-        /** Optional: Custom button text */
-        this.buttonText = "Iniciar TAS";
+        // Status endpoint params
+        this.roomType = TasRoomType.TAS;
+        this.businessRole = TasBusinessRole.USER;
         this.isLoading = false;
+        this.buttonText = 'Iniciar TAS';
+        // Status check state
+        this.isCheckingStatus = false;
+        this.isStatusError = false;
+        this.statusErrorMessage = '';
         this.subscriptions = new Subscription();
         this.currentModalRef = null;
         this.videoCallModalRef = null;
+        this.statusPollingInterval = null;
+        this.STATUS_POLL_INTERVAL_MS = 30000; // 30 seconds
     }
-    ngOnInit() {
-        if (!this.ownerUserIds || this.ownerUserIds.length !== 1) {
-            throw new Error('tas-btn: ownerUserIds input is required and must contain exactly one user');
+    /** Whether user is backoffice (or admin/manager) */
+    get isBackoffice() {
+        return (this.businessRole === TasBusinessRole.BACKOFFICE ||
+            this.businessRole === TasBusinessRole.ADMIN_MANAGER ||
+            this.businessRole === TasBusinessRole.MANAGER);
+    }
+    /** Whether the button should be visible */
+    get isVisible() {
+        // Backoffice: always show (disabled if error)
+        // Other roles: hide if status error
+        if (this.isBackoffice) {
+            return true;
         }
+        return !this.isStatusError;
+    }
+    /** Whether the button should be disabled */
+    get isDisabled() {
+        return this.isLoading || this.isCheckingStatus || this.isStatusError;
+    }
+    ngOnInit() {
         // 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);
-                }
-            }
+        this.subscriptions.add(this.tasService.viewMode$.subscribe((mode) => {
             // When entering PiP, clear the videoCallModalRef since modal will close
             if (mode === ViewMode.PIP) {
                 this.videoCallModalRef = null;
             }
         }));
+        // Start status checking
+        this.startStatusPolling();
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
+        this.stopStatusPolling();
+    }
+    /**
+     * Start polling status every 30 seconds
+     */
+    startStatusPolling() {
+        // Initial status check
+        this.checkStatus();
+        // Set up periodic polling
+        this.statusPollingInterval = setInterval(() => {
+            this.checkStatus();
+        }, this.STATUS_POLL_INTERVAL_MS);
+    }
+    /**
+     * Stop status polling
+     */
+    stopStatusPolling() {
+        if (this.statusPollingInterval) {
+            clearInterval(this.statusPollingInterval);
+            this.statusPollingInterval = null;
+        }
+    }
+    /**
+     * Check status endpoint to determine if button should be enabled
+     */
+    checkStatus() {
+        // Skip if required inputs are not available
+        if (!this.tenant || !this.entityId) {
+            console.log('[TAS DEBUG] checkStatus skipped - missing required inputs');
+            return;
+        }
+        this.isCheckingStatus = true;
+        this.statusErrorMessage = '';
+        console.log('[TAS DEBUG] checkStatus called with:', {
+            roomType: this.roomType,
+            entityId: this.entityId,
+            tenant: this.tenant,
+            businessRole: this.businessRole,
+        });
+        this.subscriptions.add(this.tasService.getProxyVideoStatus({
+            roomType: this.roomType,
+            entityId: this.entityId,
+            tenant: this.tenant,
+            businessRole: this.businessRole,
+        }).subscribe({
+            next: (response) => {
+                var _a;
+                // Check if response is actually an error (some HTTP adapters return errors in next)
+                // Also check for undefined/null or missing content
+                const isErrorResponse = !response ||
+                    !response.content ||
+                    (response === null || response === void 0 ? void 0 : response.ok) === false ||
+                    (response === null || response === void 0 ? void 0 : response.status) >= 400 ||
+                    (response === null || response === void 0 ? void 0 : response.error) ||
+                    (response === null || response === void 0 ? void 0 : response.name) === 'HttpErrorResponse';
+                if (isErrorResponse) {
+                    console.error('[TAS DEBUG] Status check returned error in response:', response);
+                    this.isCheckingStatus = false;
+                    this.isStatusError = true;
+                    this.statusErrorMessage = ((_a = response === null || response === void 0 ? void 0 : response.error) === null || _a === void 0 ? void 0 : _a.message) || (response === null || response === void 0 ? void 0 : response.message) || 'Error checking status';
+                }
+                else {
+                    console.log('[TAS DEBUG] Status check successful:', response);
+                    this.isCheckingStatus = false;
+                    this.isStatusError = false;
+                    this.statusErrorMessage = '';
+                }
+            },
+            error: (err) => {
+                var _a;
+                console.error('[TAS DEBUG] Status check failed:', err);
+                this.isCheckingStatus = false;
+                this.isStatusError = true;
+                this.statusErrorMessage = ((_a = err === null || err === void 0 ? void 0 : err.error) === null || _a === void 0 ? void 0 : _a.message) || (err === null || err === void 0 ? void 0 : err.message) || 'Error checking status';
+            },
+        }));
     }
     onClick() {
         var _a;
-        if (!this.tenantId || !((_a = this.currentUser) === null || _a === void 0 ? void 0 : _a.name)) {
-            console.error("Tenant ID or current user not available");
+        console.log('[TAS DEBUG] onClick called');
+        console.log('[TAS DEBUG] Inputs:', {
+            tenant: this.tenant,
+            entityId: this.entityId,
+            roomType: this.roomType,
+            businessRole: this.businessRole,
+            currentUser: this.currentUser,
+        });
+        if (!this.tenant || !((_a = this.currentUser) === null || _a === void 0 ? void 0 : _a.name)) {
+            console.error('[TAS DEBUG] Tenant or current user not available');
+            return;
+        }
+        if (!this.entityId) {
+            console.error('[TAS DEBUG] entityId is required');
             return;
         }
+        console.log('[TAS DEBUG] Validation passed, opening waiting room modal');
         this.openWaitingRoomModal();
     }
     openWaitingRoomModal() {
         this.currentModalRef = this.modalService.open(TasWaitingRoomComponent, {
-            size: "lg",
-            windowClass: "tas-waiting-room-modal",
-            backdrop: "static",
+            size: 'lg',
+            windowClass: 'tas-waiting-room-modal',
+            backdrop: 'static',
             keyboard: false,
-            centered: true
+            centered: true,
         });
         // 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.roomType = this.roomType;
+        this.currentModalRef.componentInstance.entityId = this.entityId;
+        this.currentModalRef.componentInstance.tenant = this.tenant;
+        this.currentModalRef.componentInstance.businessRole = this.businessRole;
         this.currentModalRef.componentInstance.currentUser = this.currentUser;
-        this.currentModalRef.componentInstance.ownerUserIds = this.ownerUserIds;
-        this.currentModalRef.componentInstance.regularUserIds = this.regularUserIds;
-        this.currentModalRef.componentInstance.moderatorUserIds = this.moderatorUserIds;
-        // Pass existing session ID if provided
-        this.currentModalRef.componentInstance.existingSessionId = this.existingSessionId;
-        this.currentModalRef.result.then(() => { this.currentModalRef = null; }, () => { this.currentModalRef = null; });
+        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
+            keyboard: false,
         });
         this.videoCallModalRef.componentInstance.sessionId = this.tasService.sessionId;
         this.videoCallModalRef.componentInstance.token = this.tasService.token;
+        this.videoCallModalRef.componentInstance.businessRole = this.businessRole;
         this.videoCallModalRef.componentInstance.isReturningFromPip = isReturningFromPip;
-        this.videoCallModalRef.result.then(() => { this.videoCallModalRef = null; }, () => { this.videoCallModalRef = null; });
+        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: 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", existingSessionId: "existingSessionId", buttonText: "buttonText" }, 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\"> {{ buttonText }}</span>\n\t<span *ngIf=\"isLoading\"> Processing...</span>\n</button>\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: [{
+TasButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasButtonComponent, deps: [{ token: i1.NgbModal }, { token: TasService }], target: i0.ɵɵFactoryTarget.Component });
+TasButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasButtonComponent, selector: "tas-btn", inputs: { roomType: "roomType", entityId: "entityId", tenant: "tenant", businessRole: "businessRole", currentUser: "currentUser" }, ngImport: i0, template: "<button\n  *ngIf=\"isVisible\"\n  type=\"button\"\n  class=\"btn btn-primary tas-btn\"\n  (click)=\"onClick()\"\n  [disabled]=\"isDisabled\"\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\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.3.12", ngImport: i0, type: TasButtonComponent, decorators: [{
             type: Component,
-            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\"> {{ buttonText }}</span>\n\t<span *ngIf=\"isLoading\"> Processing...</span>\n</button>\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: [{
+            args: [{ selector: 'tas-btn', template: "<button\n  *ngIf=\"isVisible\"\n  type=\"button\"\n  class=\"btn btn-primary tas-btn\"\n  (click)=\"onClick()\"\n  [disabled]=\"isDisabled\"\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\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: { roomType: [{
                 type: Input
-            }], tenantId: [{
-                type: Input
-            }], currentUser: [{
+            }], entityId: [{
                 type: Input
-            }], ownerUserIds: [{
+            }], tenant: [{
                 type: Input
-            }], regularUserIds: [{
+            }], businessRole: [{
                 type: Input
-            }], moderatorUserIds: [{
-                type: Input
-            }], existingSessionId: [{
-                type: Input
-            }], buttonText: [{
+            }], currentUser: [{
                 type: Input
             }] } });
 
 class TasFloatingCallComponent {
-    constructor(tasService) {
+    constructor(tasService, modalService) {
         this.tasService = tasService;
+        this.modalService = modalService;
         this.isVisible = false;
         this.isMuted = false;
         this.subscriptions = new Subscription();
+        this.videoCallModalRef = null;
         // Margin from screen edges (in pixels)
         this.PIP_MARGIN = 20;
     }
@@ -815,6 +1450,7 @@ class TasFloatingCallComponent {
     }
     // Public Methods
     onExpand() {
+        this.openVideoCallModal(true);
         this.tasService.exitPipMode();
     }
     onHangUp() {
@@ -826,23 +1462,45 @@ class TasFloatingCallComponent {
     // Private Methods
     setupSubscriptions() {
         // Call state subscription
-        this.subscriptions.add(this.tasService.callState$.subscribe(state => {
+        this.subscriptions.add(this.tasService.callState$.subscribe((state) => {
             if (state === CallState.DISCONNECTED) {
                 this.isVisible = false;
             }
         }));
         // View mode subscription
-        this.subscriptions.add(this.tasService.viewMode$.subscribe(mode => {
+        this.subscriptions.add(this.tasService.viewMode$.subscribe((mode) => {
             this.isVisible = mode === ViewMode.PIP && this.tasService.isCallActive();
             if (this.isVisible) {
                 setTimeout(() => this.initInteract(), 100);
+                // Clear modal ref if we enter PiP mode (modal closes itself)
+                this.videoCallModalRef = null;
             }
         }));
         // Mute state subscription
-        this.subscriptions.add(this.tasService.isMuted$.subscribe(muted => {
+        this.subscriptions.add(this.tasService.isMuted$.subscribe((muted) => {
             this.isMuted = muted;
         }));
     }
+    openVideoCallModal(isReturningFromPip = false) {
+        if (this.videoCallModalRef) {
+            return;
+        }
+        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.businessRole = this.tasService.businessRole;
+        this.videoCallModalRef.componentInstance.isReturningFromPip = isReturningFromPip;
+        this.videoCallModalRef.result.then(() => {
+            this.videoCallModalRef = null;
+        }, () => {
+            this.videoCallModalRef = null;
+        });
+    }
     initInteract() {
         interact('.tas-floating-container').unset();
         // Create restriction area with margin
@@ -853,17 +1511,15 @@ class TasFloatingCallComponent {
                     left: margin,
                     top: margin,
                     right: window.innerWidth - margin,
-                    bottom: window.innerHeight - margin
+                    bottom: window.innerHeight - margin,
                 };
             },
-            elementRect: { left: 0, right: 1, top: 0, bottom: 1 }
+            elementRect: { left: 0, right: 1, top: 0, bottom: 1 },
         };
         interact('.tas-floating-container')
             .draggable({
             inertia: true,
-            modifiers: [
-                interact.modifiers.restrict(restrictToBodyWithMargin)
-            ],
+            modifiers: [interact.modifiers.restrict(restrictToBodyWithMargin)],
             autoScroll: false,
             listeners: {
                 move: (event) => {
@@ -873,8 +1529,8 @@ class TasFloatingCallComponent {
                     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 },
@@ -892,7 +1548,7 @@ class TasFloatingCallComponent {
                     target.style.transform = `translate(${x}px, ${y}px)`;
                     target.setAttribute('data-x', String(x));
                     target.setAttribute('data-y', String(y));
-                }
+                },
             },
             modifiers: [
                 interact.modifiers.restrictEdges({
@@ -900,25 +1556,25 @@ class TasFloatingCallComponent {
                         left: margin,
                         top: margin,
                         right: window.innerWidth - margin,
-                        bottom: window.innerHeight - margin
-                    }
+                        bottom: window.innerHeight - margin,
+                    },
                 }),
                 interact.modifiers.restrictSize({
                     min: { width: 200, height: 130 },
-                    max: { width: 500, height: 350 }
+                    max: { width: 500, height: 350 },
                 }),
-                interact.modifiers.aspectRatio({ ratio: 'preserve' })
+                interact.modifiers.aspectRatio({ ratio: 'preserve' }),
             ],
-            inertia: true
+            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\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: [{
+TasFloatingCallComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasFloatingCallComponent, deps: [{ token: TasService }, { token: i1.NgbModal }], target: i0.ɵɵFactoryTarget.Component });
+TasFloatingCallComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasFloatingCallComponent, selector: "tas-floating-call", ngImport: i0, template: "<div class=\"tas-floating-container\" [class.visible]=\"isVisible\">\n  <!-- Video content area - shows main video only -->\n  <div class=\"floating-content\">\n    <!-- Main video container (subscriber if available, otherwise publisher) -->\n    <div id=\"pip-main-video\" class=\"pip-main-video\"></div>\n\n    <!-- Bottom controls -->\n    <div class=\"floating-controls\">\n      <button\n        class=\"action-btn expand-btn\"\n        (click)=\"onExpand()\"\n        title=\"Expand to fullscreen\"\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 ? 'Unmute microphone' : 'Mute microphone'\"\n      >\n        <i\n          class=\"fa\"\n          [class.fa-microphone]=\"!isMuted\"\n          [class.fa-microphone-slash]=\"isMuted\"\n        ></i>\n      </button>\n      <button class=\"action-btn hangup-btn\" (click)=\"onHangUp()\" title=\"Hang up call\">\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,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;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.3.12", ngImport: i0, type: TasFloatingCallComponent, decorators: [{
             type: Component,
-            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 }]; } });
+            args: [{ selector: 'tas-floating-call', template: "<div class=\"tas-floating-container\" [class.visible]=\"isVisible\">\n  <!-- Video content area - shows main video only -->\n  <div class=\"floating-content\">\n    <!-- Main video container (subscriber if available, otherwise publisher) -->\n    <div id=\"pip-main-video\" class=\"pip-main-video\"></div>\n\n    <!-- Bottom controls -->\n    <div class=\"floating-controls\">\n      <button\n        class=\"action-btn expand-btn\"\n        (click)=\"onExpand()\"\n        title=\"Expand to fullscreen\"\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 ? 'Unmute microphone' : 'Mute microphone'\"\n      >\n        <i\n          class=\"fa\"\n          [class.fa-microphone]=\"!isMuted\"\n          [class.fa-microphone-slash]=\"isMuted\"\n        ></i>\n      </button>\n      <button class=\"action-btn hangup-btn\" (click)=\"onHangUp()\" title=\"Hang up call\">\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,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;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 }, { type: i1.NgbModal }]; } });
 
 class TasUellSdkModule {
     /**
@@ -956,43 +1612,40 @@ class TasUellSdkModule {
             providers: [
                 { provide: TAS_CONFIG, useValue: options.config },
                 { provide: TAS_HTTP_CLIENT, useClass: options.httpClient },
-                TasService
-            ]
+                TasService,
+            ],
         };
     }
 }
-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,
+TasUellSdkModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasUellSdkModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TasUellSdkModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasUellSdkModule, declarations: [TasButtonComponent,
         TasVideocallComponent,
         TasFloatingCallComponent,
-        TasWaitingRoomComponent], imports: [CommonModule,
-        FormsModule], exports: [TasButtonComponent,
+        TasWaitingRoomComponent,
+        TasAvatarComponent], imports: [CommonModule, FormsModule], exports: [TasButtonComponent,
         TasVideocallComponent,
         TasFloatingCallComponent,
-        TasWaitingRoomComponent] });
-TasUellSdkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasUellSdkModule, imports: [[
-            CommonModule,
-            FormsModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: TasUellSdkModule, decorators: [{
+        TasWaitingRoomComponent,
+        TasAvatarComponent] });
+TasUellSdkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasUellSdkModule, imports: [[CommonModule, FormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasUellSdkModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         TasButtonComponent,
                         TasVideocallComponent,
                         TasFloatingCallComponent,
-                        TasWaitingRoomComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
+                        TasWaitingRoomComponent,
+                        TasAvatarComponent,
                     ],
+                    imports: [CommonModule, FormsModule],
                     exports: [
                         TasButtonComponent,
                         TasVideocallComponent,
                         TasFloatingCallComponent,
-                        TasWaitingRoomComponent
-                    ]
+                        TasWaitingRoomComponent,
+                        TasAvatarComponent,
+                    ],
                 }]
         }] });
 
@@ -1004,5 +1657,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, TasButtonComponent, TasFloatingCallComponent, TasRoomType, TasService, TasSessionType, TasUellSdkModule, TasUserRole, TasVideocallComponent, TasWaitingRoomComponent, ViewMode, WaitingRoomState };
+export { CallState, RoomUserStatus, TAS_CONFIG, TAS_HTTP_CLIENT, TasAvatarComponent, TasBusinessRole, TasButtonComponent, TasFloatingCallComponent, TasRoomType, TasService, TasSessionType, TasUellSdkModule, TasUserRole, TasVideocallComponent, TasWaitingRoomComponent, UserCallAction, UserStatus, VideoSessionStatus, ViewMode, WaitingRoomState };
 //# sourceMappingURL=tas-uell-sdk.mjs.map