@acorex/modules 20.8.19 → 20.8.22

package/fesm2022/{acorex-modules-auth-acorex-modules-auth-9Tz_Jq63.mjs → acorex-modules-auth-acorex-modules-auth-ilqI5CxA.mjs}

@@ -3,36 +3,40 @@ import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
 import * as i1$3 from '@angular/common/http';
 import { HttpErrorResponse } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { inject, isDevMode, Injectable, InjectionToken, output, Component, viewChild, input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, signal, NgModule } from '@angular/core';
+import { inject, isDevMode, Injectable, InjectionToken, output, viewChild, viewChildren, signal, computed, effect, ChangeDetectionStrategy, Component, input, ViewChild, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i1$2 from '@angular/router';
 import { Router, RouterModule, ROUTES } from '@angular/router';
 import * as i1$5 from '@acorex/platform/common';
 import { AXPHomePageService, AXPDataProvider, AXP_ROOT_CONFIG_TOKEN, AXPSettingsService, AXPCommonModule, AXP_MENU_PROVIDER, AXP_SETTING_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import { AXPCommandExecutor, provideCommandSetups } from '@acorex/platform/runtime';
-import * as i1 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i1$4 from '@acorex/platform/core';
 import { AXPIconLogoConfig, AXPPlatformScope, AXPComponentSlotModule, provideLazyProvider } from '@acorex/platform/core';
-import * as i1$1 from '@acorex/components/button';
+import * as i1 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i3 from '@acorex/components/decorators';
+import * as i3$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i2 from '@acorex/components/popover';
+import * as i2$2 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
-import { AXLoadingModule } from '@acorex/components/loading';
-import { AXPLogoComponent, AXPUserAvatarComponent } from '@acorex/platform/layout/components';
+import * as i5 from '@acorex/cdk/list-navigation';
+import { AXListNavigationDirective, AXListNavigationItemDirective, AXListNavigationModule } from '@acorex/cdk/list-navigation';
+import * as i4 from '@acorex/components/search-box';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import * as i3 from '@acorex/components/select-box';
+import { AXSelectBoxModule } from '@acorex/components/select-box';
+import * as i2 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+import * as i2$1 from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import { AXMApplicationService } from '@acorex/modules/application-management';
+import { AXPLogoComponent, AXPUserAvatarComponent } from '@acorex/platform/layout/components';
+import { first, Subject, timer, map, firstValueFrom } from 'rxjs';
 import { AXAvatarModule } from '@acorex/components/avatar';
 import { AXImageModule } from '@acorex/components/image';
+import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXPlatform } from '@acorex/core/platform';
-import * as i2$2 from '@acorex/core/translation';
-import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
-import * as i3$1 from '@acorex/components/search-box';
-import { AXSearchBoxModule } from '@acorex/components/search-box';
-import * as i2$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { first, Subject, timer, map, firstValueFrom } from 'rxjs';
 import { startWith, switchMap, tap } from 'rxjs/operators';
 import { AXMEntityCrudServiceImpl } from '@acorex/platform/layout/entity';
 
@@ -132,22 +136,22 @@ const routes = [
             },
             {
                 path: '',
-                loadComponent: () => import('./acorex-modules-auth-master.layout-DyBOEl3Z.mjs').then((c) => c.AXPAuthMasterLayoutComponent),
-                loadChildren: () => import('./acorex-modules-auth-login.module-BnzKJuwI.mjs').then((c) => c.AXPSignInModule),
+                loadComponent: () => import('./acorex-modules-auth-master.layout-C5neEC1G.mjs').then((c) => c.AXPAuthMasterLayoutComponent),
+                loadChildren: () => import('./acorex-modules-auth-login.module-Cw-N4q-C.mjs').then((c) => c.AXPSignInModule),
             },
             {
                 path: '',
-                loadComponent: () => import('./acorex-modules-auth-master.layout-DyBOEl3Z.mjs').then((c) => c.AXPAuthMasterLayoutComponent),
-                loadChildren: () => import('./acorex-modules-auth-two-factor.module-CH0SPs-d.mjs').then((c) => c.AXPTwoFactorModule),
+                loadComponent: () => import('./acorex-modules-auth-master.layout-C5neEC1G.mjs').then((c) => c.AXPAuthMasterLayoutComponent),
+                loadChildren: () => import('./acorex-modules-auth-two-factor.module-W31v75W2.mjs').then((c) => c.AXPTwoFactorModule),
             },
             {
                 path: '',
-                loadComponent: () => import('./acorex-modules-auth-master.layout-DyBOEl3Z.mjs').then((c) => c.AXPAuthMasterLayoutComponent),
-                loadChildren: () => import('./acorex-modules-auth-routes-CMdYNEdU.mjs').then((c) => c),
+                loadComponent: () => import('./acorex-modules-auth-master.layout-C5neEC1G.mjs').then((c) => c.AXPAuthMasterLayoutComponent),
+                loadChildren: () => import('./acorex-modules-auth-routes-PKJ3dtI0.mjs').then((c) => c),
             },
             {
                 path: 'axp-oauth-callback',
-                loadComponent: () => import('./acorex-modules-auth-oauth-callback.component-B1qqH43K.mjs').then((c) => c.AXPOAuthCallbackComponent),
+                loadComponent: () => import('./acorex-modules-auth-oauth-callback.component-0bBwkZ35.mjs').then((c) => c.AXPOAuthCallbackComponent),
             },
             {
                 path: 'account',
@@ -170,29 +174,94 @@ const routes = [
 ];
 
 class AXPAppChooserListComponent {
+    //#endregion
+    //#region ---- Constructor ----
     constructor() {
+        //#region ---- Services & Dependencies ----
         this.sessionService = inject(AXPSessionService);
         this.homePageService = inject(AXPHomePageService);
         this.authStrategyRegistry = inject(AXPAuthStrategyRegistryService);
         this.applicationService = inject(AXMApplicationService);
         this.strategyName = this.sessionService.getSessionData()?.strategy;
         this.strategy = this.authStrategyRegistry.get(this.strategyName);
-        this.selectedApplication = null;
-        this.applications$ = this.sessionService.applications$;
+        //#endregion
+        //#region ---- Outputs ----
         this.applicationChosen = output();
+        //#endregion
+        //#region ---- View References ----
+        this.listNav = viewChild(AXListNavigationDirective, ...(ngDevMode ? [{ debugName: "listNav" }] : []));
+        this.listItems = viewChildren(AXListNavigationItemDirective, ...(ngDevMode ? [{ debugName: "listItems" }] : []));
+        //#endregion
+        //#region ---- State ----
+        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.allApplications = signal([], ...(ngDevMode ? [{ debugName: "allApplications" }] : []));
+        this.useSelectBox = computed(() => this.allApplications().length > 3, ...(ngDevMode ? [{ debugName: "useSelectBox" }] : []));
+        this.selectedApplication = signal(null, ...(ngDevMode ? [{ debugName: "selectedApplication" }] : []));
+        this.isSelectBoxOpen = signal(false, ...(ngDevMode ? [{ debugName: "isSelectBoxOpen" }] : []));
+        this.canApply = computed(() => !!this.selectedApplication(), ...(ngDevMode ? [{ debugName: "canApply" }] : []));
+        this.skeletonItems = [1, 2, 3];
+        effect(() => {
+            if (!this.isLoading() && !this.useSelectBox() && this.allApplications().length > 0) {
+                queueMicrotask(() => this.focusFirstListItem());
+            }
+        });
+    }
+    //#endregion
+    //#region ---- Lifecycle Methods ----
+    ngOnInit() {
+        this.sessionService.applications$.pipe(first()).subscribe((applications) => {
+            this.allApplications.set(applications);
+            if (applications.length > 0) {
+                this.selectedApplication.set(applications[0]);
+            }
+            this.isLoading.set(false);
+        });
+    }
+    //#endregion
+    //#region ---- UI Handlers ----
+    handleApplicationSelect(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        this.selectedApplication.set(event.component.selectedItems[0] ?? null);
+    }
+    handleListItemKeyDown(event, application) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            void this.chooseApplication(application);
+        }
+    }
+    handleSelectBoxKeyDown(event) {
+        if (!(event instanceof KeyboardEvent)) {
+            return;
+        }
+        if (event.key !== 'Enter' && event.key !== 'NumpadEnter') {
+            return;
+        }
+        if (this.isSelectBoxOpen()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.canApply()) {
+            this.applySelection();
+        }
+    }
+    applySelection() {
+        const application = this.selectedApplication();
+        if (application) {
+            void this.chooseApplication(application);
+        }
     }
     async chooseApplication(item) {
-        this.selectedApplication = item;
         const tenantId = this.sessionService.tenant?.id || '';
         if (!tenantId) {
             throw new Error('Tenant ID is missing. Cannot choose application.');
         }
-        // Get the full application entity to access its editions
         const fullApplication = await this.applicationService.getOne(item.id);
         if (!fullApplication) {
             throw new Error(`Application not found: ${item.id}`);
         }
-        // Determine which edition to use (from item.edition or default to first edition)
         let selectedEdition = item.edition;
         if (!selectedEdition && fullApplication.editions && fullApplication.editions.length > 0) {
             selectedEdition = {
@@ -201,7 +270,6 @@ class AXPAppChooserListComponent {
                 description: fullApplication.editions[0].description,
             };
         }
-        // Update application with edition information and version from full entity
         const applicationWithEdition = {
             ...item,
             version: fullApplication.version || item.version,
@@ -216,15 +284,34 @@ class AXPAppChooserListComponent {
             await this.sessionService.updateToken(updateContext);
         }
         this.applicationChosen.emit();
-        return await this.homePageService.navigateTo();
+        await this.homePageService.navigateTo();
+    }
+    //#endregion
+    //#region ---- Utility Methods ----
+    focusFirstListItem() {
+        const nav = this.listNav();
+        const items = this.listItems();
+        if (nav && items.length > 0) {
+            nav.navigateTo(items[0]);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPAppChooserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPAppChooserListComponent, isStandalone: true, selector: "axp-app-chooser-list", outputs: { applicationChosen: "applicationChosen" }, ngImport: i0, template: "<div class=\"ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\">\n  @for (application of applications$ | async; track $index) {\n  <div\n    class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-3 ax-items-start ax-cursor-pointer\"\n    (click)=\"chooseApplication(application)\">\n    <div class=\"ax-flex ax-flex-1 ax-gap-2 ax-items-center ax-justify-center ax-font-medium\">\n      <div\n        class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\">\n        <axp-logo [source]=\"application.logo\" [attr.alt]=\"application.title\"\n          class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 ax-rounded-full\"></axp-logo>\n      </div>\n      <span class=\"ax-flex-1 ax-text-start md:ax-text-base ax-text-sm\">{{ application.title }}</span>\n      <span class=\"ax-text-muted ax-text-xs\">{{ application.edition?.title }}</span>\n    </div>\n  </div>\n  }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPAppChooserListComponent, isStandalone: true, selector: "axp-app-chooser-list", outputs: { applicationChosen: "applicationChosen" }, viewQueries: [{ propertyName: "listNav", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: AXListNavigationItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n  <div class=\"ax-w-full ax-flex ax-flex-col ax-gap-3\">\n    @for (item of skeletonItems; track item) {\n      <div class=\"ax-flex ax-gap-2 ax-items-center ax-py-1\">\n        <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full ax-shrink-0\"></ax-skeleton>\n        <ax-skeleton [animated]=\"true\" class=\"ax-flex-1 ax-h-6 ax-rounded-md\"></ax-skeleton>\n      </div>\n    }\n  </div>\n} @else if (useSelectBox()) {\n  <div class=\"ax-w-full ax-flex ax-flex-col ax-gap-4\" (keydown.capture)=\"handleSelectBoxKeyDown($event)\">\n    <ax-select-box\n      class=\"ax-w-full\"\n      [dataSource]=\"allApplications()\"\n      textField=\"title\"\n      valueField=\"id\"\n      [itemHeight]=\"56\"\n      [value]=\"selectedApplication()\"\n      [placeholder]=\"('@auth:application-chooser.select-placeholder' | translate | async) ?? ''\"\n      [itemTemplate]=\"applicationItemTemplate\"\n      (onOpened)=\"isSelectBoxOpen.set(true)\"\n      (onClosed)=\"isSelectBoxOpen.set(false)\"\n      (onValueChanged)=\"handleApplicationSelect($event)\"\n    >\n      <ax-search-box look=\"fill\"></ax-search-box>\n    </ax-select-box>\n    <ax-button\n      class=\"ax-w-full\"\n      color=\"primary\"\n      [disabled]=\"!canApply()\"\n      [text]=\"('@general:actions.apply.title' | translate | async) ?? ''\"\n      (onClick)=\"applySelection()\"\n    ></ax-button>\n  </div>\n} @else {\n  <div\n    axListNavigation\n    #listNav=\"axListNavigation\"\n    class=\"ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\"\n    role=\"listbox\"\n  >\n    @for (application of allApplications(); track application.id) {\n      <div\n        axListNavigationItem\n        #navItem=\"axListNavigationItem\"\n        tabindex=\"0\"\n        role=\"option\"\n        [attr.aria-selected]=\"navItem.isActive()\"\n        class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-1 ax-px-2 ax-items-start ax-cursor-pointer ax-rounded-md ax-transition-colors ax-outline-none hover:ax-bg-primary-lightest hover:dark:ax-bg-primary-dark\"\n        [class.ax-bg-primary-lightest]=\"navItem.isActive()\"\n        [class.dark:ax-bg-primary-dark]=\"navItem.isActive()\"\n        (click)=\"chooseApplication(application)\"\n        (keydown)=\"handleListItemKeyDown($event, application)\"\n      >\n        <div class=\"ax-flex ax-flex-1 ax-gap-2 ax-items-center ax-justify-center ax-font-medium\">\n          <div\n            class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\"\n          >\n            <axp-logo\n              [source]=\"application.logo\"\n              [attr.alt]=\"application.title\"\n              class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 dark:ax-bg-neutral-800 ax-rounded-full\"\n            ></axp-logo>\n          </div>\n          <span class=\"ax-flex-1 ax-text-start md:ax-text-base ax-text-sm\">{{ application.title }}</span>\n          <span class=\"ax-text-muted ax-text-xs\">{{ application.edition?.title }}</span>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #applicationItemTemplate let-item>\n  <div class=\"ax-flex ax-gap-2 ax-items-center ax-p-2\">\n    <div\n      class=\"ax-w-10 ax-h-10 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-shrink-0\"\n    >\n      <axp-logo\n        [source]=\"item.data.logo\"\n        [attr.alt]=\"item.data.title\"\n        class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-w-8 ax-h-8 ax-bg-neutral-200 ax-rounded-full\"\n      ></axp-logo>\n    </div>\n    <span class=\"ax-flex-1 ax-text-start md:ax-text-base ax-text-sm\">{{ item.data.title }}</span>\n    @if (item.data.edition?.title) {\n      <span class=\"ax-text-muted ax-text-xs\">{{ item.data.edition.title }}</span>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i5.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i5.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPAppChooserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-app-chooser-list', imports: [CommonModule, AXDecoratorModule, AXLoadingModule, AXPLogoComponent], template: "<div class=\"ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\">\n  @for (application of applications$ | async; track $index) {\n  <div\n    class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-3 ax-items-start ax-cursor-pointer\"\n    (click)=\"chooseApplication(application)\">\n    <div class=\"ax-flex ax-flex-1 ax-gap-2 ax-items-center ax-justify-center ax-font-medium\">\n      <div\n        class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\">\n        <axp-logo [source]=\"application.logo\" [attr.alt]=\"application.title\"\n          class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 ax-rounded-full\"></axp-logo>\n      </div>\n      <span class=\"ax-flex-1 ax-text-start md:ax-text-base ax-text-sm\">{{ application.title }}</span>\n      <span class=\"ax-text-muted ax-text-xs\">{{ application.edition?.title }}</span>\n    </div>\n  </div>\n  }\n</div>" }]
-        }], propDecorators: { applicationChosen: [{ type: i0.Output, args: ["applicationChosen"] }] } });
+            args: [{ selector: 'axp-app-chooser-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXSkeletonModule,
+                        AXSelectBoxModule,
+                        AXSearchBoxModule,
+                        AXListNavigationModule,
+                        AXTranslationModule,
+                        AXPLogoComponent,
+                    ], template: "@if (isLoading()) {\n  <div class=\"ax-w-full ax-flex ax-flex-col ax-gap-3\">\n    @for (item of skeletonItems; track item) {\n      <div class=\"ax-flex ax-gap-2 ax-items-center ax-py-1\">\n        <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full ax-shrink-0\"></ax-skeleton>\n        <ax-skeleton [animated]=\"true\" class=\"ax-flex-1 ax-h-6 ax-rounded-md\"></ax-skeleton>\n      </div>\n    }\n  </div>\n} @else if (useSelectBox()) {\n  <div class=\"ax-w-full ax-flex ax-flex-col ax-gap-4\" (keydown.capture)=\"handleSelectBoxKeyDown($event)\">\n    <ax-select-box\n      class=\"ax-w-full\"\n      [dataSource]=\"allApplications()\"\n      textField=\"title\"\n      valueField=\"id\"\n      [itemHeight]=\"56\"\n      [value]=\"selectedApplication()\"\n      [placeholder]=\"('@auth:application-chooser.select-placeholder' | translate | async) ?? ''\"\n      [itemTemplate]=\"applicationItemTemplate\"\n      (onOpened)=\"isSelectBoxOpen.set(true)\"\n      (onClosed)=\"isSelectBoxOpen.set(false)\"\n      (onValueChanged)=\"handleApplicationSelect($event)\"\n    >\n      <ax-search-box look=\"fill\"></ax-search-box>\n    </ax-select-box>\n    <ax-button\n      class=\"ax-w-full\"\n      color=\"primary\"\n      [disabled]=\"!canApply()\"\n      [text]=\"('@general:actions.apply.title' | translate | async) ?? ''\"\n      (onClick)=\"applySelection()\"\n    ></ax-button>\n  </div>\n} @else {\n  <div\n    axListNavigation\n    #listNav=\"axListNavigation\"\n    class=\"ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\"\n    role=\"listbox\"\n  >\n    @for (application of allApplications(); track application.id) {\n      <div\n        axListNavigationItem\n        #navItem=\"axListNavigationItem\"\n        tabindex=\"0\"\n        role=\"option\"\n        [attr.aria-selected]=\"navItem.isActive()\"\n        class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-1 ax-px-2 ax-items-start ax-cursor-pointer ax-rounded-md ax-transition-colors ax-outline-none hover:ax-bg-primary-lightest hover:dark:ax-bg-primary-dark\"\n        [class.ax-bg-primary-lightest]=\"navItem.isActive()\"\n        [class.dark:ax-bg-primary-dark]=\"navItem.isActive()\"\n        (click)=\"chooseApplication(application)\"\n        (keydown)=\"handleListItemKeyDown($event, application)\"\n      >\n        <div class=\"ax-flex ax-flex-1 ax-gap-2 ax-items-center ax-justify-center ax-font-medium\">\n          <div\n            class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\"\n          >\n            <axp-logo\n              [source]=\"application.logo\"\n              [attr.alt]=\"application.title\"\n              class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 dark:ax-bg-neutral-800 ax-rounded-full\"\n            ></axp-logo>\n          </div>\n          <span class=\"ax-flex-1 ax-text-start md:ax-text-base ax-text-sm\">{{ application.title }}</span>\n          <span class=\"ax-text-muted ax-text-xs\">{{ application.edition?.title }}</span>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #applicationItemTemplate let-item>\n  <div class=\"ax-flex ax-gap-2 ax-items-center ax-p-2\">\n    <div\n      class=\"ax-w-10 ax-h-10 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-shrink-0\"\n    >\n      <axp-logo\n        [source]=\"item.data.logo\"\n        [attr.alt]=\"item.data.title\"\n        class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-w-8 ax-h-8 ax-bg-neutral-200 ax-rounded-full\"\n      ></axp-logo>\n    </div>\n    <span class=\"ax-flex-1 ax-text-start md:ax-text-base ax-text-sm\">{{ item.data.title }}</span>\n    @if (item.data.edition?.title) {\n      <span class=\"ax-text-muted ax-text-xs\">{{ item.data.edition.title }}</span>\n    }\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { applicationChosen: [{ type: i0.Output, args: ["applicationChosen"] }], listNav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXListNavigationDirective), { isSignal: true }] }], listItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXListNavigationItemDirective), { isSignal: true }] }] } });
 
 class AXMAppChooserSlotComponent {
     constructor() {
@@ -236,7 +323,7 @@ class AXMAppChooserSlotComponent {
         this.appPopover()?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXMAppChooserSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXMAppChooserSlotComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "appPopover", first: true, predicate: ["appPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (((applications$ | async)?.length ?? 0) > 1) {\n  <ax-button color=\"primary\" #appChooser>\n    <ax-icon class=\"fa-regular fa-grid-2\"> </ax-icon>\n  </ax-button>\n  <ax-popover [target]=\"appChooser\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" #appPopover>\n    <div class=\"ax-bg-lightest ax-border ax-overflow-hidden ax-rounded-md ax-shadow-md ax-w-full ax-min-w-64 ax-p-3\">\n      <axp-app-chooser-list (applicationChosen)=\"closePopover()\"></axp-app-chooser-list>\n    </div>\n  </ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPAppChooserListComponent, selector: "axp-app-chooser-list", outputs: ["applicationChosen"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXMAppChooserSlotComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "appPopover", first: true, predicate: ["appPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (((applications$ | async)?.length ?? 0) > 1) {\n  <ax-button color=\"primary\" #appChooser>\n    <ax-icon class=\"fa-regular fa-grid-2\"> </ax-icon>\n  </ax-button>\n  <ax-popover [target]=\"appChooser\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" #appPopover>\n    <div class=\"ax-bg-lightest ax-border ax-overflow-hidden ax-rounded-md ax-shadow-md ax-w-full ax-min-w-64 ax-p-3\">\n      <axp-app-chooser-list (applicationChosen)=\"closePopover()\"></axp-app-chooser-list>\n    </div>\n  </ax-popover>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPAppChooserListComponent, selector: "axp-app-chooser-list", outputs: ["applicationChosen"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXMAppChooserSlotComponent, decorators: [{
             type: Component,
@@ -244,42 +331,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
         }], propDecorators: { appPopover: [{ type: i0.ViewChild, args: ['appPopover', { isSignal: true }] }] } });
 
 class AXPTenantChooserListComponent {
+    //#endregion
+    //#region ---- Constructor ----
     constructor() {
+        //#region ---- Services & Dependencies ----
         this.sessionService = inject(AXPSessionService);
         this.authStrategyRegistry = inject(AXPAuthStrategyRegistryService);
         this.router = inject(Router);
         this.strategyName = this.sessionService.getSessionData()?.strategy;
         this.strategy = this.authStrategyRegistry.get(this.strategyName);
-        this.defaultLogo = new AXPIconLogoConfig('fa-solid fa-building', 'neutral-500');
+        //#endregion
+        //#region ---- Inputs & Outputs ----
         this.simple = input(false, ...(ngDevMode ? [{ debugName: "simple" }] : []));
-        this.searchValue = '';
-        this.showAll = false;
-        this.selectedTenant = null;
-        this.displayedTenants = [];
-        this.tenants$ = this.sessionService.tenants$;
         this.tenantChosen = output();
+        //#endregion
+        //#region ---- View References ----
+        this.listNav = viewChild(AXListNavigationDirective, ...(ngDevMode ? [{ debugName: "listNav" }] : []));
+        this.listItems = viewChildren(AXListNavigationItemDirective, ...(ngDevMode ? [{ debugName: "listItems" }] : []));
+        //#endregion
+        //#region ---- State ----
+        this.defaultLogo = new AXPIconLogoConfig('fa-solid fa-building', 'neutral-500');
+        this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.allTenants = signal([], ...(ngDevMode ? [{ debugName: "allTenants" }] : []));
+        this.useSelectBox = computed(() => this.allTenants().length > 3, ...(ngDevMode ? [{ debugName: "useSelectBox" }] : []));
+        this.selectedTenant = signal(null, ...(ngDevMode ? [{ debugName: "selectedTenant" }] : []));
+        this.isSelectBoxOpen = signal(false, ...(ngDevMode ? [{ debugName: "isSelectBoxOpen" }] : []));
+        this.canApply = computed(() => !!this.selectedTenant(), ...(ngDevMode ? [{ debugName: "canApply" }] : []));
+        this.skeletonItems = [1, 2, 3];
+        effect(() => {
+            if (!this.isLoading() && !this.useSelectBox() && this.allTenants().length > 0) {
+                queueMicrotask(() => this.focusFirstListItem());
+            }
+        });
     }
+    //#endregion
+    //#region ---- Lifecycle Methods ----
     ngOnInit() {
         this.sessionService.tenants$.pipe(first()).subscribe((tenants) => {
-            this.displayedTenants = tenants.slice(0, 4);
-            this.allTenants = tenants;
+            this.allTenants.set(tenants);
+            if (tenants.length > 0) {
+                this.selectedTenant.set(tenants[0]);
+            }
+            this.isLoading.set(false);
         });
     }
-    filterTenants(tenants) {
-        return tenants.filter((tenant) => tenant.title.toLowerCase().includes(this.searchValue.toLowerCase()));
+    //#endregion
+    //#region ---- UI Handlers ----
+    handleTenantSelect(event) {
+        if (!event.isUserInteraction) {
+            return;
+        }
+        this.selectedTenant.set(event.component.selectedItems[0] ?? null);
     }
-    handleSearch(event) {
-        if (event != undefined) {
-            this.searchValue = event;
-            this.displayedTenants = this.filterTenants(this.allTenants);
+    handleListItemKeyDown(event, tenant) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            void this.chooseTenant(tenant);
         }
     }
-    showAllTenants() {
-        this.showAll = !this.showAll;
-        this.displayedTenants = this.filterTenants(this.showAll ? this.allTenants : this.allTenants.slice(0, 4));
+    handleSelectBoxKeyDown(event) {
+        if (!(event instanceof KeyboardEvent)) {
+            return;
+        }
+        if (event.key !== 'Enter' && event.key !== 'NumpadEnter') {
+            return;
+        }
+        if (this.isSelectBoxOpen()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.canApply()) {
+            this.applySelection();
+        }
+    }
+    applySelection() {
+        const tenant = this.selectedTenant();
+        if (tenant) {
+            void this.chooseTenant(tenant);
+        }
     }
     async chooseTenant(item) {
-        this.selectedTenant = item;
         if (this.strategy) {
             const updateContext = {
                 tenant: item,
@@ -290,13 +422,32 @@ class AXPTenantChooserListComponent {
         this.tenantChosen.emit();
         return this.router.navigate(['/auth/account/app-chooser']);
     }
+    //#endregion
+    //#region ---- Utility Methods ----
+    focusFirstListItem() {
+        const nav = this.listNav();
+        const items = this.listItems();
+        if (nav && items.length > 0) {
+            nav.navigateTo(items[0]);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPTenantChooserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPTenantChooserListComponent, isStandalone: true, selector: "axp-tenant-chooser-list", inputs: { simple: { classPropertyName: "simple", publicName: "simple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tenantChosen: "tenantChosen" }, ngImport: i0, template: "@if (simple()) {\n<div class=\"ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\">\n    @for (tenant of tenants$ | async; track $index) {\n    <div class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-3 ax-items-start ax-cursor-pointer\"\n        (click)=\"chooseTenant(tenant)\">\n        <div class=\"ax-flex ax-flex-1 ax-gap-2 ax-items-center ax-font-medium\">\n            <div\n                class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\">\n                <axp-logo [source]=\"tenant.logo ?? defaultLogo\" [attr.alt]=\"tenant.title\"\n                    class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 ax-rounded-full\"></axp-logo>\n            </div>\n            <span class=\"ax-flex-1 ax-text-start md:ax-text-base ax-text-sm\">{{ tenant.title }}</span>\n        </div>\n    </div>\n    }\n</div>\n} @else {\n@if (allTenants && allTenants.length > 4) {\n<ax-search-box [placeholder]=\"'@general:search.title' | translate | async\" [ngModel]=\"searchValue\"\n    (ngModelChange)=\"handleSearch($event)\" class=\"ax-w-full\"><ax-clear-button></ax-clear-button></ax-search-box>\n<div class=\"ax-mt-3 ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\">\n    @for (tenant of displayedTenants; track $index) {\n    <div class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-3 ax-items-center ax-cursor-pointer\"\n        (click)=\"chooseTenant(tenant)\">\n        <div class=\"ax-flex ax-gap-2 ax-items-center ax-font-medium\">\n            <div\n                class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\">\n                <axp-logo [source]=\"tenant.logo ?? defaultLogo\" [attr.alt]=\"tenant.title\"\n                    class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 ax-rounded-full\"></axp-logo>\n            </div>\n            <span class=\"md:ax-text-base ax-text-sm ax-text-start\">{{ tenant.title }} </span>\n        </div>\n    </div>\n    }\n</div>\n} @else {\n<div class=\"ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\">\n    @for (tenant of displayedTenants; track $index) {\n    <div class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-3 ax-items-center ax-cursor-pointer\"\n        (click)=\"chooseTenant(tenant)\">\n        <div class=\"ax-flex ax-gap-2 ax-items-center ax-font-medium\">\n            <div\n                class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\">\n                <axp-logo [source]=\"tenant.logo ?? defaultLogo\" [attr.alt]=\"tenant.title\"\n                    class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 ax-rounded-full\"></axp-logo>\n            </div>\n            <span class=\"md:ax-text-base ax-text-sm ax-text-start\">{{ tenant.title }} </span>\n        </div>\n    </div>\n    }\n</div>\n}\n@if (allTenants && allTenants.length > 4) {\n<div class=\"ax-mt-6 ax-w-full ax-flex ax-justify-center\">\n    <ax-button (onClick)=\"showAllTenants()\" class=\"ax-w-full\" look=\"outline\" [text]=\"\n      showAll\n        ? ('@general:actions.view-less.title' | translate | async)\n        : ('@general:actions.view-all.title' | translate | async)\n    \"></ax-button>\n</div>\n}\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.AXTranslatorPipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPTenantChooserListComponent, isStandalone: true, selector: "axp-tenant-chooser-list", inputs: { simple: { classPropertyName: "simple", publicName: "simple", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tenantChosen: "tenantChosen" }, viewQueries: [{ propertyName: "listNav", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: AXListNavigationItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n  <div class=\"ax-w-full ax-flex ax-flex-col ax-gap-3\">\n    @for (item of skeletonItems; track item) {\n      <div class=\"ax-flex ax-gap-2 ax-items-center ax-py-1\">\n        <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full ax-shrink-0\"></ax-skeleton>\n        <ax-skeleton [animated]=\"true\" class=\"ax-flex-1 ax-h-6 ax-rounded-md\"></ax-skeleton>\n      </div>\n    }\n  </div>\n} @else if (useSelectBox()) {\n  <div class=\"ax-w-full ax-flex ax-flex-col ax-gap-4\" (keydown.capture)=\"handleSelectBoxKeyDown($event)\">\n    <ax-select-box\n      class=\"ax-w-full\"\n      [dataSource]=\"allTenants()\"\n      textField=\"title\"\n      valueField=\"id\"\n      [value]=\"selectedTenant()\"\n      [itemHeight]=\"56\"\n      [placeholder]=\"('@auth:tenant-chooser.select-placeholder' | translate | async) ?? ''\"\n      [itemTemplate]=\"tenantItemTemplate\"\n      (onOpened)=\"isSelectBoxOpen.set(true)\"\n      (onClosed)=\"isSelectBoxOpen.set(false)\"\n      (onValueChanged)=\"handleTenantSelect($event)\"\n    >\n      <ax-search-box look=\"fill\"></ax-search-box>\n    </ax-select-box>\n    <ax-button\n      class=\"ax-w-full\"\n      color=\"primary\"\n      [disabled]=\"!canApply()\"\n      [text]=\"('@general:actions.apply.title' | translate | async) ?? ''\"\n      (onClick)=\"applySelection()\"\n    ></ax-button>\n  </div>\n} @else {\n  <div\n    axListNavigation\n    #listNav=\"axListNavigation\"\n    class=\"ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\"\n    role=\"listbox\"\n  >\n    @for (tenant of allTenants(); track tenant.id) {\n      <div\n        axListNavigationItem\n        #navItem=\"axListNavigationItem\"\n        tabindex=\"0\"\n        role=\"option\"\n        [attr.aria-selected]=\"navItem.isActive()\"\n        class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-1 ax-px-2 ax-items-center ax-cursor-pointer ax-rounded-md ax-transition-colors ax-outline-none hover:ax-bg-primary-lightest hover:dark:ax-bg-primary-dark\"\n        [class.ax-bg-primary-lightest]=\"navItem.isActive()\"\n        [class.dark:ax-bg-primary-dark]=\"navItem.isActive()\"\n        [class.ax-items-start]=\"simple()\"\n        (click)=\"chooseTenant(tenant)\"\n        (keydown)=\"handleListItemKeyDown($event, tenant)\"\n      >\n        <div class=\"ax-flex ax-flex-1 ax-gap-2 ax-items-center ax-font-medium\" [class.ax-justify-center]=\"simple()\">\n          <div\n            class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\"\n          >\n            <axp-logo\n              [source]=\"tenant.logo ?? defaultLogo\"\n              [attr.alt]=\"tenant.title\"\n              class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 dark:ax-bg-neutral-800 ax-rounded-full\"\n            ></axp-logo>\n          </div>\n          <span class=\"ax-flex-1 ax-text-start md:ax-text-base ax-text-sm\">{{ tenant.title }}</span>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #tenantItemTemplate let-item>\n  <div class=\"ax-flex ax-gap-2 ax-items-center ax-p-2\">\n    <div\n      class=\"ax-w-10 ax-h-10 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-shrink-0\"\n    >\n      <axp-logo\n        [source]=\"item.data.logo ?? defaultLogo\"\n        [attr.alt]=\"item.data.title\"\n        class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-w-8 ax-h-8 ax-bg-neutral-200 ax-rounded-full\"\n      ></axp-logo>\n    </div>\n    <span class=\"ax-text-start md:ax-text-base ax-text-sm\">{{ item.data.title }}</span>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i3.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i5.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i5.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["source"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPTenantChooserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-tenant-chooser-list', imports: [CommonModule, FormsModule, AXTranslationModule, AXDecoratorModule, AXLoadingModule, AXPLogoComponent, AXSearchBoxModule, AXButtonModule], template: "@if (simple()) {\n<div class=\"ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\">\n    @for (tenant of tenants$ | async; track $index) {\n    <div class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-3 ax-items-start ax-cursor-pointer\"\n        (click)=\"chooseTenant(tenant)\">\n        <div class=\"ax-flex ax-flex-1 ax-gap-2 ax-items-center ax-font-medium\">\n            <div\n                class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\">\n                <axp-logo [source]=\"tenant.logo ?? defaultLogo\" [attr.alt]=\"tenant.title\"\n                    class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 ax-rounded-full\"></axp-logo>\n            </div>\n            <span class=\"ax-flex-1 ax-text-start md:ax-text-base ax-text-sm\">{{ tenant.title }}</span>\n        </div>\n    </div>\n    }\n</div>\n} @else {\n@if (allTenants && allTenants.length > 4) {\n<ax-search-box [placeholder]=\"'@general:search.title' | translate | async\" [ngModel]=\"searchValue\"\n    (ngModelChange)=\"handleSearch($event)\" class=\"ax-w-full\"><ax-clear-button></ax-clear-button></ax-search-box>\n<div class=\"ax-mt-3 ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\">\n    @for (tenant of displayedTenants; track $index) {\n    <div class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-3 ax-items-center ax-cursor-pointer\"\n        (click)=\"chooseTenant(tenant)\">\n        <div class=\"ax-flex ax-gap-2 ax-items-center ax-font-medium\">\n            <div\n                class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\">\n                <axp-logo [source]=\"tenant.logo ?? defaultLogo\" [attr.alt]=\"tenant.title\"\n                    class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 ax-rounded-full\"></axp-logo>\n            </div>\n            <span class=\"md:ax-text-base ax-text-sm ax-text-start\">{{ tenant.title }} </span>\n        </div>\n    </div>\n    }\n</div>\n} @else {\n<div class=\"ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\">\n    @for (tenant of displayedTenants; track $index) {\n    <div class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-3 ax-items-center ax-cursor-pointer\"\n        (click)=\"chooseTenant(tenant)\">\n        <div class=\"ax-flex ax-gap-2 ax-items-center ax-font-medium\">\n            <div\n                class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\">\n                <axp-logo [source]=\"tenant.logo ?? defaultLogo\" [attr.alt]=\"tenant.title\"\n                    class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 ax-rounded-full\"></axp-logo>\n            </div>\n            <span class=\"md:ax-text-base ax-text-sm ax-text-start\">{{ tenant.title }} </span>\n        </div>\n    </div>\n    }\n</div>\n}\n@if (allTenants && allTenants.length > 4) {\n<div class=\"ax-mt-6 ax-w-full ax-flex ax-justify-center\">\n    <ax-button (onClick)=\"showAllTenants()\" class=\"ax-w-full\" look=\"outline\" [text]=\"\n      showAll\n        ? ('@general:actions.view-less.title' | translate | async)\n        : ('@general:actions.view-all.title' | translate | async)\n    \"></ax-button>\n</div>\n}\n}" }]
-        }], propDecorators: { simple: [{ type: i0.Input, args: [{ isSignal: true, alias: "simple", required: false }] }], tenantChosen: [{ type: i0.Output, args: ["tenantChosen"] }] } });
+            args: [{ selector: 'axp-tenant-chooser-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXTranslationModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXSkeletonModule,
+                        AXSelectBoxModule,
+                        AXSearchBoxModule,
+                        AXListNavigationModule,
+                        AXPLogoComponent,
+                    ], template: "@if (isLoading()) {\n  <div class=\"ax-w-full ax-flex ax-flex-col ax-gap-3\">\n    @for (item of skeletonItems; track item) {\n      <div class=\"ax-flex ax-gap-2 ax-items-center ax-py-1\">\n        <ax-skeleton [animated]=\"true\" class=\"ax-w-12 ax-h-12 ax-rounded-full ax-shrink-0\"></ax-skeleton>\n        <ax-skeleton [animated]=\"true\" class=\"ax-flex-1 ax-h-6 ax-rounded-md\"></ax-skeleton>\n      </div>\n    }\n  </div>\n} @else if (useSelectBox()) {\n  <div class=\"ax-w-full ax-flex ax-flex-col ax-gap-4\" (keydown.capture)=\"handleSelectBoxKeyDown($event)\">\n    <ax-select-box\n      class=\"ax-w-full\"\n      [dataSource]=\"allTenants()\"\n      textField=\"title\"\n      valueField=\"id\"\n      [value]=\"selectedTenant()\"\n      [itemHeight]=\"56\"\n      [placeholder]=\"('@auth:tenant-chooser.select-placeholder' | translate | async) ?? ''\"\n      [itemTemplate]=\"tenantItemTemplate\"\n      (onOpened)=\"isSelectBoxOpen.set(true)\"\n      (onClosed)=\"isSelectBoxOpen.set(false)\"\n      (onValueChanged)=\"handleTenantSelect($event)\"\n    >\n      <ax-search-box look=\"fill\"></ax-search-box>\n    </ax-select-box>\n    <ax-button\n      class=\"ax-w-full\"\n      color=\"primary\"\n      [disabled]=\"!canApply()\"\n      [text]=\"('@general:actions.apply.title' | translate | async) ?? ''\"\n      (onClick)=\"applySelection()\"\n    ></ax-button>\n  </div>\n} @else {\n  <div\n    axListNavigation\n    #listNav=\"axListNavigation\"\n    class=\"ax-w-full ax-overflow-auto ax-max-h-[300px] ax-pe-2\"\n    role=\"listbox\"\n  >\n    @for (tenant of allTenants(); track tenant.id) {\n      <div\n        axListNavigationItem\n        #navItem=\"axListNavigationItem\"\n        tabindex=\"0\"\n        role=\"option\"\n        [attr.aria-selected]=\"navItem.isActive()\"\n        class=\"ax-flex ax-gap-2 ax-justify-between ax-border-b last:ax-border-b-0 ax-py-1 ax-px-2 ax-items-center ax-cursor-pointer ax-rounded-md ax-transition-colors ax-outline-none hover:ax-bg-primary-lightest hover:dark:ax-bg-primary-dark\"\n        [class.ax-bg-primary-lightest]=\"navItem.isActive()\"\n        [class.dark:ax-bg-primary-dark]=\"navItem.isActive()\"\n        [class.ax-items-start]=\"simple()\"\n        (click)=\"chooseTenant(tenant)\"\n        (keydown)=\"handleListItemKeyDown($event, tenant)\"\n      >\n        <div class=\"ax-flex ax-flex-1 ax-gap-2 ax-items-center ax-font-medium\" [class.ax-justify-center]=\"simple()\">\n          <div\n            class=\"ax-w-12 ax-h-12 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-m-auto\"\n          >\n            <axp-logo\n              [source]=\"tenant.logo ?? defaultLogo\"\n              [attr.alt]=\"tenant.title\"\n              class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-mx-auto ax-w-10 ax-h-10 ax-bg-neutral-200 dark:ax-bg-neutral-800 ax-rounded-full\"\n            ></axp-logo>\n          </div>\n          <span class=\"ax-flex-1 ax-text-start md:ax-text-base ax-text-sm\">{{ tenant.title }}</span>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n<ng-template #tenantItemTemplate let-item>\n  <div class=\"ax-flex ax-gap-2 ax-items-center ax-p-2\">\n    <div\n      class=\"ax-w-10 ax-h-10 ax-flex ax-justify-center ax-items-center ax-rounded-full ax-bg-neutral-100 ax-shrink-0\"\n    >\n      <axp-logo\n        [source]=\"item.data.logo ?? defaultLogo\"\n        [attr.alt]=\"item.data.title\"\n        class=\"!ax-flex ax-items-center ax-justify-center !ax-text-sm ax-w-8 ax-h-8 ax-bg-neutral-200 ax-rounded-full\"\n      ></axp-logo>\n    </div>\n    <span class=\"ax-text-start md:ax-text-base ax-text-sm\">{{ item.data.title }}</span>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { simple: [{ type: i0.Input, args: [{ isSignal: true, alias: "simple", required: false }] }], tenantChosen: [{ type: i0.Output, args: ["tenantChosen"] }], listNav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXListNavigationDirective), { isSignal: true }] }], listItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXListNavigationItemDirective), { isSignal: true }] }] } });
 
 class AXPTenantChooserDropdownComponent {
     constructor() {
@@ -309,7 +460,7 @@ class AXPTenantChooserDropdownComponent {
         this.tenantPopover()?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPTenantChooserDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPTenantChooserDropdownComponent, isStandalone: true, selector: "axp-tenant-chooser-dropdown", viewQueries: [{ propertyName: "tenantPopover", first: true, predicate: ["tenantPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (tenants$ | async; as tenants) {\n@if (tenants.length > 1) {\n<ax-button [text]=\"tenant?.title ?? ''\" class=\"ax-xs\" look=\"blank\" #tenantChooser>\n  <ax-suffix>\n    <ax-icon class=\"fa-solid fa-caret-down\"></ax-icon>\n  </ax-suffix>\n</ax-button>\n<ax-popover [target]=\"tenantChooser\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\"\n  #tenantPopover>\n  <div class=\"ax-bg-lightest ax-border ax-overflow-hidden ax-rounded-md ax-shadow-md ax-w-full ax-min-w-64 ax-p-3\">\n    <axp-tenant-chooser-list [simple]=\"true\" (tenantChosen)=\"closePopover()\"></axp-tenant-chooser-list>\n  </div>\n</ax-popover>\n} @else {\n<ax-button [text]=\"tenant?.title ?? ''\" class=\"ax-xs\" look=\"blank\"></ax-button>\n}\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPTenantChooserListComponent, selector: "axp-tenant-chooser-list", inputs: ["simple"], outputs: ["tenantChosen"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXPTenantChooserDropdownComponent, isStandalone: true, selector: "axp-tenant-chooser-dropdown", viewQueries: [{ propertyName: "tenantPopover", first: true, predicate: ["tenantPopover"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (tenants$ | async; as tenants) {\n@if (tenants.length > 1) {\n<ax-button [text]=\"tenant?.title ?? ''\" class=\"ax-xs\" look=\"blank\" #tenantChooser>\n  <ax-suffix>\n    <ax-icon class=\"fa-solid fa-caret-down\"></ax-icon>\n  </ax-suffix>\n</ax-button>\n<ax-popover [target]=\"tenantChooser\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" [adaptivityEnabled]=\"true\"\n  #tenantPopover>\n  <div class=\"ax-bg-lightest ax-border ax-overflow-hidden ax-rounded-md ax-shadow-md ax-w-full ax-min-w-64 ax-p-3\">\n    <axp-tenant-chooser-list [simple]=\"true\" (tenantChosen)=\"closePopover()\"></axp-tenant-chooser-list>\n  </div>\n</ax-popover>\n} @else {\n<ax-button [text]=\"tenant?.title ?? ''\" class=\"ax-xs\" look=\"blank\"></ax-button>\n}\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPTenantChooserListComponent, selector: "axp-tenant-chooser-list", inputs: ["simple"], outputs: ["tenantChosen"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXPTenantChooserDropdownComponent, decorators: [{
             type: Component,
@@ -344,7 +495,7 @@ class AXMAuthProfileSlotComponent {
         this.router.navigate(['/auth/login']);
     }
     async openUserSession() {
-        const com = await import('./acorex-modules-auth-user-sessions.component-C7POJT6o.mjs').then((c) => c.AXMUserSessionsComponent);
+        const com = await import('./acorex-modules-auth-user-sessions.component-DTEFg3f5.mjs').then((c) => c.AXMUserSessionsComponent);
         this.popupService.open(com, {
             size: this.platform.is('Mobile') || this.platform.is('SM') ? 'full' : 'sm',
             title: await this.translateService.translateAsync('@auth:profile.sessions.title'),
@@ -354,11 +505,11 @@ class AXMAuthProfileSlotComponent {
         this.commandExecutor.execute('auth:profile', {});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXMAuthProfileSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXMAuthProfileSlotComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "profilePopover", first: true, predicate: ["profilePopover"], descendants: true }], ngImport: i0, template: "@if (isAuthenticated$ | async) {\n  <div class=\"ax-size-fit\">\n    <div #avatar>\n      <axp-user-avatar [size]=\"36\" [userId]=\"(user$ | async)?.id!\"></axp-user-avatar>\n    </div>\n\n    <ax-popover [target]=\"avatar\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" #p>\n      <div class=\"ax-bg-lightest ax-border ax-border-lightest ax-rounded-md ax-shadow-md ax-w-full ax-min-w-64\">\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-p-4 ax-border-b\">\n          <axp-user-avatar [size]=\"64\" [userId]=\"(user$ | async)?.id!\"></axp-user-avatar>\n\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-mt-2\">\n            <div class=\"ax-text-base ax-font-bold\">{{ (user$ | async)?.title }}</div>\n            <axp-tenant-chooser-dropdown></axp-tenant-chooser-dropdown>\n          </div>\n        </div>\n        <div class=\"axp-profile-slot-menus\">\n          <ul>\n            <li>\n              <a (click)=\"showProfile()\">\n                <i class=\"fa-light fa-user\"></i>\n                <span>{{ '@auth:profile.edit' | translate | async }}</span>\n              </a>\n            </li>\n            <li>\n              <a (click)=\"p.close()\" [routerLink]=\"['/', appName(), 'settings', 'user']\">\n                <i class=\"fa-light fa-gear\"></i>\n                <span>{{ '@auth:profile.settings' | translate | async }}</span>\n              </a>\n            </li>\n            <li>\n              <a (click)=\"openUserSession()\">\n                <i class=\"fa-light fa-mobile\"></i>\n                <span>{{ '@auth:profile.sessions' | translate | async }}</span>\n              </a>\n            </li>\n            <li class=\"ax-text-danger-500\">\n              <a (click)=\"logOut()\">\n                <i class=\"fa-light fa-arrow-right-from-bracket\"></i>\n                <span>{{ '@auth:profile.logout' | translate | async }}</span>\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n} @else {\n  <ax-button color=\"default\" look=\"blank\" text=\"Sign Up / Sign In\" (click)=\"handleSignIn()\">\n    <ax-icon>\n      <i class=\"fa-solid fa-user ax-text-slate-400 dark:ax-text-slate-200\"></i>\n    </ax-icon>\n  </ax-button>\n}\n", styles: [".axp-profile-slot-menus ul{margin-top:.5rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding-left:.5rem;padding-right:.5rem}.axp-profile-slot-menus ul:last-child{border-width:0px}.axp-profile-slot-menus ul li{display:flex;cursor:pointer;border-radius:.375rem}.axp-profile-slot-menus ul li:last-child{margin-bottom:.5rem}.axp-profile-slot-menus ul li:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-dark-surface),var(--tw-bg-opacity, 1))}.axp-profile-slot-menus ul li i{margin-inline-end:.75rem;display:grid;height:1.5rem;width:1.5rem;place-items:center;font-size:1.25rem;line-height:1.75rem}.axp-profile-slot-menus ul li a{display:flex;height:100%;width:100%;align-items:center;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXMAuthProfileSlotComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "profilePopover", first: true, predicate: ["profilePopover"], descendants: true }], ngImport: i0, template: "@if (isAuthenticated$ | async) {\n  <div class=\"ax-size-fit\">\n    <div #avatar>\n      <axp-user-avatar [size]=\"36\" [userId]=\"(user$ | async)?.id!\"></axp-user-avatar>\n    </div>\n\n    <ax-popover [target]=\"avatar\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" #p>\n      <div class=\"ax-bg-lightest ax-border ax-border-lightest ax-rounded-md ax-shadow-md ax-w-full ax-min-w-64\">\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-p-4 ax-border-b\">\n          <axp-user-avatar [size]=\"64\" [userId]=\"(user$ | async)?.id!\"></axp-user-avatar>\n\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-mt-2\">\n            <div class=\"ax-text-base ax-font-bold\">{{ (user$ | async)?.title }}</div>\n            <axp-tenant-chooser-dropdown></axp-tenant-chooser-dropdown>\n          </div>\n        </div>\n        <div class=\"axp-profile-slot-menus\">\n          <ul>\n            <li>\n              <a (click)=\"showProfile()\">\n                <i class=\"fa-light fa-user\"></i>\n                <span>{{ '@auth:profile.edit' | translate | async }}</span>\n              </a>\n            </li>\n            <li>\n              <a (click)=\"p.close()\" [routerLink]=\"['/', appName(), 'settings', 'user']\">\n                <i class=\"fa-light fa-gear\"></i>\n                <span>{{ '@auth:profile.settings' | translate | async }}</span>\n              </a>\n            </li>\n            <!-- <li>\n              <a (click)=\"openUserSession()\">\n                <i class=\"fa-light fa-mobile\"></i>\n                <span>{{ '@auth:profile.sessions' | translate | async }}</span>\n              </a>\n            </li> -->\n            <li class=\"ax-text-danger-500\">\n              <a (click)=\"logOut()\">\n                <i class=\"fa-light fa-arrow-right-from-bracket\"></i>\n                <span>{{ '@auth:profile.logout' | translate | async }}</span>\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n} @else {\n  <ax-button color=\"default\" look=\"blank\" text=\"Sign Up / Sign In\" (click)=\"handleSignIn()\">\n    <ax-icon>\n      <i class=\"fa-solid fa-user ax-text-slate-400 dark:ax-text-slate-200\"></i>\n    </ax-icon>\n  </ax-button>\n}\n", styles: [".axp-profile-slot-menus ul{margin-top:.5rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding-left:.5rem;padding-right:.5rem}.axp-profile-slot-menus ul:last-child{border-width:0px}.axp-profile-slot-menus ul li{display:flex;cursor:pointer;border-radius:.375rem}.axp-profile-slot-menus ul li:last-child{margin-bottom:.5rem}.axp-profile-slot-menus ul li:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-dark-surface),var(--tw-bg-opacity, 1))}.axp-profile-slot-menus ul li i{margin-inline-end:.75rem;display:grid;height:1.5rem;width:1.5rem;place-items:center;font-size:1.25rem;line-height:1.75rem}.axp-profile-slot-menus ul li a{display:flex;height:100%;width:100%;align-items:center;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: 
                 //
-                AXImageModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "component", type: 
+                AXImageModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "repositionOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "component", type: 
                 //
-                AXPTenantChooserDropdownComponent, selector: "axp-tenant-chooser-dropdown" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$2.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                AXPTenantChooserDropdownComponent, selector: "axp-tenant-chooser-dropdown" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXMAuthProfileSlotComponent, decorators: [{
             type: Component,
@@ -376,7 +527,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImpo
                         AXPUserAvatarComponent,
                         //
                         AXPTenantChooserDropdownComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (isAuthenticated$ | async) {\n  <div class=\"ax-size-fit\">\n    <div #avatar>\n      <axp-user-avatar [size]=\"36\" [userId]=\"(user$ | async)?.id!\"></axp-user-avatar>\n    </div>\n\n    <ax-popover [target]=\"avatar\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" #p>\n      <div class=\"ax-bg-lightest ax-border ax-border-lightest ax-rounded-md ax-shadow-md ax-w-full ax-min-w-64\">\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-p-4 ax-border-b\">\n          <axp-user-avatar [size]=\"64\" [userId]=\"(user$ | async)?.id!\"></axp-user-avatar>\n\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-mt-2\">\n            <div class=\"ax-text-base ax-font-bold\">{{ (user$ | async)?.title }}</div>\n            <axp-tenant-chooser-dropdown></axp-tenant-chooser-dropdown>\n          </div>\n        </div>\n        <div class=\"axp-profile-slot-menus\">\n          <ul>\n            <li>\n              <a (click)=\"showProfile()\">\n                <i class=\"fa-light fa-user\"></i>\n                <span>{{ '@auth:profile.edit' | translate | async }}</span>\n              </a>\n            </li>\n            <li>\n              <a (click)=\"p.close()\" [routerLink]=\"['/', appName(), 'settings', 'user']\">\n                <i class=\"fa-light fa-gear\"></i>\n                <span>{{ '@auth:profile.settings' | translate | async }}</span>\n              </a>\n            </li>\n            <li>\n              <a (click)=\"openUserSession()\">\n                <i class=\"fa-light fa-mobile\"></i>\n                <span>{{ '@auth:profile.sessions' | translate | async }}</span>\n              </a>\n            </li>\n            <li class=\"ax-text-danger-500\">\n              <a (click)=\"logOut()\">\n                <i class=\"fa-light fa-arrow-right-from-bracket\"></i>\n                <span>{{ '@auth:profile.logout' | translate | async }}</span>\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n} @else {\n  <ax-button color=\"default\" look=\"blank\" text=\"Sign Up / Sign In\" (click)=\"handleSignIn()\">\n    <ax-icon>\n      <i class=\"fa-solid fa-user ax-text-slate-400 dark:ax-text-slate-200\"></i>\n    </ax-icon>\n  </ax-button>\n}\n", styles: [".axp-profile-slot-menus ul{margin-top:.5rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding-left:.5rem;padding-right:.5rem}.axp-profile-slot-menus ul:last-child{border-width:0px}.axp-profile-slot-menus ul li{display:flex;cursor:pointer;border-radius:.375rem}.axp-profile-slot-menus ul li:last-child{margin-bottom:.5rem}.axp-profile-slot-menus ul li:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-dark-surface),var(--tw-bg-opacity, 1))}.axp-profile-slot-menus ul li i{margin-inline-end:.75rem;display:grid;height:1.5rem;width:1.5rem;place-items:center;font-size:1.25rem;line-height:1.75rem}.axp-profile-slot-menus ul li a{display:flex;height:100%;width:100%;align-items:center;padding:.5rem}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (isAuthenticated$ | async) {\n  <div class=\"ax-size-fit\">\n    <div #avatar>\n      <axp-user-avatar [size]=\"36\" [userId]=\"(user$ | async)?.id!\"></axp-user-avatar>\n    </div>\n\n    <ax-popover [target]=\"avatar\" [openOn]=\"'toggle'\" [closeOn]=\"'clickOut'\" #p>\n      <div class=\"ax-bg-lightest ax-border ax-border-lightest ax-rounded-md ax-shadow-md ax-w-full ax-min-w-64\">\n        <div class=\"ax-flex ax-flex-col ax-items-center ax-p-4 ax-border-b\">\n          <axp-user-avatar [size]=\"64\" [userId]=\"(user$ | async)?.id!\"></axp-user-avatar>\n\n          <div class=\"ax-flex ax-flex-col ax-items-center ax-justify-center ax-mt-2\">\n            <div class=\"ax-text-base ax-font-bold\">{{ (user$ | async)?.title }}</div>\n            <axp-tenant-chooser-dropdown></axp-tenant-chooser-dropdown>\n          </div>\n        </div>\n        <div class=\"axp-profile-slot-menus\">\n          <ul>\n            <li>\n              <a (click)=\"showProfile()\">\n                <i class=\"fa-light fa-user\"></i>\n                <span>{{ '@auth:profile.edit' | translate | async }}</span>\n              </a>\n            </li>\n            <li>\n              <a (click)=\"p.close()\" [routerLink]=\"['/', appName(), 'settings', 'user']\">\n                <i class=\"fa-light fa-gear\"></i>\n                <span>{{ '@auth:profile.settings' | translate | async }}</span>\n              </a>\n            </li>\n            <!-- <li>\n              <a (click)=\"openUserSession()\">\n                <i class=\"fa-light fa-mobile\"></i>\n                <span>{{ '@auth:profile.sessions' | translate | async }}</span>\n              </a>\n            </li> -->\n            <li class=\"ax-text-danger-500\">\n              <a (click)=\"logOut()\">\n                <i class=\"fa-light fa-arrow-right-from-bracket\"></i>\n                <span>{{ '@auth:profile.logout' | translate | async }}</span>\n              </a>\n            </li>\n          </ul>\n        </div>\n      </div>\n    </ax-popover>\n  </div>\n} @else {\n  <ax-button color=\"default\" look=\"blank\" text=\"Sign Up / Sign In\" (click)=\"handleSignIn()\">\n    <ax-icon>\n      <i class=\"fa-solid fa-user ax-text-slate-400 dark:ax-text-slate-200\"></i>\n    </ax-icon>\n  </ax-button>\n}\n", styles: [".axp-profile-slot-menus ul{margin-top:.5rem;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding-left:.5rem;padding-right:.5rem}.axp-profile-slot-menus ul:last-child{border-width:0px}.axp-profile-slot-menus ul li{display:flex;cursor:pointer;border-radius:.375rem}.axp-profile-slot-menus ul li:last-child{margin-bottom:.5rem}.axp-profile-slot-menus ul li:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-dark-surface),var(--tw-bg-opacity, 1))}.axp-profile-slot-menus ul li i{margin-inline-end:.75rem;display:grid;height:1.5rem;width:1.5rem;place-items:center;font-size:1.25rem;line-height:1.75rem}.axp-profile-slot-menus ul li a{display:flex;height:100%;width:100%;align-items:center;padding:.5rem}\n"] }]
         }], propDecorators: { profilePopover: [{
                 type: ViewChild,
                 args: ['profilePopover']
@@ -444,7 +595,7 @@ class AXMUserProfileCardSlotComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AXMUserProfileCardSlotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: AXMUserProfileCardSlotComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "profilePopover", first: true, predicate: ["profilePopover"], descendants: true }], ngImport: i0, template: "@if((isAuthenticated$ | async)) {\n<div class=\"ax-p-3 ax-flex ax-items-center ax-gap-1 ax-border-b ax-border-lighter\">\n  <div #avatar>\n    <axp-user-avatar [size]=\"48\" [userId]=\"(user$ | async)?.id!\"></axp-user-avatar>\n  </div>\n  <div class=\"ax-flex ax-flex-col\">\n    <ax-title class=\"ax-text-sm ax-font-medium ax-px-3\">{{ (user$ | async)?.title }}</ax-title>\n    <axp-tenant-chooser-dropdown />\n  </div>\n</div>\n}\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
                 //
-                AXImageModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: 
+                AXImageModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: 
                 //
                 AXPTenantChooserDropdownComponent, selector: "axp-tenant-chooser-dropdown" }, { kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
@@ -637,12 +788,12 @@ function routesFacory() {
     routes = [
         {
             path: 'tenant-chooser',
-            loadComponent: () => import('./acorex-modules-auth-tenant-chooser.component-DFJoSg_2.mjs').then((c) => c.AXPAuthTenantChooserComponent),
+            loadComponent: () => import('./acorex-modules-auth-tenant-chooser.component-D3ENGMPa.mjs').then((c) => c.AXPAuthTenantChooserComponent),
             canActivate: [AXPAuthGuard, canActivateTenantChooser],
         },
         {
             path: 'app-chooser',
-            loadComponent: () => import('./acorex-modules-auth-app-chooser.component-BQRMc-PP.mjs').then((c) => c.AXPAuthAppChooserComponent),
+            loadComponent: () => import('./acorex-modules-auth-app-chooser.component-Cz98Okd6.mjs').then((c) => c.AXPAuthAppChooserComponent),
             canActivate: [AXPAuthGuard, canActivateAppChooser],
         },
     ];
@@ -789,4 +940,4 @@ var AXMSessionStatusTypes;
  */
 
 export { AXM_AUTH_CONFIG_TOKEN as A, AXM_LOGIN_GUARD_TOKEN as a, AXMAuthenticationTypes as b, AXPTenantChooserListComponent as c, AXPTenantChooserDropdownComponent as d, AXPAppChooserListComponent as e, AXMUserDeviceSessionsService as f, AXMAuthErrorHandler as g, AXMAuthModule as h, AXMDefaultAuthConfigs as i, AXMDeviceSessionsService as j, AXMDeviceSessionsServiceImpl as k, AXMSessionStatusTypes as l, AXPIdleService as m, canActivateLogin as n, configAuthModule as o };
-//# sourceMappingURL=acorex-modules-auth-acorex-modules-auth-9Tz_Jq63.mjs.map
+//# sourceMappingURL=acorex-modules-auth-acorex-modules-auth-ilqI5CxA.mjs.map