@acorex-platform/module-auth-client 0.0.15

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

@@ -0,0 +1,446 @@
+import * as i1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i4$1 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import * as i5 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i6 from '@acorex/components/tabs';
+import { AXTabsModule } from '@acorex/components/tabs';
+import { AXFormatPipe } from '@acorex/core/format';
+import * as i2 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXPStickyDirective } from '@acorex-platform/framework-client/common';
+import { AXPCommandService } from '@acorex-platform/framework-client/runtime';
+import { AXPThemeLayoutBlockComponent, AXPUserAvatarComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageComponentRendererDirective, AXPPageLayoutBase } from '@acorex-platform/framework-client/layout/views';
+import * as i4 from '@angular/common';
+import { CommonModule, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, DestroyRef, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
+import { filter, startWith, distinctUntilChanged } from 'rxjs';
+import { AXMAuthCommandKeys } from '@acorex-platform/module-auth-client/contracts';
+import { AXPSessionService, AXPUserProfileIdentityService } from '@acorex-platform/framework-client/auth';
+import { defaultTo, orderBy, uniqBy, first, isNil, get } from 'lodash';
+import { AXPHookService } from '@acorex-platform/framework-client/core';
+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 } from './acorex-platform-module-auth-client-acorex-platform-module-auth-client-B7tIKOw6.mjs';
+import { AXPEntityStorageService } from '@acorex-platform/framework-client/layout/entity';
+
+//#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() {
+        const payload = await this.hooks.runAsync(PROFILE_PAGE_SECTIONS_HOOK, {
+            sections: [],
+        });
+        return this.sortSections(defaultTo(payload.sections, []));
+    }
+    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: "21.2.9", ngImport: i0, type: AXPUserProfilePageRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPUserProfilePageRegistryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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.storageService = inject(AXPEntityStorageService);
+    }
+    //#endregion
+    //#region ---- Public API ----
+    async loadCurrentUser() {
+        const userId = this.sessionService.user?.id;
+        if (!userId) {
+            return null;
+        }
+        try {
+            const record = (await this.storageService.getOne(SECURITY_MANAGEMENT_USER_ENTITY, userId));
+            return record ?? 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: "21.2.9", ngImport: i0, type: AXPUserProfileUserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPUserProfileUserService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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: "21.2.9", ngImport: i0, type: AXPUserProfileHeaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPUserProfileHeaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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.identityService = inject(AXPUserProfileIdentityService);
+        this.commandService = inject(AXPCommandService);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.destroyRef = inject(DestroyRef);
+        //#endregion
+        //#region ---- State ----
+        this.groups = signal([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.sections = signal([], ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        this.header = signal(null, ...(ngDevMode ? [{ debugName: "header" }] : /* istanbul ignore next */ []));
+        this.activeGroupId = signal(null, ...(ngDevMode ? [{ debugName: "activeGroupId" }] : /* istanbul ignore next */ []));
+        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.visibleSections = computed(() => this.registry.filterSectionsByGroup(this.sections(), this.activeGroupId()), ...(ngDevMode ? [{ debugName: "visibleSections" }] : /* istanbul ignore next */ []));
+        this.activeGroup = computed(() => {
+            const groupId = this.activeGroupId();
+            if (!groupId) {
+                return undefined;
+            }
+            return this.groups().find((group) => group.id === groupId);
+        }, ...(ngDevMode ? [{ debugName: "activeGroup" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ---- Lifecycle Methods ----
+    async ngOnInit() {
+        await super.ngOnInit();
+        await this.loadPage();
+        this.bindProfileIdentityUpdates();
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), startWith(null), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            void this.syncGroupFromRoute();
+        });
+    }
+    //#endregion
+    //#region ---- Page Metadata ----
+    getPageTitle() {
+        return '';
+    }
+    getPageDescription() {
+        return null;
+    }
+    getPageIcon() {
+        return null;
+    }
+    //#endregion
+    //#region ---- UI Handlers ----
+    handleSelectGroup(group) {
+        const appName = this.sessionService.application?.name;
+        if (!appName) {
+            this.activeGroupId.set(group.id);
+            return;
+        }
+        void this.router.navigate([appName, 'profile', this.registry.resolveGroupRoute(group)]);
+    }
+    handleGroupTabChanged(event) {
+        const group = this.groups()[event.index];
+        if (!group || group.id === this.activeGroupId()) {
+            return;
+        }
+        this.handleSelectGroup(group);
+    }
+    handleEditAvatar() {
+        void this.executeCommand({
+            name: AXMAuthCommandKeys.Profile.ChangePhoto,
+            options: { mode: 'upload' },
+        }).then((result) => {
+            if (result?.success) {
+                void this.reloadProfileHeader();
+            }
+        });
+    }
+    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.shouldReloadSecuritySections(action.command.name)) {
+            await this.reloadSections();
+        }
+        if (result?.success && this.shouldReloadHealthSections(action.command.name)) {
+            await this.reloadSections();
+        }
+        if (result?.success && this.shouldRefreshProfileHeader(action.command.name)) {
+            await this.reloadProfileHeader();
+        }
+    }
+    visibleSectionActions(actions) {
+        return visibleUserProfileSectionActions(actions);
+    }
+    defaultSectionAction(actions) {
+        return resolveDefaultUserProfileSectionAction(actions);
+    }
+    resolveSectionContent(section) {
+        return resolveUserProfileSectionContent(section);
+    }
+    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, sections, header] = await Promise.all([
+                this.registry.loadGroups(),
+                this.registry.loadSections(),
+                this.headerService.load(),
+            ]);
+            this.groups.set(groups);
+            this.sections.set(sections);
+            this.header.set(header);
+            await this.syncGroupFromRoute();
+        }
+        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) {
+            const defaultGroup = this.registry.resolveDefaultGroup(groups);
+            if (defaultGroup && appName) {
+                await this.router.navigate([appName, 'profile', this.registry.resolveGroupRoute(defaultGroup)], {
+                    replaceUrl: true,
+                });
+            }
+            else if (defaultGroup) {
+                this.activeGroupId.set(defaultGroup.id);
+            }
+            return;
+        }
+        const matchedGroup = this.registry.resolveGroupByRoute(groups, routeSegment);
+        if (!matchedGroup) {
+            const defaultGroup = this.registry.resolveDefaultGroup(groups);
+            if (defaultGroup && appName) {
+                await this.router.navigate([appName, 'profile', this.registry.resolveGroupRoute(defaultGroup)], {
+                    replaceUrl: true,
+                });
+            }
+            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 reloadSections() {
+        const sections = await this.registry.loadSections();
+        this.sections.set(sections);
+    }
+    bindProfileIdentityUpdates() {
+        this.sessionService.user$
+            .pipe(filter((user) => !!user?.id), distinctUntilChanged((previous, current) => previous?.title === current?.title &&
+            previous?.name === current?.name &&
+            previous?.avatar === current?.avatar), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            void this.reloadProfileHeader();
+        });
+    }
+    async reloadProfileHeader() {
+        const userId = this.sessionService.user?.id;
+        if (userId) {
+            await this.identityService.refreshAvatar(userId);
+        }
+        const header = await this.headerService.load();
+        this.header.set(header);
+    }
+    shouldReloadSecuritySections(commandName) {
+        return (commandName === AXMAuthCommandKeys.Security.ChangePassword ||
+            commandName === AXMAuthCommandKeys.Session.OpenSessions);
+    }
+    shouldReloadHealthSections(commandName) {
+        return commandName.startsWith('HealthCore.Profile:');
+    }
+    shouldRefreshProfileHeader(commandName) {
+        return (commandName === AXMAuthCommandKeys.Profile.EditAccountInfo ||
+            commandName === AXMAuthCommandKeys.Profile.ChangePhoto ||
+            commandName.startsWith('HumanCapitalManagement.Profile:'));
+    }
+    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: "21.2.9", ngImport: i0, type: AXMUserProfilePageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMUserProfilePageComponent, isStandalone: true, selector: "axm-user-profile-page", host: { 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    <div class=\"__loading\">\n      <ax-loading></ax-loading>\n    </div>\n    } @else if (header(); as profileHeader) {\n    <div class=\"__shell\">\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        @if (groups().length) {\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      @if (activeGroup(); as group) {\n      @if (groupComponentContent(group); as componentContent) {\n      <div class=\"__group-content\">\n        <div axp-page-component-renderer [componentKey]=\"componentContent.componentKey\"\n          [pageConfig]=\"componentContent.pageConfig ?? {}\"></div>\n      </div>\n      } @else {\n      <div class=\"__sections\">\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 class=\"__section-insight\">\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 }}\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        @for (section of visibleSections(); 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      }\n    </div>\n    }\n  </axp-page-content>\n</axp-page-layout>", styles: ["@layer properties;.axm-user-profile-page #axp-page-header{display:none}.axm-user-profile-page axp-page-content{padding:0}.axm-user-profile-page .__loading{display:flex;min-height:calc(var(--spacing, .25rem) * 64);align-items:center;justify-content:center}.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 .__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}.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))}.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:block;width:calc(var(--spacing, .25rem) * 24);height:calc(var(--spacing, .25rem) * 24);overflow:hidden;border-radius:calc(infinity * 1px)}.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:0;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:0;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-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:0}.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:0;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:0;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-direction:column;gap:var(--spacing, .25rem);padding:0}.axm-user-profile-page .__section-insight{display:grid;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 minmax(0,1fr);column-gap:.625rem;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:0;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}@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.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.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$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i5.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { 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: i2.AXTranslatorDirective, selector: "[translate]" }, { 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: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "directive", type: AXPPageComponentRendererDirective, selector: "[axp-page-component-renderer]", inputs: ["componentKey", "rootContext", "pageConfig", "options"], outputs: ["componentReady"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMUserProfilePageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-user-profile-page', imports: [
+                        CommonModule,
+                        AsyncPipe,
+                        AXFormatPipe,
+                        RouterModule,
+                        AXDecoratorModule,
+                        AXButtonModule,
+                        AXDropdownModule,
+                        AXLoadingModule,
+                        AXTabsModule,
+                        AXPStickyDirective,
+                        AXTranslationModule,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXPUserAvatarComponent,
+                        AXPPageComponentRendererDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMUserProfilePageComponent,
+                        },
+                    ], host: { class: 'axm-user-profile-page' }, template: "<axp-page-layout *translate=\"let t\">\n  <axp-page-content>\n    @if (isLoading()) {\n    <div class=\"__loading\">\n      <ax-loading></ax-loading>\n    </div>\n    } @else if (header(); as profileHeader) {\n    <div class=\"__shell\">\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        @if (groups().length) {\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      @if (activeGroup(); as group) {\n      @if (groupComponentContent(group); as componentContent) {\n      <div class=\"__group-content\">\n        <div axp-page-component-renderer [componentKey]=\"componentContent.componentKey\"\n          [pageConfig]=\"componentContent.pageConfig ?? {}\"></div>\n      </div>\n      } @else {\n      <div class=\"__sections\">\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 class=\"__section-insight\">\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 }}\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        @for (section of visibleSections(); 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      }\n    </div>\n    }\n  </axp-page-content>\n</axp-page-layout>", styles: ["@layer properties;.axm-user-profile-page #axp-page-header{display:none}.axm-user-profile-page axp-page-content{padding:0}.axm-user-profile-page .__loading{display:flex;min-height:calc(var(--spacing, .25rem) * 64);align-items:center;justify-content:center}.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 .__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}.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))}.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:block;width:calc(var(--spacing, .25rem) * 24);height:calc(var(--spacing, .25rem) * 24);overflow:hidden;border-radius:calc(infinity * 1px)}.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:0;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:0;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-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:0}.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:0;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:0;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-direction:column;gap:var(--spacing, .25rem);padding:0}.axm-user-profile-page .__section-insight{display:grid;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 minmax(0,1fr);column-gap:.625rem;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:0;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}@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.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+export { AXMUserProfilePageComponent };
+//# sourceMappingURL=acorex-platform-module-auth-client-profile-page.component-tbhf7K0V.mjs.map