@acorex/components 20.8.32 → 20.9.0

package/fesm2022/acorex-components-conversation-conversation-info-panel.component-BJMo9bDd.mjs

@@ -0,0 +1,1080 @@
+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 * as i3 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import * as i2$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, output, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { n as normalizeImagePayload, a as resolvePrivatePeerUserId, b as resolveParticipantProfile, c as resolvePersistedThumbnailUrl, d as resolveImageDisplayUrl, A as AXConversationService, e as AXConversationMessageUtilsService, f as AXConversationAvatarPickerComponent, g as AXConversationAvatarComponent, h as AXConversationRegistryComponentOutletComponent } from './acorex-components-conversation-acorex-components-conversation-CjVDCoJw.mjs';
+import { normalizeAudioPayload } from './acorex-components-conversation-audio.payload-CLnYjmYY.mjs';
+import { normalizeFilePayload } from './acorex-components-conversation-file.payload-DXwzNWxT.mjs';
+import { normalizeVideoPayload } from './acorex-components-conversation-video.payload-DfBEjqQ4.mjs';
+
+const AX_CONVERSATION_URL_PATTERN = /https?:\/\/[^\s<>"']+/i;
+function messageContainsLink(message) {
+    return countLinksInMessage(message) > 0;
+}
+function countLinksInMessage(message) {
+    if (message.type !== 'text') {
+        return 0;
+    }
+    const payload = message.payload;
+    if (payload.links?.length) {
+        return payload.links.length;
+    }
+    const text = payload.text ?? '';
+    const matches = text.match(new RegExp(AX_CONVERSATION_URL_PATTERN.source, 'gi'));
+    return matches?.length ?? 0;
+}
+function countMediaItemsInMessage(message) {
+    const linkCount = countLinksInMessage(message);
+    if (linkCount > 0) {
+        return { link: linkCount };
+    }
+    switch (message.type) {
+        case 'image': {
+            const count = normalizeImagePayload(message.payload).images.length;
+            return count > 0 ? { image: count } : {};
+        }
+        case 'video': {
+            const count = normalizeVideoPayload(message.payload).videos.length;
+            return count > 0 ? { video: count } : {};
+        }
+        case 'audio': {
+            const count = normalizeAudioPayload(message.payload).audios.length;
+            return count > 0 ? { audio: count } : {};
+        }
+        case 'file': {
+            const count = normalizeFilePayload(message.payload).files.length;
+            return count > 0 ? { file: count } : {};
+        }
+        case 'voice':
+            return { voice: 1 };
+        case 'sticker':
+            return { sticker: 1 };
+        case 'location':
+            return { location: 1 };
+        default:
+            return {};
+    }
+}
+function getPrivatePeerParticipant(conversation, currentUserId) {
+    const peerId = resolvePrivatePeerUserId(conversation, currentUserId);
+    if (!peerId)
+        return undefined;
+    return conversation.participants.find((p) => p.id === peerId);
+}
+function getConversationProfileFields(conversation, currentUserId) {
+    const fields = [];
+    if (conversation.type === 'private') {
+        const peer = getPrivatePeerParticipant(conversation, currentUserId);
+        const profile = resolveParticipantProfile(peer);
+        const addField = (id, labelKey, icon, value) => {
+            if (value?.trim()) {
+                fields.push({ id, labelKey, icon, value: value.trim() });
+            }
+        };
+        addField('bio', '@acorex:chat.info-panel.profile.bio', 'fa-light fa-align-left', profile.bio);
+        addField('phone', '@acorex:chat.info-panel.profile.phone', 'fa-light fa-phone', profile.phone);
+        addField('email', '@acorex:chat.info-panel.profile.email', 'fa-light fa-envelope', profile.email);
+        addField('username', '@acorex:chat.info-panel.profile.username', 'fa-light fa-at', profile.username);
+        addField('location', '@acorex:chat.info-panel.profile.location', 'fa-light fa-location-dot', profile.location);
+        addField('company', '@acorex:chat.info-panel.profile.company', 'fa-light fa-building', profile.company);
+        addField('title', '@acorex:chat.info-panel.profile.title', 'fa-light fa-briefcase', profile.title);
+        if (peer?.description?.trim()) {
+            fields.unshift({
+                id: 'description',
+                labelKey: '@acorex:chat.info-panel.profile.about',
+                icon: 'fa-light fa-user',
+                value: peer.description.trim(),
+            });
+        }
+    }
+    else if (conversation.description?.trim()) {
+        fields.push({
+            id: 'description',
+            labelKey: '@acorex:chat.info-panel.profile.about',
+            icon: 'fa-light fa-align-left',
+            value: conversation.description.trim(),
+        });
+    }
+    const groupInfo = conversation.metadata?.['profile']?.groupInfo;
+    if (groupInfo?.purpose?.trim()) {
+        fields.push({
+            id: 'purpose',
+            labelKey: '@acorex:chat.info-panel.profile.purpose',
+            icon: 'fa-light fa-bullseye',
+            value: groupInfo.purpose.trim(),
+        });
+    }
+    return fields;
+}
+function getConversationMediaCategories(messages) {
+    const counts = {
+        image: 0,
+        video: 0,
+        file: 0,
+        audio: 0,
+        voice: 0,
+        sticker: 0,
+        location: 0,
+        link: 0,
+    };
+    for (const message of messages) {
+        const itemCounts = countMediaItemsInMessage(message);
+        for (const [categoryId, count] of Object.entries(itemCounts)) {
+            counts[categoryId] += count;
+        }
+    }
+    const definitions = [
+        {
+            id: 'image',
+            labelKey: '@acorex:chat.info-panel.media.photos',
+            countLabelKey: '@acorex:chat.info-panel.media.count-photos',
+            icon: 'fa-light fa-image',
+        },
+        {
+            id: 'video',
+            labelKey: '@acorex:chat.info-panel.media.videos',
+            countLabelKey: '@acorex:chat.info-panel.media.count-videos',
+            icon: 'fa-light fa-video',
+        },
+        {
+            id: 'file',
+            labelKey: '@acorex:chat.info-panel.media.files',
+            countLabelKey: '@acorex:chat.info-panel.media.count-files',
+            icon: 'fa-light fa-file',
+        },
+        {
+            id: 'audio',
+            labelKey: '@acorex:chat.info-panel.media.audio',
+            countLabelKey: '@acorex:chat.info-panel.media.count-audio',
+            icon: 'fa-light fa-headphones',
+        },
+        {
+            id: 'link',
+            labelKey: '@acorex:chat.info-panel.media.links',
+            countLabelKey: '@acorex:chat.info-panel.media.count-links',
+            icon: 'fa-light fa-link',
+        },
+        {
+            id: 'voice',
+            labelKey: '@acorex:chat.info-panel.media.voice',
+            countLabelKey: '@acorex:chat.info-panel.media.count-voice',
+            icon: 'fa-light fa-microphone',
+        },
+        {
+            id: 'sticker',
+            labelKey: '@acorex:chat.info-panel.media.stickers',
+            countLabelKey: '@acorex:chat.info-panel.media.count-stickers',
+            icon: 'fa-light fa-note-sticky',
+        },
+        {
+            id: 'location',
+            labelKey: '@acorex:chat.info-panel.media.locations',
+            countLabelKey: '@acorex:chat.info-panel.media.count-locations',
+            icon: 'fa-light fa-location-dot',
+        },
+    ];
+    return definitions
+        .map((definition) => ({ ...definition, count: counts[definition.id] }))
+        .filter((category) => category.count > 0);
+}
+function filterMessagesByMediaCategory(messages, categoryId) {
+    return messages.filter((message) => {
+        if (categoryId === 'link') {
+            return messageContainsLink(message);
+        }
+        return message.type === categoryId;
+    });
+}
+function isGridMediaCategory(categoryId) {
+    return categoryId === 'image' || categoryId === 'sticker';
+}
+function isAttachmentListCategory(categoryId) {
+    return categoryId === 'video' || categoryId === 'audio';
+}
+function buildMediaGalleryTiles(messages, categoryId) {
+    const filtered = filterMessagesByMediaCategory(messages, categoryId);
+    const tiles = [];
+    for (const message of filtered) {
+        if (categoryId === 'image') {
+            const payload = normalizeImagePayload(message.payload);
+            for (const image of payload.images) {
+                tiles.push({
+                    key: `${message.id}:${image.mediaId ?? image.url ?? tiles.length}`,
+                    message,
+                    kind: 'image',
+                    image,
+                });
+            }
+            continue;
+        }
+        if (categoryId === 'video') {
+            const payload = normalizeVideoPayload(message.payload);
+            for (const video of payload.videos) {
+                tiles.push({
+                    key: `${message.id}:${video.mediaId ?? video.url ?? tiles.length}`,
+                    message,
+                    kind: 'video',
+                    video,
+                });
+            }
+            continue;
+        }
+        if (categoryId === 'sticker') {
+            const payload = message.payload;
+            tiles.push({
+                key: message.id,
+                message,
+                kind: 'sticker',
+                stickerUrl: payload.url,
+                stickerAlt: payload.emoji || 'Sticker',
+            });
+        }
+    }
+    return tiles;
+}
+function resolveVideoThumbnailUrl(video) {
+    return resolvePersistedThumbnailUrl(video.thumbnailUrl, video.url) ?? video.url;
+}
+function resolveGalleryImageUrl(image) {
+    return resolveImageDisplayUrl(image);
+}
+function getMessageVideoItems(message) {
+    if (message.type !== 'video') {
+        return [];
+    }
+    return normalizeVideoPayload(message.payload).videos;
+}
+function getMessageAudioItems(message) {
+    if (message.type !== 'audio') {
+        return [];
+    }
+    return normalizeAudioPayload(message.payload).audios;
+}
+async function fetchAllConversationMessages(messageApi, conversationId, pageSize) {
+    const collected = [];
+    let page = 0;
+    let hasMore = true;
+    let cursor;
+    while (hasMore) {
+        const result = await messageApi.getMessages(conversationId, {
+            page,
+            pageSize,
+            cursor,
+        });
+        collected.push(...result.items);
+        hasMore = result.hasMore;
+        cursor = result.nextCursor;
+        page += 1;
+        if (!result.items.length) {
+            break;
+        }
+    }
+    return collected.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
+}
+
+/**
+ * Conversation Info Panel — Telegram-inspired profile / group details sheet.
+ */
+class AXConversationInfoPanelComponent extends AXClosableComponent {
+    constructor() {
+        super(...arguments);
+        this.toastService = inject(AXToastService);
+        this.translation = inject(AXTranslationService);
+        this.injectedConversationService = inject(AXConversationService, { optional: true });
+        this.onClosed = output();
+        this.activeTab = signal('profile', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+        this.showMemberSearch = signal(false, ...(ngDevMode ? [{ debugName: "showMemberSearch" }] : []));
+        this.panelView = signal('main', ...(ngDevMode ? [{ debugName: "panelView" }] : []));
+        this.selectedMediaCategory = signal(null, ...(ngDevMode ? [{ debugName: "selectedMediaCategory" }] : []));
+        this.mediaViewLoader = () => import('./acorex-components-conversation-conversation-info-media-view.component-BalIIAFB.mjs').then((m) => m.AXConversationInfoMediaViewComponent);
+        this.conversationMessages = signal([], ...(ngDevMode ? [{ debugName: "conversationMessages" }] : []));
+        this.loadingMessages = signal(false, ...(ngDevMode ? [{ debugName: "loadingMessages" }] : []));
+        this.memberSearchQuery = signal('', ...(ngDevMode ? [{ debugName: "memberSearchQuery" }] : []));
+        this.archived = false;
+        this.initialNotifications = false;
+        this.initialArchived = false;
+        this.editTitle = '';
+        this.editAvatar = '';
+        this.groupDetailsSaveInFlight = false;
+        this.backgroundPresets = [
+            {
+                id: 'solid-default',
+                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.default'),
+                value: 'rgb(var(--ax-sys-color-primary-lightest-surface))',
+            },
+            {
+                id: 'solid-graphite',
+                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.graphite'),
+                value: 'rgb(var(--ax-sys-color-lighter-surface))',
+            },
+            {
+                id: 'solid-olive',
+                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.olive'),
+                value: 'rgba(132, 144, 88, 0.24)',
+            },
+            {
+                id: 'solid-sky',
+                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.sky'),
+                value: 'rgba(56, 189, 248, 0.2)',
+            },
+            {
+                id: 'grad-aurora',
+                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.aurora'),
+                value: 'linear-gradient(140deg, #60a5fa 0%, #a78bfa 55%, #f472b6 100%)',
+            },
+            {
+                id: 'grad-sunset',
+                label: this.translation.translateSync('@acorex:chat.info-panel.background.presets.sunset'),
+                value: 'linear-gradient(140deg, rgba(251, 113, 133, 0.34) 0%, rgba(251, 191, 36, 0.32) 100%)',
+            },
+        ];
+        this.heroSubtitle = computed(() => {
+            const conversation = this.liveConversation();
+            if (!conversation)
+                return '';
+            return AXConversationMessageUtilsService.getConversationSubtitle(conversation);
+        }, ...(ngDevMode ? [{ debugName: "heroSubtitle" }] : []));
+        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;
+        }, ...(ngDevMode ? [{ debugName: "liveConversation" }] : []));
+        this.isConversationMuted = computed(() => this.liveConversation()?.settings?.notifications === false, ...(ngDevMode ? [{ debugName: "isConversationMuted" }] : []));
+        this.profileFields = computed(() => {
+            const conversation = this.liveConversation();
+            if (!conversation)
+                return [];
+            return getConversationProfileFields(conversation, this.conversationService?.currentUser()?.id);
+        }, ...(ngDevMode ? [{ debugName: "profileFields" }] : []));
+        this.mediaCategories = computed(() => {
+            if (!this.conversation)
+                return [];
+            return getConversationMediaCategories(this.conversationMessages());
+        }, ...(ngDevMode ? [{ debugName: "mediaCategories" }] : []));
+        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;
+        }, ...(ngDevMode ? [{ debugName: "quickActions" }] : []));
+        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));
+        }, ...(ngDevMode ? [{ debugName: "filteredMembers" }] : []));
+    }
+    ngOnInit() {
+        const resolvedService = this.conversationService ?? this.injectedConversationService;
+        if (!resolvedService) {
+            console.warn('AXConversationInfoPanelComponent 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('AXConversationInfoPanelComponent opened without conversation context.');
+                this.close();
+                return;
+            }
+        }
+        this.initialNotifications = this.conversation.settings?.notifications ?? true;
+        this.archived = this.conversation.archived ?? false;
+        this.initialArchived = this.archived;
+        this.editTitle = this.conversation.title || '';
+        this.editAvatar = this.conversation.avatar || '';
+        void this.loadConversationMessages();
+    }
+    async loadConversationMessages() {
+        this.loadingMessages.set(true);
+        try {
+            if (this.conversationService.activeConversationId() === this.conversation.id) {
+                const activeMessages = this.conversationService.activeMessages();
+                if (activeMessages.length > 0) {
+                    this.conversationMessages.set(activeMessages);
+                }
+            }
+            const messages = await fetchAllConversationMessages(this.conversationService.messageApi, this.conversation.id, 30);
+            this.conversationMessages.set(messages);
+        }
+        catch (error) {
+            console.error('Failed to load conversation media messages:', error);
+        }
+        finally {
+            this.loadingMessages.set(false);
+        }
+    }
+    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 '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,
+            onBack: () => this.closeMediaView(),
+        };
+    }
+    getMediaRowLabel(category) {
+        return this.translation.translateSync(category.countLabelKey, {
+            params: { count: category.count },
+        });
+    }
+    getMemberSubtitle(participant) {
+        if (participant.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 '';
+    }
+    onQuickAction(actionId) {
+        switch (actionId) {
+            case 'mute':
+                void this.toggleConversationMute();
+                break;
+            case 'leave':
+                void this.onLeave();
+                break;
+        }
+    }
+    async toggleConversationMute() {
+        const notificationsEnabled = this.liveConversation()?.settings?.notifications ?? true;
+        await this.onNotificationsChange(!notificationsEnabled);
+    }
+    async onNotificationsChange(value) {
+        try {
+            await this.conversationService.updateConversationSettings(this.conversation.id, {
+                notifications: value,
+            });
+            const settings = this.conversation.settings ?? { notifications: true, showPreview: true };
+            this.conversation.settings = { ...settings, notifications: 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(value) {
+        const bg = this.conversation?.metadata?.['messageListBackground'];
+        return (typeof bg === 'string' ? bg : '') === value;
+    }
+    async applyMessageListBackground(value) {
+        try {
+            const metadata = {
+                ...(this.conversation.metadata ?? {}),
+                messageListBackground: value,
+            };
+            await this.conversationService.updateConversationMetadata(this.conversation.id, metadata);
+            this.conversation.metadata = metadata;
+            this.toastService.success(value
+                ? this.translation.translateSync('@acorex:chat.info-panel.toasts.background-updated')
+                : this.translation.translateSync('@acorex:chat.info-panel.toasts.background-reset'));
+        }
+        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 },
+        });
+    }
+    ngOnDestroy() {
+        if (this.groupTitleSaveTimer) {
+            clearTimeout(this.groupTitleSaveTimer);
+            this.groupTitleSaveTimer = undefined;
+            void this.persistGroupDetails();
+        }
+        const currentNotifications = this.liveConversation()?.settings?.notifications ?? true;
+        const hasChanges = currentNotifications !== this.initialNotifications ||
+            this.archived !== this.initialArchived;
+        if (hasChanges) {
+            this.toastService.success(this.translation.translateSync('@acorex:chat.info-panel.toasts.settings-saved'));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationInfoPanelComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXConversationInfoPanelComponent, isStandalone: true, selector: "ax-conversation-info-panel", outputs: { onClosed: "onClosed" }, providers: [
+            { provide: AXClosableComponent, useExisting: AXConversationInfoPanelComponent },
+        ], usesInheritance: true, ngImport: i0, template: `
+    @if (conversation) {
+      <div class="tg-info-panel">
+        @if (panelView() === 'media' && selectedMediaCategory(); as category) {
+          <ax-conversation-registry-component-outlet
+            [componentLoader]="mediaViewLoader"
+            [inputs]="getMediaViewInputs(category)"
+          />
+        } @else {
+          <div class="tg-info-panel__scroll">
+            <section class="tg-hero">
+              <ax-conversation-avatar kind="auto" [conversation]="conversation" [size]="96" />
+              <h2 class="tg-hero__title">{{ conversation.title }}</h2>
+              <p class="tg-hero__subtitle">{{ heroSubtitle() }}</p>
+            </section>
+
+            <section class="tg-quick-actions">
+              @for (action of quickActions(); track action.id) {
+                <button
+                  type="button"
+                  class="tg-quick-action"
+                  [class.tg-quick-action--danger]="action.danger"
+                  [class.tg-quick-action--active]="action.id === 'mute' && isConversationMuted()"
+                  (click)="onQuickAction(action.id)"
+                >
+                  <span class="tg-quick-action__icon"><i [class]="action.icon"></i></span>
+                  <span class="tg-quick-action__label">{{ action.labelKey | translate | async }}</span>
+                </button>
+              }
+            </section>
+
+            <nav class="tg-tabs" role="tablist">
+              <button
+                type="button"
+                class="tg-tab"
+                role="tab"
+                [class.tg-tab--active]="activeTab() === 'profile'"
+                [attr.aria-selected]="activeTab() === 'profile'"
+                (click)="setActiveTab('profile')"
+              >
+                {{ '@acorex:chat.info-panel.tabs.profile' | translate | async }}
+              </button>
+              <button
+                type="button"
+                class="tg-tab"
+                role="tab"
+                [class.tg-tab--active]="activeTab() === 'manage'"
+                [attr.aria-selected]="activeTab() === 'manage'"
+                (click)="setActiveTab('manage')"
+              >
+                {{ '@acorex:chat.info-panel.tabs.manage' | translate | async }}
+              </button>
+            </nav>
+
+            @if (activeTab() === 'profile') {
+              @if (profileFields().length > 0) {
+              <section class="tg-section tg-details">
+                @for (field of profileFields(); track field.id) {
+                  <div class="tg-detail-row">
+                    <span class="tg-detail-row__icon"><i [class]="field.icon"></i></span>
+                    <div class="tg-detail-row__content">
+                      <span class="tg-detail-row__value">{{ field.value }}</span>
+                      <span class="tg-detail-row__label">{{ field.labelKey | translate | async }}</span>
+                    </div>
+                  </div>
+                }
+              </section>
+            }
+
+            @if (loadingMessages()) {
+              <div class="tg-loading">{{ '@acorex:chat.info-panel.media.loading' | translate | async }}</div>
+            } @else if (mediaCategories().length > 0) {
+              <section class="tg-section tg-media">
+                @for (category of mediaCategories(); track category.id) {
+                  <button type="button" class="tg-media-row" (click)="openMediaCategory(category)">
+                    <span class="tg-media-row__icon"><i [class]="category.icon"></i></span>
+                    <span class="tg-media-row__label">{{ getMediaRowLabel(category) }}</span>
+                    <i class="fa-light fa-chevron-right tg-media-row__chevron"></i>
+                  </button>
+                }
+              </section>
+            }
+
+            @if (isGroupConversation()) {
+              <section class="tg-section tg-members">
+                <div class="tg-section-header tg-section-header--row">
+                  <span class="tg-section-header__title">{{ membersSectionTitle() }}</span>
+                  <div class="tg-section-header__actions">
+                    <button
+                      type="button"
+                      class="tg-icon-btn"
+                      (click)="toggleMemberSearch()"
+                      [attr.aria-label]="'@acorex:chat.info-panel.placeholders.search-members' | translate | async"
+                    >
+                      <i class="fa-light fa-magnifying-glass"></i>
+                    </button>
+                  </div>
+                </div>
+                @if (showMemberSearch()) {
+                  <div class="tg-members-search-wrap">
+                    <ax-search-box
+                      class="tg-members-search"
+                      [value]="memberSearchQuery()"
+                      (valueChange)="onMemberSearchChange($event)"
+                      [placeholder]="'@acorex:chat.info-panel.placeholders.search-members' | translate | async"
+                    ></ax-search-box>
+                  </div>
+                }
+                @for (participant of filteredMembers(); track participant.id) {
+                  <div class="tg-member-row">
+                    <ax-conversation-avatar
+                      kind="user"
+                      [userId]="participant.id"
+                      [conversation]="conversation"
+                      [size]="42"
+                    />
+                    <div class="tg-member-row__content">
+                      <span class="tg-member-row__name">{{ participant.name }}</span>
+                      <span
+                        class="tg-member-row__meta"
+                        [class.tg-member-row__meta--online]="participant.status === 'online'"
+                      >
+                        {{ getMemberSubtitle(participant) }}
+                      </span>
+                    </div>
+                    @if (getMemberRoleLabel(participant); as roleLabel) {
+                      <span class="tg-member-row__badge">{{ roleLabel | translate | async }}</span>
+                    }
+                  </div>
+                }
+              </section>
+            }
+            }
+
+            @if (activeTab() === 'manage') {
+              <section class="tg-section tg-manage">
+                @if (!isPrivateConversation()) {
+                  <div class="tg-manage-block">
+                    <ax-label class="tg-manage-label">{{
+                      '@acorex:chat.info-panel.group-details.title' | translate | async
+                    }}</ax-label>
+                    <ax-text-box
+                      [value]="editTitle"
+                      (valueChange)="onGroupTitleChange($event)"
+                      [placeholder]="'@acorex:chat.info-panel.placeholders.enter-group-title' | translate | async"
+                    ></ax-text-box>
+                    <div class="tg-manage-avatar">
+                      <ax-conversation-avatar-picker
+                        [(avatarUrl)]="editAvatar"
+                        (avatarUrlChange)="onGroupAvatarChange($event)"
+                      ></ax-conversation-avatar-picker>
+                    </div>
+                  </div>
+                }
+
+                <div class="tg-setting-row">
+                  <div class="tg-setting-row__info">
+                    <span class="tg-setting-row__title">{{
+                      '@acorex:chat.info-panel.settings.archived' | translate | async
+                    }}</span>
+                    <span class="tg-setting-row__desc">{{
+                      '@acorex:chat.info-panel.settings.archived-description' | translate | async
+                    }}</span>
+                  </div>
+                  <ax-switch [(ngModel)]="archived" (ngModelChange)="onArchivedChange($event)"></ax-switch>
+                </div>
+
+                <div class="tg-manage-block tg-background-block">
+                  <ax-label class="tg-manage-label">{{
+                    '@acorex:chat.info-panel.background.title' | translate | async
+                  }}</ax-label>
+                  <p class="tg-background-desc">
+                    {{ '@acorex:chat.info-panel.background.description' | translate | async }}
+                  </p>
+                  <div class="tg-background-grid">
+                    @for (preset of backgroundPresets; track preset.id) {
+                      <button
+                        type="button"
+                        class="tg-background-swatch"
+                        [class.tg-background-swatch--active]="isBackgroundSelected(preset.value)"
+                        [style.background]="preset.value"
+                        (click)="applyMessageListBackground(preset.value)"
+                        [attr.aria-label]="getBackgroundAriaLabel(preset.label)"
+                      >
+                        <span class="tg-background-swatch__label">{{ preset.label }}</span>
+                      </button>
+                    }
+                  </div>
+                  <ax-button
+                    [text]="'@acorex:chat.info-panel.actions.reset-to-default' | translate | async"
+                    [look]="'ghost'"
+                    (onClick)="applyMessageListBackground('')"
+                  ></ax-button>
+                </div>
+              </section>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.tg-info-panel{display:flex;flex-direction:column;max-height:min(85vh,40rem)}.tg-info-panel__scroll{overflow-y:auto;overscroll-behavior:contain}.tg-hero{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem 1.5rem 1rem;text-align:center}.tg-hero__title{margin:.25rem 0 0;font-size:1.25rem;font-weight:600;line-height:1.35;color:rgb(var(--ax-sys-color-on-surface));word-break:break-word}.tg-hero__subtitle{margin:0;font-size:.875rem;line-height:1.25rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.65}.tg-quick-actions{display:flex;justify-content:center;gap:.35rem;padding:0 .75rem 1rem;flex-wrap:nowrap}.tg-quick-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;flex:1;min-width:0;max-width:5.5rem;padding:.55rem .4rem;border:none;border-radius:.75rem;background:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-primary-500));cursor:pointer;transition:background-color .15s ease}.tg-quick-action:hover{background:rgb(var(--ax-sys-color-border-light-surface))}.tg-quick-action--danger{color:rgb(var(--ax-sys-color-danger-500))}.tg-quick-action--active{background:rgba(var(--ax-sys-color-warning-500),.14);color:rgb(var(--ax-sys-color-warning-500))}.tg-quick-action--active .tg-quick-action__label{color:rgb(var(--ax-sys-color-warning-500));opacity:1}.tg-quick-action__icon{font-size:1.125rem;line-height:1}.tg-quick-action__label{font-size:.6875rem;font-weight:500;line-height:1.1;color:rgb(var(--ax-sys-color-on-surface));opacity:.85;text-align:center}.tg-tabs{display:flex;gap:0;margin:0 .75rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.tg-tab{flex:1;padding:.65rem .5rem;border:none;border-bottom:2px solid transparent;background:transparent;font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface));opacity:.55;cursor:pointer;transition:opacity .15s ease,color .15s ease,border-color .15s ease}.tg-tab:hover{opacity:.8}.tg-tab--active{opacity:1;color:rgb(var(--ax-sys-color-primary-500));border-bottom-color:rgb(var(--ax-sys-color-primary-500))}.tg-section{// border-top: 1px solid rgb(var(--ax-sys-color-border-light-surface));padding:.25rem 0}.tg-detail-row,.tg-member-row{display:flex;align-items:center;gap:.875rem;padding:.65rem 1rem;min-width:0}.tg-media-row{display:flex;align-items:center;gap:.875rem;width:100%;padding:.7rem 1rem;border:none;background:transparent;text-align:start;cursor:pointer;transition:background-color .15s ease}.tg-media-row:hover{background:rgb(var(--ax-sys-color-lighter-surface))}.tg-media-row__icon{flex-shrink:0;width:1.5rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.75}.tg-media-row__label{flex:1;min-width:0;font-size:.9375rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.tg-media-row__chevron{flex-shrink:0;font-size:.75rem;opacity:.45}.tg-loading{padding:.75rem 1rem 1rem;font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.6;text-align:center}.tg-detail-row__icon{flex-shrink:0;width:1.5rem;text-align:center;color:rgb(var(--ax-sys-color-primary-500));opacity:.9}.tg-detail-row__content,.tg-member-row__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.tg-detail-row__value,.tg-member-row__name{font-size:.9375rem;font-weight:500;line-height:1.3;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tg-detail-row__label,.tg-member-row__meta{font-size:.75rem;line-height:1.2;color:rgb(var(--ax-sys-color-on-surface));opacity:.6}.tg-member-row__meta--online{color:rgb(var(--ax-sys-color-primary-500));opacity:1}.tg-section-header{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem .35rem}.tg-section-header--row{flex-direction:row;align-items:center;justify-content:space-between}.tg-section-header__actions{display:flex;align-items:center;gap:.25rem}.tg-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:999px;background:transparent;color:rgb(var(--ax-sys-color-primary-500));cursor:pointer}.tg-icon-btn:hover{background:rgb(var(--ax-sys-color-lighter-surface))}.tg-members-search-wrap{padding:0 1rem .5rem}.tg-section-header__title{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--ax-sys-color-on-surface));opacity:.55}.tg-members-search{width:100%}.tg-member-row__badge{flex-shrink:0;padding:.15rem .5rem;border-radius:999px;font-size:.6875rem;font-weight:600;color:rgb(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.14)}.tg-manage{padding:.75rem 1rem 1rem;display:flex;flex-direction:column;gap:.75rem}.tg-manage-block{display:flex;flex-direction:column;gap:.5rem}.tg-manage-label{font-size:.8125rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.tg-setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0}.tg-setting-row__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.tg-setting-row__title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.tg-setting-row__desc{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.65}.tg-background-desc{margin:0;font-size:.75rem;opacity:.7}.tg-background-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.tg-background-swatch{position:relative;height:2.75rem;border-radius:.5rem;border:2px solid transparent;cursor:pointer;overflow:hidden}.tg-background-swatch--active{border-color:rgb(var(--ax-sys-color-primary-500))}.tg-background-swatch__label{position:absolute;inset-inline-start:.35rem;bottom:.2rem;font-size:.65rem;letter-spacing:.1rem;font-weight:300;mix-blend-mode:difference;color:#fff}.tg-danger{padding:.25rem 0 .75rem}.tg-danger-row{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;border:none;background:transparent;font-size:.9375rem;font-weight:500;color:rgb(var(--ax-sys-color-danger-500));cursor:pointer;text-align:start}.tg-danger-row:hover{background:rgba(var(--ax-sys-color-danger-500),.06)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXConversationInfoPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-conversation-info-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXButtonComponent,
+                        AXDecoratorModule,
+                        AXLabelComponent,
+                        AXSearchBoxComponent,
+                        AXSwitchModule,
+                        AXTextBoxComponent,
+                        AXConversationAvatarPickerComponent,
+                        AXConversationAvatarComponent,
+                        AXConversationRegistryComponentOutletComponent,
+                        AXTranslationModule,
+                    ], providers: [
+                        { provide: AXClosableComponent, useExisting: AXConversationInfoPanelComponent },
+                    ], template: `
+    @if (conversation) {
+      <div class="tg-info-panel">
+        @if (panelView() === 'media' && selectedMediaCategory(); as category) {
+          <ax-conversation-registry-component-outlet
+            [componentLoader]="mediaViewLoader"
+            [inputs]="getMediaViewInputs(category)"
+          />
+        } @else {
+          <div class="tg-info-panel__scroll">
+            <section class="tg-hero">
+              <ax-conversation-avatar kind="auto" [conversation]="conversation" [size]="96" />
+              <h2 class="tg-hero__title">{{ conversation.title }}</h2>
+              <p class="tg-hero__subtitle">{{ heroSubtitle() }}</p>
+            </section>
+
+            <section class="tg-quick-actions">
+              @for (action of quickActions(); track action.id) {
+                <button
+                  type="button"
+                  class="tg-quick-action"
+                  [class.tg-quick-action--danger]="action.danger"
+                  [class.tg-quick-action--active]="action.id === 'mute' && isConversationMuted()"
+                  (click)="onQuickAction(action.id)"
+                >
+                  <span class="tg-quick-action__icon"><i [class]="action.icon"></i></span>
+                  <span class="tg-quick-action__label">{{ action.labelKey | translate | async }}</span>
+                </button>
+              }
+            </section>
+
+            <nav class="tg-tabs" role="tablist">
+              <button
+                type="button"
+                class="tg-tab"
+                role="tab"
+                [class.tg-tab--active]="activeTab() === 'profile'"
+                [attr.aria-selected]="activeTab() === 'profile'"
+                (click)="setActiveTab('profile')"
+              >
+                {{ '@acorex:chat.info-panel.tabs.profile' | translate | async }}
+              </button>
+              <button
+                type="button"
+                class="tg-tab"
+                role="tab"
+                [class.tg-tab--active]="activeTab() === 'manage'"
+                [attr.aria-selected]="activeTab() === 'manage'"
+                (click)="setActiveTab('manage')"
+              >
+                {{ '@acorex:chat.info-panel.tabs.manage' | translate | async }}
+              </button>
+            </nav>
+
+            @if (activeTab() === 'profile') {
+              @if (profileFields().length > 0) {
+              <section class="tg-section tg-details">
+                @for (field of profileFields(); track field.id) {
+                  <div class="tg-detail-row">
+                    <span class="tg-detail-row__icon"><i [class]="field.icon"></i></span>
+                    <div class="tg-detail-row__content">
+                      <span class="tg-detail-row__value">{{ field.value }}</span>
+                      <span class="tg-detail-row__label">{{ field.labelKey | translate | async }}</span>
+                    </div>
+                  </div>
+                }
+              </section>
+            }
+
+            @if (loadingMessages()) {
+              <div class="tg-loading">{{ '@acorex:chat.info-panel.media.loading' | translate | async }}</div>
+            } @else if (mediaCategories().length > 0) {
+              <section class="tg-section tg-media">
+                @for (category of mediaCategories(); track category.id) {
+                  <button type="button" class="tg-media-row" (click)="openMediaCategory(category)">
+                    <span class="tg-media-row__icon"><i [class]="category.icon"></i></span>
+                    <span class="tg-media-row__label">{{ getMediaRowLabel(category) }}</span>
+                    <i class="fa-light fa-chevron-right tg-media-row__chevron"></i>
+                  </button>
+                }
+              </section>
+            }
+
+            @if (isGroupConversation()) {
+              <section class="tg-section tg-members">
+                <div class="tg-section-header tg-section-header--row">
+                  <span class="tg-section-header__title">{{ membersSectionTitle() }}</span>
+                  <div class="tg-section-header__actions">
+                    <button
+                      type="button"
+                      class="tg-icon-btn"
+                      (click)="toggleMemberSearch()"
+                      [attr.aria-label]="'@acorex:chat.info-panel.placeholders.search-members' | translate | async"
+                    >
+                      <i class="fa-light fa-magnifying-glass"></i>
+                    </button>
+                  </div>
+                </div>
+                @if (showMemberSearch()) {
+                  <div class="tg-members-search-wrap">
+                    <ax-search-box
+                      class="tg-members-search"
+                      [value]="memberSearchQuery()"
+                      (valueChange)="onMemberSearchChange($event)"
+                      [placeholder]="'@acorex:chat.info-panel.placeholders.search-members' | translate | async"
+                    ></ax-search-box>
+                  </div>
+                }
+                @for (participant of filteredMembers(); track participant.id) {
+                  <div class="tg-member-row">
+                    <ax-conversation-avatar
+                      kind="user"
+                      [userId]="participant.id"
+                      [conversation]="conversation"
+                      [size]="42"
+                    />
+                    <div class="tg-member-row__content">
+                      <span class="tg-member-row__name">{{ participant.name }}</span>
+                      <span
+                        class="tg-member-row__meta"
+                        [class.tg-member-row__meta--online]="participant.status === 'online'"
+                      >
+                        {{ getMemberSubtitle(participant) }}
+                      </span>
+                    </div>
+                    @if (getMemberRoleLabel(participant); as roleLabel) {
+                      <span class="tg-member-row__badge">{{ roleLabel | translate | async }}</span>
+                    }
+                  </div>
+                }
+              </section>
+            }
+            }
+
+            @if (activeTab() === 'manage') {
+              <section class="tg-section tg-manage">
+                @if (!isPrivateConversation()) {
+                  <div class="tg-manage-block">
+                    <ax-label class="tg-manage-label">{{
+                      '@acorex:chat.info-panel.group-details.title' | translate | async
+                    }}</ax-label>
+                    <ax-text-box
+                      [value]="editTitle"
+                      (valueChange)="onGroupTitleChange($event)"
+                      [placeholder]="'@acorex:chat.info-panel.placeholders.enter-group-title' | translate | async"
+                    ></ax-text-box>
+                    <div class="tg-manage-avatar">
+                      <ax-conversation-avatar-picker
+                        [(avatarUrl)]="editAvatar"
+                        (avatarUrlChange)="onGroupAvatarChange($event)"
+                      ></ax-conversation-avatar-picker>
+                    </div>
+                  </div>
+                }
+
+                <div class="tg-setting-row">
+                  <div class="tg-setting-row__info">
+                    <span class="tg-setting-row__title">{{
+                      '@acorex:chat.info-panel.settings.archived' | translate | async
+                    }}</span>
+                    <span class="tg-setting-row__desc">{{
+                      '@acorex:chat.info-panel.settings.archived-description' | translate | async
+                    }}</span>
+                  </div>
+                  <ax-switch [(ngModel)]="archived" (ngModelChange)="onArchivedChange($event)"></ax-switch>
+                </div>
+
+                <div class="tg-manage-block tg-background-block">
+                  <ax-label class="tg-manage-label">{{
+                    '@acorex:chat.info-panel.background.title' | translate | async
+                  }}</ax-label>
+                  <p class="tg-background-desc">
+                    {{ '@acorex:chat.info-panel.background.description' | translate | async }}
+                  </p>
+                  <div class="tg-background-grid">
+                    @for (preset of backgroundPresets; track preset.id) {
+                      <button
+                        type="button"
+                        class="tg-background-swatch"
+                        [class.tg-background-swatch--active]="isBackgroundSelected(preset.value)"
+                        [style.background]="preset.value"
+                        (click)="applyMessageListBackground(preset.value)"
+                        [attr.aria-label]="getBackgroundAriaLabel(preset.label)"
+                      >
+                        <span class="tg-background-swatch__label">{{ preset.label }}</span>
+                      </button>
+                    }
+                  </div>
+                  <ax-button
+                    [text]="'@acorex:chat.info-panel.actions.reset-to-default' | translate | async"
+                    [look]="'ghost'"
+                    (onClick)="applyMessageListBackground('')"
+                  ></ax-button>
+                </div>
+              </section>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, styles: [":host{display:block;width:100%;height:100%}.tg-info-panel{display:flex;flex-direction:column;max-height:min(85vh,40rem)}.tg-info-panel__scroll{overflow-y:auto;overscroll-behavior:contain}.tg-hero{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:1.25rem 1.5rem 1rem;text-align:center}.tg-hero__title{margin:.25rem 0 0;font-size:1.25rem;font-weight:600;line-height:1.35;color:rgb(var(--ax-sys-color-on-surface));word-break:break-word}.tg-hero__subtitle{margin:0;font-size:.875rem;line-height:1.25rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.65}.tg-quick-actions{display:flex;justify-content:center;gap:.35rem;padding:0 .75rem 1rem;flex-wrap:nowrap}.tg-quick-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;flex:1;min-width:0;max-width:5.5rem;padding:.55rem .4rem;border:none;border-radius:.75rem;background:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-primary-500));cursor:pointer;transition:background-color .15s ease}.tg-quick-action:hover{background:rgb(var(--ax-sys-color-border-light-surface))}.tg-quick-action--danger{color:rgb(var(--ax-sys-color-danger-500))}.tg-quick-action--active{background:rgba(var(--ax-sys-color-warning-500),.14);color:rgb(var(--ax-sys-color-warning-500))}.tg-quick-action--active .tg-quick-action__label{color:rgb(var(--ax-sys-color-warning-500));opacity:1}.tg-quick-action__icon{font-size:1.125rem;line-height:1}.tg-quick-action__label{font-size:.6875rem;font-weight:500;line-height:1.1;color:rgb(var(--ax-sys-color-on-surface));opacity:.85;text-align:center}.tg-tabs{display:flex;gap:0;margin:0 .75rem;border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}.tg-tab{flex:1;padding:.65rem .5rem;border:none;border-bottom:2px solid transparent;background:transparent;font-size:.875rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface));opacity:.55;cursor:pointer;transition:opacity .15s ease,color .15s ease,border-color .15s ease}.tg-tab:hover{opacity:.8}.tg-tab--active{opacity:1;color:rgb(var(--ax-sys-color-primary-500));border-bottom-color:rgb(var(--ax-sys-color-primary-500))}.tg-section{// border-top: 1px solid rgb(var(--ax-sys-color-border-light-surface));padding:.25rem 0}.tg-detail-row,.tg-member-row{display:flex;align-items:center;gap:.875rem;padding:.65rem 1rem;min-width:0}.tg-media-row{display:flex;align-items:center;gap:.875rem;width:100%;padding:.7rem 1rem;border:none;background:transparent;text-align:start;cursor:pointer;transition:background-color .15s ease}.tg-media-row:hover{background:rgb(var(--ax-sys-color-lighter-surface))}.tg-media-row__icon{flex-shrink:0;width:1.5rem;text-align:center;color:rgb(var(--ax-sys-color-on-surface));opacity:.75}.tg-media-row__label{flex:1;min-width:0;font-size:.9375rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.tg-media-row__chevron{flex-shrink:0;font-size:.75rem;opacity:.45}.tg-loading{padding:.75rem 1rem 1rem;font-size:.8125rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.6;text-align:center}.tg-detail-row__icon{flex-shrink:0;width:1.5rem;text-align:center;color:rgb(var(--ax-sys-color-primary-500));opacity:.9}.tg-detail-row__content,.tg-member-row__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.tg-detail-row__value,.tg-member-row__name{font-size:.9375rem;font-weight:500;line-height:1.3;color:rgb(var(--ax-sys-color-on-surface));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tg-detail-row__label,.tg-member-row__meta{font-size:.75rem;line-height:1.2;color:rgb(var(--ax-sys-color-on-surface));opacity:.6}.tg-member-row__meta--online{color:rgb(var(--ax-sys-color-primary-500));opacity:1}.tg-section-header{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem .35rem}.tg-section-header--row{flex-direction:row;align-items:center;justify-content:space-between}.tg-section-header__actions{display:flex;align-items:center;gap:.25rem}.tg-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:999px;background:transparent;color:rgb(var(--ax-sys-color-primary-500));cursor:pointer}.tg-icon-btn:hover{background:rgb(var(--ax-sys-color-lighter-surface))}.tg-members-search-wrap{padding:0 1rem .5rem}.tg-section-header__title{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--ax-sys-color-on-surface));opacity:.55}.tg-members-search{width:100%}.tg-member-row__badge{flex-shrink:0;padding:.15rem .5rem;border-radius:999px;font-size:.6875rem;font-weight:600;color:rgb(var(--ax-sys-color-primary-500));background:rgba(var(--ax-sys-color-primary-500),.14)}.tg-manage{padding:.75rem 1rem 1rem;display:flex;flex-direction:column;gap:.75rem}.tg-manage-block{display:flex;flex-direction:column;gap:.5rem}.tg-manage-label{font-size:.8125rem;font-weight:600;color:rgb(var(--ax-sys-color-on-surface))}.tg-setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0}.tg-setting-row__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.tg-setting-row__title{font-size:.875rem;font-weight:500;color:rgb(var(--ax-sys-color-on-surface))}.tg-setting-row__desc{font-size:.75rem;color:rgb(var(--ax-sys-color-on-surface));opacity:.65}.tg-background-desc{margin:0;font-size:.75rem;opacity:.7}.tg-background-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}.tg-background-swatch{position:relative;height:2.75rem;border-radius:.5rem;border:2px solid transparent;cursor:pointer;overflow:hidden}.tg-background-swatch--active{border-color:rgb(var(--ax-sys-color-primary-500))}.tg-background-swatch__label{position:absolute;inset-inline-start:.35rem;bottom:.2rem;font-size:.65rem;letter-spacing:.1rem;font-weight:300;mix-blend-mode:difference;color:#fff}.tg-danger{padding:.25rem 0 .75rem}.tg-danger-row{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;border:none;background:transparent;font-size:.9375rem;font-weight:500;color:rgb(var(--ax-sys-color-danger-500));cursor:pointer;text-align:start}.tg-danger-row:hover{background:rgba(var(--ax-sys-color-danger-500),.06)}\n"] }]
+        }] });
+
+var conversationInfoPanel_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXConversationInfoPanelComponent: AXConversationInfoPanelComponent
+});
+
+export { isAttachmentListCategory as a, buildMediaGalleryTiles as b, getMessageAudioItems as c, conversationInfoPanel_component as d, filterMessagesByMediaCategory as f, getMessageVideoItems as g, isGridMediaCategory as i };
+//# sourceMappingURL=acorex-components-conversation-conversation-info-panel.component-BJMo9bDd.mjs.map