tas-uell-sdk 0.0.5 → 0.1.0

package/fesm2020/tas-uell-sdk.mjs

@@ -1,13 +1,13 @@
 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, EventEmitter, Output, 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 { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 /**
@@ -19,11 +19,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 +38,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";
@@ -50,6 +87,12 @@ var ViewMode;
     ViewMode["FULLSCREEN"] = "FULLSCREEN";
     ViewMode["PIP"] = "PIP";
 })(ViewMode || (ViewMode = {}));
+// Appointment types
+var AppointmentStatus;
+(function (AppointmentStatus) {
+    AppointmentStatus["CONFIRMED"] = "CONFIRMED";
+    AppointmentStatus["CANCELLED"] = "CANCELLED";
+})(AppointmentStatus || (AppointmentStatus = {}));
 
 class TasService {
     constructor(httpClient, config) {
@@ -67,6 +110,86 @@ 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();
+        // Observable for when backend requests geolocation activation
+        this.activateGeoSubject = new BehaviorSubject(false);
+        this.activateGeo$ = this.activateGeoSubject.asObservable();
+        // Observable for when geo request is active (owner waiting for user response)
+        this.geoRequestActiveSubject = new BehaviorSubject(false);
+        this.geoRequestActive$ = this.geoRequestActiveSubject.asObservable();
+        // Observable for when all geo has been granted
+        this.allGeoGrantedSubject = new BehaviorSubject(false);
+        this.allGeoGranted$ = this.allGeoGrantedSubject.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 +207,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;
@@ -122,7 +263,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;
@@ -131,49 +282,288 @@ 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;
         }));
     }
-    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);
+    /**
+     * 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;
+        }));
+    }
+    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;
+        }));
+    }
+    /**
+     * Get user appointments within a date range.
+     * @param params Date range for querying appointments
+     * @returns Observable of appointment array
+     */
+    getAppointments(params) {
+        return this.httpClient
+            .get(`v2/proxy/appointment/agendas/user/appointments?fromDate=${params.fromDate}&toDate=${params.toDate}`, { headers: {} })
+            .pipe(catchError((error) => {
+            console.error('TAS Service: getAppointments 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);
+        // Update activateGeo status
+        if (content.activateGeo !== undefined) {
+            console.log('[TAS DEBUG] activateGeo received:', content.activateGeo);
+            this.activateGeoSubject.next(content.activateGeo);
+        }
+        // Update geoRequestActive status (owner waiting for user geo response)
+        if (content.geoRequestActive !== undefined) {
+            console.log('[TAS DEBUG] geoRequestActive received:', content.geoRequestActive);
+            this.geoRequestActiveSubject.next(content.geoRequestActive);
+        }
+        // Update allGeoGranted status (all users responded with geo)
+        if (content.allGeoGranted !== undefined) {
+            console.log('[TAS DEBUG] allGeoGranted received:', content.allGeoGranted);
+            this.allGeoGrantedSubject.next(content.allGeoGranted);
+        }
+        // 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) => {
                 const subscriber = this.session?.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) {
@@ -181,29 +571,48 @@ class TasService {
                 }
             });
             // Handle streams ending (remote participants leaving)
-            this.session.on("streamDestroyed", (event) => {
+            this.session.on('streamDestroyed', (event) => {
                 this.subscribers = this.subscribers.filter((sub) => sub.stream?.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) => {
                     if (err) {
-                        console.error("Error initializing publisher:", err);
+                        console.error('Error initializing publisher:', err);
                         this.callStateSubject.next(CallState.ERROR);
                         reject(err);
                         return;
@@ -211,7 +620,7 @@ class TasService {
                     // Publish to session
                     this.session?.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);
                         }
@@ -271,12 +680,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: [{
                     type: Inject,
@@ -286,14 +695,155 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                     args: [TAS_CONFIG]
                 }] }]; } });
 
+class GeolocationService {
+    constructor() {
+        this.cachedPosition = null;
+    }
+    /**
+     * Request current geolocation position using Web Geolocation API.
+     * Works in both browser and Capacitor environments.
+     * @returns Promise with {latitude, longitude} or null if denied/unavailable
+     */
+    async getCurrentPosition() {
+        if (!navigator.geolocation) {
+            console.warn('[GeolocationService] Geolocation not supported');
+            return null;
+        }
+        return new Promise((resolve) => {
+            navigator.geolocation.getCurrentPosition((position) => {
+                const geoPosition = {
+                    latitude: position.coords.latitude,
+                    longitude: position.coords.longitude,
+                };
+                this.cachedPosition = geoPosition;
+                resolve(geoPosition);
+            }, (error) => {
+                console.warn('[GeolocationService] Geolocation error:', error.message);
+                resolve(null);
+            }, {
+                enableHighAccuracy: false,
+                timeout: 30000,
+                maximumAge: 60000,
+            });
+        });
+    }
+    /**
+     * Get the cached position from the last successful request.
+     */
+    getCachedPosition() {
+        return this.cachedPosition;
+    }
+    /**
+     * Clear the cached position.
+     */
+    clearCache() {
+        this.cachedPosition = null;
+    }
+}
+GeolocationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GeolocationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+GeolocationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GeolocationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GeolocationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+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) {
+    constructor(activeModal, tasService, geolocationService) {
         this.activeModal = activeModal;
         this.tasService = tasService;
+        this.geolocationService = geolocationService;
+        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.showLocationPanel = true; // Show by default for owners, will be updated based on user's location status
+        this.userHasLocation = false; // Tracks if the user has shared their location
+        this.geoLocationStatus = 'unknown';
+        // Geo panel states for owner
+        this.geoRequestActive = false; // Owner sent request, waiting for user
+        this.allGeoGranted = false; // All users responded with geo
         this.subscriptions = new Subscription();
     }
     ngOnInit() {
@@ -305,6 +855,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();
@@ -331,25 +882,179 @@ 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);
+    }
+    /**
+     * Close the location panel
+     */
+    closeLocationPanel() {
+        this.showLocationPanel = false;
+    }
+    /**
+     * Request the user to share their location
+     */
+    requestUserLocation() {
+        if (!this.videoCallId) {
+            console.error('Cannot request location: videoCallId not set');
+            return;
+        }
+        const body = {
+            videoCallId: this.videoCallId,
+            action: UserCallAction.REQUEST_GEOLOCALIZATION,
+        };
+        // TODO: Send location request action to backend when endpoint is ready
+        this.tasService.modifyProxyVideoUser(body).subscribe({
+            next: () => console.log('Location request sent'),
+            error: (err) => console.error('Error requesting location:', err),
+        });
+    }
     // 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');
+            }
+        }));
+        // ActivateGeo subscription - only for non-owners (users)
+        this.subscriptions.add(this.tasService.activateGeo$.subscribe((activateGeo) => {
+            if (activateGeo && !this.canAdmitUsers) {
+                console.log('[TAS DEBUG] activateGeo=true, checking geo status for user...');
+                this.handleActivateGeo();
+            }
+        }));
+        // GeoRequestActive subscription - for owners
+        this.subscriptions.add(this.tasService.geoRequestActive$.subscribe((active) => {
+            console.log('[TAS DEBUG] geoRequestActive changed:', active);
+            this.geoRequestActive = active;
+        }));
+        // AllGeoGranted subscription - for owners
+        this.subscriptions.add(this.tasService.allGeoGranted$.subscribe((granted) => {
+            console.log('[TAS DEBUG] allGeoGranted changed:', granted);
+            this.allGeoGranted = granted;
+        }));
+    }
+    /**
+     * Handle activateGeo request from backend (for non-owner users).
+     * If geo is already active, report it. If not, prompt user.
+     */
+    async handleActivateGeo() {
+        console.log('[TAS DEBUG] handleActivateGeo - current status:', this.geoLocationStatus);
+        // Check if we already have a cached position
+        const cachedPosition = this.geolocationService.getCachedPosition();
+        if (cachedPosition) {
+            console.log('[TAS DEBUG] Geolocation already active, reporting to backend:', cachedPosition);
+            this.geoLocationStatus = 'active';
+            this.reportGeoStatus(cachedPosition.latitude, cachedPosition.longitude);
+            return;
+        }
+        // Try to get position
+        console.log('[TAS DEBUG] Requesting geolocation from user...');
+        const position = await this.geolocationService.getCurrentPosition();
+        if (position) {
+            console.log('[TAS DEBUG] Geolocation obtained:', position);
+            this.geoLocationStatus = 'active';
+            this.reportGeoStatus(position.latitude, position.longitude);
+        }
+        else {
+            console.log('[TAS DEBUG] Geolocation denied or unavailable');
+            this.geoLocationStatus = 'denied';
+            // Report that geo is not available (with no coordinates)
+            this.reportGeoStatus();
+        }
+    }
+    /**
+     * Report geolocation status to backend.
+     */
+    reportGeoStatus(latitude, longitude) {
+        if (!this.videoCallId) {
+            console.error('[TAS DEBUG] Cannot report geo status: videoCallId not set');
+            return;
+        }
+        // TODO: If the permission for geo location is not granted, we should not report it to the backend
+        if (!this.geoLocationStatus) {
+            console.error('[TAS DEBUG] Cannot report geo status: geoLocationStatus not set');
+            return;
+        }
+        const body = {
+            userId: this.userId,
+            videoCallId: this.videoCallId,
+            action: UserCallAction.ACTIVATE_GEOLOCATION,
+            latitude,
+            longitude,
+        };
+        console.log('[TAS DEBUG] Reporting geo status to backend:', body);
+        this.tasService.modifyProxyVideoUser(body).subscribe({
+            next: () => console.log('[TAS DEBUG] Geo status reported successfully'),
+            error: (err) => console.error('[TAS DEBUG] Error reporting geo status:', err),
+        });
     }
     initializeCall() {
         if (this.isReturningFromPip) {
@@ -358,9 +1063,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() {
@@ -385,8 +1103,8 @@ class TasVideocallComponent {
             modifiers: [
                 interact.modifiers.restrictRect({
                     restriction: 'parent',
-                    endOnly: true
-                })
+                    endOnly: true,
+                }),
             ],
             autoScroll: true,
             listeners: {
@@ -397,8 +1115,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 },
@@ -414,26 +1132,38 @@ 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 }, { token: GeolocationService }], 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", userId: "userId", 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-wrapper\">\n  <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\n  <!-- Location panel (shown for owners when user hasn't allowed location) -->\n  <div class=\"location-panel\" *ngIf=\"showLocationPanel && canAdmitUsers\">\n    <div class=\"location-header\">\n      <i class=\"fa fa-map-marker header-icon\"></i>\n      <h3>Ubicaci\u00F3n del colaborador</h3>\n      <button class=\"close-btn\" (click)=\"closeLocationPanel()\" aria-label=\"Cerrar\">\u00D7</button>\n    </div>\n    <div class=\"location-description\">\n      <p>El colaborador tiene la ubicaci\u00F3n desactivada, solicita que la active.</p>\n      <p>Esta acci\u00F3n nos permitir\u00E1 disponibilizar algunas alertas.</p>\n    </div>\n    <div class=\"location-content\">\n      <!-- Initial state: Show verify button -->\n      <ng-container *ngIf=\"!geoRequestActive && !allGeoGranted\">\n        <button class=\"verify-location-btn\" (click)=\"requestUserLocation()\">\n          Verificar ubicaci\u00F3n\n        </button>\n      </ng-container>\n\n      <!-- Loading state: Spinner while waiting for user response -->\n      <ng-container *ngIf=\"geoRequestActive && !allGeoGranted\">\n        <div class=\"geo-loading-container\">\n          <div class=\"geo-spinner\"></div>\n          <p class=\"loading-title\">Verificando ubicaci\u00F3n...</p>\n          <p class=\"loading-subtitle\">Esto puede tardar unos segundos.</p>\n        </div>\n        <button class=\"verify-location-btn disabled\" disabled>\n          Verificar ubicaci\u00F3n\n        </button>\n      </ng-container>\n\n      <!-- Success state: Location verified -->\n      <ng-container *ngIf=\"allGeoGranted\">\n        <div class=\"geo-success-container\">\n          <div class=\"success-icon\">\n            <i class=\"fa fa-check\"></i>\n          </div>\n          <p class=\"success-title\">La ubicaci\u00F3n fue verificada</p>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"location-footer\">\n      <span class=\"footer-icon\"><i class=\"fa fa-clock-o\"></i></span>\n      <span class=\"footer-icon location-icon\"><i class=\"fa fa-map-marker\"></i></span>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100vw;height:100vh;box-sizing:border-box;padding:2rem;background:linear-gradient(281deg,rgba(29,164,177,.2) 6.96%,rgba(0,0,0,0) 70.44%),#212532}.tas-videocall-wrapper{display:flex;flex:1;gap:1rem;height:100%}.tas-videocall-container{position:relative;flex:1;height:100%;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}.location-panel{width:280px;height:100%;background:#212532;border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;color:#fff}.location-panel .location-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.location-panel .location-header h3{font-size:16px;font-weight:600;margin:0;color:#fff}.location-panel .location-header .close-btn{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;line-height:1;opacity:.7}.location-panel .location-header .close-btn:hover{opacity:1}.location-panel .location-description{font-size:14px;color:#fffc;line-height:1.5;margin-bottom:.5rem}.location-panel .location-description p{margin:0 0 .5rem}.location-panel .location-content{flex:1;display:flex;flex-direction:column;justify-content:flex-end}.location-panel .verify-location-btn{width:100%;padding:12px 24px;background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;margin-bottom:1rem}.location-panel .verify-location-btn:hover{background:#178e99}.location-panel .verify-location-btn:disabled{background:rgba(29,164,177,.5);cursor:not-allowed}.location-panel .location-footer{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.1)}.location-panel .location-footer .footer-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff;font-size:14px}.location-panel .location-footer .footer-icon.location-icon{background:var(--Primary-Uell, #1da4b1)}.location-panel .header-icon{color:#fff;font-size:16px}.location-panel .geo-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0}.location-panel .geo-loading-container .geo-spinner{width:64px;height:64px;border:4px solid rgba(29,164,177,.2);border-top-color:var(--Primary-Uell, #1da4b1);border-radius:50%;animation:geo-spin 1s linear infinite}.location-panel .geo-loading-container .loading-title{color:#fff;font-size:16px;font-weight:600;margin:1.5rem 0 .25rem}.location-panel .geo-loading-container .loading-subtitle{color:#ffffffb3;font-size:14px;margin:0}.location-panel .geo-success-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0}.location-panel .geo-success-container .success-icon{width:80px;height:80px;border-radius:50%;background:var(--Primary-Uell, #1da4b1);display:flex;align-items:center;justify-content:center;position:relative}.location-panel .geo-success-container .success-icon i{color:#fff;font-size:32px}.location-panel .geo-success-container .success-icon:before,.location-panel .geo-success-container .success-icon:after{content:\"\\2726\";position:absolute;color:#fff;font-size:10px}.location-panel .geo-success-container .success-icon:before{top:-8px;right:-4px}.location-panel .geo-success-container .success-icon:after{bottom:-4px;left:-8px}.location-panel .geo-success-container .success-title{color:#fff;font-size:16px;font-weight:600;margin:1.5rem 0 0}.location-panel .verify-location-btn.disabled{background:rgba(29,164,177,.5);cursor:not-allowed}@keyframes geo-spin{to{transform:rotate(360deg)}}\n"], components: [{ type: TasAvatarComponent, selector: "tas-avatar", inputs: ["name", "size"] }], directives: [{ type: i4.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"] }]
-        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }]; }, propDecorators: { sessionId: [{
+            args: [{ selector: 'tas-videocall', template: "<div class=\"tas-videocall-wrapper\">\n  <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\n  <!-- Location panel (shown for owners when user hasn't allowed location) -->\n  <div class=\"location-panel\" *ngIf=\"showLocationPanel && canAdmitUsers\">\n    <div class=\"location-header\">\n      <i class=\"fa fa-map-marker header-icon\"></i>\n      <h3>Ubicaci\u00F3n del colaborador</h3>\n      <button class=\"close-btn\" (click)=\"closeLocationPanel()\" aria-label=\"Cerrar\">\u00D7</button>\n    </div>\n    <div class=\"location-description\">\n      <p>El colaborador tiene la ubicaci\u00F3n desactivada, solicita que la active.</p>\n      <p>Esta acci\u00F3n nos permitir\u00E1 disponibilizar algunas alertas.</p>\n    </div>\n    <div class=\"location-content\">\n      <!-- Initial state: Show verify button -->\n      <ng-container *ngIf=\"!geoRequestActive && !allGeoGranted\">\n        <button class=\"verify-location-btn\" (click)=\"requestUserLocation()\">\n          Verificar ubicaci\u00F3n\n        </button>\n      </ng-container>\n\n      <!-- Loading state: Spinner while waiting for user response -->\n      <ng-container *ngIf=\"geoRequestActive && !allGeoGranted\">\n        <div class=\"geo-loading-container\">\n          <div class=\"geo-spinner\"></div>\n          <p class=\"loading-title\">Verificando ubicaci\u00F3n...</p>\n          <p class=\"loading-subtitle\">Esto puede tardar unos segundos.</p>\n        </div>\n        <button class=\"verify-location-btn disabled\" disabled>\n          Verificar ubicaci\u00F3n\n        </button>\n      </ng-container>\n\n      <!-- Success state: Location verified -->\n      <ng-container *ngIf=\"allGeoGranted\">\n        <div class=\"geo-success-container\">\n          <div class=\"success-icon\">\n            <i class=\"fa fa-check\"></i>\n          </div>\n          <p class=\"success-title\">La ubicaci\u00F3n fue verificada</p>\n        </div>\n      </ng-container>\n    </div>\n    <div class=\"location-footer\">\n      <span class=\"footer-icon\"><i class=\"fa fa-clock-o\"></i></span>\n      <span class=\"footer-icon location-icon\"><i class=\"fa fa-map-marker\"></i></span>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;width:100vw;height:100vh;box-sizing:border-box;padding:2rem;background:linear-gradient(281deg,rgba(29,164,177,.2) 6.96%,rgba(0,0,0,0) 70.44%),#212532}.tas-videocall-wrapper{display:flex;flex:1;gap:1rem;height:100%}.tas-videocall-container{position:relative;flex:1;height:100%;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}.location-panel{width:280px;height:100%;background:#212532;border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;color:#fff}.location-panel .location-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.location-panel .location-header h3{font-size:16px;font-weight:600;margin:0;color:#fff}.location-panel .location-header .close-btn{background:transparent;border:none;color:#fff;font-size:20px;cursor:pointer;padding:0;line-height:1;opacity:.7}.location-panel .location-header .close-btn:hover{opacity:1}.location-panel .location-description{font-size:14px;color:#fffc;line-height:1.5;margin-bottom:.5rem}.location-panel .location-description p{margin:0 0 .5rem}.location-panel .location-content{flex:1;display:flex;flex-direction:column;justify-content:flex-end}.location-panel .verify-location-btn{width:100%;padding:12px 24px;background:var(--Primary-Uell, #1da4b1);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s ease;margin-bottom:1rem}.location-panel .verify-location-btn:hover{background:#178e99}.location-panel .verify-location-btn:disabled{background:rgba(29,164,177,.5);cursor:not-allowed}.location-panel .location-footer{display:flex;justify-content:flex-end;gap:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.1)}.location-panel .location-footer .footer-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);color:#fff;font-size:14px}.location-panel .location-footer .footer-icon.location-icon{background:var(--Primary-Uell, #1da4b1)}.location-panel .header-icon{color:#fff;font-size:16px}.location-panel .geo-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0}.location-panel .geo-loading-container .geo-spinner{width:64px;height:64px;border:4px solid rgba(29,164,177,.2);border-top-color:var(--Primary-Uell, #1da4b1);border-radius:50%;animation:geo-spin 1s linear infinite}.location-panel .geo-loading-container .loading-title{color:#fff;font-size:16px;font-weight:600;margin:1.5rem 0 .25rem}.location-panel .geo-loading-container .loading-subtitle{color:#ffffffb3;font-size:14px;margin:0}.location-panel .geo-success-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0}.location-panel .geo-success-container .success-icon{width:80px;height:80px;border-radius:50%;background:var(--Primary-Uell, #1da4b1);display:flex;align-items:center;justify-content:center;position:relative}.location-panel .geo-success-container .success-icon i{color:#fff;font-size:32px}.location-panel .geo-success-container .success-icon:before,.location-panel .geo-success-container .success-icon:after{content:\"\\2726\";position:absolute;color:#fff;font-size:10px}.location-panel .geo-success-container .success-icon:before{top:-8px;right:-4px}.location-panel .geo-success-container .success-icon:after{bottom:-4px;left:-8px}.location-panel .geo-success-container .success-title{color:#fff;font-size:16px;font-weight:600;margin:1.5rem 0 0}.location-panel .verify-location-btn.disabled{background:rgba(29,164,177,.5);cursor:not-allowed}@keyframes geo-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgbActiveModal }, { type: TasService }, { type: GeolocationService }]; }, propDecorators: { sessionId: [{
                 type: Input
             }], token: [{
                 type: Input
+            }], appointmentId: [{
+                type: Input
+            }], videoCallId: [{
+                type: Input
+            }], userId: [{
+                type: Input
+            }], participantName: [{
+                type: Input
+            }], tenant: [{
+                type: Input
+            }], businessRole: [{
+                type: Input
             }], isReturningFromPip: [{
                 type: Input
             }], publisherContainer: [{
@@ -446,236 +1176,303 @@ 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_JOINABLE"] = "WAITING_FOR_JOINABLE";
     WaitingRoomState["READY"] = "READY";
+    WaitingRoomState["GETTING_TOKEN"] = "GETTING_TOKEN";
+    WaitingRoomState["JOINING"] = "JOINING";
     WaitingRoomState["ERROR"] = "ERROR";
 })(WaitingRoomState || (WaitingRoomState = {}));
 class TasWaitingRoomComponent {
-    constructor(activeModal, tasService, modalService) {
+    constructor(activeModal, tasService, geolocationService, modalService, cdr) {
         this.activeModal = activeModal;
         this.tasService = tasService;
+        this.geolocationService = geolocationService;
         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 = '';
+        this.isJoinable = false;
+        // 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;
+        // Geolocation
+        this.geoPosition = null;
+    }
+    /** Whether current user is an owner */
+    get isOwner() {
+        return this.currentUser?.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.requestMediaPermissions();
+        this.requestGeolocation();
+        this.checkStatus();
+    }
+    /**
+     * Request camera and microphone permissions.
+     */
+    async requestMediaPermissions() {
+        console.log('[TAS DEBUG] Requesting media permissions...');
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
+            // Stop tracks immediately - we just needed the permission
+            stream.getTracks().forEach(track => track.stop());
+            console.log('[TAS DEBUG] Media permissions granted');
+        }
+        catch (error) {
+            console.warn('[TAS DEBUG] Media permissions denied or unavailable:', error);
         }
     }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
+    /**
+     * Request geolocation immediately on init.
+     * Only for regular users (not owners/backoffice).
+     * If user allows, store position and send to backend.
+     */
+    async requestGeolocation() {
+        // Only request geolocation for regular users, not owners/backoffice
+        if (this.isOwner || this.isBackoffice) {
+            console.log('[TAS DEBUG] Skipping geolocation for owner/backoffice');
+            return;
+        }
+        console.log('[TAS DEBUG] Requesting geolocation...');
+        const position = await this.geolocationService.getCurrentPosition();
+        if (position) {
+            console.log('[TAS DEBUG] Geolocation obtained:', position);
+            this.geoPosition = position;
+            // Send to backend when videoCallId is available
+            this.sendGeolocationToBackend();
+        }
+        else {
+            console.log('[TAS DEBUG] Geolocation denied or unavailable');
+        }
     }
     /**
-     * Creates the room and fetches the token (new session flow)
+     * Send geolocation to backend via modify user endpoint.
+     * NOTE: Endpoint call is prepared but may not be active yet.
      */
-    createRoom() {
-        if (!this.tenantId || !this.currentUser?.name) {
-            this.state = WaitingRoomState.ERROR;
-            this.errorMessage = 'Missing configuration data (tenant or user)';
+    sendGeolocationToBackend() {
+        if (!this.geoPosition || !this.videoCallId) {
             return;
         }
-        this.isJoiningExisting = false;
-        this.state = WaitingRoomState.CREATING_ROOM;
-        this.errorMessage = '';
+        console.log('[TAS DEBUG] Sending geolocation to backend...');
         const body = {
-            roomType: TasRoomType.TAS,
-            type: TasSessionType.SPONTANEOUS,
-            tenant: this.tenantId,
-            appointmentId: this.appointmentId,
-            users: this.users,
-            product: this.product
+            userId: this.currentUser?.id,
+            videoCallId: this.videoCallId,
+            action: UserCallAction.ACTIVATE_GEOLOCATION,
+            latitude: this.geoPosition.latitude,
+            longitude: this.geoPosition.longitude,
         };
-        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;
+        this.tasService.modifyProxyVideoUser(body).subscribe({
+            next: () => console.log('[TAS DEBUG] Geolocation sent successfully'),
+            error: (err) => console.error('[TAS DEBUG] Failed to send geolocation:', err),
+        });
+    }
+    ngOnDestroy() {
+        console.log('[TAS DEBUG] TasWaitingRoomComponent.ngOnDestroy');
+        this.subscriptions.unsubscribe();
+        this.tasService.stopStatusPolling();
+    }
+    /**
+     * Check status to get session info
+     */
+    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 statusParams = {
+            roomType: this.roomType,
+            entityId: this.entityId,
+            tenant: this.tenant,
+            businessRole: this.businessRole,
+        };
+        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);
+                // Try to send geolocation now that we have videoCallId
+                this.sendGeolocationToBackend();
+                // 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,
+            resolvedSessionId: this.resolvedSessionId,
+        });
+        this.isJoinable = joinable;
+        // Don't update state if already getting token, joining, or in error
+        if (this.state === WaitingRoomState.GETTING_TOKEN ||
+            this.state === WaitingRoomState.JOINING ||
+            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();
+        // Both users and owners: show join button based on joinable
+        if (joinable) {
+            console.log('[TAS DEBUG] Joinable is true, showing join button');
+            this.state = WaitingRoomState.READY;
+        }
+        else {
+            console.log('[TAS DEBUG] Waiting for joinable...');
+            this.state = WaitingRoomState.WAITING_FOR_JOINABLE;
+        }
+        this.cdr.detectChanges();
     }
     /**
-     * Gets a token for an existing session (existing session flow)
+     * Called when user clicks the join button.
+     * Calls /start to get token then auto-joins.
      */
-    getTokenForExistingSession() {
-        if (!this.sessionId || !this.currentUser?.name) {
+    joinSession() {
+        this.startSessionAndJoin();
+    }
+    /**
+     * Check if user has owner/backoffice role
+     */
+    get isBackoffice() {
+        return (this.businessRole === TasBusinessRole.BACKOFFICE ||
+            this.businessRole === TasBusinessRole.ADMIN_MANAGER ||
+            this.businessRole === TasBusinessRole.MANAGER);
+    }
+    /**
+     * Start session and join - called when user clicks join button
+     */
+    startSessionAndJoin() {
+        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) => {
+                console.log('[TAS DEBUG] Token response:', tokenResponse);
+                // Handle case where HTTP adapter returns error in next instead of error handler
+                if (!tokenResponse?.content?.token) {
+                    console.error('[TAS DEBUG] Invalid token response:', tokenResponse);
+                    this.state = WaitingRoomState.ERROR;
+                    this.errorMessage = 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, joining session...');
                 this.token = tokenResponse.content.token;
-                this.state = WaitingRoomState.READY;
+                this.state = WaitingRoomState.JOINING;
+                this.cdr.detectChanges();
+                // Auto-join immediately
+                this.tasService.stopStatusPolling();
+                this.activeModal.close('joining');
+                this.openVideoCallModal();
             },
             error: (err) => {
-                console.error('Error getting token:', err);
+                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 = err?.error?.message || 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
-     */
-    joinSession() {
-        if (!this.sessionId || !this.token) {
-            this.errorMessage = 'Cannot join session. Incomplete data.';
-            return;
-        }
-        // Close waiting room and open video call
-        this.activeModal.close('joining');
-        this.openVideoCallModal();
-    }
     /**
      * 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 = '';
-        }
+        this.checkStatus();
     }
-    // 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);
-                }
-            }
-        }));
-    }
-    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.userId = this.currentUser?.id;
+        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: GeolocationService }, { 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_JOINABLE State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.WAITING_FOR_JOINABLE\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Esperando que la sesi\u00F3n est\u00E9 disponible...</p>\n      <p class=\"state-submessage\">Por favor, permanec\u00E9 en esta pantalla.</p>\n    </div>\n\n    <!-- READY State (Join button enabled) -->\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      <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    <!-- JOINING State (Auto-joining) -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.JOINING\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Ingresando a la llamada...</p>\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: i4.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: [{
+            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_JOINABLE State -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.WAITING_FOR_JOINABLE\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Esperando que la sesi\u00F3n est\u00E9 disponible...</p>\n      <p class=\"state-submessage\">Por favor, permanec\u00E9 en esta pantalla.</p>\n    </div>\n\n    <!-- READY State (Join button enabled) -->\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      <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    <!-- JOINING State (Auto-joining) -->\n    <div class=\"state-container\" *ngIf=\"state === WaitingRoomState.JOINING\">\n      <div class=\"state-icon loading\">\n        <div class=\"spinner\"></div>\n      </div>\n      <p class=\"state-message\">Ingresando a la llamada...</p>\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: GeolocationService }, { type: i1.NgbModal }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { roomType: [{
                 type: Input
-            }], currentUser: [{
-                type: Input
-            }], ownerUserIds: [{
+            }], entityId: [{
                 type: Input
-            }], regularUserIds: [{
+            }], tenant: [{
                 type: Input
-            }], moderatorUserIds: [{
+            }], businessRole: [{
                 type: Input
-            }], existingSessionId: [{
+            }], currentUser: [{
                 type: Input
             }] } });
 
@@ -683,116 +1480,203 @@ 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;
+        // Style customization
+        this.variant = 'default';
+        this.buttonLabel = 'Iniciar TAS';
         this.isLoading = false;
+        // Status check state
+        this.isCheckingStatus = false;
+        this.isStatusError = false;
+        this.statusErrorMessage = '';
+        this.isJoinable = false; // Tracks joinable field from status response
         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 disabled */
+    get isDisabled() {
+        return this.isLoading || this.isStatusError || !this.isJoinable;
+    }
+    /** Reason why the button is disabled (for tooltip) */
+    get disabledReason() {
+        if (this.isLoading) {
+            return '';
         }
+        if (this.isStatusError) {
+            return this.statusErrorMessage || 'Error al verificar el estado';
+        }
+        if (!this.isJoinable) {
+            return 'Todavía no es el horario de la llamada';
+        }
+        return '';
+    }
+    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) {
+            return;
+        }
+        this.isCheckingStatus = true;
+        this.statusErrorMessage = '';
+        this.subscriptions.add(this.tasService.getProxyVideoStatus({
+            roomType: this.roomType,
+            entityId: this.entityId,
+            tenant: this.tenant,
+            businessRole: this.businessRole,
+        }).subscribe({
+            next: (response) => {
+                // 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?.ok === false ||
+                    response?.status >= 400 ||
+                    response?.error ||
+                    response?.name === 'HttpErrorResponse';
+                if (isErrorResponse) {
+                    this.isCheckingStatus = false;
+                    this.isStatusError = true;
+                    this.statusErrorMessage = response?.error?.message || response?.message || 'Error checking status';
+                }
+                else {
+                    this.isCheckingStatus = false;
+                    this.isStatusError = false;
+                    this.statusErrorMessage = '';
+                    // Update joinable state from response
+                    this.isJoinable = response.content?.joinable ?? false;
+                }
+            },
+            error: (err) => {
+                this.isCheckingStatus = false;
+                this.isStatusError = true;
+                this.statusErrorMessage = err?.error?.message || err?.message || 'Error checking status';
+            },
+        }));
     }
     onClick() {
-        if (!this.tenantId || !this.currentUser?.name) {
-            console.error("Tenant ID or current user not available");
+        if (!this.tenant || !this.currentUser?.name) {
+            return;
+        }
+        if (!this.entityId) {
             return;
         }
         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", variant: "variant", buttonLabel: "buttonLabel" }, ngImport: i0, template: "<span\n  [ngbTooltip]=\"isDisabled && disabledReason ? disabledReason : null\"\n  container=\"body\"\n  placement=\"top\"\n  tooltipClass=\"tas-btn-tooltip\"\n>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary tas-btn\"\n    [class.tas-btn--teal]=\"variant === 'teal'\"\n    (click)=\"onClick()\"\n    [disabled]=\"isDisabled\"\n  >\n    <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n    <span *ngIf=\"!isLoading\">{{ buttonLabel }}</span>\n    <span *ngIf=\"isLoading\">Processing...</span>\n  </button>\n</span>\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px;display:flex;padding:6px 14px;justify-content:center;align-items:center;gap:7px;flex-shrink:0;flex-grow:0}.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}.tas-btn--teal{background-color:#0097a7!important;border-color:#0097a7!important;border-radius:24px;padding:10px 24px;font-weight:500;margin-right:0}.tas-btn--teal:hover:not(:disabled){background-color:#00838f!important;border-color:#00838f!important}\n"], directives: [{ type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "triggers", "container", "disableTooltip", "tooltipClass", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { type: i4.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: [{
+            args: [{ selector: 'tas-btn', template: "<span\n  [ngbTooltip]=\"isDisabled && disabledReason ? disabledReason : null\"\n  container=\"body\"\n  placement=\"top\"\n  tooltipClass=\"tas-btn-tooltip\"\n>\n  <button\n    type=\"button\"\n    class=\"btn btn-primary tas-btn\"\n    [class.tas-btn--teal]=\"variant === 'teal'\"\n    (click)=\"onClick()\"\n    [disabled]=\"isDisabled\"\n  >\n    <i class=\"fa fa-video-camera\" aria-hidden=\"true\" *ngIf=\"!isLoading\"></i>\n    <span *ngIf=\"!isLoading\">{{ buttonLabel }}</span>\n    <span *ngIf=\"isLoading\">Processing...</span>\n  </button>\n</span>\n", styles: [":host{display:inline-block}.tas-btn{background-color:#ee316b!important;color:#fff!important;border-color:#ee316b!important;margin-right:24px;display:flex;padding:6px 14px;justify-content:center;align-items:center;gap:7px;flex-shrink:0;flex-grow:0}.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}.tas-btn--teal{background-color:#0097a7!important;border-color:#0097a7!important;border-radius:24px;padding:10px 24px;font-weight:500;margin-right:0}.tas-btn--teal:hover:not(:disabled){background-color:#00838f!important;border-color:#00838f!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgbModal }, { type: TasService }]; }, propDecorators: { roomType: [{
                 type: Input
-            }], product: [{
-                type: Input
-            }], tenantId: [{
-                type: Input
-            }], currentUser: [{
+            }], entityId: [{
                 type: Input
-            }], ownerUserIds: [{
+            }], tenant: [{
                 type: Input
-            }], regularUserIds: [{
+            }], businessRole: [{
                 type: Input
-            }], moderatorUserIds: [{
+            }], currentUser: [{
                 type: Input
-            }], existingSessionId: [{
+            }], variant: [{
                 type: Input
-            }], buttonText: [{
+            }], buttonLabel: [{
                 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;
     }
@@ -805,6 +1689,7 @@ class TasFloatingCallComponent {
     }
     // Public Methods
     onExpand() {
+        this.openVideoCallModal(true);
         this.tasService.exitPipMode();
     }
     onHangUp() {
@@ -816,23 +1701,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
@@ -843,17 +1750,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) => {
@@ -863,8 +1768,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 },
@@ -882,7 +1787,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({
@@ -890,25 +1795,126 @@ 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 TasIncomingAppointmentComponent {
+    constructor(tasService) {
+        this.tasService = tasService;
+        // Passthrough inputs for tas-btn
+        this.roomType = TasRoomType.TAS;
+        this.businessRole = TasBusinessRole.USER;
+        this.enterCall = new EventEmitter();
+        this.appointment = null;
+        this.isLoading = true;
+        this.hasError = false;
+        this.subscriptions = new Subscription();
+    }
+    ngOnInit() {
+        this.loadAppointments();
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    loadAppointments() {
+        const today = new Date();
+        const in7Days = new Date(today);
+        in7Days.setDate(today.getDate() + 7);
+        this.subscriptions.add(this.tasService
+            .getAppointments({ fromDate: this.formatDate(today), toDate: this.formatDate(in7Days) })
+            .subscribe({
+            next: (response) => {
+                // Handle both array response and wrapped response (e.g., { content: [...] })
+                const appointments = Array.isArray(response)
+                    ? response
+                    : response?.content || [];
+                // Filter for confirmed appointments and get the first one
+                const confirmed = appointments.filter((a) => a.status === AppointmentStatus.CONFIRMED);
+                this.appointment = confirmed.length > 0 ? confirmed[0] : null;
+                this.isLoading = false;
+            },
+            error: () => {
+                this.hasError = true;
+                this.isLoading = false;
+            },
+        }));
+    }
+    onEnterCall() {
+        if (this.appointment) {
+            this.enterCall.emit(this.appointment);
+        }
+    }
+    /**
+     * Format date to Spanish format: "Lunes 8 de diciembre"
+     */
+    get formattedDate() {
+        if (!this.appointment)
+            return '';
+        const [year, month, day] = this.appointment.date.split('-').map(Number);
+        const date = new Date(year, month - 1, day);
+        const dayNames = [
+            'Domingo', 'Lunes', 'Martes', 'Miércoles',
+            'Jueves', 'Viernes', 'Sábado'
+        ];
+        const monthNames = [
+            'enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio',
+            'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre'
+        ];
+        const dayName = dayNames[date.getDay()];
+        const dayNum = date.getDate();
+        const monthName = monthNames[date.getMonth()];
+        return `${dayName} ${dayNum} de ${monthName}`;
+    }
+    /**
+     * Format time range: "9:00 - 9:30"
+     */
+    get formattedTimeRange() {
+        if (!this.appointment)
+            return '';
+        return `${this.appointment.startTime} - ${this.appointment.endTime}`;
+    }
+    formatDate(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+}
+TasIncomingAppointmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasIncomingAppointmentComponent, deps: [{ token: TasService }], target: i0.ɵɵFactoryTarget.Component });
+TasIncomingAppointmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TasIncomingAppointmentComponent, selector: "tas-incoming-appointment", inputs: { roomType: "roomType", entityId: "entityId", tenant: "tenant", businessRole: "businessRole", currentUser: "currentUser" }, outputs: { enterCall: "enterCall" }, ngImport: i0, template: "<div class=\"incoming-appointment-card\">\n  <h3 class=\"card-title\">Pr\u00F3ximo turno</h3>\n\n  <!-- Loading state -->\n  <div class=\"card-content\" *ngIf=\"isLoading\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n\n  <!-- Empty state -->\n  <div class=\"card-content empty-state\" *ngIf=\"!isLoading && !appointment\">\n    <div class=\"icon-container\">\n      <div class=\"icon-circle\">\n        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n      </div>\n      <span class=\"sparkle sparkle-1\">\u2726</span>\n      <span class=\"sparkle sparkle-2\">\u2726</span>\n      <span class=\"sparkle sparkle-3\">\u2726</span>\n      <span class=\"sparkle sparkle-4\">\u2726</span>\n    </div>\n    <h4 class=\"empty-title\">Todav\u00EDa no ten\u00E9s turnos agendados</h4>\n    <p class=\"empty-subtitle\">\n      En caso de que Medicina Laboral requiera una consulta, lo ver\u00E1s en esta secci\u00F3n.\n    </p>\n  </div>\n\n  <!-- Appointment state -->\n  <div class=\"card-content appointment-state\" *ngIf=\"!isLoading && appointment\">\n    \n    <div class=\"appointment-card\">\n      <div class=\"appointment-header\">\n        <tas-avatar [name]=\"appointment.title\" [size]=\"48\"></tas-avatar>\n        \n        <span class=\"doctor-name\">{{ appointment.title }}</span>\n      </div>\n      <div class=\"appointment-details\">\n        <div class=\"date-time\">\n          <span class=\"date\">{{ formattedDate }}</span>\n          <span class=\"time\">{{ formattedTimeRange }}</span>\n        </div>\n        <tas-btn\n          variant=\"teal\"\n          buttonLabel=\"Ingresar\"\n          [roomType]=\"roomType\"\n          [entityId]=\"entityId\"\n          [tenant]=\"tenant\"\n          [businessRole]=\"businessRole\"\n          [currentUser]=\"currentUser\"\n        ></tas-btn>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.incoming-appointment-card{background:#ffffff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:24px;min-width:360px}.card-title{font-size:16px;font-weight:400;color:#6b7280;margin:0 0 24px}.card-content{display:flex;flex-direction:column;align-items:center}.loading-spinner{width:40px;height:40px;border:3px solid #e0f7fa;border-top-color:#0097a7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:20px 0}.icon-container{position:relative;width:120px;height:120px;margin-bottom:24px}.icon-circle{width:100%;height:100%;background:#e0f7fa;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon-circle i{font-size:40px;color:#0097a7}.sparkle{position:absolute;color:#0097a7;font-size:12px}.sparkle-1{top:10px;right:5px}.sparkle-2{top:0;right:30px}.sparkle-3{top:25px;left:0}.sparkle-4{bottom:20px;right:0}.empty-title{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 12px}.empty-subtitle{font-size:14px;color:#6b7280;margin:0;max-width:320px;line-height:1.5}.appointment-state{align-items:stretch}.appointment-card{border-radius:12px;border:1px solid var(--Primary-White-Uell50, #8ED1D8);background:#F1FAFA;padding:1.5rem}.appointment-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.doctor-name{overflow:hidden;color:var(--Neutral-GreyDark, #383E52);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.016px}.appointment-details{display:flex;justify-content:space-between;align-items:flex-end}.date-time{display:flex;flex-direction:column;gap:4px}.date{color:var(--Neutral-GreyDark, #383E52);font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.06px}.time{font-size:14px;color:var(--Neutral-GreyDark, #383E52);font-family:Inter;font-size:10px;font-style:normal;font-weight:400;line-height:14px;letter-spacing:.04px}\n"], components: [{ type: TasAvatarComponent, selector: "tas-avatar", inputs: ["name", "size"] }, { type: TasButtonComponent, selector: "tas-btn", inputs: ["roomType", "entityId", "tenant", "businessRole", "currentUser", "variant", "buttonLabel"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasIncomingAppointmentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tas-incoming-appointment', template: "<div class=\"incoming-appointment-card\">\n  <h3 class=\"card-title\">Pr\u00F3ximo turno</h3>\n\n  <!-- Loading state -->\n  <div class=\"card-content\" *ngIf=\"isLoading\">\n    <div class=\"loading-spinner\"></div>\n  </div>\n\n  <!-- Empty state -->\n  <div class=\"card-content empty-state\" *ngIf=\"!isLoading && !appointment\">\n    <div class=\"icon-container\">\n      <div class=\"icon-circle\">\n        <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n      </div>\n      <span class=\"sparkle sparkle-1\">\u2726</span>\n      <span class=\"sparkle sparkle-2\">\u2726</span>\n      <span class=\"sparkle sparkle-3\">\u2726</span>\n      <span class=\"sparkle sparkle-4\">\u2726</span>\n    </div>\n    <h4 class=\"empty-title\">Todav\u00EDa no ten\u00E9s turnos agendados</h4>\n    <p class=\"empty-subtitle\">\n      En caso de que Medicina Laboral requiera una consulta, lo ver\u00E1s en esta secci\u00F3n.\n    </p>\n  </div>\n\n  <!-- Appointment state -->\n  <div class=\"card-content appointment-state\" *ngIf=\"!isLoading && appointment\">\n    \n    <div class=\"appointment-card\">\n      <div class=\"appointment-header\">\n        <tas-avatar [name]=\"appointment.title\" [size]=\"48\"></tas-avatar>\n        \n        <span class=\"doctor-name\">{{ appointment.title }}</span>\n      </div>\n      <div class=\"appointment-details\">\n        <div class=\"date-time\">\n          <span class=\"date\">{{ formattedDate }}</span>\n          <span class=\"time\">{{ formattedTimeRange }}</span>\n        </div>\n        <tas-btn\n          variant=\"teal\"\n          buttonLabel=\"Ingresar\"\n          [roomType]=\"roomType\"\n          [entityId]=\"entityId\"\n          [tenant]=\"tenant\"\n          [businessRole]=\"businessRole\"\n          [currentUser]=\"currentUser\"\n        ></tas-btn>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}.incoming-appointment-card{background:#ffffff;border-radius:12px;box-shadow:0 2px 8px #00000014;padding:24px;min-width:360px}.card-title{font-size:16px;font-weight:400;color:#6b7280;margin:0 0 24px}.card-content{display:flex;flex-direction:column;align-items:center}.loading-spinner{width:40px;height:40px;border:3px solid #e0f7fa;border-top-color:#0097a7;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:20px 0}.icon-container{position:relative;width:120px;height:120px;margin-bottom:24px}.icon-circle{width:100%;height:100%;background:#e0f7fa;border-radius:50%;display:flex;align-items:center;justify-content:center}.icon-circle i{font-size:40px;color:#0097a7}.sparkle{position:absolute;color:#0097a7;font-size:12px}.sparkle-1{top:10px;right:5px}.sparkle-2{top:0;right:30px}.sparkle-3{top:25px;left:0}.sparkle-4{bottom:20px;right:0}.empty-title{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 12px}.empty-subtitle{font-size:14px;color:#6b7280;margin:0;max-width:320px;line-height:1.5}.appointment-state{align-items:stretch}.appointment-card{border-radius:12px;border:1px solid var(--Primary-White-Uell50, #8ED1D8);background:#F1FAFA;padding:1.5rem}.appointment-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.doctor-name{overflow:hidden;color:var(--Neutral-GreyDark, #383E52);text-overflow:ellipsis;font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.016px}.appointment-details{display:flex;justify-content:space-between;align-items:flex-end}.date-time{display:flex;flex-direction:column;gap:4px}.date{color:var(--Neutral-GreyDark, #383E52);font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.06px}.time{font-size:14px;color:var(--Neutral-GreyDark, #383E52);font-family:Inter;font-size:10px;font-style:normal;font-weight:400;line-height:14px;letter-spacing:.04px}\n"] }]
+        }], ctorParameters: function () { return [{ type: TasService }]; }, propDecorators: { roomType: [{
+                type: Input
+            }], entityId: [{
+                type: Input
+            }], tenant: [{
+                type: Input
+            }], businessRole: [{
+                type: Input
+            }], currentUser: [{
+                type: Input
+            }], enterCall: [{
+                type: Output
+            }] } });
 
 class TasUellSdkModule {
     /**
@@ -946,43 +1952,44 @@ 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,
+        TasIncomingAppointmentComponent], imports: [CommonModule, FormsModule, NgbTooltipModule], 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,
+        TasIncomingAppointmentComponent] });
+TasUellSdkModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TasUellSdkModule, imports: [[CommonModule, FormsModule, NgbTooltipModule]] });
+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,
+                        TasIncomingAppointmentComponent,
                     ],
+                    imports: [CommonModule, FormsModule, NgbTooltipModule],
                     exports: [
                         TasButtonComponent,
                         TasVideocallComponent,
                         TasFloatingCallComponent,
-                        TasWaitingRoomComponent
-                    ]
+                        TasWaitingRoomComponent,
+                        TasAvatarComponent,
+                        TasIncomingAppointmentComponent,
+                    ],
                 }]
         }] });
 
@@ -994,5 +2001,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 { AppointmentStatus, CallState, GeolocationService, RoomUserStatus, TAS_CONFIG, TAS_HTTP_CLIENT, TasAvatarComponent, TasBusinessRole, TasButtonComponent, TasFloatingCallComponent, TasIncomingAppointmentComponent, TasRoomType, TasService, TasSessionType, TasUellSdkModule, TasUserRole, TasVideocallComponent, TasWaitingRoomComponent, UserCallAction, UserStatus, VideoSessionStatus, ViewMode, WaitingRoomState };
 //# sourceMappingURL=tas-uell-sdk.mjs.map