@acorex-platform/module-auth-client 0.0.18 → 0.0.20

package/fesm2022/acorex-platform-module-auth-client-profile-page.component-CdxseoJX.mjs

@@ -0,0 +1,650 @@
+import * as i1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3$1 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i4 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import * as i1$1 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+import * as i6 from '@acorex/components/tabs';
+import { AXTabsModule } from '@acorex/components/tabs';
+import { AXFormatPipe } from '@acorex/core/format';
+import * as i5 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import * as i8 from '@acorex/components/tooltip';
+import { AXTooltipModule } from '@acorex/components/tooltip';
+import { AXPStickyDirective } from '@acorex-platform/framework-client/common';
+import { AXPHookService, AXPDeviceService } from '@acorex-platform/framework-client/core';
+import { AXPQueryService, AXPCommandService } from '@acorex-platform/framework-client/runtime';
+import { AXPThemeLayoutBlockComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPUserAvatarComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageComponentRendererDirective, AXPPageLayoutBase } from '@acorex-platform/framework-client/layout/views';
+import * as i3 from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, DestroyRef, signal, computed, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { filter, distinctUntilChanged } from 'rxjs';
+import { AXMAuthCommandKeys } from '@acorex-platform/module-auth-client/contracts';
+import { AXPSessionService } from '@acorex-platform/framework-client/auth';
+import { defaultTo, orderBy, uniqBy, first, isNil, get } from 'lodash';
+import { P as PROFILE_PAGE_GROUPS_HOOK, a as PROFILE_PAGE_SECTIONS_HOOK, b as PROFILE_PAGE_HEADER_META_HOOK, v as visibleUserProfileSectionActions, r as resolveDefaultUserProfileSectionAction, c as resolveUserProfileSectionContent, d as PROFILE_SECTION_INSIGHTS_PATCH_METADATA_KEY } from './acorex-platform-module-auth-client-acorex-platform-module-auth-client-CYmUn-lw.mjs';
+import { runtimeQueryPayloadData } from '@acorex-platform/framework-shared/core';
+import { ENTITY_GET_BY_ID_DEFAULT } from '@acorex-platform/framework-shared/runtime';
+
+//#region ---- Profile page registry ----
+/**
+ * Aggregates profile page groups, sections, and header meta from distributed hooks.
+ */
+class AXPUserProfilePageRegistryService {
+    constructor() {
+        //#region ---- Services & Dependencies ----
+        this.hooks = inject(AXPHookService);
+    }
+    //#endregion
+    //#region ---- Public API ----
+    async loadGroups() {
+        const payload = await this.hooks.runAsync(PROFILE_PAGE_GROUPS_HOOK, { groups: [] });
+        return this.sortGroups(defaultTo(payload.groups, []));
+    }
+    async loadSections(groupId) {
+        const payload = await this.hooks.runAsync(PROFILE_PAGE_SECTIONS_HOOK, {
+            sections: [],
+            groupId,
+        });
+        return this.sortSections(defaultTo(payload.sections, []));
+    }
+    replaceGroupSections(existing, groupSections, groupId) {
+        return this.sortSections([
+            ...existing.filter((section) => section.groupId !== groupId),
+            ...groupSections.filter((section) => section.groupId === groupId),
+        ]);
+    }
+    async loadHeaderMeta() {
+        const payload = await this.hooks.runAsync(PROFILE_PAGE_HEADER_META_HOOK, {
+            items: [],
+        });
+        return orderBy(uniqBy(defaultTo(payload.items, []), 'id'), [(item) => defaultTo(item.priority, 100), 'id'], ['asc', 'asc']);
+    }
+    filterSectionsByGroup(sections, groupId) {
+        if (!groupId) {
+            return sections;
+        }
+        return sections.filter((section) => section.groupId === groupId);
+    }
+    resolveDefaultGroup(groups) {
+        return first(this.sortGroups(groups));
+    }
+    resolveGroupByRoute(groups, routeSegment) {
+        const normalized = routeSegment.trim().toLowerCase();
+        const resolvedRoute = normalized === 'privacy' ? 'account' : normalized;
+        return this.sortGroups(groups).find((group) => group.id.toLowerCase() === resolvedRoute || group.route?.toLowerCase() === resolvedRoute);
+    }
+    resolveGroupRoute(group) {
+        return group.route ?? group.id;
+    }
+    //#endregion
+    //#region ---- Private Methods ----
+    sortGroups(groups) {
+        return orderBy(uniqBy(groups, 'id'), [(g) => defaultTo(g.priority, 100), 'id'], ['asc', 'asc']);
+    }
+    sortSections(sections) {
+        return orderBy(uniqBy(sections, 'id'), [(s) => defaultTo(s.priority, 100), 'id'], ['asc', 'asc']);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserProfilePageRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserProfilePageRegistryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserProfilePageRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+//#region ----- Constants -----
+const SECURITY_MANAGEMENT_USER_ENTITY = 'SecurityManagement.User';
+//#endregion
+//#region ----- Profile page user service -----
+/**
+ * Loads the persisted user row for the logged-in session (audit info, display fields).
+ */
+class AXPUserProfileUserService {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.sessionService = inject(AXPSessionService);
+        this.queryService = inject(AXPQueryService);
+    }
+    //#endregion
+    //#region ----- Public API -----
+    async loadCurrentUser() {
+        const userId = this.sessionService.user?.id;
+        if (!userId || !this.sessionService.isReadyForAppScopedApi) {
+            return null;
+        }
+        try {
+            const result = await this.queryService.fetch(ENTITY_GET_BY_ID_DEFAULT, {
+                entity: SECURITY_MANAGEMENT_USER_ENTITY,
+                id: userId,
+            });
+            return runtimeQueryPayloadData(result) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    resolveJoinedAt(record) {
+        if (isNil(record)) {
+            return undefined;
+        }
+        return get(record, 'auditInfo.created.at');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserProfileUserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserProfileUserService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserProfileUserService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+//#endregion
+//#region ---- Profile page header service ----
+/**
+ * Builds profile page header data from session and optional extended profile sources.
+ */
+class AXPUserProfileHeaderService {
+    constructor() {
+        //#region ---- Services & Dependencies ----
+        this.sessionService = inject(AXPSessionService);
+        this.registry = inject(AXPUserProfilePageRegistryService);
+        this.userService = inject(AXPUserProfileUserService);
+    }
+    //#endregion
+    //#region ---- Public API ----
+    async load() {
+        const sessionUser = this.sessionService.user;
+        if (!sessionUser?.id) {
+            return null;
+        }
+        const userRecord = await this.userService.loadCurrentUser();
+        const hookMeta = await this.registry.loadHeaderMeta();
+        const displayName = defaultTo(sessionUser.title, defaultTo(userRecord?.displayName, sessionUser.name));
+        const username = defaultTo(userRecord?.username, sessionUser.name);
+        return {
+            userId: sessionUser.id,
+            displayName,
+            username,
+            joinedAt: this.userService.resolveJoinedAt(userRecord),
+            avatarUserId: sessionUser.id,
+            meta: hookMeta.sort((a, b) => defaultTo(a.priority, 100) - defaultTo(b.priority, 100)),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserProfileHeaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserProfileHeaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserProfileHeaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class AXMUserProfilePageComponent extends AXPPageLayoutBaseComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----- Services & Dependencies -----
+        this.registry = inject(AXPUserProfilePageRegistryService);
+        this.headerService = inject(AXPUserProfileHeaderService);
+        this.commandService = inject(AXPCommandService);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.destroyRef = inject(DestroyRef);
+        this.deviceService = inject(AXPDeviceService);
+        //#endregion
+        //#region ----- Constants -----
+        this.pageTabSkeletonPlaceholders = [1, 2, 3, 4];
+        this.pageListSkeletonPlaceholders = [1, 2, 3, 4];
+        this.sectionSkeletonPlaceholders = [1, 2, 3, 4];
+        //#endregion
+        //#region ----- State Signals -----
+        this.groups = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.sections = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        this.header = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        this.activeGroupId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeGroupId" }] : /* istanbul ignore next */ []));
+        this.visitedGroupIds = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visitedGroupIds" }] : /* istanbul ignore next */ []));
+        this.loadedSectionGroupIds = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadedSectionGroupIds" }] : /* istanbul ignore next */ []));
+        this.isLoading = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.sectionLoadInflight = new Map();
+        this.isCompactNav = computed(() => !this.deviceService.isLarge(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isCompactNav" }] : /* istanbul ignore next */ []));
+        this.isMobileGroupView = computed(() => this.isCompactNav() && !!this.activeGroupId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobileGroupView" }] : /* istanbul ignore next */ []));
+        this.showHero = computed(() => !this.isMobileGroupView(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showHero" }] : /* istanbul ignore next */ []));
+        this.showTabs = computed(() => !this.isCompactNav() && this.groups().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTabs" }] : /* istanbul ignore next */ []));
+        this.showGroupList = computed(() => this.isCompactNav() && !this.activeGroupId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showGroupList" }] : /* istanbul ignore next */ []));
+        this.showGroupContent = computed(() => !this.isCompactNav() || !!this.activeGroupId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showGroupContent" }] : /* istanbul ignore next */ []));
+        this.#loadVisitedGroup = effect(() => {
+            const groupId = this.activeGroupId();
+            if (!groupId) {
+                return;
+            }
+            untracked(() => {
+                void this.ensureGroupContent(groupId);
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#loadVisitedGroup" }] : /* istanbul ignore next */ []));
+        this.#navChromeEffect = effect(() => {
+            this.activeGroupId();
+            this.deviceService.isLarge();
+            untracked(() => this.recompute());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#navChromeEffect" }] : /* istanbul ignore next */ []));
+        this.#desktopDefaultGroupEffect = effect(() => {
+            const isLarge = this.deviceService.isLarge();
+            const groups = this.groups();
+            const active = this.activeGroupId();
+            const loading = this.isLoading();
+            if (!isLarge || active || !groups.length || loading) {
+                return;
+            }
+            untracked(() => {
+                void this.navigateToDefaultGroup(groups, { replaceUrl: true });
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#desktopDefaultGroupEffect" }] : /* istanbul ignore next */ []));
+    }
+    #loadVisitedGroup;
+    #navChromeEffect;
+    #desktopDefaultGroupEffect;
+    //#endregion
+    //#region ----- Lifecycle -----
+    async ngOnInit() {
+        await super.ngOnInit();
+        await this.loadPage();
+        this.bindProfileIdentityUpdates();
+        this.activatedRoute.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            void this.syncGroupFromRoute();
+        });
+    }
+    //#endregion
+    //#region ----- Page Metadata -----
+    getPageTitle() {
+        if (!this.isMobileGroupView()) {
+            return '';
+        }
+        return this.activeGroup()?.title ?? '';
+    }
+    getPageDescription() {
+        return null;
+    }
+    getPageIcon() {
+        if (!this.isMobileGroupView()) {
+            return null;
+        }
+        return this.activeGroup()?.icon ?? null;
+    }
+    getBackButton() {
+        if (!this.isMobileGroupView()) {
+            return null;
+        }
+        return { title: '@auth:profile-page.page.title' };
+    }
+    async onBackButtonClick() {
+        const appName = this.sessionService.application?.name;
+        if (!appName) {
+            return;
+        }
+        await this.router.navigate([appName, 'profile']);
+    }
+    //#endregion
+    //#region ---- UI Handlers ----
+    handleSelectGroup(group) {
+        this.activeGroupId.set(group.id);
+        const appName = this.sessionService.application?.name;
+        if (!appName) {
+            return;
+        }
+        void this.router.navigate([appName, 'profile', this.registry.resolveGroupRoute(group)]);
+    }
+    handleGroupTabChanged(event) {
+        const group = this.groups().find((item) => item.id === event.tab?.key) ?? this.groups()[event.index];
+        if (!group || group.id === this.activeGroupId()) {
+            return;
+        }
+        this.handleSelectGroup(group);
+    }
+    handleEditAvatar() {
+        void this.executeCommand({
+            name: AXMAuthCommandKeys.Profile.ChangePhoto,
+        });
+    }
+    async handleActionClick(action) {
+        if (action.disabled || action.visible === false || !action.command) {
+            return;
+        }
+        const result = await this.executeCommand(action.command);
+        if (result?.success && this.isPinRelatedAction(action)) {
+            await this.reloadSections();
+        }
+        if (result?.success && this.applyProfileSectionInsightsPatch(result)) {
+            // Password card updated from save payload — skip User/sessions reload.
+        }
+        else if (result?.success && this.shouldReloadSecuritySections(action.command.name)) {
+            await this.reloadSections();
+        }
+        if (result?.success && this.applyHealthProfileSectionPatch(result)) {
+            // Medical Summary updated from save payload — skip full section reload (User/sessions/Employee).
+        }
+        else if (result?.success && this.shouldReloadHealthSections(action.command.name)) {
+            await this.reloadSections();
+        }
+        if (result?.success &&
+            action.command?.name.startsWith('HumanCapitalManagement.Profile:')) {
+            await this.reloadProfileHeader();
+        }
+    }
+    visibleSectionActions(actions) {
+        return visibleUserProfileSectionActions(actions);
+    }
+    defaultSectionAction(actions) {
+        return resolveDefaultUserProfileSectionAction(actions);
+    }
+    resolveSectionContent(section) {
+        return resolveUserProfileSectionContent(section);
+    }
+    isGroupVisited(groupId) {
+        return this.visitedGroupIds().has(groupId);
+    }
+    isGroupPanelActive(groupId) {
+        return this.activeGroupId() === groupId;
+    }
+    activeGroup() {
+        const groupId = this.activeGroupId();
+        if (!groupId) {
+            return undefined;
+        }
+        return this.groups().find((group) => group.id === groupId);
+    }
+    isGroupSectionsPending(group) {
+        return !this.groupComponentContent(group) && !this.loadedSectionGroupIds().has(group.id);
+    }
+    sectionsForGroup(groupId) {
+        return this.registry.filterSectionsByGroup(this.sections(), groupId);
+    }
+    groupComponentContent(group) {
+        if (group.content?.mode === 'component') {
+            return group.content;
+        }
+        return undefined;
+    }
+    sectionLayoutVars(layout) {
+        return {
+            '--section-col-span': layout?.colSpan ?? 6,
+            '--section-row-span': layout?.rowSpan ?? 1,
+            '--section-col-start': layout?.col ?? 'auto',
+        };
+    }
+    hasSectionColStart(layout) {
+        return layout?.col != null;
+    }
+    hasDisplayableInsights(section) {
+        return this.displayableInsights(section).length > 0;
+    }
+    displayableInsights(section) {
+        return (section.insights ?? []).filter((insight) => this.isDisplayableInsight(insight));
+    }
+    resolveInsightDate(insight) {
+        if (!insight.date) {
+            return null;
+        }
+        return Number.isNaN(insight.date.getTime()) ? null : insight.date;
+    }
+    //#endregion
+    //#region ---- Private Methods ----
+    isDisplayableInsight(insight) {
+        if (insight.text?.trim()) {
+            return true;
+        }
+        return this.resolveInsightDate(insight) !== null;
+    }
+    async loadPage() {
+        this.isLoading.set(true);
+        try {
+            const [groups, header] = await Promise.all([
+                this.registry.loadGroups(),
+                this.headerService.load(),
+            ]);
+            this.groups.set(groups);
+            this.header.set(header);
+            await this.syncGroupFromRoute();
+            const groupId = this.activeGroupId();
+            if (groupId) {
+                await this.ensureGroupContent(groupId);
+            }
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    async syncGroupFromRoute() {
+        const groups = this.groups();
+        if (!groups.length) {
+            this.activeGroupId.set(null);
+            return;
+        }
+        const routeSegment = this.activatedRoute.snapshot.paramMap.get('groupId');
+        const appName = this.sessionService.application?.name;
+        if (!routeSegment) {
+            if (this.deviceService.isLarge()) {
+                await this.navigateToDefaultGroup(groups, { replaceUrl: true });
+            }
+            else {
+                this.activeGroupId.set(null);
+            }
+            return;
+        }
+        const matchedGroup = this.registry.resolveGroupByRoute(groups, routeSegment);
+        if (!matchedGroup) {
+            if (this.deviceService.isLarge()) {
+                await this.navigateToDefaultGroup(groups, { replaceUrl: true });
+            }
+            else if (appName) {
+                await this.router.navigate([appName, 'profile'], { replaceUrl: true });
+            }
+            else {
+                this.activeGroupId.set(null);
+            }
+            return;
+        }
+        const canonicalRoute = this.registry.resolveGroupRoute(matchedGroup);
+        if (appName && routeSegment.toLowerCase() !== canonicalRoute.toLowerCase()) {
+            await this.router.navigate([appName, 'profile', canonicalRoute], { replaceUrl: true });
+            return;
+        }
+        this.activeGroupId.set(matchedGroup.id);
+    }
+    async navigateToDefaultGroup(groups, extras) {
+        const defaultGroup = this.registry.resolveDefaultGroup(groups);
+        if (!defaultGroup) {
+            this.activeGroupId.set(null);
+            return;
+        }
+        const appName = this.sessionService.application?.name;
+        if (appName) {
+            await this.router.navigate([appName, 'profile', this.registry.resolveGroupRoute(defaultGroup)], extras);
+            return;
+        }
+        this.activeGroupId.set(defaultGroup.id);
+    }
+    async reloadSections() {
+        const groupId = this.activeGroupId();
+        if (!groupId) {
+            return;
+        }
+        const loaded = await this.registry.loadSections(groupId);
+        this.sections.set(this.registry.replaceGroupSections(this.sections(), loaded, groupId));
+    }
+    async ensureGroupContent(groupId) {
+        this.markGroupVisited(groupId);
+        const inflight = this.sectionLoadInflight.get(groupId);
+        if (inflight) {
+            await inflight;
+            return;
+        }
+        if (this.loadedSectionGroupIds().has(groupId)) {
+            return;
+        }
+        const load = this.loadGroupSections(groupId).finally(() => {
+            this.sectionLoadInflight.delete(groupId);
+        });
+        this.sectionLoadInflight.set(groupId, load);
+        await load;
+    }
+    async loadGroupSections(groupId) {
+        const loaded = await this.registry.loadSections(groupId);
+        this.sections.set(this.registry.replaceGroupSections(this.sections(), loaded, groupId));
+        const next = new Set(this.loadedSectionGroupIds());
+        next.add(groupId);
+        this.loadedSectionGroupIds.set(next);
+    }
+    markGroupVisited(groupId) {
+        const visited = this.visitedGroupIds();
+        if (visited.has(groupId)) {
+            return;
+        }
+        const next = new Set(visited);
+        next.add(groupId);
+        this.visitedGroupIds.set(next);
+    }
+    bindProfileIdentityUpdates() {
+        this.sessionService.user$
+            .pipe(filter((user) => !!user?.id), distinctUntilChanged((previous, current) => previous?.title === current?.title &&
+            previous?.name === current?.name), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            void this.reloadProfileHeader();
+        });
+    }
+    async reloadProfileHeader() {
+        const header = await this.headerService.load();
+        this.header.set(header);
+    }
+    shouldReloadSecuritySections(commandName) {
+        return commandName === AXMAuthCommandKeys.Session.OpenSessions;
+    }
+    shouldReloadHealthSections(commandName) {
+        // Only the health-profile editor changes Medical Summary insights; list popups must not reload on close.
+        return commandName === 'HealthCore.Profile:EditMyHealthProfile';
+    }
+    applyProfileSectionInsightsPatch(result) {
+        const patch = result.metadata?.[PROFILE_SECTION_INSIGHTS_PATCH_METADATA_KEY];
+        if (!patch?.sectionId) {
+            return false;
+        }
+        const sections = this.sections();
+        const index = sections.findIndex((section) => section.id === patch.sectionId);
+        if (index < 0) {
+            return false;
+        }
+        const insights = patch.insights ?? [];
+        const nextSections = [...sections];
+        nextSections[index] = {
+            ...sections[index],
+            insights: insights.length ? insights : undefined,
+        };
+        this.sections.set(nextSections);
+        return true;
+    }
+    applyHealthProfileSectionPatch(result) {
+        const patch = result.metadata?.['healthProfileSectionPatch'];
+        if (!patch?.sectionId) {
+            return false;
+        }
+        const sections = this.sections();
+        const index = sections.findIndex((section) => section.id === patch.sectionId);
+        if (index < 0) {
+            return false;
+        }
+        const section = sections[index];
+        const insights = patch.insights ?? [];
+        const nextSection = {
+            ...section,
+            insights: insights.length ? insights : undefined,
+            actions: (section.actions ?? []).map((sectionAction) => {
+                if (sectionAction.command?.name !== 'HealthCore.Profile:EditMyHealthProfile') {
+                    return sectionAction;
+                }
+                return {
+                    ...sectionAction,
+                    command: {
+                        ...sectionAction.command,
+                        options: {
+                            ...(sectionAction.command.options ?? {}),
+                            existingProfileId: patch.existingProfileId ?? null,
+                        },
+                    },
+                };
+            }),
+        };
+        const nextSections = [...sections];
+        nextSections[index] = nextSection;
+        this.sections.set(nextSections);
+        return true;
+    }
+    isPinRelatedAction(action) {
+        const commandName = action.command?.name;
+        return (commandName === AXMAuthCommandKeys.Security.SetPinCode ||
+            commandName === AXMAuthCommandKeys.Security.RemovePinCode);
+    }
+    async executeCommand(command) {
+        if (this.commandService.exists(command.name)) {
+            const result = await this.commandService.execute(command.name, command.options ?? {});
+            return result ?? undefined;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMUserProfilePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMUserProfilePageComponent, isStandalone: true, selector: "axm-user-profile-page", host: { properties: { "class.--mobile-group": "isMobileGroupView()" }, classAttribute: "axm-user-profile-page" }, providers: [
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXMUserProfilePageComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-content>\n    @if (isLoading()) {\n    <!-- ----- Profile page skeleton ----- -->\n    <div class=\"__shell\" aria-hidden=\"true\">\n      <section class=\"__hero-card\">\n        <div class=\"__hero-header\">\n          <div class=\"__hero-cover\">\n            <span class=\"__hero-wave __hero-wave--primary\"></span>\n            <span class=\"__hero-wave __hero-wave--soft\"></span>\n            <span class=\"__hero-wave __hero-wave--light\"></span>\n          </div>\n          <div class=\"__hero-content\">\n            <div class=\"__hero-avatar\">\n              <ax-skeleton class=\"size-24 rounded-full\" [animated]=\"true\"></ax-skeleton>\n            </div>\n            <div class=\"__hero-details\">\n              <ax-skeleton class=\"h-7 w-48 max-w-full rounded-md\" [animated]=\"true\"></ax-skeleton>\n              <ax-skeleton class=\"mt-2 h-4 w-32 max-w-full rounded-md\" [animated]=\"true\"></ax-skeleton>\n            </div>\n          </div>\n        </div>\n        <!--------------------------------------------------------------->\n        @if (!isCompactNav()) {\n        <!-- ----- Desktop tab skeletons ----- -->\n        <div class=\"__tabs __tabs-skeleton\">\n          @for (item of pageTabSkeletonPlaceholders; track item) {\n          <ax-skeleton class=\"h-4 w-20 rounded-md\" [animated]=\"true\"></ax-skeleton>\n          }\n        </div>\n        }\n      </section>\n      <!--------------------------------------------------------------->\n      @if (isCompactNav()) {\n      <!-- ----- Compact group-list skeletons ----- -->\n      <div class=\"__group-nav\">\n        @for (item of pageListSkeletonPlaceholders; track item) {\n        <div class=\"__group-nav-skeleton-row\">\n          <ax-skeleton class=\"size-5 shrink-0 rounded-md\" [animated]=\"true\"></ax-skeleton>\n          <ax-skeleton class=\"h-4 min-w-0 flex-1 rounded-md\" [animated]=\"true\"></ax-skeleton>\n          <ax-skeleton class=\"size-4 shrink-0 rounded-md\" [animated]=\"true\"></ax-skeleton>\n        </div>\n        }\n      </div>\n      }\n      <!-- ----- Desktop section-card skeletons ----- -->\n      @else {\n      <ng-container *ngTemplateOutlet=\"sectionCardsSkeleton\"></ng-container>\n      }\n    </div>\n    } @else if (header(); as profileHeader) {\n    <div class=\"__shell\">\n      <!--->\n      <!-- ----- Profile hero and desktop group tabs ----- -->\n      @if (showHero()) {\n      <section\n        class=\"__hero-card\"\n        [axpSticky]=\"'--stuck'\"\n        stickyParent=\"#axp-page-layout\"\n        [stickyOffset]=\"0\"\n      >\n        <div class=\"__hero-header\">\n          <div class=\"__hero-cover\" aria-hidden=\"true\">\n            <span class=\"__hero-wave __hero-wave--primary\" aria-hidden=\"true\"></span>\n            <span class=\"__hero-wave __hero-wave--soft\" aria-hidden=\"true\"></span>\n            <span class=\"__hero-wave __hero-wave--light\" aria-hidden=\"true\"></span>\n          </div>\n\n          <div class=\"__hero-content\">\n            <div class=\"__hero-avatar\">\n              <axp-user-avatar [size]=\"96\" [userId]=\"profileHeader.avatarUserId\"></axp-user-avatar>\n              <button type=\"button\" class=\"__avatar-edit\"\n                [attr.aria-label]=\"('@auth:profile-page.avatar.edit' | translate | async) ?? ''\"\n                (click)=\"handleEditAvatar()\">\n                <ax-icon icon=\"fa-light fa-camera\"></ax-icon>\n              </button>\n            </div>\n\n            <div class=\"__hero-details\">\n              <h2 class=\"__hero-name\">{{ profileHeader.displayName }}</h2>\n\n              @if (profileHeader.username || profileHeader.joinedAt) {\n              <p class=\"__hero-subtitle\">\n                @if (profileHeader.username) {\n                <span class=\"__hero-subtitle-item\">\n                  <ax-icon icon=\"fa-light fa-user\"></ax-icon>\n                  <span>{{ profileHeader.username }}</span>\n                </span>\n                }\n                @if (profileHeader.username && profileHeader.joinedAt) {\n                <span class=\"__hero-subtitle-separator\" aria-hidden=\"true\">\u00B7</span>\n                }\n                @if (profileHeader.joinedAt) {\n                <span class=\"__hero-subtitle-item\">\n                  <ax-icon icon=\"fa-light fa-calendar\"></ax-icon>\n                  <span>\n                    {{ '@auth:profile-page.header.meta.member-since' | translate | async }}\n                    {{ profileHeader.joinedAt | format: 'date' : { format: 'long' } | async }}\n                  </span>\n                </span>\n                }\n              </p>\n              }\n\n              @if (profileHeader.meta.length) {\n              <ul class=\"__hero-meta\">\n                @for (item of profileHeader.meta; track item.id) {\n                <li class=\"__hero-meta-item\">\n                  @if (item.icon) {\n                  <ax-icon [icon]=\"item.icon\"></ax-icon>\n                  }\n                  <span class=\"__hero-meta-label\">{{ item.label | translate | async }}</span>\n                  <span class=\"__hero-meta-value\">{{ item.value }}</span>\n                </li>\n                }\n              </ul>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!--->\n        <!-- ----- Desktop group tabs ----- -->\n        @if (showTabs()) {\n        <ax-tabs class=\"__tabs\" [look]=\"'with-line'\" [location]=\"'bottom'\" [fitParent]=\"false\"\n          (onActiveTabChanged)=\"handleGroupTabChanged($event)\">\n          @for (group of groups(); track group.id) {\n          <ax-tab-item [key]=\"group.id\" [text]=\"(group.title | translate | async)!\"\n            [active]=\"activeGroupId() === group.id\">\n            @if (group.icon) {\n            <ax-prefix>\n              <ax-icon [icon]=\"group.icon\"></ax-icon>\n            </ax-prefix>\n            }\n          </ax-tab-item>\n          }\n        </ax-tabs>\n        }\n      </section>\n      }\n\n      <!--->\n      <!-- ----- Profile area list on compact screens ----- -->\n      @if (showGroupList()) {\n      <axp-layout-list class=\"__group-nav\">\n        @for (group of groups(); track group.id) {\n        <axp-layout-list-item (click)=\"handleSelectGroup(group)\">\n          <!--->\n          <!-- ----- Group icon ----- -->\n          @if (group.icon) {\n          <axp-layout-prefix>\n            <ax-icon [icon]=\"group.icon\" class=\"text-gray-500\"></ax-icon>\n          </axp-layout-prefix>\n          }\n          <axp-layout-content>\n            <a class=\"font-semibold\">{{ group.title | translate | async }}</a>\n          </axp-layout-content>\n          <axp-layout-suffix>\n            <ax-icon icon=\"far fa-chevron-right rtl:rotate-180\" class=\"text-gray-400\"></ax-icon>\n          </axp-layout-suffix>\n        </axp-layout-list-item>\n        }\n      </axp-layout-list>\n      }\n\n      <ng-template #sectionCopyBody let-section=\"section\">\n        @if (section.title) {\n          <h3 class=\"__section-title\">{{ section.title | translate | async }}</h3>\n        }\n\n        @if (hasDisplayableInsights(section)) {\n          <ul class=\"__section-insights\">\n            @for (insight of displayableInsights(section); track insight.id) {\n              <li\n                class=\"__section-insight\"\n                [axTooltip]=\"insight.title ? ((insight.title | translate | async) ?? '') : ''\"\n                [axTooltipDisabled]=\"!insight.title\"\n                axTooltipPlacement=\"top\"\n              >\n                <span class=\"__section-insight-icon-wrap\" aria-hidden=\"true\">\n                  @if (insight.icon) {\n                    <ax-icon [icon]=\"insight.icon\"></ax-icon>\n                  }\n                </span>\n                <span class=\"__section-insight-text\">\n                  @if (resolveInsightDate(insight); as insightDate) {\n                    @if (insight.datePrefix) {\n                      <span>{{ insight.datePrefix | translate | async }} \u00B7 </span>\n                    }\n                    <span>{{ insightDate | format: 'timeleft' | async }}</span>\n                  } @else if (insight.text) {\n                    {{ insight.text | translate | async }}\n                  }\n                </span>\n              </li>\n            }\n          </ul>\n        } @else if (section.description) {\n          <p class=\"__section-description\">{{ section.description | translate | async }}</p>\n        }\n      </ng-template>\n\n      <!--->\n      <!-- ----- Lazy group panels: created on first visit, then shown or hidden ----- -->\n      @if (showGroupContent()) {\n      @for (group of groups(); track group.id) {\n        @if (isGroupVisited(group.id)) {\n          <div\n            class=\"__group-panel\"\n            [class.--inactive]=\"!isGroupPanelActive(group.id)\"\n            [attr.aria-hidden]=\"!isGroupPanelActive(group.id)\"\n            [attr.inert]=\"isGroupPanelActive(group.id) ? null : ''\"\n          >\n            @if (isGroupSectionsPending(group)) {\n              <!-- ----- Section cards skeleton while group content loads ----- -->\n              <ng-container *ngTemplateOutlet=\"sectionCardsSkeleton\"></ng-container>\n            } @else if (groupComponentContent(group); as componentContent) {\n              <!-- ----- Full-tab page component ----- -->\n              <div class=\"__group-content\">\n                <div axp-page-component-renderer [componentKey]=\"componentContent.componentKey\"\n                  [pageConfig]=\"componentContent.pageConfig ?? {}\"></div>\n              </div>\n            } @else {\n              <!-- ----- Section cards for groups that do not replace the tab body ----- -->\n              <div class=\"__sections\">\n                @for (section of sectionsForGroup(group.id); track section.id) {\n                  @let sectionContent = resolveSectionContent(section);\n                  <div class=\"__section-slot\" [class.--has-col-start]=\"hasSectionColStart(section.layout)\"\n                    [style]=\"sectionLayoutVars(section.layout)\">\n                    @if (sectionContent.mode === 'component') {\n                      <div axp-page-component-renderer [componentKey]=\"sectionContent.componentKey\"\n                        [pageConfig]=\"sectionContent.pageConfig ?? {}\"></div>\n                    } @else {\n                      @let visibleActions = visibleSectionActions(sectionContent.actions);\n                      @let defaultAction = defaultSectionAction(sectionContent.actions);\n                      <article class=\"__section-card\">\n                        @if (defaultAction) {\n                          <div\n                            class=\"__section-card-action\"\n                            [class.__section-card-action--with-menu]=\"visibleActions.length > 1\"\n                          >\n                            <button\n                              type=\"button\"\n                              class=\"__section-card-hit\"\n                              [disabled]=\"defaultAction.disabled === true\"\n                              (click)=\"handleActionClick(defaultAction)\"\n                            >\n                              @if (section.icon) {\n                                <div class=\"__section-icon\">\n                                  <ax-icon [icon]=\"section.icon\"></ax-icon>\n                                </div>\n                              }\n                              <div class=\"__section-copy\">\n                                <ng-container *ngTemplateOutlet=\"sectionCopyBody; context: { section: section }\"></ng-container>\n                              </div>\n                            </button>\n\n                            @if (visibleActions.length > 1) {\n                              <div class=\"__section-more-actions-wrap\" (click)=\"$event.stopPropagation()\">\n                                <ax-button\n                                  class=\"__section-more-actions\"\n                                  look=\"blank\"\n                                  color=\"default\"\n                                  [attr.aria-label]=\"('@auth:profile-page.page.sections.actions' | translate | async) ?? ''\"\n                                >\n                                  <ax-prefix>\n                                    <ax-icon icon=\"fa-light fa-ellipsis-vertical\"></ax-icon>\n                                  </ax-prefix>\n                                  <ax-dropdown-panel>\n                                    <ax-button-item-list>\n                                      @for (action of visibleActions; track action.name ?? action.title) {\n                                        <ax-button-item\n                                          [text]=\"(action.title | translate | async)!\"\n                                          [color]=\"action.color\"\n                                          [disabled]=\"action.disabled === true\"\n                                          (onClick)=\"handleActionClick(action)\"\n                                        >\n                                          @if (action.icon) {\n                                            <ax-prefix>\n                                              <ax-icon [icon]=\"action.icon\"></ax-icon>\n                                            </ax-prefix>\n                                          }\n                                        </ax-button-item>\n                                      }\n                                    </ax-button-item-list>\n                                  </ax-dropdown-panel>\n                                </ax-button>\n                              </div>\n                            }\n                          </div>\n                        } @else {\n                          <div class=\"__section-card-action __section-card-action--static\">\n                            @if (section.icon) {\n                              <div class=\"__section-icon\">\n                                <ax-icon [icon]=\"section.icon\"></ax-icon>\n                              </div>\n                            }\n                            <div class=\"__section-copy\">\n                              <ng-container *ngTemplateOutlet=\"sectionCopyBody; context: { section: section }\"></ng-container>\n                            </div>\n                          </div>\n                        }\n                      </article>\n                    }\n                  </div>\n                } @empty {\n                  <p class=\"__sections-empty\">{{ '@auth:profile-page.page.sections.empty' | translate | async }}</p>\n                }\n              </div>\n            }\n          </div>\n        }\n      }\n      }\n    </div>\n    }\n    <ng-template #sectionCardsSkeleton>\n      <div class=\"__sections\">\n        @for (item of sectionSkeletonPlaceholders; track item) {\n          <div class=\"__section-slot\">\n            <article class=\"__section-card\">\n              <div class=\"__section-card-action __section-card-action--static\">\n                <ax-skeleton class=\"size-14 shrink-0 rounded-xl\" [animated]=\"true\"></ax-skeleton>\n                <div class=\"__section-copy flex flex-col gap-2\">\n                  <ax-skeleton class=\"h-4 w-40 max-w-full rounded-md\" [animated]=\"true\"></ax-skeleton>\n                  <ax-skeleton class=\"h-3 w-56 max-w-full rounded-md\" [animated]=\"true\"></ax-skeleton>\n                </div>\n              </div>\n            </article>\n          </div>\n        }\n      </div>\n    </ng-template>\n  </axp-page-content>\n</axp-page-layout>", styles: ["@layer properties;.axm-user-profile-page #axp-page-header{display:none}.axm-user-profile-page.--mobile-group #axp-page-header{display:flex}.axm-user-profile-page.--mobile-group .__shell{padding-top:calc(var(--spacing, .25rem) * 2)}.axm-user-profile-page axp-page-content{padding:0}.axm-user-profile-page .__shell{margin-inline:auto;width:100%;padding-inline:calc(var(--spacing, .25rem) * 4);padding-top:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 10)}@media(width>=40rem){.axm-user-profile-page .__shell{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=40rem){.axm-user-profile-page .__shell{padding-top:calc(var(--spacing, .25rem) * 6)}}@media(width>=64rem){.axm-user-profile-page .__shell{padding-inline:calc(var(--spacing, .25rem) * 8)}}.axm-user-profile-page .__tabs-skeleton{position:relative;z-index:10;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 6);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3.5);border-top:1px solid rgb(var(--ax-sys-color-border-lighter-surface))}@media(width>=40rem){.axm-user-profile-page .__tabs-skeleton{padding-inline:calc(var(--spacing, .25rem) * 6)}}.axm-user-profile-page .__group-nav-skeleton-row{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3.5)}.axm-user-profile-page .__group-nav-skeleton-row:not(:last-child){border-bottom:1px dashed rgb(var(--ax-sys-color-border-lighter-surface))}.axm-user-profile-page .__hero-card{position:sticky;top:0;z-index:10;margin-bottom:calc(var(--spacing, .25rem) * 6);overflow:hidden;border-radius:var(--radius-2xl, 1rem);border-style:var(--tw-border-style);border-width:1px;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgb(var(--ax-sys-color-border-lightest-surface));transition:border-radius .12s ease-out,box-shadow .12s ease-out,margin-inline .12s ease-out,width .12s ease-out,border-color .12s ease-out}@media(prefers-reduced-motion:reduce){.axm-user-profile-page .__hero-card{transition-duration:1ms}}.axm-user-profile-page .__hero-card.--stuck{overflow:visible;border-radius:0;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);margin-inline:-1rem;width:calc(100% + 2rem);border-inline-width:0}@media(min-width:640px){.axm-user-profile-page .__hero-card.--stuck{margin-inline:-1.5rem;width:calc(100% + 3rem)}}@media(min-width:1024px){.axm-user-profile-page .__hero-card.--stuck{margin-inline:-2rem;width:calc(100% + 4rem)}}.axm-user-profile-page .__hero-header{position:relative;overflow:hidden;min-height:9.5rem}.axm-user-profile-page .__hero-cover{position:absolute;z-index:0;overflow:hidden;inset:0;width:100%;height:100%;background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-50)),rgb(var(--ax-sys-color-lightest-surface)) 32%,rgb(var(--ax-sys-color-primary-200)) 68%,rgb(var(--ax-sys-color-primary-100)))}.axm-user-profile-page .__hero-wave{pointer-events:none;position:absolute;border-radius:50%}.axm-user-profile-page .__hero-wave--primary{width:56%;height:158%;right:-10%;top:-40%;background:rgb(var(--ax-sys-color-primary-200) / .62);transform:rotate(-7deg)}.axm-user-profile-page .__hero-wave--soft{width:44%;height:132%;right:8%;top:-18%;background:rgb(var(--ax-sys-color-primary-100) / .55);transform:rotate(4deg)}.axm-user-profile-page .__hero-wave--light{width:36%;height:118%;right:2%;bottom:-46%;background:rgb(var(--ax-sys-color-lightest-surface) / .92);transform:rotate(11deg)}.axm-user-profile-page .__hero-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 6)}@media(width>=40rem){.axm-user-profile-page .__hero-content{flex-direction:row}}@media(width>=40rem){.axm-user-profile-page .__hero-content{align-items:center}}@media(width>=40rem){.axm-user-profile-page .__hero-content{gap:calc(var(--spacing, .25rem) * 5)}}@media(width>=40rem){.axm-user-profile-page .__hero-content{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=40rem){.axm-user-profile-page .__hero-content{padding-block:calc(var(--spacing, .25rem) * 8)}}.axm-user-profile-page .__hero-avatar{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;width:6.5rem;height:6.5rem;border-radius:calc(infinity * 1px);padding:var(--spacing, .25rem);background:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 6px 18px rgb(var(--ax-sys-color-dark-surface) / .1)}.axm-user-profile-page .__hero-avatar axp-user-avatar{display:flex;width:calc(var(--spacing, .25rem) * 24);height:calc(var(--spacing, .25rem) * 24);align-items:center;justify-content:center;overflow:hidden;border-radius:calc(infinity * 1px);line-height:0}.axm-user-profile-page .__avatar-edit{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:0;z-index:10;display:flex;align-items:center;justify-content:center;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.axm-user-profile-page .__avatar-edit:hover{--tw-scale-x: 105%;--tw-scale-y: 105%;--tw-scale-z: 105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.axm-user-profile-page .__hero-details{width:100%;min-width:0px;text-align:center}@media(width>=40rem){.axm-user-profile-page .__hero-details{text-align:start}}.axm-user-profile-page .__hero-name{margin:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);color:rgb(var(--ax-sys-color-primary-950))}@media(width>=40rem){.axm-user-profile-page .__hero-name{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)))}}.axm-user-profile-page .__hero-subtitle{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:calc(var(--spacing, .25rem) * 1.5);margin-bottom:0;column-gap:calc(var(--spacing, .25rem) * 2);row-gap:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--ax-sys-color-on-lighter-surface))}@media(width>=40rem){.axm-user-profile-page .__hero-subtitle{justify-content:flex-start}}.axm-user-profile-page .__hero-subtitle-item{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}.axm-user-profile-page .__hero-subtitle-item ax-icon{color:rgb(var(--ax-sys-color-on-lighter-surface))}.axm-user-profile-page .__hero-subtitle-separator{opacity:45%}.axm-user-profile-page .__hero-meta{margin:0;margin-top:calc(var(--spacing, .25rem) * 2.5);display:flex;list-style-type:none;flex-wrap:wrap;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);padding:0}@media(width>=40rem){.axm-user-profile-page .__hero-meta{justify-content:flex-start}}.axm-user-profile-page .__hero-meta-item{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));background:rgb(var(--ax-sys-color-lightest-surface) / .72);color:rgb(var(--ax-sys-color-on-lighter-surface));border:1px solid rgb(var(--ax-sys-color-border-lighter-surface))}.axm-user-profile-page .__hero-meta-item ax-icon{color:rgb(var(--ax-sys-color-primary-500))}.axm-user-profile-page .__hero-meta-label{opacity:70%}.axm-user-profile-page .__hero-meta-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-user-profile-page .__tabs{position:relative;z-index:10;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 4);border-top:1px solid rgb(var(--ax-sys-color-border-lighter-surface));background:rgb(var(--ax-sys-color-lightest-surface));--ax-comp-tabs-default-border-radius: 0}@media(width>=40rem){.axm-user-profile-page .__tabs{padding-inline:calc(var(--spacing, .25rem) * 6)}}.axm-user-profile-page .__tabs.with-line.ax-bottom .tabs-scroll-area,.axm-user-profile-page .__tabs.with-line-color.ax-bottom .tabs-scroll-area{box-shadow:none}.axm-user-profile-page .__tabs ax-tab-item{margin-block:0px;padding-block:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axm-user-profile-page .__group-nav{overflow:hidden;border-radius:var(--radius-2xl, 1rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axm-user-profile-page .__group-nav axp-layout-list-item{margin-inline:0px;margin-top:0;cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3.5)}.axm-user-profile-page .__group-panel{width:100%}.axm-user-profile-page .__group-panel.--inactive{display:none}.axm-user-profile-page .__group-content{width:100%}.axm-user-profile-page .__group-content>*{display:block;width:100%}.axm-user-profile-page .__sections{display:grid;gap:calc(var(--spacing, .25rem) * 5);grid-template-columns:repeat(12,minmax(0,1fr))}.axm-user-profile-page .__section-slot{grid-column:1/-1;grid-row:span var(--section-row-span, 1)}@media(min-width:768px){.axm-user-profile-page .__section-slot{grid-column:span var(--section-col-span, 6)}.axm-user-profile-page .__section-slot.--has-col-start{grid-column:var(--section-col-start) / span var(--section-col-span, 6)}}.axm-user-profile-page .__section-card{overflow:hidden;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:rgb(var(--ax-sys-color-border-lightest-surface));transition:box-shadow .12s ease-out,border-color .12s ease-out}@media(prefers-reduced-motion:reduce){.axm-user-profile-page .__section-card{transition-duration:1ms}}.axm-user-profile-page .__section-card:has(.__section-card-hit:not(:disabled):hover),.axm-user-profile-page .__section-card:has(.__section-card-hit:not(:disabled):focus-visible){border-color:rgb(var(--ax-sys-color-border-lighter-surface));box-shadow:0 4px 6px -1px rgb(var(--ax-sys-color-dark-surface) / .06),0 8px 20px -4px rgb(var(--ax-sys-color-dark-surface) / .1)}.axm-user-profile-page .__section-card-action{display:flex;width:100%;align-items:center;color:inherit}.axm-user-profile-page .__section-card-action--with-menu{gap:0px}.axm-user-profile-page .__section-card-action--static{cursor:default;gap:calc(var(--spacing, .25rem) * 5);padding:calc(var(--spacing, .25rem) * 5);text-align:start}@media(width>=40rem){.axm-user-profile-page .__section-card-action--static{padding:calc(var(--spacing, .25rem) * 6)}}.axm-user-profile-page .__section-card-hit{display:flex;min-width:0px;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 5);text-align:start;cursor:pointer;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 5);color:inherit}@media(width>=40rem){.axm-user-profile-page .__section-card-hit{padding:calc(var(--spacing, .25rem) * 6)}}.axm-user-profile-page .__section-card-hit:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:-2px}.axm-user-profile-page .__section-card-hit:disabled{cursor:not-allowed;opacity:60%}.axm-user-profile-page .__section-more-actions-wrap{flex-shrink:0;padding-right:calc(var(--spacing, .25rem) * 5)}@media(width>=40rem){.axm-user-profile-page .__section-more-actions-wrap{padding-right:calc(var(--spacing, .25rem) * 6)}}.axm-user-profile-page .__section-icon{display:flex;width:calc(var(--spacing, .25rem) * 14);height:calc(var(--spacing, .25rem) * 14);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-xl, .75rem);padding:calc(var(--spacing, .25rem) * 3);background-color:rgb(var(--ax-sys-color-primary-50));color:rgb(var(--ax-sys-color-primary-500))}.axm-user-profile-page .__section-copy{min-width:0px;flex:1}.axm-user-profile-page .__section-title{margin:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--ax-sys-color-on-lightest-surface))}.axm-user-profile-page .__section-description{margin-top:var(--spacing, .25rem);margin-bottom:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%;color:rgb(var(--ax-sys-color-on-lighter-surface))}.axm-user-profile-page .__section-insights{margin:0;margin-top:calc(var(--spacing, .25rem) * 2);display:flex;list-style-type:none;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3);row-gap:calc(var(--spacing, .25rem) * 1.5);padding:0}.axm-user-profile-page .__section-insight{display:inline-grid;max-width:100%;align-items:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);grid-template-columns:1.125rem auto;column-gap:.375rem;color:rgb(var(--ax-sys-color-on-lighter-surface))}.axm-user-profile-page .__section-insight-icon-wrap{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.125rem;height:1.125rem}.axm-user-profile-page .__section-insight-icon-wrap ax-icon{display:flex;align-items:center;justify-content:center;width:.875rem;height:.875rem;font-size:.875rem;line-height:1;color:rgb(var(--ax-sys-color-primary-500))}.axm-user-profile-page .__section-insight-icon-wrap i,.axm-user-profile-page .__section-insight-icon-wrap svg{width:.875rem;height:.875rem;font-size:.875rem}.axm-user-profile-page .__section-insight-text{min-width:0px;flex:1;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axm-user-profile-page .__section-more-actions{margin-left:auto;display:flex;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);color:rgb(var(--ax-sys-color-on-lighter-surface))}.axm-user-profile-page .__sections-empty{border-radius:var(--radius-2xl, 1rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);grid-column:1/-1;color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axm-user-profile-page .ax-tabs-scroll-area{--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.dark .axm-user-profile-page .__hero-cover{background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-50)),rgb(var(--ax-sys-color-darkest-surface)) 26%,rgb(var(--ax-sys-color-primary-700) / .28) 58%,rgb(var(--ax-sys-color-primary-600) / .38))}.dark .axm-user-profile-page .__hero-wave--primary{background:rgb(var(--ax-sys-color-primary-700) / .28)}.dark .axm-user-profile-page .__hero-wave--soft{background:rgb(var(--ax-sys-color-primary-600) / .18)}.dark .axm-user-profile-page .__hero-wave--light{background:rgb(var(--ax-sys-color-lightest-surface) / .06)}.dark .axm-user-profile-page .__hero-name{color:rgb(var(--ax-sys-color-on-darkest-surface))}.dark .axm-user-profile-page .__hero-subtitle{color:rgb(var(--ax-sys-color-on-darker-surface))}.dark .axm-user-profile-page .__hero-subtitle-item ax-icon{color:rgb(var(--ax-sys-color-primary-300))}.dark .axm-user-profile-page .__hero-meta-item{background:rgb(var(--ax-sys-color-darker-surface) / .45);color:rgb(var(--ax-sys-color-on-darker-surface));border-color:rgb(var(--ax-sys-color-border-darker-surface))}.dark .axm-user-profile-page .__hero-meta-item ax-icon{color:rgb(var(--ax-sys-color-primary-300))}.dark .axm-user-profile-page .__group-nav{border-color:rgb(var(--ax-sys-color-border-darker-surface))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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: "component", type: i1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i1$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i8.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutListComponent, selector: "axp-layout-list" }, { kind: "component", type: AXPThemeLayoutListItemComponent, selector: "axp-layout-list-item" }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "directive", type: AXPPageComponentRendererDirective, selector: "[axp-page-component-renderer]", inputs: ["componentKey", "rootContext", "pageConfig", "options"], outputs: ["componentReady"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMUserProfilePageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-user-profile-page', imports: [
+                        CommonModule,
+                        AsyncPipe,
+                        AXFormatPipe,
+                        RouterModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXDropdownModule,
+                        AXSkeletonModule,
+                        AXTabsModule,
+                        AXPStickyDirective,
+                        AXTranslationModule,
+                        AXTooltipModule,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutListComponent,
+                        AXPThemeLayoutListItemComponent,
+                        AXPUserAvatarComponent,
+                        AXPPageComponentRendererDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMUserProfilePageComponent,
+                        },
+                    ], host: {
+                        class: 'axm-user-profile-page',
+                        '[class.--mobile-group]': 'isMobileGroupView()',
+                    }, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-content>\n    @if (isLoading()) {\n    <!-- ----- Profile page skeleton ----- -->\n    <div class=\"__shell\" aria-hidden=\"true\">\n      <section class=\"__hero-card\">\n        <div class=\"__hero-header\">\n          <div class=\"__hero-cover\">\n            <span class=\"__hero-wave __hero-wave--primary\"></span>\n            <span class=\"__hero-wave __hero-wave--soft\"></span>\n            <span class=\"__hero-wave __hero-wave--light\"></span>\n          </div>\n          <div class=\"__hero-content\">\n            <div class=\"__hero-avatar\">\n              <ax-skeleton class=\"size-24 rounded-full\" [animated]=\"true\"></ax-skeleton>\n            </div>\n            <div class=\"__hero-details\">\n              <ax-skeleton class=\"h-7 w-48 max-w-full rounded-md\" [animated]=\"true\"></ax-skeleton>\n              <ax-skeleton class=\"mt-2 h-4 w-32 max-w-full rounded-md\" [animated]=\"true\"></ax-skeleton>\n            </div>\n          </div>\n        </div>\n        <!--------------------------------------------------------------->\n        @if (!isCompactNav()) {\n        <!-- ----- Desktop tab skeletons ----- -->\n        <div class=\"__tabs __tabs-skeleton\">\n          @for (item of pageTabSkeletonPlaceholders; track item) {\n          <ax-skeleton class=\"h-4 w-20 rounded-md\" [animated]=\"true\"></ax-skeleton>\n          }\n        </div>\n        }\n      </section>\n      <!--------------------------------------------------------------->\n      @if (isCompactNav()) {\n      <!-- ----- Compact group-list skeletons ----- -->\n      <div class=\"__group-nav\">\n        @for (item of pageListSkeletonPlaceholders; track item) {\n        <div class=\"__group-nav-skeleton-row\">\n          <ax-skeleton class=\"size-5 shrink-0 rounded-md\" [animated]=\"true\"></ax-skeleton>\n          <ax-skeleton class=\"h-4 min-w-0 flex-1 rounded-md\" [animated]=\"true\"></ax-skeleton>\n          <ax-skeleton class=\"size-4 shrink-0 rounded-md\" [animated]=\"true\"></ax-skeleton>\n        </div>\n        }\n      </div>\n      }\n      <!-- ----- Desktop section-card skeletons ----- -->\n      @else {\n      <ng-container *ngTemplateOutlet=\"sectionCardsSkeleton\"></ng-container>\n      }\n    </div>\n    } @else if (header(); as profileHeader) {\n    <div class=\"__shell\">\n      <!--->\n      <!-- ----- Profile hero and desktop group tabs ----- -->\n      @if (showHero()) {\n      <section\n        class=\"__hero-card\"\n        [axpSticky]=\"'--stuck'\"\n        stickyParent=\"#axp-page-layout\"\n        [stickyOffset]=\"0\"\n      >\n        <div class=\"__hero-header\">\n          <div class=\"__hero-cover\" aria-hidden=\"true\">\n            <span class=\"__hero-wave __hero-wave--primary\" aria-hidden=\"true\"></span>\n            <span class=\"__hero-wave __hero-wave--soft\" aria-hidden=\"true\"></span>\n            <span class=\"__hero-wave __hero-wave--light\" aria-hidden=\"true\"></span>\n          </div>\n\n          <div class=\"__hero-content\">\n            <div class=\"__hero-avatar\">\n              <axp-user-avatar [size]=\"96\" [userId]=\"profileHeader.avatarUserId\"></axp-user-avatar>\n              <button type=\"button\" class=\"__avatar-edit\"\n                [attr.aria-label]=\"('@auth:profile-page.avatar.edit' | translate | async) ?? ''\"\n                (click)=\"handleEditAvatar()\">\n                <ax-icon icon=\"fa-light fa-camera\"></ax-icon>\n              </button>\n            </div>\n\n            <div class=\"__hero-details\">\n              <h2 class=\"__hero-name\">{{ profileHeader.displayName }}</h2>\n\n              @if (profileHeader.username || profileHeader.joinedAt) {\n              <p class=\"__hero-subtitle\">\n                @if (profileHeader.username) {\n                <span class=\"__hero-subtitle-item\">\n                  <ax-icon icon=\"fa-light fa-user\"></ax-icon>\n                  <span>{{ profileHeader.username }}</span>\n                </span>\n                }\n                @if (profileHeader.username && profileHeader.joinedAt) {\n                <span class=\"__hero-subtitle-separator\" aria-hidden=\"true\">\u00B7</span>\n                }\n                @if (profileHeader.joinedAt) {\n                <span class=\"__hero-subtitle-item\">\n                  <ax-icon icon=\"fa-light fa-calendar\"></ax-icon>\n                  <span>\n                    {{ '@auth:profile-page.header.meta.member-since' | translate | async }}\n                    {{ profileHeader.joinedAt | format: 'date' : { format: 'long' } | async }}\n                  </span>\n                </span>\n                }\n              </p>\n              }\n\n              @if (profileHeader.meta.length) {\n              <ul class=\"__hero-meta\">\n                @for (item of profileHeader.meta; track item.id) {\n                <li class=\"__hero-meta-item\">\n                  @if (item.icon) {\n                  <ax-icon [icon]=\"item.icon\"></ax-icon>\n                  }\n                  <span class=\"__hero-meta-label\">{{ item.label | translate | async }}</span>\n                  <span class=\"__hero-meta-value\">{{ item.value }}</span>\n                </li>\n                }\n              </ul>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!--->\n        <!-- ----- Desktop group tabs ----- -->\n        @if (showTabs()) {\n        <ax-tabs class=\"__tabs\" [look]=\"'with-line'\" [location]=\"'bottom'\" [fitParent]=\"false\"\n          (onActiveTabChanged)=\"handleGroupTabChanged($event)\">\n          @for (group of groups(); track group.id) {\n          <ax-tab-item [key]=\"group.id\" [text]=\"(group.title | translate | async)!\"\n            [active]=\"activeGroupId() === group.id\">\n            @if (group.icon) {\n            <ax-prefix>\n              <ax-icon [icon]=\"group.icon\"></ax-icon>\n            </ax-prefix>\n            }\n          </ax-tab-item>\n          }\n        </ax-tabs>\n        }\n      </section>\n      }\n\n      <!--->\n      <!-- ----- Profile area list on compact screens ----- -->\n      @if (showGroupList()) {\n      <axp-layout-list class=\"__group-nav\">\n        @for (group of groups(); track group.id) {\n        <axp-layout-list-item (click)=\"handleSelectGroup(group)\">\n          <!--->\n          <!-- ----- Group icon ----- -->\n          @if (group.icon) {\n          <axp-layout-prefix>\n            <ax-icon [icon]=\"group.icon\" class=\"text-gray-500\"></ax-icon>\n          </axp-layout-prefix>\n          }\n          <axp-layout-content>\n            <a class=\"font-semibold\">{{ group.title | translate | async }}</a>\n          </axp-layout-content>\n          <axp-layout-suffix>\n            <ax-icon icon=\"far fa-chevron-right rtl:rotate-180\" class=\"text-gray-400\"></ax-icon>\n          </axp-layout-suffix>\n        </axp-layout-list-item>\n        }\n      </axp-layout-list>\n      }\n\n      <ng-template #sectionCopyBody let-section=\"section\">\n        @if (section.title) {\n          <h3 class=\"__section-title\">{{ section.title | translate | async }}</h3>\n        }\n\n        @if (hasDisplayableInsights(section)) {\n          <ul class=\"__section-insights\">\n            @for (insight of displayableInsights(section); track insight.id) {\n              <li\n                class=\"__section-insight\"\n                [axTooltip]=\"insight.title ? ((insight.title | translate | async) ?? '') : ''\"\n                [axTooltipDisabled]=\"!insight.title\"\n                axTooltipPlacement=\"top\"\n              >\n                <span class=\"__section-insight-icon-wrap\" aria-hidden=\"true\">\n                  @if (insight.icon) {\n                    <ax-icon [icon]=\"insight.icon\"></ax-icon>\n                  }\n                </span>\n                <span class=\"__section-insight-text\">\n                  @if (resolveInsightDate(insight); as insightDate) {\n                    @if (insight.datePrefix) {\n                      <span>{{ insight.datePrefix | translate | async }} \u00B7 </span>\n                    }\n                    <span>{{ insightDate | format: 'timeleft' | async }}</span>\n                  } @else if (insight.text) {\n                    {{ insight.text | translate | async }}\n                  }\n                </span>\n              </li>\n            }\n          </ul>\n        } @else if (section.description) {\n          <p class=\"__section-description\">{{ section.description | translate | async }}</p>\n        }\n      </ng-template>\n\n      <!--->\n      <!-- ----- Lazy group panels: created on first visit, then shown or hidden ----- -->\n      @if (showGroupContent()) {\n      @for (group of groups(); track group.id) {\n        @if (isGroupVisited(group.id)) {\n          <div\n            class=\"__group-panel\"\n            [class.--inactive]=\"!isGroupPanelActive(group.id)\"\n            [attr.aria-hidden]=\"!isGroupPanelActive(group.id)\"\n            [attr.inert]=\"isGroupPanelActive(group.id) ? null : ''\"\n          >\n            @if (isGroupSectionsPending(group)) {\n              <!-- ----- Section cards skeleton while group content loads ----- -->\n              <ng-container *ngTemplateOutlet=\"sectionCardsSkeleton\"></ng-container>\n            } @else if (groupComponentContent(group); as componentContent) {\n              <!-- ----- Full-tab page component ----- -->\n              <div class=\"__group-content\">\n                <div axp-page-component-renderer [componentKey]=\"componentContent.componentKey\"\n                  [pageConfig]=\"componentContent.pageConfig ?? {}\"></div>\n              </div>\n            } @else {\n              <!-- ----- Section cards for groups that do not replace the tab body ----- -->\n              <div class=\"__sections\">\n                @for (section of sectionsForGroup(group.id); track section.id) {\n                  @let sectionContent = resolveSectionContent(section);\n                  <div class=\"__section-slot\" [class.--has-col-start]=\"hasSectionColStart(section.layout)\"\n                    [style]=\"sectionLayoutVars(section.layout)\">\n                    @if (sectionContent.mode === 'component') {\n                      <div axp-page-component-renderer [componentKey]=\"sectionContent.componentKey\"\n                        [pageConfig]=\"sectionContent.pageConfig ?? {}\"></div>\n                    } @else {\n                      @let visibleActions = visibleSectionActions(sectionContent.actions);\n                      @let defaultAction = defaultSectionAction(sectionContent.actions);\n                      <article class=\"__section-card\">\n                        @if (defaultAction) {\n                          <div\n                            class=\"__section-card-action\"\n                            [class.__section-card-action--with-menu]=\"visibleActions.length > 1\"\n                          >\n                            <button\n                              type=\"button\"\n                              class=\"__section-card-hit\"\n                              [disabled]=\"defaultAction.disabled === true\"\n                              (click)=\"handleActionClick(defaultAction)\"\n                            >\n                              @if (section.icon) {\n                                <div class=\"__section-icon\">\n                                  <ax-icon [icon]=\"section.icon\"></ax-icon>\n                                </div>\n                              }\n                              <div class=\"__section-copy\">\n                                <ng-container *ngTemplateOutlet=\"sectionCopyBody; context: { section: section }\"></ng-container>\n                              </div>\n                            </button>\n\n                            @if (visibleActions.length > 1) {\n                              <div class=\"__section-more-actions-wrap\" (click)=\"$event.stopPropagation()\">\n                                <ax-button\n                                  class=\"__section-more-actions\"\n                                  look=\"blank\"\n                                  color=\"default\"\n                                  [attr.aria-label]=\"('@auth:profile-page.page.sections.actions' | translate | async) ?? ''\"\n                                >\n                                  <ax-prefix>\n                                    <ax-icon icon=\"fa-light fa-ellipsis-vertical\"></ax-icon>\n                                  </ax-prefix>\n                                  <ax-dropdown-panel>\n                                    <ax-button-item-list>\n                                      @for (action of visibleActions; track action.name ?? action.title) {\n                                        <ax-button-item\n                                          [text]=\"(action.title | translate | async)!\"\n                                          [color]=\"action.color\"\n                                          [disabled]=\"action.disabled === true\"\n                                          (onClick)=\"handleActionClick(action)\"\n                                        >\n                                          @if (action.icon) {\n                                            <ax-prefix>\n                                              <ax-icon [icon]=\"action.icon\"></ax-icon>\n                                            </ax-prefix>\n                                          }\n                                        </ax-button-item>\n                                      }\n                                    </ax-button-item-list>\n                                  </ax-dropdown-panel>\n                                </ax-button>\n                              </div>\n                            }\n                          </div>\n                        } @else {\n                          <div class=\"__section-card-action __section-card-action--static\">\n                            @if (section.icon) {\n                              <div class=\"__section-icon\">\n                                <ax-icon [icon]=\"section.icon\"></ax-icon>\n                              </div>\n                            }\n                            <div class=\"__section-copy\">\n                              <ng-container *ngTemplateOutlet=\"sectionCopyBody; context: { section: section }\"></ng-container>\n                            </div>\n                          </div>\n                        }\n                      </article>\n                    }\n                  </div>\n                } @empty {\n                  <p class=\"__sections-empty\">{{ '@auth:profile-page.page.sections.empty' | translate | async }}</p>\n                }\n              </div>\n            }\n          </div>\n        }\n      }\n      }\n    </div>\n    }\n    <ng-template #sectionCardsSkeleton>\n      <div class=\"__sections\">\n        @for (item of sectionSkeletonPlaceholders; track item) {\n          <div class=\"__section-slot\">\n            <article class=\"__section-card\">\n              <div class=\"__section-card-action __section-card-action--static\">\n                <ax-skeleton class=\"size-14 shrink-0 rounded-xl\" [animated]=\"true\"></ax-skeleton>\n                <div class=\"__section-copy flex flex-col gap-2\">\n                  <ax-skeleton class=\"h-4 w-40 max-w-full rounded-md\" [animated]=\"true\"></ax-skeleton>\n                  <ax-skeleton class=\"h-3 w-56 max-w-full rounded-md\" [animated]=\"true\"></ax-skeleton>\n                </div>\n              </div>\n            </article>\n          </div>\n        }\n      </div>\n    </ng-template>\n  </axp-page-content>\n</axp-page-layout>", styles: ["@layer properties;.axm-user-profile-page #axp-page-header{display:none}.axm-user-profile-page.--mobile-group #axp-page-header{display:flex}.axm-user-profile-page.--mobile-group .__shell{padding-top:calc(var(--spacing, .25rem) * 2)}.axm-user-profile-page axp-page-content{padding:0}.axm-user-profile-page .__shell{margin-inline:auto;width:100%;padding-inline:calc(var(--spacing, .25rem) * 4);padding-top:calc(var(--spacing, .25rem) * 4);padding-bottom:calc(var(--spacing, .25rem) * 10)}@media(width>=40rem){.axm-user-profile-page .__shell{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=40rem){.axm-user-profile-page .__shell{padding-top:calc(var(--spacing, .25rem) * 6)}}@media(width>=64rem){.axm-user-profile-page .__shell{padding-inline:calc(var(--spacing, .25rem) * 8)}}.axm-user-profile-page .__tabs-skeleton{position:relative;z-index:10;display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 6);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3.5);border-top:1px solid rgb(var(--ax-sys-color-border-lighter-surface))}@media(width>=40rem){.axm-user-profile-page .__tabs-skeleton{padding-inline:calc(var(--spacing, .25rem) * 6)}}.axm-user-profile-page .__group-nav-skeleton-row{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3.5)}.axm-user-profile-page .__group-nav-skeleton-row:not(:last-child){border-bottom:1px dashed rgb(var(--ax-sys-color-border-lighter-surface))}.axm-user-profile-page .__hero-card{position:sticky;top:0;z-index:10;margin-bottom:calc(var(--spacing, .25rem) * 6);overflow:hidden;border-radius:var(--radius-2xl, 1rem);border-style:var(--tw-border-style);border-width:1px;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgb(var(--ax-sys-color-border-lightest-surface));transition:border-radius .12s ease-out,box-shadow .12s ease-out,margin-inline .12s ease-out,width .12s ease-out,border-color .12s ease-out}@media(prefers-reduced-motion:reduce){.axm-user-profile-page .__hero-card{transition-duration:1ms}}.axm-user-profile-page .__hero-card.--stuck{overflow:visible;border-radius:0;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);margin-inline:-1rem;width:calc(100% + 2rem);border-inline-width:0}@media(min-width:640px){.axm-user-profile-page .__hero-card.--stuck{margin-inline:-1.5rem;width:calc(100% + 3rem)}}@media(min-width:1024px){.axm-user-profile-page .__hero-card.--stuck{margin-inline:-2rem;width:calc(100% + 4rem)}}.axm-user-profile-page .__hero-header{position:relative;overflow:hidden;min-height:9.5rem}.axm-user-profile-page .__hero-cover{position:absolute;z-index:0;overflow:hidden;inset:0;width:100%;height:100%;background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-50)),rgb(var(--ax-sys-color-lightest-surface)) 32%,rgb(var(--ax-sys-color-primary-200)) 68%,rgb(var(--ax-sys-color-primary-100)))}.axm-user-profile-page .__hero-wave{pointer-events:none;position:absolute;border-radius:50%}.axm-user-profile-page .__hero-wave--primary{width:56%;height:158%;right:-10%;top:-40%;background:rgb(var(--ax-sys-color-primary-200) / .62);transform:rotate(-7deg)}.axm-user-profile-page .__hero-wave--soft{width:44%;height:132%;right:8%;top:-18%;background:rgb(var(--ax-sys-color-primary-100) / .55);transform:rotate(4deg)}.axm-user-profile-page .__hero-wave--light{width:36%;height:118%;right:2%;bottom:-46%;background:rgb(var(--ax-sys-color-lightest-surface) / .92);transform:rotate(11deg)}.axm-user-profile-page .__hero-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 4);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 6)}@media(width>=40rem){.axm-user-profile-page .__hero-content{flex-direction:row}}@media(width>=40rem){.axm-user-profile-page .__hero-content{align-items:center}}@media(width>=40rem){.axm-user-profile-page .__hero-content{gap:calc(var(--spacing, .25rem) * 5)}}@media(width>=40rem){.axm-user-profile-page .__hero-content{padding-inline:calc(var(--spacing, .25rem) * 6)}}@media(width>=40rem){.axm-user-profile-page .__hero-content{padding-block:calc(var(--spacing, .25rem) * 8)}}.axm-user-profile-page .__hero-avatar{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;align-self:center;width:6.5rem;height:6.5rem;border-radius:calc(infinity * 1px);padding:var(--spacing, .25rem);background:rgb(var(--ax-sys-color-lightest-surface));box-shadow:0 6px 18px rgb(var(--ax-sys-color-dark-surface) / .1)}.axm-user-profile-page .__hero-avatar axp-user-avatar{display:flex;width:calc(var(--spacing, .25rem) * 24);height:calc(var(--spacing, .25rem) * 24);align-items:center;justify-content:center;overflow:hidden;border-radius:calc(infinity * 1px);line-height:0}.axm-user-profile-page .__avatar-edit{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:0;z-index:10;display:flex;align-items:center;justify-content:center;width:calc(var(--spacing, .25rem) * 8);height:calc(var(--spacing, .25rem) * 8);cursor:pointer;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;background:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface))}.axm-user-profile-page .__avatar-edit:hover{--tw-scale-x: 105%;--tw-scale-y: 105%;--tw-scale-z: 105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.axm-user-profile-page .__hero-details{width:100%;min-width:0px;text-align:center}@media(width>=40rem){.axm-user-profile-page .__hero-details{text-align:start}}.axm-user-profile-page .__hero-name{margin:0;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);color:rgb(var(--ax-sys-color-primary-950))}@media(width>=40rem){.axm-user-profile-page .__hero-name{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)))}}.axm-user-profile-page .__hero-subtitle{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:calc(var(--spacing, .25rem) * 1.5);margin-bottom:0;column-gap:calc(var(--spacing, .25rem) * 2);row-gap:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--ax-sys-color-on-lighter-surface))}@media(width>=40rem){.axm-user-profile-page .__hero-subtitle{justify-content:flex-start}}.axm-user-profile-page .__hero-subtitle-item{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}.axm-user-profile-page .__hero-subtitle-item ax-icon{color:rgb(var(--ax-sys-color-on-lighter-surface))}.axm-user-profile-page .__hero-subtitle-separator{opacity:45%}.axm-user-profile-page .__hero-meta{margin:0;margin-top:calc(var(--spacing, .25rem) * 2.5);display:flex;list-style-type:none;flex-wrap:wrap;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);padding:0}@media(width>=40rem){.axm-user-profile-page .__hero-meta{justify-content:flex-start}}.axm-user-profile-page .__hero-meta-item{display:inline-flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-radius:calc(infinity * 1px);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));background:rgb(var(--ax-sys-color-lightest-surface) / .72);color:rgb(var(--ax-sys-color-on-lighter-surface));border:1px solid rgb(var(--ax-sys-color-border-lighter-surface))}.axm-user-profile-page .__hero-meta-item ax-icon{color:rgb(var(--ax-sys-color-primary-500))}.axm-user-profile-page .__hero-meta-label{opacity:70%}.axm-user-profile-page .__hero-meta-value{--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-user-profile-page .__tabs{position:relative;z-index:10;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 4);border-top:1px solid rgb(var(--ax-sys-color-border-lighter-surface));background:rgb(var(--ax-sys-color-lightest-surface));--ax-comp-tabs-default-border-radius: 0}@media(width>=40rem){.axm-user-profile-page .__tabs{padding-inline:calc(var(--spacing, .25rem) * 6)}}.axm-user-profile-page .__tabs.with-line.ax-bottom .tabs-scroll-area,.axm-user-profile-page .__tabs.with-line-color.ax-bottom .tabs-scroll-area{box-shadow:none}.axm-user-profile-page .__tabs ax-tab-item{margin-block:0px;padding-block:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axm-user-profile-page .__group-nav{overflow:hidden;border-radius:var(--radius-2xl, 1rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axm-user-profile-page .__group-nav axp-layout-list-item{margin-inline:0px;margin-top:0;cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3.5)}.axm-user-profile-page .__group-panel{width:100%}.axm-user-profile-page .__group-panel.--inactive{display:none}.axm-user-profile-page .__group-content{width:100%}.axm-user-profile-page .__group-content>*{display:block;width:100%}.axm-user-profile-page .__sections{display:grid;gap:calc(var(--spacing, .25rem) * 5);grid-template-columns:repeat(12,minmax(0,1fr))}.axm-user-profile-page .__section-slot{grid-column:1/-1;grid-row:span var(--section-row-span, 1)}@media(min-width:768px){.axm-user-profile-page .__section-slot{grid-column:span var(--section-col-span, 6)}.axm-user-profile-page .__section-slot.--has-col-start{grid-column:var(--section-col-start) / span var(--section-col-span, 6)}}.axm-user-profile-page .__section-card{overflow:hidden;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-color:rgb(var(--ax-sys-color-border-lightest-surface));transition:box-shadow .12s ease-out,border-color .12s ease-out}@media(prefers-reduced-motion:reduce){.axm-user-profile-page .__section-card{transition-duration:1ms}}.axm-user-profile-page .__section-card:has(.__section-card-hit:not(:disabled):hover),.axm-user-profile-page .__section-card:has(.__section-card-hit:not(:disabled):focus-visible){border-color:rgb(var(--ax-sys-color-border-lighter-surface));box-shadow:0 4px 6px -1px rgb(var(--ax-sys-color-dark-surface) / .06),0 8px 20px -4px rgb(var(--ax-sys-color-dark-surface) / .1)}.axm-user-profile-page .__section-card-action{display:flex;width:100%;align-items:center;color:inherit}.axm-user-profile-page .__section-card-action--with-menu{gap:0px}.axm-user-profile-page .__section-card-action--static{cursor:default;gap:calc(var(--spacing, .25rem) * 5);padding:calc(var(--spacing, .25rem) * 5);text-align:start}@media(width>=40rem){.axm-user-profile-page .__section-card-action--static{padding:calc(var(--spacing, .25rem) * 6)}}.axm-user-profile-page .__section-card-hit{display:flex;min-width:0px;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 5);text-align:start;cursor:pointer;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 5);color:inherit}@media(width>=40rem){.axm-user-profile-page .__section-card-hit{padding:calc(var(--spacing, .25rem) * 6)}}.axm-user-profile-page .__section-card-hit:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:-2px}.axm-user-profile-page .__section-card-hit:disabled{cursor:not-allowed;opacity:60%}.axm-user-profile-page .__section-more-actions-wrap{flex-shrink:0;padding-right:calc(var(--spacing, .25rem) * 5)}@media(width>=40rem){.axm-user-profile-page .__section-more-actions-wrap{padding-right:calc(var(--spacing, .25rem) * 6)}}.axm-user-profile-page .__section-icon{display:flex;width:calc(var(--spacing, .25rem) * 14);height:calc(var(--spacing, .25rem) * 14);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-xl, .75rem);padding:calc(var(--spacing, .25rem) * 3);background-color:rgb(var(--ax-sys-color-primary-50));color:rgb(var(--ax-sys-color-primary-500))}.axm-user-profile-page .__section-copy{min-width:0px;flex:1}.axm-user-profile-page .__section-title{margin:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--ax-sys-color-on-lightest-surface))}.axm-user-profile-page .__section-description{margin-top:var(--spacing, .25rem);margin-bottom:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%;color:rgb(var(--ax-sys-color-on-lighter-surface))}.axm-user-profile-page .__section-insights{margin:0;margin-top:calc(var(--spacing, .25rem) * 2);display:flex;list-style-type:none;flex-wrap:wrap;align-items:center;column-gap:calc(var(--spacing, .25rem) * 3);row-gap:calc(var(--spacing, .25rem) * 1.5);padding:0}.axm-user-profile-page .__section-insight{display:inline-grid;max-width:100%;align-items:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);grid-template-columns:1.125rem auto;column-gap:.375rem;color:rgb(var(--ax-sys-color-on-lighter-surface))}.axm-user-profile-page .__section-insight-icon-wrap{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:1.125rem;height:1.125rem}.axm-user-profile-page .__section-insight-icon-wrap ax-icon{display:flex;align-items:center;justify-content:center;width:.875rem;height:.875rem;font-size:.875rem;line-height:1;color:rgb(var(--ax-sys-color-primary-500))}.axm-user-profile-page .__section-insight-icon-wrap i,.axm-user-profile-page .__section-insight-icon-wrap svg{width:.875rem;height:.875rem;font-size:.875rem}.axm-user-profile-page .__section-insight-text{min-width:0px;flex:1;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axm-user-profile-page .__section-more-actions{margin-left:auto;display:flex;width:calc(var(--spacing, .25rem) * 9);height:calc(var(--spacing, .25rem) * 9);flex-shrink:0;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);color:rgb(var(--ax-sys-color-on-lighter-surface))}.axm-user-profile-page .__sections-empty{border-radius:var(--radius-2xl, 1rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;padding-block:calc(var(--spacing, .25rem) * 12);text-align:center;--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);grid-column:1/-1;color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axm-user-profile-page .ax-tabs-scroll-area{--tw-shadow: 0 0 #0000 !important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}.dark .axm-user-profile-page .__hero-cover{background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-50)),rgb(var(--ax-sys-color-darkest-surface)) 26%,rgb(var(--ax-sys-color-primary-700) / .28) 58%,rgb(var(--ax-sys-color-primary-600) / .38))}.dark .axm-user-profile-page .__hero-wave--primary{background:rgb(var(--ax-sys-color-primary-700) / .28)}.dark .axm-user-profile-page .__hero-wave--soft{background:rgb(var(--ax-sys-color-primary-600) / .18)}.dark .axm-user-profile-page .__hero-wave--light{background:rgb(var(--ax-sys-color-lightest-surface) / .06)}.dark .axm-user-profile-page .__hero-name{color:rgb(var(--ax-sys-color-on-darkest-surface))}.dark .axm-user-profile-page .__hero-subtitle{color:rgb(var(--ax-sys-color-on-darker-surface))}.dark .axm-user-profile-page .__hero-subtitle-item ax-icon{color:rgb(var(--ax-sys-color-primary-300))}.dark .axm-user-profile-page .__hero-meta-item{background:rgb(var(--ax-sys-color-darker-surface) / .45);color:rgb(var(--ax-sys-color-on-darker-surface));border-color:rgb(var(--ax-sys-color-border-darker-surface))}.dark .axm-user-profile-page .__hero-meta-item ax-icon{color:rgb(var(--ax-sys-color-primary-300))}.dark .axm-user-profile-page .__group-nav{border-color:rgb(var(--ax-sys-color-border-darker-surface))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+export { AXMUserProfilePageComponent };
+//# sourceMappingURL=acorex-platform-module-auth-client-profile-page.component-CdxseoJX.mjs.map