@odx/auth 3.3.0 → 3.5.0

package/fesm2020/odx-auth.mjs

@@ -1,34 +1,34 @@
-import { trigger, transition, useAnimation } from '@angular/animations';
-import * as i1 from '@angular/common';
-import { CommonModule, NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Component, ChangeDetectionStrategy, ViewEncapsulation, Directive, EventEmitter, Output, HostListener, Input, NgModule, EnvironmentInjector, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, APP_INITIALIZER } from '@angular/core';
-import { fadeOut } from '@odx/angular/animations';
-import { 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 i7 from '@odx/angular/components/icon';
-import { IconComponent } from '@odx/angular/components/icon';
-import { LogoDirective } from '@odx/angular/components/logo';
-import { BehaviorSubject, filter, map, distinctUntilChanged, share, of, switchMap, combineLatest, tap, take, fromEvent, startWith, merge, shareReplay, EMPTY } from 'rxjs';
-import { isString, createConfigTokens, untilDestroyed, Position, buildUrl } from '@odx/angular/utils';
-import { HttpErrorResponse } from '@angular/common/http';
-import { Router } from '@angular/router';
+import { inject, EnvironmentInjector, InjectionToken, Injectable, Directive, EventEmitter, Output, HostListener, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, NgModule, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, APP_INITIALIZER } from '@angular/core';
 import { WindowRef, CoreModule } from '@odx/angular';
-import { OAuthService, OAuthErrorEvent, provideOAuthClient, OAuthModuleConfig, OAuthStorage } from 'angular-oauth2-oidc';
-import { deepmerge } from 'deepmerge-ts';
-import jwtDecode from 'jwt-decode';
 import * as i3 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$1 from '@odx/angular/components/loading-spinner';
+import * as i1 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 { OAuthErrorEvent, OAuthService, provideOAuthClient, OAuthModuleConfig, OAuthStorage } from 'angular-oauth2-oidc';
+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 { 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 { CircularProgressComponent } from '@odx/angular/components/circular-progress';
 
 function createInitials(value) {
     if (!value)
@@ -45,6 +45,25 @@ function createInitials(value) {
     }, '');
 }
 
+function handleAuthError(handlers) {
+    const injector = inject(EnvironmentInjector);
+    return (error) => {
+        injector.runInContext(() => {
+            for (const handler of handlers) {
+                try {
+                    handler(error);
+                    break;
+                }
+                catch (unhandledError) {
+                    if (!(unhandledError instanceof OAuthErrorEvent))
+                        throw error;
+                    continue;
+                }
+            }
+        });
+    };
+}
+
 function resolveEmail(claims) {
     if (isString(claims['email'])) {
         return claims['email'];
@@ -84,6 +103,10 @@ const ODX_AUTH_CORE_PLUGINS = new InjectionToken('@odx/auth::CorePlugins', {
     providedIn: 'root',
     factory: () => [],
 });
+const ODX_AUTH_ERROR_HANDLERS = new InjectionToken('@odx/auth::ErrorHandlers', {
+    providedIn: 'root',
+    factory: () => [],
+});
 const ODX_AUTH_PLUGINS = new InjectionToken('@odx/auth::Plugins', {
     providedIn: 'root',
     factory: () => {
@@ -108,6 +131,8 @@ const { AuthDefaultConfig, AuthConfig, injectAuthConfig, provideAuthConfig } = c
     showRedirectOverlay: false,
     plugins: [],
     defaultAuthorizedHandler: null,
+    enableLoadingScreen: false,
+    loadingScreenMessage: null,
 });
 
 const ODX_AUTH_HTTP_CACHE_STORAGE = new InjectionToken('@odx/auth::AuthHttpCacheStorage', {
@@ -117,18 +142,26 @@ const ODX_AUTH_HTTP_CACHE_STORAGE = new InjectionToken('@odx/auth::AuthHttpCache
 class AuthHttpCache {
     constructor() {
         this.cacheStorage = inject(ODX_AUTH_HTTP_CACHE_STORAGE);
+        this.oauthService = inject(OAuthService);
     }
     async delete(request) {
         const cache = await this.cacheStorage.open(AuthHttpCache.CACHE_KEY);
         return cache.delete(request);
     }
-    async request(request) {
+    async request(requestInfo, authentication = false) {
+        const request = new Request(requestInfo);
+        const authorizationHeader = authentication ? this.oauthService.authorizationHeader() : null;
+        if (authorizationHeader) {
+            request.headers.set('Authorization', authorizationHeader);
+        }
         const cache = await this.cacheStorage.open(AuthHttpCache.CACHE_KEY);
-        try {
-            await cache.add(request);
+        const response = await fetch(request).catch(() => null);
+        if (response?.ok) {
+            await cache.put(request, response);
         }
-        catch {
-            // ignore request errors
+        if (authorizationHeader && response?.status === 401) {
+            await cache.delete(request);
+            await this.oauthService.refreshToken().catch(() => null);
         }
         return cache.match(request).then((res) => res?.json() ?? null);
     }
@@ -165,6 +198,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+const offlineAuthErrorHandler = (error) => {
+    if (error.type === 'discovery_document_load_error' && error.reason?.status === 504) {
+        return;
+    }
+    throw error;
+};
+
 class AuthService {
     constructor() {
         this.authConfig = injectAuthConfig();
@@ -294,38 +334,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
 
-class AuthOverlayComponent {
-    constructor() {
-        this.icon$ = inject(AuthService).isRedirecting$.pipe(startWith(false), distinctUntilChanged(), map((isRedirecting) => (isRedirecting ? 'link-external' : 'user')));
-    }
-    static initialize() {
-        const dynamicViewService = inject(DynamicViewService);
-        inject(AuthService).isLoading$.subscribe((isLoading) => {
-            if (isLoading) {
-                AuthOverlayComponent.instance ?? (AuthOverlayComponent.instance = dynamicViewService.createView(AuthOverlayComponent));
-            }
-            else {
-                AuthOverlayComponent.instance?.destroy();
-                AuthOverlayComponent.instance = null;
-            }
-        });
-    }
-}
-AuthOverlayComponent.instance = null;
-AuthOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AuthOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: AuthOverlayComponent, isStandalone: true, selector: "div.odx-auth-overlay", host: { properties: { "@hostAnimation": "true" } }, ngImport: i0, template: "<div class=\"odx-auth-overlay__content\" odxLayout=\"grid 12 horizontal-center vertical-center gap-small\">\n  <odx-logo size=\"large\"></odx-logo>\n  <odx-circular-progress class=\"odx-auth-overlay-spinner\" value=\"-1\" size=\"medium\" stroke=\"3\">\n    <odx-icon [name]=\"icon$ | async\" iconSet=\"core\"></odx-icon>\n  </odx-circular-progress>\n</div>\n", styles: ["@keyframes odx-auth-overlay-animation{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}.odx-auth-overlay{--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-overlay__content{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;animation:odx-auth-overlay-animation .75s ease}.odx-auth-overlay-spinner{position:relative}.odx-auth-overlay-spinner .odx-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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"] }], 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: AuthOverlayComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'div.odx-auth-overlay', imports: [CommonModule, ButtonComponent, IconComponent, LogoDirective, CircularProgressComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
-                        '[@hostAnimation]': 'true',
-                    }, animations: [trigger('hostAnimation', [transition(':leave', useAnimation(fadeOut()))])], template: "<div class=\"odx-auth-overlay__content\" odxLayout=\"grid 12 horizontal-center vertical-center gap-small\">\n  <odx-logo size=\"large\"></odx-logo>\n  <odx-circular-progress class=\"odx-auth-overlay-spinner\" value=\"-1\" size=\"medium\" stroke=\"3\">\n    <odx-icon [name]=\"icon$ | async\" iconSet=\"core\"></odx-icon>\n  </odx-circular-progress>\n</div>\n", styles: ["@keyframes odx-auth-overlay-animation{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}to{opacity:1;transform:translate(-50%,-50%)}}.odx-auth-overlay{--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-overlay__content{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;animation:odx-auth-overlay-animation .75s ease}.odx-auth-overlay-spinner{position:relative}.odx-auth-overlay-spinner .odx-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
-        }] });
-function initalizeAuthOverlay() {
-    if (!injectAuthConfig().showRedirectOverlay)
-        return;
-    AuthOverlayComponent.initialize();
-}
-
 class AuthActionDirective {
     constructor() {
         this.takeUntilDestroyed = untilDestroyed();
@@ -357,7 +365,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$1.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.LoadingSpinnerDirective }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SignInDirective, decorators: [{
             type: Directive,
             args: [{
@@ -385,7 +393,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$1.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.LoadingSpinnerDirective }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SignOutDirective, decorators: [{
             type: Directive,
             args: [{
@@ -415,7 +423,7 @@ class AuthComponent {
     }
 }
 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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", 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 });
 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"] }]
@@ -444,7 +452,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.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$1.NgIf }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: AuthDirective, decorators: [{
             type: Directive,
             args: [{
@@ -509,6 +517,44 @@ 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) => {
+            if (isLoading) {
+                AuthLoadingScreenComponent.instance ?? (AuthLoadingScreenComponent.instance = dynamicViewService.createView(AuthLoadingScreenComponent));
+            }
+            else {
+                AuthLoadingScreenComponent.instance?.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);
+    return (authService) => {
+        if (enableLoadingScreen || showRedirectOverlay) {
+            AuthLoadingScreenComponent.initialize(authService, dynamicViewService);
+        }
+        return of({});
+    };
+};
+
 function configureInterceptor() {
     const { allowedUrls } = injectAuthConfig();
     return {
@@ -518,11 +564,10 @@ function configureInterceptor() {
         },
     };
 }
-function initializeAuthErrorHandler() {
+function initializeAuthErrorHandlers() {
     const authService = inject(AuthService);
-    const injector = inject(EnvironmentInjector);
-    const { errorHandler } = injectAuthConfig();
-    authService.errors$.pipe(tap((error) => injector.runInContext(() => errorHandler(error)))).subscribe();
+    const handler = handleAuthError(inject(ODX_AUTH_ERROR_HANDLERS));
+    authService.errors$.pipe(tap((error) => handler(error))).subscribe();
 }
 function initalizeAuthConfig() {
     const { clientId, scopes, redirectPath, environment, postLogoutRedirectUrl, issuer, timeoutFactor, discoveryUrl } = injectAuthConfig();
@@ -552,13 +597,12 @@ function provideAuth(config) {
         },
         {
             provide: ENVIRONMENT_INITIALIZER,
-            useValue: initializeAuthErrorHandler,
+            useValue: initializeAuthErrorHandlers,
             multi: true,
         },
         {
-            provide: ENVIRONMENT_INITIALIZER,
-            useValue: initalizeAuthOverlay,
-            multi: true,
+            provide: ODX_AUTH_ERROR_HANDLERS,
+            useFactory: () => [offlineAuthErrorHandler, injectAuthConfig().errorHandler],
         },
         {
             provide: APP_INITIALIZER,
@@ -567,11 +611,11 @@ function provideAuth(config) {
         },
         {
             provide: OAuthStorage,
-            useFactory: () => inject(AuthConfig).storage ?? inject(WindowRef).nativeWindow.localStorage,
+            useFactory: () => injectAuthConfig().storage ?? inject(WindowRef).nativeWindow.localStorage,
         },
         {
             provide: ODX_AUTH_CORE_PLUGINS,
-            useValue: [coreIdentityPlugin],
+            useValue: [coreIdentityPlugin, loadingScreenPlugin],
         },
     ]);
 }
@@ -598,5 +642,5 @@ function unauthGuard(authorizedHandler, redirectTo) {
  * Generated bundle index. Do not edit.
  */
 
-export { AuthActionDirective, AuthComponent, AuthConfig, AuthDefaultConfig, AuthDirective, AuthHttpCache, AuthModule, AuthOverlayComponent, AuthPluginManager, AuthService, DEFAULT_AUTH_SCOPES, DEFAULT_ISSUERS, ODX_AUTH_CORE_PLUGINS, ODX_AUTH_HTTP_CACHE_STORAGE, ODX_AUTH_PLUGINS, SignInDirective, SignOutDirective, authGuard, configureInterceptor, coreIdentityPlugin, createInitials, initalizeAuthConfig, initalizeAuthOverlay, initializeAuthErrorHandler, injectAuthConfig, provideAuth, provideAuthConfig, resolveEmail, resolveUsername, unauthGuard };
+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 };
 //# sourceMappingURL=odx-auth.mjs.map