@odx/auth 3.5.0 → 4.0.0

package/fesm2015/odx-auth.mjs

@@ -1,35 +1,39 @@
 import * as i0 from '@angular/core';
-import { inject, EnvironmentInjector, InjectionToken, Injectable, Directive, EventEmitter, Output, HostListener, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, APP_INITIALIZER } from '@angular/core';
+import { inject, EnvironmentInjector, InjectionToken, Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Directive, EventEmitter, Output, HostListener, NgModule, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, APP_INITIALIZER } from '@angular/core';
 import { WindowRef, CoreModule } from '@odx/angular';
-import * as i3 from '@odx/angular/components/area-header';
+import * as i3$1 from '@odx/angular/components/area-header';
 import { AreaHeaderModule } from '@odx/angular/components/area-header';
 import * as i8 from '@odx/angular/components/dropdown';
 import { DropdownModule } from '@odx/angular/components/dropdown';
 import { HeaderModule } from '@odx/angular/components/header';
-import * as i1 from '@odx/angular/components/loading-spinner';
+import * as i1$1 from '@odx/angular/components/loading-spinner';
 import { LoadingSpinnerDirective, LoadingSpinnerModule } from '@odx/angular/components/loading-spinner';
 import { LogoDirective } from '@odx/angular/components/logo';
-import { isString, createConfigTokens, untilDestroyed, Position, buildUrl } from '@odx/angular/utils';
+import { TranslatePipe, provideTranslations } from '@odx/angular/internal/translate';
+import { isString, createConfigTokens, injectElement, untilDestroyed, Position, buildUrl } from '@odx/angular/utils';
 import { OAuthErrorEvent, OAuthService, provideOAuthClient, OAuthModuleConfig, OAuthStorage } from 'angular-oauth2-oidc';
-import { __awaiter } from 'tslib';
+import { __awaiter, __decorate } from 'tslib';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { deepmerge } from 'deepmerge-ts';
 import jwtDecode from 'jwt-decode';
 import { BehaviorSubject, filter, map, distinctUntilChanged, share, of, switchMap, combineLatest, tap, take, fromEvent, startWith, merge, shareReplay, EMPTY } from 'rxjs';
-import * as i1$1 from '@angular/common';
-import { NgIf, CommonModule } from '@angular/common';
-import * as i2 from '@ngrx/component';
-import * as i4 from '@odx/angular/components/avatar';
-import * as i5 from '@odx/angular/components/action-group';
-import * as i6 from '@odx/angular/components/button';
-import { ButtonComponent } from '@odx/angular/components/button';
-import * as i7 from '@odx/angular/components/icon';
+import * as i2 from '@odx/angular/components/list';
+import { ListModule } from '@odx/angular/components/list';
+import { CSSComponent } from '@odx/angular/internal';
+import * as i1 from '@angular/common';
+import { CommonModule, NgIf } from '@angular/common';
+import * as i3 from '@odx/angular/components/icon';
 import { IconComponent } from '@odx/angular/components/icon';
-import { DynamicViewDirective, DynamicViewService } from '@odx/angular/cdk/dynamic-view';
 import { trigger, transition, useAnimation } from '@angular/animations';
 import { fadeOut } from '@odx/angular/animations';
+import { DynamicViewDirective, DynamicViewService } from '@odx/angular/cdk/dynamic-view';
+import * as i6 from '@odx/angular/components/button';
+import { ButtonComponent } from '@odx/angular/components/button';
 import { CircularProgressComponent } from '@odx/angular/components/circular-progress';
+import * as i2$1 from '@ngrx/component';
+import * as i4 from '@odx/angular/components/avatar';
+import * as i5 from '@odx/angular/components/action-group';
 
 function createInitials(value) {
     if (!value)
@@ -100,6 +104,11 @@ const DEFAULT_ISSUERS = {
     stage: 'https://test.login.draeger.com/oauth2/default',
     prod: 'https://login.draeger.com/oauth2/default',
 };
+const DEFAULT_USER_PROFILE_URLS = {
+    dev: 'https://lemon-ocean-04a922703.3.azurestaticapps.net',
+    stage: 'https://purple-cliff-0e61c5703.3.azurestaticapps.net',
+    prod: 'https://id.draeger.com',
+};
 const ODX_AUTH_CORE_PLUGINS = new InjectionToken('@odx/auth::CorePlugins', {
     providedIn: 'root',
     factory: () => [],
@@ -136,6 +145,19 @@ const { AuthDefaultConfig, AuthConfig, injectAuthConfig, provideAuthConfig } = c
     loadingScreenMessage: null,
 });
 
+var translations = {
+    en: {
+        userProfileLink: 'My profile',
+        signInButtonText: 'Sign in',
+        signOutButtonText: 'Sign out',
+    },
+    de: {
+        userProfileLink: 'Mein Profil',
+        signInButtonText: 'Einloggen',
+        signOutButtonText: 'Ausloggen',
+    },
+};
+
 const ODX_AUTH_HTTP_CACHE_STORAGE = new InjectionToken('@odx/auth::AuthHttpCacheStorage', {
     providedIn: 'root',
     factory: () => inject(WindowRef).nativeWindow.caches,
@@ -351,6 +373,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
 
+let AuthActionsComponent = class AuthActionsComponent {
+    constructor() {
+        this.element = injectElement();
+        this.claims = null;
+    }
+};
+AuthActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AuthActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AuthActionsComponent, isStandalone: true, selector: "odx-auth-actions", inputs: { claims: "claims" }, ngImport: i0, template: "<odx-list>\n  <a data-testid=\"odx-auth-user-profile-link\" odxListItem [href]=\"url\" rel=\"noopener\" target=\"_blank\" *ngIf=\"claims?.userProfileUrl as url\">\n    <odx-icon name=\"user-administration\" iconSet=\"core\" odxListPrefix></odx-icon>\n    {{ 'userProfileLink' | odxTranslate | async }}\n  </a>\n</odx-list>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i2.ListComponent, selector: "odx-list", inputs: ["multiple"] }, { kind: "component", type: i2.ListItemComponent, selector: "[odxListItem]", inputs: ["danger", "selected"] }, { kind: "component", type: i3.IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet"] }, { kind: "pipe", type: TranslatePipe, name: "odxTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AuthActionsComponent = __decorate([
+    CSSComponent('auth-actions')
+], AuthActionsComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthActionsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'odx-auth-actions', imports: [CoreModule, ListModule, TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<odx-list>\n  <a data-testid=\"odx-auth-user-profile-link\" odxListItem [href]=\"url\" rel=\"noopener\" target=\"_blank\" *ngIf=\"claims?.userProfileUrl as url\">\n    <odx-icon name=\"user-administration\" iconSet=\"core\" odxListPrefix></odx-icon>\n    {{ 'userProfileLink' | odxTranslate | async }}\n  </a>\n</odx-list>\n" }]
+        }], propDecorators: { claims: [{
+                type: Input
+            }] } });
+
+class AuthLoadingScreenComponent {
+    constructor() {
+        this.authConfig = injectAuthConfig();
+        this.icon$ = inject(AuthService).isRedirecting$.pipe(startWith(false), distinctUntilChanged(), map((isRedirecting) => (isRedirecting ? 'link-external' : 'user')));
+    }
+    static initialize(authService, dynamicViewService) {
+        authService.isLoading$.subscribe((isLoading) => {
+            var _a, _b;
+            if (isLoading) {
+                (_a = AuthLoadingScreenComponent.instance) !== null && _a !== void 0 ? _a : (AuthLoadingScreenComponent.instance = dynamicViewService.createView(AuthLoadingScreenComponent));
+            }
+            else {
+                (_b = AuthLoadingScreenComponent.instance) === null || _b === void 0 ? void 0 : _b.destroy();
+                AuthLoadingScreenComponent.instance = null;
+            }
+        });
+    }
+}
+AuthLoadingScreenComponent.instance = null;
+AuthLoadingScreenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthLoadingScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AuthLoadingScreenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AuthLoadingScreenComponent, isStandalone: true, selector: "div.odx-auth-loading-screen", host: { properties: { "@hostAnimation": "true" } }, ngImport: i0, template: "<div class=\"odx-auth-loading-screen__content\" odxLayout=\"grid 12 horizontal-center vertical-center gap-small\">\n  <odx-logo size=\"large\"></odx-logo>\n  <odx-circular-progress class=\"odx-auth-loading-screen__spinner\" value=\"-1\" size=\"medium\" stroke=\"3\">\n    <odx-icon [name]=\"icon$ | async\" iconSet=\"core\"></odx-icon>\n  </odx-circular-progress>\n  <p class=\"odx-auth-loading-screen__message\" *ngIf=\"authConfig.loadingScreenMessage as content\">\n    <ng-template [odxDynamicView]=\"content\"></ng-template>\n  </p>\n</div>\n", styles: ["@keyframes odx-auth-loading-screen-animation{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}.odx-auth-loading-screen{--odx-c-highlight: var(--odx-c-primary);background-color:var(--odx-c-background-content);position:fixed;z-index:var(--odx-v-layer-5);inset:0}.odx-auth-loading-screen__content{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;animation:odx-auth-loading-screen-animation .75s ease}.odx-auth-loading-screen__message{text-align:center}.odx-auth-loading-screen__spinner{position:relative}.odx-auth-loading-screen__spinner .odx-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet"] }, { kind: "directive", type: LogoDirective, selector: "odx-logo", inputs: ["size", "variant"] }, { kind: "component", type: CircularProgressComponent, selector: "odx-circular-progress", inputs: ["stroke", "size", "value"] }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }], animations: [trigger('hostAnimation', [transition(':leave', useAnimation(fadeOut()))])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthLoadingScreenComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'div.odx-auth-loading-screen', imports: [CommonModule, ButtonComponent, IconComponent, LogoDirective, CircularProgressComponent, DynamicViewDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[@hostAnimation]': 'true',
+                    }, animations: [trigger('hostAnimation', [transition(':leave', useAnimation(fadeOut()))])], template: "<div class=\"odx-auth-loading-screen__content\" odxLayout=\"grid 12 horizontal-center vertical-center gap-small\">\n  <odx-logo size=\"large\"></odx-logo>\n  <odx-circular-progress class=\"odx-auth-loading-screen__spinner\" value=\"-1\" size=\"medium\" stroke=\"3\">\n    <odx-icon [name]=\"icon$ | async\" iconSet=\"core\"></odx-icon>\n  </odx-circular-progress>\n  <p class=\"odx-auth-loading-screen__message\" *ngIf=\"authConfig.loadingScreenMessage as content\">\n    <ng-template [odxDynamicView]=\"content\"></ng-template>\n  </p>\n</div>\n", styles: ["@keyframes odx-auth-loading-screen-animation{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}.odx-auth-loading-screen{--odx-c-highlight: var(--odx-c-primary);background-color:var(--odx-c-background-content);position:fixed;z-index:var(--odx-v-layer-5);inset:0}.odx-auth-loading-screen__content{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;animation:odx-auth-loading-screen-animation .75s ease}.odx-auth-loading-screen__message{text-align:center}.odx-auth-loading-screen__spinner{position:relative}.odx-auth-loading-screen__spinner .odx-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
+        }] });
+
 class AuthActionDirective {
     constructor() {
         this.takeUntilDestroyed = untilDestroyed();
@@ -382,7 +450,7 @@ class SignInDirective extends AuthActionDirective {
     }
 }
 SignInDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SignInDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SignInDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SignInDirective, isStandalone: true, selector: "[odxButton][odxAuthSignIn]", outputs: { afterSignIn: "odxAuthSignIn" }, host: { listeners: { "click": "handleClick()" } }, usesInheritance: true, hostDirectives: [{ directive: i1.LoadingSpinnerDirective }], ngImport: i0 });
+SignInDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SignInDirective, isStandalone: true, selector: "[odxButton][odxAuthSignIn]", outputs: { afterSignIn: "odxAuthSignIn" }, host: { listeners: { "click": "handleClick()" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.LoadingSpinnerDirective }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SignInDirective, decorators: [{
             type: Directive,
             args: [{
@@ -410,7 +478,7 @@ class SignOutDirective extends AuthActionDirective {
     }
 }
 SignOutDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SignOutDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-SignOutDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SignOutDirective, isStandalone: true, selector: "[odxButton][odxAuthSignOut]", outputs: { afterSignOut: "odxAuthSignOut" }, host: { listeners: { "click": "handleClick()" } }, usesInheritance: true, hostDirectives: [{ directive: i1.LoadingSpinnerDirective }], ngImport: i0 });
+SignOutDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: SignOutDirective, isStandalone: true, selector: "[odxButton][odxAuthSignOut]", outputs: { afterSignOut: "odxAuthSignOut" }, host: { listeners: { "click": "handleClick()" } }, usesInheritance: true, hostDirectives: [{ directive: i1$1.LoadingSpinnerDirective }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SignOutDirective, decorators: [{
             type: Directive,
             args: [{
@@ -435,20 +503,25 @@ class AuthComponent {
             enableFallback: false,
             containerClass: 'odx-auth-user-profile',
         };
-        this.signInButtonText = 'Sign in';
-        this.signOutButtonText = 'Sign out';
     }
 }
 AuthComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AuthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AuthComponent, isStandalone: true, selector: "odx-auth", inputs: { signInButtonText: "signInButtonText", signOutButtonText: "signOutButtonText" }, ngImport: i0, template: "<odx-action-group>\n  <ng-template [ngrxLet]=\"{ idClaims: authService.identityClaims$, isAuthenticated: authService.isAuthenticated$ }\" let-vm>\n    <ng-template [ngIf]=\"vm.isAuthenticated\" [ngIfElse]=\"notAuthenticated\">\n      <button odxButton [odxDropdown]=\"userProfileMenu\" [odxDropdownOptions]=\"dropdownOptions\" data-testid=\"odx-auth-user-profile-button\">\n        <ng-template [ngTemplateOutlet]=\"userAvatar\"></ng-template>\n      </button>\n      <ng-template #userProfileMenu>\n        <odx-area-header class=\"odx-padding-x-12\" size=\"small\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" ngProjectAs=\"odx-avatar\"></ng-template>\n          {{ vm.idClaims?.username }}\n          <odx-area-header-subtitle>\n            {{ vm.idClaims?.email }}\n          </odx-area-header-subtitle>\n        </odx-area-header>\n        <ng-content></ng-content>\n        <div class=\"odx-margin-top-12\" odxLayout=\"flex vertical-center\">\n          <odx-logo odxLayout=\"auto\" class=\"odx-margin-left-12 odx-margin-right-auto\"></odx-logo>\n          <button odxButton odxAuthSignOut variant=\"ghost\" data-testid=\"odx-auth-sign-out-button\">\n            {{ signOutButtonText }}\n            <odx-icon name=\"logout\" alignRight></odx-icon>\n          </button>\n        </div>\n      </ng-template>\n    </ng-template>\n    <ng-template #notAuthenticated>\n      <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"secondary\" data-testid=\"odx-auth-sign-in-button\">\n        <odx-icon name=\"user\" alignLeft></odx-icon>\n        {{ signInButtonText }}\n      </button>\n    </ng-template>\n    <ng-template #userAvatar>\n      <odx-avatar class=\"odx-auth-user-avatar\">\n        {{ vm.idClaims?.initials ?? '' }}\n      </odx-avatar>\n    </ng-template>\n  </ng-template>\n</odx-action-group>\n", styles: [".odx-auth-user-profile .odx-dropdown__inner>.odx-area-header{max-width:max(360px,25vw);min-width:296px}\n"], dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: AreaHeaderModule }, { kind: "component", type: i3.AreaHeaderComponent, selector: "odx-area-header", inputs: ["size"] }, { kind: "directive", type: i3.AreaHeaderSubtitleDirective, selector: "odx-area-header-subtitle" }, { kind: "component", type: i4.AvatarComponent, selector: "odx-avatar", inputs: ["size", "variant"] }, { kind: "component", type: i5.ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: i7.IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: i8.DropdownDirective, selector: "[odxDropdown]", inputs: ["odxDropdown", "odxDropdownDisabled", "odxDropdownShowLoader", "odxDropdownClickOutsideActive", "odxDropdownOptions", "odxDropdownReferenceElement", "odxDropdownTriggerElement", "odxDropdownHost", "odxDropdownOpenTrigger", "odxDropdownCloseTrigger"], outputs: ["odxDropdownBeforeOpen", "odxDropdownAfterOpen", "odxDropdownBeforeClose", "odxDropdownAfterClose"], exportAs: ["odxDropdown"] }, { kind: "ngmodule", type: HeaderModule }, { kind: "directive", type: LogoDirective, selector: "odx-logo", inputs: ["size", "variant"] }, { kind: "directive", type: SignInDirective, selector: "[odxButton][odxAuthSignIn]", outputs: ["odxAuthSignIn"] }, { kind: "directive", type: SignOutDirective, selector: "[odxButton][odxAuthSignOut]", outputs: ["odxAuthSignOut"] }, { kind: "ngmodule", type: LoadingSpinnerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+AuthComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AuthComponent, isStandalone: true, selector: "odx-auth", providers: [provideTranslations(translations)], ngImport: i0, template: "<odx-action-group>\n  <ng-template [ngrxLet]=\"{ idClaims: authService.identityClaims$, isAuthenticated: authService.isAuthenticated$ }\" let-vm>\n    <ng-template [ngIf]=\"vm.isAuthenticated\" [ngIfElse]=\"notAuthenticated\">\n      <button odxButton [odxDropdown]=\"userProfileMenu\" [odxDropdownOptions]=\"dropdownOptions\" data-testid=\"odx-auth-user-profile-button\">\n        <ng-template [ngTemplateOutlet]=\"userAvatar\"></ng-template>\n      </button>\n      <ng-template #userProfileMenu>\n        <odx-area-header class=\"odx-padding-x-12\" size=\"small\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" ngProjectAs=\"odx-avatar\"></ng-template>\n          {{ vm.idClaims?.username }}\n          <odx-area-header-subtitle>\n            {{ vm.idClaims?.email }}\n          </odx-area-header-subtitle>\n        </odx-area-header>\n        <ng-content></ng-content>\n        <odx-auth-actions [claims]=\"vm.idClaims\"></odx-auth-actions>\n        <div class=\"odx-margin-top-12\" odxLayout=\"flex vertical-center\">\n          <odx-logo odxLayout=\"auto\" class=\"odx-margin-left-12 odx-margin-right-auto\"></odx-logo>\n          <button odxButton odxAuthSignOut variant=\"ghost\" data-testid=\"odx-auth-sign-out-button\">\n            {{ 'signOutButtonText' | odxTranslate | async }}\n            <odx-icon name=\"logout\" alignRight></odx-icon>\n          </button>\n        </div>\n      </ng-template>\n    </ng-template>\n    <ng-template #notAuthenticated>\n      <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"secondary\" data-testid=\"odx-auth-sign-in-button\">\n        <odx-icon name=\"user\" alignLeft></odx-icon>\n        {{ 'signInButtonText' | odxTranslate | async }}\n      </button>\n    </ng-template>\n    <ng-template #userAvatar>\n      <odx-avatar class=\"odx-auth-user-avatar\">\n        {{ vm.idClaims?.initials ?? '' }}\n      </odx-avatar>\n    </ng-template>\n  </ng-template>\n</odx-action-group>\n", styles: [".odx-auth-user-profile .odx-dropdown__inner>.odx-area-header{max-width:max(360px,25vw);min-width:296px}.odx-auth-actions{display:block;margin-top:calc(var(--odx-vertical-rythm-base-size) * .5);margin-bottom:calc(var(--odx-vertical-rythm-base-size) * .5);margin-right:calc(var(--odx-vertical-rythm-base-size) * .25);margin-left:calc(var(--odx-vertical-rythm-base-size) * .25)}\n"], dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: i2$1.LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }, { kind: "ngmodule", type: AreaHeaderModule }, { kind: "component", type: i3$1.AreaHeaderComponent, selector: "odx-area-header", inputs: ["size"] }, { kind: "directive", type: i3$1.AreaHeaderSubtitleDirective, selector: "odx-area-header-subtitle" }, { kind: "component", type: i4.AvatarComponent, selector: "odx-avatar", inputs: ["size", "variant"] }, { kind: "component", type: i5.ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: i3.IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: i8.DropdownDirective, selector: "[odxDropdown]", inputs: ["odxDropdown", "odxDropdownDisabled", "odxDropdownShowLoader", "odxDropdownClickOutsideActive", "odxDropdownOptions", "odxDropdownReferenceElement", "odxDropdownTriggerElement", "odxDropdownHost", "odxDropdownOpenTrigger", "odxDropdownCloseTrigger"], outputs: ["odxDropdownBeforeOpen", "odxDropdownAfterOpen", "odxDropdownBeforeClose", "odxDropdownAfterClose"], exportAs: ["odxDropdown"] }, { kind: "ngmodule", type: HeaderModule }, { kind: "directive", type: LogoDirective, selector: "odx-logo", inputs: ["size", "variant"] }, { kind: "directive", type: SignInDirective, selector: "[odxButton][odxAuthSignIn]", outputs: ["odxAuthSignIn"] }, { kind: "directive", type: SignOutDirective, selector: "[odxButton][odxAuthSignOut]", outputs: ["odxAuthSignOut"] }, { kind: "ngmodule", type: LoadingSpinnerModule }, { kind: "component", type: AuthActionsComponent, selector: "odx-auth-actions", inputs: ["claims"] }, { kind: "pipe", type: TranslatePipe, name: "odxTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'odx-auth', imports: [CoreModule, AreaHeaderModule, DropdownModule, HeaderModule, LogoDirective, SignInDirective, SignOutDirective, LoadingSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<odx-action-group>\n  <ng-template [ngrxLet]=\"{ idClaims: authService.identityClaims$, isAuthenticated: authService.isAuthenticated$ }\" let-vm>\n    <ng-template [ngIf]=\"vm.isAuthenticated\" [ngIfElse]=\"notAuthenticated\">\n      <button odxButton [odxDropdown]=\"userProfileMenu\" [odxDropdownOptions]=\"dropdownOptions\" data-testid=\"odx-auth-user-profile-button\">\n        <ng-template [ngTemplateOutlet]=\"userAvatar\"></ng-template>\n      </button>\n      <ng-template #userProfileMenu>\n        <odx-area-header class=\"odx-padding-x-12\" size=\"small\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" ngProjectAs=\"odx-avatar\"></ng-template>\n          {{ vm.idClaims?.username }}\n          <odx-area-header-subtitle>\n            {{ vm.idClaims?.email }}\n          </odx-area-header-subtitle>\n        </odx-area-header>\n        <ng-content></ng-content>\n        <div class=\"odx-margin-top-12\" odxLayout=\"flex vertical-center\">\n          <odx-logo odxLayout=\"auto\" class=\"odx-margin-left-12 odx-margin-right-auto\"></odx-logo>\n          <button odxButton odxAuthSignOut variant=\"ghost\" data-testid=\"odx-auth-sign-out-button\">\n            {{ signOutButtonText }}\n            <odx-icon name=\"logout\" alignRight></odx-icon>\n          </button>\n        </div>\n      </ng-template>\n    </ng-template>\n    <ng-template #notAuthenticated>\n      <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"secondary\" data-testid=\"odx-auth-sign-in-button\">\n        <odx-icon name=\"user\" alignLeft></odx-icon>\n        {{ signInButtonText }}\n      </button>\n    </ng-template>\n    <ng-template #userAvatar>\n      <odx-avatar class=\"odx-auth-user-avatar\">\n        {{ vm.idClaims?.initials ?? '' }}\n      </odx-avatar>\n    </ng-template>\n  </ng-template>\n</odx-action-group>\n", styles: [".odx-auth-user-profile .odx-dropdown__inner>.odx-area-header{max-width:max(360px,25vw);min-width:296px}\n"] }]
-        }], propDecorators: { signInButtonText: [{
-                type: Input
-            }], signOutButtonText: [{
-                type: Input
-            }] } });
+            args: [{ standalone: true, selector: 'odx-auth', imports: [
+                        CoreModule,
+                        AreaHeaderModule,
+                        DropdownModule,
+                        HeaderModule,
+                        LogoDirective,
+                        SignInDirective,
+                        SignOutDirective,
+                        LoadingSpinnerModule,
+                        AuthActionsComponent,
+                        TranslatePipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [provideTranslations(translations)], template: "<odx-action-group>\n  <ng-template [ngrxLet]=\"{ idClaims: authService.identityClaims$, isAuthenticated: authService.isAuthenticated$ }\" let-vm>\n    <ng-template [ngIf]=\"vm.isAuthenticated\" [ngIfElse]=\"notAuthenticated\">\n      <button odxButton [odxDropdown]=\"userProfileMenu\" [odxDropdownOptions]=\"dropdownOptions\" data-testid=\"odx-auth-user-profile-button\">\n        <ng-template [ngTemplateOutlet]=\"userAvatar\"></ng-template>\n      </button>\n      <ng-template #userProfileMenu>\n        <odx-area-header class=\"odx-padding-x-12\" size=\"small\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" ngProjectAs=\"odx-avatar\"></ng-template>\n          {{ vm.idClaims?.username }}\n          <odx-area-header-subtitle>\n            {{ vm.idClaims?.email }}\n          </odx-area-header-subtitle>\n        </odx-area-header>\n        <ng-content></ng-content>\n        <odx-auth-actions [claims]=\"vm.idClaims\"></odx-auth-actions>\n        <div class=\"odx-margin-top-12\" odxLayout=\"flex vertical-center\">\n          <odx-logo odxLayout=\"auto\" class=\"odx-margin-left-12 odx-margin-right-auto\"></odx-logo>\n          <button odxButton odxAuthSignOut variant=\"ghost\" data-testid=\"odx-auth-sign-out-button\">\n            {{ 'signOutButtonText' | odxTranslate | async }}\n            <odx-icon name=\"logout\" alignRight></odx-icon>\n          </button>\n        </div>\n      </ng-template>\n    </ng-template>\n    <ng-template #notAuthenticated>\n      <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"secondary\" data-testid=\"odx-auth-sign-in-button\">\n        <odx-icon name=\"user\" alignLeft></odx-icon>\n        {{ 'signInButtonText' | odxTranslate | async }}\n      </button>\n    </ng-template>\n    <ng-template #userAvatar>\n      <odx-avatar class=\"odx-auth-user-avatar\">\n        {{ vm.idClaims?.initials ?? '' }}\n      </odx-avatar>\n    </ng-template>\n  </ng-template>\n</odx-action-group>\n", styles: [".odx-auth-user-profile .odx-dropdown__inner>.odx-area-header{max-width:max(360px,25vw);min-width:296px}.odx-auth-actions{display:block;margin-top:calc(var(--odx-vertical-rythm-base-size) * .5);margin-bottom:calc(var(--odx-vertical-rythm-base-size) * .5);margin-right:calc(var(--odx-vertical-rythm-base-size) * .25);margin-left:calc(var(--odx-vertical-rythm-base-size) * .25)}\n"] }]
+        }] });
 
 class AuthDirective {
     constructor() {
@@ -469,7 +542,7 @@ class AuthDirective {
     }
 }
 AuthDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-AuthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: AuthDirective, isStandalone: true, selector: "ng-template[odxAuth]", inputs: { authorizationHandler: ["odxAuth", "authorizationHandler"], elseTemplate: ["odxAuthElse", "elseTemplate"] }, hostDirectives: [{ directive: i1$1.NgIf }], ngImport: i0 });
+AuthDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: AuthDirective, isStandalone: true, selector: "ng-template[odxAuth]", inputs: { authorizationHandler: ["odxAuth", "authorizationHandler"], elseTemplate: ["odxAuthElse", "elseTemplate"] }, hostDirectives: [{ directive: i1.NgIf }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthDirective, decorators: [{
             type: Directive,
             args: [{
@@ -534,34 +607,6 @@ const coreIdentityPlugin = () => {
     };
 };
 
-class AuthLoadingScreenComponent {
-    constructor() {
-        this.authConfig = injectAuthConfig();
-        this.icon$ = inject(AuthService).isRedirecting$.pipe(startWith(false), distinctUntilChanged(), map((isRedirecting) => (isRedirecting ? 'link-external' : 'user')));
-    }
-    static initialize(authService, dynamicViewService) {
-        authService.isLoading$.subscribe((isLoading) => {
-            var _a, _b;
-            if (isLoading) {
-                (_a = AuthLoadingScreenComponent.instance) !== null && _a !== void 0 ? _a : (AuthLoadingScreenComponent.instance = dynamicViewService.createView(AuthLoadingScreenComponent));
-            }
-            else {
-                (_b = AuthLoadingScreenComponent.instance) === null || _b === void 0 ? void 0 : _b.destroy();
-                AuthLoadingScreenComponent.instance = null;
-            }
-        });
-    }
-}
-AuthLoadingScreenComponent.instance = null;
-AuthLoadingScreenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthLoadingScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AuthLoadingScreenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AuthLoadingScreenComponent, isStandalone: true, selector: "div.odx-auth-loading-screen", host: { properties: { "@hostAnimation": "true" } }, ngImport: i0, template: "<div class=\"odx-auth-loading-screen__content\" odxLayout=\"grid 12 horizontal-center vertical-center gap-small\">\n  <odx-logo size=\"large\"></odx-logo>\n  <odx-circular-progress class=\"odx-auth-loading-screen__spinner\" value=\"-1\" size=\"medium\" stroke=\"3\">\n    <odx-icon [name]=\"icon$ | async\" iconSet=\"core\"></odx-icon>\n  </odx-circular-progress>\n  <p class=\"odx-auth-loading-screen__message\" *ngIf=\"authConfig.loadingScreenMessage as content\">\n    <ng-template [odxDynamicView]=\"content\"></ng-template>\n  </p>\n</div>\n", styles: ["@keyframes odx-auth-loading-screen-animation{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}.odx-auth-loading-screen{--odx-c-highlight: var(--odx-c-primary);background-color:var(--odx-c-background-content);position:fixed;z-index:var(--odx-v-layer-5);inset:0}.odx-auth-loading-screen__content{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;animation:odx-auth-loading-screen-animation .75s ease}.odx-auth-loading-screen__message{text-align:center}.odx-auth-loading-screen__spinner{position:relative}.odx-auth-loading-screen__spinner .odx-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet"] }, { kind: "directive", type: LogoDirective, selector: "odx-logo", inputs: ["size", "variant"] }, { kind: "component", type: CircularProgressComponent, selector: "odx-circular-progress", inputs: ["stroke", "size", "value"] }, { kind: "directive", type: DynamicViewDirective, selector: "ng-template[odxDynamicView]", inputs: ["odxDynamicView", "odxDynamicViewInjector", "odxDynamicViewContext"] }], animations: [trigger('hostAnimation', [transition(':leave', useAnimation(fadeOut()))])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthLoadingScreenComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'div.odx-auth-loading-screen', imports: [CommonModule, ButtonComponent, IconComponent, LogoDirective, CircularProgressComponent, DynamicViewDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        '[@hostAnimation]': 'true',
-                    }, animations: [trigger('hostAnimation', [transition(':leave', useAnimation(fadeOut()))])], template: "<div class=\"odx-auth-loading-screen__content\" odxLayout=\"grid 12 horizontal-center vertical-center gap-small\">\n  <odx-logo size=\"large\"></odx-logo>\n  <odx-circular-progress class=\"odx-auth-loading-screen__spinner\" value=\"-1\" size=\"medium\" stroke=\"3\">\n    <odx-icon [name]=\"icon$ | async\" iconSet=\"core\"></odx-icon>\n  </odx-circular-progress>\n  <p class=\"odx-auth-loading-screen__message\" *ngIf=\"authConfig.loadingScreenMessage as content\">\n    <ng-template [odxDynamicView]=\"content\"></ng-template>\n  </p>\n</div>\n", styles: ["@keyframes odx-auth-loading-screen-animation{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}.odx-auth-loading-screen{--odx-c-highlight: var(--odx-c-primary);background-color:var(--odx-c-background-content);position:fixed;z-index:var(--odx-v-layer-5);inset:0}.odx-auth-loading-screen__content{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;animation:odx-auth-loading-screen-animation .75s ease}.odx-auth-loading-screen__message{text-align:center}.odx-auth-loading-screen__spinner{position:relative}.odx-auth-loading-screen__spinner .odx-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
-        }] });
-
 const loadingScreenPlugin = () => {
     const { enableLoadingScreen, showRedirectOverlay } = injectAuthConfig();
     const dynamicViewService = inject(DynamicViewService);
@@ -573,6 +618,13 @@ const loadingScreenPlugin = () => {
     };
 };
 
+const userProfileUrlPlugin = () => {
+    const { environment, userProfileUrl } = injectAuthConfig();
+    return () => {
+        return of({ userProfileUrl: userProfileUrl !== null && userProfileUrl !== void 0 ? userProfileUrl : DEFAULT_USER_PROFILE_URLS[environment] });
+    };
+};
+
 function configureInterceptor() {
     const { allowedUrls } = injectAuthConfig();
     return {
@@ -633,7 +685,7 @@ function provideAuth(config) {
         },
         {
             provide: ODX_AUTH_CORE_PLUGINS,
-            useValue: [coreIdentityPlugin, loadingScreenPlugin],
+            useValue: [coreIdentityPlugin, loadingScreenPlugin, userProfileUrlPlugin],
         },
     ]);
 }
@@ -660,5 +712,5 @@ function unauthGuard(authorizedHandler, redirectTo) {
  * Generated bundle index. Do not edit.
  */
 
-export { AuthActionDirective, AuthComponent, AuthConfig, AuthDefaultConfig, AuthDirective, AuthHttpCache, AuthLoadingScreenComponent, AuthModule, AuthPluginManager, AuthService, DEFAULT_AUTH_SCOPES, DEFAULT_ISSUERS, ODX_AUTH_CORE_PLUGINS, ODX_AUTH_ERROR_HANDLERS, ODX_AUTH_HTTP_CACHE_STORAGE, ODX_AUTH_PLUGINS, SignInDirective, SignOutDirective, authGuard, configureInterceptor, coreIdentityPlugin, createInitials, handleAuthError, initalizeAuthConfig, initializeAuthErrorHandlers, injectAuthConfig, loadingScreenPlugin, offlineAuthErrorHandler, provideAuth, provideAuthConfig, resolveEmail, resolveUsername, unauthGuard };
+export { AuthActionDirective, AuthActionsComponent, AuthComponent, AuthConfig, AuthDefaultConfig, AuthDirective, AuthHttpCache, AuthLoadingScreenComponent, AuthModule, AuthPluginManager, AuthService, DEFAULT_AUTH_SCOPES, DEFAULT_ISSUERS, DEFAULT_USER_PROFILE_URLS, ODX_AUTH_CORE_PLUGINS, ODX_AUTH_ERROR_HANDLERS, ODX_AUTH_HTTP_CACHE_STORAGE, ODX_AUTH_PLUGINS, SignInDirective, SignOutDirective, authGuard, configureInterceptor, coreIdentityPlugin, createInitials, handleAuthError, initalizeAuthConfig, initializeAuthErrorHandlers, injectAuthConfig, loadingScreenPlugin, offlineAuthErrorHandler, provideAuth, provideAuthConfig, resolveEmail, resolveUsername, unauthGuard, userProfileUrlPlugin };
 //# sourceMappingURL=odx-auth.mjs.map