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

package/fesm2022/acorex-platform-module-conversation-client-chat-conversation-info-panel.component-CE40xbl9.mjs

@@ -0,0 +1,472 @@
+import { AXClosableComponent, AXComponentCloseEvent } from '@acorex/cdk/common';
+import { AXButtonComponent } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXLabelComponent } from '@acorex/components/label';
+import { AXSearchBoxComponent } from '@acorex/components/search-box';
+import * as i2 from '@acorex/components/switch';
+import { AXSwitchModule } from '@acorex/components/switch';
+import { AXTextBoxComponent } from '@acorex/components/text-box';
+import { AXToastService } from '@acorex/components/toast';
+import { AXConversationService, AX_CONVERSATION_MESSAGE_LIST_BACKGROUND_PRESETS, AXConversationMessageUtilsService, getConversationProfileFields, getConversationMediaCategories, fetchConversationMediaPage, filterSupplementalInfoPanelMessages, mergeInfoPanelMessages, isMessageListThemeBackground, AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND_PRESET_ID, isSameMessageListBackground, resolveMessageListBackgroundRaw, normalizeMessageListBackgroundValue, AXConversationAvatarPickerComponent, AXConversationAvatarComponent, AXConversationRegistryComponentOutletComponent } from '@acorex/components/conversation';
+import * as i3 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXPlatform } from '@acorex/core/platform';
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, output, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMChatConversationInfoPanelComponent extends AXClosableComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----- Services -----
+        this.toastService = inject(AXToastService);
+        this.translation = inject(AXTranslationService);
+        this.platform = inject(AXPlatform);
+        this.injectedConversationService = inject(AXConversationService, { optional: true });
+        //#endregion
+        //#region ----- Popup State -----
+        this.onClosed = output();
+        this.activeTab = signal('profile', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+        this.showMemberSearch = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showMemberSearch" }] : /* istanbul ignore next */ []));
+        this.panelView = signal('main', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelView" }] : /* istanbul ignore next */ []));
+        this.selectedMediaCategory = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedMediaCategory" }] : /* istanbul ignore next */ []));
+        this.mediaViewLoader = () => import('./acorex-platform-module-conversation-client-chat-conversation-info-media-view.component-DLYtqFLi.mjs').then((m) => m.AXMChatConversationInfoMediaViewComponent);
+        this.conversationMessages = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "conversationMessages" }] : /* istanbul ignore next */ []));
+        this.loadingMessages = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingMessages" }] : /* istanbul ignore next */ []));
+        this.loadingMoreMedia = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingMoreMedia" }] : /* istanbul ignore next */ []));
+        this.mediaHasMore = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mediaHasMore" }] : /* istanbul ignore next */ []));
+        this.mediaNextPage = 1;
+        this.memberSearchQuery = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "memberSearchQuery" }] : /* istanbul ignore next */ []));
+        this.archived = false;
+        this.initialNotifications = false;
+        this.initialArchived = false;
+        this.notificationsEnabled = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "notificationsEnabled" }] : /* istanbul ignore next */ []));
+        this.editTitle = '';
+        this.editAvatar = '';
+        this.groupDetailsSaveInFlight = false;
+        this.backgroundPresets = AX_CONVERSATION_MESSAGE_LIST_BACKGROUND_PRESETS.map((preset) => ({
+            ...preset,
+            label: this.translateBackgroundPresetLabel(preset.id),
+        }));
+        //#endregion
+        //#region ----- Derived State -----
+        this.heroSubtitle = computed(() => {
+            const conversation = this.liveConversation();
+            if (!conversation)
+                return '';
+            this.conversationService?.typingRevision();
+            this.conversationService?.presenceTimeTick();
+            return AXConversationMessageUtilsService.getConversationSubtitle(conversation, {
+                typingUserIds: this.conversationService?.getActiveTypingUserIds(conversation.id) ?? [],
+                peerPresence: this.conversationService?.getPeerPresence(conversation),
+                currentUserId: this.conversationService?.currentUser()?.id,
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "heroSubtitle" }] : /* istanbul ignore next */ []));
+        this.liveConversation = computed(() => {
+            const conversation = this.conversation;
+            if (!conversation?.id)
+                return conversation;
+            const fromStore = this.conversationService?.conversations().find((c) => c.id === conversation.id);
+            return fromStore ?? conversation;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "liveConversation" }] : /* istanbul ignore next */ []));
+        this.isConversationMuted = computed(() => this.notificationsEnabled() === false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isConversationMuted" }] : /* istanbul ignore next */ []));
+        this.profileFields = computed(() => {
+            const conversation = this.liveConversation();
+            if (!conversation)
+                return [];
+            return getConversationProfileFields(conversation, this.conversationService?.currentUser()?.id);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "profileFields" }] : /* istanbul ignore next */ []));
+        this.mediaCategories = computed(() => {
+            if (!this.conversation)
+                return [];
+            return getConversationMediaCategories(this.conversationMessages());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mediaCategories" }] : /* istanbul ignore next */ []));
+        this.quickActions = computed(() => {
+            if (!this.conversation)
+                return [];
+            const muted = this.isConversationMuted();
+            const actions = [
+                {
+                    id: 'mute',
+                    labelKey: muted ? '@acorex:chat.actions.unmute' : '@acorex:chat.actions.mute',
+                    icon: muted ? 'fa-light fa-bell-slash' : 'fa-light fa-bell',
+                },
+            ];
+            if (!this.isPrivateConversation()) {
+                actions.push({
+                    id: 'leave',
+                    labelKey: '@acorex:chat.actions.leave-and-delete',
+                    icon: 'fa-light fa-door-open',
+                    danger: true,
+                });
+            }
+            return actions;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "quickActions" }] : /* istanbul ignore next */ []));
+        this.filteredMembers = computed(() => {
+            if (!this.conversation)
+                return [];
+            const query = this.memberSearchQuery().toLowerCase().trim();
+            const members = this.conversation?.participants ?? [];
+            if (!query)
+                return members;
+            return members.filter((p) => p.name.toLowerCase().includes(query) ||
+                (p.description ?? '').toLowerCase().includes(query) ||
+                (p.role ?? '').toLowerCase().includes(query));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredMembers" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Lifecycle -----
+    ngOnInit() {
+        const resolvedService = this.conversationService ?? this.injectedConversationService;
+        if (!resolvedService) {
+            console.warn('AXMChatConversationInfoPanelComponent opened without conversationService.');
+            this.close();
+            return;
+        }
+        this.conversationService = resolvedService;
+        if (!this.conversation) {
+            const activeConversation = this.conversationService.activeConversation();
+            if (activeConversation) {
+                this.conversation = activeConversation;
+            }
+            else {
+                console.warn('AXMChatConversationInfoPanelComponent opened without conversation context.');
+                this.close();
+                return;
+            }
+        }
+        this.initialNotifications = this.conversationService.getRoomPreferences(this.conversation.id).notifications;
+        this.notificationsEnabled.set(this.initialNotifications);
+        this.archived = this.conversation.archived ?? false;
+        this.initialArchived = this.archived;
+        this.editTitle = this.conversation.title || '';
+        this.editAvatar = this.conversation.avatar || '';
+        void this.loadConversationMessages();
+    }
+    ngOnDestroy() {
+        if (this.groupTitleSaveTimer) {
+            clearTimeout(this.groupTitleSaveTimer);
+            this.groupTitleSaveTimer = undefined;
+            void this.persistGroupDetails();
+        }
+        const currentNotifications = this.notificationsEnabled();
+        const hasChanges = currentNotifications !== this.initialNotifications || this.archived !== this.initialArchived;
+        if (hasChanges) {
+            this.toastService.success(this.translation.translateSync('@acorex:chat.info-panel.toasts.settings-saved'));
+        }
+    }
+    //#endregion
+    //#region ----- Data Loading -----
+    async loadConversationMessages() {
+        this.loadingMessages.set(true);
+        this.mediaNextPage = 1;
+        this.mediaNextCursor = undefined;
+        this.mediaHasMore.set(false);
+        try {
+            const page = await fetchConversationMediaPage(this.conversationService.conversationApi, this.conversation.id, 0);
+            this.mediaHasMore.set(page.hasMore);
+            this.mediaNextCursor = page.nextCursor;
+            const supplemental = this.conversationService.activeConversationId() === this.conversation.id
+                ? filterSupplementalInfoPanelMessages(this.conversationService.activeMessages())
+                : [];
+            this.conversationMessages.set(mergeInfoPanelMessages(page.items, supplemental));
+        }
+        catch (error) {
+            console.error('Failed to load conversation media messages:', error);
+        }
+        finally {
+            this.loadingMessages.set(false);
+        }
+    }
+    async loadMoreMedia() {
+        if (!this.mediaHasMore() || this.loadingMoreMedia() || this.loadingMessages()) {
+            return;
+        }
+        this.loadingMoreMedia.set(true);
+        try {
+            const page = await fetchConversationMediaPage(this.conversationService.conversationApi, this.conversation.id, this.mediaNextPage, undefined, this.mediaNextCursor);
+            this.mediaHasMore.set(page.hasMore);
+            this.mediaNextCursor = page.nextCursor;
+            this.mediaNextPage += 1;
+            this.conversationMessages.set(mergeInfoPanelMessages(page.items, this.conversationMessages()));
+        }
+        catch (error) {
+            console.error('Failed to load more conversation media:', error);
+        }
+        finally {
+            this.loadingMoreMedia.set(false);
+        }
+    }
+    //#endregion
+    //#region ----- UI Helpers -----
+    isPrivateConversation() {
+        return this.conversation.type === 'private';
+    }
+    isGroupConversation() {
+        return this.conversation.type === 'group' || this.conversation.type === 'channel';
+    }
+    membersSectionTitle() {
+        return this.translation.translateSync('@acorex:chat.info-panel.tabs.members-count-upper', {
+            params: { count: this.conversation.participants.length },
+        });
+    }
+    getMemberRoleLabel(participant) {
+        switch (participant.role) {
+            case 'admin':
+                return '@acorex:chat.info-panel.member-role.admin';
+            case 'owner':
+                return '@acorex:chat.info-panel.member-role.admin';
+            case 'moderator':
+                return '@acorex:chat.info-panel.member-role.moderator';
+            default:
+                return null;
+        }
+    }
+    onMemberSearchChange(value) {
+        this.memberSearchQuery.set(value ?? '');
+    }
+    setActiveTab(tab) {
+        this.activeTab.set(tab);
+    }
+    toggleMemberSearch() {
+        this.showMemberSearch.update((value) => !value);
+        if (!this.showMemberSearch()) {
+            this.memberSearchQuery.set('');
+        }
+    }
+    openMediaCategory(category) {
+        this.selectedMediaCategory.set(category);
+        this.panelView.set('media');
+    }
+    closeMediaView() {
+        this.panelView.set('main');
+        this.selectedMediaCategory.set(null);
+    }
+    getMediaViewInputs(category) {
+        return {
+            category,
+            messages: this.conversationMessages(),
+            conversation: this.conversation,
+            conversationService: this.conversationService,
+            hasMoreMedia: this.mediaHasMore(),
+            loadingMoreMedia: this.loadingMoreMedia(),
+            onLoadMoreMedia: () => this.loadMoreMedia(),
+            onBack: () => this.closeMediaView(),
+        };
+    }
+    getMediaRowLabel(category) {
+        return this.translation.translateSync(category.countLabelKey, {
+            params: { count: category.count },
+        });
+    }
+    getMemberSubtitle(participant) {
+        const presence = this.conversationService?.getUserPresence(participant.id);
+        this.conversationService?.presenceTimeTick();
+        if (presence?.status === 'online') {
+            return this.translation.translateSync('@acorex:chat.status.online');
+        }
+        if (participant.description?.trim())
+            return participant.description.trim();
+        if (participant.role && participant.role !== 'member')
+            return participant.role;
+        return '';
+    }
+    isMemberOnline(participant) {
+        this.conversationService?.presenceTimeTick();
+        return this.conversationService?.getUserPresence(participant.id)?.status === 'online';
+    }
+    //#endregion
+    //#region ----- Actions -----
+    onQuickAction(actionId) {
+        switch (actionId) {
+            case 'mute':
+                void this.toggleConversationMute();
+                break;
+            case 'leave':
+                void this.onLeave();
+                break;
+        }
+    }
+    async toggleConversationMute() {
+        await this.onNotificationsChange(!this.notificationsEnabled());
+    }
+    async onNotificationsChange(value) {
+        try {
+            await this.conversationService.updateConversationSettings(this.conversation.id, {
+                notifications: value,
+            });
+            this.notificationsEnabled.set(value);
+        }
+        catch (error) {
+            console.error('Failed to update notifications:', error);
+        }
+    }
+    async onArchivedChange(value) {
+        const previous = this.archived;
+        this.archived = value;
+        try {
+            await this.conversationService.updateConversation(this.conversation.id, { archived: value });
+            this.conversation.archived = value;
+            this.initialArchived = value;
+        }
+        catch {
+            this.archived = previous;
+        }
+    }
+    close(data) {
+        const event = new AXComponentCloseEvent();
+        event.component = this;
+        event.data = data;
+        this.onClosed.emit(event);
+    }
+    closeAll() {
+        this.close();
+    }
+    async onLeave() {
+        const isGroup = this.isGroupConversation();
+        await this.conversationService.deleteConversation(this.conversation.id);
+        if (this.conversationService.activeConversation()?.id === this.conversation.id) {
+            this.conversationService.closeActiveConversation();
+        }
+        this.toastService.success(isGroup
+            ? this.translation.translateSync('@acorex:chat.info-panel.toasts.left-conversation')
+            : this.translation.translateSync('@acorex:chat.info-panel.toasts.deleted-conversation'));
+        this.close();
+    }
+    onGroupTitleChange(value) {
+        this.editTitle = value;
+        clearTimeout(this.groupTitleSaveTimer);
+        this.groupTitleSaveTimer = setTimeout(() => void this.persistGroupDetails(), 400);
+    }
+    onGroupAvatarChange(value) {
+        this.editAvatar = value;
+        void this.persistGroupDetails();
+    }
+    async persistGroupDetails() {
+        if (this.isPrivateConversation() || this.groupDetailsSaveInFlight) {
+            return;
+        }
+        const title = this.editTitle.trim();
+        if (!title) {
+            return;
+        }
+        const nextAvatar = this.editAvatar.trim() || undefined;
+        const currentTitle = this.conversation.title || '';
+        const currentAvatar = this.conversation.avatar || undefined;
+        if (title === currentTitle && nextAvatar === currentAvatar) {
+            return;
+        }
+        this.groupDetailsSaveInFlight = true;
+        try {
+            await this.conversationService.updateConversation(this.conversation.id, {
+                title,
+                avatar: nextAvatar,
+            });
+            this.conversation.title = title;
+            this.conversation.avatar = nextAvatar;
+        }
+        catch (error) {
+            console.error('Failed to update group details:', error);
+            this.toastService.danger(this.translation.translateSync('@acorex:chat.info-panel.toasts.failed-group-update'));
+        }
+        finally {
+            this.groupDetailsSaveInFlight = false;
+        }
+    }
+    isBackgroundSelected(preset) {
+        this.platform.themeMode();
+        const bg = this.conversation?.metadata?.['messageListBackground'];
+        if (bg === undefined ||
+            bg === '' ||
+            (isMessageListThemeBackground(bg) && !bg.light.trim() && !bg.dark.trim())) {
+            return preset.id === AX_CONVERSATION_DEFAULT_MESSAGE_LIST_BACKGROUND_PRESET_ID;
+        }
+        return isSameMessageListBackground(bg, preset.value, this.platform.isDark());
+    }
+    presetBackgroundPreview(preset) {
+        this.platform.themeMode();
+        const raw = resolveMessageListBackgroundRaw(preset, this.platform.isDark()) ?? '';
+        return normalizeMessageListBackgroundValue(raw);
+    }
+    async applyMessageListBackground(value) {
+        const isReset = value === '' || (isMessageListThemeBackground(value) && !value.light.trim() && !value.dark.trim());
+        try {
+            const metadata = { ...(this.conversation.metadata ?? {}) };
+            if (isReset) {
+                delete metadata.messageListBackground;
+            }
+            else {
+                metadata.messageListBackground = value;
+            }
+            await this.conversationService.updateConversationMetadata(this.conversation.id, metadata);
+            this.conversation.metadata = metadata;
+            this.toastService.success(isReset
+                ? this.translation.translateSync('@acorex:chat.info-panel.toasts.background-reset')
+                : this.translation.translateSync('@acorex:chat.info-panel.toasts.background-updated'));
+        }
+        catch (error) {
+            console.error('Failed to update message list background:', error);
+            this.toastService.danger(this.translation.translateSync('@acorex:chat.info-panel.toasts.failed-background-update'));
+        }
+    }
+    getBackgroundAriaLabel(label) {
+        return this.translation.translateSync('@acorex:chat.info-panel.background.set-label', {
+            params: { label },
+        });
+    }
+    translateBackgroundPresetLabel(id) {
+        const labelKeys = {
+            'solid-default': '@acorex:chat.info-panel.background.presets.default',
+            'solid-graphite': '@acorex:chat.info-panel.background.presets.graphite',
+            'solid-olive': '@acorex:chat.info-panel.background.presets.olive',
+            'solid-sky': '@acorex:chat.info-panel.background.presets.sky',
+            'grad-aurora': '@acorex:chat.info-panel.background.presets.aurora',
+            'grad-sunset': '@acorex:chat.info-panel.background.presets.sunset',
+        };
+        return this.translation.translateSync(labelKeys[id] ?? id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatConversationInfoPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMChatConversationInfoPanelComponent, isStandalone: true, selector: "axm-chat-conversation-info-panel", outputs: { onClosed: "onClosed" }, providers: [{ provide: AXClosableComponent, useExisting: AXMChatConversationInfoPanelComponent }], usesInheritance: true, ngImport: i0, template: "@if (conversation) {\n  <div class=\"tg-info-panel\">\n    @if (panelView() === 'media' && selectedMediaCategory(); as category) {\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"mediaViewLoader\"\n        [inputs]=\"getMediaViewInputs(category)\"\n      />\n    } @else {\n      <div class=\"tg-info-panel__scroll\">\n        <section class=\"tg-hero\">\n          <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"96\" />\n          <h2 class=\"tg-hero__title\">{{ conversation.title }}</h2>\n          <p class=\"tg-hero__subtitle\">{{ heroSubtitle() }}</p>\n        </section>\n\n        <section class=\"tg-quick-actions\">\n          @for (action of quickActions(); track action.id) {\n            <button\n              type=\"button\"\n              class=\"tg-quick-action\"\n              [class.tg-quick-action--danger]=\"action.danger\"\n              [class.tg-quick-action--active]=\"action.id === 'mute' && isConversationMuted()\"\n              (click)=\"onQuickAction(action.id)\"\n            >\n              <span class=\"tg-quick-action__icon\"><i [class]=\"action.icon\"></i></span>\n              <span class=\"tg-quick-action__label\">{{ action.labelKey | translate | async }}</span>\n            </button>\n          }\n        </section>\n\n        <nav class=\"tg-tabs\" role=\"tablist\">\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'profile'\"\n            [attr.aria-selected]=\"activeTab() === 'profile'\"\n            (click)=\"setActiveTab('profile')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.profile' | translate | async }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'manage'\"\n            [attr.aria-selected]=\"activeTab() === 'manage'\"\n            (click)=\"setActiveTab('manage')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.manage' | translate | async }}\n          </button>\n        </nav>\n\n        @if (activeTab() === 'profile') {\n          @if (profileFields().length > 0) {\n            <section class=\"tg-section tg-details\">\n              @for (field of profileFields(); track field.id) {\n                <div class=\"tg-detail-row\">\n                  <span class=\"tg-detail-row__icon\"><i [class]=\"field.icon\"></i></span>\n                  <div class=\"tg-detail-row__content\">\n                    <span class=\"tg-detail-row__value\">{{ field.value }}</span>\n                    <span class=\"tg-detail-row__label\">{{ field.labelKey | translate | async }}</span>\n                  </div>\n                </div>\n              }\n            </section>\n          }\n\n          @if (loadingMessages()) {\n            <div class=\"tg-loading\">{{ '@acorex:chat.info-panel.media.loading' | translate | async }}</div>\n          } @else if (mediaCategories().length > 0) {\n            <section class=\"tg-section tg-media\">\n              @for (category of mediaCategories(); track category.id) {\n                <button type=\"button\" class=\"tg-media-row\" (click)=\"openMediaCategory(category)\">\n                  <span class=\"tg-media-row__icon\"><i [class]=\"category.icon\"></i></span>\n                  <span class=\"tg-media-row__label\">{{ getMediaRowLabel(category) }}</span>\n                  <i class=\"fa-light fa-chevron-right tg-media-row__chevron\"></i>\n                </button>\n              }\n            </section>\n          }\n\n          @if (isGroupConversation()) {\n            <section class=\"tg-section tg-members\">\n              <div class=\"tg-section-header tg-section-header--row\">\n                <span class=\"tg-section-header__title\">{{ membersSectionTitle() }}</span>\n                <div class=\"tg-section-header__actions\">\n                  <button\n                    type=\"button\"\n                    class=\"tg-icon-btn\"\n                    (click)=\"toggleMemberSearch()\"\n                    [attr.aria-label]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  >\n                    <i class=\"fa-light fa-magnifying-glass\"></i>\n                  </button>\n                </div>\n              </div>\n              @if (showMemberSearch()) {\n                <div class=\"tg-members-search-wrap\">\n                  <ax-search-box\n                    class=\"tg-members-search\"\n                    [value]=\"memberSearchQuery()\"\n                    (valueChange)=\"onMemberSearchChange($event)\"\n                    [placeholder]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  ></ax-search-box>\n                </div>\n              }\n              @for (participant of filteredMembers(); track participant.id) {\n                <div class=\"tg-member-row\">\n                  <ax-conversation-avatar\n                    kind=\"user\"\n                    [userId]=\"participant.id\"\n                    [conversation]=\"conversation\"\n                    [size]=\"42\"\n                  />\n                  <div class=\"tg-member-row__content\">\n                    <span class=\"tg-member-row__name\">{{ participant.name }}</span>\n                    <span\n                      class=\"tg-member-row__meta\"\n                      [class.tg-member-row__meta--online]=\"isMemberOnline(participant)\"\n                    >\n                      {{ getMemberSubtitle(participant) }}\n                    </span>\n                  </div>\n                  @if (getMemberRoleLabel(participant); as roleLabel) {\n                    <span class=\"tg-member-row__badge\">{{ roleLabel | translate | async }}</span>\n                  }\n                </div>\n              }\n            </section>\n          }\n        }\n\n        @if (activeTab() === 'manage') {\n          <section class=\"tg-section tg-manage\">\n            @if (!isPrivateConversation()) {\n              <div class=\"tg-manage-block\">\n                <ax-label class=\"tg-manage-label\">{{\n                  '@acorex:chat.info-panel.group-details.title' | translate | async\n                }}</ax-label>\n                <ax-text-box\n                  [value]=\"editTitle\"\n                  (valueChange)=\"onGroupTitleChange($event)\"\n                  [placeholder]=\"'@acorex:chat.info-panel.placeholders.enter-group-title' | translate | async\"\n                ></ax-text-box>\n                <div class=\"tg-manage-avatar\">\n                  <ax-conversation-avatar-picker\n                    [(avatarUrl)]=\"editAvatar\"\n                    (avatarUrlChange)=\"onGroupAvatarChange($event)\"\n                  ></ax-conversation-avatar-picker>\n                </div>\n              </div>\n            }\n\n            <div class=\"tg-setting-row\">\n              <div class=\"tg-setting-row__info\">\n                <span class=\"tg-setting-row__title\">{{\n                  '@acorex:chat.info-panel.settings.archived' | translate | async\n                }}</span>\n                <span class=\"tg-setting-row__desc\">{{\n                  '@acorex:chat.info-panel.settings.archived-description' | translate | async\n                }}</span>\n              </div>\n              <ax-switch [(ngModel)]=\"archived\" (ngModelChange)=\"onArchivedChange($event)\"></ax-switch>\n            </div>\n\n            <div class=\"tg-manage-block tg-background-block\">\n              <ax-label class=\"tg-manage-label\">{{\n                '@acorex:chat.info-panel.background.title' | translate | async\n              }}</ax-label>\n              <p class=\"tg-background-desc\">\n                {{ '@acorex:chat.info-panel.background.description' | translate | async }}\n              </p>\n              <div class=\"tg-background-grid\">\n                @for (preset of backgroundPresets; track preset.id) {\n                  <button\n                    type=\"button\"\n                    class=\"tg-background-swatch\"\n                    [class.tg-background-swatch--active]=\"isBackgroundSelected(preset)\"\n                    [style.background]=\"presetBackgroundPreview(preset.value)\"\n                    (click)=\"applyMessageListBackground(preset.value)\"\n                    [attr.aria-label]=\"getBackgroundAriaLabel(preset.label)\"\n                  >\n                    <span class=\"tg-background-swatch__label\">{{ preset.label }}</span>\n                  </button>\n                }\n              </div>\n              <ax-button\n                [text]=\"'@acorex:chat.info-panel.actions.reset-to-default' | translate | async\"\n                [look]=\"'ghost'\"\n                (onClick)=\"applyMessageListBackground('')\"\n              ></ax-button>\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer components{axm-chat-conversation-info-panel{display:block;height:100%;width:100%}axm-chat-conversation-info-panel .tg-info-panel{display:flex;flex-direction:column;max-height:min(85vh,40rem)}axm-chat-conversation-info-panel .tg-info-panel__scroll{overflow-y:auto;overscroll-behavior:contain}axm-chat-conversation-info-panel .tg-hero{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 5);padding-top:calc(var(--spacing, .25rem) * 5);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center}axm-chat-conversation-info-panel .tg-hero__title{margin-top:var(--spacing, .25rem);margin-bottom:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: 1.35;line-height:1.35;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);overflow-wrap:break-word;color:rgba(var(--ax-sys-color-on-surface))}axm-chat-conversation-info-panel .tg-hero__subtitle{margin:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}axm-chat-conversation-info-panel .tg-quick-actions{display:flex;flex-wrap:nowrap;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}axm-chat-conversation-info-panel .tg-quick-action{display:flex;max-width:5.5rem;min-width:0px;flex:1;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--radius-xl, .75rem);--tw-border-style: none;border-style:none;background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-primary-500));transition:background-color .15s ease}axm-chat-conversation-info-panel .tg-quick-action:hover{background-color:rgba(var(--ax-sys-color-border-light-surface))}axm-chat-conversation-info-panel .tg-quick-action--danger{color:rgba(var(--ax-sys-color-danger-500))}axm-chat-conversation-info-panel .tg-quick-action--active{color:rgba(var(--ax-sys-color-warning-500));background:rgba(var(--ax-sys-color-warning-500),.14)}axm-chat-conversation-info-panel .tg-quick-action--active .tg-quick-action__label{color:rgba(var(--ax-sys-color-warning-500));opacity:100%}axm-chat-conversation-info-panel .tg-quick-action__icon{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: 1;line-height:1}axm-chat-conversation-info-panel .tg-quick-action__label{text-align:center;font-size:.6875rem;--tw-leading: 1.1;line-height:1.1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}axm-chat-conversation-info-panel .tg-tabs{margin-inline:calc(var(--spacing, .25rem) * 3);display:flex;gap:0px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}axm-chat-conversation-info-panel .tg-tab{flex:1;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:2px;--tw-border-style: none;border-style:none;border-color:transparent;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface));opacity:55%;transition:opacity .15s ease,color .15s ease,border-color .15s ease}axm-chat-conversation-info-panel .tg-tab:hover{opacity:80%}axm-chat-conversation-info-panel .tg-tab--active{color:rgba(var(--ax-sys-color-primary-500));opacity:100%;border-bottom-color:rgb(var(--ax-sys-color-primary-500))}axm-chat-conversation-info-panel .tg-section{padding-block:var(--spacing, .25rem)}axm-chat-conversation-info-panel .tg-detail-row,axm-chat-conversation-info-panel .tg-member-row{display:flex;min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5)}axm-chat-conversation-info-panel .tg-media-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5);text-align:start;transition:background-color .15s ease}axm-chat-conversation-info-panel .tg-media-row:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}axm-chat-conversation-info-panel .tg-media-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:75%}axm-chat-conversation-info-panel .tg-media-row__label{min-width:0px;flex:1;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}axm-chat-conversation-info-panel .tg-media-row__chevron{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:.45}axm-chat-conversation-info-panel .tg-loading{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.8125rem;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}axm-chat-conversation-info-panel .tg-detail-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-primary-500));opacity:90%}axm-chat-conversation-info-panel .tg-detail-row__content,axm-chat-conversation-info-panel .tg-member-row__content{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axm-chat-conversation-info-panel .tg-detail-row__value,axm-chat-conversation-info-panel .tg-member-row__name{overflow:hidden;font-size:.9375rem;--tw-leading: 1.3;line-height:1.3;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}axm-chat-conversation-info-panel .tg-detail-row__label,axm-chat-conversation-info-panel .tg-member-row__meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1.2;line-height:1.2;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}axm-chat-conversation-info-panel .tg-member-row__meta--online{color:rgba(var(--ax-sys-color-primary-500));opacity:100%}axm-chat-conversation-info-panel .tg-section-header{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 1.5)}axm-chat-conversation-info-panel .tg-section-header--row{flex-direction:row;align-items:center;justify-content:space-between}axm-chat-conversation-info-panel .tg-section-header__actions{display:flex;align-items:center;gap:var(--spacing, .25rem)}axm-chat-conversation-info-panel .tg-icon-btn{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-panel .tg-icon-btn:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}axm-chat-conversation-info-panel .tg-members-search-wrap{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2)}axm-chat-conversation-info-panel .tg-section-header__title{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: .06em;letter-spacing:.06em;color:rgba(var(--ax-sys-color-on-surface));text-transform:uppercase;opacity:55%}axm-chat-conversation-info-panel .tg-members-search{width:100%}axm-chat-conversation-info-panel .tg-member-row__badge{flex-shrink:0;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.14)}axm-chat-conversation-info-panel .tg-manage{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}axm-chat-conversation-info-panel .tg-manage-block{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}axm-chat-conversation-info-panel .tg-manage-label{font-size:.8125rem;--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-panel .tg-setting-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2)}axm-chat-conversation-info-panel .tg-setting-row__info{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axm-chat-conversation-info-panel .tg-setting-row__title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}axm-chat-conversation-info-panel .tg-setting-row__desc{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:.65}axm-chat-conversation-info-panel .tg-background-desc{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}axm-chat-conversation-info-panel .tg-background-grid{display:grid;gap:calc(var(--spacing, .25rem) * 2);grid-template-columns:repeat(3,minmax(0,1fr))}axm-chat-conversation-info-panel .tg-background-swatch{position:relative;height:calc(var(--spacing, .25rem) * 11);cursor:pointer;overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:2px;border-color:transparent}axm-chat-conversation-info-panel .tg-background-swatch--active{border-color:rgba(var(--ax-sys-color-primary-500))}axm-chat-conversation-info-panel .tg-background-swatch__label{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 1.5);bottom:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-font-weight: var(--font-weight-light, 300);font-weight:var(--font-weight-light, 300);--tw-tracking: .1rem;letter-spacing:.1rem;color:var(--color-white, #fff);mix-blend-mode:difference}axm-chat-conversation-info-panel .tg-danger{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 3)}axm-chat-conversation-info-panel .tg-danger-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-danger-500))}axm-chat-conversation-info-panel .tg-danger-row:hover{background:rgba(var(--ax-sys-color-danger-500),.06)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-tracking{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-leading: initial;--tw-font-weight: initial;--tw-border-style: solid;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i2.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "component", type: AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "component", type: AXConversationAvatarPickerComponent, selector: "ax-conversation-avatar-picker", inputs: ["showClearButton", "avatarUrl"], outputs: ["avatarUrlChange", "onFileSelected"] }, { kind: "component", type: AXConversationAvatarComponent, selector: "ax-conversation-avatar", inputs: ["kind", "userId", "conversation", "message", "size", "showStatus", "name", "avatar", "icon"] }, { kind: "component", type: AXConversationRegistryComponentOutletComponent, selector: "ax-conversation-registry-component-outlet", inputs: ["component", "componentLoader", "inputs"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMChatConversationInfoPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-chat-conversation-info-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        AsyncPipe,
+                        FormsModule,
+                        AXButtonComponent,
+                        AXDecoratorModule,
+                        AXLabelComponent,
+                        AXSearchBoxComponent,
+                        AXSwitchModule,
+                        AXTextBoxComponent,
+                        AXConversationAvatarPickerComponent,
+                        AXConversationAvatarComponent,
+                        AXConversationRegistryComponentOutletComponent,
+                        AXTranslationModule,
+                    ], providers: [{ provide: AXClosableComponent, useExisting: AXMChatConversationInfoPanelComponent }], template: "@if (conversation) {\n  <div class=\"tg-info-panel\">\n    @if (panelView() === 'media' && selectedMediaCategory(); as category) {\n      <ax-conversation-registry-component-outlet\n        [componentLoader]=\"mediaViewLoader\"\n        [inputs]=\"getMediaViewInputs(category)\"\n      />\n    } @else {\n      <div class=\"tg-info-panel__scroll\">\n        <section class=\"tg-hero\">\n          <ax-conversation-avatar kind=\"auto\" [conversation]=\"conversation\" [size]=\"96\" />\n          <h2 class=\"tg-hero__title\">{{ conversation.title }}</h2>\n          <p class=\"tg-hero__subtitle\">{{ heroSubtitle() }}</p>\n        </section>\n\n        <section class=\"tg-quick-actions\">\n          @for (action of quickActions(); track action.id) {\n            <button\n              type=\"button\"\n              class=\"tg-quick-action\"\n              [class.tg-quick-action--danger]=\"action.danger\"\n              [class.tg-quick-action--active]=\"action.id === 'mute' && isConversationMuted()\"\n              (click)=\"onQuickAction(action.id)\"\n            >\n              <span class=\"tg-quick-action__icon\"><i [class]=\"action.icon\"></i></span>\n              <span class=\"tg-quick-action__label\">{{ action.labelKey | translate | async }}</span>\n            </button>\n          }\n        </section>\n\n        <nav class=\"tg-tabs\" role=\"tablist\">\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'profile'\"\n            [attr.aria-selected]=\"activeTab() === 'profile'\"\n            (click)=\"setActiveTab('profile')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.profile' | translate | async }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"tg-tab\"\n            role=\"tab\"\n            [class.tg-tab--active]=\"activeTab() === 'manage'\"\n            [attr.aria-selected]=\"activeTab() === 'manage'\"\n            (click)=\"setActiveTab('manage')\"\n          >\n            {{ '@acorex:chat.info-panel.tabs.manage' | translate | async }}\n          </button>\n        </nav>\n\n        @if (activeTab() === 'profile') {\n          @if (profileFields().length > 0) {\n            <section class=\"tg-section tg-details\">\n              @for (field of profileFields(); track field.id) {\n                <div class=\"tg-detail-row\">\n                  <span class=\"tg-detail-row__icon\"><i [class]=\"field.icon\"></i></span>\n                  <div class=\"tg-detail-row__content\">\n                    <span class=\"tg-detail-row__value\">{{ field.value }}</span>\n                    <span class=\"tg-detail-row__label\">{{ field.labelKey | translate | async }}</span>\n                  </div>\n                </div>\n              }\n            </section>\n          }\n\n          @if (loadingMessages()) {\n            <div class=\"tg-loading\">{{ '@acorex:chat.info-panel.media.loading' | translate | async }}</div>\n          } @else if (mediaCategories().length > 0) {\n            <section class=\"tg-section tg-media\">\n              @for (category of mediaCategories(); track category.id) {\n                <button type=\"button\" class=\"tg-media-row\" (click)=\"openMediaCategory(category)\">\n                  <span class=\"tg-media-row__icon\"><i [class]=\"category.icon\"></i></span>\n                  <span class=\"tg-media-row__label\">{{ getMediaRowLabel(category) }}</span>\n                  <i class=\"fa-light fa-chevron-right tg-media-row__chevron\"></i>\n                </button>\n              }\n            </section>\n          }\n\n          @if (isGroupConversation()) {\n            <section class=\"tg-section tg-members\">\n              <div class=\"tg-section-header tg-section-header--row\">\n                <span class=\"tg-section-header__title\">{{ membersSectionTitle() }}</span>\n                <div class=\"tg-section-header__actions\">\n                  <button\n                    type=\"button\"\n                    class=\"tg-icon-btn\"\n                    (click)=\"toggleMemberSearch()\"\n                    [attr.aria-label]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  >\n                    <i class=\"fa-light fa-magnifying-glass\"></i>\n                  </button>\n                </div>\n              </div>\n              @if (showMemberSearch()) {\n                <div class=\"tg-members-search-wrap\">\n                  <ax-search-box\n                    class=\"tg-members-search\"\n                    [value]=\"memberSearchQuery()\"\n                    (valueChange)=\"onMemberSearchChange($event)\"\n                    [placeholder]=\"'@acorex:chat.info-panel.placeholders.search-members' | translate | async\"\n                  ></ax-search-box>\n                </div>\n              }\n              @for (participant of filteredMembers(); track participant.id) {\n                <div class=\"tg-member-row\">\n                  <ax-conversation-avatar\n                    kind=\"user\"\n                    [userId]=\"participant.id\"\n                    [conversation]=\"conversation\"\n                    [size]=\"42\"\n                  />\n                  <div class=\"tg-member-row__content\">\n                    <span class=\"tg-member-row__name\">{{ participant.name }}</span>\n                    <span\n                      class=\"tg-member-row__meta\"\n                      [class.tg-member-row__meta--online]=\"isMemberOnline(participant)\"\n                    >\n                      {{ getMemberSubtitle(participant) }}\n                    </span>\n                  </div>\n                  @if (getMemberRoleLabel(participant); as roleLabel) {\n                    <span class=\"tg-member-row__badge\">{{ roleLabel | translate | async }}</span>\n                  }\n                </div>\n              }\n            </section>\n          }\n        }\n\n        @if (activeTab() === 'manage') {\n          <section class=\"tg-section tg-manage\">\n            @if (!isPrivateConversation()) {\n              <div class=\"tg-manage-block\">\n                <ax-label class=\"tg-manage-label\">{{\n                  '@acorex:chat.info-panel.group-details.title' | translate | async\n                }}</ax-label>\n                <ax-text-box\n                  [value]=\"editTitle\"\n                  (valueChange)=\"onGroupTitleChange($event)\"\n                  [placeholder]=\"'@acorex:chat.info-panel.placeholders.enter-group-title' | translate | async\"\n                ></ax-text-box>\n                <div class=\"tg-manage-avatar\">\n                  <ax-conversation-avatar-picker\n                    [(avatarUrl)]=\"editAvatar\"\n                    (avatarUrlChange)=\"onGroupAvatarChange($event)\"\n                  ></ax-conversation-avatar-picker>\n                </div>\n              </div>\n            }\n\n            <div class=\"tg-setting-row\">\n              <div class=\"tg-setting-row__info\">\n                <span class=\"tg-setting-row__title\">{{\n                  '@acorex:chat.info-panel.settings.archived' | translate | async\n                }}</span>\n                <span class=\"tg-setting-row__desc\">{{\n                  '@acorex:chat.info-panel.settings.archived-description' | translate | async\n                }}</span>\n              </div>\n              <ax-switch [(ngModel)]=\"archived\" (ngModelChange)=\"onArchivedChange($event)\"></ax-switch>\n            </div>\n\n            <div class=\"tg-manage-block tg-background-block\">\n              <ax-label class=\"tg-manage-label\">{{\n                '@acorex:chat.info-panel.background.title' | translate | async\n              }}</ax-label>\n              <p class=\"tg-background-desc\">\n                {{ '@acorex:chat.info-panel.background.description' | translate | async }}\n              </p>\n              <div class=\"tg-background-grid\">\n                @for (preset of backgroundPresets; track preset.id) {\n                  <button\n                    type=\"button\"\n                    class=\"tg-background-swatch\"\n                    [class.tg-background-swatch--active]=\"isBackgroundSelected(preset)\"\n                    [style.background]=\"presetBackgroundPreview(preset.value)\"\n                    (click)=\"applyMessageListBackground(preset.value)\"\n                    [attr.aria-label]=\"getBackgroundAriaLabel(preset.label)\"\n                  >\n                    <span class=\"tg-background-swatch__label\">{{ preset.label }}</span>\n                  </button>\n                }\n              </div>\n              <ax-button\n                [text]=\"'@acorex:chat.info-panel.actions.reset-to-default' | translate | async\"\n                [look]=\"'ghost'\"\n                (onClick)=\"applyMessageListBackground('')\"\n              ></ax-button>\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer components{axm-chat-conversation-info-panel{display:block;height:100%;width:100%}axm-chat-conversation-info-panel .tg-info-panel{display:flex;flex-direction:column;max-height:min(85vh,40rem)}axm-chat-conversation-info-panel .tg-info-panel__scroll{overflow-y:auto;overscroll-behavior:contain}axm-chat-conversation-info-panel .tg-hero{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 5);padding-top:calc(var(--spacing, .25rem) * 5);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center}axm-chat-conversation-info-panel .tg-hero__title{margin-top:var(--spacing, .25rem);margin-bottom:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: 1.35;line-height:1.35;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);overflow-wrap:break-word;color:rgba(var(--ax-sys-color-on-surface))}axm-chat-conversation-info-panel .tg-hero__subtitle{margin:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);color:rgba(var(--ax-sys-color-on-surface));opacity:.65}axm-chat-conversation-info-panel .tg-quick-actions{display:flex;flex-wrap:nowrap;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);padding-inline:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}axm-chat-conversation-info-panel .tg-quick-action{display:flex;max-width:5.5rem;min-width:0px;flex:1;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--radius-xl, .75rem);--tw-border-style: none;border-style:none;background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:calc(var(--spacing, .25rem) * 2.5);color:rgba(var(--ax-sys-color-primary-500));transition:background-color .15s ease}axm-chat-conversation-info-panel .tg-quick-action:hover{background-color:rgba(var(--ax-sys-color-border-light-surface))}axm-chat-conversation-info-panel .tg-quick-action--danger{color:rgba(var(--ax-sys-color-danger-500))}axm-chat-conversation-info-panel .tg-quick-action--active{color:rgba(var(--ax-sys-color-warning-500));background:rgba(var(--ax-sys-color-warning-500),.14)}axm-chat-conversation-info-panel .tg-quick-action--active .tg-quick-action__label{color:rgba(var(--ax-sys-color-warning-500));opacity:100%}axm-chat-conversation-info-panel .tg-quick-action__icon{font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: 1;line-height:1}axm-chat-conversation-info-panel .tg-quick-action__label{text-align:center;font-size:.6875rem;--tw-leading: 1.1;line-height:1.1;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface));opacity:85%}axm-chat-conversation-info-panel .tg-tabs{margin-inline:calc(var(--spacing, .25rem) * 3);display:flex;gap:0px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface))}axm-chat-conversation-info-panel .tg-tab{flex:1;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:2px;--tw-border-style: none;border-style:none;border-color:transparent;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface));opacity:55%;transition:opacity .15s ease,color .15s ease,border-color .15s ease}axm-chat-conversation-info-panel .tg-tab:hover{opacity:80%}axm-chat-conversation-info-panel .tg-tab--active{color:rgba(var(--ax-sys-color-primary-500));opacity:100%;border-bottom-color:rgb(var(--ax-sys-color-primary-500))}axm-chat-conversation-info-panel .tg-section{padding-block:var(--spacing, .25rem)}axm-chat-conversation-info-panel .tg-detail-row,axm-chat-conversation-info-panel .tg-member-row{display:flex;min-width:0px;align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5)}axm-chat-conversation-info-panel .tg-media-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3.5);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2.5);text-align:start;transition:background-color .15s ease}axm-chat-conversation-info-panel .tg-media-row:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}axm-chat-conversation-info-panel .tg-media-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-on-surface));opacity:75%}axm-chat-conversation-info-panel .tg-media-row__label{min-width:0px;flex:1;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}axm-chat-conversation-info-panel .tg-media-row__chevron{flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:.45}axm-chat-conversation-info-panel .tg-loading{padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:.8125rem;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}axm-chat-conversation-info-panel .tg-detail-row__icon{width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;text-align:center;color:rgba(var(--ax-sys-color-primary-500));opacity:90%}axm-chat-conversation-info-panel .tg-detail-row__content,axm-chat-conversation-info-panel .tg-member-row__content{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axm-chat-conversation-info-panel .tg-detail-row__value,axm-chat-conversation-info-panel .tg-member-row__name{overflow:hidden;font-size:.9375rem;--tw-leading: 1.3;line-height:1.3;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap;color:rgba(var(--ax-sys-color-on-surface))}axm-chat-conversation-info-panel .tg-detail-row__label,axm-chat-conversation-info-panel .tg-member-row__meta{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1.2;line-height:1.2;color:rgba(var(--ax-sys-color-on-surface));opacity:60%}axm-chat-conversation-info-panel .tg-member-row__meta--online{color:rgba(var(--ax-sys-color-primary-500));opacity:100%}axm-chat-conversation-info-panel .tg-section-header{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 4);padding-top:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 1.5)}axm-chat-conversation-info-panel .tg-section-header--row{flex-direction:row;align-items:center;justify-content:space-between}axm-chat-conversation-info-panel .tg-section-header__actions{display:flex;align-items:center;gap:var(--spacing, .25rem)}axm-chat-conversation-info-panel .tg-icon-btn{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-panel .tg-icon-btn:hover{background-color:rgba(var(--ax-sys-color-lighter-surface))}axm-chat-conversation-info-panel .tg-members-search-wrap{padding-inline:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 2)}axm-chat-conversation-info-panel .tg-section-header__title{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: .06em;letter-spacing:.06em;color:rgba(var(--ax-sys-color-on-surface));text-transform:uppercase;opacity:55%}axm-chat-conversation-info-panel .tg-members-search{width:100%}axm-chat-conversation-info-panel .tg-member-row__badge{flex-shrink:0;border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:.6875rem;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.14)}axm-chat-conversation-info-panel .tg-manage{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-bottom:calc(var(--spacing, .25rem) * 4)}axm-chat-conversation-info-panel .tg-manage-block{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}axm-chat-conversation-info-panel .tg-manage-label{font-size:.8125rem;--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-panel .tg-setting-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2)}axm-chat-conversation-info-panel .tg-setting-row__info{display:flex;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axm-chat-conversation-info-panel .tg-setting-row__title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-on-surface))}axm-chat-conversation-info-panel .tg-setting-row__desc{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:.65}axm-chat-conversation-info-panel .tg-background-desc{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}axm-chat-conversation-info-panel .tg-background-grid{display:grid;gap:calc(var(--spacing, .25rem) * 2);grid-template-columns:repeat(3,minmax(0,1fr))}axm-chat-conversation-info-panel .tg-background-swatch{position:relative;height:calc(var(--spacing, .25rem) * 11);cursor:pointer;overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:2px;border-color:transparent}axm-chat-conversation-info-panel .tg-background-swatch--active{border-color:rgba(var(--ax-sys-color-primary-500))}axm-chat-conversation-info-panel .tg-background-swatch__label{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 1.5);bottom:calc(var(--spacing, .25rem) * .5);font-size:.65rem;--tw-font-weight: var(--font-weight-light, 300);font-weight:var(--font-weight-light, 300);--tw-tracking: .1rem;letter-spacing:.1rem;color:var(--color-white, #fff);mix-blend-mode:difference}axm-chat-conversation-info-panel .tg-danger{padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 3)}axm-chat-conversation-info-panel .tg-danger-row{display:flex;width:100%;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 3);--tw-border-style: none;border-style:none;background-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start;font-size:.9375rem;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-danger-500))}axm-chat-conversation-info-panel .tg-danger-row:hover{background:rgba(var(--ax-sys-color-danger-500),.06)}}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-tracking{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-leading: initial;--tw-font-weight: initial;--tw-border-style: solid;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { onClosed: [{ type: i0.Output, args: ["onClosed"] }] } });
+
+export { AXMChatConversationInfoPanelComponent };
+//# sourceMappingURL=acorex-platform-module-conversation-client-chat-conversation-info-panel.component-CE40xbl9.mjs.map