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

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

@@ -1,482 +0,0 @@
-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, ChangeDetectorRef, 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.cdr = inject(ChangeDetectorRef);
-        /**
-         * Optional fallback only. Popup content is created on the root view container;
-         * the chat instance is assigned via {@link AXPopupService} `data`.
-         */
-        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-SYCtAqcV.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() {
-        // Popup assigns `data` after createComponent, so ngOnInit runs before those fields exist.
-        queueMicrotask(() => this.initializeFromPopupData());
-    }
-    initializeFromPopupData() {
-        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 || '';
-        this.cdr.markForCheck();
-        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", "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", "skeleton"] }, { 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-51PtojIM.mjs.map