@acorex-platform/module-conversation-client 0.0.21

package/fesm2022/acorex-platform-module-conversation-client-chat-call-session-page.component-DkX4JSbN.mjs

@@ -0,0 +1,871 @@
+import { AXPAvatarComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXBasePageComponent } from '@acorex/components/page';
+import { AXToastService } from '@acorex/components/toast';
+import * as i1 from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, ChangeDetectionStrategy, Component, Injectable, inject, ElementRef, effect, Directive, ViewEncapsulation } from '@angular/core';
+import { ConnectionState } from 'livekit-client';
+import { i as AXMChatUserApi, j as AXMChatCallRtcService, k as AXMChatCallRtcSignalInboxService, l as AXMChatCallEventsService, m as AXMConversationRealtimeBus, f as axmResolveConversationListAvatar, n as axmReadChatCallLog, o as AXM_CHAT_CALL_RTC_PROVIDERS } from './acorex-platform-module-conversation-client-acorex-platform-module-conversation-client-DsjrXRZ6.mjs';
+import { AXP_ROOT_CONFIG_TOKEN } from '@acorex-platform/framework-client/common';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMChatCallControlsComponent {
+    constructor() {
+        //#region ----- Inputs / Outputs -----
+        this.phase = input('outgoing-waiting', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []));
+        this.videoEnabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "videoEnabled" }] : /* istanbul ignore next */ []));
+        this.micMuted = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "micMuted" }] : /* istanbul ignore next */ []));
+        this.showAddPeople = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showAddPeople" }] : /* istanbul ignore next */ []));
+        this.showScreencast = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showScreencast" }] : /* istanbul ignore next */ []));
+        this.audioDevices = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "audioDevices" }] : /* istanbul ignore next */ []));
+        this.videoDevices = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "videoDevices" }] : /* istanbul ignore next */ []));
+        this.selectedAudioDeviceId = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedAudioDeviceId" }] : /* istanbul ignore next */ []));
+        this.selectedVideoDeviceId = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedVideoDeviceId" }] : /* istanbul ignore next */ []));
+        this.screencast = output();
+        this.toggleVideo = output();
+        this.toggleMute = output();
+        this.endCall = output();
+        this.accept = output();
+        this.decline = output();
+        this.addPeople = output();
+        this.pickDevice = output();
+        this.requestDevices = output();
+        //#endregion
+        //#region ----- State Signals -----
+        this.openMenu = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openMenu" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Computed Properties -----
+        this.isIncoming = computed(() => this.phase() === 'incoming', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isIncoming" }] : /* istanbul ignore next */ []));
+        this.hangupLabelKey = computed(() => this.phase() === 'active'
+            ? '@conversation:chat.call.end-call'
+            : '@conversation:chat.call.cancel', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hangupLabelKey" }] : /* istanbul ignore next */ []));
+        this.videoLabelKey = computed(() => this.videoEnabled()
+            ? '@conversation:chat.call.stop-video'
+            : '@conversation:chat.call.start-video', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "videoLabelKey" }] : /* istanbul ignore next */ []));
+        this.muteLabelKey = computed(() => this.micMuted() ? '@conversation:chat.call.unmute' : '@conversation:chat.call.mute', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "muteLabelKey" }] : /* istanbul ignore next */ []));
+        this.menuDevices = computed(() => {
+            const kind = this.openMenu();
+            if (kind === 'audioinput') {
+                return this.audioDevices();
+            }
+            if (kind === 'videoinput') {
+                return this.videoDevices();
+            }
+            return [];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "menuDevices" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
+    onOpenDeviceMenu(event, kind) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.openMenu.set(this.openMenu() === kind ? null : kind);
+        this.requestDevices.emit(kind);
+    }
+    onCloseDeviceMenu() {
+        this.openMenu.set(null);
+    }
+    onSelectDevice(kind, deviceId) {
+        this.pickDevice.emit({ kind, deviceId });
+        this.openMenu.set(null);
+    }
+    selectedDeviceId(kind) {
+        return kind === 'audioinput' ? this.selectedAudioDeviceId() : this.selectedVideoDeviceId();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallControlsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMChatCallControlsComponent, isStandalone: true, selector: "axm-chat-call-controls", inputs: { phase: { classPropertyName: "phase", publicName: "phase", isSignal: true, isRequired: false, transformFunction: null }, videoEnabled: { classPropertyName: "videoEnabled", publicName: "videoEnabled", isSignal: true, isRequired: false, transformFunction: null }, micMuted: { classPropertyName: "micMuted", publicName: "micMuted", isSignal: true, isRequired: false, transformFunction: null }, showAddPeople: { classPropertyName: "showAddPeople", publicName: "showAddPeople", isSignal: true, isRequired: false, transformFunction: null }, showScreencast: { classPropertyName: "showScreencast", publicName: "showScreencast", isSignal: true, isRequired: false, transformFunction: null }, audioDevices: { classPropertyName: "audioDevices", publicName: "audioDevices", isSignal: true, isRequired: false, transformFunction: null }, videoDevices: { classPropertyName: "videoDevices", publicName: "videoDevices", isSignal: true, isRequired: false, transformFunction: null }, selectedAudioDeviceId: { classPropertyName: "selectedAudioDeviceId", publicName: "selectedAudioDeviceId", isSignal: true, isRequired: false, transformFunction: null }, selectedVideoDeviceId: { classPropertyName: "selectedVideoDeviceId", publicName: "selectedVideoDeviceId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { screencast: "screencast", toggleVideo: "toggleVideo", toggleMute: "toggleMute", endCall: "endCall", accept: "accept", decline: "decline", addPeople: "addPeople", pickDevice: "pickDevice", requestDevices: "requestDevices" }, ngImport: i0, template: "<div class=\"axm-chat-call-controls\">\n  <!-- ----- Incoming: camera before decline/accept ----- -->\n  @if (isIncoming()) {\n    <div class=\"axm-chat-call-controls__item\">\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"toggleVideo.emit()\">\n        <span class=\"axm-chat-call-controls__circle\" [class.axm-chat-call-controls__circle--light]=\"videoEnabled()\">\n          <i class=\"fa-solid\" [class.fa-video]=\"videoEnabled()\" [class.fa-video-slash]=\"!videoEnabled()\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ videoLabelKey() | translate | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"axm-chat-call-controls__chevron\"\n        (click)=\"onOpenDeviceMenu($event, 'videoinput')\"\n        [attr.aria-label]=\"'@conversation:chat.call.devices.camera' | translate | async\"\n      >\n        <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"decline.emit()\">\n      <span class=\"axm-chat-call-controls__circle axm-chat-call-controls__circle--danger\">\n        <i class=\"fa-solid fa-phone axm-chat-call-controls__hangup\" aria-hidden=\"true\"></i>\n      </span>\n      <span class=\"axm-chat-call-controls__label\">{{ '@conversation:chat.call.decline' | translate | async }}</span>\n    </button>\n\n    <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"accept.emit()\">\n      <span class=\"axm-chat-call-controls__circle axm-chat-call-controls__circle--success\">\n        <i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i>\n      </span>\n      <span class=\"axm-chat-call-controls__label\">{{ '@conversation:chat.call.accept' | translate | async }}</span>\n    </button>\n\n    <div class=\"axm-chat-call-controls__item\">\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"toggleMute.emit()\">\n        <span class=\"axm-chat-call-controls__circle\" [class.axm-chat-call-controls__circle--light]=\"!micMuted()\">\n          <i class=\"fa-solid\" [class.fa-microphone]=\"!micMuted()\" [class.fa-microphone-slash]=\"micMuted()\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ muteLabelKey() | translate | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"axm-chat-call-controls__chevron\"\n        (click)=\"onOpenDeviceMenu($event, 'audioinput')\"\n        [attr.aria-label]=\"'@conversation:chat.call.devices.microphone' | translate | async\"\n      >\n        <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n  }\n  <!-- ----- Outgoing / active controls ----- -->\n  @else {\n    <!-- ----- Screencast only during an active call ----- -->\n    @if (showScreencast()) {\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"screencast.emit()\">\n        <span class=\"axm-chat-call-controls__circle axm-chat-call-controls__circle--light\">\n          <i class=\"fa-solid fa-desktop\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ '@conversation:chat.call.screencast' | translate | async }}</span>\n      </button>\n    }\n\n    <div class=\"axm-chat-call-controls__item\">\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"toggleVideo.emit()\">\n        <span class=\"axm-chat-call-controls__circle\" [class.axm-chat-call-controls__circle--light]=\"videoEnabled()\">\n          <i class=\"fa-solid\" [class.fa-video]=\"videoEnabled()\" [class.fa-video-slash]=\"!videoEnabled()\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ videoLabelKey() | translate | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"axm-chat-call-controls__chevron\"\n        (click)=\"onOpenDeviceMenu($event, 'videoinput')\"\n        [attr.aria-label]=\"'@conversation:chat.call.devices.camera' | translate | async\"\n      >\n        <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"endCall.emit()\">\n      <span class=\"axm-chat-call-controls__circle axm-chat-call-controls__circle--danger\">\n        <i class=\"fa-solid fa-phone axm-chat-call-controls__hangup\" aria-hidden=\"true\"></i>\n      </span>\n      <span class=\"axm-chat-call-controls__label\">{{ hangupLabelKey() | translate | async }}</span>\n    </button>\n\n    <div class=\"axm-chat-call-controls__item\">\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"toggleMute.emit()\">\n        <span class=\"axm-chat-call-controls__circle\" [class.axm-chat-call-controls__circle--light]=\"!micMuted()\">\n          <i class=\"fa-solid\" [class.fa-microphone]=\"!micMuted()\" [class.fa-microphone-slash]=\"micMuted()\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ muteLabelKey() | translate | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"axm-chat-call-controls__chevron\"\n        (click)=\"onOpenDeviceMenu($event, 'audioinput')\"\n        [attr.aria-label]=\"'@conversation:chat.call.devices.microphone' | translate | async\"\n      >\n        <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <!-- ----- Add people on an active group call ----- -->\n    @if (showAddPeople()) {\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"addPeople.emit()\">\n        <span class=\"axm-chat-call-controls__circle axm-chat-call-controls__circle--light\">\n          <i class=\"fa-solid fa-user-plus\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ '@conversation:chat.call.add-people' | translate | async }}</span>\n      </button>\n    }\n  }\n\n  <!-- ----- Device switcher ----- -->\n  @if (openMenu(); as kind) {\n    <button type=\"button\" class=\"axm-chat-call-controls__menu-backdrop\" (click)=\"onCloseDeviceMenu()\"></button>\n    <ul class=\"axm-chat-call-controls__menu\" role=\"listbox\">\n      @if (menuDevices().length === 0) {\n        <li class=\"axm-chat-call-controls__menu-empty\">\n          {{ '@conversation:chat.call.devices.empty' | translate | async }}\n        </li>\n      }\n      @for (device of menuDevices(); track device.deviceId) {\n        <li>\n          <button\n            type=\"button\"\n            class=\"axm-chat-call-controls__menu-item\"\n            [class.axm-chat-call-controls__menu-item--active]=\"device.deviceId === selectedDeviceId(kind)\"\n            (click)=\"onSelectDevice(kind, device.deviceId)\"\n          >\n            {{ device.label || device.deviceId }}\n          </button>\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.axm-chat-call-controls{position:relative;display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:1.25rem;padding:.75rem 1rem 1.25rem}.axm-chat-call-controls__item{position:relative;display:flex;flex-direction:column;align-items:center}.axm-chat-call-controls__action{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:4.5rem;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}.axm-chat-call-controls__action:focus-visible{outline:2px solid rgba(255,255,255,.45);outline-offset:4px;border-radius:.5rem}.axm-chat-call-controls__circle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;border-radius:9999px;background:#3a3d41;color:#fff;font-size:1.125rem}.axm-chat-call-controls__circle--danger{background:#e53935}.axm-chat-call-controls__circle--success{background:#4caf50}.axm-chat-call-controls__circle--light{background:#f2f2f2;color:#1a1c1e}.axm-chat-call-controls__chevron{position:absolute;top:-.15rem;inset-inline-end:.35rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;padding:0;border-radius:9999px;background:#2b2e32;border:1px solid rgba(255,255,255,.2);font-size:.55rem;color:#fff;cursor:pointer}.axm-chat-call-controls__label{font-size:.75rem;line-height:1.2;color:#fff;white-space:nowrap}.axm-chat-call-controls__hangup{transform:rotate(135deg)}.axm-chat-call-controls__menu-backdrop{position:fixed;inset:0;z-index:20;border:0;background:transparent;cursor:default}.axm-chat-call-controls__menu{position:absolute;bottom:calc(100% + .5rem);inset-inline-start:50%;z-index:21;min-width:12rem;max-width:18rem;margin:0;padding:.35rem;list-style:none;border-radius:.75rem;background:#2b2e32;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 28px #0006;transform:translate(-50%)}.axm-chat-call-controls__menu-empty,.axm-chat-call-controls__menu-item{display:block;width:100%;padding:.5rem .75rem;border:0;border-radius:.5rem;background:transparent;color:#fff;font-size:.8125rem;text-align:start}.axm-chat-call-controls__menu-item{cursor:pointer}.axm-chat-call-controls__menu-item:hover,.axm-chat-call-controls__menu-item--active{background:#ffffff1a}\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallControlsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-chat-call-controls', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslationModule, AsyncPipe], template: "<div class=\"axm-chat-call-controls\">\n  <!-- ----- Incoming: camera before decline/accept ----- -->\n  @if (isIncoming()) {\n    <div class=\"axm-chat-call-controls__item\">\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"toggleVideo.emit()\">\n        <span class=\"axm-chat-call-controls__circle\" [class.axm-chat-call-controls__circle--light]=\"videoEnabled()\">\n          <i class=\"fa-solid\" [class.fa-video]=\"videoEnabled()\" [class.fa-video-slash]=\"!videoEnabled()\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ videoLabelKey() | translate | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"axm-chat-call-controls__chevron\"\n        (click)=\"onOpenDeviceMenu($event, 'videoinput')\"\n        [attr.aria-label]=\"'@conversation:chat.call.devices.camera' | translate | async\"\n      >\n        <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"decline.emit()\">\n      <span class=\"axm-chat-call-controls__circle axm-chat-call-controls__circle--danger\">\n        <i class=\"fa-solid fa-phone axm-chat-call-controls__hangup\" aria-hidden=\"true\"></i>\n      </span>\n      <span class=\"axm-chat-call-controls__label\">{{ '@conversation:chat.call.decline' | translate | async }}</span>\n    </button>\n\n    <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"accept.emit()\">\n      <span class=\"axm-chat-call-controls__circle axm-chat-call-controls__circle--success\">\n        <i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i>\n      </span>\n      <span class=\"axm-chat-call-controls__label\">{{ '@conversation:chat.call.accept' | translate | async }}</span>\n    </button>\n\n    <div class=\"axm-chat-call-controls__item\">\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"toggleMute.emit()\">\n        <span class=\"axm-chat-call-controls__circle\" [class.axm-chat-call-controls__circle--light]=\"!micMuted()\">\n          <i class=\"fa-solid\" [class.fa-microphone]=\"!micMuted()\" [class.fa-microphone-slash]=\"micMuted()\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ muteLabelKey() | translate | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"axm-chat-call-controls__chevron\"\n        (click)=\"onOpenDeviceMenu($event, 'audioinput')\"\n        [attr.aria-label]=\"'@conversation:chat.call.devices.microphone' | translate | async\"\n      >\n        <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n  }\n  <!-- ----- Outgoing / active controls ----- -->\n  @else {\n    <!-- ----- Screencast only during an active call ----- -->\n    @if (showScreencast()) {\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"screencast.emit()\">\n        <span class=\"axm-chat-call-controls__circle axm-chat-call-controls__circle--light\">\n          <i class=\"fa-solid fa-desktop\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ '@conversation:chat.call.screencast' | translate | async }}</span>\n      </button>\n    }\n\n    <div class=\"axm-chat-call-controls__item\">\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"toggleVideo.emit()\">\n        <span class=\"axm-chat-call-controls__circle\" [class.axm-chat-call-controls__circle--light]=\"videoEnabled()\">\n          <i class=\"fa-solid\" [class.fa-video]=\"videoEnabled()\" [class.fa-video-slash]=\"!videoEnabled()\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ videoLabelKey() | translate | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"axm-chat-call-controls__chevron\"\n        (click)=\"onOpenDeviceMenu($event, 'videoinput')\"\n        [attr.aria-label]=\"'@conversation:chat.call.devices.camera' | translate | async\"\n      >\n        <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"endCall.emit()\">\n      <span class=\"axm-chat-call-controls__circle axm-chat-call-controls__circle--danger\">\n        <i class=\"fa-solid fa-phone axm-chat-call-controls__hangup\" aria-hidden=\"true\"></i>\n      </span>\n      <span class=\"axm-chat-call-controls__label\">{{ hangupLabelKey() | translate | async }}</span>\n    </button>\n\n    <div class=\"axm-chat-call-controls__item\">\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"toggleMute.emit()\">\n        <span class=\"axm-chat-call-controls__circle\" [class.axm-chat-call-controls__circle--light]=\"!micMuted()\">\n          <i class=\"fa-solid\" [class.fa-microphone]=\"!micMuted()\" [class.fa-microphone-slash]=\"micMuted()\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ muteLabelKey() | translate | async }}</span>\n      </button>\n      <button\n        type=\"button\"\n        class=\"axm-chat-call-controls__chevron\"\n        (click)=\"onOpenDeviceMenu($event, 'audioinput')\"\n        [attr.aria-label]=\"'@conversation:chat.call.devices.microphone' | translate | async\"\n      >\n        <i class=\"fa-solid fa-chevron-up\" aria-hidden=\"true\"></i>\n      </button>\n    </div>\n\n    <!-- ----- Add people on an active group call ----- -->\n    @if (showAddPeople()) {\n      <button type=\"button\" class=\"axm-chat-call-controls__action\" (click)=\"addPeople.emit()\">\n        <span class=\"axm-chat-call-controls__circle axm-chat-call-controls__circle--light\">\n          <i class=\"fa-solid fa-user-plus\" aria-hidden=\"true\"></i>\n        </span>\n        <span class=\"axm-chat-call-controls__label\">{{ '@conversation:chat.call.add-people' | translate | async }}</span>\n      </button>\n    }\n  }\n\n  <!-- ----- Device switcher ----- -->\n  @if (openMenu(); as kind) {\n    <button type=\"button\" class=\"axm-chat-call-controls__menu-backdrop\" (click)=\"onCloseDeviceMenu()\"></button>\n    <ul class=\"axm-chat-call-controls__menu\" role=\"listbox\">\n      @if (menuDevices().length === 0) {\n        <li class=\"axm-chat-call-controls__menu-empty\">\n          {{ '@conversation:chat.call.devices.empty' | translate | async }}\n        </li>\n      }\n      @for (device of menuDevices(); track device.deviceId) {\n        <li>\n          <button\n            type=\"button\"\n            class=\"axm-chat-call-controls__menu-item\"\n            [class.axm-chat-call-controls__menu-item--active]=\"device.deviceId === selectedDeviceId(kind)\"\n            (click)=\"onSelectDevice(kind, device.deviceId)\"\n          >\n            {{ device.label || device.deviceId }}\n          </button>\n        </li>\n      }\n    </ul>\n  }\n</div>\n", styles: [":host{display:block;width:100%}.axm-chat-call-controls{position:relative;display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:1.25rem;padding:.75rem 1rem 1.25rem}.axm-chat-call-controls__item{position:relative;display:flex;flex-direction:column;align-items:center}.axm-chat-call-controls__action{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:4.5rem;padding:0;border:0;background:transparent;color:#fff;cursor:pointer}.axm-chat-call-controls__action:focus-visible{outline:2px solid rgba(255,255,255,.45);outline-offset:4px;border-radius:.5rem}.axm-chat-call-controls__circle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;border-radius:9999px;background:#3a3d41;color:#fff;font-size:1.125rem}.axm-chat-call-controls__circle--danger{background:#e53935}.axm-chat-call-controls__circle--success{background:#4caf50}.axm-chat-call-controls__circle--light{background:#f2f2f2;color:#1a1c1e}.axm-chat-call-controls__chevron{position:absolute;top:-.15rem;inset-inline-end:.35rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:1.15rem;height:1.15rem;padding:0;border-radius:9999px;background:#2b2e32;border:1px solid rgba(255,255,255,.2);font-size:.55rem;color:#fff;cursor:pointer}.axm-chat-call-controls__label{font-size:.75rem;line-height:1.2;color:#fff;white-space:nowrap}.axm-chat-call-controls__hangup{transform:rotate(135deg)}.axm-chat-call-controls__menu-backdrop{position:fixed;inset:0;z-index:20;border:0;background:transparent;cursor:default}.axm-chat-call-controls__menu{position:absolute;bottom:calc(100% + .5rem);inset-inline-start:50%;z-index:21;min-width:12rem;max-width:18rem;margin:0;padding:.35rem;list-style:none;border-radius:.75rem;background:#2b2e32;border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 28px #0006;transform:translate(-50%)}.axm-chat-call-controls__menu-empty,.axm-chat-call-controls__menu-item{display:block;width:100%;padding:.5rem .75rem;border:0;border-radius:.5rem;background:transparent;color:#fff;font-size:.8125rem;text-align:start}.axm-chat-call-controls__menu-item{cursor:pointer}.axm-chat-call-controls__menu-item:hover,.axm-chat-call-controls__menu-item--active{background:#ffffff1a}\n"] }]
+        }], propDecorators: { phase: [{ type: i0.Input, args: [{ isSignal: true, alias: "phase", required: false }] }], videoEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoEnabled", required: false }] }], micMuted: [{ type: i0.Input, args: [{ isSignal: true, alias: "micMuted", required: false }] }], showAddPeople: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddPeople", required: false }] }], showScreencast: [{ type: i0.Input, args: [{ isSignal: true, alias: "showScreencast", required: false }] }], audioDevices: [{ type: i0.Input, args: [{ isSignal: true, alias: "audioDevices", required: false }] }], videoDevices: [{ type: i0.Input, args: [{ isSignal: true, alias: "videoDevices", required: false }] }], selectedAudioDeviceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAudioDeviceId", required: false }] }], selectedVideoDeviceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedVideoDeviceId", required: false }] }], screencast: [{ type: i0.Output, args: ["screencast"] }], toggleVideo: [{ type: i0.Output, args: ["toggleVideo"] }], toggleMute: [{ type: i0.Output, args: ["toggleMute"] }], endCall: [{ type: i0.Output, args: ["endCall"] }], accept: [{ type: i0.Output, args: ["accept"] }], decline: [{ type: i0.Output, args: ["decline"] }], addPeople: [{ type: i0.Output, args: ["addPeople"] }], pickDevice: [{ type: i0.Output, args: ["pickDevice"] }], requestDevices: [{ type: i0.Output, args: ["requestDevices"] }] } });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Constants -----
+const CHAT_CALL_INCOMING_RING_SRC = 'assets/sounds/ring.mp3';
+const CHAT_CALL_OUTGOING_RING_SRC = 'assets/sounds/phone-call.mp3';
+const CHAT_CALL_OUTGOING_GAP_MS = 2500;
+//#endregion
+//#region ----- Service -----
+/**
+ * Plays call audio: looping ringtone for the callee, spaced ringback for the caller.
+ */
+class AXMChatCallRingerService {
+    constructor() {
+        //#region ----- Private State -----
+        this.audio = null;
+        this.gapTimer = null;
+        this.playing = false;
+    }
+    //#endregion
+    //#region ----- Playback -----
+    playIncoming() {
+        this.#playLooped(CHAT_CALL_INCOMING_RING_SRC);
+    }
+    playOutgoing() {
+        this.#playWithGap(CHAT_CALL_OUTGOING_RING_SRC, CHAT_CALL_OUTGOING_GAP_MS);
+    }
+    stop() {
+        this.playing = false;
+        this.#clearGapTimer();
+        const audio = this.audio;
+        this.audio = null;
+        if (!audio) {
+            return;
+        }
+        audio.pause();
+        audio.removeAttribute('src');
+        audio.load();
+    }
+    #playLooped(src) {
+        this.stop();
+        if (typeof Audio === 'undefined') {
+            return;
+        }
+        this.playing = true;
+        const audio = new Audio(src);
+        audio.loop = true;
+        void audio.play().catch(() => {
+            // Autoplay may be blocked until a user gesture; the call UI still shows.
+        });
+        this.audio = audio;
+    }
+    #playWithGap(src, gapMs) {
+        this.stop();
+        if (typeof Audio === 'undefined') {
+            return;
+        }
+        this.playing = true;
+        this.#playOutgoingClip(src, gapMs);
+    }
+    #playOutgoingClip(src, gapMs) {
+        if (!this.playing) {
+            return;
+        }
+        const previous = this.audio;
+        this.audio = null;
+        if (previous) {
+            previous.pause();
+            previous.removeAttribute('src');
+            previous.load();
+        }
+        const audio = new Audio(src);
+        audio.loop = false;
+        audio.addEventListener('ended', () => {
+            if (!this.playing) {
+                return;
+            }
+            this.#clearGapTimer();
+            this.gapTimer = setTimeout(() => {
+                this.gapTimer = null;
+                this.#playOutgoingClip(src, gapMs);
+            }, gapMs);
+        }, { once: true });
+        void audio.play().catch(() => {
+            // Autoplay may be blocked until a user gesture; the call UI still shows.
+        });
+        this.audio = audio;
+    }
+    #clearGapTimer() {
+        if (this.gapTimer == null) {
+            return;
+        }
+        clearTimeout(this.gapTimer);
+        this.gapTimer = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallRingerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallRingerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallRingerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Client -----
+/**
+ * Posts call signaling to the conversation API (built-in realtime fan-out on server).
+ */
+class AXMChatCallSignalClient {
+    constructor() {
+        this.http = inject(HttpClient);
+        this.rootConfig = inject(AXP_ROOT_CONFIG_TOKEN);
+    }
+    async signal(request) {
+        const conversationId = request.conversationId.trim();
+        const url = `${this.rootConfig.baseUrl}/v1/global/conversation/conversations/${encodeURIComponent(conversationId)}/calls/signal`;
+        return firstValueFrom(this.http.post(url, {
+            action: request.action,
+            media: request.media,
+            callId: request.callId,
+            targetUserIds: request.targetUserIds,
+        }, { withCredentials: true }));
+    }
+    async log(request) {
+        const conversationId = request.conversationId.trim();
+        const url = `${this.rootConfig.baseUrl}/v1/global/conversation/conversations/${encodeURIComponent(conversationId)}/calls/log`;
+        return firstValueFrom(this.http.post(url, {
+            outcome: request.outcome,
+            media: request.media,
+            callId: request.callId,
+        }, { withCredentials: true }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallSignalClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallSignalClient, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallSignalClient, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMChatCallSidebarComponent {
+    constructor() {
+        //#region ----- Inputs / Outputs -----
+        this.participants = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "participants" }] : /* istanbul ignore next */ []));
+        this.addPeople = output();
+        this.shareLink = output();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMChatCallSidebarComponent, isStandalone: true, selector: "axm-chat-call-sidebar", inputs: { participants: { classPropertyName: "participants", publicName: "participants", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addPeople: "addPeople", shareLink: "shareLink" }, ngImport: i0, template: "<div class=\"axm-chat-call-sidebar__header\">\n  {{ '@conversation:chat.call.encrypted' | translate | async }}\n</div>\n\n<div class=\"axm-chat-call-sidebar__list\">\n  @for (participant of participants(); track participant.id) {\n    <div class=\"axm-chat-call-sidebar__row\">\n      <axp-avatar [size]=\"36\" [fullName]=\"participant.name\" [src]=\"participant.avatar ?? ''\" />\n      <div class=\"axm-chat-call-sidebar__meta\">\n        <span class=\"axm-chat-call-sidebar__name\">{{ participant.name }}</span>\n        @if (participant.speaking) {\n          <span class=\"axm-chat-call-sidebar__status\">\n            <i class=\"fa-solid fa-microphone\" aria-hidden=\"true\"></i>\n            <i class=\"fa-solid fa-video\" aria-hidden=\"true\"></i>\n            {{ '@conversation:chat.call.speaking' | translate | async }}\n          </span>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<div class=\"axm-chat-call-sidebar__actions\">\n  <button type=\"button\" class=\"axm-chat-call-sidebar__action\" (click)=\"addPeople.emit()\">\n    <i class=\"fa-solid fa-user-plus\" aria-hidden=\"true\"></i>\n    <span>{{ '@conversation:chat.call.add-people' | translate | async }}</span>\n  </button>\n  <button type=\"button\" class=\"axm-chat-call-sidebar__action\" (click)=\"shareLink.emit()\">\n    <i class=\"fa-solid fa-link\" aria-hidden=\"true\"></i>\n    <span>{{ '@conversation:chat.call.share-link' | translate | async }}</span>\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:16.5rem;min-width:16.5rem;height:100%;background:#141517;border-inline-start:1px solid rgba(255,255,255,.06);color:#fff}.axm-chat-call-sidebar__header{padding:1rem 1rem .75rem;font-size:.75rem;color:#ffffff8c}.axm-chat-call-sidebar__list{display:flex;flex-direction:column;gap:.75rem;flex:1;min-height:0;overflow:auto;padding:.5rem 1rem 1rem}.axm-chat-call-sidebar__row{display:flex;align-items:center;gap:.75rem}.axm-chat-call-sidebar__meta{display:flex;flex-direction:column;gap:.2rem;min-width:0}.axm-chat-call-sidebar__name{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.axm-chat-call-sidebar__status{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;color:#7dd87d}.axm-chat-call-sidebar__status i{font-size:.7rem}.axm-chat-call-sidebar__actions{display:flex;flex-direction:column;gap:.25rem;padding:.75rem .5rem 1rem;border-top:1px solid rgba(255,255,255,.06)}.axm-chat-call-sidebar__action{display:flex;align-items:center;gap:.65rem;width:100%;padding:.65rem .75rem;border:0;border-radius:.5rem;background:transparent;color:#fff;font-size:.875rem;cursor:pointer;text-align:start}.axm-chat-call-sidebar__action:hover{background:#ffffff0f}\n"], dependencies: [{ kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallSidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-chat-call-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXPAvatarComponent, AXTranslationModule, AsyncPipe], template: "<div class=\"axm-chat-call-sidebar__header\">\n  {{ '@conversation:chat.call.encrypted' | translate | async }}\n</div>\n\n<div class=\"axm-chat-call-sidebar__list\">\n  @for (participant of participants(); track participant.id) {\n    <div class=\"axm-chat-call-sidebar__row\">\n      <axp-avatar [size]=\"36\" [fullName]=\"participant.name\" [src]=\"participant.avatar ?? ''\" />\n      <div class=\"axm-chat-call-sidebar__meta\">\n        <span class=\"axm-chat-call-sidebar__name\">{{ participant.name }}</span>\n        @if (participant.speaking) {\n          <span class=\"axm-chat-call-sidebar__status\">\n            <i class=\"fa-solid fa-microphone\" aria-hidden=\"true\"></i>\n            <i class=\"fa-solid fa-video\" aria-hidden=\"true\"></i>\n            {{ '@conversation:chat.call.speaking' | translate | async }}\n          </span>\n        }\n      </div>\n    </div>\n  }\n</div>\n\n<div class=\"axm-chat-call-sidebar__actions\">\n  <button type=\"button\" class=\"axm-chat-call-sidebar__action\" (click)=\"addPeople.emit()\">\n    <i class=\"fa-solid fa-user-plus\" aria-hidden=\"true\"></i>\n    <span>{{ '@conversation:chat.call.add-people' | translate | async }}</span>\n  </button>\n  <button type=\"button\" class=\"axm-chat-call-sidebar__action\" (click)=\"shareLink.emit()\">\n    <i class=\"fa-solid fa-link\" aria-hidden=\"true\"></i>\n    <span>{{ '@conversation:chat.call.share-link' | translate | async }}</span>\n  </button>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:16.5rem;min-width:16.5rem;height:100%;background:#141517;border-inline-start:1px solid rgba(255,255,255,.06);color:#fff}.axm-chat-call-sidebar__header{padding:1rem 1rem .75rem;font-size:.75rem;color:#ffffff8c}.axm-chat-call-sidebar__list{display:flex;flex-direction:column;gap:.75rem;flex:1;min-height:0;overflow:auto;padding:.5rem 1rem 1rem}.axm-chat-call-sidebar__row{display:flex;align-items:center;gap:.75rem}.axm-chat-call-sidebar__meta{display:flex;flex-direction:column;gap:.2rem;min-width:0}.axm-chat-call-sidebar__name{font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.axm-chat-call-sidebar__status{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;color:#7dd87d}.axm-chat-call-sidebar__status i{font-size:.7rem}.axm-chat-call-sidebar__actions{display:flex;flex-direction:column;gap:.25rem;padding:.75rem .5rem 1rem;border-top:1px solid rgba(255,255,255,.06)}.axm-chat-call-sidebar__action{display:flex;align-items:center;gap:.65rem;width:100%;padding:.65rem .75rem;border:0;border-radius:.5rem;background:transparent;color:#fff;font-size:.875rem;cursor:pointer;text-align:start}.axm-chat-call-sidebar__action:hover{background:#ffffff0f}\n"] }]
+        }], propDecorators: { participants: [{ type: i0.Input, args: [{ isSignal: true, alias: "participants", required: false }] }], addPeople: [{ type: i0.Output, args: ["addPeople"] }], shareLink: [{ type: i0.Output, args: ["shareLink"] }] } });
+
+//#region ----- Imports -----
+/**
+ * Attaches a LiveKit track to the host media element.
+ */
+class AXMChatCallVideoAttachDirective {
+    //#endregion
+    //#region ----- Lifecycle -----
+    constructor() {
+        //#region ----- Inputs -----
+        this.axmChatCallTrack = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "axmChatCallTrack" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Services & Dependencies -----
+        this.host = inject((ElementRef));
+        effect((onCleanup) => {
+            const track = this.axmChatCallTrack();
+            const element = this.host.nativeElement;
+            if (!track) {
+                element.srcObject = null;
+                return;
+            }
+            track.attach(element);
+            void element.play().catch(() => undefined);
+            onCleanup(() => {
+                track.detach(element);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallVideoAttachDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXMChatCallVideoAttachDirective, isStandalone: true, selector: "video[axmChatCallTrack]", inputs: { axmChatCallTrack: { classPropertyName: "axmChatCallTrack", publicName: "axmChatCallTrack", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallVideoAttachDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'video[axmChatCallTrack]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { axmChatCallTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "axmChatCallTrack", required: false }] }] } });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+/**
+ * Call-session popup backed by RTC/LiveKit.
+ */
+class AXMChatCallSessionPageComponent extends AXBasePageComponent {
+    //#endregion
+    //#region ----- Lifecycle -----
+    constructor() {
+        super();
+        this.sessionMedia = 'voice';
+        this.sessionPhase = 'outgoing-waiting';
+        //#endregion
+        //#region ----- Services & Dependencies -----
+        this.userApi = inject(AXMChatUserApi);
+        this.toastService = inject(AXToastService);
+        this.translationService = inject(AXTranslationService);
+        this.rtc = inject(AXMChatCallRtcService);
+        this.callSignal = inject(AXMChatCallSignalClient);
+        this.signalInbox = inject(AXMChatCallRtcSignalInboxService);
+        this.callEvents = inject(AXMChatCallEventsService);
+        this.realtimeBus = inject(AXMConversationRealtimeBus);
+        this.ringer = inject(AXMChatCallRingerService);
+        //#endregion
+        //#region ----- State Signals -----
+        this.loading = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.error = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+        this.errorMessage = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+        this.conversation = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "conversation" }] : /* istanbul ignore next */ []));
+        this.phase = signal('outgoing-waiting', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []));
+        this.mediaType = signal('voice', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mediaType" }] : /* istanbul ignore next */ []));
+        this.videoEnabled = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "videoEnabled" }] : /* istanbul ignore next */ []));
+        this.micMuted = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "micMuted" }] : /* istanbul ignore next */ []));
+        this.currentUserId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentUserId" }] : /* istanbul ignore next */ []));
+        this.callId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "callId" }] : /* istanbul ignore next */ []));
+        this.ringTimeoutId = null;
+        this.outcomeSub = null;
+        this.callEventsSub = null;
+        this.closing = false;
+        this.accepting = false;
+        this.audioDevices = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "audioDevices" }] : /* istanbul ignore next */ []));
+        this.videoDevices = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "videoDevices" }] : /* istanbul ignore next */ []));
+        this.selectedAudioDeviceId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedAudioDeviceId" }] : /* istanbul ignore next */ []));
+        this.selectedVideoDeviceId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedVideoDeviceId" }] : /* istanbul ignore next */ []));
+        this.localVideoTrack = this.rtc.localVideoTrack;
+        this.remoteVideos = this.rtc.remoteVideos;
+        //#endregion
+        //#region ----- Computed Properties -----
+        this.peerDisplayName = computed(() => {
+            const conversation = this.conversation();
+            if (!conversation) {
+                return '';
+            }
+            return axmResolveConversationListAvatar(conversation).title;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "peerDisplayName" }] : /* istanbul ignore next */ []));
+        this.peerAvatarSrc = computed(() => {
+            const conversation = this.conversation();
+            if (!conversation) {
+                return '';
+            }
+            return axmResolveConversationListAvatar(conversation).avatar ?? '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "peerAvatarSrc" }] : /* istanbul ignore next */ []));
+        this.isGroupLayout = computed(() => {
+            const conversation = this.conversation();
+            if (!conversation) {
+                return false;
+            }
+            return conversation.type === 'group' || (conversation.participants?.length ?? 0) > 2;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isGroupLayout" }] : /* istanbul ignore next */ []));
+        this.showStage = computed(() => {
+            if (this.phase() === 'active' || this.mediaType() === 'video' || this.videoEnabled()) {
+                return true;
+            }
+            return this.remoteVideos().length > 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showStage" }] : /* istanbul ignore next */ []));
+        /** Voice ring / waiting without a video stage — center the profile block. */
+        this.idleLayout = computed(() => {
+            if (this.showStage()) {
+                return false;
+            }
+            const phase = this.phase();
+            return phase === 'incoming' || phase === 'outgoing-waiting' || phase === 'connecting';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "idleLayout" }] : /* istanbul ignore next */ []));
+        this.headerAvatarSize = computed(() => (this.showStage() ? 48 : 128), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerAvatarSize" }] : /* istanbul ignore next */ []));
+        this.phaseTextKey = computed(() => {
+            switch (this.phase()) {
+                case 'incoming':
+                    return '@conversation:chat.call.is-calling';
+                case 'connecting':
+                    return '@conversation:chat.call.connecting';
+                case 'active':
+                    return '@conversation:chat.call.connected';
+                default:
+                    return '@conversation:chat.call.waiting';
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "phaseTextKey" }] : /* istanbul ignore next */ []));
+        this.primaryRemoteVideo = computed(() => this.remoteVideos()[0] ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "primaryRemoteVideo" }] : /* istanbul ignore next */ []));
+        this.selfParticipant = computed(() => {
+            const conversation = this.conversation();
+            const currentUserId = this.currentUserId();
+            if (!conversation || !currentUserId) {
+                return null;
+            }
+            const self = conversation.participants?.find((participant) => participant.id === currentUserId);
+            return {
+                id: currentUserId,
+                name: self?.name ?? 'You',
+                avatar: self?.avatar,
+                isSelf: true,
+                micMuted: this.micMuted(),
+                videoEnabled: this.videoEnabled(),
+                speaking: !this.micMuted(),
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selfParticipant" }] : /* istanbul ignore next */ []));
+        this.sidebarParticipants = computed(() => {
+            const conversation = this.conversation();
+            const currentUserId = this.currentUserId();
+            if (!conversation) {
+                return [];
+            }
+            const remotes = (conversation.participants ?? [])
+                .filter((participant) => participant.id !== currentUserId)
+                .map((participant) => ({
+                id: participant.id,
+                name: participant.name,
+                avatar: participant.avatar,
+                isSelf: false,
+                micMuted: false,
+                videoEnabled: this.remoteVideos().some((item) => item.participantId === participant.id),
+                speaking: this.remoteVideos().some((item) => item.participantId === participant.id),
+            }));
+            const self = this.selfParticipant();
+            return self ? [...remotes, self] : remotes;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sidebarParticipants" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const remoteCount = this.rtc.remoteParticipantCount();
+            const connectionState = this.rtc.connectionState();
+            const phase = this.phase();
+            if (connectionState === ConnectionState.Connected &&
+                remoteCount > 0 &&
+                (phase === 'outgoing-waiting' || phase === 'connecting')) {
+                this.#clearRingTimeout();
+                this.ringer.stop();
+                this.phase.set('active');
+                void this.rtc.ensureAudioPlayback();
+            }
+        });
+    }
+    ngOnInit() {
+        this.outcomeSub = this.realtimeBus.messageStream$.subscribe((message) => {
+            const log = axmReadChatCallLog(message);
+            const currentCallId = this.callId();
+            if (!log || !currentCallId || log.callId !== currentCallId) {
+                return;
+            }
+            void this.#closeFromRemoteLog();
+        });
+        this.callEventsSub = this.callEvents.events$.subscribe((payload) => {
+            const currentCallId = this.callId();
+            if (!currentCallId || payload.callId !== currentCallId) {
+                return;
+            }
+            if (payload.fromUserId === this.currentUserId()) {
+                return;
+            }
+            if (payload.action === 'accept') {
+                void this.#onPeerAccepted();
+                return;
+            }
+            if (payload.action === 'end') {
+                void this.#closeFromRemoteEnd();
+                return;
+            }
+            if (payload.action === 'decline' || payload.action === 'cancel') {
+                void this.#closeFromRemoteLog();
+            }
+        });
+        void this.#bootstrap();
+    }
+    ngOnDestroy() {
+        this.ringer.stop();
+        this.#clearRingTimeout();
+        this.outcomeSub?.unsubscribe();
+        this.callEventsSub?.unsubscribe();
+        if (!this.closing) {
+            const phase = this.phase();
+            if (phase === 'incoming') {
+                void this.#logOutcome('declined');
+            }
+            else if (phase === 'outgoing-waiting') {
+                void this.#logOutcome('cancelled');
+            }
+        }
+        this.signalInbox.releaseCall(this.callId());
+        void this.rtc.disconnect();
+        super.ngOnDestroy();
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
+    onToggleVideo() {
+        void this.#setVideoEnabled(!this.videoEnabled());
+    }
+    onToggleMute() {
+        const nextMuted = !this.micMuted();
+        this.micMuted.set(nextMuted);
+        void this.rtc.setMicrophoneEnabled(!nextMuted);
+        if (!nextMuted) {
+            void this.rtc.ensureAudioPlayback();
+        }
+    }
+    async onScreencast() {
+        try {
+            await this.rtc.toggleScreenShare(!this.rtc.isScreenSharing());
+        }
+        catch {
+            const message = await this.translationService.translateAsync('@conversation:chat.call.media-error');
+            this.#toast(message, 'danger');
+        }
+    }
+    onEndCall() {
+        if (this.phase() === 'outgoing-waiting') {
+            void this.#finishWithLog('cancelled');
+            return;
+        }
+        void this.#endActiveCall();
+    }
+    onAccept() {
+        void this.#acceptIncoming();
+    }
+    onDecline() {
+        void this.#finishWithLog('declined');
+    }
+    async onAddPeople() {
+        const message = await this.translationService.translateAsync('@conversation:chat.call.add-people-soon');
+        this.#toast(message, 'default');
+    }
+    onRequestDevices(kind) {
+        void this.#refreshDevices(kind);
+    }
+    onPickDevice(choice) {
+        if (choice.kind === 'audioinput') {
+            this.selectedAudioDeviceId.set(choice.deviceId);
+        }
+        else {
+            this.selectedVideoDeviceId.set(choice.deviceId);
+        }
+        void this.rtc.switchInputDevice(choice.kind, choice.deviceId);
+    }
+    async onShareLink() {
+        try {
+            await navigator.clipboard.writeText(window.location.href);
+            const message = await this.translationService.translateAsync('@conversation:chat.call.link-copied');
+            this.#toast(message, 'success');
+        }
+        catch {
+            const message = await this.translationService.translateAsync('@conversation:chat.call.link-copy-failed');
+            this.#toast(message, 'danger');
+        }
+    }
+    //#endregion
+    //#region ----- Bootstrap -----
+    async #bootstrap() {
+        const conversation = this.sessionConversation;
+        const conversationId = conversation?.id?.trim();
+        const media = this.sessionMedia === 'video' ? 'video' : 'voice';
+        const phase = this.sessionPhase === 'incoming' ||
+            this.sessionPhase === 'active' ||
+            this.sessionPhase === 'connecting' ||
+            this.sessionPhase === 'outgoing-waiting'
+            ? this.sessionPhase
+            : 'outgoing-waiting';
+        this.mediaType.set(media);
+        this.phase.set(phase);
+        this.videoEnabled.set(media === 'video');
+        this.callId.set(this.sessionCallId?.trim() || crypto.randomUUID());
+        if (!conversation || !conversationId) {
+            this.loading.set(false);
+            this.error.set(true);
+            return;
+        }
+        this.loading.set(true);
+        this.error.set(false);
+        this.errorMessage.set(null);
+        this.conversation.set(conversation);
+        try {
+            const currentUser = await this.userApi.getCurrentUser();
+            this.currentUserId.set(currentUser.id);
+            this.videoEnabled.set(media === 'video');
+            this.micMuted.set(false);
+            if (phase === 'incoming') {
+                this.ringer.playIncoming();
+                void this.#refreshDevices();
+                return;
+            }
+            this.phase.set('outgoing-waiting');
+            this.ringer.playOutgoing();
+            await this.#ringPeers(currentUser.id);
+            this.#armRingTimeout();
+            void this.#connectMedia(currentUser.id, currentUser.name, conversationId, media).catch(async (error) => {
+                const fallback = await this.translationService.translateAsync('@conversation:chat.call.connect-error');
+                this.#toast(error instanceof Error && error.message ? error.message : fallback, 'danger');
+            });
+            void this.#refreshDevices();
+        }
+        catch (error) {
+            this.error.set(true);
+            const fallback = await this.translationService.translateAsync('@conversation:chat.call.connect-error');
+            this.errorMessage.set(error instanceof Error && error.message ? error.message : fallback);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    //#endregion
+    //#region ----- Call Signaling -----
+    async #connectMedia(participantIdentity, participantName, conversationId, media) {
+        await this.rtc.connect({
+            conversationId,
+            participantIdentity,
+            participantName,
+            media,
+        });
+    }
+    async #ringPeers(fromUserId) {
+        const conversation = this.conversation();
+        const callId = this.callId();
+        if (!conversation?.id || !callId) {
+            return;
+        }
+        const targetUserIds = (conversation.participants ?? [])
+            .map((participant) => participant.id?.trim())
+            .filter((id) => Boolean(id) && id !== fromUserId);
+        try {
+            await this.callSignal.signal({
+                conversationId: conversation.id,
+                action: 'invite',
+                media: this.mediaType(),
+                callId,
+                targetUserIds,
+            });
+        }
+        catch {
+            // Built-in realtime is the primary ring path.
+        }
+    }
+    async #acceptIncoming() {
+        if (this.accepting || this.closing) {
+            return;
+        }
+        const conversationId = this.conversation()?.id?.trim();
+        const currentUserId = this.currentUserId();
+        if (!conversationId || !currentUserId) {
+            return;
+        }
+        this.accepting = true;
+        this.#clearRingTimeout();
+        this.ringer.stop();
+        this.phase.set('connecting');
+        void this.#signalCallAction('accept');
+        try {
+            await this.#connectMedia(currentUserId, this.#selfDisplayName(currentUserId), conversationId, this.mediaType());
+            this.phase.set('active');
+            void this.rtc.ensureAudioPlayback();
+            if (this.mediaType() === 'video') {
+                void this.#setVideoEnabled(true);
+            }
+        }
+        catch (error) {
+            this.accepting = false;
+            this.phase.set('incoming');
+            this.ringer.playIncoming();
+            const fallback = await this.translationService.translateAsync('@conversation:chat.call.connect-error');
+            this.#toast(error instanceof Error && error.message ? error.message : fallback, 'danger');
+        }
+    }
+    async #onPeerAccepted() {
+        if (this.closing) {
+            return;
+        }
+        this.#clearRingTimeout();
+        this.ringer.stop();
+        this.phase.set(this.rtc.connectionState() === ConnectionState.Connected ? 'active' : 'connecting');
+        void this.rtc.ensureAudioPlayback();
+    }
+    async #signalCallAction(action) {
+        const conversation = this.conversation();
+        const callId = this.callId();
+        const fromUserId = this.currentUserId();
+        if (!conversation?.id || !callId || !fromUserId) {
+            return;
+        }
+        const targetUserIds = (conversation.participants ?? [])
+            .map((participant) => participant.id?.trim())
+            .filter((id) => Boolean(id) && id !== fromUserId);
+        try {
+            await this.callSignal.signal({
+                conversationId: conversation.id,
+                action,
+                media: this.mediaType(),
+                callId,
+                targetUserIds,
+            });
+        }
+        catch {
+            // Media join is the source of truth; signaling is best-effort.
+        }
+    }
+    #selfDisplayName(currentUserId) {
+        return this.conversation()?.participants?.find((participant) => participant.id === currentUserId)?.name;
+    }
+    #armRingTimeout() {
+        this.#clearRingTimeout();
+        this.ringTimeoutId = setTimeout(() => {
+            if (this.phase() === 'outgoing-waiting') {
+                this.ringer.stop();
+                void this.translationService
+                    .translateAsync('@conversation:chat.call.no-answer')
+                    .then((message) => this.#toast(message, 'default'));
+            }
+        }, 45_000);
+    }
+    #clearRingTimeout() {
+        if (this.ringTimeoutId != null) {
+            clearTimeout(this.ringTimeoutId);
+            this.ringTimeoutId = null;
+        }
+    }
+    async #finishWithLog(outcome) {
+        if (this.closing) {
+            return;
+        }
+        this.closing = true;
+        this.ringer.stop();
+        this.#clearRingTimeout();
+        await this.#signalCallAction(outcome === 'declined' ? 'decline' : 'cancel');
+        await this.#logOutcome(outcome);
+        await this.#closeLocal();
+    }
+    async #endActiveCall() {
+        if (this.closing) {
+            return;
+        }
+        this.closing = true;
+        this.ringer.stop();
+        this.#clearRingTimeout();
+        await this.#signalCallAction('end');
+        await this.#closeLocal();
+    }
+    async #logOutcome(outcome) {
+        const conversationId = this.conversation()?.id?.trim();
+        const callId = this.callId();
+        if (!conversationId || !callId) {
+            return;
+        }
+        try {
+            await this.callSignal.log({
+                conversationId,
+                outcome,
+                media: this.mediaType(),
+                callId,
+            });
+        }
+        catch {
+            // Transcript write is best-effort; still close the session.
+        }
+    }
+    async #closeFromRemoteLog() {
+        if (this.closing || this.phase() === 'active') {
+            return;
+        }
+        this.closing = true;
+        this.ringer.stop();
+        this.#clearRingTimeout();
+        await this.#closeLocal();
+    }
+    async #closeFromRemoteEnd() {
+        if (this.closing) {
+            return;
+        }
+        this.closing = true;
+        this.ringer.stop();
+        this.#clearRingTimeout();
+        await this.#closeLocal();
+    }
+    async #closeLocal() {
+        this.ringer.stop();
+        this.signalInbox.releaseCall(this.callId());
+        await this.rtc.disconnect();
+        this.close();
+    }
+    //#endregion
+    //#region ----- Media Helpers -----
+    async #refreshDevices(kind) {
+        try {
+            if (!kind || kind === 'audioinput') {
+                this.audioDevices.set(await this.rtc.listInputDevices('audioinput'));
+            }
+            if (!kind || kind === 'videoinput') {
+                this.videoDevices.set(await this.rtc.listInputDevices('videoinput'));
+            }
+        }
+        catch {
+            // Device lists stay empty until the browser grants media permission.
+        }
+    }
+    async #setVideoEnabled(enabled) {
+        this.videoEnabled.set(enabled);
+        if (enabled) {
+            this.mediaType.set('video');
+        }
+        try {
+            await this.rtc.setCameraEnabled(enabled);
+        }
+        catch {
+            this.videoEnabled.set(false);
+            const message = await this.translationService.translateAsync('@conversation:chat.call.media-error');
+            this.#toast(message, 'danger');
+        }
+    }
+    #toast(content, color) {
+        this.toastService.show({
+            color,
+            content,
+            location: 'bottom-center',
+            timeOut: 3000,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallSessionPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMChatCallSessionPageComponent, isStandalone: true, selector: "axm-chat-call-session-page", host: { classAttribute: "ax-dark" }, providers: [...AXM_CHAT_CALL_RTC_PROVIDERS], usesInheritance: true, ngImport: i0, template: "<div class=\"axm-chat-call-session\" [class.axm-chat-call-session--group]=\"isGroupLayout()\">\n  <!-- ----- Loading conversation / connecting RTC ----- -->\n  @if (loading()) {\n    <div class=\"axm-chat-call-session__status-block\">\n      {{ '@conversation:chat.call.loading' | translate | async }}\n    </div>\n  }\n  <!-- ----- Load / connect error ----- -->\n  @else if (error()) {\n    <div class=\"axm-chat-call-session__status-block axm-chat-call-session__status-block--error\">\n      <p>{{ errorMessage() || ('@conversation:chat.call.load-error' | translate | async) }}</p>\n      <button type=\"button\" class=\"axm-chat-call-session__text-button\" (click)=\"onEndCall()\">\n        {{ '@conversation:chat.call.cancel' | translate | async }}\n      </button>\n    </div>\n  }\n  <!-- ----- Call session ----- -->\n  @else {\n    <div class=\"axm-chat-call-session__shell\">\n      <div\n        class=\"axm-chat-call-session__main\"\n        [class.axm-chat-call-session__main--idle]=\"idleLayout()\"\n      >\n        <div class=\"axm-chat-call-session__body\">\n          <!-- ----- Profile header (hidden for active group grid) ----- -->\n          @if (!(isGroupLayout() && phase() === 'active')) {\n            <div\n              class=\"axm-chat-call-session__header\"\n              [class.axm-chat-call-session__header--compact]=\"showStage()\"\n            >\n              <axp-avatar\n                [size]=\"headerAvatarSize()\"\n                [fullName]=\"peerDisplayName()\"\n                [src]=\"peerAvatarSrc()\"\n              />\n              <h1 class=\"axm-chat-call-session__name\">{{ peerDisplayName() }}</h1>\n              <p class=\"axm-chat-call-session__phase-text\">{{ phaseTextKey() | translate | async }}</p>\n            </div>\n          }\n\n          <!-- ----- Video / tile stage ----- -->\n          @if (showStage()) {\n          <div\n            class=\"axm-chat-call-session__stage\"\n            [class.axm-chat-call-session__stage--group]=\"isGroupLayout() && phase() === 'active'\"\n          >\n            @if (isGroupLayout() && phase() === 'active') {\n              @for (remote of remoteVideos(); track remote.participantId + ':' + remote.track.sid) {\n                <div class=\"axm-chat-call-session__tile axm-chat-call-session__tile--speaking\">\n                  <video\n                    class=\"axm-chat-call-session__video\"\n                    autoplay\n                    playsinline\n                    [axmChatCallTrack]=\"remote.track\"\n                  ></video>\n                  <span class=\"axm-chat-call-session__tile-name\">{{ remote.participantName }}</span>\n                </div>\n              }\n              <div\n                class=\"axm-chat-call-session__tile\"\n                [class.axm-chat-call-session__tile--speaking]=\"!micMuted()\"\n              >\n                @if (videoEnabled() && localVideoTrack(); as localTrack) {\n                  <video\n                    class=\"axm-chat-call-session__video\"\n                    autoplay\n                    playsinline\n                    muted\n                    [axmChatCallTrack]=\"localTrack\"\n                  ></video>\n                } @else if (selfParticipant(); as self) {\n                  <axp-avatar [size]=\"96\" [fullName]=\"self.name\" [src]=\"self.avatar ?? ''\" />\n                }\n                <span class=\"axm-chat-call-session__tile-name\">\n                  {{ selfParticipant()?.name || '' }}\n                </span>\n              </div>\n            } @else {\n              <div class=\"axm-chat-call-session__tile axm-chat-call-session__tile--primary\">\n                @if (primaryRemoteVideo(); as remote) {\n                  <video\n                    class=\"axm-chat-call-session__video\"\n                    autoplay\n                    playsinline\n                    [axmChatCallTrack]=\"remote.track\"\n                  ></video>\n                }\n                <!-- ----- Local camera fills the stage until the peer joins ----- -->\n                @else if (videoEnabled() && localVideoTrack(); as localTrack) {\n                  <video\n                    class=\"axm-chat-call-session__video\"\n                    autoplay\n                    playsinline\n                    muted\n                    [axmChatCallTrack]=\"localTrack\"\n                  ></video>\n                }\n                <!-- ----- Avatar placeholder when no camera track is published ----- -->\n                @else {\n                  <axp-avatar [size]=\"160\" [fullName]=\"peerDisplayName()\" [src]=\"peerAvatarSrc()\" />\n                }\n              </div>\n\n              @if (primaryRemoteVideo() && videoEnabled() && localVideoTrack(); as localTrack) {\n                <div class=\"axm-chat-call-session__pip\">\n                  <video\n                    class=\"axm-chat-call-session__video\"\n                    autoplay\n                    playsinline\n                    muted\n                    [axmChatCallTrack]=\"localTrack\"\n                  ></video>\n                </div>\n              }\n            }\n          </div>\n        }\n        </div>\n\n        <axm-chat-call-controls\n          [phase]=\"phase()\"\n          [videoEnabled]=\"videoEnabled()\"\n          [micMuted]=\"micMuted()\"\n          [showAddPeople]=\"phase() === 'active'\"\n          [showScreencast]=\"phase() === 'active'\"\n          [audioDevices]=\"audioDevices()\"\n          [videoDevices]=\"videoDevices()\"\n          [selectedAudioDeviceId]=\"selectedAudioDeviceId()\"\n          [selectedVideoDeviceId]=\"selectedVideoDeviceId()\"\n          (screencast)=\"onScreencast()\"\n          (toggleVideo)=\"onToggleVideo()\"\n          (toggleMute)=\"onToggleMute()\"\n          (endCall)=\"onEndCall()\"\n          (accept)=\"onAccept()\"\n          (decline)=\"onDecline()\"\n          (addPeople)=\"onAddPeople()\"\n          (requestDevices)=\"onRequestDevices($event)\"\n          (pickDevice)=\"onPickDevice($event)\"\n        />\n      </div>\n\n      @if (isGroupLayout() && phase() === 'active') {\n        <axm-chat-call-sidebar\n          [participants]=\"sidebarParticipants()\"\n          (addPeople)=\"onAddPeople()\"\n          (shareLink)=\"onShareLink()\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".axm-chat-call-session-overlay .ax-popup-header{display:none}.axm-chat-call-session-overlay .ax-popup .ax-popup-body-container{overflow:hidden;display:flex;flex-direction:column;height:100%}axm-chat-call-session-page{display:flex;flex:1;flex-direction:column;width:100%;height:100%;min-height:0}.axm-chat-call-session{box-sizing:border-box;display:flex;flex:1;width:100%;min-height:0;height:100%}.axm-chat-call-session__shell{display:flex;flex:1;width:100%;min-height:0;height:100%}.axm-chat-call-session__main{display:flex;flex:1;flex-direction:column;align-items:center;min-width:0;min-height:0;padding:1.25rem 1.25rem .5rem}.axm-chat-call-session__body{display:flex;flex:1;flex-direction:column;align-items:center;width:100%;min-height:0}.axm-chat-call-session__main--idle .axm-chat-call-session__body{justify-content:center}.axm-chat-call-session__header{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:1.5rem;text-align:center}.axm-chat-call-session__main--idle .axm-chat-call-session__header{margin-top:0}.axm-chat-call-session__header--compact{margin-top:.25rem;margin-bottom:.5rem}.axm-chat-call-session__name{margin:0;font-size:1.25rem;font-weight:700;line-height:1.3}.axm-chat-call-session__header--compact .axm-chat-call-session__name{font-size:1rem}.axm-chat-call-session__phase-text{margin:0;font-size:.875rem;opacity:.65}.axm-chat-call-session__stage{position:relative;display:flex;flex:1;align-items:center;justify-content:center;width:100%;min-height:0;margin:.75rem 0;overflow:hidden}.axm-chat-call-session__stage--group{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem;align-content:center;padding:.5rem}.axm-chat-call-session__tile{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:.75rem;background:#101113;border:2px solid transparent}.axm-chat-call-session__tile--primary{width:min(100%,36rem);aspect-ratio:3 / 4;max-height:min(70vh,40rem)}.axm-chat-call-session__stage--group .axm-chat-call-session__tile{aspect-ratio:3 / 4;min-height:12rem}.axm-chat-call-session__tile--speaking{border-color:#4caf50}.axm-chat-call-session__tile-name{position:absolute;inset-inline-start:.65rem;bottom:.65rem;padding:.15rem .45rem;border-radius:.35rem;background:#00000073;font-size:.75rem}.axm-chat-call-session__video{width:100%;height:100%;object-fit:cover;background:#000}.axm-chat-call-session__pip{position:absolute;right:1rem;bottom:1rem;width:8.5rem;aspect-ratio:3 / 4;overflow:hidden;border-radius:.5rem;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 24px #00000059;background:#000}.axm-chat-call-session__status-block{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:100%;min-height:0;padding:2rem;text-align:center}.axm-chat-call-session__status-block--error{color:#ff8a80}.axm-chat-call-session__text-button{padding:.5rem 1rem;border:1px solid currentColor;border-radius:9999px;background:transparent;color:inherit;cursor:pointer;opacity:.85}axm-chat-call-controls{flex-shrink:0;margin-top:auto;width:100%}\n"], dependencies: [{ kind: "component", type: AXPAvatarComponent, selector: "axp-avatar", inputs: ["size", "src", "fullName", "fallbackText", "placeholder"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXMChatCallControlsComponent, selector: "axm-chat-call-controls", inputs: ["phase", "videoEnabled", "micMuted", "showAddPeople", "showScreencast", "audioDevices", "videoDevices", "selectedAudioDeviceId", "selectedVideoDeviceId"], outputs: ["screencast", "toggleVideo", "toggleMute", "endCall", "accept", "decline", "addPeople", "pickDevice", "requestDevices"] }, { kind: "component", type: AXMChatCallSidebarComponent, selector: "axm-chat-call-sidebar", inputs: ["participants"], outputs: ["addPeople", "shareLink"] }, { kind: "directive", type: AXMChatCallVideoAttachDirective, selector: "video[axmChatCallTrack]", inputs: ["axmChatCallTrack"] }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatCallSessionPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-chat-call-session-page', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ax-dark',
+                    }, providers: [...AXM_CHAT_CALL_RTC_PROVIDERS], imports: [
+                        AXPAvatarComponent,
+                        AXTranslationModule,
+                        AsyncPipe,
+                        AXMChatCallControlsComponent,
+                        AXMChatCallSidebarComponent,
+                        AXMChatCallVideoAttachDirective,
+                    ], template: "<div class=\"axm-chat-call-session\" [class.axm-chat-call-session--group]=\"isGroupLayout()\">\n  <!-- ----- Loading conversation / connecting RTC ----- -->\n  @if (loading()) {\n    <div class=\"axm-chat-call-session__status-block\">\n      {{ '@conversation:chat.call.loading' | translate | async }}\n    </div>\n  }\n  <!-- ----- Load / connect error ----- -->\n  @else if (error()) {\n    <div class=\"axm-chat-call-session__status-block axm-chat-call-session__status-block--error\">\n      <p>{{ errorMessage() || ('@conversation:chat.call.load-error' | translate | async) }}</p>\n      <button type=\"button\" class=\"axm-chat-call-session__text-button\" (click)=\"onEndCall()\">\n        {{ '@conversation:chat.call.cancel' | translate | async }}\n      </button>\n    </div>\n  }\n  <!-- ----- Call session ----- -->\n  @else {\n    <div class=\"axm-chat-call-session__shell\">\n      <div\n        class=\"axm-chat-call-session__main\"\n        [class.axm-chat-call-session__main--idle]=\"idleLayout()\"\n      >\n        <div class=\"axm-chat-call-session__body\">\n          <!-- ----- Profile header (hidden for active group grid) ----- -->\n          @if (!(isGroupLayout() && phase() === 'active')) {\n            <div\n              class=\"axm-chat-call-session__header\"\n              [class.axm-chat-call-session__header--compact]=\"showStage()\"\n            >\n              <axp-avatar\n                [size]=\"headerAvatarSize()\"\n                [fullName]=\"peerDisplayName()\"\n                [src]=\"peerAvatarSrc()\"\n              />\n              <h1 class=\"axm-chat-call-session__name\">{{ peerDisplayName() }}</h1>\n              <p class=\"axm-chat-call-session__phase-text\">{{ phaseTextKey() | translate | async }}</p>\n            </div>\n          }\n\n          <!-- ----- Video / tile stage ----- -->\n          @if (showStage()) {\n          <div\n            class=\"axm-chat-call-session__stage\"\n            [class.axm-chat-call-session__stage--group]=\"isGroupLayout() && phase() === 'active'\"\n          >\n            @if (isGroupLayout() && phase() === 'active') {\n              @for (remote of remoteVideos(); track remote.participantId + ':' + remote.track.sid) {\n                <div class=\"axm-chat-call-session__tile axm-chat-call-session__tile--speaking\">\n                  <video\n                    class=\"axm-chat-call-session__video\"\n                    autoplay\n                    playsinline\n                    [axmChatCallTrack]=\"remote.track\"\n                  ></video>\n                  <span class=\"axm-chat-call-session__tile-name\">{{ remote.participantName }}</span>\n                </div>\n              }\n              <div\n                class=\"axm-chat-call-session__tile\"\n                [class.axm-chat-call-session__tile--speaking]=\"!micMuted()\"\n              >\n                @if (videoEnabled() && localVideoTrack(); as localTrack) {\n                  <video\n                    class=\"axm-chat-call-session__video\"\n                    autoplay\n                    playsinline\n                    muted\n                    [axmChatCallTrack]=\"localTrack\"\n                  ></video>\n                } @else if (selfParticipant(); as self) {\n                  <axp-avatar [size]=\"96\" [fullName]=\"self.name\" [src]=\"self.avatar ?? ''\" />\n                }\n                <span class=\"axm-chat-call-session__tile-name\">\n                  {{ selfParticipant()?.name || '' }}\n                </span>\n              </div>\n            } @else {\n              <div class=\"axm-chat-call-session__tile axm-chat-call-session__tile--primary\">\n                @if (primaryRemoteVideo(); as remote) {\n                  <video\n                    class=\"axm-chat-call-session__video\"\n                    autoplay\n                    playsinline\n                    [axmChatCallTrack]=\"remote.track\"\n                  ></video>\n                }\n                <!-- ----- Local camera fills the stage until the peer joins ----- -->\n                @else if (videoEnabled() && localVideoTrack(); as localTrack) {\n                  <video\n                    class=\"axm-chat-call-session__video\"\n                    autoplay\n                    playsinline\n                    muted\n                    [axmChatCallTrack]=\"localTrack\"\n                  ></video>\n                }\n                <!-- ----- Avatar placeholder when no camera track is published ----- -->\n                @else {\n                  <axp-avatar [size]=\"160\" [fullName]=\"peerDisplayName()\" [src]=\"peerAvatarSrc()\" />\n                }\n              </div>\n\n              @if (primaryRemoteVideo() && videoEnabled() && localVideoTrack(); as localTrack) {\n                <div class=\"axm-chat-call-session__pip\">\n                  <video\n                    class=\"axm-chat-call-session__video\"\n                    autoplay\n                    playsinline\n                    muted\n                    [axmChatCallTrack]=\"localTrack\"\n                  ></video>\n                </div>\n              }\n            }\n          </div>\n        }\n        </div>\n\n        <axm-chat-call-controls\n          [phase]=\"phase()\"\n          [videoEnabled]=\"videoEnabled()\"\n          [micMuted]=\"micMuted()\"\n          [showAddPeople]=\"phase() === 'active'\"\n          [showScreencast]=\"phase() === 'active'\"\n          [audioDevices]=\"audioDevices()\"\n          [videoDevices]=\"videoDevices()\"\n          [selectedAudioDeviceId]=\"selectedAudioDeviceId()\"\n          [selectedVideoDeviceId]=\"selectedVideoDeviceId()\"\n          (screencast)=\"onScreencast()\"\n          (toggleVideo)=\"onToggleVideo()\"\n          (toggleMute)=\"onToggleMute()\"\n          (endCall)=\"onEndCall()\"\n          (accept)=\"onAccept()\"\n          (decline)=\"onDecline()\"\n          (addPeople)=\"onAddPeople()\"\n          (requestDevices)=\"onRequestDevices($event)\"\n          (pickDevice)=\"onPickDevice($event)\"\n        />\n      </div>\n\n      @if (isGroupLayout() && phase() === 'active') {\n        <axm-chat-call-sidebar\n          [participants]=\"sidebarParticipants()\"\n          (addPeople)=\"onAddPeople()\"\n          (shareLink)=\"onShareLink()\"\n        />\n      }\n    </div>\n  }\n</div>\n", styles: [".axm-chat-call-session-overlay .ax-popup-header{display:none}.axm-chat-call-session-overlay .ax-popup .ax-popup-body-container{overflow:hidden;display:flex;flex-direction:column;height:100%}axm-chat-call-session-page{display:flex;flex:1;flex-direction:column;width:100%;height:100%;min-height:0}.axm-chat-call-session{box-sizing:border-box;display:flex;flex:1;width:100%;min-height:0;height:100%}.axm-chat-call-session__shell{display:flex;flex:1;width:100%;min-height:0;height:100%}.axm-chat-call-session__main{display:flex;flex:1;flex-direction:column;align-items:center;min-width:0;min-height:0;padding:1.25rem 1.25rem .5rem}.axm-chat-call-session__body{display:flex;flex:1;flex-direction:column;align-items:center;width:100%;min-height:0}.axm-chat-call-session__main--idle .axm-chat-call-session__body{justify-content:center}.axm-chat-call-session__header{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:1.5rem;text-align:center}.axm-chat-call-session__main--idle .axm-chat-call-session__header{margin-top:0}.axm-chat-call-session__header--compact{margin-top:.25rem;margin-bottom:.5rem}.axm-chat-call-session__name{margin:0;font-size:1.25rem;font-weight:700;line-height:1.3}.axm-chat-call-session__header--compact .axm-chat-call-session__name{font-size:1rem}.axm-chat-call-session__phase-text{margin:0;font-size:.875rem;opacity:.65}.axm-chat-call-session__stage{position:relative;display:flex;flex:1;align-items:center;justify-content:center;width:100%;min-height:0;margin:.75rem 0;overflow:hidden}.axm-chat-call-session__stage--group{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.75rem;align-content:center;padding:.5rem}.axm-chat-call-session__tile{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:.75rem;background:#101113;border:2px solid transparent}.axm-chat-call-session__tile--primary{width:min(100%,36rem);aspect-ratio:3 / 4;max-height:min(70vh,40rem)}.axm-chat-call-session__stage--group .axm-chat-call-session__tile{aspect-ratio:3 / 4;min-height:12rem}.axm-chat-call-session__tile--speaking{border-color:#4caf50}.axm-chat-call-session__tile-name{position:absolute;inset-inline-start:.65rem;bottom:.65rem;padding:.15rem .45rem;border-radius:.35rem;background:#00000073;font-size:.75rem}.axm-chat-call-session__video{width:100%;height:100%;object-fit:cover;background:#000}.axm-chat-call-session__pip{position:absolute;right:1rem;bottom:1rem;width:8.5rem;aspect-ratio:3 / 4;overflow:hidden;border-radius:.5rem;border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 24px #00000059;background:#000}.axm-chat-call-session__status-block{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:100%;min-height:0;padding:2rem;text-align:center}.axm-chat-call-session__status-block--error{color:#ff8a80}.axm-chat-call-session__text-button{padding:.5rem 1rem;border:1px solid currentColor;border-radius:9999px;background:transparent;color:inherit;cursor:pointer;opacity:.85}axm-chat-call-controls{flex-shrink:0;margin-top:auto;width:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+export { AXMChatCallSessionPageComponent };
+//# sourceMappingURL=acorex-platform-module-conversation-client-chat-call-session-page.component-DkX4JSbN.mjs.map