@atlasauth/angular 0.1.2 → 0.2.0

package/dist/fesm2022/atlasauth-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, computed, Injectable, TemplateRef, ViewContainerRef, Directive, Input, ElementRef, Renderer2, RendererStyleFlags2, EventEmitter, Output, ChangeDetectionStrategy, Component, signal, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, NgModule } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import { InjectionToken, inject, PLATFORM_ID, computed, Injectable, TemplateRef, ViewContainerRef, Directive, Input, ElementRef, Renderer2, EventEmitter, Output, ChangeDetectionStrategy, Component, signal, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, NgModule } from '@angular/core';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, combineLatest, firstValueFrom } from 'rxjs';
 import { map, distinctUntilChanged, filter, take } from 'rxjs/operators';
@@ -8,6 +8,8 @@ import { TokenCache, FapiClient, getProviderToken, readRedirectResult, stripRedi
 export { FapiClient, advance, flowFromPending, getProviderToken, initialFlow, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
 import { evaluate } from '@atlasauth/authz';
 export { evaluate, hasFromClaims } from '@atlasauth/authz';
+import { renderDesignAppearance, instanceDesignFrom, applyAppearanceToDom } from '@atlasauth/design/runtime';
+export { instanceDesignFrom } from '@atlasauth/design/runtime';
 import { Router } from '@angular/router';
 
 /**
@@ -108,6 +110,39 @@ function classFor(element, appearance, base) {
     const override = appearance?.elements?.[element];
     return override ? `${base} ${override}` : base;
 }
+// ---- the design system ---------------------------------------------------------
+/**
+ * The legacy tokens the developer chose EXPLICITLY: a non-default `baseTheme`
+ * plus `variables`. Only these map onto a design — the token defaults must not
+ * overwrite the dashboard design.
+ */
+function explicitTokens(appearance) {
+    const out = {};
+    if (appearance?.baseTheme && appearance.baseTheme !== 'default') {
+        Object.assign(out, THEMES[appearance.baseTheme]);
+    }
+    for (const [key, value] of Object.entries(appearance?.variables ?? {})) {
+        if (value !== undefined)
+            out[key] = value;
+    }
+    return out;
+}
+/**
+ * Turn an `appearance` (+ the instance's dashboard design from the Frontend
+ * API) into root attributes and a stylesheet — the same semantics as
+ * `@atlasauth/react`. Precedence, lowest first: dashboard design < `preset` <
+ * `variables` (and a non-default `baseTheme`) < `design`. Without a dashboard
+ * design and without `preset`/`design`, the output is exactly the
+ * pre-design-system one: the token variables, no stylesheet, no attributes.
+ */
+function renderAppearance(appearance, instanceDesign, options = {}) {
+    return renderDesignAppearance(appearance, instanceDesign, {
+        tokens: explicitTokens(appearance),
+        legacyStyle: () => cssVariables(resolveTokens(appearance)),
+        frontendApi: options.frontendApi,
+        warn: options.warn,
+    });
+}
 
 /**
  * §10.3: "Every string passes through an i18n catalog; en-US ships, catalog
@@ -304,6 +339,33 @@ class AtlasService {
     appearanceVariables() {
         return cssVariables(resolveTokens(this.options.appearance));
     }
+    /**
+     * The full appearance render for a root element: inline variables, the
+     * `data-atlas-*` attributes and the design stylesheet. Pass the dashboard
+     * design (from {@link loadInstanceDesign}) to layer code overrides on it —
+     * the same semantics as `@atlasauth/react`.
+     */
+    appearanceRender(instanceDesign) {
+        return renderAppearance(this.options.appearance, instanceDesign ?? null, {
+            frontendApi: this.baseUrl,
+        });
+    }
+    /**
+     * The design configured in the Atlas dashboard (`GET /v1/appearance`), or null
+     * when there is none, it cannot be read, or the app opted out with
+     * `appearance.instanceDesign: false`.
+     */
+    async loadInstanceDesign() {
+        if (this.options.appearance?.instanceDesign === false)
+            return null;
+        try {
+            const response = await this.call('/v1/appearance');
+            return response.ok ? instanceDesignFrom(await response.json()) : null;
+        }
+        catch {
+            return null;
+        }
+    }
     /** A fresh {@link FapiClient} for driving a sign-in/sign-up flow. */
     createFapiClient() {
         return new FapiClient({ publishableKey: this.publishableKey, baseUrl: this.baseUrl });
@@ -722,18 +784,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  *   <router-outlet></router-outlet>
  * </div>
  * ```
+ *
+ * With a design (a code-level `appearance.preset` / `appearance.design`, or
+ * the dashboard design, fetched in the browser) the host also gets the stable
+ * `data-atlas-*` attributes and the design stylesheet is added to `<head>` once.
  */
 class AtlasRootDirective {
     atlas = inject(AtlasService);
     el = inject(ElementRef);
     renderer = inject(Renderer2);
+    document = inject(DOCUMENT);
+    platformId = inject(PLATFORM_ID);
     ngOnInit() {
-        this.renderer.addClass(this.el.nativeElement, 'atlas-root');
-        const vars = this.atlas.appearanceVariables();
-        for (const [name, value] of Object.entries(vars)) {
-            // DashCase so a `--atlas-*` custom property is written verbatim, not camelCased.
-            this.renderer.setStyle(this.el.nativeElement, name, value, RendererStyleFlags2.DashCase);
-        }
+        const host = this.el.nativeElement;
+        this.renderer.addClass(host, 'atlas-root');
+        // Custom properties via `style.setProperty` (written verbatim, never camelCased).
+        let applied = applyAppearanceToDom(this.document, host, this.atlas.appearanceRender());
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        void this.atlas.loadInstanceDesign().then((design) => {
+            if (!design)
+                return;
+            applied = applyAppearanceToDom(this.document, host, this.atlas.appearanceRender(design), applied);
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AtlasRootDirective, isStandalone: true, selector: "[atlasRoot]", ngImport: i0 });
@@ -1553,5 +1626,5 @@ function atlasChildGuard(options = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { ATLAS_OPTIONS, ATLAS_UI, AtlasFlowController, AtlasLoadedDirective, AtlasLoadingDirective, AtlasModule, AtlasProtectDirective, AtlasRootDirective, AtlasService, AtlasSignedInDirective, AtlasSignedOutDirective, AttemptFlowComponent, DEFAULT_TOKENS, EN_US, OrganizationProfileComponent, OrganizationSwitcherComponent, SignInComponent, SignUpComponent, THEMES, UserButtonComponent, UserProfileComponent, atlasChildGuard, atlasGuard, classFor, cssVariables, provideAtlas, resolveTokens, translate, withFallback };
+export { ATLAS_OPTIONS, ATLAS_UI, AtlasFlowController, AtlasLoadedDirective, AtlasLoadingDirective, AtlasModule, AtlasProtectDirective, AtlasRootDirective, AtlasService, AtlasSignedInDirective, AtlasSignedOutDirective, AttemptFlowComponent, DEFAULT_TOKENS, EN_US, OrganizationProfileComponent, OrganizationSwitcherComponent, SignInComponent, SignUpComponent, THEMES, UserButtonComponent, UserProfileComponent, atlasChildGuard, atlasGuard, classFor, cssVariables, explicitTokens, provideAtlas, renderAppearance, resolveTokens, translate, withFallback };
 //# sourceMappingURL=atlasauth-angular.mjs.map