@acorex-platform/module-conversation-client 0.0.28 → 0.0.32

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

@@ -1,871 +0,0 @@
-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