@odx/auth 16.0.0 → 16.1.0

package/fesm2022/odx-auth.mjs

@@ -1,17 +1,16 @@
-import * as i1 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule, AsyncPipe, NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, EnvironmentInjector, runInInjectionContext, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, DestroyRef, InjectionToken, ENVIRONMENT_INITIALIZER, makeEnvironmentProviders, APP_INITIALIZER, Injectable, Directive, EventEmitter, Output, HostListener, input, NgModule } from '@angular/core';
+import { inject, EnvironmentInjector, runInInjectionContext, Directive, EventEmitter, Output, HostListener, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, DestroyRef, InjectionToken, ENVIRONMENT_INITIALIZER, makeEnvironmentProviders, APP_INITIALIZER, Injectable, input, NgModule } from '@angular/core';
 import * as i2$1 from '@odx/angular/components/area-header';
 import { AreaHeaderModule } from '@odx/angular/components/area-header';
 import * as i7 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 { TranslatePipe, provideTranslations } from '@odx/angular/internal/translate';
-import { buildUrl, isString, matchUrl, injectElement, isNumber, isNonEmptyString, createConfigTokens, untilDestroyed, Position } from '@odx/angular/utils';
+import { buildUrl, isString, matchUrl, untilDestroyed, injectElement, isNumber, isNonEmptyString, createConfigTokens, Position } from '@odx/angular/utils';
 import { filter, switchMap, mergeMap, map, of, tap, BehaviorSubject, distinctUntilChanged, share, combineLatest, take, timeout, catchError, fromEvent, startWith, shareReplay, merge, EMPTY } from 'rxjs';
 import { OAuthErrorEvent, provideOAuthClient, OAuthStorage, OAuthService } from 'angular-oauth2-oidc';
 import { HttpRequest, HttpContextToken, provideHttpClient, withInterceptors, HttpErrorResponse } from '@angular/common/http';
@@ -28,6 +27,7 @@ import { IconComponent } from '@odx/angular/components/icon';
 import { trigger, transition, useAnimation } from '@angular/animations';
 import { fadeOut } from '@odx/angular/animations';
 import { CircularProgressComponent } from '@odx/angular/components/circular-progress';
+import { LogoDirective } from '@odx/angular/components/logo';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3$1 from '@odx/angular/components/avatar';
 import * as i4 from '@odx/angular/components/action-group';
@@ -233,6 +233,123 @@ const authInterceptor = (req, next) => {
 
 var logger = new Logger('@odx/auth');
 
+/**
+ * An abstract directive that integrates with the `LoadingSpinnerDirective` and `AuthService` to manage loading states based on authentication redirection.
+ *
+ * This directive automatically sets the `autoColor` property of the `LoadingSpinnerDirective` to `true` and subscribes to the `isRedirecting$` observable from the `AuthService`.
+ * When `isRedirecting$` emits a value, it updates the `isLoading` property of the `LoadingSpinnerDirective`.
+ */
+class AuthActionDirective {
+    constructor() {
+        this.takeUntilDestroyed = untilDestroyed();
+        this.loadingSpinnerDirective = inject(LoadingSpinnerDirective, { self: true });
+        this.authService = inject(AuthService);
+    }
+    ngAfterViewInit() {
+        this.loadingSpinnerDirective.autoColor = true;
+        this.authService.isRedirecting$.pipe(this.takeUntilDestroyed()).subscribe((isRedirecting) => {
+            this.loadingSpinnerDirective.isLoading = isRedirecting;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AuthActionDirective, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthActionDirective, decorators: [{
+            type: Directive
+        }] });
+
+/**
+ * A directive that handles the sign-in action for a button element.
+ *
+ * This directive extends the `AuthActionDirective` and uses the `LoadingSpinnerDirective`
+ * to show a loading spinner during the sign-in process.
+ *
+ * @see {AuthActionDirective}
+ * @see {LoadingSpinnerDirective}
+ *
+ * @example
+ * ```html
+ * <button odxButton odxAuthSignIn (odxAuthSignIn)="onSignIn()">Sign In</button>
+ * ```
+ */
+class SignInDirective extends AuthActionDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * Emits an event after the sign-in action is completed.
+         *
+         * @type {EventEmitter<void>}
+         */
+        // eslint-disable-next-line @angular-eslint/no-output-rename
+        this.afterSignIn = new EventEmitter();
+    }
+    handleClick() {
+        this.authService.signIn();
+        this.afterSignIn.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: SignInDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[odxButton][odxAuthSignIn]',
+                    hostDirectives: [LoadingSpinnerDirective],
+                }]
+        }], propDecorators: { afterSignIn: [{
+                type: Output,
+                args: ['odxAuthSignIn']
+            }], handleClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/**
+ * A directive that handles the sign-out action for a button element.
+ *
+ * This directive extends the `AuthActionDirective` and uses the `LoadingSpinnerDirective`
+ * to show a loading spinner during the sign-out process.
+ *
+ * @see {AuthActionDirective}
+ * @see {LoadingSpinnerDirective}
+ *
+ * @example
+ * ```html
+ * <button odxButton odxAuthSignOut (odxAuthSignOut)="onSignOut()">Sign Out</button>
+ * ```
+ */
+class SignOutDirective extends AuthActionDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * Emits an event after the sign-out action is completed.
+         *
+         */
+        this.afterSignOut = new EventEmitter();
+    }
+    handleClick() {
+        this.authService.signOut();
+        this.afterSignOut.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignOutDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: SignOutDirective, isStandalone: true, selector: "[odxAuthSignOut]", outputs: { afterSignOut: "odxAuthSignOut" }, host: { listeners: { "click": "handleClick()" } }, usesInheritance: true, hostDirectives: [{ directive: i1.LoadingSpinnerDirective }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignOutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[odxAuthSignOut]',
+                    hostDirectives: [LoadingSpinnerDirective],
+                }]
+        }], propDecorators: { afterSignOut: [{
+                type: Output,
+                args: ['odxAuthSignOut']
+            }], handleClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 /**
  * Displays authentication actions.
  */
@@ -248,14 +365,14 @@ let AuthActionsComponent = class AuthActionsComponent {
         this.claims = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AuthActionsComponent, isStandalone: true, selector: "odx-auth-actions", inputs: { claims: "claims" }, ngImport: i0, template: "<odx-list>\n  @if (claims?.userProfileUrl; as url) {\n    <a data-testid=\"odx-auth-user-profile-link\" odxListItem [href]=\"url\" rel=\"noopener\" target=\"_blank\">\n      <odx-icon name=\"user-administration\" iconSet=\"core\" odxListItemPrefix />\n      {{ 'userProfileLink' | odxTranslate | async }}\n      <odx-icon name=\"link-external\" iconSet=\"core\" size=\"small\" odxListItemSuffix />\n    </a>\n  }\n</odx-list>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i2.ListComponent, selector: "odx-list" }, { kind: "component", type: i2.ListItemComponent, selector: "odx-list-item, [odxListItem]", inputs: ["danger", "variant", "muted", "selected"] }, { kind: "component", type: i3.IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }, { kind: "pipe", type: TranslatePipe, name: "odxTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AuthActionsComponent, isStandalone: true, selector: "odx-auth-actions", inputs: { claims: "claims" }, ngImport: i0, template: "<odx-list>\n  @if (claims?.userProfileUrl; as url) {\n    <a odxListItem data-testid=\"odx-auth-user-profile-link\" [href]=\"url\" rel=\"noopener\" target=\"_blank\">\n      <odx-icon name=\"user-administration\" iconSet=\"core\" odxListItemPrefix />\n      {{ 'userProfileLink' | odxTranslate | async }}\n    </a>\n  }\n  <button odxListItem odxAuthSignOut data-testid=\"odx-auth-sign-out-button\" style=\"width: 100%\">\n    <odx-icon name=\"logout\" iconSet=\"core\" odxListItemPrefix />\n    {{ 'signOutButtonText' | odxTranslate | async }}\n  </button>\n</odx-list>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i2.ListComponent, selector: "odx-list" }, { kind: "component", type: i2.ListItemComponent, selector: "odx-list-item, [odxListItem]", inputs: ["danger", "variant", "muted", "selected"] }, { kind: "component", type: i3.IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }, { kind: "pipe", type: TranslatePipe, name: "odxTranslate" }, { kind: "directive", type: SignOutDirective, selector: "[odxAuthSignOut]", outputs: ["odxAuthSignOut"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 };
 AuthActionsComponent = __decorate([
     CSSComponent('auth-actions')
 ], AuthActionsComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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  @if (claims?.userProfileUrl; as url) {\n    <a data-testid=\"odx-auth-user-profile-link\" odxListItem [href]=\"url\" rel=\"noopener\" target=\"_blank\">\n      <odx-icon name=\"user-administration\" iconSet=\"core\" odxListItemPrefix />\n      {{ 'userProfileLink' | odxTranslate | async }}\n      <odx-icon name=\"link-external\" iconSet=\"core\" size=\"small\" odxListItemSuffix />\n    </a>\n  }\n</odx-list>\n" }]
+            args: [{ standalone: true, selector: 'odx-auth-actions', imports: [CoreModule, ListModule, TranslatePipe, SignOutDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<odx-list>\n  @if (claims?.userProfileUrl; as url) {\n    <a odxListItem data-testid=\"odx-auth-user-profile-link\" [href]=\"url\" rel=\"noopener\" target=\"_blank\">\n      <odx-icon name=\"user-administration\" iconSet=\"core\" odxListItemPrefix />\n      {{ 'userProfileLink' | odxTranslate | async }}\n    </a>\n  }\n  <button odxListItem odxAuthSignOut data-testid=\"odx-auth-sign-out-button\" style=\"width: 100%\">\n    <odx-icon name=\"logout\" iconSet=\"core\" odxListItemPrefix />\n    {{ 'signOutButtonText' | odxTranslate | async }}\n  </button>\n</odx-list>\n" }]
         }], propDecorators: { claims: [{
                 type: Input
             }] } });
@@ -291,7 +408,7 @@ class AuthLoadingScreenComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthLoadingScreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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\" />\n  <odx-circular-progress class=\"odx-auth-loading-screen__spinner\" value=\"-1\" size=\"medium\" stroke=\"3\">\n    <odx-icon [name]=\"icon$ | async\" iconSet=\"core\" />\n  </odx-circular-progress>\n  @if (authConfig.loadingScreenMessage; as content) {\n    <p class=\"odx-auth-loading-screen__message\">\n      <ng-template [odxDynamicView]=\"content\" />\n    </p>\n  }\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);inset:0;position:fixed;z-index:var(--odx-v-layer-6)}.odx-auth-loading-screen__content{animation:odx-auth-loading-screen-animation .75s ease;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.odx-auth-loading-screen__message{text-align:center}.odx-auth-loading-screen__spinner{position:relative}.odx-auth-loading-screen__spinner .odx-icon{left:50%;position:absolute;top: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", "identifier"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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\" />\n  <odx-circular-progress class=\"odx-auth-loading-screen__spinner\" value=\"-1\" size=\"medium\" stroke=\"3\">\n    <odx-icon [name]=\"icon$ | async\" iconSet=\"core\" />\n  </odx-circular-progress>\n  @if (authConfig.loadingScreenMessage; as content) {\n    <p class=\"odx-auth-loading-screen__message\">\n      <ng-template [odxDynamicView]=\"content\" />\n    </p>\n  }\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);inset:0;position:fixed;z-index:var(--odx-v-layer-6)}.odx-auth-loading-screen__content{animation:odx-auth-loading-screen-animation .75s ease;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.odx-auth-loading-screen__message{text-align:center}.odx-auth-loading-screen__spinner{position:relative}.odx-auth-loading-screen__spinner .odx-icon{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }, { 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: "18.2.13", ngImport: i0, type: AuthLoadingScreenComponent, decorators: [{
             type: Component,
@@ -668,7 +785,6 @@ class AuthService {
      * @returns {URL} The issuer URL.
      */
     getIssuer() {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         return new URL(this.oauthService.issuer);
     }
     /**
@@ -931,125 +1047,6 @@ var translations = {
     },
 };
 
-/**
- * An abstract directive that integrates with the `LoadingSpinnerDirective` and `AuthService` to manage loading states based on authentication redirection.
- *
- * This directive automatically sets the `autoColor` property of the `LoadingSpinnerDirective` to `true` and subscribes to the `isRedirecting$` observable from the `AuthService`.
- * When `isRedirecting$` emits a value, it updates the `isLoading` property of the `LoadingSpinnerDirective`.
- */
-class AuthActionDirective {
-    constructor() {
-        this.takeUntilDestroyed = untilDestroyed();
-        this.loadingSpinnerDirective = inject(LoadingSpinnerDirective, { self: true });
-        this.authService = inject(AuthService);
-    }
-    ngAfterViewInit() {
-        this.loadingSpinnerDirective.autoColor = true;
-        this.authService.isRedirecting$.pipe(this.takeUntilDestroyed()).subscribe((isRedirecting) => {
-            this.loadingSpinnerDirective.isLoading = isRedirecting;
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AuthActionDirective, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthActionDirective, decorators: [{
-            type: Directive
-        }] });
-
-/**
- * A directive that handles the sign-in action for a button element.
- *
- * This directive extends the `AuthActionDirective` and uses the `LoadingSpinnerDirective`
- * to show a loading spinner during the sign-in process.
- *
- * @see {AuthActionDirective}
- * @see {LoadingSpinnerDirective}
- *
- * @example
- * ```html
- * <button odxButton odxAuthSignIn (odxAuthSignIn)="onSignIn()">Sign In</button>
- * ```
- */
-class SignInDirective extends AuthActionDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Emits an event after the sign-in action is completed.
-         *
-         * @type {EventEmitter<void>}
-         */
-        // eslint-disable-next-line @angular-eslint/no-output-rename
-        this.afterSignIn = new EventEmitter();
-    }
-    handleClick() {
-        this.authService.signIn();
-        this.afterSignIn.next();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: SignInDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[odxButton][odxAuthSignIn]',
-                    hostDirectives: [LoadingSpinnerDirective],
-                }]
-        }], propDecorators: { afterSignIn: [{
-                type: Output,
-                args: ['odxAuthSignIn']
-            }], handleClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
-/**
- * A directive that handles the sign-out action for a button element.
- *
- * This directive extends the `AuthActionDirective` and uses the `LoadingSpinnerDirective`
- * to show a loading spinner during the sign-out process.
- *
- * @see {AuthActionDirective}
- * @see {LoadingSpinnerDirective}
- *
- * @example
- * ```html
- * <button odxButton odxAuthSignOut (odxAuthSignOut)="onSignOut()">Sign Out</button>
- * ```
- */
-class SignOutDirective extends AuthActionDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Emits an event after the sign-out action is completed.
-         *
-         * @type {EventEmitter<void>}
-         */
-        // eslint-disable-next-line @angular-eslint/no-output-rename
-        this.afterSignOut = new EventEmitter();
-    }
-    handleClick() {
-        this.authService.signOut();
-        this.afterSignOut.next();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignOutDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: SignOutDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[odxButton][odxAuthSignOut]',
-                    hostDirectives: [LoadingSpinnerDirective],
-                }]
-        }], propDecorators: { afterSignOut: [{
-                type: Output,
-                args: ['odxAuthSignOut']
-            }], handleClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
-
 class AuthComponent {
     constructor() {
         this.authConfig = injectAuthConfig();
@@ -1071,22 +1068,11 @@ class AuthComponent {
         this.hideInstitution = input(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AuthComponent, isStandalone: true, selector: "odx-auth", inputs: { hideInstitution: { classPropertyName: "hideInstitution", publicName: "hideInstitution", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslations(translations)], ngImport: i0, template: "<odx-action-group>\n  @if (vm$ | async; as vm) {\n    <ng-container ngProjectAs=\"[odxButton]\">\n      @if (vm.isAuthenticated) {\n        <button odxButton [odxDropdown]=\"userProfileMenu\" [odxDropdownOptions]=\"dropdownOptions\" data-testid=\"odx-auth-user-profile-button\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" />\n        </button>\n      } @else {\n        <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"secondary\" data-testid=\"odx-auth-sign-in-button\">\n          <odx-icon name=\"user\" alignLeft />\n          {{ 'signInButtonText' | odxTranslate | async }}\n        </button>\n      }\n      <ng-template #userProfileMenu>\n        @if (!hideInstitution() && vm.idClaims?.institutionName; as institutionName) {\n          <odx-area-header class=\"odx-padding-x-12 odx-padding-bottom-8\" size=\"small\">\n            <odx-area-header-subtitle class=\"odx-auth-institution-name\">{{ institutionName }}</odx-area-header-subtitle>\n          </odx-area-header>\n        }\n        <odx-area-header class=\"odx-padding-x-12\" size=\"small\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" ngProjectAs=\"odx-avatar\" />\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 />\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 />\n          </button>\n        </div>\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-container>\n  }\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: AreaHeaderModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: i2$1.AreaHeaderComponent, selector: "odx-area-header", inputs: ["size"] }, { kind: "directive", type: i2$1.AreaHeaderSubtitleDirective, selector: "odx-area-header-subtitle" }, { kind: "component", type: i3$1.AvatarComponent, selector: "odx-avatar", inputs: ["size", "variant"] }, { kind: "component", type: i4.ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: i3.IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: i7.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AuthComponent, isStandalone: true, selector: "odx-auth", inputs: { hideInstitution: { classPropertyName: "hideInstitution", publicName: "hideInstitution", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideTranslations(translations)], ngImport: i0, template: "<odx-action-group>\n  @if (vm$ | async; as vm) {\n    <ng-container ngProjectAs=\"[odxButton]\">\n      @if (vm.isAuthenticated) {\n        <button odxButton [odxDropdown]=\"userProfileMenu\" [odxDropdownOptions]=\"dropdownOptions\" data-testid=\"odx-auth-user-profile-button\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" />\n        </button>\n      } @else {\n        <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"secondary\" data-testid=\"odx-auth-sign-in-button\">\n          <odx-icon name=\"user\" alignLeft />\n          {{ 'signInButtonText' | odxTranslate | async }}\n        </button>\n      }\n      <ng-template #userProfileMenu>\n        @if ((!hideInstitution() && vm.idClaims?.institutionName) || 'Dr\u00E4gerwerk AG & Co. KGaA'; as institutionName) {\n          <p class=\"odx-padding-x-8\" data-testid=\"odx-auth-institution-name\">{{ institutionName }}</p>\n        }\n        <odx-area-header class=\"odx-padding-x-8 odx-margin-y-12\" size=\"small\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" ngProjectAs=\"odx-avatar\" />\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 />\n        <odx-auth-actions [claims]=\"vm.idClaims\" />\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-container>\n  }\n</odx-action-group>\n", styles: [".odx-auth-user-profile .odx-dropdown__inner{border-block-width:calc(var(--odx-vertical-rythm-base-size) * .75);max-width:max(400px,25vw);min-width:320px}\n"], dependencies: [{ kind: "ngmodule", type: AreaHeaderModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "component", type: i2$1.AreaHeaderComponent, selector: "odx-area-header", inputs: ["size"] }, { kind: "directive", type: i2$1.AreaHeaderSubtitleDirective, selector: "odx-area-header-subtitle" }, { kind: "component", type: i3$1.AvatarComponent, selector: "odx-avatar", inputs: ["size", "variant"] }, { kind: "component", type: i4.ActionGroupComponent, selector: "odx-action-group", inputs: ["reverse"] }, { kind: "component", type: i5.ButtonComponent, selector: "button[odxButton], a[odxButton]", inputs: ["variant", "size"] }, { kind: "component", type: i3.IconComponent, selector: "odx-icon", inputs: ["inline", "size", "name", "iconSet", "identifier"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "directive", type: i7.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: SignInDirective, selector: "[odxButton][odxAuthSignIn]", outputs: ["odxAuthSignIn"] }, { 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: "18.2.13", ngImport: i0, type: AuthComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'odx-auth', imports: [
-                        AreaHeaderModule,
-                        DropdownModule,
-                        HeaderModule,
-                        LogoDirective,
-                        SignInDirective,
-                        SignOutDirective,
-                        LoadingSpinnerModule,
-                        AuthActionsComponent,
-                        TranslatePipe,
-                        AsyncPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [provideTranslations(translations)], template: "<odx-action-group>\n  @if (vm$ | async; as vm) {\n    <ng-container ngProjectAs=\"[odxButton]\">\n      @if (vm.isAuthenticated) {\n        <button odxButton [odxDropdown]=\"userProfileMenu\" [odxDropdownOptions]=\"dropdownOptions\" data-testid=\"odx-auth-user-profile-button\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" />\n        </button>\n      } @else {\n        <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"secondary\" data-testid=\"odx-auth-sign-in-button\">\n          <odx-icon name=\"user\" alignLeft />\n          {{ 'signInButtonText' | odxTranslate | async }}\n        </button>\n      }\n      <ng-template #userProfileMenu>\n        @if (!hideInstitution() && vm.idClaims?.institutionName; as institutionName) {\n          <odx-area-header class=\"odx-padding-x-12 odx-padding-bottom-8\" size=\"small\">\n            <odx-area-header-subtitle class=\"odx-auth-institution-name\">{{ institutionName }}</odx-area-header-subtitle>\n          </odx-area-header>\n        }\n        <odx-area-header class=\"odx-padding-x-12\" size=\"small\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" ngProjectAs=\"odx-avatar\" />\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 />\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 />\n          </button>\n        </div>\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-container>\n  }\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"] }]
+            args: [{ standalone: true, selector: 'odx-auth', imports: [AreaHeaderModule, DropdownModule, HeaderModule, SignInDirective, LoadingSpinnerModule, AuthActionsComponent, TranslatePipe, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [provideTranslations(translations)], template: "<odx-action-group>\n  @if (vm$ | async; as vm) {\n    <ng-container ngProjectAs=\"[odxButton]\">\n      @if (vm.isAuthenticated) {\n        <button odxButton [odxDropdown]=\"userProfileMenu\" [odxDropdownOptions]=\"dropdownOptions\" data-testid=\"odx-auth-user-profile-button\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" />\n        </button>\n      } @else {\n        <button class=\"odx-auth-sign-in\" odxButton odxAuthSignIn variant=\"secondary\" data-testid=\"odx-auth-sign-in-button\">\n          <odx-icon name=\"user\" alignLeft />\n          {{ 'signInButtonText' | odxTranslate | async }}\n        </button>\n      }\n      <ng-template #userProfileMenu>\n        @if ((!hideInstitution() && vm.idClaims?.institutionName) || 'Dr\u00E4gerwerk AG & Co. KGaA'; as institutionName) {\n          <p class=\"odx-padding-x-8\" data-testid=\"odx-auth-institution-name\">{{ institutionName }}</p>\n        }\n        <odx-area-header class=\"odx-padding-x-8 odx-margin-y-12\" size=\"small\">\n          <ng-template [ngTemplateOutlet]=\"userAvatar\" ngProjectAs=\"odx-avatar\" />\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 />\n        <odx-auth-actions [claims]=\"vm.idClaims\" />\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-container>\n  }\n</odx-action-group>\n", styles: [".odx-auth-user-profile .odx-dropdown__inner{border-block-width:calc(var(--odx-vertical-rythm-base-size) * .75);max-width:max(400px,25vw);min-width:320px}\n"] }]
         }] });
 
 class AuthDirective {
@@ -1117,7 +1103,7 @@ class AuthDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: AuthDirective, isStandalone: true, selector: "ng-template[odxAuth]", inputs: { authorizationHandler: ["odxAuth", "authorizationHandler"], elseTemplate: ["odxAuthElse", "elseTemplate"] }, hostDirectives: [{ directive: i1.NgIf }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", ngImport: i0, type: AuthDirective, decorators: [{
             type: Directive,