@acorex-platform/module-auth-client 0.0.38 → 0.0.48

package/fesm2022/acorex-platform-module-auth-client-welcome-onboarding-page.component-C2WYgv4l.mjs

@@ -0,0 +1,813 @@
+import * as i1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i2 from '@acorex/components/loading';
+import { AXLoadingModule } from '@acorex/components/loading';
+import * as i5 from '@acorex/core/translation';
+import { AXTranslationService, resolveMultiLanguageString, AXTranslationModule } from '@acorex/core/translation';
+import { AXPSessionService } from '@acorex-platform/framework-client/auth';
+import { AXPHomePageService, AXPPlatformBrandingService } from '@acorex-platform/framework-client/common';
+import { AXPLogoComponent } from '@acorex-platform/framework-client/core';
+import { AXPLayoutRendererComponent } from '@acorex-platform/framework-client/layout/builder';
+import { AXPUserAvatarComponent } from '@acorex-platform/framework-client/layout/components';
+import { getRegionalFontStylesheet, AXP_THEME_PALETTE_PROVIDER, AXPLayoutThemeService, AXPThemeLayoutSetting, AXPThemeMode, AXPMenuOrientation, AXPMenuVerticalMode } from '@acorex-platform/framework-client/themes/shared';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, signal, viewChild, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { u as AXPWelcomeOnboardingFlowService, E as AXPOnboardingProgressService } from './acorex-platform-module-auth-client-acorex-platform-module-auth-client-C1oSPf12.mjs';
+
+//#region ----- Scoped palette CSS -----
+const WELCOME_PALETTE_SCOPE = '.axp-welcome-onboarding';
+function normalizeHexColor(value) {
+    const raw = value.trim();
+    const withoutHash = raw.startsWith('#') ? raw.slice(1) : raw;
+    if (/^[0-9a-fA-F]{3}$/.test(withoutHash)) {
+        return withoutHash
+            .split('')
+            .map((char) => char + char)
+            .join('')
+            .toLowerCase();
+    }
+    if (/^[0-9a-fA-F]{6}$/.test(withoutHash)) {
+        return withoutHash.toLowerCase();
+    }
+    return undefined;
+}
+function hexToRgb(hex) {
+    return [
+        Number.parseInt(hex.slice(0, 2), 16),
+        Number.parseInt(hex.slice(2, 4), 16),
+        Number.parseInt(hex.slice(4, 6), 16),
+    ];
+}
+function rgbChannels([r, g, b]) {
+    return `${r}, ${g}, ${b}`;
+}
+function mixTowardWhite(hex, amount) {
+    const [r, g, b] = hexToRgb(hex);
+    return [
+        Math.round(r + (255 - r) * amount),
+        Math.round(g + (255 - g) * amount),
+        Math.round(b + (255 - b) * amount),
+    ];
+}
+function mixTowardBlack(hex, amount) {
+    const [r, g, b] = hexToRgb(hex);
+    const keep = 1 - amount;
+    return [Math.round(r * keep), Math.round(g * keep), Math.round(b * keep)];
+}
+function relativeLuminance(hex) {
+    const [r, g, b] = hexToRgb(hex).map((channel) => {
+        const scaled = channel / 255;
+        return scaled <= 0.03928 ? scaled / 12.92 : Math.pow((scaled + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function rgbToHex([r, g, b]) {
+    const toByte = (channel) => Math.max(0, Math.min(255, Math.round(channel)))
+        .toString(16)
+        .padStart(2, '0');
+    return `${toByte(r)}${toByte(g)}${toByte(b)}`;
+}
+function contrastForegroundHex(backgroundHex) {
+    return relativeLuminance(backgroundHex) > 0.55 ? '171717' : 'ffffff';
+}
+/**
+ * Maps palette primary hex to ax-sys primary tokens so ax-button and theme choosers
+ * inside the welcome host follow the preview palette (not the global app theme).
+ */
+function buildWelcomePaletteSysColorVars(primaryHex) {
+    const hex = normalizeHexColor(primaryHex);
+    if (!hex) {
+        return {};
+    }
+    const base = hexToRgb(hex);
+    const lighter = mixTowardWhite(hex, 0.78);
+    const lightest = mixTowardWhite(hex, 0.9);
+    const darker = mixTowardBlack(hex, 0.14);
+    const border = mixTowardBlack(hex, 0.1);
+    const onPrimary = hexToRgb(contrastForegroundHex(hex));
+    const onLighter = hexToRgb(contrastForegroundHex(rgbToHex(lighter)));
+    const sys = {
+        '--ax-sys-color-primary-500': rgbChannels(base),
+        '--ax-sys-color-primary-600': rgbChannels(darker),
+        '--ax-sys-color-primary-50': rgbChannels(lightest),
+        '--ax-sys-color-primary-100': rgbChannels(lighter),
+        '--ax-sys-color-primary-lighter-surface': rgbChannels(lighter),
+        '--ax-sys-color-primary-surface': rgbChannels(base),
+        '--ax-sys-color-on-primary-surface': rgbChannels(onPrimary),
+        '--ax-sys-color-on-primary-lighter-surface': rgbChannels(onLighter),
+        '--ax-sys-color-border-primary-surface': rgbChannels(border),
+        '--ax-sys-color-border-primary-lighter-surface': rgbChannels(mixTowardWhite(hex, 0.45)),
+    };
+    /* ax-primary / primary-lighter-surface read --color-* aliases (often bound on :root). */
+    const aliases = {
+        '--color-primary': 'rgba(var(--ax-sys-color-primary-surface))',
+        '--color-on-primary': 'rgba(var(--ax-sys-color-on-primary-surface))',
+        '--color-border-primary': 'rgba(var(--ax-sys-color-border-primary-surface))',
+        '--color-primary-lighter': 'rgba(var(--ax-sys-color-primary-lighter-surface))',
+        '--color-on-primary-lighter': 'rgba(var(--ax-sys-color-on-primary-lighter-surface))',
+        '--color-border-primary-lighter': 'rgba(var(--ax-sys-color-border-primary-lighter-surface))',
+    };
+    return { ...sys, ...aliases };
+}
+/**
+ * Rewrites palette asset selectors so tokens apply under the welcome page host only.
+ */
+function scopeWelcomePaletteCss(css) {
+    return css.replace(/:root/g, WELCOME_PALETTE_SCOPE);
+}
+function welcomePaletteCssUrl(paletteName) {
+    const safeName = paletteName.trim().length > 0 ? paletteName.trim() : 'default';
+    return `/assets/themes/palettes/css/${safeName}.css`;
+}
+//#endregion
+
+//#region ----- Welcome confetti (canvas, no external package) -----
+const CONFETTI_COLORS = [
+    '#7c3aed',
+    '#2563eb',
+    '#0d9488',
+    '#eab308',
+    '#f97316',
+    '#ec4899',
+    '#22c55e',
+];
+const DURATION_MS = 4200;
+function prefersReducedMotion() {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return false;
+    }
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/** Runs a one-shot top-to-bottom confetti burst inside `host`. Returns a cleanup function. */
+function runWelcomeOnboardingConfetti(host) {
+    if (prefersReducedMotion()) {
+        return () => undefined;
+    }
+    const canvas = document.createElement('canvas');
+    canvas.className = 'axp-welcome-onboarding__confetti-canvas';
+    canvas.setAttribute('aria-hidden', 'true');
+    host.appendChild(canvas);
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        canvas.remove();
+        return () => undefined;
+    }
+    let width = 0;
+    let height = 0;
+    let rafId = 0;
+    let running = true;
+    const startedAt = performance.now();
+    const resize = () => {
+        const rect = host.getBoundingClientRect();
+        width = Math.max(1, Math.floor(rect.width));
+        height = Math.max(1, Math.floor(rect.height));
+        canvas.width = width;
+        canvas.height = height;
+        canvas.style.width = `${width}px`;
+        canvas.style.height = `${height}px`;
+    };
+    resize();
+    const onResize = () => resize();
+    window.addEventListener('resize', onResize);
+    const pieces = [];
+    const count = Math.min(160, Math.max(80, Math.floor(width / 6)));
+    for (let i = 0; i < count; i += 1) {
+        pieces.push({
+            x: Math.random() * width,
+            y: -20 - Math.random() * height * 0.35,
+            w: 6 + Math.random() * 6,
+            h: 10 + Math.random() * 8,
+            vx: (Math.random() - 0.5) * 2.4,
+            vy: 2.2 + Math.random() * 3.8,
+            rotation: Math.random() * Math.PI * 2,
+            spin: (Math.random() - 0.5) * 0.18,
+            color: CONFETTI_COLORS[i % CONFETTI_COLORS.length] ?? '#7c3aed',
+            opacity: 0.85 + Math.random() * 0.15,
+        });
+    }
+    const tick = (now) => {
+        if (!running) {
+            return;
+        }
+        const elapsed = now - startedAt;
+        ctx.clearRect(0, 0, width, height);
+        for (const piece of pieces) {
+            piece.x += piece.vx;
+            piece.y += piece.vy;
+            piece.vy += 0.06;
+            piece.vx *= 0.995;
+            piece.rotation += piece.spin;
+            const fade = elapsed > DURATION_MS - 900 ? Math.max(0, (DURATION_MS - elapsed) / 900) : piece.opacity;
+            ctx.save();
+            ctx.globalAlpha = fade * piece.opacity;
+            ctx.translate(piece.x, piece.y);
+            ctx.rotate(piece.rotation);
+            ctx.fillStyle = piece.color;
+            ctx.fillRect(-piece.w / 2, -piece.h / 2, piece.w, piece.h);
+            ctx.restore();
+        }
+        if (elapsed >= DURATION_MS) {
+            running = false;
+            cleanup();
+            return;
+        }
+        rafId = requestAnimationFrame(tick);
+    };
+    const cleanup = () => {
+        running = false;
+        if (rafId) {
+            cancelAnimationFrame(rafId);
+        }
+        window.removeEventListener('resize', onResize);
+        canvas.remove();
+    };
+    rafId = requestAnimationFrame(tick);
+    return cleanup;
+}
+//#endregion
+
+//#region ----- Constants -----
+const FONT_SIZE_KEYWORDS = new Set(['small', 'medium', 'large', 'x-large']);
+const DEFAULT_FONT_FAMILY = 'system-ui';
+const DEFAULT_FONT_SIZE = 'medium';
+const FONT_FALLBACK = 'Tahoma, system-ui, sans-serif';
+//#endregion
+//#region ----- Helpers -----
+function resolveWelcomePreviewFontFamily(value) {
+    return typeof value === 'string' && value.trim().length > 0 ? value.trim() : DEFAULT_FONT_FAMILY;
+}
+function resolveWelcomePreviewFontSize(value) {
+    return typeof value === 'string' && FONT_SIZE_KEYWORDS.has(value) ? value : DEFAULT_FONT_SIZE;
+}
+/** Same CSS family contract as theme.service (`resolveFontCssFamily`). */
+function resolveWelcomeFontCssFamily(fontId) {
+    if (fontId === 'system-ui') {
+        return `system-ui, ${FONT_FALLBACK}`;
+    }
+    if (fontId === 'tahoma') {
+        return 'Tahoma, system-ui, sans-serif';
+    }
+    return `"${fontId}", ${FONT_FALLBACK}`;
+}
+function resolveWelcomeFontVariationSettings(fontId) {
+    if (fontId === 'iranyekanx') {
+        return '"dots" 1';
+    }
+    return undefined;
+}
+function buildWelcomeTypographyStyle(fontId, fontSize) {
+    const variation = resolveWelcomeFontVariationSettings(fontId);
+    const style = {
+        fontFamily: resolveWelcomeFontCssFamily(fontId),
+        fontSize,
+    };
+    if (variation) {
+        style['fontVariationSettings'] = variation;
+    }
+    return style;
+}
+function ensureWelcomeFontStylesLoaded(fontId) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const href = getRegionalFontStylesheet(fontId);
+    if (!href) {
+        return;
+    }
+    const selector = `link[data-axp-regional-font="${href}"]`;
+    if (document.head.querySelector(selector)) {
+        return;
+    }
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    link.setAttribute('data-axp-regional-font', href);
+    document.head.appendChild(link);
+}
+function applyWelcomeTypographyToHtml(fontId, fontSize) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const html = document.documentElement;
+    html.style.fontFamily = resolveWelcomeFontCssFamily(fontId);
+    html.style.fontVariationSettings = resolveWelcomeFontVariationSettings(fontId) ?? '';
+    html.style.fontSize = fontSize;
+}
+//#endregion
+
+//#endregion
+//#region ----- Welcome onboarding page -----
+class AXPAuthWelcomeOnboardingPageComponent {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.flowService = inject(AXPWelcomeOnboardingFlowService);
+        this.progressService = inject(AXPOnboardingProgressService);
+        this.sessionService = inject(AXPSessionService);
+        this.homePageService = inject(AXPHomePageService);
+        this.platformBranding = inject(AXPPlatformBrandingService);
+        this.route = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.paletteProvider = inject(AXP_THEME_PALETTE_PROVIDER);
+        this.themeService = inject(AXPLayoutThemeService);
+        this.translationService = inject(AXTranslationService);
+        this.destroyRef = inject(DestroyRef);
+        //#endregion
+        //#region ----- State Signals -----
+        this.palettes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "palettes" }] : /* istanbul ignore next */ []));
+        this.systemPrefersDark = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "systemPrefersDark" }] : /* istanbul ignore next */ []));
+        this.loading = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.platformTitle = signal('ACoreX', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "platformTitle" }] : /* istanbul ignore next */ []));
+        this.steps = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        this.stepIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepIndex" }] : /* istanbul ignore next */ []));
+        this.formContext = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formContext" }] : /* istanbul ignore next */ []));
+        this.finishOutcome = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "finishOutcome" }] : /* istanbul ignore next */ []));
+        this.busy = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.backdropLayerA = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backdropLayerA" }] : /* istanbul ignore next */ []));
+        this.backdropLayerB = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backdropLayerB" }] : /* istanbul ignore next */ []));
+        this.activeBackdropLayer = signal('a', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeBackdropLayer" }] : /* istanbul ignore next */ []));
+        this.previewTaskSkeletonRows = [0, 1, 2];
+        this.formScrollHost = viewChild('formScrollHost', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formScrollHost" }] : /* istanbul ignore next */ []));
+        this.confettiHost = viewChild('confettiHost', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "confettiHost" }] : /* istanbul ignore next */ []));
+        this.sessionContext = null;
+        this.forcePlan = false;
+        this.backdropCrossfadeKey = '';
+        this.paletteStyleEl = null;
+        this.paletteLoadToken = 0;
+        this.confettiRanForOutcome = null;
+        this.stopConfetti = null;
+        //#endregion
+        //#region ----- Computed Properties -----
+        this.currentStep = computed(() => {
+            const list = this.steps();
+            const index = this.stepIndex();
+            return list[index] ?? null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+        this.isFirstStep = computed(() => this.stepIndex() === 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFirstStep" }] : /* istanbul ignore next */ []));
+        this.isLastStep = computed(() => {
+            const list = this.steps();
+            return list.length > 0 && this.stepIndex() === list.length - 1;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLastStep" }] : /* istanbul ignore next */ []));
+        this.stepLayout = computed(() => {
+            const step = this.currentStep();
+            if (!step || this.finishOutcome()) {
+                return undefined;
+            }
+            return this.flowService.buildStepLayout(step);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepLayout" }] : /* istanbul ignore next */ []));
+        this.showAppearancePreview = computed(() => this.currentStep()?.id === 'welcome-appearance', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showAppearancePreview" }] : /* istanbul ignore next */ []));
+        this.showTypographyPreview = computed(() => this.currentStep()?.id === 'welcome-typography', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTypographyPreview" }] : /* istanbul ignore next */ []));
+        this.showProfileAvatar = computed(() => this.currentStep()?.id === 'profile-basics', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showProfileAvatar" }] : /* istanbul ignore next */ []));
+        this.previewOrganizationTitle = computed(() => {
+            const tenant = this.sessionService.tenant;
+            const locale = this.translationService.getActiveLang();
+            const fromTitle = tenant?.title
+                ? resolveMultiLanguageString(tenant.title, locale).trim()
+                : '';
+            if (fromTitle.length > 0) {
+                return fromTitle;
+            }
+            const name = tenant?.name?.trim();
+            if (name) {
+                return name;
+            }
+            return this.platformTitle();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewOrganizationTitle" }] : /* istanbul ignore next */ []));
+        this.orbIconClass = computed(() => {
+            switch (this.currentStep()?.id) {
+                case 'welcome-intro':
+                    return 'fa-solid fa-earth-americas';
+                case 'welcome-appearance':
+                    return 'fa-solid fa-palette';
+                case 'welcome-navigation':
+                    return 'fa-solid fa-table-columns';
+                case 'welcome-typography':
+                    return 'fa-solid fa-font';
+                case 'profile-basics':
+                    return 'fa-solid fa-user';
+                case 'whs-orientation':
+                    return 'fa-solid fa-shield-check';
+                default:
+                    return 'fa-solid fa-sparkles';
+            }
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orbIconClass" }] : /* istanbul ignore next */ []));
+        this.doneOrbIconClass = 'fa-solid fa-check';
+        this.previewPaletteName = computed(() => {
+            const palette = this.formContext()[AXPThemeLayoutSetting.Palette];
+            return typeof palette === 'string' && palette.length > 0 ? palette : 'default';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewPaletteName" }] : /* istanbul ignore next */ []));
+        this.previewResolvedDark = computed(() => {
+            const mode = this.formContext()[AXPThemeLayoutSetting.Mode];
+            if (mode === AXPThemeMode.Dark) {
+                return true;
+            }
+            if (mode === AXPThemeMode.Light) {
+                return false;
+            }
+            return this.systemPrefersDark();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewResolvedDark" }] : /* istanbul ignore next */ []));
+        this.previewSurfaceStyle = computed(() => {
+            const name = this.previewPaletteName();
+            const list = this.palettes();
+            const match = list.find((item) => item.name === name) ??
+                list.find((item) => item.name === 'default') ??
+                list[0];
+            const colors = match?.colors;
+            const isDark = this.previewResolvedDark();
+            const primary = colors?.primary ?? '#237f6a';
+            const secondary = colors?.secondary ?? '#4b9e8f';
+            const accent = colors?.accents?.[0] ?? secondary ?? '#7fc6b5';
+            const lightSurface = colors?.light ?? '#f2f5f7';
+            const darkSurface = colors?.dark ?? '#1a1f1e';
+            const surface = isDark ? darkSurface : lightSurface;
+            return {
+                ...buildWelcomePaletteSysColorVars(primary),
+                '--axp-welcome-preview-primary': primary,
+                '--axp-welcome-preview-secondary': secondary,
+                '--axp-welcome-preview-surface': surface,
+                '--axp-welcome-preview-accent': accent,
+                '--axp-welcome-preview-panel': isDark
+                    ? `color-mix(in srgb, ${surface} 88%, white 6%)`
+                    : '#ffffff',
+                '--axp-welcome-preview-card': isDark
+                    ? `color-mix(in srgb, ${surface} 72%, white 12%)`
+                    : '#ffffff',
+                '--axp-welcome-preview-text': isDark ? '#e3eee9' : `color-mix(in srgb, ${primary} 70%, black)`,
+                '--axp-welcome-preview-muted': isDark ? '#b5c7bf' : '#64736f',
+                '--axp-welcome-preview-border': isDark
+                    ? `color-mix(in srgb, ${surface} 55%, white 14%)`
+                    : '#fdfdfd',
+                '--axp-welcome-page-glow-start': isDark
+                    ? `color-mix(in srgb, ${accent} 38%, ${surface} 62%)`
+                    : `color-mix(in srgb, ${accent} 52%, white 48%)`,
+                '--axp-welcome-page-glow-end': isDark
+                    ? `color-mix(in srgb, ${secondary} 42%, ${surface} 58%)`
+                    : `color-mix(in srgb, ${secondary} 38%, white 62%)`,
+                '--axp-welcome-page-base': isDark
+                    ? `color-mix(in srgb, ${surface} 94%, black 6%)`
+                    : `color-mix(in srgb, ${lightSurface} 86%, ${accent} 14%)`,
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewSurfaceStyle" }] : /* istanbul ignore next */ []));
+        this.previewFontFamily = computed(() => resolveWelcomePreviewFontFamily(this.formContext()[AXPThemeLayoutSetting.Font]), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewFontFamily" }] : /* istanbul ignore next */ []));
+        this.previewFontSize = computed(() => resolveWelcomePreviewFontSize(this.formContext()[AXPThemeLayoutSetting.FontSize]), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewFontSize" }] : /* istanbul ignore next */ []));
+        this.previewTypographyStyle = computed(() => buildWelcomeTypographyStyle(this.previewFontFamily(), this.previewFontSize()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewTypographyStyle" }] : /* istanbul ignore next */ []));
+        this.previewHostStyle = computed(() => ({
+            ...this.previewSurfaceStyle(),
+            ...this.previewTypographyStyle(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewHostStyle" }] : /* istanbul ignore next */ []));
+        //#region ----- Confetti (completion) -----
+        this.completionConfettiEffect = effect(() => {
+            const outcome = this.finishOutcome();
+            if (!outcome || outcome !== 'completed') {
+                return;
+            }
+            if (this.confettiRanForOutcome === outcome) {
+                return;
+            }
+            queueMicrotask(() => {
+                const host = this.confettiHost()?.nativeElement;
+                if (!host || this.confettiRanForOutcome === 'completed') {
+                    return;
+                }
+                this.confettiRanForOutcome = outcome;
+                this.stopConfetti?.();
+                this.stopConfetti = runWelcomeOnboardingConfetti(host);
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "completionConfettiEffect" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Live typography (font + size) -----
+        this.typographyPreviewEffect = effect(() => {
+            if (this.loading()) {
+                return;
+            }
+            const family = this.previewFontFamily();
+            const size = this.previewFontSize();
+            ensureWelcomeFontStylesLoaded(family);
+            applyWelcomeTypographyToHtml(family, size);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "typographyPreviewEffect" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Scoped palette (buttons + surfaces) -----
+        this.scopedPaletteEffect = effect(() => {
+            const name = this.previewPaletteName();
+            const token = ++this.paletteLoadToken;
+            void this.loadScopedPaletteCss(name, token);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scopedPaletteEffect" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Backdrop crossfade -----
+        this.backdropCrossfadeEffect = effect(() => {
+            const style = this.previewSurfaceStyle();
+            const key = JSON.stringify(style);
+            if (key === this.backdropCrossfadeKey) {
+                return;
+            }
+            if (!this.backdropCrossfadeKey) {
+                this.backdropCrossfadeKey = key;
+                this.backdropLayerA.set(style);
+                this.backdropLayerB.set(style);
+                this.activeBackdropLayer.set('a');
+                return;
+            }
+            this.backdropCrossfadeKey = key;
+            if (this.activeBackdropLayer() === 'a') {
+                this.backdropLayerB.set(style);
+                this.activeBackdropLayer.set('b');
+                return;
+            }
+            this.backdropLayerA.set(style);
+            this.activeBackdropLayer.set('a');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backdropCrossfadeEffect" }] : /* istanbul ignore next */ []));
+        //#endregion
+        this.previewMenuHorizontal = computed(() => {
+            const value = this.formContext()[AXPThemeLayoutSetting.MenuOrientation];
+            return value === AXPMenuOrientation.Horizontal;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewMenuHorizontal" }] : /* istanbul ignore next */ []));
+        this.previewMenuCompact = computed(() => {
+            const value = this.formContext()[AXPThemeLayoutSetting.MenuVerticalMode];
+            return value === AXPMenuVerticalMode.Compact;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewMenuCompact" }] : /* istanbul ignore next */ []));
+        this.previewHeaderColored = computed(() => {
+            const value = this.formContext()[AXPThemeLayoutSetting.HeaderAppearance];
+            return value !== 'simple';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "previewHeaderColored" }] : /* istanbul ignore next */ []));
+    }
+    get user() {
+        return this.sessionService.user;
+    }
+    //#endregion
+    //#region ----- Lifecycle -----
+    async ngOnInit() {
+        const title = await this.platformBranding.resolvePlatformTitle().catch(() => '');
+        this.platformTitle.set(title || 'ACoreX');
+        this.forcePlan =
+            this.route.snapshot.queryParamMap.get('force') === '1' ||
+                this.route.snapshot.queryParamMap.get('force') === 'true';
+        const provider = await this.paletteProvider;
+        this.palettes.set(await provider.getList());
+        this.bindSystemColorSchemeListener();
+        this.destroyRef.onDestroy(() => {
+            this.paletteStyleEl?.remove();
+            this.paletteStyleEl = null;
+            this.stopConfetti?.();
+            this.stopConfetti = null;
+            void this.themeService.loadSettings();
+            const step = this.currentStep();
+            if (step && this.sessionContext && !this.finishOutcome()) {
+                this.flowService.setResumeState(this.sessionContext, step.id);
+            }
+        });
+        await this.bootstrap();
+    }
+    //#endregion
+    //#region ----- Palette CSS loading -----
+    async loadScopedPaletteCss(paletteName, token) {
+        const candidates = [paletteName, 'default'].filter((name, index, list) => name.trim().length > 0 && list.indexOf(name) === index);
+        let cssText = null;
+        for (const name of candidates) {
+            try {
+                const response = await fetch(welcomePaletteCssUrl(name));
+                if (response.ok) {
+                    cssText = await response.text();
+                    break;
+                }
+            }
+            catch {
+                /* try next candidate */
+            }
+        }
+        if (token !== this.paletteLoadToken || !cssText) {
+            return;
+        }
+        if (!this.paletteStyleEl) {
+            this.paletteStyleEl = document.createElement('style');
+            this.paletteStyleEl.setAttribute('data-welcome-onboarding-palette', '');
+            document.head.appendChild(this.paletteStyleEl);
+        }
+        this.paletteStyleEl.setAttribute('data-welcome-onboarding-palette', paletteName);
+        this.paletteStyleEl.textContent = scopeWelcomePaletteCss(cssText);
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
+    onFormContextChange(next) {
+        const host = this.formScrollHost()?.nativeElement;
+        const scrollTop = host?.scrollTop ?? 0;
+        this.formContext.set(next);
+        if (!host) {
+            return;
+        }
+        const restoreScroll = () => {
+            host.scrollTop = scrollTop;
+        };
+        queueMicrotask(restoreScroll);
+        requestAnimationFrame(restoreScroll);
+    }
+    async goToStep(index) {
+        const list = this.steps();
+        if (index < 0 || index >= list.length) {
+            return;
+        }
+        this.stepIndex.set(index);
+        const step = list[index];
+        if (step && this.sessionContext) {
+            this.flowService.setResumeState(this.sessionContext, step.id);
+        }
+    }
+    async previous() {
+        if (this.isFirstStep()) {
+            return;
+        }
+        this.stepIndex.update((i) => i - 1);
+    }
+    async next() {
+        const step = this.currentStep();
+        if (!step || !this.sessionContext || this.busy()) {
+            return;
+        }
+        if (this.isLastStep()) {
+            await this.complete('completed');
+            return;
+        }
+        this.busy.set(true);
+        try {
+            await this.flowService.savePreferences(this.formContext());
+            await this.flowService.markStep(step, this.sessionContext, 'completed');
+            const nextIndex = this.stepIndex() + 1;
+            this.stepIndex.set(nextIndex);
+            const nextStep = this.steps()[nextIndex];
+            if (nextStep) {
+                this.flowService.setResumeState(this.sessionContext, nextStep.id);
+            }
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    async skipAll() {
+        if (this.busy() || !this.sessionContext) {
+            return;
+        }
+        this.busy.set(true);
+        try {
+            await this.flowService.savePreferences(this.formContext());
+            await this.flowService.markSteps(this.steps(), this.sessionContext, 'skipped');
+            this.flowService.clearResumeState();
+            await this.enterWorkspace();
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    async remindLater() {
+        if (this.busy()) {
+            return;
+        }
+        this.busy.set(true);
+        try {
+            await this.flowService.savePreferences(this.formContext());
+            await this.flowService.setRemindLater();
+            await this.enterWorkspace();
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    async enterWorkspace() {
+        const urlTree = await this.homePageService.resolveAuthorizedHomeUrlTree();
+        await this.router.navigateByUrl(urlTree);
+    }
+    async reviewSettings() {
+        this.finishOutcome.set(null);
+        this.stepIndex.set(0);
+    }
+    stepArtCaptionKey(step) {
+        if (!step) {
+            return '@auth:welcome-onboarding.page.art.default-caption';
+        }
+        return `@auth:welcome-onboarding.page.art.${step.id}`;
+    }
+    //#endregion
+    //#region ----- Private logic -----
+    bindSystemColorSchemeListener() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        this.systemPrefersDark.set(media.matches);
+        const onChange = (event) => {
+            this.systemPrefersDark.set(event.matches);
+        };
+        media.addEventListener('change', onChange);
+        this.destroyRef.onDestroy(() => media.removeEventListener('change', onChange));
+    }
+    async bootstrap() {
+        this.loading.set(true);
+        try {
+            let pending = await this.flowService.evaluatePending(this.forcePlan);
+            if (!pending && this.flowService.hasActiveResumeState()) {
+                pending = await this.flowService.evaluatePending(true);
+            }
+            if (!pending) {
+                await this.enterWorkspace();
+                return;
+            }
+            this.sessionContext = pending.context;
+            this.steps.set(pending.steps);
+            const preferences = await this.flowService.loadPreferenceContext();
+            this.formContext.set(preferences);
+            const progress = await this.progressService.getProgress();
+            let startIndex = 0;
+            if (this.flowService.hasActiveResumeState()) {
+                startIndex = this.flowService.resolveResumeStepIndex(pending.context, pending.steps);
+            }
+            else if (this.forcePlan) {
+                startIndex = 0;
+            }
+            else {
+                startIndex = this.flowService.resolveFirstIncompleteStepIndex(pending.steps, pending.context, progress);
+            }
+            this.stepIndex.set(startIndex);
+            const resumeStep = pending.steps[startIndex];
+            if (resumeStep) {
+                this.flowService.setResumeState(pending.context, resumeStep.id);
+            }
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    async complete(status) {
+        if (this.busy() || !this.sessionContext) {
+            return;
+        }
+        this.busy.set(true);
+        try {
+            await this.flowService.savePreferences(this.formContext());
+            const step = this.currentStep();
+            if (step) {
+                await this.flowService.markStep(step, this.sessionContext, 'completed');
+            }
+            this.flowService.clearResumeState();
+            this.finishOutcome.set(status);
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPAuthWelcomeOnboardingPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPAuthWelcomeOnboardingPageComponent, isStandalone: true, selector: "axp-auth-welcome-onboarding-page", viewQueries: [{ propertyName: "formScrollHost", first: true, predicate: ["formScrollHost"], descendants: true, isSignal: true }, { propertyName: "confettiHost", first: true, predicate: ["confettiHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"axp-welcome-onboarding\"\n  [class.ax-light]=\"!previewResolvedDark()\"\n  [class.ax-dark]=\"previewResolvedDark()\"\n  [ngStyle]=\"previewHostStyle()\"\n>\n  <div class=\"axp-welcome-onboarding__backdrop-stack\" aria-hidden=\"true\">\n    <div\n      class=\"axp-welcome-onboarding__backdrop\"\n      [class.axp-welcome-onboarding__backdrop--active]=\"activeBackdropLayer() === 'a'\"\n      [ngStyle]=\"backdropLayerA()\"\n    ></div>\n    <div\n      class=\"axp-welcome-onboarding__backdrop\"\n      [class.axp-welcome-onboarding__backdrop--active]=\"activeBackdropLayer() === 'b'\"\n      [ngStyle]=\"backdropLayerB()\"\n    ></div>\n  </div>\n\n  <div class=\"axp-welcome-onboarding__content\" #confettiHost>\n  <!-- ----- Full-page loading state ----- -->\n  @if (loading()) {\n    <div class=\"axp-welcome-onboarding__loading\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n  <!-- ----- Main onboarding shell ----- -->\n  @else {\n    <div\n      class=\"axp-welcome-onboarding__shell\"\n      [class.axp-welcome-onboarding__shell--appearance]=\"showAppearancePreview()\"\n      [class.axp-welcome-onboarding__shell--typography]=\"showTypographyPreview()\"\n      [ngStyle]=\"previewHostStyle()\"\n    >\n      <header class=\"axp-welcome-onboarding__header\">\n        <div class=\"axp-welcome-onboarding__brand\">\n          <axp-logo\n            logoKey=\"platform\"\n            appearance=\"onLight\"\n            format=\"full\"\n            [size]=\"220\"\n            [attr.alt]=\"platformTitle()\"\n          ></axp-logo>\n        </div>\n        <div class=\"axp-welcome-onboarding__step-counter\">\n          <!-- ----- Step counter in the header ----- -->\n          @if (!finishOutcome() && currentStep(); as step) {\n            <span>\n              {{\n                '@auth:welcome-onboarding.page.step-counter'\n                  | translate: { params: { current: stepIndex() + 1, total: steps().length } }\n                  | async\n              }}\n              \u00B7 {{ step.title | translate | async }}\n            </span>\n          }\n          <!-- ----- Ready message after completion ----- -->\n          @else if (finishOutcome()) {\n            {{ '@auth:welcome-onboarding.page.ready-counter' | translate | async }}\n          }\n        </div>\n      </header>\n\n      <main class=\"axp-welcome-onboarding__main\">\n        <!-- ----- Completion screen ----- -->\n        @if (finishOutcome(); as outcome) {\n          <section class=\"axp-welcome-onboarding__done axp-welcome-onboarding__animate\">\n            <div\n              class=\"axp-welcome-onboarding__orb axp-welcome-onboarding__done-orb\"\n              [ngStyle]=\"previewSurfaceStyle()\"\n              aria-hidden=\"true\"\n            >\n              <i class=\"axp-welcome-onboarding__orb-icon\" [class]=\"doneOrbIconClass\"></i>\n            </div>\n            <h1 class=\"axp-welcome-onboarding__title\">\n              {{\n                ('@auth:welcome-onboarding.page.done.' + outcome + '.title') | translate | async\n              }}\n            </h1>\n            <p class=\"axp-welcome-onboarding__lead\">\n              {{\n                ('@auth:welcome-onboarding.page.done.' + outcome + '.description') | translate | async\n              }}\n            </p>\n            <div class=\"axp-welcome-onboarding__done-actions\">\n              <ax-button\n                look=\"solid\"\n                color=\"primary\"\n                [text]=\"'@auth:welcome-onboarding.page.actions.enter-workspace' | translate | async\"\n                [disabled]=\"busy()\"\n                (onClick)=\"enterWorkspace()\"\n              ></ax-button>\n              <!-- ----- Review settings after skip or defer ----- -->\n              @if (outcome !== 'completed') {\n                <ax-button\n                  look=\"outline\"\n                  color=\"default\"\n                  [text]=\"'@auth:welcome-onboarding.page.actions.review-settings' | translate | async\"\n                  [disabled]=\"busy()\"\n                  (onClick)=\"reviewSettings()\"\n                ></ax-button>\n              }\n            </div>\n          </section>\n        }\n        <!-- ----- Active step: form + art panel ----- -->\n        @else {\n          <section\n            #formScrollHost\n            class=\"axp-welcome-onboarding__form axp-welcome-onboarding__animate\"\n            [class.axp-welcome-onboarding__form--appearance]=\"showAppearancePreview()\"\n            [class.axp-welcome-onboarding__form--typography]=\"showTypographyPreview()\"\n            [class.axp-welcome-onboarding__form--menu-horizontal]=\"\n              showAppearancePreview() && previewMenuHorizontal()\n            \"\n          >\n            <!-- ----- Step form content when a step is active ----- -->\n            @if (currentStep(); as step) {\n              <h1 class=\"axp-welcome-onboarding__title\">\n                {{ ('@auth:welcome-onboarding.page.steps.' + step.id + '.headline') | translate | async }}\n              </h1>\n              <p class=\"axp-welcome-onboarding__lead\">\n                {{ ('@auth:welcome-onboarding.page.steps.' + step.id + '.lead') | translate | async }}\n              </p>\n\n              <!-- ----- Profile avatar on profile basics step ----- -->\n              @if (showProfileAvatar()) {\n                <div class=\"axp-welcome-onboarding__profile-row\">\n                  <axp-user-avatar\n                    [size]=\"74\"\n                    [userId]=\"user?.id!\"\n                    [showPresence]=\"false\"\n                  ></axp-user-avatar>\n                </div>\n              }\n\n              @if (stepLayout(); as layout) {\n                <axp-layout-renderer\n                  class=\"axp-welcome-onboarding__fields\"\n                  [layout]=\"layout\"\n                  [context]=\"formContext()\"\n                  (contextChange)=\"onFormContextChange($event)\"\n                ></axp-layout-renderer>\n              }\n\n              <p class=\"axp-welcome-onboarding__notice\">\n                {{ ('@auth:welcome-onboarding.page.steps.' + step.id + '.notice') | translate | async }}\n              </p>\n            }\n          </section>\n\n          <aside\n            class=\"axp-welcome-onboarding__art axp-welcome-onboarding__animate\"\n            [class.axp-welcome-onboarding__art--appearance]=\"showAppearancePreview()\"\n            [class.axp-welcome-onboarding__art--typography]=\"showTypographyPreview()\"\n            [ngStyle]=\"previewHostStyle()\"\n            aria-hidden=\"false\"\n          >\n            <div class=\"axp-welcome-onboarding__art-inner\">\n              <div class=\"axp-welcome-onboarding__art-visual\">\n                <!-- ----- Theme preview on appearance step ----- -->\n                @if (showAppearancePreview()) {\n                  <div\n                    class=\"axp-welcome-onboarding__preview\"\n                    [class.axp-welcome-onboarding__preview--dark]=\"previewResolvedDark()\"\n                    [ngStyle]=\"previewSurfaceStyle()\"\n                  >\n                    <div\n                      class=\"axp-welcome-onboarding__preview-head\"\n                      [class.axp-welcome-onboarding__preview-head--colored]=\"previewHeaderColored()\"\n                    >\n                      \u25CF \u25CF \u25CF &nbsp;&nbsp; {{ previewOrganizationTitle() }}\n                    </div>\n                    <div\n                      class=\"axp-welcome-onboarding__preview-body\"\n                      [class.axp-welcome-onboarding__preview-body--horizontal]=\"previewMenuHorizontal()\"\n                    >\n                      <!-- ----- Horizontal root menu skeleton ----- -->\n                      @if (previewMenuHorizontal()) {\n                        <div class=\"axp-welcome-onboarding__preview-hmenu\">\n                          <span class=\"axp-welcome-onboarding__preview-hmenu-brand\"></span>\n                          <span class=\"axp-welcome-onboarding__preview-hmenu-item\"></span>\n                          <span class=\"axp-welcome-onboarding__preview-hmenu-item\"></span>\n                          <span class=\"axp-welcome-onboarding__preview-hmenu-item axp-welcome-onboarding__preview-hmenu-item--short\"></span>\n                        </div>\n                      }\n                      <!-- ----- Vertical root menu skeleton ----- -->\n                      @else {\n                        <div\n                          class=\"axp-welcome-onboarding__preview-sidebar\"\n                          [class.axp-welcome-onboarding__preview-sidebar--compact]=\"previewMenuCompact()\"\n                        ></div>\n                      }\n                      <div class=\"axp-welcome-onboarding__preview-blocks\">\n                        <strong>{{ previewOrganizationTitle() }}</strong>\n                        <div class=\"axp-welcome-onboarding__preview-dashboard\">\n                          <div class=\"axp-welcome-onboarding__preview-widget-row\">\n                            <div class=\"axp-welcome-onboarding__preview-widget axp-welcome-onboarding__preview-widget--clock\">\n                              <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--clock\"></span>\n                              <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line-lg\"></span>\n                              <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line-sm\"></span>\n                            </div>\n                            <div class=\"axp-welcome-onboarding__preview-mini-cards\">\n                              <span class=\"axp-welcome-onboarding__preview-mini-card\">\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--dot\"></span>\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line-xs\"></span>\n                              </span>\n                              <span class=\"axp-welcome-onboarding__preview-mini-card\">\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--dot\"></span>\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line-xs\"></span>\n                              </span>\n                              <span class=\"axp-welcome-onboarding__preview-mini-card axp-welcome-onboarding__preview-mini-card--wide\">\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line-xs\"></span>\n                              </span>\n                            </div>\n                          </div>\n                          <div class=\"axp-welcome-onboarding__preview-tasks\">\n                            <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--title\"></span>\n                            @for (row of previewTaskSkeletonRows; track row) {\n                              <div class=\"axp-welcome-onboarding__preview-task-row\">\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--check\"></span>\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line\"></span>\n                              </div>\n                            }\n                          </div>\n                          <div class=\"axp-welcome-onboarding__preview-chart\"></div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- ----- Live type specimen on typography step ----- -->\n                @else if (showTypographyPreview()) {\n                  <div\n                    class=\"axp-welcome-onboarding__type-preview\"\n                    [ngStyle]=\"previewHostStyle()\"\n                  >\n                    <span class=\"axp-welcome-onboarding__type-preview-sample\">\n                      {{ '@auth:welcome-onboarding.page.typography-preview.sample' | translate | async }}\n                    </span>\n                    <strong class=\"axp-welcome-onboarding__type-preview-heading\">\n                      {{ '@auth:welcome-onboarding.page.typography-preview.heading' | translate | async }}\n                    </strong>\n                    <p class=\"axp-welcome-onboarding__type-preview-body\">\n                      {{ '@auth:welcome-onboarding.page.typography-preview.body' | translate | async }}\n                    </p>\n                  </div>\n                }\n                <!-- ----- Decorative orb on other steps ----- -->\n                @else {\n                  <div class=\"axp-welcome-onboarding__orb\" [ngStyle]=\"previewSurfaceStyle()\">\n                    <i class=\"axp-welcome-onboarding__orb-icon\" [class]=\"orbIconClass()\" aria-hidden=\"true\"></i>\n                  </div>\n                }\n              </div>\n\n              <div class=\"axp-welcome-onboarding__art-caption\">\n                <strong>{{ stepArtCaptionKey(currentStep()) | translate | async }}</strong>\n              </div>\n\n              <div class=\"axp-welcome-onboarding__dots\" role=\"tablist\">\n                @for (step of steps(); track step.id; let i = $index) {\n                  <button\n                    type=\"button\"\n                    class=\"axp-welcome-onboarding__dot\"\n                    [class.axp-welcome-onboarding__dot--on]=\"stepIndex() === i\"\n                    [attr.aria-label]=\"step.title | translate | async\"\n                    [attr.aria-selected]=\"stepIndex() === i\"\n                    (click)=\"goToStep(i)\"\n                  ></button>\n                }\n              </div>\n            </div>\n          </aside>\n        }\n      </main>\n\n      <!-- ----- Footer actions while steps are active ----- -->\n      @if (!finishOutcome()) {\n        <footer class=\"axp-welcome-onboarding__footer\">\n          <div class=\"axp-welcome-onboarding__footer-start\">\n            <ax-button\n              look=\"twotone\"\n              color=\"default\"\n              [text]=\"'@auth:welcome-onboarding.actions.skip-all' | translate | async\"\n              [disabled]=\"busy()\"\n              (onClick)=\"skipAll()\"\n            ></ax-button>\n            <ax-button\n              look=\"twotone\"\n              color=\"default\"\n              [text]=\"'@auth:welcome-onboarding.actions.remind-later' | translate | async\"\n              [disabled]=\"busy()\"\n              (onClick)=\"remindLater()\"\n            ></ax-button>\n          </div>\n          <div class=\"axp-welcome-onboarding__footer-end\">\n            <!-- ----- Previous step ----- -->\n            @if (!isFirstStep()) {\n              <ax-button\n                look=\"blank\"\n                color=\"default\"\n                [text]=\"'@auth:welcome-onboarding.actions.previous' | translate | async\"\n                [disabled]=\"busy()\"\n                (onClick)=\"previous()\"\n              ></ax-button>\n            }\n            <ax-button\n              look=\"solid\"\n              color=\"primary\"\n              [text]=\"\n                (isLastStep()\n                  ? '@auth:welcome-onboarding.actions.finish'\n                  : '@auth:welcome-onboarding.actions.next'\n                )\n                  | translate\n                  | async\n              \"\n              [disabled]=\"busy()\"\n              (onClick)=\"next()\"\n            ></ax-button>\n          </div>\n        </footer>\n      }\n    </div>\n  }\n  </div>\n</div>\n", styles: ["@layer properties;.axp-welcome-onboarding{--axp-welcome-shell-height: min(42rem, calc(100dvh - 2.5rem) );--axp-welcome-backdrop-duration: .75s;position:relative;box-sizing:border-box;overflow:hidden;height:100dvh;max-height:100dvh;background:var(--axp-welcome-page-base, rgb(var(--ax-sys-color-lighter-surface, 239 244 247)));transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}.axp-welcome-onboarding__backdrop-stack{pointer-events:none;position:absolute;inset:0;z-index:0;overflow:hidden}.axp-welcome-onboarding__backdrop{position:absolute;inset:0;opacity:0%;background:radial-gradient(ellipse at 15% 90%,var(--axp-welcome-page-glow-start, #b2ded8) 0%,transparent 55%),radial-gradient(ellipse at 90% 5%,var(--axp-welcome-page-glow-end, #d1e1fc) 0%,transparent 55%),var(--axp-welcome-page-base, #eff4f7);transition:opacity var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1);will-change:opacity}.axp-welcome-onboarding__backdrop--active{opacity:100%}.axp-welcome-onboarding__content{position:relative;z-index:10;display:flex;height:100%;min-height:0px;width:100%;align-items:center;justify-content:center;overflow:hidden;padding:calc(var(--spacing, .25rem) * 3)}@media(width>=48rem){.axp-welcome-onboarding__content{padding:calc(var(--spacing, .25rem) * 6)}}.axp-welcome-onboarding__confetti-canvas{pointer-events:none;position:absolute;inset:0;z-index:20}.axp-welcome-onboarding__loading{display:flex;min-height:40vh;align-items:center;justify-content:center}.axp-welcome-onboarding__shell{display:flex;width:100%;max-width:72.5rem;flex-shrink:0;flex-direction:column;overflow:hidden;border-radius:var(--radius-2xl, 1rem);--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / .25));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);height:var(--axp-welcome-shell-height);min-height:var(--axp-welcome-shell-height);max-height:var(--axp-welcome-shell-height);border:1px solid rgb(var(--ax-sys-color-primary-500, 17 59 83));background:rgb(var(--ax-sys-color-lightest-surface, 255 255 255));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1),border-color var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__shell{border:1px solid color-mix(in srgb,rgb(var(--ax-sys-color-primary-500, 17 59 83)) 12%,rgb(var(--ax-sys-color-border-lightest-surface, 255 255 255)))}}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__shell{background:color-mix(in srgb,rgb(var(--ax-sys-color-lightest-surface, 255 255 255)) 88%,rgb(var(--ax-sys-color-primary-50, 241 245 249)) 12%)}}.axp-welcome-onboarding.ax-dark .axp-welcome-onboarding__shell{background:rgb(var(--ax-sys-color-darkest-surface, 33 37 41));border-color:rgb(var(--ax-sys-color-primary-500, 98 71 170))}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding.ax-dark .axp-welcome-onboarding__shell{background:color-mix(in srgb,rgb(var(--ax-sys-color-darkest-surface, 33 37 41)) 92%,rgb(var(--ax-sys-color-primary-900, 17 59 83)) 8%)}}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding.ax-dark .axp-welcome-onboarding__shell{border-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500, 98 71 170)) 18%,rgb(var(--ax-sys-color-border-darker-surface, 60 60 60)))}}.axp-welcome-onboarding__header{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.axp-welcome-onboarding__header{padding-inline:calc(var(--spacing, .25rem) * 8)}}.axp-welcome-onboarding__brand{flex-shrink:0}.axp-welcome-onboarding__brand axp-logo{width:min(14rem,42vw);max-width:100%}.axp-welcome-onboarding__step-counter{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-welcome-onboarding__main{display:grid;min-height:0px;flex:1;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-rows:repeat(1,minmax(0,1fr));overflow:hidden}@media(width>=48rem){.axp-welcome-onboarding__main{grid-template-columns:repeat(2,minmax(0,1fr))}}.axp-welcome-onboarding__form{display:flex;height:100%;min-height:0px;flex-direction:column;overflow-y:auto;padding-inline:calc(var(--spacing, .25rem) * 5);padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.axp-welcome-onboarding__form{padding-right:calc(var(--spacing, .25rem) * 8)}}@media(width>=48rem){.axp-welcome-onboarding__form{padding-left:calc(var(--spacing, .25rem) * 10)}}.axp-welcome-onboarding__form--appearance{overflow-x:hidden;overflow-y:auto;overflow-anchor:none}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}@media(width>=48rem){.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__title{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)))}}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__lead{margin-bottom:calc(var(--spacing, .25rem) * 3);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6)}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__notice{margin-top:calc(var(--spacing, .25rem) * 2);flex-shrink:0}.axp-welcome-onboarding__form--menu-horizontal .axp-welcome-onboarding__fields axp-flex-widget-view>axp-form-field-widget-view:nth-child(4){display:none!important}.axp-welcome-onboarding__eyebrow{margin:0;margin-bottom:calc(var(--spacing, .25rem) * 2);flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--axp-welcome-preview-primary, var(--ax-color-primary))}.axp-welcome-onboarding__title{margin:0;margin-bottom:calc(var(--spacing, .25rem) * 2);flex-shrink:0;font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(width>=48rem){.axp-welcome-onboarding__title{font-size:var(--text-3xl, 1.875rem);line-height:var(--tw-leading, var(--text-3xl--line-height, 1.2 ))}}.axp-welcome-onboarding__lead{margin:0;margin-bottom:calc(var(--spacing, .25rem) * 4);flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 7);line-height:calc(var(--spacing, .25rem) * 7);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-welcome-onboarding__notice{margin-top:calc(var(--spacing, .25rem) * 3);flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-welcome-onboarding__profile-row{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.axp-welcome-onboarding__fields{width:100%;flex-shrink:0}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__fields :is(axp-theme-palette-chooser-widget-component,ng-component:has(>div>span+div)){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;align-content:start}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__fields :is(axp-theme-palette-chooser-widget-component,ng-component:has(>div>span+div))>div{min-width:0!important;height:2.75rem!important;padding:.35rem .65rem!important}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__fields :is(axp-theme-palette-chooser-widget-component,ng-component:has(>div>span+div))>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__fields :is(axp-theme-palette-chooser-widget-component,ng-component:has(>div>span+div))>div>div div{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6)}.axp-welcome-onboarding__art{position:relative;display:none;height:100%;min-height:0px;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at center,var(--axp-welcome-preview-accent, #b2ded8),transparent 72%);transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}@media(width>=48rem){.axp-welcome-onboarding__art{display:flex}}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__art{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--axp-welcome-preview-accent, #b2ded8) 35%,transparent),transparent 72%)}}.axp-welcome-onboarding__art-inner{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;align-items:center;justify-content:space-between;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 6)}.axp-welcome-onboarding__art-visual{display:flex;min-height:0px;width:100%;flex:1;align-items:center;justify-content:center}.axp-welcome-onboarding__orb{display:grid;height:17rem;width:17rem;flex-shrink:0;place-items:center;border-radius:calc(infinity * 1px);background:radial-gradient(circle at 30% 25%,var(--axp-welcome-preview-accent, #dbfff8),var(--axp-welcome-preview-primary, var(--ax-color-primary-500)) 48%,var(--axp-welcome-preview-primary, #217c6f) 82%);box-shadow:inset -15px -15px 30px var(--axp-welcome-preview-primary, #145b63),0 32px 40px var(--axp-welcome-preview-primary, #347d72)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__orb{background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--axp-welcome-preview-accent, #dbfff8) 90%,white),var(--axp-welcome-preview-primary, var(--ax-color-primary-500)) 48%,color-mix(in srgb,var(--axp-welcome-preview-primary, #217c6f) 85%,black) 82%)}}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__orb{box-shadow:inset -15px -15px 30px color-mix(in srgb,var(--axp-welcome-preview-primary, #145b63) 25%,transparent),0 32px 40px color-mix(in srgb,var(--axp-welcome-preview-primary, #347d72) 22%,transparent)}}.axp-welcome-onboarding__orb-icon{font-size:7.25rem;--tw-leading: 1;line-height:1;color:var(--color-white, #fff);text-shadow:0 2px 12px rgb(0 0 0 / .18)}.axp-welcome-onboarding__type-preview{display:flex;width:100%;max-width:22rem;flex-direction:column;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-xl, .75rem);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 7);--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px 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:1px solid var(--axp-welcome-preview-border, #fdfdfd);background:var(--axp-welcome-preview-panel, #ffffff);color:var(--axp-welcome-preview-text, #385c52)}.axp-welcome-onboarding__type-preview-sample{--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);font-size:1.75em;color:var(--axp-welcome-preview-primary, var(--ax-color-primary))}.axp-welcome-onboarding__type-preview-heading{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-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-welcome-onboarding__type-preview-body{margin:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 7);line-height:calc(var(--spacing, .25rem) * 7);color:var(--axp-welcome-preview-muted, #64736f)}.axp-welcome-onboarding__preview{width:100%;max-width:24rem;flex-shrink:0;overflow:hidden;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:7px;--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px 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:var(--axp-welcome-preview-border, #fdfdfd);background:var(--axp-welcome-preview-surface, #f2f5f7);font-family:inherit}.axp-welcome-onboarding__preview-head{height:calc(var(--spacing, .25rem) * 8);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:10px;background:var(--axp-welcome-preview-panel, #ffffff);color:var(--axp-welcome-preview-muted, #64736f)}.axp-welcome-onboarding__preview-head--colored{background:var(--axp-welcome-preview-primary, var(--ax-color-primary));color:var(--color-white, #fff)}.axp-welcome-onboarding__preview-body{display:flex;height:14.5rem;min-height:0px}.axp-welcome-onboarding__preview-body--horizontal{flex-direction:column}.axp-welcome-onboarding__preview-hmenu{display:flex;height:calc(var(--spacing, .25rem) * 9);flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);background:var(--axp-welcome-preview-primary, var(--ax-color-primary));transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}.axp-welcome-onboarding__preview-hmenu-brand{margin-inline-end:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;border-radius:var(--radius-sm, .25rem);background-color:color-mix(in srgb,#fff 55%,transparent)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-hmenu-brand{background-color:color-mix(in oklab,var(--color-white, #fff) 55%,transparent)}}.axp-welcome-onboarding__preview-hmenu-item{height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px);background-color:color-mix(in srgb,#fff 45%,transparent)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-hmenu-item{background-color:color-mix(in oklab,var(--color-white, #fff) 45%,transparent)}}.axp-welcome-onboarding__preview-hmenu-item--short{width:calc(var(--spacing, .25rem) * 8)}.axp-welcome-onboarding__preview-body--horizontal .axp-welcome-onboarding__preview-blocks{min-height:0px;flex:1}.axp-welcome-onboarding__preview-sidebar{width:calc(var(--spacing, .25rem) * 16);flex-shrink:0;padding:calc(var(--spacing, .25rem) * 2);background:var(--axp-welcome-preview-primary, var(--ax-color-primary));transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}.axp-welcome-onboarding__preview-sidebar--compact{width:calc(var(--spacing, .25rem) * 7)}.axp-welcome-onboarding__preview-sidebar:before,.axp-welcome-onboarding__preview-sidebar:after{content:\"\";margin-bottom:calc(var(--spacing, .25rem) * 2);display:block;height:var(--spacing, .25rem);border-radius:var(--radius-sm, .25rem);background-color:color-mix(in srgb,#fff 40%,transparent)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-sidebar:before,.axp-welcome-onboarding__preview-sidebar:after{background-color:color-mix(in oklab,var(--color-white, #fff) 40%,transparent)}}.axp-welcome-onboarding__preview-blocks{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;padding:calc(var(--spacing, .25rem) * 3);background:var(--axp-welcome-preview-surface, #f2f5f7)}.axp-welcome-onboarding__preview-blocks strong{margin-bottom:calc(var(--spacing, .25rem) * 2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--axp-welcome-preview-text, #385c52)}.axp-welcome-onboarding__preview-dashboard{display:flex;min-height:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-welcome-onboarding__preview-widget-row{display:flex;gap:calc(var(--spacing, .25rem) * 2)}.axp-welcome-onboarding__preview-widget{display:flex;flex:1;flex-direction:column;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 2);background:var(--axp-welcome-preview-card, #ffffff)}.axp-welcome-onboarding__preview-widget--clock{max-width:42%}.axp-welcome-onboarding__preview-mini-cards{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5)}.axp-welcome-onboarding__preview-mini-card{display:flex;flex:1;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:var(--spacing, .25rem);min-height:1.35rem;background:var(--axp-welcome-preview-card, #ffffff)}.axp-welcome-onboarding__preview-mini-card--wide{flex:1.15}.axp-welcome-onboarding__preview-skel--dot{height:calc(var(--spacing, .25rem) * 2);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:calc(infinity * 1px);background:var(--axp-welcome-preview-accent, #7fc6b5)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-skel--dot{background:color-mix(in srgb,var(--axp-welcome-preview-accent, #7fc6b5) 45%,transparent)}}.axp-welcome-onboarding__preview-skel--line-xs{height:var(--spacing, .25rem);flex:1}.axp-welcome-onboarding__preview-tasks{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 2);background:var(--axp-welcome-preview-card, #ffffff)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-tasks{background:color-mix(in srgb,var(--axp-welcome-preview-card, #ffffff) 88%,transparent)}}.axp-welcome-onboarding__preview-task-row{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}.axp-welcome-onboarding__preview-skel{display:block;border-radius:var(--radius-sm, .25rem);background:var(--axp-welcome-preview-muted, #94a3a8)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-skel{background:color-mix(in srgb,var(--axp-welcome-preview-muted, #94a3a8) 28%,transparent)}}.axp-welcome-onboarding__preview-skel--clock{margin-bottom:calc(var(--spacing, .25rem) * .5);height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);border-radius:calc(infinity * 1px);background:var(--axp-welcome-preview-primary, #237f6a)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-skel--clock{background:color-mix(in srgb,var(--axp-welcome-preview-primary, #237f6a) 35%,transparent)}}.axp-welcome-onboarding__preview-skel--line-lg{height:calc(var(--spacing, .25rem) * 2);width:70%}.axp-welcome-onboarding__preview-skel--line-sm{height:calc(var(--spacing, .25rem) * 1.5);width:45%}.axp-welcome-onboarding__preview-skel--title{margin-bottom:calc(var(--spacing, .25rem) * .5);height:calc(var(--spacing, .25rem) * 2);width:38%}.axp-welcome-onboarding__preview-skel--check{height:calc(var(--spacing, .25rem) * 2.5);width:calc(var(--spacing, .25rem) * 2.5);flex-shrink:0;border-radius:3px}.axp-welcome-onboarding__preview-skel--line{height:calc(var(--spacing, .25rem) * 1.5);flex:1}.axp-welcome-onboarding__preview-chart{margin-top:auto;height:calc(var(--spacing, .25rem) * 10);flex-shrink:0;border-radius:var(--radius-md, .375rem);background:linear-gradient(170deg,transparent 35%,var(--axp-welcome-preview-accent, #a4d7c6) 36%,var(--axp-welcome-preview-primary, #7fc6b5) 100%);transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-chart{background:linear-gradient(170deg,transparent 35%,color-mix(in srgb,var(--axp-welcome-preview-accent, #a4d7c6) 70%,transparent) 36%,color-mix(in srgb,var(--axp-welcome-preview-primary, #7fc6b5) 25%,var(--axp-welcome-preview-surface, #e8f2ef)) 100%)}}.axp-welcome-onboarding__art-caption{flex-shrink:0;text-align:center}.axp-welcome-onboarding__art-caption strong{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400)}.axp-welcome-onboarding__art-caption p{margin-top:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-welcome-onboarding__dots{display:flex;flex-shrink:0;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);padding-top:calc(var(--spacing, .25rem) * 2)}.axp-welcome-onboarding__dot{height:calc(var(--spacing, .25rem) * 2);width:calc(var(--spacing, .25rem) * 2);cursor:pointer;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:var(--color-neutral-300, oklch(87% 0 none));padding:0;transition-property:all;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))}.axp-welcome-onboarding__dot--on{width:calc(var(--spacing, .25rem) * 6);border-radius:calc(infinity * 1px);background:var( --axp-welcome-preview-primary, var(--ax-color-primary, var(--color-primary-500, #347d72)) )}.axp-welcome-onboarding__footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4);border-color:rgb(var(--ax-sys-color-border-lighter-surface, 245 245 245))}@media(width>=48rem){.axp-welcome-onboarding__footer{padding-inline:calc(var(--spacing, .25rem) * 8)}}.axp-welcome-onboarding ax-button>button.ax-solid-interactive.ax-primary:not(.ax-state-disabled):not(.ax-state-loading){background-image:none;background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface));box-shadow:none}.axp-welcome-onboarding ax-button>button.ax-solid-interactive.ax-primary:not(.ax-state-disabled):not(.ax-state-loading):hover{background-color:rgb(var(--ax-sys-color-primary-600))}.axp-welcome-onboarding ax-button>button.ax-solid-interactive.ax-primary:not(.ax-state-disabled):not(.ax-state-loading):active{background-color:rgb(var(--ax-sys-color-primary-600))}.axp-welcome-onboarding axp-theme-mode-chooser-widget-component>div.--selected,.axp-welcome-onboarding axp-theme-palette-chooser-widget-component>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface) / .55);border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface))}.axp-welcome-onboarding__footer-start,.axp-welcome-onboarding__footer-end{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-welcome-onboarding__done{grid-column:span 1 / span 1;display:flex;height:100%;min-height:0px;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center}@media(width>=48rem){.axp-welcome-onboarding__done{grid-column:span 2 / span 2}}.axp-welcome-onboarding__done-orb{margin-bottom:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 28);width:calc(var(--spacing, .25rem) * 28);flex-shrink:0;background:radial-gradient(circle at 30% 25%,var(--axp-welcome-preview-accent, #dbfff8),var(--axp-welcome-preview-primary, var(--ax-color-primary-500)) 48%,var(--axp-welcome-preview-primary, #217c6f) 82%);box-shadow:inset -15px -15px 30px var(--axp-welcome-preview-primary, #145b63),0 32px 40px var(--axp-welcome-preview-primary, #347d72)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__done-orb{background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--axp-welcome-preview-accent, #dbfff8) 90%,white),var(--axp-welcome-preview-primary, var(--ax-color-primary-500)) 48%,color-mix(in srgb,var(--axp-welcome-preview-primary, #217c6f) 85%,black) 82%)}}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__done-orb{box-shadow:inset -15px -15px 30px color-mix(in srgb,var(--axp-welcome-preview-primary, #145b63) 25%,transparent),0 32px 40px color-mix(in srgb,var(--axp-welcome-preview-primary, #347d72) 22%,transparent)}}.axp-welcome-onboarding__done-orb .axp-welcome-onboarding__orb-icon{font-size:var(--text-5xl, 3rem);line-height:var(--tw-leading, var(--text-5xl--line-height, 1))}.axp-welcome-onboarding__done-actions{margin-top:calc(var(--spacing, .25rem) * 6);display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--spacing, .25rem) * 3)}.axp-welcome-onboarding__animate{animation:axp-welcome-onboarding-enter .35s ease both}@keyframes axp-welcome-onboarding-enter{0%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.axp-welcome-onboarding{--axp-welcome-backdrop-duration: .01ms}.axp-welcome-onboarding__animate{animation:none}}@media(max-width:767px){.axp-welcome-onboarding{--axp-welcome-shell-height: min(42rem, calc(100dvh - 1.5rem) )}}@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-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-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-leading: initial;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { 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: AXPAuthWelcomeOnboardingPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-auth-welcome-onboarding-page', imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXTranslationModule,
+                        AXPLogoComponent,
+                        AXPUserAvatarComponent,
+                        AXPLayoutRendererComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"axp-welcome-onboarding\"\n  [class.ax-light]=\"!previewResolvedDark()\"\n  [class.ax-dark]=\"previewResolvedDark()\"\n  [ngStyle]=\"previewHostStyle()\"\n>\n  <div class=\"axp-welcome-onboarding__backdrop-stack\" aria-hidden=\"true\">\n    <div\n      class=\"axp-welcome-onboarding__backdrop\"\n      [class.axp-welcome-onboarding__backdrop--active]=\"activeBackdropLayer() === 'a'\"\n      [ngStyle]=\"backdropLayerA()\"\n    ></div>\n    <div\n      class=\"axp-welcome-onboarding__backdrop\"\n      [class.axp-welcome-onboarding__backdrop--active]=\"activeBackdropLayer() === 'b'\"\n      [ngStyle]=\"backdropLayerB()\"\n    ></div>\n  </div>\n\n  <div class=\"axp-welcome-onboarding__content\" #confettiHost>\n  <!-- ----- Full-page loading state ----- -->\n  @if (loading()) {\n    <div class=\"axp-welcome-onboarding__loading\">\n      <ax-loading></ax-loading>\n    </div>\n  }\n  <!-- ----- Main onboarding shell ----- -->\n  @else {\n    <div\n      class=\"axp-welcome-onboarding__shell\"\n      [class.axp-welcome-onboarding__shell--appearance]=\"showAppearancePreview()\"\n      [class.axp-welcome-onboarding__shell--typography]=\"showTypographyPreview()\"\n      [ngStyle]=\"previewHostStyle()\"\n    >\n      <header class=\"axp-welcome-onboarding__header\">\n        <div class=\"axp-welcome-onboarding__brand\">\n          <axp-logo\n            logoKey=\"platform\"\n            appearance=\"onLight\"\n            format=\"full\"\n            [size]=\"220\"\n            [attr.alt]=\"platformTitle()\"\n          ></axp-logo>\n        </div>\n        <div class=\"axp-welcome-onboarding__step-counter\">\n          <!-- ----- Step counter in the header ----- -->\n          @if (!finishOutcome() && currentStep(); as step) {\n            <span>\n              {{\n                '@auth:welcome-onboarding.page.step-counter'\n                  | translate: { params: { current: stepIndex() + 1, total: steps().length } }\n                  | async\n              }}\n              \u00B7 {{ step.title | translate | async }}\n            </span>\n          }\n          <!-- ----- Ready message after completion ----- -->\n          @else if (finishOutcome()) {\n            {{ '@auth:welcome-onboarding.page.ready-counter' | translate | async }}\n          }\n        </div>\n      </header>\n\n      <main class=\"axp-welcome-onboarding__main\">\n        <!-- ----- Completion screen ----- -->\n        @if (finishOutcome(); as outcome) {\n          <section class=\"axp-welcome-onboarding__done axp-welcome-onboarding__animate\">\n            <div\n              class=\"axp-welcome-onboarding__orb axp-welcome-onboarding__done-orb\"\n              [ngStyle]=\"previewSurfaceStyle()\"\n              aria-hidden=\"true\"\n            >\n              <i class=\"axp-welcome-onboarding__orb-icon\" [class]=\"doneOrbIconClass\"></i>\n            </div>\n            <h1 class=\"axp-welcome-onboarding__title\">\n              {{\n                ('@auth:welcome-onboarding.page.done.' + outcome + '.title') | translate | async\n              }}\n            </h1>\n            <p class=\"axp-welcome-onboarding__lead\">\n              {{\n                ('@auth:welcome-onboarding.page.done.' + outcome + '.description') | translate | async\n              }}\n            </p>\n            <div class=\"axp-welcome-onboarding__done-actions\">\n              <ax-button\n                look=\"solid\"\n                color=\"primary\"\n                [text]=\"'@auth:welcome-onboarding.page.actions.enter-workspace' | translate | async\"\n                [disabled]=\"busy()\"\n                (onClick)=\"enterWorkspace()\"\n              ></ax-button>\n              <!-- ----- Review settings after skip or defer ----- -->\n              @if (outcome !== 'completed') {\n                <ax-button\n                  look=\"outline\"\n                  color=\"default\"\n                  [text]=\"'@auth:welcome-onboarding.page.actions.review-settings' | translate | async\"\n                  [disabled]=\"busy()\"\n                  (onClick)=\"reviewSettings()\"\n                ></ax-button>\n              }\n            </div>\n          </section>\n        }\n        <!-- ----- Active step: form + art panel ----- -->\n        @else {\n          <section\n            #formScrollHost\n            class=\"axp-welcome-onboarding__form axp-welcome-onboarding__animate\"\n            [class.axp-welcome-onboarding__form--appearance]=\"showAppearancePreview()\"\n            [class.axp-welcome-onboarding__form--typography]=\"showTypographyPreview()\"\n            [class.axp-welcome-onboarding__form--menu-horizontal]=\"\n              showAppearancePreview() && previewMenuHorizontal()\n            \"\n          >\n            <!-- ----- Step form content when a step is active ----- -->\n            @if (currentStep(); as step) {\n              <h1 class=\"axp-welcome-onboarding__title\">\n                {{ ('@auth:welcome-onboarding.page.steps.' + step.id + '.headline') | translate | async }}\n              </h1>\n              <p class=\"axp-welcome-onboarding__lead\">\n                {{ ('@auth:welcome-onboarding.page.steps.' + step.id + '.lead') | translate | async }}\n              </p>\n\n              <!-- ----- Profile avatar on profile basics step ----- -->\n              @if (showProfileAvatar()) {\n                <div class=\"axp-welcome-onboarding__profile-row\">\n                  <axp-user-avatar\n                    [size]=\"74\"\n                    [userId]=\"user?.id!\"\n                    [showPresence]=\"false\"\n                  ></axp-user-avatar>\n                </div>\n              }\n\n              @if (stepLayout(); as layout) {\n                <axp-layout-renderer\n                  class=\"axp-welcome-onboarding__fields\"\n                  [layout]=\"layout\"\n                  [context]=\"formContext()\"\n                  (contextChange)=\"onFormContextChange($event)\"\n                ></axp-layout-renderer>\n              }\n\n              <p class=\"axp-welcome-onboarding__notice\">\n                {{ ('@auth:welcome-onboarding.page.steps.' + step.id + '.notice') | translate | async }}\n              </p>\n            }\n          </section>\n\n          <aside\n            class=\"axp-welcome-onboarding__art axp-welcome-onboarding__animate\"\n            [class.axp-welcome-onboarding__art--appearance]=\"showAppearancePreview()\"\n            [class.axp-welcome-onboarding__art--typography]=\"showTypographyPreview()\"\n            [ngStyle]=\"previewHostStyle()\"\n            aria-hidden=\"false\"\n          >\n            <div class=\"axp-welcome-onboarding__art-inner\">\n              <div class=\"axp-welcome-onboarding__art-visual\">\n                <!-- ----- Theme preview on appearance step ----- -->\n                @if (showAppearancePreview()) {\n                  <div\n                    class=\"axp-welcome-onboarding__preview\"\n                    [class.axp-welcome-onboarding__preview--dark]=\"previewResolvedDark()\"\n                    [ngStyle]=\"previewSurfaceStyle()\"\n                  >\n                    <div\n                      class=\"axp-welcome-onboarding__preview-head\"\n                      [class.axp-welcome-onboarding__preview-head--colored]=\"previewHeaderColored()\"\n                    >\n                      \u25CF \u25CF \u25CF &nbsp;&nbsp; {{ previewOrganizationTitle() }}\n                    </div>\n                    <div\n                      class=\"axp-welcome-onboarding__preview-body\"\n                      [class.axp-welcome-onboarding__preview-body--horizontal]=\"previewMenuHorizontal()\"\n                    >\n                      <!-- ----- Horizontal root menu skeleton ----- -->\n                      @if (previewMenuHorizontal()) {\n                        <div class=\"axp-welcome-onboarding__preview-hmenu\">\n                          <span class=\"axp-welcome-onboarding__preview-hmenu-brand\"></span>\n                          <span class=\"axp-welcome-onboarding__preview-hmenu-item\"></span>\n                          <span class=\"axp-welcome-onboarding__preview-hmenu-item\"></span>\n                          <span class=\"axp-welcome-onboarding__preview-hmenu-item axp-welcome-onboarding__preview-hmenu-item--short\"></span>\n                        </div>\n                      }\n                      <!-- ----- Vertical root menu skeleton ----- -->\n                      @else {\n                        <div\n                          class=\"axp-welcome-onboarding__preview-sidebar\"\n                          [class.axp-welcome-onboarding__preview-sidebar--compact]=\"previewMenuCompact()\"\n                        ></div>\n                      }\n                      <div class=\"axp-welcome-onboarding__preview-blocks\">\n                        <strong>{{ previewOrganizationTitle() }}</strong>\n                        <div class=\"axp-welcome-onboarding__preview-dashboard\">\n                          <div class=\"axp-welcome-onboarding__preview-widget-row\">\n                            <div class=\"axp-welcome-onboarding__preview-widget axp-welcome-onboarding__preview-widget--clock\">\n                              <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--clock\"></span>\n                              <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line-lg\"></span>\n                              <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line-sm\"></span>\n                            </div>\n                            <div class=\"axp-welcome-onboarding__preview-mini-cards\">\n                              <span class=\"axp-welcome-onboarding__preview-mini-card\">\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--dot\"></span>\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line-xs\"></span>\n                              </span>\n                              <span class=\"axp-welcome-onboarding__preview-mini-card\">\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--dot\"></span>\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line-xs\"></span>\n                              </span>\n                              <span class=\"axp-welcome-onboarding__preview-mini-card axp-welcome-onboarding__preview-mini-card--wide\">\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line-xs\"></span>\n                              </span>\n                            </div>\n                          </div>\n                          <div class=\"axp-welcome-onboarding__preview-tasks\">\n                            <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--title\"></span>\n                            @for (row of previewTaskSkeletonRows; track row) {\n                              <div class=\"axp-welcome-onboarding__preview-task-row\">\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--check\"></span>\n                                <span class=\"axp-welcome-onboarding__preview-skel axp-welcome-onboarding__preview-skel--line\"></span>\n                              </div>\n                            }\n                          </div>\n                          <div class=\"axp-welcome-onboarding__preview-chart\"></div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- ----- Live type specimen on typography step ----- -->\n                @else if (showTypographyPreview()) {\n                  <div\n                    class=\"axp-welcome-onboarding__type-preview\"\n                    [ngStyle]=\"previewHostStyle()\"\n                  >\n                    <span class=\"axp-welcome-onboarding__type-preview-sample\">\n                      {{ '@auth:welcome-onboarding.page.typography-preview.sample' | translate | async }}\n                    </span>\n                    <strong class=\"axp-welcome-onboarding__type-preview-heading\">\n                      {{ '@auth:welcome-onboarding.page.typography-preview.heading' | translate | async }}\n                    </strong>\n                    <p class=\"axp-welcome-onboarding__type-preview-body\">\n                      {{ '@auth:welcome-onboarding.page.typography-preview.body' | translate | async }}\n                    </p>\n                  </div>\n                }\n                <!-- ----- Decorative orb on other steps ----- -->\n                @else {\n                  <div class=\"axp-welcome-onboarding__orb\" [ngStyle]=\"previewSurfaceStyle()\">\n                    <i class=\"axp-welcome-onboarding__orb-icon\" [class]=\"orbIconClass()\" aria-hidden=\"true\"></i>\n                  </div>\n                }\n              </div>\n\n              <div class=\"axp-welcome-onboarding__art-caption\">\n                <strong>{{ stepArtCaptionKey(currentStep()) | translate | async }}</strong>\n              </div>\n\n              <div class=\"axp-welcome-onboarding__dots\" role=\"tablist\">\n                @for (step of steps(); track step.id; let i = $index) {\n                  <button\n                    type=\"button\"\n                    class=\"axp-welcome-onboarding__dot\"\n                    [class.axp-welcome-onboarding__dot--on]=\"stepIndex() === i\"\n                    [attr.aria-label]=\"step.title | translate | async\"\n                    [attr.aria-selected]=\"stepIndex() === i\"\n                    (click)=\"goToStep(i)\"\n                  ></button>\n                }\n              </div>\n            </div>\n          </aside>\n        }\n      </main>\n\n      <!-- ----- Footer actions while steps are active ----- -->\n      @if (!finishOutcome()) {\n        <footer class=\"axp-welcome-onboarding__footer\">\n          <div class=\"axp-welcome-onboarding__footer-start\">\n            <ax-button\n              look=\"twotone\"\n              color=\"default\"\n              [text]=\"'@auth:welcome-onboarding.actions.skip-all' | translate | async\"\n              [disabled]=\"busy()\"\n              (onClick)=\"skipAll()\"\n            ></ax-button>\n            <ax-button\n              look=\"twotone\"\n              color=\"default\"\n              [text]=\"'@auth:welcome-onboarding.actions.remind-later' | translate | async\"\n              [disabled]=\"busy()\"\n              (onClick)=\"remindLater()\"\n            ></ax-button>\n          </div>\n          <div class=\"axp-welcome-onboarding__footer-end\">\n            <!-- ----- Previous step ----- -->\n            @if (!isFirstStep()) {\n              <ax-button\n                look=\"blank\"\n                color=\"default\"\n                [text]=\"'@auth:welcome-onboarding.actions.previous' | translate | async\"\n                [disabled]=\"busy()\"\n                (onClick)=\"previous()\"\n              ></ax-button>\n            }\n            <ax-button\n              look=\"solid\"\n              color=\"primary\"\n              [text]=\"\n                (isLastStep()\n                  ? '@auth:welcome-onboarding.actions.finish'\n                  : '@auth:welcome-onboarding.actions.next'\n                )\n                  | translate\n                  | async\n              \"\n              [disabled]=\"busy()\"\n              (onClick)=\"next()\"\n            ></ax-button>\n          </div>\n        </footer>\n      }\n    </div>\n  }\n  </div>\n</div>\n", styles: ["@layer properties;.axp-welcome-onboarding{--axp-welcome-shell-height: min(42rem, calc(100dvh - 2.5rem) );--axp-welcome-backdrop-duration: .75s;position:relative;box-sizing:border-box;overflow:hidden;height:100dvh;max-height:100dvh;background:var(--axp-welcome-page-base, rgb(var(--ax-sys-color-lighter-surface, 239 244 247)));transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}.axp-welcome-onboarding__backdrop-stack{pointer-events:none;position:absolute;inset:0;z-index:0;overflow:hidden}.axp-welcome-onboarding__backdrop{position:absolute;inset:0;opacity:0%;background:radial-gradient(ellipse at 15% 90%,var(--axp-welcome-page-glow-start, #b2ded8) 0%,transparent 55%),radial-gradient(ellipse at 90% 5%,var(--axp-welcome-page-glow-end, #d1e1fc) 0%,transparent 55%),var(--axp-welcome-page-base, #eff4f7);transition:opacity var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1);will-change:opacity}.axp-welcome-onboarding__backdrop--active{opacity:100%}.axp-welcome-onboarding__content{position:relative;z-index:10;display:flex;height:100%;min-height:0px;width:100%;align-items:center;justify-content:center;overflow:hidden;padding:calc(var(--spacing, .25rem) * 3)}@media(width>=48rem){.axp-welcome-onboarding__content{padding:calc(var(--spacing, .25rem) * 6)}}.axp-welcome-onboarding__confetti-canvas{pointer-events:none;position:absolute;inset:0;z-index:20}.axp-welcome-onboarding__loading{display:flex;min-height:40vh;align-items:center;justify-content:center}.axp-welcome-onboarding__shell{display:flex;width:100%;max-width:72.5rem;flex-shrink:0;flex-direction:column;overflow:hidden;border-radius:var(--radius-2xl, 1rem);--tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / .25));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);height:var(--axp-welcome-shell-height);min-height:var(--axp-welcome-shell-height);max-height:var(--axp-welcome-shell-height);border:1px solid rgb(var(--ax-sys-color-primary-500, 17 59 83));background:rgb(var(--ax-sys-color-lightest-surface, 255 255 255));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1),border-color var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__shell{border:1px solid color-mix(in srgb,rgb(var(--ax-sys-color-primary-500, 17 59 83)) 12%,rgb(var(--ax-sys-color-border-lightest-surface, 255 255 255)))}}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__shell{background:color-mix(in srgb,rgb(var(--ax-sys-color-lightest-surface, 255 255 255)) 88%,rgb(var(--ax-sys-color-primary-50, 241 245 249)) 12%)}}.axp-welcome-onboarding.ax-dark .axp-welcome-onboarding__shell{background:rgb(var(--ax-sys-color-darkest-surface, 33 37 41));border-color:rgb(var(--ax-sys-color-primary-500, 98 71 170))}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding.ax-dark .axp-welcome-onboarding__shell{background:color-mix(in srgb,rgb(var(--ax-sys-color-darkest-surface, 33 37 41)) 92%,rgb(var(--ax-sys-color-primary-900, 17 59 83)) 8%)}}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding.ax-dark .axp-welcome-onboarding__shell{border-color:color-mix(in srgb,rgb(var(--ax-sys-color-primary-500, 98 71 170)) 18%,rgb(var(--ax-sys-color-border-darker-surface, 60 60 60)))}}.axp-welcome-onboarding__header{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.axp-welcome-onboarding__header{padding-inline:calc(var(--spacing, .25rem) * 8)}}.axp-welcome-onboarding__brand{flex-shrink:0}.axp-welcome-onboarding__brand axp-logo{width:min(14rem,42vw);max-width:100%}.axp-welcome-onboarding__step-counter{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-welcome-onboarding__main{display:grid;min-height:0px;flex:1;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-rows:repeat(1,minmax(0,1fr));overflow:hidden}@media(width>=48rem){.axp-welcome-onboarding__main{grid-template-columns:repeat(2,minmax(0,1fr))}}.axp-welcome-onboarding__form{display:flex;height:100%;min-height:0px;flex-direction:column;overflow-y:auto;padding-inline:calc(var(--spacing, .25rem) * 5);padding-top:var(--spacing, .25rem);padding-bottom:calc(var(--spacing, .25rem) * 4)}@media(width>=48rem){.axp-welcome-onboarding__form{padding-right:calc(var(--spacing, .25rem) * 8)}}@media(width>=48rem){.axp-welcome-onboarding__form{padding-left:calc(var(--spacing, .25rem) * 10)}}.axp-welcome-onboarding__form--appearance{overflow-x:hidden;overflow-y:auto;overflow-anchor:none}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)))}@media(width>=48rem){.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__title{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)))}}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__lead{margin-bottom:calc(var(--spacing, .25rem) * 3);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6)}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__notice{margin-top:calc(var(--spacing, .25rem) * 2);flex-shrink:0}.axp-welcome-onboarding__form--menu-horizontal .axp-welcome-onboarding__fields axp-flex-widget-view>axp-form-field-widget-view:nth-child(4){display:none!important}.axp-welcome-onboarding__eyebrow{margin:0;margin-bottom:calc(var(--spacing, .25rem) * 2);flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--axp-welcome-preview-primary, var(--ax-color-primary))}.axp-welcome-onboarding__title{margin:0;margin-bottom:calc(var(--spacing, .25rem) * 2);flex-shrink:0;font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}@media(width>=48rem){.axp-welcome-onboarding__title{font-size:var(--text-3xl, 1.875rem);line-height:var(--tw-leading, var(--text-3xl--line-height, 1.2 ))}}.axp-welcome-onboarding__lead{margin:0;margin-bottom:calc(var(--spacing, .25rem) * 4);flex-shrink:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 7);line-height:calc(var(--spacing, .25rem) * 7);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-welcome-onboarding__notice{margin-top:calc(var(--spacing, .25rem) * 3);flex-shrink:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-welcome-onboarding__profile-row{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.axp-welcome-onboarding__fields{width:100%;flex-shrink:0}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__fields :is(axp-theme-palette-chooser-widget-component,ng-component:has(>div>span+div)){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;align-content:start}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__fields :is(axp-theme-palette-chooser-widget-component,ng-component:has(>div>span+div))>div{min-width:0!important;height:2.75rem!important;padding:.35rem .65rem!important}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__fields :is(axp-theme-palette-chooser-widget-component,ng-component:has(>div>span+div))>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.axp-welcome-onboarding__form--appearance .axp-welcome-onboarding__fields :is(axp-theme-palette-chooser-widget-component,ng-component:has(>div>span+div))>div>div div{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6)}.axp-welcome-onboarding__art{position:relative;display:none;height:100%;min-height:0px;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at center,var(--axp-welcome-preview-accent, #b2ded8),transparent 72%);transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}@media(width>=48rem){.axp-welcome-onboarding__art{display:flex}}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__art{background:radial-gradient(ellipse at center,color-mix(in srgb,var(--axp-welcome-preview-accent, #b2ded8) 35%,transparent),transparent 72%)}}.axp-welcome-onboarding__art-inner{display:flex;height:100%;min-height:0px;width:100%;flex-direction:column;align-items:center;justify-content:space-between;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 6)}.axp-welcome-onboarding__art-visual{display:flex;min-height:0px;width:100%;flex:1;align-items:center;justify-content:center}.axp-welcome-onboarding__orb{display:grid;height:17rem;width:17rem;flex-shrink:0;place-items:center;border-radius:calc(infinity * 1px);background:radial-gradient(circle at 30% 25%,var(--axp-welcome-preview-accent, #dbfff8),var(--axp-welcome-preview-primary, var(--ax-color-primary-500)) 48%,var(--axp-welcome-preview-primary, #217c6f) 82%);box-shadow:inset -15px -15px 30px var(--axp-welcome-preview-primary, #145b63),0 32px 40px var(--axp-welcome-preview-primary, #347d72)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__orb{background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--axp-welcome-preview-accent, #dbfff8) 90%,white),var(--axp-welcome-preview-primary, var(--ax-color-primary-500)) 48%,color-mix(in srgb,var(--axp-welcome-preview-primary, #217c6f) 85%,black) 82%)}}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__orb{box-shadow:inset -15px -15px 30px color-mix(in srgb,var(--axp-welcome-preview-primary, #145b63) 25%,transparent),0 32px 40px color-mix(in srgb,var(--axp-welcome-preview-primary, #347d72) 22%,transparent)}}.axp-welcome-onboarding__orb-icon{font-size:7.25rem;--tw-leading: 1;line-height:1;color:var(--color-white, #fff);text-shadow:0 2px 12px rgb(0 0 0 / .18)}.axp-welcome-onboarding__type-preview{display:flex;width:100%;max-width:22rem;flex-direction:column;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-xl, .75rem);padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 7);--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px 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:1px solid var(--axp-welcome-preview-border, #fdfdfd);background:var(--axp-welcome-preview-panel, #ffffff);color:var(--axp-welcome-preview-text, #385c52)}.axp-welcome-onboarding__type-preview-sample{--tw-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);font-size:1.75em;color:var(--axp-welcome-preview-primary, var(--ax-color-primary))}.axp-welcome-onboarding__type-preview-heading{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-snug, 1.375);line-height:var(--leading-snug, 1.375);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-welcome-onboarding__type-preview-body{margin:0;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 7);line-height:calc(var(--spacing, .25rem) * 7);color:var(--axp-welcome-preview-muted, #64736f)}.axp-welcome-onboarding__preview{width:100%;max-width:24rem;flex-shrink:0;overflow:hidden;border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:7px;--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 8px 10px -6px 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:var(--axp-welcome-preview-border, #fdfdfd);background:var(--axp-welcome-preview-surface, #f2f5f7);font-family:inherit}.axp-welcome-onboarding__preview-head{height:calc(var(--spacing, .25rem) * 8);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:10px;background:var(--axp-welcome-preview-panel, #ffffff);color:var(--axp-welcome-preview-muted, #64736f)}.axp-welcome-onboarding__preview-head--colored{background:var(--axp-welcome-preview-primary, var(--ax-color-primary));color:var(--color-white, #fff)}.axp-welcome-onboarding__preview-body{display:flex;height:14.5rem;min-height:0px}.axp-welcome-onboarding__preview-body--horizontal{flex-direction:column}.axp-welcome-onboarding__preview-hmenu{display:flex;height:calc(var(--spacing, .25rem) * 9);flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);background:var(--axp-welcome-preview-primary, var(--ax-color-primary));transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}.axp-welcome-onboarding__preview-hmenu-brand{margin-inline-end:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;border-radius:var(--radius-sm, .25rem);background-color:color-mix(in srgb,#fff 55%,transparent)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-hmenu-brand{background-color:color-mix(in oklab,var(--color-white, #fff) 55%,transparent)}}.axp-welcome-onboarding__preview-hmenu-item{height:calc(var(--spacing, .25rem) * 1.5);width:calc(var(--spacing, .25rem) * 12);flex-shrink:0;border-radius:calc(infinity * 1px);background-color:color-mix(in srgb,#fff 45%,transparent)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-hmenu-item{background-color:color-mix(in oklab,var(--color-white, #fff) 45%,transparent)}}.axp-welcome-onboarding__preview-hmenu-item--short{width:calc(var(--spacing, .25rem) * 8)}.axp-welcome-onboarding__preview-body--horizontal .axp-welcome-onboarding__preview-blocks{min-height:0px;flex:1}.axp-welcome-onboarding__preview-sidebar{width:calc(var(--spacing, .25rem) * 16);flex-shrink:0;padding:calc(var(--spacing, .25rem) * 2);background:var(--axp-welcome-preview-primary, var(--ax-color-primary));transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}.axp-welcome-onboarding__preview-sidebar--compact{width:calc(var(--spacing, .25rem) * 7)}.axp-welcome-onboarding__preview-sidebar:before,.axp-welcome-onboarding__preview-sidebar:after{content:\"\";margin-bottom:calc(var(--spacing, .25rem) * 2);display:block;height:var(--spacing, .25rem);border-radius:var(--radius-sm, .25rem);background-color:color-mix(in srgb,#fff 40%,transparent)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-sidebar:before,.axp-welcome-onboarding__preview-sidebar:after{background-color:color-mix(in oklab,var(--color-white, #fff) 40%,transparent)}}.axp-welcome-onboarding__preview-blocks{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;padding:calc(var(--spacing, .25rem) * 3);background:var(--axp-welcome-preview-surface, #f2f5f7)}.axp-welcome-onboarding__preview-blocks strong{margin-bottom:calc(var(--spacing, .25rem) * 2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--axp-welcome-preview-text, #385c52)}.axp-welcome-onboarding__preview-dashboard{display:flex;min-height:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-welcome-onboarding__preview-widget-row{display:flex;gap:calc(var(--spacing, .25rem) * 2)}.axp-welcome-onboarding__preview-widget{display:flex;flex:1;flex-direction:column;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 2);background:var(--axp-welcome-preview-card, #ffffff)}.axp-welcome-onboarding__preview-widget--clock{max-width:42%}.axp-welcome-onboarding__preview-mini-cards{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5)}.axp-welcome-onboarding__preview-mini-card{display:flex;flex:1;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 1.5);padding-block:var(--spacing, .25rem);min-height:1.35rem;background:var(--axp-welcome-preview-card, #ffffff)}.axp-welcome-onboarding__preview-mini-card--wide{flex:1.15}.axp-welcome-onboarding__preview-skel--dot{height:calc(var(--spacing, .25rem) * 2);width:calc(var(--spacing, .25rem) * 2);flex-shrink:0;border-radius:calc(infinity * 1px);background:var(--axp-welcome-preview-accent, #7fc6b5)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-skel--dot{background:color-mix(in srgb,var(--axp-welcome-preview-accent, #7fc6b5) 45%,transparent)}}.axp-welcome-onboarding__preview-skel--line-xs{height:var(--spacing, .25rem);flex:1}.axp-welcome-onboarding__preview-tasks{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1.5);border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 2);background:var(--axp-welcome-preview-card, #ffffff)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-tasks{background:color-mix(in srgb,var(--axp-welcome-preview-card, #ffffff) 88%,transparent)}}.axp-welcome-onboarding__preview-task-row{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5)}.axp-welcome-onboarding__preview-skel{display:block;border-radius:var(--radius-sm, .25rem);background:var(--axp-welcome-preview-muted, #94a3a8)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-skel{background:color-mix(in srgb,var(--axp-welcome-preview-muted, #94a3a8) 28%,transparent)}}.axp-welcome-onboarding__preview-skel--clock{margin-bottom:calc(var(--spacing, .25rem) * .5);height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);border-radius:calc(infinity * 1px);background:var(--axp-welcome-preview-primary, #237f6a)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-skel--clock{background:color-mix(in srgb,var(--axp-welcome-preview-primary, #237f6a) 35%,transparent)}}.axp-welcome-onboarding__preview-skel--line-lg{height:calc(var(--spacing, .25rem) * 2);width:70%}.axp-welcome-onboarding__preview-skel--line-sm{height:calc(var(--spacing, .25rem) * 1.5);width:45%}.axp-welcome-onboarding__preview-skel--title{margin-bottom:calc(var(--spacing, .25rem) * .5);height:calc(var(--spacing, .25rem) * 2);width:38%}.axp-welcome-onboarding__preview-skel--check{height:calc(var(--spacing, .25rem) * 2.5);width:calc(var(--spacing, .25rem) * 2.5);flex-shrink:0;border-radius:3px}.axp-welcome-onboarding__preview-skel--line{height:calc(var(--spacing, .25rem) * 1.5);flex:1}.axp-welcome-onboarding__preview-chart{margin-top:auto;height:calc(var(--spacing, .25rem) * 10);flex-shrink:0;border-radius:var(--radius-md, .375rem);background:linear-gradient(170deg,transparent 35%,var(--axp-welcome-preview-accent, #a4d7c6) 36%,var(--axp-welcome-preview-primary, #7fc6b5) 100%);transition:background var(--axp-welcome-backdrop-duration) cubic-bezier(.4,0,.2,1)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__preview-chart{background:linear-gradient(170deg,transparent 35%,color-mix(in srgb,var(--axp-welcome-preview-accent, #a4d7c6) 70%,transparent) 36%,color-mix(in srgb,var(--axp-welcome-preview-primary, #7fc6b5) 25%,var(--axp-welcome-preview-surface, #e8f2ef)) 100%)}}.axp-welcome-onboarding__art-caption{flex-shrink:0;text-align:center}.axp-welcome-onboarding__art-caption strong{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400)}.axp-welcome-onboarding__art-caption p{margin-top:var(--spacing, .25rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-welcome-onboarding__dots{display:flex;flex-shrink:0;justify-content:center;gap:calc(var(--spacing, .25rem) * 2);padding-top:calc(var(--spacing, .25rem) * 2)}.axp-welcome-onboarding__dot{height:calc(var(--spacing, .25rem) * 2);width:calc(var(--spacing, .25rem) * 2);cursor:pointer;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:var(--color-neutral-300, oklch(87% 0 none));padding:0;transition-property:all;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))}.axp-welcome-onboarding__dot--on{width:calc(var(--spacing, .25rem) * 6);border-radius:calc(infinity * 1px);background:var( --axp-welcome-preview-primary, var(--ax-color-primary, var(--color-primary-500, #347d72)) )}.axp-welcome-onboarding__footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;padding-inline:calc(var(--spacing, .25rem) * 5);padding-block:calc(var(--spacing, .25rem) * 4);border-color:rgb(var(--ax-sys-color-border-lighter-surface, 245 245 245))}@media(width>=48rem){.axp-welcome-onboarding__footer{padding-inline:calc(var(--spacing, .25rem) * 8)}}.axp-welcome-onboarding ax-button>button.ax-solid-interactive.ax-primary:not(.ax-state-disabled):not(.ax-state-loading){background-image:none;background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface));box-shadow:none}.axp-welcome-onboarding ax-button>button.ax-solid-interactive.ax-primary:not(.ax-state-disabled):not(.ax-state-loading):hover{background-color:rgb(var(--ax-sys-color-primary-600))}.axp-welcome-onboarding ax-button>button.ax-solid-interactive.ax-primary:not(.ax-state-disabled):not(.ax-state-loading):active{background-color:rgb(var(--ax-sys-color-primary-600))}.axp-welcome-onboarding axp-theme-mode-chooser-widget-component>div.--selected,.axp-welcome-onboarding axp-theme-palette-chooser-widget-component>div.--selected{background-color:rgb(var(--ax-sys-color-primary-lighter-surface) / .55);border-color:rgb(var(--ax-sys-color-border-primary-lighter-surface));color:rgb(var(--ax-sys-color-on-primary-lighter-surface))}.axp-welcome-onboarding__footer-start,.axp-welcome-onboarding__footer-end{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-welcome-onboarding__done{grid-column:span 1 / span 1;display:flex;height:100%;min-height:0px;flex-direction:column;align-items:center;justify-content:center;overflow-y:auto;padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 8);text-align:center}@media(width>=48rem){.axp-welcome-onboarding__done{grid-column:span 2 / span 2}}.axp-welcome-onboarding__done-orb{margin-bottom:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 28);width:calc(var(--spacing, .25rem) * 28);flex-shrink:0;background:radial-gradient(circle at 30% 25%,var(--axp-welcome-preview-accent, #dbfff8),var(--axp-welcome-preview-primary, var(--ax-color-primary-500)) 48%,var(--axp-welcome-preview-primary, #217c6f) 82%);box-shadow:inset -15px -15px 30px var(--axp-welcome-preview-primary, #145b63),0 32px 40px var(--axp-welcome-preview-primary, #347d72)}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__done-orb{background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--axp-welcome-preview-accent, #dbfff8) 90%,white),var(--axp-welcome-preview-primary, var(--ax-color-primary-500)) 48%,color-mix(in srgb,var(--axp-welcome-preview-primary, #217c6f) 85%,black) 82%)}}@supports (color: color-mix(in lab,red,red)){.axp-welcome-onboarding__done-orb{box-shadow:inset -15px -15px 30px color-mix(in srgb,var(--axp-welcome-preview-primary, #145b63) 25%,transparent),0 32px 40px color-mix(in srgb,var(--axp-welcome-preview-primary, #347d72) 22%,transparent)}}.axp-welcome-onboarding__done-orb .axp-welcome-onboarding__orb-icon{font-size:var(--text-5xl, 3rem);line-height:var(--tw-leading, var(--text-5xl--line-height, 1))}.axp-welcome-onboarding__done-actions{margin-top:calc(var(--spacing, .25rem) * 6);display:flex;flex-wrap:wrap;justify-content:center;gap:calc(var(--spacing, .25rem) * 3)}.axp-welcome-onboarding__animate{animation:axp-welcome-onboarding-enter .35s ease both}@keyframes axp-welcome-onboarding-enter{0%{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.axp-welcome-onboarding{--axp-welcome-backdrop-duration: .01ms}.axp-welcome-onboarding__animate{animation:none}}@media(max-width:767px){.axp-welcome-onboarding{--axp-welcome-shell-height: min(42rem, calc(100dvh - 1.5rem) )}}@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-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-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-leading: initial;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { formScrollHost: [{ type: i0.ViewChild, args: ['formScrollHost', { isSignal: true }] }], confettiHost: [{ type: i0.ViewChild, args: ['confettiHost', { isSignal: true }] }] } });
+
+export { AXPAuthWelcomeOnboardingPageComponent };
+//# sourceMappingURL=acorex-platform-module-auth-client-welcome-onboarding-page.component-C2WYgv4l.mjs.map