@acorex-platform/module-conversation-client 0.0.38 → 0.0.46

package/fesm2022/{acorex-platform-module-conversation-client-chat-call-start-popup.component-DXkqkS50.mjs.map → acorex-platform-module-conversation-client-chat-call-start-popup.component-BbEhkLLh.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"acorex-platform-module-conversation-client-chat-call-start-popup.component-DXkqkS50.mjs","sources":["../../../../libs/modules/conversation/client/src/lib/features/chat/plugins/call/chat-call-start-popup.component.ts","../../../../libs/modules/conversation/client/src/lib/features/chat/plugins/call/chat-call-start-popup.component.html"],"sourcesContent":["//#region ----- Imports -----\n\nimport { AXPAvatarComponent } from '@acorex-platform/framework-client/layout/components';\nimport { AXPRtcApiAbstract } from '@acorex-platform/extension-rtc-core-gateway';\nimport type { AXConversation } from '@acorex/components/conversation';\nimport { AXBasePageComponent } from '@acorex/components/page';\nimport { AXPopupService } from '@acorex/components/popup';\nimport { AXToastService } from '@acorex/components/toast';\nimport { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\n\nimport { axmResolveConversationListAvatar } from '../utils/chat-avatar.util';\nimport { axmEnsureChatCallRtcReady } from './chat-call-rtc-ready.util';\nimport type { AXMChatCallMediaType } from './chat-call-session.types';\nimport { axmOpenChatCallSessionDialog } from './open-chat-call-session.dialog';\nimport { AXMChatCallActiveSessionService } from './chat-call-active-session.service';\n\n//#endregion\n\n//#region ----- Types -----\n\nexport type { AXMChatCallMediaType } from './chat-call-session.types';\n\nexport interface AXMChatCallStartPopupData {\n  conversation: AXConversation;\n}\n\n//#endregion\n\n//#region ----- Component -----\n\n/**\n * Call-start popup: choose voice or video for a conversation contact.\n */\n@Component({\n  selector: 'axm-chat-call-start-popup',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'ax-dark',\n  },\n  imports: [AXPAvatarComponent, AXTranslationModule, AsyncPipe],\n  templateUrl: './chat-call-start-popup.component.html',\n  styles: [\n    `\n      .axm-chat-call-start-overlay .ax-popup {\n        width: min(24rem, 92vw) !important;\n        max-width: 92vw;\n      }\n\n      axm-chat-call-start-popup {\n        display: block;\n        width: 100%;\n      }\n\n      .axm-chat-call-start {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        width: 100%;\n        min-height: 0;\n        padding: 2rem 1.25rem 1.5rem;\n      }\n\n      .axm-chat-call-start__content {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        max-width: 22rem;\n        min-height: 0;\n        gap: 2rem;\n      }\n\n      .axm-chat-call-start__profile {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n        gap: 0.625rem;\n        margin-top: 0;\n      }\n\n      .axm-chat-call-start__avatar {\n        margin-bottom: 0.25rem;\n      }\n\n      .axm-chat-call-start__name {\n        margin: 0;\n        font-size: 1.25rem;\n        font-weight: 700;\n        line-height: 1.3;\n      }\n\n      .axm-chat-call-start__hint {\n        margin: 0;\n        max-width: 18rem;\n        font-size: 0.8125rem;\n        line-height: 1.45;\n        opacity: 0.65;\n      }\n\n      .axm-chat-call-start__actions {\n        display: flex;\n        align-items: flex-start;\n        justify-content: center;\n        width: 100%;\n        gap: 0.5rem;\n        padding-bottom: 0.25rem;\n      }\n\n      .axm-chat-call-start__action {\n        display: flex;\n        flex: 1 1 0;\n        min-width: 0;\n        max-width: 6.5rem;\n        flex-direction: column;\n        align-items: center;\n        gap: 0.5rem;\n        padding: 0;\n        border: 0;\n        background: transparent;\n        color: inherit;\n        cursor: pointer;\n      }\n\n      .axm-chat-call-start__action:focus-visible {\n        outline: 2px solid rgba(76, 175, 80, 0.8);\n        outline-offset: 4px;\n        border-radius: 0.5rem;\n      }\n\n      .axm-chat-call-start__action-circle {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 3.5rem;\n        height: 3.5rem;\n        border-radius: 9999px;\n        font-size: 1.25rem;\n      }\n\n      .axm-chat-call-start__action-circle--primary {\n        background: #4caf50;\n        color: #ffffff;\n      }\n\n      .axm-chat-call-start__action-circle--cancel {\n        background: #ffffff;\n        color: #1a1c1e;\n      }\n\n      .axm-chat-call-start__action-label {\n        font-size: 0.6875rem;\n        line-height: 1.25;\n        text-align: center;\n        white-space: normal;\n        word-break: break-word;\n      }\n\n      .axm-chat-call-start__status {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 1rem;\n        padding: 2rem;\n        text-align: center;\n        font-size: 0.9375rem;\n      }\n\n      .axm-chat-call-start__status--error {\n        color: #ff8a80;\n      }\n\n      .axm-chat-call-start__text-button {\n        padding: 0.5rem 1rem;\n        border: 1px solid currentColor;\n        border-radius: 9999px;\n        background: transparent;\n        color: inherit;\n        cursor: pointer;\n        opacity: 0.85;\n      }\n    `,\n  ],\n})\nexport class AXMChatCallStartPopupComponent extends AXBasePageComponent {\n  //#region ----- Services & Dependencies -----\n\n  private readonly popupService = inject(AXPopupService);\n  private readonly activeCallSessions = inject(AXMChatCallActiveSessionService);\n  private readonly rtcApi = inject(AXPRtcApiAbstract, { optional: true });\n  private readonly translationService = inject(AXTranslationService);\n  private readonly toastService = inject(AXToastService);\n\n  //#endregion\n\n  //#region ----- Popup Inputs -----\n\n  /** Assigned by {@link AXPopupService} via `data`. */\n  conversation?: AXConversation;\n\n  //#endregion\n\n  //#region ----- Computed Properties -----\n\n  protected get hasConversation(): boolean {\n    return !!this.conversation?.id?.trim();\n  }\n\n  protected get displayName(): string {\n    if (!this.conversation) {\n      return '';\n    }\n    return axmResolveConversationListAvatar(this.conversation).title;\n  }\n\n  protected get avatarSrc(): string {\n    if (!this.conversation) {\n      return '';\n    }\n    return axmResolveConversationListAvatar(this.conversation).avatar ?? '';\n  }\n\n  //#endregion\n\n  //#region ----- Event Handlers -----\n\n  protected onStartVideo(): void {\n    void this.#beginCall('video');\n  }\n\n  protected onStartVoice(): void {\n    void this.#beginCall('voice');\n  }\n\n  protected onCancel(): void {\n    this.close();\n  }\n\n  //#endregion\n\n  //#region ----- Call Actions -----\n\n  async #beginCall(mediaType: AXMChatCallMediaType): Promise<void> {\n    const conversation = this.conversation;\n    if (!conversation?.id?.trim()) {\n      return;\n    }\n\n    if (\n      !(await axmEnsureChatCallRtcReady({\n        rtc: this.rtcApi,\n        translation: this.translationService,\n        toast: this.toastService,\n      }))\n    ) {\n      return;\n    }\n\n    const popupService = this.popupService;\n    const activeCallSessions = this.activeCallSessions;\n    this.close();\n    await axmOpenChatCallSessionDialog({\n      conversation,\n      media: mediaType,\n      popupService,\n      activeCallSessions,\n    });\n  }\n\n  //#endregion\n}\n\n//#endregion\n","<div class=\"axm-chat-call-start\">\n  <!-- ----- Missing conversation payload ----- -->\n  @if (!hasConversation) {\n    <div class=\"axm-chat-call-start__status axm-chat-call-start__status--error\">\n      <p>{{ '@conversation:chat.call.load-error' | translate | async }}</p>\n      <button type=\"button\" class=\"axm-chat-call-start__text-button\" (click)=\"onCancel()\">\n        {{ '@conversation:chat.call.cancel' | translate | async }}\n      </button>\n    </div>\n  }\n  <!-- ----- Call start content ----- -->\n  @else {\n    <div class=\"axm-chat-call-start__content\">\n      <!-- ----- Contact avatar and name ----- -->\n      <div class=\"axm-chat-call-start__profile\">\n        <axp-avatar\n          class=\"axm-chat-call-start__avatar\"\n          [size]=\"96\"\n          [fullName]=\"displayName\"\n          [src]=\"avatarSrc\"\n        />\n        <h1 class=\"axm-chat-call-start__name\">{{ displayName }}</h1>\n        <p class=\"axm-chat-call-start__hint\">\n          {{ '@conversation:chat.call.hint' | translate | async }}\n        </p>\n      </div>\n\n      <!-- ----- Voice / cancel / video actions ----- -->\n      <div class=\"axm-chat-call-start__actions\">\n        <button\n          type=\"button\"\n          class=\"axm-chat-call-start__action\"\n          (click)=\"onStartVideo()\"\n        >\n          <span class=\"axm-chat-call-start__action-circle axm-chat-call-start__action-circle--primary\">\n            <i class=\"fa-solid fa-video\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"axm-chat-call-start__action-label\">\n            {{ '@conversation:chat.call.start-video' | translate | async }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"axm-chat-call-start__action\"\n          (click)=\"onCancel()\"\n        >\n          <span class=\"axm-chat-call-start__action-circle axm-chat-call-start__action-circle--cancel\">\n            <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"axm-chat-call-start__action-label\">\n            {{ '@conversation:chat.call.cancel' | translate | async }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"axm-chat-call-start__action\"\n          (click)=\"onStartVoice()\"\n        >\n          <span class=\"axm-chat-call-start__action-circle axm-chat-call-start__action-circle--primary\">\n            <i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"axm-chat-call-start__action-label\">\n            {{ '@conversation:chat.call.start-call' | translate | async }}\n          </span>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-platform-module-conversation-client-chat-call-start-popup.component-BbEhkLLh.mjs","sources":["../../../../libs/modules/conversation/client/src/lib/features/chat/plugins/call/chat-call-start-popup.component.ts","../../../../libs/modules/conversation/client/src/lib/features/chat/plugins/call/chat-call-start-popup.component.html"],"sourcesContent":["//#region ----- Imports -----\n\nimport { AXPAvatarComponent } from '@acorex-platform/framework-client/layout/components';\nimport { AXPRtcApiAbstract } from '@acorex-platform/extension-rtc-core-gateway';\nimport type { AXConversation } from '@acorex/components/conversation';\nimport { AXBasePageComponent } from '@acorex/components/page';\nimport { AXPopupService } from '@acorex/components/popup';\nimport { AXToastService } from '@acorex/components/toast';\nimport { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, ViewEncapsulation } from '@angular/core';\n\nimport { axmResolveConversationListAvatar } from '../utils/chat-avatar.util';\nimport { axmEnsureChatCallRtcReady } from './chat-call-rtc-ready.util';\nimport type { AXMChatCallMediaType } from './chat-call-session.types';\nimport { axmOpenChatCallSessionDialog } from './open-chat-call-session.dialog';\nimport { AXMChatCallActiveSessionService } from './chat-call-active-session.service';\n\n//#endregion\n\n//#region ----- Types -----\n\nexport type { AXMChatCallMediaType } from './chat-call-session.types';\n\nexport interface AXMChatCallStartPopupData {\n  conversation: AXConversation;\n}\n\n//#endregion\n\n//#region ----- Component -----\n\n/**\n * Call-start popup: choose voice or video for a conversation contact.\n */\n@Component({\n  selector: 'axm-chat-call-start-popup',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'ax-dark',\n  },\n  imports: [AXPAvatarComponent, AXTranslationModule, AsyncPipe],\n  templateUrl: './chat-call-start-popup.component.html',\n  styles: [\n    `\n      .axm-chat-call-start-overlay .ax-popup {\n        width: min(24rem, 92vw) !important;\n        max-width: 92vw;\n      }\n\n      axm-chat-call-start-popup {\n        display: block;\n        width: 100%;\n      }\n\n      .axm-chat-call-start {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        width: 100%;\n        min-height: 0;\n        padding: 2rem 1.25rem 1.5rem;\n      }\n\n      .axm-chat-call-start__content {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        max-width: 22rem;\n        min-height: 0;\n        gap: 2rem;\n      }\n\n      .axm-chat-call-start__profile {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n        gap: 0.625rem;\n        margin-top: 0;\n      }\n\n      .axm-chat-call-start__avatar {\n        margin-bottom: 0.25rem;\n      }\n\n      .axm-chat-call-start__name {\n        margin: 0;\n        font-size: 1.25rem;\n        font-weight: 700;\n        line-height: 1.3;\n      }\n\n      .axm-chat-call-start__hint {\n        margin: 0;\n        max-width: 18rem;\n        font-size: 0.8125rem;\n        line-height: 1.45;\n        opacity: 0.65;\n      }\n\n      .axm-chat-call-start__actions {\n        display: flex;\n        align-items: flex-start;\n        justify-content: center;\n        width: 100%;\n        gap: 0.5rem;\n        padding-bottom: 0.25rem;\n      }\n\n      .axm-chat-call-start__action {\n        display: flex;\n        flex: 1 1 0;\n        min-width: 0;\n        max-width: 6.5rem;\n        flex-direction: column;\n        align-items: center;\n        gap: 0.5rem;\n        padding: 0;\n        border: 0;\n        background: transparent;\n        color: inherit;\n        cursor: pointer;\n      }\n\n      .axm-chat-call-start__action:focus-visible {\n        outline: 2px solid rgba(76, 175, 80, 0.8);\n        outline-offset: 4px;\n        border-radius: 0.5rem;\n      }\n\n      .axm-chat-call-start__action-circle {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 3.5rem;\n        height: 3.5rem;\n        border-radius: 9999px;\n        font-size: 1.25rem;\n      }\n\n      .axm-chat-call-start__action-circle--primary {\n        background: #4caf50;\n        color: #ffffff;\n      }\n\n      .axm-chat-call-start__action-circle--cancel {\n        background: #ffffff;\n        color: #1a1c1e;\n      }\n\n      .axm-chat-call-start__action-label {\n        font-size: 0.6875rem;\n        line-height: 1.25;\n        text-align: center;\n        white-space: normal;\n        word-break: break-word;\n      }\n\n      .axm-chat-call-start__status {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 1rem;\n        padding: 2rem;\n        text-align: center;\n        font-size: 0.9375rem;\n      }\n\n      .axm-chat-call-start__status--error {\n        color: #ff8a80;\n      }\n\n      .axm-chat-call-start__text-button {\n        padding: 0.5rem 1rem;\n        border: 1px solid currentColor;\n        border-radius: 9999px;\n        background: transparent;\n        color: inherit;\n        cursor: pointer;\n        opacity: 0.85;\n      }\n    `,\n  ],\n})\nexport class AXMChatCallStartPopupComponent extends AXBasePageComponent {\n  //#region ----- Services & Dependencies -----\n\n  private readonly popupService = inject(AXPopupService);\n  private readonly activeCallSessions = inject(AXMChatCallActiveSessionService);\n  private readonly rtcApi = inject(AXPRtcApiAbstract, { optional: true });\n  private readonly translationService = inject(AXTranslationService);\n  private readonly toastService = inject(AXToastService);\n\n  //#endregion\n\n  //#region ----- Popup Inputs -----\n\n  /** Assigned by {@link AXPopupService} via `data`. */\n  conversation?: AXConversation;\n\n  //#endregion\n\n  //#region ----- Computed Properties -----\n\n  protected get hasConversation(): boolean {\n    return !!this.conversation?.id?.trim();\n  }\n\n  protected get displayName(): string {\n    if (!this.conversation) {\n      return '';\n    }\n    return axmResolveConversationListAvatar(this.conversation).title;\n  }\n\n  protected get avatarSrc(): string {\n    if (!this.conversation) {\n      return '';\n    }\n    return axmResolveConversationListAvatar(this.conversation).avatar ?? '';\n  }\n\n  //#endregion\n\n  //#region ----- Event Handlers -----\n\n  protected onStartVideo(): void {\n    void this.#beginCall('video');\n  }\n\n  protected onStartVoice(): void {\n    void this.#beginCall('voice');\n  }\n\n  protected onCancel(): void {\n    this.close();\n  }\n\n  //#endregion\n\n  //#region ----- Call Actions -----\n\n  async #beginCall(mediaType: AXMChatCallMediaType): Promise<void> {\n    const conversation = this.conversation;\n    if (!conversation?.id?.trim()) {\n      return;\n    }\n\n    if (\n      !(await axmEnsureChatCallRtcReady({\n        rtc: this.rtcApi,\n        translation: this.translationService,\n        toast: this.toastService,\n      }))\n    ) {\n      return;\n    }\n\n    const popupService = this.popupService;\n    const activeCallSessions = this.activeCallSessions;\n    this.close();\n    await axmOpenChatCallSessionDialog({\n      conversation,\n      media: mediaType,\n      popupService,\n      activeCallSessions,\n    });\n  }\n\n  //#endregion\n}\n\n//#endregion\n","<div class=\"axm-chat-call-start\">\n  <!-- ----- Missing conversation payload ----- -->\n  @if (!hasConversation) {\n    <div class=\"axm-chat-call-start__status axm-chat-call-start__status--error\">\n      <p>{{ '@conversation:chat.call.load-error' | translate | async }}</p>\n      <button type=\"button\" class=\"axm-chat-call-start__text-button\" (click)=\"onCancel()\">\n        {{ '@conversation:chat.call.cancel' | translate | async }}\n      </button>\n    </div>\n  }\n  <!-- ----- Call start content ----- -->\n  @else {\n    <div class=\"axm-chat-call-start__content\">\n      <!-- ----- Contact avatar and name ----- -->\n      <div class=\"axm-chat-call-start__profile\">\n        <axp-avatar\n          class=\"axm-chat-call-start__avatar\"\n          [size]=\"96\"\n          [fullName]=\"displayName\"\n          [src]=\"avatarSrc\"\n        />\n        <h1 class=\"axm-chat-call-start__name\">{{ displayName }}</h1>\n        <p class=\"axm-chat-call-start__hint\">\n          {{ '@conversation:chat.call.hint' | translate | async }}\n        </p>\n      </div>\n\n      <!-- ----- Voice / cancel / video actions ----- -->\n      <div class=\"axm-chat-call-start__actions\">\n        <button\n          type=\"button\"\n          class=\"axm-chat-call-start__action\"\n          (click)=\"onStartVideo()\"\n        >\n          <span class=\"axm-chat-call-start__action-circle axm-chat-call-start__action-circle--primary\">\n            <i class=\"fa-solid fa-video\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"axm-chat-call-start__action-label\">\n            {{ '@conversation:chat.call.start-video' | translate | async }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"axm-chat-call-start__action\"\n          (click)=\"onCancel()\"\n        >\n          <span class=\"axm-chat-call-start__action-circle axm-chat-call-start__action-circle--cancel\">\n            <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"axm-chat-call-start__action-label\">\n            {{ '@conversation:chat.call.cancel' | translate | async }}\n          </span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"axm-chat-call-start__action\"\n          (click)=\"onStartVoice()\"\n        >\n          <span class=\"axm-chat-call-start__action-circle axm-chat-call-start__action-circle--primary\">\n            <i class=\"fa-solid fa-phone\" aria-hidden=\"true\"></i>\n          </span>\n          <span class=\"axm-chat-call-start__action-label\">\n            {{ '@conversation:chat.call.start-call' | translate | async }}\n          </span>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n"],"names":[],"mappings":"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"}

package/fesm2022/{acorex-platform-module-conversation-client-chat-conversation-info-media-view.component-SYCtAqcV.mjs → acorex-platform-module-conversation-client-chat-conversation-info-media-view.component-Bnbj0e6M.mjs}

@@ -1,6 +1,6 @@
 import { filterMessagesByMediaCategory, isGridMediaCategory, isAttachmentListCategory, buildMediaGalleryTiles, AXConversationService, getMessageVideoItems, getMessageAudioItems, AXConversationRegistryComponentOutletComponent, AXConversationInfiniteScrollDirective, AXConversationImageAttachmentComponent, AXConversationVideoAttachmentComponent, AXConversationAudioAttachmentComponent } from '@acorex/components/conversation';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i3 from '@acorex/core/translation';
+import * as i1 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
 import { AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
@@ -88,7 +88,7 @@ class AXMChatConversationInfoMediaViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatConversationInfoMediaViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMChatConversationInfoMediaViewComponent, isStandalone: true, selector: "axm-chat-conversation-info-media-view", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null }, conversationServiceInput: { classPropertyName: "conversationServiceInput", publicName: "conversationService", isSignal: true, isRequired: true, transformFunction: null }, hasMoreMedia: { classPropertyName: "hasMoreMedia", publicName: "hasMoreMedia", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreMedia: { classPropertyName: "loadingMoreMedia", publicName: "loadingMoreMedia", isSignal: true, isRequired: false, transformFunction: null }, onLoadMoreMedia: { classPropertyName: "onLoadMoreMedia", publicName: "onLoadMoreMedia", isSignal: true, isRequired: false, transformFunction: null }, onBack: { classPropertyName: "onBack", publicName: "onBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, ngImport: i0, template: "<div\n  class=\"tg-media-view\"\n  axInfiniteScroll\n  edge=\"bottom\"\n  [threshold]=\"200\"\n  [scrollDisabled]=\"loadingMoreMedia() || !hasMoreMedia()\"\n  (scrollThreshold)=\"onScrollThreshold($event)\"\n>\n  <header class=\"tg-media-view__header\">\n    <button type=\"button\" class=\"tg-media-view__back\" (click)=\"handleBack()\" [attr.aria-label]=\"'Back'\">\n      <i class=\"fa-light fa-arrow-left\"></i>\n    </button>\n    <h3 class=\"tg-media-view__title\">{{ titleLabel() }}</h3>\n  </header>\n\n  @if (items().length === 0) {\n    <div class=\"tg-media-view__empty\">\n      {{ '@acorex:chat.info-panel.media.empty' | translate | async }}\n    </div>\n  } @else if (isGrid()) {\n    <div class=\"tg-media-view__grid\">\n      @for (tile of galleryTiles(); track tile.key) {\n        <article\n          class=\"tg-media-view__grid-cell\"\n          [class.tg-media-view__grid-cell--sticker]=\"tile.kind === 'sticker'\"\n        >\n          @switch (tile.kind) {\n            @case ('image') {\n              @if (tile.image; as image) {\n                <ax-conversation-image-attachment [item]=\"image\" [alt]=\"'Photo'\" />\n              }\n            }\n            @case ('sticker') {\n              @if (tile.stickerUrl) {\n                <img\n                  class=\"tg-media-view__sticker\"\n                  [src]=\"tile.stickerUrl\"\n                  [alt]=\"tile.stickerAlt ?? 'Sticker'\"\n                  loading=\"lazy\"\n                />\n              }\n            }\n          }\n        </article>\n      }\n    </div>\n  } @else if (isAttachmentList()) {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            @if (category().id === 'video') {\n              @for (video of getMessageVideoItems(message); track video.mediaId ?? video.url) {\n                <ax-conversation-video-attachment [item]=\"video\" />\n              }\n            } @else {\n              @for (audio of getMessageAudioItems(message); track audio.mediaId ?? audio.url) {\n                <ax-conversation-audio-attachment [item]=\"audio\" />\n              }\n            }\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  } @else {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            <ax-conversation-registry-component-outlet\n              [componentLoader]=\"getRendererComponentLoader(message)\"\n              [inputs]=\"getRendererInputs(message)\"\n            />\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  }\n  @if (loadingMoreMedia()) {\n    <div class=\"tg-media-view__loading-more\">\n      {{ '@acorex:chat.info-panel.media.loading' | translate | async }}\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{axm-chat-conversation-info-media-view{display:block;width:100%}axm-chat-conversation-info-media-view .tg-media-view{display:flex;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;overflow-y:auto;overscroll-behavior:contain;max-height:min(85vh,40rem)}axm-chat-conversation-info-media-view .tg-media-view__header{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}axm-chat-conversation-info-media-view .tg-media-view__back{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;color:rgba(var(--ax-sys-color-primary-500))}axm-chat-conversation-info-media-view .tg-media-view__back:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}axm-chat-conversation-info-media-view .tg-media-view__title{margin:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}axm-chat-conversation-info-media-view .tg-media-view__empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}axm-chat-conversation-info-media-view .tg-media-view__grid{display:grid;gap:2px;background-color:rgba(var(--ax-sys-color-border-light-surface));padding:2px;grid-template-columns:repeat(3,minmax(0,1fr))}axm-chat-conversation-info-media-view .tg-media-view__grid-cell{position:relative;aspect-ratio:1 / 1;overflow:hidden;background-color:rgba(var(--ax-sys-color-lighter-surface))}axm-chat-conversation-info-media-view .tg-media-view__grid-cell--sticker{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 1.5)}axm-chat-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep ax-conversation-image-attachment,axm-chat-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep .ax-conversation-image-attachment{height:100%;min-height:0px;width:100%;border-radius:0}axm-chat-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep img{height:100%;width:100%;object-fit:cover}axm-chat-conversation-info-media-view .tg-media-view__sticker{max-height:100%;max-width:100%;object-fit:contain}axm-chat-conversation-info-media-view .tg-media-view__list{display:flex;flex-direction:column}axm-chat-conversation-info-media-view .tg-media-view__list-item{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}axm-chat-conversation-info-media-view .tg-media-view__list-item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0px}axm-chat-conversation-info-media-view .tg-media-view__list-body{display:flex;min-width:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}axm-chat-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-msg{max-width:100%}axm-chat-conversation-info-media-view .tg-media-view__list-body ::ng-deep ax-conversation-message-renderer-state{display:none}axm-chat-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-video__player{max-height:min(50vh,16rem)}axm-chat-conversation-info-media-view .tg-media-view__list-meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-on-surface));opacity:.55}axm-chat-conversation-info-media-view .tg-media-view__loading-more{flex-shrink:0;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs", "skeleton"] }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXConversationImageAttachmentComponent, selector: "ax-conversation-image-attachment", inputs: ["item", "alt"] }, { kind: "component", type: AXConversationVideoAttachmentComponent, selector: "ax-conversation-video-attachment", inputs: ["item"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded", "playbackError"] }, { kind: "component", type: AXConversationAudioAttachmentComponent, selector: "ax-conversation-audio-attachment", inputs: ["item", "look"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded", "playbackError"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMChatConversationInfoMediaViewComponent, isStandalone: true, selector: "axm-chat-conversation-info-media-view", inputs: { category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: true, transformFunction: null }, messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null }, conversation: { classPropertyName: "conversation", publicName: "conversation", isSignal: true, isRequired: true, transformFunction: null }, conversationServiceInput: { classPropertyName: "conversationServiceInput", publicName: "conversationService", isSignal: true, isRequired: true, transformFunction: null }, hasMoreMedia: { classPropertyName: "hasMoreMedia", publicName: "hasMoreMedia", isSignal: true, isRequired: false, transformFunction: null }, loadingMoreMedia: { classPropertyName: "loadingMoreMedia", publicName: "loadingMoreMedia", isSignal: true, isRequired: false, transformFunction: null }, onLoadMoreMedia: { classPropertyName: "onLoadMoreMedia", publicName: "onLoadMoreMedia", isSignal: true, isRequired: false, transformFunction: null }, onBack: { classPropertyName: "onBack", publicName: "onBack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, ngImport: i0, template: "<div\n  class=\"tg-media-view\"\n  axInfiniteScroll\n  edge=\"bottom\"\n  [threshold]=\"200\"\n  [scrollDisabled]=\"loadingMoreMedia() || !hasMoreMedia()\"\n  (scrollThreshold)=\"onScrollThreshold($event)\"\n>\n  <header class=\"tg-media-view__header\">\n    <button type=\"button\" class=\"tg-media-view__back\" (click)=\"handleBack()\" [attr.aria-label]=\"'Back'\">\n      <i class=\"fa-light fa-arrow-left\"></i>\n    </button>\n    <h3 class=\"tg-media-view__title\">{{ titleLabel() }}</h3>\n  </header>\n\n  @if (items().length === 0) {\n    <div class=\"tg-media-view__empty\">\n      {{ '@acorex:chat.info-panel.media.empty' | translate | async }}\n    </div>\n  } @else if (isGrid()) {\n    <div class=\"tg-media-view__grid\">\n      @for (tile of galleryTiles(); track tile.key) {\n        <article\n          class=\"tg-media-view__grid-cell\"\n          [class.tg-media-view__grid-cell--sticker]=\"tile.kind === 'sticker'\"\n        >\n          @switch (tile.kind) {\n            @case ('image') {\n              @if (tile.image; as image) {\n                <ax-conversation-image-attachment [item]=\"image\" [alt]=\"'Photo'\" />\n              }\n            }\n            @case ('sticker') {\n              @if (tile.stickerUrl) {\n                <img\n                  class=\"tg-media-view__sticker\"\n                  [src]=\"tile.stickerUrl\"\n                  [alt]=\"tile.stickerAlt ?? 'Sticker'\"\n                  loading=\"lazy\"\n                />\n              }\n            }\n          }\n        </article>\n      }\n    </div>\n  } @else if (isAttachmentList()) {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            @if (category().id === 'video') {\n              @for (video of getMessageVideoItems(message); track video.mediaId ?? video.url) {\n                <ax-conversation-video-attachment [item]=\"video\" />\n              }\n            } @else {\n              @for (audio of getMessageAudioItems(message); track audio.mediaId ?? audio.url) {\n                <ax-conversation-audio-attachment [item]=\"audio\" />\n              }\n            }\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  } @else {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            <ax-conversation-registry-component-outlet\n              [componentLoader]=\"getRendererComponentLoader(message)\"\n              [inputs]=\"getRendererInputs(message)\"\n            />\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  }\n  @if (loadingMoreMedia()) {\n    <div class=\"tg-media-view__loading-more\">\n      {{ '@acorex:chat.info-panel.media.loading' | translate | async }}\n    </div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{axm-chat-conversation-info-media-view{display:block;width:100%}axm-chat-conversation-info-media-view .tg-media-view{display:flex;min-height:calc(var(--spacing, .25rem) * 48);flex-direction:column;overflow-y:auto;overscroll-behavior:contain;max-height:min(85vh,40rem)}axm-chat-conversation-info-media-view .tg-media-view__header{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5)}axm-chat-conversation-info-media-view .tg-media-view__back{display:inline-flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);--tw-border-style: none;border-style:none;background-color:transparent;color:rgba(var(--ax-sys-color-primary-500))}axm-chat-conversation-info-media-view .tg-media-view__back:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}axm-chat-conversation-info-media-view .tg-media-view__title{margin:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface))}axm-chat-conversation-info-media-view .tg-media-view__empty{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}axm-chat-conversation-info-media-view .tg-media-view__grid{display:grid;gap:2px;background-color:rgba(var(--ax-sys-color-border-light-surface));padding:2px;grid-template-columns:repeat(3,minmax(0,1fr))}axm-chat-conversation-info-media-view .tg-media-view__grid-cell{position:relative;aspect-ratio:1 / 1;overflow:hidden;background-color:rgba(var(--ax-sys-color-lighter-surface))}axm-chat-conversation-info-media-view .tg-media-view__grid-cell--sticker{display:flex;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 1.5)}axm-chat-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep ax-conversation-image-attachment,axm-chat-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep .ax-conversation-image-attachment{height:100%;min-height:0px;width:100%;border-radius:0}axm-chat-conversation-info-media-view .tg-media-view__grid-cell ::ng-deep img{height:100%;width:100%;object-fit:cover}axm-chat-conversation-info-media-view .tg-media-view__sticker{max-height:100%;max-width:100%;object-fit:contain}axm-chat-conversation-info-media-view .tg-media-view__list{display:flex;flex-direction:column}axm-chat-conversation-info-media-view .tg-media-view__list-item{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3)}axm-chat-conversation-info-media-view .tg-media-view__list-item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0px}axm-chat-conversation-info-media-view .tg-media-view__list-body{display:flex;min-width:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}axm-chat-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-msg{max-width:100%}axm-chat-conversation-info-media-view .tg-media-view__list-body ::ng-deep ax-conversation-message-renderer-state{display:none}axm-chat-conversation-info-media-view .tg-media-view__list-body ::ng-deep .ax-conversation-video__player{max-height:min(50vh,16rem)}axm-chat-conversation-info-media-view .tg-media-view__list-meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:rgba(var(--ax-sys-color-on-surface));opacity:.55}axm-chat-conversation-info-media-view .tg-media-view__loading-more{flex-shrink:0;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));opacity:.65}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs", "skeleton"] }, { kind: "directive", type: AXConversationInfiniteScrollDirective, selector: "[axInfiniteScroll]", inputs: ["threshold", "edge", "scrollDisabled", "cooldownMs"], outputs: ["scrollThreshold"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXConversationImageAttachmentComponent, selector: "ax-conversation-image-attachment", inputs: ["item", "alt", "reserveAspect"] }, { kind: "component", type: AXConversationVideoAttachmentComponent, selector: "ax-conversation-video-attachment", inputs: ["item", "reserveAspect"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded", "playbackError"] }, { kind: "component", type: AXConversationAudioAttachmentComponent, selector: "ax-conversation-audio-attachment", inputs: ["item", "look"], outputs: ["playingChange", "timeUpdate", "durationChange", "playbackEnded", "playbackError"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatConversationInfoMediaViewComponent, decorators: [{
             type: Component,
@@ -105,4 +105,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }], propDecorators: { category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: true }] }], messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: true }] }], conversation: [{ type: i0.Input, args: [{ isSignal: true, alias: "conversation", required: true }] }], conversationServiceInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "conversationService", required: true }] }], hasMoreMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMoreMedia", required: false }] }], loadingMoreMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingMoreMedia", required: false }] }], onLoadMoreMedia: [{ type: i0.Input, args: [{ isSignal: true, alias: "onLoadMoreMedia", required: false }] }], onBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "onBack", required: false }] }], back: [{ type: i0.Output, args: ["back"] }] } });
 
 export { AXMChatConversationInfoMediaViewComponent };
-//# sourceMappingURL=acorex-platform-module-conversation-client-chat-conversation-info-media-view.component-SYCtAqcV.mjs.map
+//# sourceMappingURL=acorex-platform-module-conversation-client-chat-conversation-info-media-view.component-Bnbj0e6M.mjs.map

package/fesm2022/{acorex-platform-module-conversation-client-chat-conversation-info-media-view.component-SYCtAqcV.mjs.map → acorex-platform-module-conversation-client-chat-conversation-info-media-view.component-Bnbj0e6M.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"acorex-platform-module-conversation-client-chat-conversation-info-media-view.component-SYCtAqcV.mjs","sources":["../../../../libs/modules/conversation/client/src/lib/features/chat/plugins/info-bar/chat-conversation-info-media-view.component.ts","../../../../libs/modules/conversation/client/src/lib/features/chat/plugins/info-bar/chat-conversation-info-media-view.component.html"],"sourcesContent":["//#region ----- Imports -----\n\nimport {\n  AXConversationAudioAttachmentComponent,\n  AXConversationInfiniteScrollDirective,\n  AXConversationImageAttachmentComponent,\n  AXConversationRegistryComponentOutletComponent,\n  AXConversationService,\n  AXConversationVideoAttachmentComponent,\n  buildMediaGalleryTiles,\n  filterMessagesByMediaCategory,\n  getMessageAudioItems,\n  getMessageVideoItems,\n  isAttachmentListCategory,\n  isGridMediaCategory,\n} from '@acorex/components/conversation';\nimport type { AXConversation, AXConversationMessage, AXConversationMediaCategory } from '@acorex/components/conversation';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';\nimport { AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  Injector,\n  input,\n  output,\n  Type,\n  ViewEncapsulation,\n} from '@angular/core';\n\n//#endregion\n\n//#region ----- Component -----\n\n@Component({\n  selector: 'axm-chat-conversation-info-media-view',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    AsyncPipe,\n    AXConversationRegistryComponentOutletComponent,\n    AXConversationInfiniteScrollDirective,\n    AXDecoratorModule,\n    AXTranslationModule,\n    AXConversationImageAttachmentComponent,\n    AXConversationVideoAttachmentComponent,\n    AXConversationAudioAttachmentComponent,\n  ],\n  templateUrl: './chat-conversation-info-media-view.component.html',\n  styleUrl: './chat-conversation-info-media-view.component.css',\n})\nexport class AXMChatConversationInfoMediaViewComponent {\n  //#region ----- Services -----\n\n  private readonly translation = inject(AXTranslationService);\n  private readonly parentInjector = inject(Injector);\n\n  //#endregion\n\n  //#region ----- Inputs / Outputs -----\n\n  readonly category = input.required<AXConversationMediaCategory>();\n  readonly messages = input.required<AXConversationMessage[]>();\n  readonly conversation = input.required<AXConversation>();\n  readonly conversationServiceInput = input.required<AXConversationService>({ alias: 'conversationService' });\n  readonly hasMoreMedia = input(false);\n  readonly loadingMoreMedia = input(false);\n  readonly onLoadMoreMedia = input<(() => void | Promise<void>) | undefined>(undefined);\n  /** Callback for lazy outlet wiring (alternative to the `back` output). */\n  readonly onBack = input<(() => void) | undefined>(undefined);\n\n  readonly back = output<void>();\n\n  //#endregion\n\n  //#region ----- Derived State -----\n\n  readonly items = computed(() => filterMessagesByMediaCategory(this.messages(), this.category().id));\n  readonly isGrid = computed(() => isGridMediaCategory(this.category().id));\n  readonly isAttachmentList = computed(() => isAttachmentListCategory(this.category().id));\n  readonly galleryTiles = computed(() => buildMediaGalleryTiles(this.messages(), this.category().id));\n\n  readonly rendererInjector = computed(() =>\n    Injector.create({\n      providers: [{ provide: AXConversationService, useValue: this.conversationServiceInput() }],\n      parent: this.parentInjector,\n    }),\n  );\n\n  readonly titleLabel = computed(() =>\n    this.translation.translateSync(this.category().countLabelKey, {\n      params: { count: this.category().count },\n    }),\n  );\n\n  readonly getMessageVideoItems = getMessageVideoItems;\n  readonly getMessageAudioItems = getMessageAudioItems;\n\n  //#endregion\n\n  //#region ----- Renderer Helpers -----\n\n  getRendererComponentLoader(message: AXConversationMessage): () => Promise<Type<unknown>> {\n    const renderer = this.conversationServiceInput().registry.messageRenderers.getRenderer(message);\n\n    if (renderer?.componentLoader) {\n      return renderer.componentLoader as () => Promise<Type<unknown>>;\n    }\n\n    if (!renderer?.component) {\n      return () =>\n        import('@acorex/components/conversation').then((m) => m.AXConversationFallbackRendererComponent);\n    }\n\n    return () => Promise.resolve(renderer.component as Type<unknown>);\n  }\n\n  getRendererInputs(message: AXConversationMessage) {\n    return { message };\n  }\n\n  //#endregion\n\n  //#region ----- UI Handlers -----\n\n  formatTimestamp(message: AXConversationMessage): string {\n    return new Intl.DateTimeFormat(undefined, {\n      dateStyle: 'medium',\n      timeStyle: 'short',\n    }).format(message.timestamp);\n  }\n\n  handleBack(): void {\n    this.onBack()?.();\n    this.back.emit();\n  }\n\n  onScrollThreshold(edge: 'top' | 'bottom'): void {\n    if (edge === 'bottom' && this.hasMoreMedia() && !this.loadingMoreMedia()) {\n      void this.onLoadMoreMedia()?.();\n    }\n  }\n\n  //#endregion\n}\n\n//#endregion\n","<div\n  class=\"tg-media-view\"\n  axInfiniteScroll\n  edge=\"bottom\"\n  [threshold]=\"200\"\n  [scrollDisabled]=\"loadingMoreMedia() || !hasMoreMedia()\"\n  (scrollThreshold)=\"onScrollThreshold($event)\"\n>\n  <header class=\"tg-media-view__header\">\n    <button type=\"button\" class=\"tg-media-view__back\" (click)=\"handleBack()\" [attr.aria-label]=\"'Back'\">\n      <i class=\"fa-light fa-arrow-left\"></i>\n    </button>\n    <h3 class=\"tg-media-view__title\">{{ titleLabel() }}</h3>\n  </header>\n\n  @if (items().length === 0) {\n    <div class=\"tg-media-view__empty\">\n      {{ '@acorex:chat.info-panel.media.empty' | translate | async }}\n    </div>\n  } @else if (isGrid()) {\n    <div class=\"tg-media-view__grid\">\n      @for (tile of galleryTiles(); track tile.key) {\n        <article\n          class=\"tg-media-view__grid-cell\"\n          [class.tg-media-view__grid-cell--sticker]=\"tile.kind === 'sticker'\"\n        >\n          @switch (tile.kind) {\n            @case ('image') {\n              @if (tile.image; as image) {\n                <ax-conversation-image-attachment [item]=\"image\" [alt]=\"'Photo'\" />\n              }\n            }\n            @case ('sticker') {\n              @if (tile.stickerUrl) {\n                <img\n                  class=\"tg-media-view__sticker\"\n                  [src]=\"tile.stickerUrl\"\n                  [alt]=\"tile.stickerAlt ?? 'Sticker'\"\n                  loading=\"lazy\"\n                />\n              }\n            }\n          }\n        </article>\n      }\n    </div>\n  } @else if (isAttachmentList()) {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            @if (category().id === 'video') {\n              @for (video of getMessageVideoItems(message); track video.mediaId ?? video.url) {\n                <ax-conversation-video-attachment [item]=\"video\" />\n              }\n            } @else {\n              @for (audio of getMessageAudioItems(message); track audio.mediaId ?? audio.url) {\n                <ax-conversation-audio-attachment [item]=\"audio\" />\n              }\n            }\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  } @else {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            <ax-conversation-registry-component-outlet\n              [componentLoader]=\"getRendererComponentLoader(message)\"\n              [inputs]=\"getRendererInputs(message)\"\n            />\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  }\n  @if (loadingMoreMedia()) {\n    <div class=\"tg-media-view__loading-more\">\n      {{ '@acorex:chat.info-panel.media.loading' | translate | async }}\n    </div>\n  }\n</div>\n"],"names":["i1"],"mappings":";;;;;;;;AAAA;AAgCA;AAEA;MAmBa,yCAAyC,CAAA;AAjBtD,IAAA,WAAA,GAAA;;AAoBmB,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAC,oBAAoB,CAAC;AAC1C,QAAA,IAAA,CAAA,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC;;;QAMzC,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,QAAQ;qFAA+B;QACxD,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,QAAQ;qFAA2B;QACpD,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,QAAQ;yFAAkB;QAC/C,IAAA,CAAA,wBAAwB,GAAG,KAAK,CAAC,QAAQ,+FAA0B,KAAK,EAAE,qBAAqB,EAAA,CAAG;QAClG,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,KAAK;yFAAC;QAC3B,IAAA,CAAA,gBAAgB,GAAG,KAAK,CAAC,KAAK;6FAAC;QAC/B,IAAA,CAAA,eAAe,GAAG,KAAK,CAA2C,SAAS;4FAAC;;QAE5E,IAAA,CAAA,MAAM,GAAG,KAAK,CAA2B,SAAS;mFAAC;QAEnD,IAAA,CAAA,IAAI,GAAG,MAAM,EAAQ;;;AAMrB,QAAA,IAAA,CAAA,KAAK,GAAG,QAAQ,CAAC,MAAM,6BAA6B,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC;kFAAC;AAC1F,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC;mFAAC;AAChE,QAAA,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAM,wBAAwB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC;6FAAC;AAC/E,QAAA,IAAA,CAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,sBAAsB,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC;yFAAC;QAE1F,IAAA,CAAA,gBAAgB,GAAG,QAAQ,CAAC,MACnC,QAAQ,CAAC,MAAM,CAAC;AACd,YAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,IAAI,CAAC,wBAAwB,EAAE,EAAE,CAAC;YAC1F,MAAM,EAAE,IAAI,CAAC,cAAc;SAC5B,CAAC;6FACH;AAEQ,QAAA,IAAA,CAAA,UAAU,GAAG,QAAQ,CAAC,MAC7B,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,aAAa,EAAE;YAC5D,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE;SACzC,CAAC;uFACH;QAEQ,IAAA,CAAA,oBAAoB,GAAG,oBAAoB;QAC3C,IAAA,CAAA,oBAAoB,GAAG,oBAAoB;AAgDrD,IAAA;;;AA1CC,IAAA,0BAA0B,CAAC,OAA8B,EAAA;AACvD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,WAAW,CAAC,OAAO,CAAC;AAE/F,QAAA,IAAI,QAAQ,EAAE,eAAe,EAAE;YAC7B,OAAO,QAAQ,CAAC,eAA+C;QACjE;AAEA,QAAA,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE;AACxB,YAAA,OAAO,MACL,OAAO,iCAAiC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,uCAAuC,CAAC;QACpG;QAEA,OAAO,MAAM,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,SAA0B,CAAC;IACnE;AAEA,IAAA,iBAAiB,CAAC,OAA8B,EAAA;QAC9C,OAAO,EAAE,OAAO,EAAE;IACpB;;;AAMA,IAAA,eAAe,CAAC,OAA8B,EAAA;AAC5C,QAAA,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;AACxC,YAAA,SAAS,EAAE,QAAQ;AACnB,YAAA,SAAS,EAAE,OAAO;AACnB,SAAA,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;IAC9B;IAEA,UAAU,GAAA;AACR,QAAA,IAAI,CAAC,MAAM,EAAE,IAAI;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;IAClB;AAEA,IAAA,iBAAiB,CAAC,IAAsB,EAAA;AACtC,QAAA,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,EAAE;AACxE,YAAA,KAAK,IAAI,CAAC,eAAe,EAAE,IAAI;QACjC;IACF;8GA1FW,yCAAyC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAzC,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yCAAyC,svCCrDtD,klGAsFA,EAAA,MAAA,EAAA,CAAA,04JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED5CI,8CAA8C,EAAA,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAC9C,qCAAqC,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,MAAA,EAAA,gBAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACrC,iBAAiB,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACjB,mBAAmB,+BACnB,sCAAsC,EAAA,QAAA,EAAA,kCAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtC,sCAAsC,EAAA,QAAA,EAAA,kCAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACtC,sCAAsC,gMAPtC,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAAA,EAAA,CAAA,gBAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAYA,yCAAyC,EAAA,UAAA,EAAA,CAAA;kBAjBrD,SAAS;+BACE,uCAAuC,EAAA,eAAA,EAChC,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B;wBACP,SAAS;wBACT,8CAA8C;wBAC9C,qCAAqC;wBACrC,iBAAiB;wBACjB,mBAAmB;wBACnB,sCAAsC;wBACtC,sCAAsC;wBACtC,sCAAsC;AACvC,qBAAA,EAAA,QAAA,EAAA,klGAAA,EAAA,MAAA,EAAA,CAAA,04JAAA,CAAA,EAAA;;;"}
+{"version":3,"file":"acorex-platform-module-conversation-client-chat-conversation-info-media-view.component-Bnbj0e6M.mjs","sources":["../../../../libs/modules/conversation/client/src/lib/features/chat/plugins/info-bar/chat-conversation-info-media-view.component.ts","../../../../libs/modules/conversation/client/src/lib/features/chat/plugins/info-bar/chat-conversation-info-media-view.component.html"],"sourcesContent":["//#region ----- Imports -----\n\nimport {\n  AXConversationAudioAttachmentComponent,\n  AXConversationInfiniteScrollDirective,\n  AXConversationImageAttachmentComponent,\n  AXConversationRegistryComponentOutletComponent,\n  AXConversationService,\n  AXConversationVideoAttachmentComponent,\n  buildMediaGalleryTiles,\n  filterMessagesByMediaCategory,\n  getMessageAudioItems,\n  getMessageVideoItems,\n  isAttachmentListCategory,\n  isGridMediaCategory,\n} from '@acorex/components/conversation';\nimport type { AXConversation, AXConversationMessage, AXConversationMediaCategory } from '@acorex/components/conversation';\nimport { AXDecoratorModule } from '@acorex/components/decorators';\nimport { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';\nimport { AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  Injector,\n  input,\n  output,\n  Type,\n  ViewEncapsulation,\n} from '@angular/core';\n\n//#endregion\n\n//#region ----- Component -----\n\n@Component({\n  selector: 'axm-chat-conversation-info-media-view',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  imports: [\n    AsyncPipe,\n    AXConversationRegistryComponentOutletComponent,\n    AXConversationInfiniteScrollDirective,\n    AXDecoratorModule,\n    AXTranslationModule,\n    AXConversationImageAttachmentComponent,\n    AXConversationVideoAttachmentComponent,\n    AXConversationAudioAttachmentComponent,\n  ],\n  templateUrl: './chat-conversation-info-media-view.component.html',\n  styleUrl: './chat-conversation-info-media-view.component.css',\n})\nexport class AXMChatConversationInfoMediaViewComponent {\n  //#region ----- Services -----\n\n  private readonly translation = inject(AXTranslationService);\n  private readonly parentInjector = inject(Injector);\n\n  //#endregion\n\n  //#region ----- Inputs / Outputs -----\n\n  readonly category = input.required<AXConversationMediaCategory>();\n  readonly messages = input.required<AXConversationMessage[]>();\n  readonly conversation = input.required<AXConversation>();\n  readonly conversationServiceInput = input.required<AXConversationService>({ alias: 'conversationService' });\n  readonly hasMoreMedia = input(false);\n  readonly loadingMoreMedia = input(false);\n  readonly onLoadMoreMedia = input<(() => void | Promise<void>) | undefined>(undefined);\n  /** Callback for lazy outlet wiring (alternative to the `back` output). */\n  readonly onBack = input<(() => void) | undefined>(undefined);\n\n  readonly back = output<void>();\n\n  //#endregion\n\n  //#region ----- Derived State -----\n\n  readonly items = computed(() => filterMessagesByMediaCategory(this.messages(), this.category().id));\n  readonly isGrid = computed(() => isGridMediaCategory(this.category().id));\n  readonly isAttachmentList = computed(() => isAttachmentListCategory(this.category().id));\n  readonly galleryTiles = computed(() => buildMediaGalleryTiles(this.messages(), this.category().id));\n\n  readonly rendererInjector = computed(() =>\n    Injector.create({\n      providers: [{ provide: AXConversationService, useValue: this.conversationServiceInput() }],\n      parent: this.parentInjector,\n    }),\n  );\n\n  readonly titleLabel = computed(() =>\n    this.translation.translateSync(this.category().countLabelKey, {\n      params: { count: this.category().count },\n    }),\n  );\n\n  readonly getMessageVideoItems = getMessageVideoItems;\n  readonly getMessageAudioItems = getMessageAudioItems;\n\n  //#endregion\n\n  //#region ----- Renderer Helpers -----\n\n  getRendererComponentLoader(message: AXConversationMessage): () => Promise<Type<unknown>> {\n    const renderer = this.conversationServiceInput().registry.messageRenderers.getRenderer(message);\n\n    if (renderer?.componentLoader) {\n      return renderer.componentLoader as () => Promise<Type<unknown>>;\n    }\n\n    if (!renderer?.component) {\n      return () =>\n        import('@acorex/components/conversation').then((m) => m.AXConversationFallbackRendererComponent);\n    }\n\n    return () => Promise.resolve(renderer.component as Type<unknown>);\n  }\n\n  getRendererInputs(message: AXConversationMessage) {\n    return { message };\n  }\n\n  //#endregion\n\n  //#region ----- UI Handlers -----\n\n  formatTimestamp(message: AXConversationMessage): string {\n    return new Intl.DateTimeFormat(undefined, {\n      dateStyle: 'medium',\n      timeStyle: 'short',\n    }).format(message.timestamp);\n  }\n\n  handleBack(): void {\n    this.onBack()?.();\n    this.back.emit();\n  }\n\n  onScrollThreshold(edge: 'top' | 'bottom'): void {\n    if (edge === 'bottom' && this.hasMoreMedia() && !this.loadingMoreMedia()) {\n      void this.onLoadMoreMedia()?.();\n    }\n  }\n\n  //#endregion\n}\n\n//#endregion\n","<div\n  class=\"tg-media-view\"\n  axInfiniteScroll\n  edge=\"bottom\"\n  [threshold]=\"200\"\n  [scrollDisabled]=\"loadingMoreMedia() || !hasMoreMedia()\"\n  (scrollThreshold)=\"onScrollThreshold($event)\"\n>\n  <header class=\"tg-media-view__header\">\n    <button type=\"button\" class=\"tg-media-view__back\" (click)=\"handleBack()\" [attr.aria-label]=\"'Back'\">\n      <i class=\"fa-light fa-arrow-left\"></i>\n    </button>\n    <h3 class=\"tg-media-view__title\">{{ titleLabel() }}</h3>\n  </header>\n\n  @if (items().length === 0) {\n    <div class=\"tg-media-view__empty\">\n      {{ '@acorex:chat.info-panel.media.empty' | translate | async }}\n    </div>\n  } @else if (isGrid()) {\n    <div class=\"tg-media-view__grid\">\n      @for (tile of galleryTiles(); track tile.key) {\n        <article\n          class=\"tg-media-view__grid-cell\"\n          [class.tg-media-view__grid-cell--sticker]=\"tile.kind === 'sticker'\"\n        >\n          @switch (tile.kind) {\n            @case ('image') {\n              @if (tile.image; as image) {\n                <ax-conversation-image-attachment [item]=\"image\" [alt]=\"'Photo'\" />\n              }\n            }\n            @case ('sticker') {\n              @if (tile.stickerUrl) {\n                <img\n                  class=\"tg-media-view__sticker\"\n                  [src]=\"tile.stickerUrl\"\n                  [alt]=\"tile.stickerAlt ?? 'Sticker'\"\n                  loading=\"lazy\"\n                />\n              }\n            }\n          }\n        </article>\n      }\n    </div>\n  } @else if (isAttachmentList()) {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            @if (category().id === 'video') {\n              @for (video of getMessageVideoItems(message); track video.mediaId ?? video.url) {\n                <ax-conversation-video-attachment [item]=\"video\" />\n              }\n            } @else {\n              @for (audio of getMessageAudioItems(message); track audio.mediaId ?? audio.url) {\n                <ax-conversation-audio-attachment [item]=\"audio\" />\n              }\n            }\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  } @else {\n    <div class=\"tg-media-view__list\">\n      @for (message of items(); track message.id) {\n        <article class=\"tg-media-view__list-item\">\n          <div class=\"tg-media-view__list-body\">\n            <ax-conversation-registry-component-outlet\n              [componentLoader]=\"getRendererComponentLoader(message)\"\n              [inputs]=\"getRendererInputs(message)\"\n            />\n          </div>\n          <time class=\"tg-media-view__list-meta\">{{ formatTimestamp(message) }}</time>\n        </article>\n      }\n    </div>\n  }\n  @if (loadingMoreMedia()) {\n    <div class=\"tg-media-view__loading-more\">\n      {{ '@acorex:chat.info-panel.media.loading' | translate | async }}\n    </div>\n  }\n</div>\n"],"names":[],"mappings":"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"}