@ardimedia/angular-portal-azure 0.3.16 → 0.3.18

package/fesm2022/ardimedia-angular-portal-azure.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, makeEnvironmentProviders, APP_INITIALIZER, input, output, Component, ElementRef, Injector, effect, afterNextRender } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
+import { signal, computed, Injectable, inject, makeEnvironmentProviders, APP_INITIALIZER, input, output, Component, ElementRef, Injector, DestroyRef, effect, afterNextRender } from '@angular/core';
+import { DOCUMENT, NgComponentOutlet } from '@angular/common';
 
 function clearStatusBar() {
     return { text: '', style: 'none' };
@@ -36,6 +36,161 @@ function createCommand(key, label, action, icon) {
     return { key, label, visible: true, enabled: true, icon, action };
 }
 
+// ── Built-in label sets ─────────────────────────────────────────────
+/** German (Switzerland / Liechtenstein) — default */
+const LABELS_DE_CH = {
+    loading: 'Laden...',
+    saving: 'Speichern...',
+    saved: 'Gespeichert',
+    deleting: 'Löschen...',
+    deleted: 'Gelöscht',
+    loadError: 'Fehler beim Laden',
+    saveError: 'Fehler beim Speichern',
+    deleteError: 'Fehler beim Löschen',
+    cmdNew: 'Neu',
+    cmdSave: 'Speichern',
+    cmdDelete: 'Löschen',
+    cmdCancel: 'Abbrechen',
+    search: 'Suchen...',
+    close: 'Schliessen',
+    noAppsTitle: 'Keine Applikationen zugeordnet',
+    noAppsMessage: 'Wende dich bitte an den Administrator, damit die Applikationen zugeordnet werden können.',
+    closePanel: 'Schliessen',
+    lightMode: 'Hellmodus',
+    darkMode: 'Dunkelmodus',
+    switchToLight: 'Zum Hellmodus wechseln',
+    switchToDark: 'Zum Dunkelmodus wechseln',
+    settings: 'Einstellungen',
+    language: 'Sprache',
+    appearance: 'Darstellung',
+};
+/** German (Germany) — Swiss spelling rules apply (no ß) */
+const LABELS_DE_DE = { ...LABELS_DE_CH };
+/** English */
+const LABELS_EN = {
+    loading: 'Loading...',
+    saving: 'Saving...',
+    saved: 'Saved',
+    deleting: 'Deleting...',
+    deleted: 'Deleted',
+    loadError: 'Error loading data',
+    saveError: 'Error saving data',
+    deleteError: 'Error deleting data',
+    cmdNew: 'New',
+    cmdSave: 'Save',
+    cmdDelete: 'Delete',
+    cmdCancel: 'Cancel',
+    search: 'Search...',
+    close: 'Close',
+    noAppsTitle: 'No applications assigned',
+    noAppsMessage: 'Please contact the administrator to have applications assigned.',
+    closePanel: 'Close',
+    lightMode: 'Light mode',
+    darkMode: 'Dark mode',
+    switchToLight: 'Switch to light mode',
+    switchToDark: 'Switch to dark mode',
+    settings: 'Settings',
+    language: 'Language',
+    appearance: 'Appearance',
+};
+/** French */
+const LABELS_FR = {
+    loading: 'Chargement...',
+    saving: 'Enregistrement...',
+    saved: 'Enregistré',
+    deleting: 'Suppression...',
+    deleted: 'Supprimé',
+    loadError: 'Erreur lors du chargement',
+    saveError: 'Erreur lors de l\'enregistrement',
+    deleteError: 'Erreur lors de la suppression',
+    cmdNew: 'Nouveau',
+    cmdSave: 'Enregistrer',
+    cmdDelete: 'Supprimer',
+    cmdCancel: 'Annuler',
+    search: 'Rechercher...',
+    close: 'Fermer',
+    noAppsTitle: 'Aucune application attribuée',
+    noAppsMessage: 'Veuillez contacter l\'administrateur pour que les applications soient attribuées.',
+    closePanel: 'Fermer',
+    lightMode: 'Mode clair',
+    darkMode: 'Mode sombre',
+    switchToLight: 'Passer au mode clair',
+    switchToDark: 'Passer au mode sombre',
+    settings: 'Paramètres',
+    language: 'Langue',
+    appearance: 'Apparence',
+};
+/** Spanish */
+const LABELS_ES = {
+    loading: 'Cargando...',
+    saving: 'Guardando...',
+    saved: 'Guardado',
+    deleting: 'Eliminando...',
+    deleted: 'Eliminado',
+    loadError: 'Error al cargar',
+    saveError: 'Error al guardar',
+    deleteError: 'Error al eliminar',
+    cmdNew: 'Nuevo',
+    cmdSave: 'Guardar',
+    cmdDelete: 'Eliminar',
+    cmdCancel: 'Cancelar',
+    search: 'Buscar...',
+    close: 'Cerrar',
+    noAppsTitle: 'No hay aplicaciones asignadas',
+    noAppsMessage: 'Póngase en contacto con el administrador para que se asignen las aplicaciones.',
+    closePanel: 'Cerrar',
+    lightMode: 'Modo claro',
+    darkMode: 'Modo oscuro',
+    switchToLight: 'Cambiar a modo claro',
+    switchToDark: 'Cambiar a modo oscuro',
+    settings: 'Configuración',
+    language: 'Idioma',
+    appearance: 'Apariencia',
+};
+/** Italian */
+const LABELS_IT = {
+    loading: 'Caricamento...',
+    saving: 'Salvataggio...',
+    saved: 'Salvato',
+    deleting: 'Eliminazione...',
+    deleted: 'Eliminato',
+    loadError: 'Errore durante il caricamento',
+    saveError: 'Errore durante il salvataggio',
+    deleteError: 'Errore durante l\'eliminazione',
+    cmdNew: 'Nuovo',
+    cmdSave: 'Salva',
+    cmdDelete: 'Elimina',
+    cmdCancel: 'Annulla',
+    search: 'Cerca...',
+    close: 'Chiudi',
+    noAppsTitle: 'Nessuna applicazione assegnata',
+    noAppsMessage: 'Contattare l\'amministratore per l\'assegnazione delle applicazioni.',
+    closePanel: 'Chiudi',
+    lightMode: 'Modalità chiara',
+    darkMode: 'Modalità scura',
+    switchToLight: 'Passa alla modalità chiara',
+    switchToDark: 'Passa alla modalità scura',
+    settings: 'Impostazioni',
+    language: 'Lingua',
+    appearance: 'Aspetto',
+};
+// ── Language preset registry ────────────────────────────────────────
+/** Keep DEFAULT_LABELS as alias for backward compatibility */
+const DEFAULT_LABELS = LABELS_DE_CH;
+/** Built-in language presets. Consumers can add custom presets via registerLanguagePreset(). */
+const LANGUAGE_PRESETS = new Map([
+    ['de-CH', { code: 'de-CH', displayName: 'Deutsch (CH)', labels: LABELS_DE_CH }],
+    ['de-DE', { code: 'de-DE', displayName: 'Deutsch (DE)', labels: LABELS_DE_DE }],
+    ['en', { code: 'en', displayName: 'English', labels: LABELS_EN }],
+    ['fr', { code: 'fr', displayName: 'Français', labels: LABELS_FR }],
+    ['es', { code: 'es', displayName: 'Español', labels: LABELS_ES }],
+    ['it', { code: 'it', displayName: 'Italiano', labels: LABELS_IT }],
+]);
+/** Register a custom language preset. */
+function registerLanguagePreset(preset) {
+    LANGUAGE_PRESETS.set(preset.code, preset);
+}
+
 /** Creates a data blade definition with sensible defaults.
  *  statusBar, item, items use getter/setter pairs backed by signals for zoneless change detection.
  *  Note: cannot use ...createBlade() spread here — spread copies getter values, not getter/setter pairs. */
@@ -66,9 +221,9 @@ function createDataBlade(path, title, width = 315) {
  * Execute a load-item operation with lifecycle hooks and status bar updates.
  * Replaces the BladeData.loadItem() template method from v0.2.346.
  */
-async function executeLoadItem(blade, loadFn) {
+async function executeLoadItem(blade, loadFn, labels = DEFAULT_LABELS) {
     blade.lifecycle.onLoadItem?.();
-    blade.statusBar = statusBarInfo('Laden...');
+    blade.statusBar = statusBarInfo(labels.loading);
     try {
         const result = await loadFn();
         blade.item = result;
@@ -77,17 +232,17 @@ async function executeLoadItem(blade, loadFn) {
         return result;
     }
     catch (ex) {
-        blade.statusBar = statusBarError(ex.message || 'Fehler beim Laden');
+        blade.statusBar = statusBarError(ex.message || labels.loadError);
         blade.lifecycle.onLoadItemError?.(ex);
     }
 }
 /**
  * Execute a load-items operation with lifecycle hooks and status bar updates.
  */
-async function executeLoadItems(blade, loadFn) {
+async function executeLoadItems(blade, loadFn, labels = DEFAULT_LABELS) {
     blade.lifecycle.onLoadItems?.();
     blade.loading = true;
-    blade.statusBar = statusBarInfo('Laden...');
+    blade.statusBar = statusBarInfo(labels.loading);
     try {
         const result = await loadFn();
         blade.items = result;
@@ -96,7 +251,7 @@ async function executeLoadItems(blade, loadFn) {
         return result;
     }
     catch (ex) {
-        blade.statusBar = statusBarError(ex.message || 'Fehler beim Laden');
+        blade.statusBar = statusBarError(ex.message || labels.loadError);
         blade.lifecycle.onLoadItemsError?.(ex);
     }
     finally {
@@ -106,21 +261,21 @@ async function executeLoadItems(blade, loadFn) {
 /**
  * Execute a save-item operation with lifecycle hooks and status bar updates.
  */
-async function executeSaveItem(blade, saveFn) {
+async function executeSaveItem(blade, saveFn, labels = DEFAULT_LABELS) {
     if (blade.lifecycle.isFormValid && !blade.lifecycle.isFormValid()) {
         return;
     }
     blade.lifecycle.onSaveItem?.();
-    blade.statusBar = statusBarInfo('Speichern...');
+    blade.statusBar = statusBarInfo(labels.saving);
     try {
         const result = await saveFn();
         blade.item = result;
-        blade.statusBar = statusBarSuccess('Gespeichert');
+        blade.statusBar = statusBarSuccess(labels.saved);
         blade.lifecycle.onSavedItem?.();
         return result;
     }
     catch (ex) {
-        blade.statusBar = statusBarError(ex.message || 'Fehler beim Speichern');
+        blade.statusBar = statusBarError(ex.message || labels.saveError);
         blade.lifecycle.onSaveItemError?.(ex);
     }
 }
@@ -128,17 +283,17 @@ async function executeSaveItem(blade, saveFn) {
  * Execute a delete-item operation with lifecycle hooks and status bar updates.
  * Returns true if the blade should be closed after deletion.
  */
-async function executeDeleteItem(blade, deleteFn) {
+async function executeDeleteItem(blade, deleteFn, labels = DEFAULT_LABELS) {
     blade.lifecycle.onDeleteItem?.();
-    blade.statusBar = statusBarInfo('Löschen...');
+    blade.statusBar = statusBarInfo(labels.deleting);
     try {
         await deleteFn();
-        blade.statusBar = statusBarSuccess('Gelöscht');
+        blade.statusBar = statusBarSuccess(labels.deleted);
         const shouldClose = blade.lifecycle.onDeletedItem?.() ?? true;
         return shouldClose;
     }
     catch (ex) {
-        blade.statusBar = statusBarError(ex.message || 'Fehler beim Löschen');
+        blade.statusBar = statusBarError(ex.message || labels.deleteError);
         blade.lifecycle.onDeleteItemError?.(ex);
         return false;
     }
@@ -269,6 +424,13 @@ function getAllStringValues(obj) {
  * All state is managed via Angular signals for reactive updates.
  */
 class PortalService {
+    static LANG_STORAGE_KEY = 'apa-language';
+    /** Localization labels (defaults to German/de-CH, override via PortalConfig.labels) */
+    labels = signal({ ...DEFAULT_LABELS }, ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    /** Current language code */
+    currentLanguage = signal('de-CH', ...(ngDevMode ? [{ debugName: "currentLanguage" }] : []));
+    /** Whether the settings dropdown is open */
+    isSettingsOpen = signal(false, ...(ngDevMode ? [{ debugName: "isSettingsOpen" }] : []));
     /** The blade stack — ordered left-to-right */
     blades = signal([], ...(ngDevMode ? [{ debugName: "blades" }] : []));
     /** Panorama (startboard/dashboard) state */
@@ -290,6 +452,8 @@ class PortalService {
         const pano = this.panorama();
         return pano.tiles;
     }, ...(ngDevMode ? [{ debugName: "positionedTiles" }] : []));
+    /** Consumer label overrides from PortalConfig — re-applied on every language switch */
+    _configLabelOverrides = {};
     /**
      * Initialize the portal with configuration.
      * Called by providePortalAzure() during app bootstrap.
@@ -311,6 +475,59 @@ class PortalService {
         if (config.theme) {
             this.theme.set(config.theme);
         }
+        // Store consumer label overrides for re-application on language switch
+        if (config.labels) {
+            this._configLabelOverrides = config.labels;
+        }
+        // Determine initial language: localStorage → config → browser → default
+        const stored = typeof localStorage !== 'undefined'
+            ? localStorage.getItem(PortalService.LANG_STORAGE_KEY)
+            : null;
+        const langCode = stored || config.language || this.detectBrowserLanguage();
+        this.setLanguage(langCode);
+    }
+    // --- Language ---
+    /** Switch the active language. Persists to localStorage. */
+    setLanguage(code) {
+        const preset = LANGUAGE_PRESETS.get(code);
+        if (!preset) {
+            console.warn(`[PortalService] Unknown language "${code}", falling back to de-CH`);
+            this.setLanguage('de-CH');
+            return;
+        }
+        this.currentLanguage.set(code);
+        this.labels.set({ ...preset.labels, ...this._configLabelOverrides });
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(PortalService.LANG_STORAGE_KEY, code);
+        }
+    }
+    /** Detect language from browser, match to closest preset. */
+    detectBrowserLanguage() {
+        if (typeof navigator === 'undefined')
+            return 'de-CH';
+        const browserLang = navigator.language; // e.g. 'de-CH', 'en-US', 'fr'
+        // Exact match
+        if (LANGUAGE_PRESETS.has(browserLang))
+            return browserLang;
+        // Base language match (e.g. 'en-US' → 'en', 'de-AT' → 'de-CH')
+        const base = browserLang.split('-')[0];
+        for (const key of LANGUAGE_PRESETS.keys()) {
+            if (key === base || key.startsWith(base + '-'))
+                return key;
+        }
+        return 'de-CH';
+    }
+    // --- Settings dropdown ---
+    /** Toggle settings dropdown. Closes avatar menu if opening. */
+    toggleSettings() {
+        const willOpen = !this.isSettingsOpen();
+        this.isSettingsOpen.set(willOpen);
+        if (willOpen)
+            this.closeAvatarMenu();
+    }
+    /** Close settings dropdown */
+    closeSettings() {
+        this.isSettingsOpen.set(false);
     }
     /** Update the portal title */
     setTitle(title) {
@@ -320,6 +537,10 @@ class PortalService {
     setUserAccount(userAccount) {
         this.avatarMenu.update((m) => ({ ...m, userAccount }));
     }
+    /** Clear all blades and return to panorama */
+    clearBlades() {
+        this.blades.set([]);
+    }
     /** Set tiles on the startboard */
     setTiles(tiles) {
         this.panorama.update((p) => ({
@@ -355,9 +576,12 @@ class PortalService {
         }));
     }
     // --- Avatar menu ---
-    /** Toggle avatar menu open/close */
+    /** Toggle avatar menu open/close. Closes settings if opening. */
     toggleAvatarMenu() {
-        this.avatarMenu.update((m) => ({ ...m, isOpen: !m.isOpen }));
+        const willOpen = !this.avatarMenu().isOpen;
+        this.avatarMenu.update((m) => ({ ...m, isOpen: willOpen }));
+        if (willOpen)
+            this.closeSettings();
     }
     /** Close avatar menu */
     closeAvatarMenu() {
@@ -508,7 +732,7 @@ class BladeService {
     /**
      * Check if a blade with the given path is currently open.
      */
-    isBladOpen(path) {
+    isBladeOpen(path) {
         return this.portal.blades().some((b) => b.path === path.toLowerCase());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -519,6 +743,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Registry for mapping blade paths to Angular components.
+ *
+ * Allows consumer apps to register components for blade paths,
+ * enabling dynamic rendering in BladeHostComponent without
+ * manual @switch blocks.
+ *
+ * Usage in app bootstrap:
+ * ```typescript
+ * const registry = inject(BladeRegistry);
+ * registry.register('customers', CustomerNavComponent);
+ * registry.register('customers/list', CustomerListComponent);
+ * ```
+ *
+ * Or register multiple at once:
+ * ```typescript
+ * registry.registerAll({
+ *   'customers': CustomerNavComponent,
+ *   'customers/list': CustomerListComponent,
+ * });
+ * ```
+ */
+class BladeRegistry {
+    registry = new Map();
+    /** Register a component for a blade path */
+    register(path, component) {
+        this.registry.set(path.toLowerCase(), component);
+    }
+    /** Register multiple blade path → component mappings */
+    registerAll(mappings) {
+        for (const [path, component] of Object.entries(mappings)) {
+            this.register(path, component);
+        }
+    }
+    /** Get the component registered for a path, if any */
+    get(path) {
+        return this.registry.get(path.toLowerCase());
+    }
+    /** Check if a component is registered for a path */
+    has(path) {
+        return this.registry.has(path.toLowerCase());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /**
  * Provide the angular-portal-azure library configuration.
  *
@@ -573,7 +847,14 @@ class TileComponent {
       [class.fxs-tilesize-mini]="tile().size === 'mini'"
       [class.fxs-tilesize-herowide]="tile().size === 'herowide'"
       [class.fxs-tilesize-small]="tile().size === 'small'">
-      <div class="fxs-part fxs-part-clickable" (click)="onClick()" style="cursor:pointer;">
+      <div class="fxs-part fxs-part-clickable"
+           role="button"
+           tabindex="0"
+           [attr.aria-label]="tile().title"
+           (click)="onClick()"
+           (keydown.enter)="onClick()"
+           (keydown.space)="onClick(); $event.preventDefault()"
+           style="cursor:pointer;">
         <header class="fxs-part-title">
           <h2 class="msportalfx-tooltip-overflow">{{ tile().title }}</h2>
           @if (tile().subtitle) {
@@ -595,7 +876,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       [class.fxs-tilesize-mini]="tile().size === 'mini'"
       [class.fxs-tilesize-herowide]="tile().size === 'herowide'"
       [class.fxs-tilesize-small]="tile().size === 'small'">
-      <div class="fxs-part fxs-part-clickable" (click)="onClick()" style="cursor:pointer;">
+      <div class="fxs-part fxs-part-clickable"
+           role="button"
+           tabindex="0"
+           [attr.aria-label]="tile().title"
+           (click)="onClick()"
+           (keydown.enter)="onClick()"
+           (keydown.space)="onClick(); $event.preventDefault()"
+           style="cursor:pointer;">
         <header class="fxs-part-title">
           <h2 class="msportalfx-tooltip-overflow">{{ tile().title }}</h2>
           @if (tile().subtitle) {
@@ -636,9 +924,9 @@ class PanoramaComponent {
           @if (panorama().tiles.length === 0 && panorama().isTilesLoaded) {
             <div class="fxs-part fxs-part-clickable" style="background-color:var(--apa-surface-raised); padding:25px; max-width:800px; margin-bottom:15px; height:auto;">
               <header class="fxs-part-title" style="color:var(--apa-text)">
-                <h3 class="msportalfx-tooltip-overflow">Keine Applikationen zugeordnet</h3>
+                <h3 class="msportalfx-tooltip-overflow">{{ portal.labels().noAppsTitle }}</h3>
                 <p class="msportalfx-tooltip-overflow" style="margin:0;padding:0">
-                  Wende dich bitte an den Administrator, damit die Applikationen zugeordnet werden können.
+                  {{ portal.labels().noAppsMessage }}
                 </p>
               </header>
             </div>
@@ -664,9 +952,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           @if (panorama().tiles.length === 0 && panorama().isTilesLoaded) {
             <div class="fxs-part fxs-part-clickable" style="background-color:var(--apa-surface-raised); padding:25px; max-width:800px; margin-bottom:15px; height:auto;">
               <header class="fxs-part-title" style="color:var(--apa-text)">
-                <h3 class="msportalfx-tooltip-overflow">Keine Applikationen zugeordnet</h3>
+                <h3 class="msportalfx-tooltip-overflow">{{ portal.labels().noAppsTitle }}</h3>
                 <p class="msportalfx-tooltip-overflow" style="margin:0;padding:0">
-                  Wende dich bitte an den Administrator, damit die Applikationen zugeordnet werden können.
+                  {{ portal.labels().noAppsMessage }}
                 </p>
               </header>
             </div>
@@ -688,7 +976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Root portal shell component.
  * Ported from the fxs-portal structure in home.html (v0.2.346).
  *
- * Provides the top bar (with portal title and avatar menu),
+ * Provides the top bar (with portal title, settings gear, and avatar menu),
  * and the main content area. Child components (panorama, blade-host,
  * notification-panel) are projected via content projection.
  *
@@ -706,7 +994,10 @@ class PortalLayoutComponent {
     document = inject(DOCUMENT);
     elementRef = inject(ElementRef);
     injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
     isDark = signal(false, ...(ngDevMode ? [{ debugName: "isDark" }] : []));
+    /** Available languages from the preset registry */
+    availableLanguages = Array.from(LANGUAGE_PRESETS.values()).map((p) => ({ code: p.code, displayName: p.displayName }));
     constructor() {
         const stored = localStorage.getItem(PortalLayoutComponent.STORAGE_KEY);
         const dark = stored === 'true';
@@ -721,12 +1012,48 @@ class PortalLayoutComponent {
                 this.scrollToLastBlade();
             }, { injector });
         });
+        // Click-outside handler for dropdowns
+        afterNextRender(() => {
+            const handler = (event) => {
+                const target = event.target;
+                const settingsEl = this.elementRef.nativeElement.querySelector('.apa-settings-container');
+                const avatarEl = this.elementRef.nativeElement.querySelector('.fxs-avatarmenu-tenant-container');
+                if (settingsEl && !settingsEl.contains(target)) {
+                    this.portal.closeSettings();
+                }
+                if (avatarEl && !avatarEl.contains(target)) {
+                    this.portal.closeAvatarMenu();
+                }
+            };
+            this.document.addEventListener('click', handler);
+            // Escape key closes open dropdowns
+            const keyHandler = (event) => {
+                if (event.key === 'Escape') {
+                    if (this.portal.isSettingsOpen()) {
+                        this.portal.closeSettings();
+                        event.preventDefault();
+                    }
+                    if (this.portal.avatarMenu().isOpen) {
+                        this.portal.closeAvatarMenu();
+                        event.preventDefault();
+                    }
+                }
+            };
+            this.document.addEventListener('keydown', keyHandler);
+            this.destroyRef.onDestroy(() => {
+                this.document.removeEventListener('click', handler);
+                this.document.removeEventListener('keydown', keyHandler);
+            });
+        }, { injector: this.injector });
     }
     toggleDarkMode() {
         const dark = !this.isDark();
         localStorage.setItem(PortalLayoutComponent.STORAGE_KEY, String(dark));
         this.applyTheme(dark);
     }
+    switchLanguage(code) {
+        this.portal.setLanguage(code);
+    }
     applyTheme(dark) {
         this.isDark.set(dark);
         this.document.documentElement.classList.toggle('apa-dark', dark);
@@ -748,8 +1075,7 @@ class PortalLayoutComponent {
     }
     onHomeClick(event) {
         event.preventDefault();
-        // Clear all blades to show panorama
-        this.portal.blades.set([]);
+        this.portal.clearBlades();
     }
     scrollToLastBlade() {
         const scrollContainer = this.elementRef.nativeElement.querySelector('.fxs-portal-content');
@@ -788,35 +1114,71 @@ class PortalLayoutComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: PortalLayoutComponent, isStandalone: true, selector: "apa-portal-layout", ngImport: i0, template: `
     <div class="fxs-portal fxs-theme-blue">
       <!-- Top bar -->
-      <div class="fxs-topbar">
+      <header class="fxs-topbar" role="banner">
         <div style="padding-left:25px;">
           <a href="#" class="fxs-topbar-home fxs-has-hover" (click)="onHomeClick($event)">
             {{ portal.panorama().title }}
           </a>
         </div>
         <div style="display:flex; align-items:center; gap:12px; padding-right:10px;">
-          <button class="apa-darkmode-toggle fxs-has-hover"
-                  (click)="toggleDarkMode()"
-                  [attr.aria-label]="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
-                  [attr.title]="isDark() ? 'Light mode' : 'Dark mode'">
-            <i [class]="isDark() ? 'ti ti-sun' : 'ti ti-moon'"></i>
-          </button>
+          <!-- Settings gear -->
+          <div class="apa-settings-container" style="position:relative;">
+            <button class="apa-settings-trigger fxs-has-hover"
+                    (click)="portal.toggleSettings()"
+                    [attr.aria-label]="portal.labels().settings"
+                    [attr.title]="portal.labels().settings"
+                    [attr.aria-expanded]="portal.isSettingsOpen()"
+                    aria-haspopup="true">
+              <i class="ti ti-settings" aria-hidden="true"></i>
+            </button>
+            @if (portal.isSettingsOpen()) {
+              <div class="apa-settings-dropdown" role="menu">
+                <!-- Appearance -->
+                <div class="apa-settings-section-header">{{ portal.labels().appearance }}</div>
+                <button class="apa-settings-item" role="menuitem" (click)="toggleDarkMode()">
+                  <i [class]="isDark() ? 'ti ti-sun' : 'ti ti-moon'" aria-hidden="true"></i>
+                  <span>{{ isDark() ? portal.labels().lightMode : portal.labels().darkMode }}</span>
+                </button>
+                <!-- Language -->
+                <div class="apa-settings-section-header">{{ portal.labels().language }}</div>
+                @for (lang of availableLanguages; track lang.code) {
+                  <button class="apa-settings-item" role="menuitem"
+                          [class.apa-settings-item-active]="lang.code === portal.currentLanguage()"
+                          (click)="switchLanguage(lang.code)">
+                    <span>{{ lang.displayName }}</span>
+                    @if (lang.code === portal.currentLanguage()) {
+                      <i class="ti ti-check" aria-hidden="true"></i>
+                    }
+                  </button>
+                }
+              </div>
+            }
+          </div>
+          <!-- Avatar menu -->
           <div class="fxs-avatarmenu-tenant-container" style="position:relative;">
-            <a class="apa-avatar-trigger fxs-has-hover" (click)="portal.toggleAvatarMenu()">
-              <span class="apa-avatar-initials">{{ initials() }}</span>
+            <a class="apa-avatar-trigger fxs-has-hover"
+               role="button"
+               tabindex="0"
+               [attr.aria-expanded]="portal.avatarMenu().isOpen"
+               aria-haspopup="true"
+               (click)="portal.toggleAvatarMenu()"
+               (keydown.enter)="portal.toggleAvatarMenu()"
+               (keydown.space)="portal.toggleAvatarMenu()">
+              <span class="apa-avatar-initials" aria-hidden="true">{{ initials() }}</span>
               <span class="apa-avatar-info">
                 <span class="apa-avatar-name">{{ displayName() }}</span>
                 <span class="apa-avatar-email">{{ portal.avatarMenu().userAccount.userName }}</span>
               </span>
               <i class="ti" [class.ti-chevron-down]="!portal.avatarMenu().isOpen"
-                            [class.ti-chevron-up]="portal.avatarMenu().isOpen"></i>
+                            [class.ti-chevron-up]="portal.avatarMenu().isOpen"
+                            aria-hidden="true"></i>
             </a>
             @if (portal.avatarMenu().isOpen && portal.avatarMenu().items.length > 0) {
-              <div class="apa-avatar-dropdown">
+              <div class="apa-avatar-dropdown" role="menu">
                 @for (item of portal.avatarMenu().items; track item.href) {
-                  <a class="apa-avatar-dropdown-item" [href]="item.href">
+                  <a class="apa-avatar-dropdown-item" role="menuitem" [href]="item.href">
                     @if (item.icon) {
-                      <i [class]="item.icon"></i>
+                      <i [class]="item.icon" aria-hidden="true"></i>
                     }
                     <span>{{ item.label }}</span>
                   </a>
@@ -825,12 +1187,12 @@ class PortalLayoutComponent {
             }
           </div>
         </div>
-      </div>
+      </header>
       <!-- Main content area -->
-      <div class="fxs-portal-content fxs-panorama"
-           [style.margin-right.px]="notificationMargin()">
+      <main class="fxs-portal-content fxs-panorama"
+            [style.margin-right.px]="notificationMargin()">
         <ng-content />
-      </div>
+      </main>
       <!-- Footer -->
       <div class="fxs-portal-footer"></div>
     </div>
@@ -844,35 +1206,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     template: `
     <div class="fxs-portal fxs-theme-blue">
       <!-- Top bar -->
-      <div class="fxs-topbar">
+      <header class="fxs-topbar" role="banner">
         <div style="padding-left:25px;">
           <a href="#" class="fxs-topbar-home fxs-has-hover" (click)="onHomeClick($event)">
             {{ portal.panorama().title }}
           </a>
         </div>
         <div style="display:flex; align-items:center; gap:12px; padding-right:10px;">
-          <button class="apa-darkmode-toggle fxs-has-hover"
-                  (click)="toggleDarkMode()"
-                  [attr.aria-label]="isDark() ? 'Switch to light mode' : 'Switch to dark mode'"
-                  [attr.title]="isDark() ? 'Light mode' : 'Dark mode'">
-            <i [class]="isDark() ? 'ti ti-sun' : 'ti ti-moon'"></i>
-          </button>
+          <!-- Settings gear -->
+          <div class="apa-settings-container" style="position:relative;">
+            <button class="apa-settings-trigger fxs-has-hover"
+                    (click)="portal.toggleSettings()"
+                    [attr.aria-label]="portal.labels().settings"
+                    [attr.title]="portal.labels().settings"
+                    [attr.aria-expanded]="portal.isSettingsOpen()"
+                    aria-haspopup="true">
+              <i class="ti ti-settings" aria-hidden="true"></i>
+            </button>
+            @if (portal.isSettingsOpen()) {
+              <div class="apa-settings-dropdown" role="menu">
+                <!-- Appearance -->
+                <div class="apa-settings-section-header">{{ portal.labels().appearance }}</div>
+                <button class="apa-settings-item" role="menuitem" (click)="toggleDarkMode()">
+                  <i [class]="isDark() ? 'ti ti-sun' : 'ti ti-moon'" aria-hidden="true"></i>
+                  <span>{{ isDark() ? portal.labels().lightMode : portal.labels().darkMode }}</span>
+                </button>
+                <!-- Language -->
+                <div class="apa-settings-section-header">{{ portal.labels().language }}</div>
+                @for (lang of availableLanguages; track lang.code) {
+                  <button class="apa-settings-item" role="menuitem"
+                          [class.apa-settings-item-active]="lang.code === portal.currentLanguage()"
+                          (click)="switchLanguage(lang.code)">
+                    <span>{{ lang.displayName }}</span>
+                    @if (lang.code === portal.currentLanguage()) {
+                      <i class="ti ti-check" aria-hidden="true"></i>
+                    }
+                  </button>
+                }
+              </div>
+            }
+          </div>
+          <!-- Avatar menu -->
           <div class="fxs-avatarmenu-tenant-container" style="position:relative;">
-            <a class="apa-avatar-trigger fxs-has-hover" (click)="portal.toggleAvatarMenu()">
-              <span class="apa-avatar-initials">{{ initials() }}</span>
+            <a class="apa-avatar-trigger fxs-has-hover"
+               role="button"
+               tabindex="0"
+               [attr.aria-expanded]="portal.avatarMenu().isOpen"
+               aria-haspopup="true"
+               (click)="portal.toggleAvatarMenu()"
+               (keydown.enter)="portal.toggleAvatarMenu()"
+               (keydown.space)="portal.toggleAvatarMenu()">
+              <span class="apa-avatar-initials" aria-hidden="true">{{ initials() }}</span>
               <span class="apa-avatar-info">
                 <span class="apa-avatar-name">{{ displayName() }}</span>
                 <span class="apa-avatar-email">{{ portal.avatarMenu().userAccount.userName }}</span>
               </span>
               <i class="ti" [class.ti-chevron-down]="!portal.avatarMenu().isOpen"
-                            [class.ti-chevron-up]="portal.avatarMenu().isOpen"></i>
+                            [class.ti-chevron-up]="portal.avatarMenu().isOpen"
+                            aria-hidden="true"></i>
             </a>
             @if (portal.avatarMenu().isOpen && portal.avatarMenu().items.length > 0) {
-              <div class="apa-avatar-dropdown">
+              <div class="apa-avatar-dropdown" role="menu">
                 @for (item of portal.avatarMenu().items; track item.href) {
-                  <a class="apa-avatar-dropdown-item" [href]="item.href">
+                  <a class="apa-avatar-dropdown-item" role="menuitem" [href]="item.href">
                     @if (item.icon) {
-                      <i [class]="item.icon"></i>
+                      <i [class]="item.icon" aria-hidden="true"></i>
                     }
                     <span>{{ item.label }}</span>
                   </a>
@@ -881,12 +1279,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             }
           </div>
         </div>
-      </div>
+      </header>
       <!-- Main content area -->
-      <div class="fxs-portal-content fxs-panorama"
-           [style.margin-right.px]="notificationMargin()">
+      <main class="fxs-portal-content fxs-panorama"
+            [style.margin-right.px]="notificationMargin()">
         <ng-content />
-      </div>
+      </main>
       <!-- Footer -->
       <div class="fxs-portal-footer"></div>
     </div>
@@ -912,21 +1310,30 @@ class CommandBarComponent {
     }
     onCommand(cmd) {
         if (cmd.enabled && cmd.action) {
-            cmd.action();
+            const result = cmd.action();
+            if (result instanceof Promise) {
+                result.catch((err) => console.error(`[CommandBar] Command "${cmd.key}" failed:`, err));
+            }
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: CommandBarComponent, isStandalone: true, selector: "apa-command-bar", inputs: { commands: { classPropertyName: "commands", publicName: "commands", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="fxs-commandBar">
-      <ul class="fxs-commandBar-itemList">
+    <nav class="fxs-commandBar" role="toolbar" aria-label="Commands">
+      <ul class="fxs-commandBar-itemList" role="list">
         @for (cmd of visibleCommands(); track cmd.key) {
-          <li>
+          <li role="listitem">
             <a class="fxs-commandBar-item"
+               role="button"
+               [tabindex]="cmd.enabled ? 0 : -1"
                [class.apa-disable-click]="!cmd.enabled"
-               (click)="onCommand(cmd)">
+               [attr.aria-disabled]="!cmd.enabled"
+               [attr.aria-label]="cmd.label"
+               (click)="onCommand(cmd)"
+               (keydown.enter)="onCommand(cmd)"
+               (keydown.space)="onCommand(cmd)">
               <span class="fxs-commandBar-item-text">{{ cmd.label }}</span>
               @if (cmd.icon) {
-                <span class="fxs-commandBar-item-icon apa-commandbar-icon">
+                <span class="fxs-commandBar-item-icon apa-commandbar-icon" aria-hidden="true">
                   <span [class]="cmd.icon"></span>
                 </span>
               }
@@ -934,22 +1341,28 @@ class CommandBarComponent {
           </li>
         }
       </ul>
-    </div>
+    </nav>
   `, isInline: true, styles: [":host{display:block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CommandBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-command-bar', standalone: true, template: `
-    <div class="fxs-commandBar">
-      <ul class="fxs-commandBar-itemList">
+    <nav class="fxs-commandBar" role="toolbar" aria-label="Commands">
+      <ul class="fxs-commandBar-itemList" role="list">
         @for (cmd of visibleCommands(); track cmd.key) {
-          <li>
+          <li role="listitem">
             <a class="fxs-commandBar-item"
+               role="button"
+               [tabindex]="cmd.enabled ? 0 : -1"
                [class.apa-disable-click]="!cmd.enabled"
-               (click)="onCommand(cmd)">
+               [attr.aria-disabled]="!cmd.enabled"
+               [attr.aria-label]="cmd.label"
+               (click)="onCommand(cmd)"
+               (keydown.enter)="onCommand(cmd)"
+               (keydown.space)="onCommand(cmd)">
               <span class="fxs-commandBar-item-text">{{ cmd.label }}</span>
               @if (cmd.icon) {
-                <span class="fxs-commandBar-item-icon apa-commandbar-icon">
+                <span class="fxs-commandBar-item-icon apa-commandbar-icon" aria-hidden="true">
                   <span [class]="cmd.icon"></span>
                 </span>
               }
@@ -957,7 +1370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           </li>
         }
       </ul>
-    </div>
+    </nav>
   `, styles: [":host{display:block}\n"] }]
         }], propDecorators: { commands: [{ type: i0.Input, args: [{ isSignal: true, alias: "commands", required: false }] }] } });
 
@@ -978,6 +1391,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class BladeComponent {
     blade = input.required(...(ngDevMode ? [{ debugName: "blade" }] : []));
     bladeClose = output();
+    portal = inject(PortalService);
     bladeService = inject(BladeService);
     onClose() {
         const b = this.blade();
@@ -987,12 +1401,16 @@ class BladeComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BladeComponent, isStandalone: true, selector: "apa-blade", inputs: { blade: { classPropertyName: "blade", publicName: "blade", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { bladeClose: "bladeClose" }, ngImport: i0, template: `
     <section class="fxs-blade-locked fxs-blade fx-rightClick fxs-bladesize-small"
+             role="region"
+             [attr.aria-label]="blade().title"
              [style.width.px]="blade().width">
       <!-- Header -->
       <header class="fxs-blade-header">
         <!-- Status bar -->
         <div class="fxs-blade-statusbar-wrapper">
           <div class="fxs-blade-statusbar"
+               role="status"
+               aria-live="polite"
                [class.apa-statusbar-info]="blade().statusBar.style === 'info'"
                [class.apa-statusbar-error]="blade().statusBar.style === 'error' || blade().statusBar.style === 'warning'"
                [class.apa-statusbar-success]="blade().statusBar.style === 'success'">
@@ -1002,7 +1420,9 @@ class BladeComponent {
 
         <!-- Action buttons -->
         <div class="fxs-blade-actions">
-          <button (click)="onClose()" title="Schliessen">
+          <button (click)="onClose()"
+                  [title]="portal.labels().close"
+                  [attr.aria-label]="portal.labels().close + ' ' + blade().title">
             <svg viewBox="0 0 11 11" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
               <g>
                 <polygon class="msportal-fx-svg-placeholder" points="10.4,1.4 9.6,0.6 5.5,4.7 1.4,0.6 0.6,1.4 4.7,5.5 0.6,9.6 1.4,10.4 5.5,6.3 9.6,10.4 10.4,9.6 6.3,5.5"/>
@@ -1042,12 +1462,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             type: Component,
             args: [{ selector: 'apa-blade', standalone: true, imports: [CommandBarComponent], template: `
     <section class="fxs-blade-locked fxs-blade fx-rightClick fxs-bladesize-small"
+             role="region"
+             [attr.aria-label]="blade().title"
              [style.width.px]="blade().width">
       <!-- Header -->
       <header class="fxs-blade-header">
         <!-- Status bar -->
         <div class="fxs-blade-statusbar-wrapper">
           <div class="fxs-blade-statusbar"
+               role="status"
+               aria-live="polite"
                [class.apa-statusbar-info]="blade().statusBar.style === 'info'"
                [class.apa-statusbar-error]="blade().statusBar.style === 'error' || blade().statusBar.style === 'warning'"
                [class.apa-statusbar-success]="blade().statusBar.style === 'success'">
@@ -1057,7 +1481,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
         <!-- Action buttons -->
         <div class="fxs-blade-actions">
-          <button (click)="onClose()" title="Schliessen">
+          <button (click)="onClose()"
+                  [title]="portal.labels().close"
+                  [attr.aria-label]="portal.labels().close + ' ' + blade().title">
             <svg viewBox="0 0 11 11" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
               <g>
                 <polygon class="msportal-fx-svg-placeholder" points="10.4,1.4 9.6,0.6 5.5,4.7 1.4,0.6 0.6,1.4 4.7,5.5 0.6,9.6 1.4,10.4 5.5,6.3 9.6,10.4 10.4,9.6 6.3,5.5"/>
@@ -1101,8 +1527,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Each blade in the stack is rendered horizontally. When a new blade
  * is added, the portal layout scrolls to show it.
  *
- * Consumer apps provide blade content via the [bladeTemplate] input
- * or by routing. For now, blades are rendered with their path as content.
+ * If a component is registered via BladeRegistry for a blade path,
+ * it is rendered dynamically via ngComponentOutlet. Otherwise,
+ * the blade path is shown as fallback text.
  *
  * Usage:
  * ```html
@@ -1111,6 +1538,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  */
 class BladeHostComponent {
     portal = inject(PortalService);
+    registry = inject(BladeRegistry);
+    getComponent(path) {
+        return this.registry.get(path) ?? null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BladeHostComponent, isStandalone: true, selector: "apa-blade-host", ngImport: i0, template: `
     <div id="apa-blade-area" class="fxs-journey-target fxs-journey">
@@ -1118,25 +1549,31 @@ class BladeHostComponent {
         @for (blade of portal.blades(); track blade.path) {
           <div class="azureportalblade fxs-stacklayout-child">
             <apa-blade [blade]="blade">
-              <!-- Default content: blade path (consumers override via content projection or custom templates) -->
-              <p style="padding:25px; color:var(--apa-text-secondary);">{{ blade.path }}</p>
+              @if (getComponent(blade.path); as component) {
+                <ng-container *ngComponentOutlet="component" />
+              } @else {
+                <p style="padding:25px; color:var(--apa-text-secondary);">{{ blade.path }}</p>
+              }
             </apa-blade>
           </div>
         }
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: BladeComponent, selector: "apa-blade", inputs: ["blade"], outputs: ["bladeClose"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: BladeComponent, selector: "apa-blade", inputs: ["blade"], outputs: ["bladeClose"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeHostComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'apa-blade-host', standalone: true, imports: [BladeComponent], template: `
+            args: [{ selector: 'apa-blade-host', standalone: true, imports: [BladeComponent, NgComponentOutlet], template: `
     <div id="apa-blade-area" class="fxs-journey-target fxs-journey">
       <div class="fxs-journey-layout fxs-stacklayout fxs-stacklayout-horizontal">
         @for (blade of portal.blades(); track blade.path) {
           <div class="azureportalblade fxs-stacklayout-child">
             <apa-blade [blade]="blade">
-              <!-- Default content: blade path (consumers override via content projection or custom templates) -->
-              <p style="padding:25px; color:var(--apa-text-secondary);">{{ blade.path }}</p>
+              @if (getComponent(blade.path); as component) {
+                <ng-container *ngComponentOutlet="component" />
+              } @else {
+                <p style="padding:25px; color:var(--apa-text-secondary);">{{ blade.path }}</p>
+              }
             </apa-blade>
           </div>
         }
@@ -1178,22 +1615,25 @@ class BladeNavComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BladeNavComponent, isStandalone: true, selector: "apa-blade-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, senderPath: { classPropertyName: "senderPath", publicName: "senderPath", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <table class="azc-grid-full azc-grid-multiselectable">
+    <table class="azc-grid-full azc-grid-multiselectable" role="grid" aria-label="Navigation">
       <colgroup>
         <col class="col0" style="width:28px;">
         <col class="col1">
       </colgroup>
       <tbody class="azc-grid-groupdata" role="rowgroup">
         @for (item of visibleItems(); track item.bladePath) {
-          <tr role="row" style="cursor:pointer" (click)="onItemClick(item)">
-            <td class="msportalfx-gridcolumn-asseticon" role="gridcell">
+          <tr role="row" style="cursor:pointer"
+              [attr.aria-label]="item.title"
+              (click)="onItemClick(item)"
+              (keydown.enter)="onItemClick(item)">
+            <td class="msportalfx-gridcolumn-asseticon" role="gridcell" aria-hidden="true">
               @if (item.cssClass) {
                 <i [class]="item.cssClass"></i>
               }
             </td>
             <td tabindex="0" role="gridcell">
               @if (item.hrefPath) {
-                <a [href]="item.hrefPath" target="_blank">{{ item.title }}</a>
+                <a [href]="item.hrefPath" target="_blank" rel="noopener noreferrer">{{ item.title }}</a>
               } @else {
                 <span>{{ item.title }}</span>
               }
@@ -1207,22 +1647,25 @@ class BladeNavComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BladeNavComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-blade-nav', standalone: true, template: `
-    <table class="azc-grid-full azc-grid-multiselectable">
+    <table class="azc-grid-full azc-grid-multiselectable" role="grid" aria-label="Navigation">
       <colgroup>
         <col class="col0" style="width:28px;">
         <col class="col1">
       </colgroup>
       <tbody class="azc-grid-groupdata" role="rowgroup">
         @for (item of visibleItems(); track item.bladePath) {
-          <tr role="row" style="cursor:pointer" (click)="onItemClick(item)">
-            <td class="msportalfx-gridcolumn-asseticon" role="gridcell">
+          <tr role="row" style="cursor:pointer"
+              [attr.aria-label]="item.title"
+              (click)="onItemClick(item)"
+              (keydown.enter)="onItemClick(item)">
+            <td class="msportalfx-gridcolumn-asseticon" role="gridcell" aria-hidden="true">
               @if (item.cssClass) {
                 <i [class]="item.cssClass"></i>
               }
             </td>
             <td tabindex="0" role="gridcell">
               @if (item.hrefPath) {
-                <a [href]="item.hrefPath" target="_blank">{{ item.title }}</a>
+                <a [href]="item.hrefPath" target="_blank" rel="noopener noreferrer">{{ item.title }}</a>
               } @else {
                 <span>{{ item.title }}</span>
               }
@@ -1262,6 +1705,7 @@ class BladeGridComponent {
     itemClick = output();
     searchText = '';
     bladeService = inject(BladeService);
+    portal = inject(PortalService);
     filteredItems() {
         return filterItems(this.items(), this.searchText);
     }
@@ -1282,22 +1726,26 @@ class BladeGridComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: BladeGridComponent, isStandalone: true, selector: "apa-blade-grid", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, senderPath: { classPropertyName: "senderPath", publicName: "senderPath", isSignal: true, isRequired: false, transformFunction: null }, displayField: { classPropertyName: "displayField", publicName: "displayField", isSignal: true, isRequired: false, transformFunction: null }, bladePathField: { classPropertyName: "bladePathField", publicName: "bladePathField", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
     @if (searchable()) {
       <div style="padding:0 0 10px 0;">
-        <input type="text"
+        <input type="search"
                class="form-control"
-               placeholder="Suchen..."
+               [placeholder]="portal.labels().search"
+               [attr.aria-label]="portal.labels().search"
                [value]="searchText"
                (input)="onSearchInput($event)" />
       </div>
     }
-    <table class="azc-grid-full azc-grid-multiselectable">
+    <table class="azc-grid-full azc-grid-multiselectable" role="grid" aria-label="Items">
       <colgroup>
         <col class="col0" style="width:41px;">
         <col class="col1">
       </colgroup>
       <tbody class="azc-grid-groupdata" role="rowgroup">
         @for (item of filteredItems(); track $index) {
-          <tr role="row" style="cursor:pointer" (click)="onRowClick(item)">
-            <td class="msportalfx-gridcolumn-asseticon" role="gridcell">
+          <tr role="row" style="cursor:pointer"
+              [attr.aria-label]="getDisplayValue(item)"
+              (click)="onRowClick(item)"
+              (keydown.enter)="onRowClick(item)">
+            <td class="msportalfx-gridcolumn-asseticon" role="gridcell" aria-hidden="true">
               <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 50 50" focusable="false" style="height:21px;width:21px;">
                 <rect class="msportalfx-svg-c04" x="19.8" y="39.4" width="10.6" height="3.4"/>
                 <polygon class="msportalfx-svg-c04" points="23.1,50 27,50 30.3,46.5 19.8,46.5"/>
@@ -1318,22 +1766,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'apa-blade-grid', standalone: true, template: `
     @if (searchable()) {
       <div style="padding:0 0 10px 0;">
-        <input type="text"
+        <input type="search"
                class="form-control"
-               placeholder="Suchen..."
+               [placeholder]="portal.labels().search"
+               [attr.aria-label]="portal.labels().search"
                [value]="searchText"
                (input)="onSearchInput($event)" />
       </div>
     }
-    <table class="azc-grid-full azc-grid-multiselectable">
+    <table class="azc-grid-full azc-grid-multiselectable" role="grid" aria-label="Items">
       <colgroup>
         <col class="col0" style="width:41px;">
         <col class="col1">
       </colgroup>
       <tbody class="azc-grid-groupdata" role="rowgroup">
         @for (item of filteredItems(); track $index) {
-          <tr role="row" style="cursor:pointer" (click)="onRowClick(item)">
-            <td class="msportalfx-gridcolumn-asseticon" role="gridcell">
+          <tr role="row" style="cursor:pointer"
+              [attr.aria-label]="getDisplayValue(item)"
+              (click)="onRowClick(item)"
+              (keydown.enter)="onRowClick(item)">
+            <td class="msportalfx-gridcolumn-asseticon" role="gridcell" aria-hidden="true">
               <svg xmlns="http://www.w3.org/2000/svg" class="msportal-fx-svg-placeholder" viewBox="0 0 50 50" focusable="false" style="height:21px;width:21px;">
                 <rect class="msportalfx-svg-c04" x="19.8" y="39.4" width="10.6" height="3.4"/>
                 <polygon class="msportalfx-svg-c04" points="23.1,50 27,50 30.3,46.5 19.8,46.5"/>
@@ -1393,19 +1845,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Convenience function for setting up typical detail/edit blade commands
  * matching the v0.2.346 BladeDetail default commands.
  */
-function createDetailCommands(handlers) {
+function createDetailCommands(handlers, labels = DEFAULT_LABELS) {
     const commands = [];
     if (handlers.onNew) {
-        commands.push(createCommand('new', 'neu', handlers.onNew, 'ti ti-plus'));
+        commands.push(createCommand('new', labels.cmdNew, handlers.onNew, 'ti ti-plus'));
     }
     if (handlers.onSave) {
-        commands.push(createCommand('save', 'speichern', handlers.onSave, 'ti ti-device-floppy'));
+        commands.push(createCommand('save', labels.cmdSave, handlers.onSave, 'ti ti-device-floppy'));
     }
     if (handlers.onDelete) {
-        commands.push(createCommand('delete', 'löschen', handlers.onDelete, 'ti ti-trash'));
+        commands.push(createCommand('delete', labels.cmdDelete, handlers.onDelete, 'ti ti-trash'));
     }
     if (handlers.onCancel) {
-        commands.push(createCommand('cancel', 'abbrechen', handlers.onCancel, 'ti ti-x'));
+        commands.push(createCommand('cancel', labels.cmdCancel, handlers.onCancel, 'ti ti-x'));
     }
     return commands;
 }
@@ -1430,8 +1882,12 @@ class NotificationPanelComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: NotificationPanelComponent, isStandalone: true, selector: "apa-notification-panel", ngImport: i0, template: `
     @if (portal.notification().isVisible) {
       <div class="apa-notification-panel"
+           role="complementary"
+           aria-live="polite"
            [style.width.px]="portal.notification().width">
-        <button class="apa-notification-close" (click)="onClose()" title="Schliessen">
+        <button class="apa-notification-close" (click)="onClose()"
+                [title]="portal.labels().closePanel"
+                [attr.aria-label]="portal.labels().closePanel">
           <svg viewBox="0 0 11 11" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
             <polygon class="msportal-fx-svg-placeholder" points="10.4,1.4 9.6,0.6 5.5,4.7 1.4,0.6 0.6,1.4 4.7,5.5 0.6,9.6 1.4,10.4 5.5,6.3 9.6,10.4 10.4,9.6 6.3,5.5"/>
           </svg>
@@ -1446,8 +1902,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
             args: [{ selector: 'apa-notification-panel', standalone: true, template: `
     @if (portal.notification().isVisible) {
       <div class="apa-notification-panel"
+           role="complementary"
+           aria-live="polite"
            [style.width.px]="portal.notification().width">
-        <button class="apa-notification-close" (click)="onClose()" title="Schliessen">
+        <button class="apa-notification-close" (click)="onClose()"
+                [title]="portal.labels().closePanel"
+                [attr.aria-label]="portal.labels().closePanel">
           <svg viewBox="0 0 11 11" role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
             <polygon class="msportal-fx-svg-placeholder" points="10.4,1.4 9.6,0.6 5.5,4.7 1.4,0.6 0.6,1.4 4.7,5.5 0.6,9.6 1.4,10.4 5.5,6.3 9.6,10.4 10.4,9.6 6.3,5.5"/>
           </svg>
@@ -1534,11 +1994,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Usage:
  * ```html
  * <apa-sidebar [items]="sidebarItems" [collapsed]="false" />
+ * <apa-sidebar [items]="sidebarItems" [width]="240" [collapsedWidth]="60" />
  * ```
  */
 class SidebarComponent {
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    width = input(200, ...(ngDevMode ? [{ debugName: "width" }] : []));
+    collapsedWidth = input(50, ...(ngDevMode ? [{ debugName: "collapsedWidth" }] : []));
     bladeService = inject(BladeService);
     visibleItems() {
         return this.items().filter((item) => item.isVisible);
@@ -1550,42 +2013,62 @@ class SidebarComponent {
         item.callback?.();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SidebarComponent, isStandalone: true, selector: "apa-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <nav class="apa-sidebar" [class.apa-sidebar-collapsed]="collapsed()">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SidebarComponent, isStandalone: true, selector: "apa-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, collapsedWidth: { classPropertyName: "collapsedWidth", publicName: "collapsedWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav class="apa-sidebar" aria-label="Sidebar"
+         [class.apa-sidebar-collapsed]="collapsed()"
+         [style.width.px]="collapsed() ? collapsedWidth() : width()">
       @for (item of visibleItems(); track item.bladePath) {
         <a class="apa-sidebar-item"
+           role="button"
+           tabindex="0"
+           [attr.aria-label]="item.title"
            (click)="onItemClick(item)"
+           (keydown.enter)="onItemClick(item)"
+           (keydown.space)="onItemClick(item)"
            style="cursor:pointer;">
           @if (item.cssClass) {
-            <i [class]="item.cssClass" class="apa-sidebar-icon"></i>
+            <i [class]="item.cssClass" class="apa-sidebar-icon" aria-hidden="true"></i>
           }
           @if (!collapsed()) {
             <span class="apa-sidebar-label">{{ item.title }}</span>
+            @if (item.badge) {
+              <span class="apa-sidebar-badge" aria-label="badge">{{ item.badge }}</span>
+            }
           }
         </a>
       }
     </nav>
-  `, isInline: true, styles: [".apa-sidebar{display:flex;flex-direction:column;background-color:var(--apa-chrome);width:200px;height:100%;padding-top:10px;transition:width .2s ease}.apa-sidebar-collapsed{width:50px}.apa-sidebar-item{display:flex;align-items:center;padding:10px 15px;color:var(--apa-chrome-text);text-decoration:none;font-size:13px;transition:background-color .15s ease}.apa-sidebar-item:hover{background-color:var(--apa-chrome-hover)}.apa-sidebar-icon{margin-right:10px;width:20px;text-align:center}.apa-sidebar-collapsed .apa-sidebar-icon{margin-right:0}\n"] });
+  `, isInline: true, styles: [".apa-sidebar{display:flex;flex-direction:column;background-color:var(--apa-chrome);height:100%;padding-top:10px;transition:width .2s ease}.apa-sidebar-item{display:flex;align-items:center;padding:10px 15px;color:var(--apa-chrome-text);text-decoration:none;font-size:13px;transition:background-color .15s ease}.apa-sidebar-item:hover{background-color:var(--apa-chrome-hover)}.apa-sidebar-icon{margin-right:10px;width:20px;text-align:center}.apa-sidebar-collapsed .apa-sidebar-icon{margin-right:0}.apa-sidebar-label{flex:1}.apa-sidebar-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background-color:var(--apa-accent);color:#fff;font-size:11px;font-weight:600;line-height:1}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'apa-sidebar', standalone: true, template: `
-    <nav class="apa-sidebar" [class.apa-sidebar-collapsed]="collapsed()">
+    <nav class="apa-sidebar" aria-label="Sidebar"
+         [class.apa-sidebar-collapsed]="collapsed()"
+         [style.width.px]="collapsed() ? collapsedWidth() : width()">
       @for (item of visibleItems(); track item.bladePath) {
         <a class="apa-sidebar-item"
+           role="button"
+           tabindex="0"
+           [attr.aria-label]="item.title"
            (click)="onItemClick(item)"
+           (keydown.enter)="onItemClick(item)"
+           (keydown.space)="onItemClick(item)"
            style="cursor:pointer;">
           @if (item.cssClass) {
-            <i [class]="item.cssClass" class="apa-sidebar-icon"></i>
+            <i [class]="item.cssClass" class="apa-sidebar-icon" aria-hidden="true"></i>
           }
           @if (!collapsed()) {
             <span class="apa-sidebar-label">{{ item.title }}</span>
+            @if (item.badge) {
+              <span class="apa-sidebar-badge" aria-label="badge">{{ item.badge }}</span>
+            }
           }
         </a>
       }
     </nav>
-  `, styles: [".apa-sidebar{display:flex;flex-direction:column;background-color:var(--apa-chrome);width:200px;height:100%;padding-top:10px;transition:width .2s ease}.apa-sidebar-collapsed{width:50px}.apa-sidebar-item{display:flex;align-items:center;padding:10px 15px;color:var(--apa-chrome-text);text-decoration:none;font-size:13px;transition:background-color .15s ease}.apa-sidebar-item:hover{background-color:var(--apa-chrome-hover)}.apa-sidebar-icon{margin-right:10px;width:20px;text-align:center}.apa-sidebar-collapsed .apa-sidebar-icon{margin-right:0}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+  `, styles: [".apa-sidebar{display:flex;flex-direction:column;background-color:var(--apa-chrome);height:100%;padding-top:10px;transition:width .2s ease}.apa-sidebar-item{display:flex;align-items:center;padding:10px 15px;color:var(--apa-chrome-text);text-decoration:none;font-size:13px;transition:background-color .15s ease}.apa-sidebar-item:hover{background-color:var(--apa-chrome-hover)}.apa-sidebar-icon{margin-right:10px;width:20px;text-align:center}.apa-sidebar-collapsed .apa-sidebar-icon{margin-right:0}.apa-sidebar-label{flex:1}.apa-sidebar-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background-color:var(--apa-accent);color:#fff;font-size:11px;font-weight:600;line-height:1}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], collapsedWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedWidth", required: false }] }] } });
 
 /*
  * Public API Surface of @ardimedia/angular-portal-azure
@@ -1596,5 +2079,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarMenuComponent, BladeComponent, BladeDetailComponent, BladeGridComponent, BladeHostComponent, BladeNavComponent, BladeService, CommandBarComponent, NotificationPanelComponent, PanoramaComponent, PortalLayoutComponent, PortalService, SidebarComponent, TILE_DIMENSIONS, TileComponent, TileSize, clearStatusBar, createAvatarMenu, createBlade, createCommand, createDataBlade, createDetailCommands, createNavItem, createNotificationPanel, createPanorama, createTile, executeDeleteItem, executeLoadItem, executeLoadItems, executeSaveItem, filterItems, getUserDisplayName, layoutTiles, providePortalAzure, statusBarError, statusBarInfo, statusBarSuccess };
+export { AvatarMenuComponent, BladeComponent, BladeDetailComponent, BladeGridComponent, BladeHostComponent, BladeNavComponent, BladeRegistry, BladeService, CommandBarComponent, DEFAULT_LABELS, LABELS_DE_CH, LABELS_DE_DE, LABELS_EN, LABELS_ES, LABELS_FR, LABELS_IT, LANGUAGE_PRESETS, NotificationPanelComponent, PanoramaComponent, PortalLayoutComponent, PortalService, SidebarComponent, TILE_DIMENSIONS, TileComponent, TileSize, clearStatusBar, createAvatarMenu, createBlade, createCommand, createDataBlade, createDetailCommands, createNavItem, createNotificationPanel, createPanorama, createTile, executeDeleteItem, executeLoadItem, executeLoadItems, executeSaveItem, filterItems, getUserDisplayName, layoutTiles, providePortalAzure, registerLanguagePreset, statusBarError, statusBarInfo, statusBarSuccess };
 //# sourceMappingURL=ardimedia-angular-portal-azure.mjs.map