@acorex/components 20.9.0 → 20.9.1

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

@@ -1,1080 +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 * 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