oip-common 0.4.0 → 0.5.0

package/fesm2022/oip-common.mjs

@@ -1,6 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, computed, effect, DestroyRef, ChangeDetectorRef, Component, Input, InjectionToken, PLATFORM_ID, ViewChild, HostBinding, EventEmitter, Output, Renderer2, SecurityContext, ChangeDetectionStrategy, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
+import { Injectable, inject, signal, computed, effect, DestroyRef, ChangeDetectorRef, Component, Input, InjectionToken, PLATFORM_ID, ViewChild, HostBinding, EventEmitter, Output, Renderer2, SecurityContext, ChangeDetectionStrategy, Injector, EnvironmentInjector, ViewContainerRef, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Subject, BehaviorSubject, of, tap, shareReplay, ReplaySubject, firstValueFrom, from, filter as filter$1 } from 'rxjs';
 import * as i2$2 from 'primeng/api';
 import { MessageService, ConfirmationService, PrimeIcons, SharedModule } from 'primeng/api';
 import { HttpErrorResponse, HttpClient as HttpClient$1, provideHttpClient, withInterceptors, withFetch } from '@angular/common/http';
@@ -8,7 +9,6 @@ import * as i2$3 from '@ngx-translate/core';
 import { TranslateService, TranslatePipe, TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import * as i1$5 from '@angular/router';
 import { ActivatedRoute, Router, RouterModule, NavigationEnd, RouterLinkActive, RouterLink } from '@angular/router';
-import { BehaviorSubject, Subject, of, tap, shareReplay, ReplaySubject, firstValueFrom, from, filter as filter$1 } from 'rxjs';
 import { tap as tap$1, catchError, filter, distinctUntilChanged, switchMap, map, take } from 'rxjs/operators';
 import { Title, DomSanitizer } from '@angular/platform-browser';
 import { PrimeNG } from 'primeng/config';
@@ -24,7 +24,7 @@ import * as i1$3 from '@angular/common';
 import { isPlatformBrowser, CommonModule, NgComponentOutlet, NgClass, DatePipe, PathLocationStrategy, LocationStrategy } from '@angular/common';
 import * as i3$3 from 'primeng/styleclass';
 import { StyleClassModule } from 'primeng/styleclass';
-import { updatePreset, updateSurfacePalette, $t } from '@primeng/themes';
+import { updatePreset, updateSurfacePalette, $t, definePreset } from '@primeng/themes';
 import Aura from '@primeng/themes/aura';
 import Lara from '@primeng/themes/lara';
 import Nora from '@primeng/themes/nora';
@@ -65,13 +65,15 @@ import { TableModule } from 'primeng/table';
 import * as i2$4 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
 import { TextareaModule, Textarea } from 'primeng/textarea';
-import * as i4$2 from 'primeng/toolbar';
+import * as i5$1 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
-import * as i5$1 from 'primeng/card';
+import * as i5$2 from 'primeng/card';
 import { CardModule } from 'primeng/card';
 import { DividerModule } from 'primeng/divider';
 import * as i6 from 'primeng/panel';
 import { PanelModule } from 'primeng/panel';
+import { loadRemoteModule } from '@angular-architects/module-federation';
+import { primitive } from '@primeng/themes/aura/base';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 class TopBarService {
@@ -89,22 +91,24 @@ class TopBarService {
     }
     set activeId(value) {
         this._activeId = value;
-        if (this.activeTopBarItem?.click)
-            this.activeTopBarItem.click();
+        const activeTopBarItem = this.activeTopBarItem;
+        if (activeTopBarItem?.click)
+            activeTopBarItem.click();
+        this.activeIdSubject.next(value);
     }
     constructor() {
         this.topBarItems = [];
+        this.activeIdSubject = new Subject();
+        this.activeId$ = this.activeIdSubject.asObservable();
     }
     // Set tob bar items
     setTopBarItems(items) {
         this.topBarItems = items;
     }
     checkId(id) {
-        if (this.activeTopBarItem === undefined && id === 'content')
-            return true;
-        if (this.activeTopBarItem === undefined)
-            return false;
-        return this.activeTopBarItem.id == id;
+        const activeTopBarItem = this.activeTopBarItem;
+        const result = activeTopBarItem === undefined ? id === 'content' : activeTopBarItem.id == id;
+        return result;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TopBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TopBarService, providedIn: 'root' }); }
@@ -150,18 +154,17 @@ class MsgService {
         });
     }
     error(detail, summary = this.translate.instant('msgService.error'), life = this.lifetime) {
-        const validationMessage = this.extractValidationMessage(detail);
-        if (validationMessage) {
-            detail = validationMessage;
-        }
-        else if (detail instanceof HttpErrorResponse) {
+        if (detail instanceof HttpErrorResponse) {
             summary = `Error: ${detail.status} ${detail.statusText}`;
-            detail = `${detail.name} \r\n ${detail.message}`;
+            detail = this.extractErrorMessage(detail, `${detail.name} \r\n ${detail.message}`);
+        }
+        else {
+            detail = this.extractErrorMessage(detail, detail?.toString?.() ?? this.translate.instant('msgService.error'));
         }
         this.messageService.add({
             severity: 'error',
             summary: summary,
-            detail: detail.toString(),
+            detail: detail,
             life: life
         });
     }
@@ -170,14 +173,9 @@ class MsgService {
         if (validationMessage) {
             return validationMessage;
         }
-        if (typeof error === 'object' &&
-            error &&
-            'error' in error &&
-            typeof error.error === 'object' &&
-            error.error &&
-            'message' in error.error &&
-            typeof error.error.message === 'string') {
-            return error.error.message;
+        const apiExceptionMessage = this.extractApiExceptionMessage(error);
+        if (apiExceptionMessage) {
+            return apiExceptionMessage;
         }
         if (typeof error === 'object' && error && 'message' in error && typeof error.message === 'string') {
             return error.message;
@@ -195,6 +193,15 @@ class MsgService {
             .filter((message) => message.length > 0);
         return messages.length > 0 ? messages.join('\n') : null;
     }
+    extractApiExceptionMessage(error) {
+        const responseError = this.getObjectProperty(error, 'error');
+        const message = this.getStringProperty(responseError, 'message') ?? this.getStringProperty(error, 'message');
+        const title = this.getStringProperty(responseError, 'title') ?? this.getStringProperty(error, 'title');
+        if (message && title) {
+            return `${title}: ${message}`;
+        }
+        return message ?? title;
+    }
     toValidationMessages(field, value) {
         if (Array.isArray(value)) {
             return value
@@ -213,6 +220,13 @@ class MsgService {
         const value = source[property];
         return typeof value === 'object' && value !== null ? value : null;
     }
+    getStringProperty(source, property) {
+        if (typeof source !== 'object' || source === null || !(property in source)) {
+            return null;
+        }
+        const value = source[property];
+        return typeof value === 'string' && value.length > 0 ? value : null;
+    }
     errorFromException(error, fallback, summary = fallback, life = this.lifetime) {
         this.error(this.extractErrorMessage(error, fallback), summary, life);
     }
@@ -399,6 +413,7 @@ class LayoutService {
             return ngDateFormat;
         }, ...(ngDevMode ? [{ debugName: "monthFormat" }] : []));
         this.timeZone = computed(() => this.layoutConfig().timeZone, ...(ngDevMode ? [{ debugName: "timeZone" }] : []));
+        this.adminMode = computed(() => this.layoutConfig().adminMode ?? false, ...(ngDevMode ? [{ debugName: "adminMode" }] : []));
         this.transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "transitionComplete" }] : []));
         this.initialized = false;
         effect(() => {
@@ -437,7 +452,8 @@ class LayoutService {
             dateFormat: 'yyyy-MM-dd',
             timeFormat: 'HH:mm:ss',
             dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
-            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            adminMode: false
         };
     }
     handleDarkModeTransition(config) {
@@ -542,6 +558,36 @@ class L10nService {
         const lang = this.translateService.currentLang || this.layoutService.language() || 'en';
         return this.loadTranslations(component, lang);
     }
+    /**
+     * Loads translations from an explicit asset URL and merges them into the active language dictionary.
+     * Use this for extension modules whose assets are hosted outside the shell application.
+     */
+    loadTranslationsFromUrl(namespace, url, lang) {
+        const selectedLang = lang || this.translateService.currentLang || this.layoutService.language() || 'en';
+        const key = `${namespace}.${selectedLang}.${url}`;
+        if (this.loadedTranslations.has(key)) {
+            return of(null);
+        }
+        const loading = this.loadingTranslations.get(key);
+        if (loading) {
+            return loading;
+        }
+        const request = this.httpClient.get(url).pipe(tap((translations) => {
+            const current = this.translateService.translations[selectedLang] || {};
+            this.translateService.setTranslation(selectedLang, { ...current, ...translations }, true);
+            this.loadedTranslations.add(key);
+            this.loadingTranslations.delete(key);
+        }), shareReplay(1));
+        this.loadingTranslations.set(key, request);
+        request.subscribe({
+            error: (e) => {
+                this.loadingTranslations.delete(key);
+                console.error(`No translations found for ${namespace}.${selectedLang}.json at ${url}`);
+                console.error(e);
+            }
+        });
+        return request;
+    }
     /**
      * Gets the translated value of a key (or an array of keys)
      * @returns the translated key, or an object of translated keys
@@ -620,16 +666,21 @@ class BffSecurityService {
         this.csrfToken = new ReplaySubject(1);
         this.payload = new BehaviorSubject(null);
     }
+    static { this.authorizeAfterLogoutReturnUrlKey = 'oip.authorizeAfterLogoutReturnUrl'; }
     auth() {
-        this.http.get(this.buildUrl('api/security/get-current-auth-session'), {
+        this.http
+            .get(this.buildUrl('api/security/get-current-auth-session'), {
             withCredentials: true
-        }).pipe(tap$1((session) => this.applySession(session)), catchError(() => {
+        })
+            .pipe(tap$1((session) => this.applySession(session)), catchError(() => {
             this.applyAnonymousSession();
             return of(null);
-        })).subscribe();
+        }))
+            .subscribe();
     }
     logout() {
         firstValueFrom(this.getCsrfToken()).then((csrfToken) => {
+            this.storeAuthorizeAfterLogoutReturnUrl();
             const form = this.createPostForm(this.buildUrl('api/security/delete-auth-session'));
             if (csrfToken?.token) {
                 const tokenInput = document.createElement('input');
@@ -665,15 +716,20 @@ class BffSecurityService {
         });
     }
     getCsrfToken() {
-        this.http.get(this.buildUrl('api/security/get-auth-csrf-token'), {
+        this.http
+            .get(this.buildUrl('api/security/get-auth-csrf-token'), {
             withCredentials: true
-        }).pipe(catchError(() => of(null))).subscribe((token) => this.csrfToken.next(token));
+        })
+            .pipe(catchError(() => of(null)))
+            .subscribe((token) => this.csrfToken.next(token));
         return this.csrfToken.asObservable();
     }
     isAdmin() {
         return this.payload.getValue()?.realm_access?.roles?.includes('admin') ?? false;
     }
-    authorize() {
+    authorize(returnUrl) {
+        const normalizedReturnUrl = this.normalizeReturnUrl(returnUrl);
+        this.replaceWithUnauthorizedUrl(normalizedReturnUrl);
         const form = this.createPostForm(this.buildUrl('api/security/create-auth-session'));
         document.body.appendChild(form);
         form.submit();
@@ -724,10 +780,40 @@ class BffSecurityService {
         form.style.display = 'none';
         return form;
     }
+    normalizeReturnUrl(returnUrl) {
+        const candidate = returnUrl?.trim();
+        if (!candidate || /[\u0000-\u001f\u007f\\]/.test(candidate)) {
+            return '/';
+        }
+        if (!candidate.startsWith('/') || candidate.startsWith('//')) {
+            return '/';
+        }
+        try {
+            const url = new URL(candidate, window.location.origin);
+            if (url.origin !== window.location.origin) {
+                return '/';
+            }
+            const normalizedUrl = `${url.pathname}${url.search}${url.hash}`;
+            return normalizedUrl.startsWith('/unauthorized') ? '/' : normalizedUrl;
+        }
+        catch {
+            return '/';
+        }
+    }
+    replaceWithUnauthorizedUrl(returnUrl) {
+        const unauthorizedUrl = new URL('unauthorized', this.getBaseUrl());
+        unauthorizedUrl.searchParams.set('returnUrl', returnUrl);
+        history.replaceState(history.state, '', `${unauthorizedUrl.pathname}${unauthorizedUrl.search}`);
+    }
+    storeAuthorizeAfterLogoutReturnUrl() {
+        sessionStorage.setItem(BffSecurityService.authorizeAfterLogoutReturnUrlKey, this.normalizeReturnUrl(`${window.location.pathname}${window.location.search}${window.location.hash}`));
+    }
     buildUrl(path) {
+        return `${this.getBaseUrl()}${path}`;
+    }
+    getBaseUrl() {
         const baseUrl = document.getElementsByTagName('base')[0].href;
-        const normalizedBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
-        return `${normalizedBase}${path}`;
+        return baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BffSecurityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: BffSecurityService }); }
@@ -1171,13 +1257,11 @@ class BaseModuleComponent {
      * Called whenever the module instance changes, including the first load.
      * Derived components can override this to refresh module-specific data.
      */
-    async onModuleInstanceChange() {
-    }
+    async onModuleInstanceChange() { }
     /**
      * Called whenever current user rights for the active module instance are recalculated.
      */
-    onSecurityRightsChange() {
-    }
+    onSecurityRightsChange() { }
     /**
      * Starts watching current token roles and maps them to module instance security settings.
      */
@@ -1219,9 +1303,7 @@ class BaseModuleComponent {
         this.onSecurityRightsChange();
     }
     hasSecurityRight(roles, securitySettings, code) {
-        return securitySettings
-            .find((security) => security.code === code)
-            ?.roles?.some((role) => roles.includes(role)) ?? false;
+        return (securitySettings.find((security) => security.code === code)?.roles?.some((role) => roles.includes(role)) ?? false);
     }
     getSecurity(controller = this.controller, id = this.id) {
         if (!controller || id == null) {
@@ -1548,8 +1630,7 @@ class AppConfiguratorComponent {
         this.themePresets = this.getThemePresets();
         this.themePresetsMap = new Map(this.themePresets.map((theme) => [theme.id, theme]));
         this.defaultThemePreset = this.themePresets[0] ?? DEFAULT_THEME_PRESETS[0];
-        this.fallbackPrimaryColors = (DEFAULT_THEME_PRESETS[0].preset
-            .primitive ?? {});
+        this.fallbackPrimaryColors = (DEFAULT_THEME_PRESETS[0].preset.primitive ?? {});
         this.presets = this.themePresets.map((theme) => ({ label: theme.label ?? theme.id, value: theme.id }));
         this.showMenuModeButton = signal(!this.router.url.includes('auth'), ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : []));
         this.menuModeOptions = [
@@ -1868,7 +1949,7 @@ class AppConfiguratorComponent {
                 .filter((entry) => Boolean(entry[1]))
                 .map(([name, palette]) => ({ name, palette }));
         }
-        const presetPalette = (activeThemePreset.preset.primitive ?? {});
+        const presetPalette = activeThemePreset.preset.primitive ?? {};
         const palettes = [{ name: 'noir', palette: {} }];
         PRIMARY_COLORS.forEach((color) => {
             palettes.push({
@@ -1927,7 +2008,9 @@ class AppConfiguratorComponent {
         this.layoutService.layoutConfig.update((state) => ({
             ...state,
             preset: nextThemeId,
-            primary: primaryColors.some((color) => color.name === state.primary) ? state.primary : (primaryColors[0]?.name ?? state.primary),
+            primary: primaryColors.some((color) => color.name === state.primary)
+                ? state.primary
+                : (primaryColors[0]?.name ?? state.primary),
             surface: nextTheme.surfaceColors && !surfaceColors.some((color) => color.name === state.surface)
                 ? (surfaceColors[0]?.name ?? state.surface)
                 : state.surface
@@ -1991,12 +2074,12 @@ class AppConfiguratorComponent {
         <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.presets' | translate }}</span>
         <p-selectButton
           id="oip-app-configurator-preset-select-button"
+          optionLabel="label"
+          optionValue="value"
           size="small"
           [allowEmpty]="false"
           [ngModel]="selectedPreset()"
           [options]="presets"
-          optionLabel="label"
-          optionValue="value"
           (ngModelChange)="onPresetChange($event)" />
       </div>
       @if (showMenuModeButton()) {
@@ -2068,12 +2151,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
         <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.presets' | translate }}</span>
         <p-selectButton
           id="oip-app-configurator-preset-select-button"
+          optionLabel="label"
+          optionValue="value"
           size="small"
           [allowEmpty]="false"
           [ngModel]="selectedPreset()"
           [options]="presets"
-          optionLabel="label"
-          optionValue="value"
           (ngModelChange)="onPresetChange($event)" />
       </div>
       @if (showMenuModeButton()) {
@@ -2102,10 +2185,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 class UserProfileApi extends HttpClient {
     constructor() {
         super(...arguments);
-        this.getUserPhoto = (query, params = {}) => this.request({
+        this.getUserPhoto = (params = {}) => this.request({
             path: `/api/user-profile/get-user-photo`,
             method: "GET",
-            query: query,
+            secure: true,
+            format: "blob",
+            ...params,
+        });
+        this.getUserPhotoById = ({ userId, ...query }, params = {}) => this.request({
+            path: `/api/user-profile/get-user-photo-by-id/${userId}`,
+            method: "GET",
             secure: true,
             format: "blob",
             ...params,
@@ -2149,7 +2238,9 @@ class UserService {
     constructor() {
         this.securityService = inject(SecurityService);
         this.userProfileApi = inject(UserProfileApi);
-        this.requestedPhotoEmail = null;
+        this.msgService = inject(MsgService);
+        this.translateService = inject(TranslateService);
+        this.requestedPhotoKey = null;
         /**
          * Stores the user's photo as a data URL or binary blob, depending on how it's processed.
          */
@@ -2160,7 +2251,7 @@ class UserService {
         this.photoLoaded = false;
         this.securityService
             .getCurrentUser$()
-            .pipe(map((user) => user?.email ?? null), filter((email) => !!email), distinctUntilChanged())
+            .pipe(map((user) => this.getCurrentUserPhotoKey(user)), filter((photoKey) => !!photoKey), distinctUntilChanged())
             .subscribe(() => {
             this.getUserPhoto();
         });
@@ -2178,35 +2269,41 @@ class UserService {
     }
     get userName() {
         const data = this.securityService.getCurrentUser();
-        return [data?.given_name, data?.family_name].filter(Boolean).join(' ')
-            || data?.displayName
-            || data?.name
-            || data?.userName
-            || data?.preferred_username
-            || data?.email
-            || '';
+        return ([data?.given_name, data?.family_name].filter(Boolean).join(' ') ||
+            data?.displayName ||
+            data?.name ||
+            data?.userName ||
+            data?.preferred_username ||
+            data?.email ||
+            '');
     }
     /**
-     * Initiates an HTTP request to fetch the user's photo based on their email,
+     * Initiates an HTTP request to fetch the current user's photo,
      * and updates the `photo` and `photoLoaded` properties accordingly.
      */
     getUserPhoto() {
-        const email = this.securityService.getCurrentUser()?.email;
-        if (!email) {
+        const photoKey = this.getCurrentUserPhotoKey(this.securityService.getCurrentUser());
+        if (!photoKey) {
             return;
         }
-        if (this.requestedPhotoEmail === email && (this.photoLoaded || this.photo)) {
+        if (this.requestedPhotoKey === photoKey && (this.photoLoaded || this.photo)) {
             return;
         }
-        this.requestedPhotoEmail = email;
-        this.userProfileApi.getUserPhoto({ email }, { format: 'blob' }).then((data) => {
+        this.requestedPhotoKey = photoKey;
+        this.userProfileApi.getUserPhoto({ format: 'blob' }).then((data) => {
             this.createImageFromBlob(data);
             this.photoLoaded = true;
         }, (error) => {
-            console.log(error);
+            this.msgService.errorFromException(error, this.translateService.instant('profileComponent.failedToLoadPhoto'));
             this.photoLoaded = false;
         });
     }
+    refreshUserPhoto() {
+        this.requestedPhotoKey = null;
+        this.photo = null;
+        this.photoLoaded = false;
+        this.getUserPhoto();
+    }
     /**
      * Converts a Blob image into a Base64 data URL and stores it in the `photo` property.
      *
@@ -2222,14 +2319,17 @@ class UserService {
         }
     }
     getInitials(value) {
-        return value
+        return (value
             ?.trim()
             .split(/\s+/)
             .filter(Boolean)
             .slice(0, 2)
             .map((part) => part[0])
             .join('')
-            .toUpperCase() ?? '';
+            .toUpperCase() ?? '');
+    }
+    getCurrentUserPhotoKey(user) {
+        return user?.sub || user?.userName || user?.preferred_username || user?.displayName || user?.name || null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: UserService }); }
@@ -2502,8 +2602,8 @@ class UserNotificationsComponent {
       class="layout-topbar-action relative"
       id="oip-app-topbar-notification-button"
       type="button"
-      (click)="toggle($event)"
-      [attr.aria-label]="'Notifications: ' + unreadNotificationCount()">
+      [attr.aria-label]="'Notifications: ' + unreadNotificationCount()"
+      (click)="toggle($event)">
       <i class="pi pi-bell"></i>
       @if (unreadNotificationCount() > 0) {
         <p-badge
@@ -2579,8 +2679,8 @@ class UserNotificationsComponent {
           styleClass="mt-3"
           [first]="skip"
           [rows]="take"
-          [totalRecords]="totalCount"
           [rowsPerPageOptions]="[5, 10, 20]"
+          [totalRecords]="totalCount"
           (onPageChange)="onPageChange($event)"></p-paginator>
       }
     </p-popover>
@@ -2591,14 +2691,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             args: [{
                     selector: 'app-user-notifications',
                     standalone: true,
-                    imports: [CommonModule, BadgeModule, ButtonModule, PaginatorModule, Popover, ProgressSpinnerModule, Tag, Tooltip, TranslatePipe],
+                    imports: [
+                        CommonModule,
+                        BadgeModule,
+                        ButtonModule,
+                        PaginatorModule,
+                        Popover,
+                        ProgressSpinnerModule,
+                        Tag,
+                        Tooltip,
+                        TranslatePipe
+                    ],
                     template: `
     <button
       class="layout-topbar-action relative"
       id="oip-app-topbar-notification-button"
       type="button"
-      (click)="toggle($event)"
-      [attr.aria-label]="'Notifications: ' + unreadNotificationCount()">
+      [attr.aria-label]="'Notifications: ' + unreadNotificationCount()"
+      (click)="toggle($event)">
       <i class="pi pi-bell"></i>
       @if (unreadNotificationCount() > 0) {
         <p-badge
@@ -2674,8 +2784,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
           styleClass="mt-3"
           [first]="skip"
           [rows]="take"
-          [totalRecords]="totalCount"
           [rowsPerPageOptions]="[5, 10, 20]"
+          [totalRecords]="totalCount"
           (onPageChange)="onPageChange($event)"></p-paginator>
       }
     </p-popover>
@@ -2839,6 +2949,10 @@ class AppTopbar {
         this.confirmationService = inject(ConfirmationService);
         this.translateService = inject(TranslateService);
     }
+    onActiveTabChange(value) {
+        const nextActiveId = value == null ? undefined : String(value);
+        this.topBarService.activeId = nextActiveId;
+    }
     toggleDarkMode() {
         this.layoutService.layoutConfig.update((state) => ({
             ...state,
@@ -2871,106 +2985,108 @@ class AppTopbar {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AppTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AppTopbar, isStandalone: true, selector: "app-topbar", providers: [ConfirmationService], ngImport: i0, template: `
-    <div class="layout-topbar">
-      <p-confirmDialog appendTo="body"/>
-      <div class="layout-topbar-logo-container">
-        <button class="layout-menu-button layout-topbar-action" (click)="layoutService.onMenuToggle()">
-          <i class="pi pi-bars"></i>
-        </button>
-        <a class="layout-topbar-logo" id="oip-app-topbar-logo-link" routerLink="">
-          <ng-container
-            *ngComponentOutlet="logoService.getLogoComponent(); inputs: { width: 36, height: 36 }"></ng-container>
-          <span>{{ 'app-info.title' | translate }}</span>
-        </a>
-      </div>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: AppTopbar, isStandalone: true, selector: "app-topbar", providers: [ConfirmationService], ngImport: i0, template: ` <div class="layout-topbar">
+    <p-confirmDialog appendTo="body" />
+    <div class="layout-topbar-logo-container">
+      <button class="layout-menu-button layout-topbar-action" (click)="layoutService.onMenuToggle()">
+        <i class="pi pi-bars"></i>
+      </button>
+      <a class="layout-topbar-logo" id="oip-app-topbar-logo-link" routerLink="">
+        <ng-container
+          *ngComponentOutlet="logoService.getLogoComponent(); inputs: { width: 36, height: 36 }"></ng-container>
+        <span>{{ 'app-info.title' | translate }}</span>
+      </a>
+    </div>
 
-      @if (securityService.isAdmin() && topBarService.topBarItems.length > 0) {
-        <p-tabs class="layout-topbar-tabs ml-2" [(value)]="topBarService.activeId">
-          <p-tablist>
-            @for (tab of topBarService.availableTopBarItems; track tab.id) {
-              <p-tab id="oip-app-topbar-tab-{{ tab.id }}" [value]="tab.id">
-                <i class="pi {{ tab.icon }}"></i>
-                <span class="ml-2">{{ tab.caption }}</span>
-              </p-tab>
-            }
-          </p-tablist>
-        </p-tabs>
-      }
-      <div class="layout-topbar-actions">
-        <div class="layout-config-menu">
-          <app-topbar-application-switcher/>
-          <app-user-notifications/>
-          <p-button
-            class="layout-topbar-action"
-            id="oip-app-topbar-theme-button"
-            severity="secondary"
-            type="button"
-            [rounded]="true"
-            [text]="true"
-            (click)="toggleDarkMode()">
-            <i
-              class="pi"
-              [ngClass]="{
+    @if (securityService.isAdmin() && topBarService.topBarItems.length > 0) {
+      <p-tabs
+        class="layout-topbar-tabs ml-2"
+        [value]="topBarService.activeId"
+        (valueChange)="onActiveTabChange($event)">
+        <p-tablist>
+          @for (tab of topBarService.availableTopBarItems; track tab.id) {
+            <p-tab id="oip-app-topbar-tab-{{ tab.id }}" [value]="tab.id">
+              <i class="pi {{ tab.icon }}"></i>
+              <span class="ml-2">{{ tab.caption }}</span>
+            </p-tab>
+          }
+        </p-tablist>
+      </p-tabs>
+    }
+    <div class="layout-topbar-actions">
+      <div class="layout-config-menu">
+        <app-topbar-application-switcher />
+        <app-user-notifications />
+        <p-button
+          class="layout-topbar-action"
+          id="oip-app-topbar-theme-button"
+          severity="secondary"
+          type="button"
+          [rounded]="true"
+          [text]="true"
+          (click)="toggleDarkMode()">
+          <i
+            class="pi"
+            [ngClass]="{
               'pi-moon': layoutService.isDarkTheme(),
               'pi-sun': !layoutService.isDarkTheme()
             }"></i>
+        </p-button>
+        <div class="relative">
+          <p-button
+            class="layout-topbar-action layout-topbar-action-highlight"
+            enterActiveClass="animate-scalein"
+            enterFromClass="hidden"
+            id="oip-app-topbar-palette-button"
+            leaveActiveClass="animate-fadeout"
+            leaveToClass="hidden"
+            pStyleClass="@next"
+            [hideOnOutsideClick]="true"
+            [rounded]="true">
+            <i class="pi pi-palette"></i>
           </p-button>
-          <div class="relative">
-            <p-button
-              class="layout-topbar-action layout-topbar-action-highlight"
-              enterActiveClass="animate-scalein"
-              enterFromClass="hidden"
-              id="oip-app-topbar-palette-button"
-              leaveActiveClass="animate-fadeout"
-              leaveToClass="hidden"
-              pStyleClass="@next"
-              [hideOnOutsideClick]="true"
-              [rounded]="true">
-              <i class="pi pi-palette"></i>
-            </p-button>
-            <app-configurator/>
-          </div>
+          <app-configurator />
         </div>
+      </div>
 
-        <button
-          class="layout-topbar-menu-button layout-topbar-action"
-          enterActiveClass="animate-scalein"
-          enterFromClass="hidden"
-          id="oip-app-topbar-menu-expand-button"
-          leaveActiveClass="animate-fadeout"
-          leaveToClass="hidden"
-          pStyleClass="@next"
-          [hideOnOutsideClick]="true">
-          <i class="pi pi-ellipsis-v"></i>
-        </button>
+      <button
+        class="layout-topbar-menu-button layout-topbar-action"
+        enterActiveClass="animate-scalein"
+        enterFromClass="hidden"
+        id="oip-app-topbar-menu-expand-button"
+        leaveActiveClass="animate-fadeout"
+        leaveToClass="hidden"
+        pStyleClass="@next"
+        [hideOnOutsideClick]="true">
+        <i class="pi pi-ellipsis-v"></i>
+      </button>
 
-        <div class="layout-topbar-menu hidden lg:block">
-          <div class="layout-topbar-menu-content">
-            <button
-              class="layout-topbar-action"
-              id="oip-app-topbar-logout-button"
-              type="button"
-              (click)="confirmLogout()"
-              (keydown)="logoutKeyDown($event)">
-              <i class="pi pi-sign-out"></i>
-              <span>{{ 'topbar.logout' | translate }}</span>
-            </button>
-            <button class="layout-topbar-action" routerLink="config">
-              <p-avatar
-                class="p-link flex align-items-center"
-                id="oip-app-topbar-user-avatar"
-                shape="circle"
-                size="normal"
-                [image]="userService.photoLoaded ? userService.photo : null"
+      <div class="layout-topbar-menu hidden lg:block">
+        <div class="layout-topbar-menu-content">
+          <button
+            class="layout-topbar-action"
+            id="oip-app-topbar-logout-button"
+            type="button"
+            (click)="confirmLogout()"
+            (keydown)="logoutKeyDown($event)">
+            <i class="pi pi-sign-out"></i>
+            <span>{{ 'topbar.logout' | translate }}</span>
+          </button>
+          <button class="layout-topbar-action" routerLink="config">
+            <p-avatar
+              class="p-link flex align-items-center"
+              id="oip-app-topbar-user-avatar"
+              shape="circle"
+              size="normal"
+              [image]="userService.photoLoaded ? userService.photo : null"
               >{{ !userService.photoLoaded ? userService.shortLabel : null }}
-              </p-avatar>
-              <span class="ml-2">{{ 'topbar.profile' | translate }}</span>
-            </button>
-          </div>
+            </p-avatar>
+            <span class="ml-2">{{ 'topbar.profile' | translate }}</span>
+          </button>
         </div>
       </div>
-    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$3.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfiguratorComponent, selector: "app-configurator" }, { kind: "component", type: Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: TabList, selector: "p-tablist" }, { kind: "component", type: Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: UserNotificationsComponent, selector: "app-user-notifications" }, { kind: "component", type: AppTopbarApplicationSwitcherComponent, selector: "app-topbar-application-switcher" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    </div>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$3.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfiguratorComponent, selector: "app-configurator" }, { kind: "component", type: Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: TabList, selector: "p-tablist" }, { kind: "component", type: Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: UserNotificationsComponent, selector: "app-user-notifications" }, { kind: "component", type: AppTopbarApplicationSwitcherComponent, selector: "app-topbar-application-switcher" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AppTopbar, decorators: [{
             type: Component,
@@ -2992,106 +3108,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         TranslatePipe,
                         AppTopbarApplicationSwitcherComponent
                     ],
-                    template: `
-    <div class="layout-topbar">
-      <p-confirmDialog appendTo="body"/>
-      <div class="layout-topbar-logo-container">
-        <button class="layout-menu-button layout-topbar-action" (click)="layoutService.onMenuToggle()">
-          <i class="pi pi-bars"></i>
-        </button>
-        <a class="layout-topbar-logo" id="oip-app-topbar-logo-link" routerLink="">
-          <ng-container
-            *ngComponentOutlet="logoService.getLogoComponent(); inputs: { width: 36, height: 36 }"></ng-container>
-          <span>{{ 'app-info.title' | translate }}</span>
-        </a>
-      </div>
+                    template: ` <div class="layout-topbar">
+    <p-confirmDialog appendTo="body" />
+    <div class="layout-topbar-logo-container">
+      <button class="layout-menu-button layout-topbar-action" (click)="layoutService.onMenuToggle()">
+        <i class="pi pi-bars"></i>
+      </button>
+      <a class="layout-topbar-logo" id="oip-app-topbar-logo-link" routerLink="">
+        <ng-container
+          *ngComponentOutlet="logoService.getLogoComponent(); inputs: { width: 36, height: 36 }"></ng-container>
+        <span>{{ 'app-info.title' | translate }}</span>
+      </a>
+    </div>
 
-      @if (securityService.isAdmin() && topBarService.topBarItems.length > 0) {
-        <p-tabs class="layout-topbar-tabs ml-2" [(value)]="topBarService.activeId">
-          <p-tablist>
-            @for (tab of topBarService.availableTopBarItems; track tab.id) {
-              <p-tab id="oip-app-topbar-tab-{{ tab.id }}" [value]="tab.id">
-                <i class="pi {{ tab.icon }}"></i>
-                <span class="ml-2">{{ tab.caption }}</span>
-              </p-tab>
-            }
-          </p-tablist>
-        </p-tabs>
-      }
-      <div class="layout-topbar-actions">
-        <div class="layout-config-menu">
-          <app-topbar-application-switcher/>
-          <app-user-notifications/>
-          <p-button
-            class="layout-topbar-action"
-            id="oip-app-topbar-theme-button"
-            severity="secondary"
-            type="button"
-            [rounded]="true"
-            [text]="true"
-            (click)="toggleDarkMode()">
-            <i
-              class="pi"
-              [ngClass]="{
+    @if (securityService.isAdmin() && topBarService.topBarItems.length > 0) {
+      <p-tabs
+        class="layout-topbar-tabs ml-2"
+        [value]="topBarService.activeId"
+        (valueChange)="onActiveTabChange($event)">
+        <p-tablist>
+          @for (tab of topBarService.availableTopBarItems; track tab.id) {
+            <p-tab id="oip-app-topbar-tab-{{ tab.id }}" [value]="tab.id">
+              <i class="pi {{ tab.icon }}"></i>
+              <span class="ml-2">{{ tab.caption }}</span>
+            </p-tab>
+          }
+        </p-tablist>
+      </p-tabs>
+    }
+    <div class="layout-topbar-actions">
+      <div class="layout-config-menu">
+        <app-topbar-application-switcher />
+        <app-user-notifications />
+        <p-button
+          class="layout-topbar-action"
+          id="oip-app-topbar-theme-button"
+          severity="secondary"
+          type="button"
+          [rounded]="true"
+          [text]="true"
+          (click)="toggleDarkMode()">
+          <i
+            class="pi"
+            [ngClass]="{
               'pi-moon': layoutService.isDarkTheme(),
               'pi-sun': !layoutService.isDarkTheme()
             }"></i>
+        </p-button>
+        <div class="relative">
+          <p-button
+            class="layout-topbar-action layout-topbar-action-highlight"
+            enterActiveClass="animate-scalein"
+            enterFromClass="hidden"
+            id="oip-app-topbar-palette-button"
+            leaveActiveClass="animate-fadeout"
+            leaveToClass="hidden"
+            pStyleClass="@next"
+            [hideOnOutsideClick]="true"
+            [rounded]="true">
+            <i class="pi pi-palette"></i>
           </p-button>
-          <div class="relative">
-            <p-button
-              class="layout-topbar-action layout-topbar-action-highlight"
-              enterActiveClass="animate-scalein"
-              enterFromClass="hidden"
-              id="oip-app-topbar-palette-button"
-              leaveActiveClass="animate-fadeout"
-              leaveToClass="hidden"
-              pStyleClass="@next"
-              [hideOnOutsideClick]="true"
-              [rounded]="true">
-              <i class="pi pi-palette"></i>
-            </p-button>
-            <app-configurator/>
-          </div>
+          <app-configurator />
         </div>
+      </div>
 
-        <button
-          class="layout-topbar-menu-button layout-topbar-action"
-          enterActiveClass="animate-scalein"
-          enterFromClass="hidden"
-          id="oip-app-topbar-menu-expand-button"
-          leaveActiveClass="animate-fadeout"
-          leaveToClass="hidden"
-          pStyleClass="@next"
-          [hideOnOutsideClick]="true">
-          <i class="pi pi-ellipsis-v"></i>
-        </button>
+      <button
+        class="layout-topbar-menu-button layout-topbar-action"
+        enterActiveClass="animate-scalein"
+        enterFromClass="hidden"
+        id="oip-app-topbar-menu-expand-button"
+        leaveActiveClass="animate-fadeout"
+        leaveToClass="hidden"
+        pStyleClass="@next"
+        [hideOnOutsideClick]="true">
+        <i class="pi pi-ellipsis-v"></i>
+      </button>
 
-        <div class="layout-topbar-menu hidden lg:block">
-          <div class="layout-topbar-menu-content">
-            <button
-              class="layout-topbar-action"
-              id="oip-app-topbar-logout-button"
-              type="button"
-              (click)="confirmLogout()"
-              (keydown)="logoutKeyDown($event)">
-              <i class="pi pi-sign-out"></i>
-              <span>{{ 'topbar.logout' | translate }}</span>
-            </button>
-            <button class="layout-topbar-action" routerLink="config">
-              <p-avatar
-                class="p-link flex align-items-center"
-                id="oip-app-topbar-user-avatar"
-                shape="circle"
-                size="normal"
-                [image]="userService.photoLoaded ? userService.photo : null"
+      <div class="layout-topbar-menu hidden lg:block">
+        <div class="layout-topbar-menu-content">
+          <button
+            class="layout-topbar-action"
+            id="oip-app-topbar-logout-button"
+            type="button"
+            (click)="confirmLogout()"
+            (keydown)="logoutKeyDown($event)">
+            <i class="pi pi-sign-out"></i>
+            <span>{{ 'topbar.logout' | translate }}</span>
+          </button>
+          <button class="layout-topbar-action" routerLink="config">
+            <p-avatar
+              class="p-link flex align-items-center"
+              id="oip-app-topbar-user-avatar"
+              shape="circle"
+              size="normal"
+              [image]="userService.photoLoaded ? userService.photo : null"
               >{{ !userService.photoLoaded ? userService.shortLabel : null }}
-              </p-avatar>
-              <span class="ml-2">{{ 'topbar.profile' | translate }}</span>
-            </button>
-          </div>
+            </p-avatar>
+            <span class="ml-2">{{ 'topbar.profile' | translate }}</span>
+          </button>
         </div>
       </div>
-    </div>`,
+    </div>
+  </div>`,
                     providers: [ConfirmationService]
                 }]
         }] });
@@ -3206,10 +3324,16 @@ class MenuService {
         this.resetSource = new Subject();
         this.titleService = inject(AppTitleService);
         this.menuDataService = inject(MenuApi);
+        this.layoutService = inject(LayoutService);
         this.menuSource$ = this.menuSource.asObservable();
         this.resetSource$ = this.resetSource.asObservable();
         this.menu = [];
-        this.adminMode = false;
+    }
+    get adminMode() {
+        return this.layoutService.adminMode();
+    }
+    set adminMode(value) {
+        this.layoutService.layoutConfig.update((config) => ({ ...config, adminMode: value }));
     }
     async loadMenu() {
         this.menu = this.adminMode ? await this.getAdminMenu() : await this.getMenu();
@@ -4179,8 +4303,7 @@ class MenuComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: MenuComponent, isStandalone: true, selector: "app-menu", providers: [MenuApi], viewQueries: [{ propertyName: "menuItemCreateDialogComponent", first: true, predicate: MenuItemCreateDialogComponent, descendants: true }, { propertyName: "menuItemEditDialogComponent", first: true, predicate: MenuItemEditDialogComponent, descendants: true }, { propertyName: "contextMenu", first: true, predicate: ContextMenu, descendants: true }], ngImport: i0, template: `
-    <div #empty class="layout-sidebar" (contextmenu)="onContextMenu($event)">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: MenuComponent, isStandalone: true, selector: "app-menu", providers: [MenuApi], viewQueries: [{ propertyName: "menuItemCreateDialogComponent", first: true, predicate: MenuItemCreateDialogComponent, descendants: true }, { propertyName: "menuItemEditDialogComponent", first: true, predicate: MenuItemEditDialogComponent, descendants: true }, { propertyName: "contextMenu", first: true, predicate: ContextMenu, descendants: true }], ngImport: i0, template: ` <div #empty class="layout-sidebar" (contextmenu)="onContextMenu($event)">
       <ul class="layout-menu">
         @for (item of menuService.menu; track item; let i = $index) {
           <ng-container>
@@ -4201,9 +4324,9 @@ class MenuComponent {
       </ul>
     </div>
     @if (securityService.isAdmin()) {
-      <p-contextMenu [target]="empty"/>
-      <menu-item-create-dialog/>
-      <menu-item-edit-dialog/>
+      <p-contextMenu [target]="empty" />
+      <menu-item-create-dialog />
+      <menu-item-edit-dialog />
     }`, isInline: true, dependencies: [{ kind: "component", type: MenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey", "menuItemCreateDialogComponent", "menuItemEditDialogComponent", "contextMenu"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i1$6.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: MenuItemCreateDialogComponent, selector: "menu-item-create-dialog", inputs: ["visible"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MenuItemEditDialogComponent, selector: "menu-item-edit-dialog", inputs: ["visible"], outputs: ["visibleChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: MenuComponent, decorators: [{
@@ -4222,8 +4345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     providers: [MenuApi],
                     selector: 'app-menu',
                     standalone: true,
-                    template: `
-    <div #empty class="layout-sidebar" (contextmenu)="onContextMenu($event)">
+                    template: ` <div #empty class="layout-sidebar" (contextmenu)="onContextMenu($event)">
       <ul class="layout-menu">
         @for (item of menuService.menu; track item; let i = $index) {
           <ng-container>
@@ -4244,9 +4366,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
       </ul>
     </div>
     @if (securityService.isAdmin()) {
-      <p-contextMenu [target]="empty"/>
-      <menu-item-create-dialog/>
-      <menu-item-edit-dialog/>
+      <p-contextMenu [target]="empty" />
+      <menu-item-create-dialog />
+      <menu-item-edit-dialog />
     }`
                 }]
         }], propDecorators: { menuItemCreateDialogComponent: [{
@@ -4528,14 +4650,18 @@ class UnauthorizedComponent {
     constructor() {
         this.securityService = inject(SecurityService);
         this.route = inject(ActivatedRoute);
-        this.router = inject(Router);
+    }
+    ngOnInit() {
+        const returnUrl = sessionStorage.getItem(BffSecurityService.authorizeAfterLogoutReturnUrlKey);
+        if (!returnUrl) {
+            return;
+        }
+        sessionStorage.removeItem(BffSecurityService.authorizeAfterLogoutReturnUrlKey);
+        this.securityService.authorize(returnUrl);
     }
     signIn() {
         const returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
-        this.router.navigate(['/unauthorized'], {
-            queryParams: { returnUrl },
-            replaceUrl: true
-        }).then(() => this.securityService.authorize());
+        this.securityService.authorize(returnUrl);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: UnauthorizedComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
@@ -4690,9 +4816,21 @@ class ProfileComponent {
         this.userService = inject(UserService);
         this.msgService = inject(MsgService);
         this.translateService = inject(TranslateService);
+        this.userProfileApi = inject(UserProfileApi);
     }
-    onBasicUploadAuto($event) {
-        this.msgService.success(this.translateService.instant('profileComponent.successfullyUploaded'));
+    async uploadPhoto(event) {
+        const file = event.files?.[0];
+        if (!file) {
+            return;
+        }
+        try {
+            await this.userProfileApi.postUserPhoto({ files: file });
+            this.userService.refreshUserPhoto();
+            this.msgService.success(this.translateService.instant('profileComponent.successfullyUploaded'));
+        }
+        catch (error) {
+            this.msgService.error(error);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: ProfileComponent, isStandalone: true, selector: "user-profile", ngImport: i0, template: `
@@ -4711,10 +4849,9 @@ class ProfileComponent {
         maxFileSize="1000000"
         mode="basic"
         name="files"
-        url="/api/user-profile/post-user-photo"
-        withCredentials="true"
         [auto]="true"
-        (onUpload)="onBasicUploadAuto($event)" />
+        [customUpload]="true"
+        (uploadHandler)="uploadPhoto($event)" />
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i1$7.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
@@ -4723,7 +4860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
             args: [{
                     selector: 'user-profile',
                     standalone: true,
-                    imports: [FileUploadModule, ImageModule, ImageModule, FileUploadModule, ImageModule, AvatarModule, TranslatePipe],
+                    imports: [FileUploadModule, ImageModule, AvatarModule, TranslatePipe],
                     template: `
     <p-avatar
       class="mr-2"
@@ -4740,10 +4877,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
         maxFileSize="1000000"
         mode="basic"
         name="files"
-        url="/api/user-profile/post-user-photo"
-        withCredentials="true"
         [auto]="true"
-        (onUpload)="onBasicUploadAuto($event)" />
+        [customUpload]="true"
+        (uploadHandler)="uploadPhoto($event)" />
     </div>
   `
                 }]
@@ -5045,7 +5181,7 @@ class DbMigrationComponent extends BaseModuleComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DbMigrationComponent, isStandalone: true, selector: "db-migration", providers: [ConfirmationService], usesInheritance: true, ngImport: i0, template: `
     @if (isContent) {
       <div class="card" style="height: 100%">
-        <p-confirmDialog/>
+        <p-confirmDialog />
         <div>
           <h5>{{ 'db-migration.migrationManager' | translate }}</h5>
           <div class="flex flex-row gap-2">
@@ -5055,14 +5191,14 @@ class DbMigrationComponent extends BaseModuleComponent {
               tooltipPosition="bottom"
               [outlined]="true"
               [pTooltip]="'db-migration.actions.refresh' | translate"
-              (click)="refreshAction()"/>
+              (click)="refreshAction()" />
             <p-button
               icon="pi pi-filter-slash"
               severity="secondary"
               tooltipPosition="bottom"
               [outlined]="true"
               [pTooltip]="'db-migration.actions.cleanFilter' | translate"
-              (click)="dt.clear()"/>
+              (click)="dt.clear()" />
           </div>
           <div>
             <p-table #dt dataKey="name" editMode="row" size="small" [scrollable]="true" [value]="data">
@@ -5070,7 +5206,7 @@ class DbMigrationComponent extends BaseModuleComponent {
                 <tr>
                   <th pSortableColumn="name" scope="col">
                     {{ 'db-migration.columns.name' | translate }}
-                    <p-columnFilter display="menu" field="name" type="text"/>
+                    <p-columnFilter display="menu" field="name" type="text" />
                   </th>
                   <th scope="col">{{ 'db-migration.columns.applied' | translate }}</th>
                   <th scope="col">{{ 'db-migration.columns.exist' | translate }}</th>
@@ -5091,7 +5227,7 @@ class DbMigrationComponent extends BaseModuleComponent {
                   </td>
                   <td>
                     @if (rowData.exist) {
-                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"/>
+                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true" />
                     }
                   </td>
                   <td>
@@ -5118,7 +5254,7 @@ class DbMigrationComponent extends BaseModuleComponent {
         </div>
       </div>
     } @else if (isSecurity) {
-      <security [controller]="controller" [id]="id"/>
+      <security [controller]="controller" [id]="id" />
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$8.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i1$8.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i1$8.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: SecurityComponent, selector: "security", inputs: ["id", "controller"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
@@ -5142,7 +5278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     template: `
     @if (isContent) {
       <div class="card" style="height: 100%">
-        <p-confirmDialog/>
+        <p-confirmDialog />
         <div>
           <h5>{{ 'db-migration.migrationManager' | translate }}</h5>
           <div class="flex flex-row gap-2">
@@ -5152,14 +5288,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
               tooltipPosition="bottom"
               [outlined]="true"
               [pTooltip]="'db-migration.actions.refresh' | translate"
-              (click)="refreshAction()"/>
+              (click)="refreshAction()" />
             <p-button
               icon="pi pi-filter-slash"
               severity="secondary"
               tooltipPosition="bottom"
               [outlined]="true"
               [pTooltip]="'db-migration.actions.cleanFilter' | translate"
-              (click)="dt.clear()"/>
+              (click)="dt.clear()" />
           </div>
           <div>
             <p-table #dt dataKey="name" editMode="row" size="small" [scrollable]="true" [value]="data">
@@ -5167,7 +5303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 <tr>
                   <th pSortableColumn="name" scope="col">
                     {{ 'db-migration.columns.name' | translate }}
-                    <p-columnFilter display="menu" field="name" type="text"/>
+                    <p-columnFilter display="menu" field="name" type="text" />
                   </th>
                   <th scope="col">{{ 'db-migration.columns.applied' | translate }}</th>
                   <th scope="col">{{ 'db-migration.columns.exist' | translate }}</th>
@@ -5188,7 +5324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                   </td>
                   <td>
                     @if (rowData.exist) {
-                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"/>
+                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true" />
                     }
                   </td>
                   <td>
@@ -5215,13 +5351,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
         </div>
       </div>
     } @else if (isSecurity) {
-      <security [controller]="controller" [id]="id"/>
+      <security [controller]="controller" [id]="id" />
     }
   `,
                     providers: [ConfirmationService]
                 }]
         }], ctorParameters: () => [] });
 
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+class ExtensionModulesApi extends HttpClient {
+    constructor() {
+        super(...arguments);
+        this.getExtensionModules = (params = {}) => this.request({
+            path: `/api/extension-modules/get-extension-modules`,
+            method: "GET",
+            secure: true,
+            format: "json",
+            ...params,
+        });
+        this.getExtensionModuleByKey = ({ extensionKey, ...query }, params = {}) => this.request({
+            path: `/api/extension-modules/get-extension-module-by-key/${extensionKey}`,
+            method: "GET",
+            secure: true,
+            format: "json",
+            ...params,
+        });
+        this.registerExtensionModule = (data, params = {}) => this.request({
+            path: `/api/extension-modules/register-extension-module`,
+            method: "POST",
+            body: data,
+            secure: true,
+            type: ContentType.Json,
+            format: "json",
+            ...params,
+        });
+        this.updateExtensionModule = ({ id, ...query }, data, params = {}) => this.request({
+            path: `/api/extension-modules/update-extension-module/${id}`,
+            method: "PUT",
+            body: data,
+            secure: true,
+            type: ContentType.Json,
+            format: "json",
+            ...params,
+        });
+        this.deleteExtensionModule = ({ id, ...query }, params = {}) => this.request({
+            path: `/api/extension-modules/delete-extension-module/${id}`,
+            method: "DELETE",
+            secure: true,
+            ...params,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ExtensionModulesApi, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ExtensionModulesApi }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ExtensionModulesApi, decorators: [{
+            type: Injectable
+        }] });
+
 /* eslint-disable */
 /* tslint:disable */
 // @ts-nocheck
@@ -5273,7 +5461,10 @@ class AppModulesComponent {
         this.confirmationService = inject(ConfirmationService);
         this.l10nService = inject(L10nService);
         this.titleService = inject(AppTitleService);
+        this.externalModuleManifestUrl = '';
+        this.registeringExternalModule = false;
         this.moduleService = inject(ModuleApi);
+        this.extensionModulesService = inject(ExtensionModulesApi);
         this.translationsReady = firstValueFrom(this.l10nService.loadComponentTranslations('app-modules'));
     }
     async ngOnInit() {
@@ -5284,6 +5475,30 @@ class AppModulesComponent {
     async refreshAction() {
         this.modules = await this.moduleService.getModulesWithLoadStatus();
     }
+    get canRegisterExternalModule() {
+        return !!this.externalModuleManifestUrl.trim() && !this.registeringExternalModule;
+    }
+    async registerExternalModule() {
+        if (!this.canRegisterExternalModule) {
+            return;
+        }
+        await this.translationsReady;
+        this.registeringExternalModule = true;
+        try {
+            await this.extensionModulesService.registerExtensionModule({
+                manifestUrl: this.externalModuleManifestUrl.trim()
+            });
+            this.externalModuleManifestUrl = '';
+            await this.refreshAction();
+            this.msgService.success(this.t('app-modules.messages.registerSuccess'));
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.t('app-modules.messages.registerError'), this.t('app-modules.messages.registerError'));
+        }
+        finally {
+            this.registeringExternalModule = false;
+        }
+    }
     async deleteModule(module) {
         await this.translationsReady;
         this.confirmationService.confirm({
@@ -5308,7 +5523,7 @@ class AppModulesComponent {
                     this.msgService.success(this.t('app-modules.messages.deleteSuccess'));
                 }
                 catch (error) {
-                    this.msgService.error(error);
+                    this.msgService.errorFromException(error, this.t('app-modules.messages.deleteError'), this.t('app-modules.messages.deleteError'));
                 }
             }
         });
@@ -5317,7 +5532,7 @@ class AppModulesComponent {
         return this.l10nService.instant(key);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AppModulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: AppModulesComponent, isStandalone: true, selector: "app-modules", providers: [ConfirmationService, ModuleApi], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: AppModulesComponent, isStandalone: true, selector: "app-modules", providers: [ConfirmationService, ModuleApi, ExtensionModulesApi], ngImport: i0, template: `
     <p-confirmDialog></p-confirmDialog>
     <div class="flex flex-col md:flex-row gap-4">
       <div class="card w-full">
@@ -5326,14 +5541,33 @@ class AppModulesComponent {
         </div>
         <div class="mb-4">
           <p-toolbar>
-            <p-button
-              icon="pi pi-refresh"
-              rounded="true"
-              severity="secondary"
-              text="true"
-              tooltipPosition="bottom"
-              [pTooltip]="'app-modules.refreshTooltip' | translate"
-              (onClick)="refreshAction()"></p-button>
+            <div class="flex flex-col md:flex-row md:items-center gap-2 w-full">
+              <div class="flex flex-col sm:flex-row gap-2 flex-1">
+                <input
+                  class="w-full"
+                  pInputText
+                  type="url"
+                  [disabled]="registeringExternalModule"
+                  [placeholder]="'app-modules.register.manifestUrlPlaceholder' | translate"
+                  [(ngModel)]="externalModuleManifestUrl"
+                  (keydown.enter)="registerExternalModule()" />
+                <p-button
+                  icon="pi pi-plus"
+                  severity="success"
+                  [disabled]="!canRegisterExternalModule"
+                  [label]="'app-modules.register.button' | translate"
+                  [loading]="registeringExternalModule"
+                  (onClick)="registerExternalModule()"></p-button>
+              </div>
+              <p-button
+                icon="pi pi-refresh"
+                rounded="true"
+                severity="secondary"
+                text="true"
+                tooltipPosition="bottom"
+                [pTooltip]="'app-modules.refreshTooltip' | translate"
+                (onClick)="refreshAction()"></p-button>
+            </div>
           </p-toolbar>
         </div>
         <p-table class="mt-4" [paginator]="true" [rows]="100" [value]="modules">
@@ -5371,13 +5605,23 @@ class AppModulesComponent {
         </p-table>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$2.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AppModulesComponent, decorators: [{
             type: Component,
             args: [{
-                    imports: [FormsModule, TableModule, Tag, ButtonModule, ToolbarModule, Tooltip, ConfirmDialog, TranslatePipe],
-                    providers: [ConfirmationService, ModuleApi],
+                    imports: [
+                        FormsModule,
+                        TableModule,
+                        Tag,
+                        ButtonModule,
+                        ToolbarModule,
+                        Tooltip,
+                        ConfirmDialog,
+                        TranslatePipe,
+                        InputTextModule
+                    ],
+                    providers: [ConfirmationService, ModuleApi, ExtensionModulesApi],
                     selector: 'app-modules',
                     template: `
     <p-confirmDialog></p-confirmDialog>
@@ -5388,14 +5632,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
         </div>
         <div class="mb-4">
           <p-toolbar>
-            <p-button
-              icon="pi pi-refresh"
-              rounded="true"
-              severity="secondary"
-              text="true"
-              tooltipPosition="bottom"
-              [pTooltip]="'app-modules.refreshTooltip' | translate"
-              (onClick)="refreshAction()"></p-button>
+            <div class="flex flex-col md:flex-row md:items-center gap-2 w-full">
+              <div class="flex flex-col sm:flex-row gap-2 flex-1">
+                <input
+                  class="w-full"
+                  pInputText
+                  type="url"
+                  [disabled]="registeringExternalModule"
+                  [placeholder]="'app-modules.register.manifestUrlPlaceholder' | translate"
+                  [(ngModel)]="externalModuleManifestUrl"
+                  (keydown.enter)="registerExternalModule()" />
+                <p-button
+                  icon="pi pi-plus"
+                  severity="success"
+                  [disabled]="!canRegisterExternalModule"
+                  [label]="'app-modules.register.button' | translate"
+                  [loading]="registeringExternalModule"
+                  (onClick)="registerExternalModule()"></p-button>
+              </div>
+              <p-button
+                icon="pi pi-refresh"
+                rounded="true"
+                severity="secondary"
+                text="true"
+                tooltipPosition="bottom"
+                [pTooltip]="'app-modules.refreshTooltip' | translate"
+                (onClick)="refreshAction()"></p-button>
+            </div>
           </p-toolbar>
         </div>
         <p-table class="mt-4" [paginator]="true" [rows]="100" [value]="modules">
@@ -5649,9 +5912,7 @@ class ApplicationsComponent {
         this.visibleApplications = this.filterApplications(this.globalFilter);
     }
     filterApplications(filter) {
-        const source = this.draftApplication
-            ? [this.draftApplication, ...this.applications]
-            : [...this.applications];
+        const source = this.draftApplication ? [this.draftApplication, ...this.applications] : [...this.applications];
         const normalizedFilter = filter.trim().toLocaleLowerCase();
         if (!normalizedFilter) {
             return source;
@@ -5750,7 +6011,7 @@ class ApplicationsComponent {
                 {{ 'applications.table.icon' | translate }}
                 <p-sortIcon field="icon"></p-sortIcon>
               </th>
-              <th pSortableColumn="order" class="text-right">
+              <th class="text-right" pSortableColumn="order">
                 {{ 'applications.table.order' | translate }}
                 <p-sortIcon field="order"></p-sortIcon>
               </th>
@@ -5823,16 +6084,16 @@ class ApplicationsComponent {
                     [severity]="application.enabled ? 'success' : 'danger'"
                     [value]="
                       (application.enabled ? 'applications.table.yes' : 'applications.table.no') | translate
-                  "></p-tag>
+                    "></p-tag>
                 }
               </td>
               <td>
                 @if (application._isEditing && application._editModel; as editModel) {
                   <p-select
+                    appendTo="body"
                     class="w-full min-w-36"
                     optionLabel="label"
                     optionValue="value"
-                    appendTo="body"
                     [options]="serviceTypeOptions"
                     [(ngModel)]="editModel.serviceType"></p-select>
                 } @else {
@@ -5853,33 +6114,33 @@ class ApplicationsComponent {
                       icon="pi pi-check"
                       severity="success"
                       text="true"
+                      tooltipPosition="bottom"
                       [disabled]="activeRowAction"
                       [pTooltip]="'applications.table.saveTooltip' | translate"
-                      tooltipPosition="bottom"
                       (onClick)="saveApplication(application)"></p-button>
                     <p-button
                       icon="pi pi-times"
                       severity="secondary"
                       text="true"
+                      tooltipPosition="bottom"
                       [disabled]="activeRowAction"
                       [pTooltip]="'applications.table.cancelTooltip' | translate"
-                      tooltipPosition="bottom"
                       (onClick)="cancelEdit(application)"></p-button>
                   } @else {
                     <p-button
                       icon="pi pi-pencil"
                       text="true"
+                      tooltipPosition="bottom"
                       [disabled]="activeRowAction"
                       [pTooltip]="'applications.table.editTooltip' | translate"
-                      tooltipPosition="bottom"
                       (onClick)="editApplication(application)"></p-button>
                     <p-button
                       icon="pi pi-trash"
                       severity="danger"
                       text="true"
+                      tooltipPosition="bottom"
                       [disabled]="activeRowAction"
                       [pTooltip]="'applications.table.deleteTooltip' | translate"
-                      tooltipPosition="bottom"
                       (onClick)="deleteApplication(application)"></p-button>
                   }
                 </div>
@@ -5889,7 +6150,7 @@ class ApplicationsComponent {
 
           <ng-template pTemplate="emptymessage">
             <tr>
-              <td colspan="10" class="py-8 text-center text-surface-500">
+              <td class="py-8 text-center text-surface-500" colspan="10">
                 {{ 'applications.empty' | translate }}
               </td>
             </tr>
@@ -5897,7 +6158,7 @@ class ApplicationsComponent {
         </p-table>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i1$8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$2.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i2$4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$8.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$8.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i1$8.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i5$1.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i2$4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ApplicationsComponent, decorators: [{
             type: Component,
@@ -6000,7 +6261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 {{ 'applications.table.icon' | translate }}
                 <p-sortIcon field="icon"></p-sortIcon>
               </th>
-              <th pSortableColumn="order" class="text-right">
+              <th class="text-right" pSortableColumn="order">
                 {{ 'applications.table.order' | translate }}
                 <p-sortIcon field="order"></p-sortIcon>
               </th>
@@ -6073,16 +6334,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     [severity]="application.enabled ? 'success' : 'danger'"
                     [value]="
                       (application.enabled ? 'applications.table.yes' : 'applications.table.no') | translate
-                  "></p-tag>
+                    "></p-tag>
                 }
               </td>
               <td>
                 @if (application._isEditing && application._editModel; as editModel) {
                   <p-select
+                    appendTo="body"
                     class="w-full min-w-36"
                     optionLabel="label"
                     optionValue="value"
-                    appendTo="body"
                     [options]="serviceTypeOptions"
                     [(ngModel)]="editModel.serviceType"></p-select>
                 } @else {
@@ -6103,33 +6364,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                       icon="pi pi-check"
                       severity="success"
                       text="true"
+                      tooltipPosition="bottom"
                       [disabled]="activeRowAction"
                       [pTooltip]="'applications.table.saveTooltip' | translate"
-                      tooltipPosition="bottom"
                       (onClick)="saveApplication(application)"></p-button>
                     <p-button
                       icon="pi pi-times"
                       severity="secondary"
                       text="true"
+                      tooltipPosition="bottom"
                       [disabled]="activeRowAction"
                       [pTooltip]="'applications.table.cancelTooltip' | translate"
-                      tooltipPosition="bottom"
                       (onClick)="cancelEdit(application)"></p-button>
                   } @else {
                     <p-button
                       icon="pi pi-pencil"
                       text="true"
+                      tooltipPosition="bottom"
                       [disabled]="activeRowAction"
                       [pTooltip]="'applications.table.editTooltip' | translate"
-                      tooltipPosition="bottom"
                       (onClick)="editApplication(application)"></p-button>
                     <p-button
                       icon="pi pi-trash"
                       severity="danger"
                       text="true"
+                      tooltipPosition="bottom"
                       [disabled]="activeRowAction"
                       [pTooltip]="'applications.table.deleteTooltip' | translate"
-                      tooltipPosition="bottom"
                       (onClick)="deleteApplication(application)"></p-button>
                   }
                 </div>
@@ -6139,7 +6400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 
           <ng-template pTemplate="emptymessage">
             <tr>
-              <td colspan="10" class="py-8 text-center text-surface-500">
+              <td class="py-8 text-center text-surface-500" colspan="10">
                 {{ 'applications.empty' | translate }}
               </td>
             </tr>
@@ -6468,7 +6729,9 @@ class DiscussionComponent {
     deleteAttachment(comment, attachment) {
         this.confirmationService.confirm({
             header: this.translateService.instant('discussionComponent.warning'),
-            message: this.translateService.instant('discussionComponent.confirmDeleteFile', { fileName: attachment.fileName }),
+            message: this.translateService.instant('discussionComponent.confirmDeleteFile', {
+                fileName: attachment.fileName
+            }),
             icon: 'pi pi-trash',
             rejectButtonProps: {
                 label: this.translateService.instant('discussionComponent.cancel'),
@@ -6671,27 +6934,24 @@ class DiscussionComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DiscussionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DiscussionComponent, isStandalone: true, selector: "discussion", inputs: { objectTypeId: "objectTypeId", objectId: "objectId" }, providers: [ConfirmationService, DiscussionApi], usesOnChanges: true, ngImport: i0, template: `
-    <p-confirmDialog/>
+    <p-confirmDialog />
 
     <section class="flex flex-col gap-4">
-
       <p-card class="block">
         <div class="flex flex-col gap-4">
           @if (!previewMode) {
             <textarea
-              pTextarea
               class="min-h-28 w-full"
-              [autoResize]="true"
+              pTextarea
               rows="5"
-              [(ngModel)]="newComment"
-              (ngModelChange)="onComposerInput()"
+              [autoResize]="true"
               [placeholder]="'discussionComponent.writeCommentPlaceholder' | translate"
-            ></textarea>
+              [(ngModel)]="newComment"
+              (ngModelChange)="onComposerInput()"></textarea>
           } @else {
             <div
               class="markdown-preview min-h-28 rounded-2xl border border-surface-200 bg-surface-50 px-4 py-3 leading-7 dark:border-surface-700 dark:bg-surface-900/40"
-              [innerHTML]="renderMarkdown(newComment)"
-            ></div>
+              [innerHTML]="renderMarkdown(newComment)"></div>
           }
 
           @if (mentionSuggestions.length > 0) {
@@ -6706,10 +6966,9 @@ class DiscussionComponent {
               <div class="flex flex-col gap-3">
                 @for (candidate of mentionSuggestions; track candidate.userId) {
                   <button
-                    type="button"
                     class="flex w-full items-center justify-between gap-4 rounded-xl border border-transparent px-3 py-3 text-left transition hover:border-primary-200 hover:bg-primary-50 dark:hover:border-primary-800 dark:hover:bg-primary-950/30"
-                    (click)="insertMention(candidate)"
-                  >
+                    type="button"
+                    (click)="insertMention(candidate)">
                     <div class="min-w-0">
                       <strong>{{ candidate.displayName }}</strong>
                       <small class="mt-1 block text-surface-500">{{ candidate.email }}</small>
@@ -6729,15 +6988,14 @@ class DiscussionComponent {
                   <div class="inline-flex items-center gap-2">
                     <i class="pi pi-file"></i>
                     <span class="break-all">{{ file.name }}</span>
-                    <p-tag [value]="formatBytes(file.size)" severity="contrast"/>
+                    <p-tag severity="contrast" [value]="formatBytes(file.size)" />
                   </div>
                   <p-button
                     icon="pi pi-times"
                     severity="danger"
                     [rounded]="true"
                     [text]="true"
-                    (onClick)="removePendingFile(file)"
-                  />
+                    (onClick)="removePendingFile(file)" />
                 </div>
               }
             </div>
@@ -6745,33 +7003,28 @@ class DiscussionComponent {
 
           <div class="flex flex-col gap-2 sm:flex-row sm:justify-end">
             <p-button
+              severity="secondary"
+              [icon]="previewMode ? 'pi pi-pencil' : 'pi pi-eye'"
               [label]="
-                previewMode
-                  ? ('discussionComponent.edit' | translate)
-                  : ('discussionComponent.preview' | translate)
+                previewMode ? ('discussionComponent.edit' | translate) : ('discussionComponent.preview' | translate)
               "
-              [icon]="previewMode ? 'pi pi-pencil' : 'pi pi-eye'"
-              severity="secondary"
               [text]="true"
-              (onClick)="previewMode = !previewMode"
-            />
+              (onClick)="previewMode = !previewMode" />
 
             <label class="file-trigger">
               <p-button
-                [label]="'discussionComponent.attachFiles' | translate"
                 icon="pi pi-paperclip"
                 severity="secondary"
-                [text]="true"
-              />
-              <input type="file" multiple (change)="onFilesSelected($event)"/>
+                [label]="'discussionComponent.attachFiles' | translate"
+                [text]="true" />
+              <input multiple type="file" (change)="onFilesSelected($event)" />
             </label>
             <p-button
-              [label]="'discussionComponent.send' | translate"
               icon="pi pi-send"
-              [loading]="submitting"
               [disabled]="submitting || !newComment.trim()"
-              (onClick)="createComment()"
-            />
+              [label]="'discussionComponent.send' | translate"
+              [loading]="submitting"
+              (onClick)="createComment()" />
           </div>
         </div>
       </p-card>
@@ -6779,7 +7032,7 @@ class DiscussionComponent {
       @if (loading) {
         <div
           class="flex min-h-20 flex-col items-center justify-center gap-3 rounded-2xl border border-surface-200 px-4 py-5 text-surface-500 dark:border-surface-700">
-          <p-progressSpinner strokeWidth="4"/>
+          <p-progressSpinner strokeWidth="4" />
           <span>{{ 'discussionComponent.loadingComments' | translate }}</span>
         </div>
       } @else if (comments.length === 0) {
@@ -6795,24 +7048,25 @@ class DiscussionComponent {
               <ng-template pTemplate="content">
                 <div class="grid gap-4 md:grid-cols-[3.2rem_minmax(0,1fr)]">
                   <div>
-                    <p-avatar
-                      [label]="getInitialsFromString(comment.authorDisplayName)"
-                      shape="circle"
-                    />
+                    <p-avatar shape="circle" [label]="getInitialsFromString(comment.authorDisplayName)" />
                   </div>
 
                   <div class="flex flex-col gap-2">
                     <div class="flex flex-row gap-3 justify-between">
                       <div class="flex flex-wrap items-center gap-2">
                         <strong>{{ comment.authorDisplayName }}</strong>
-                        <span
-                          class="text-sm text-surface-500">{{ comment.createdAt | date: layoutService.dateTimeFormat() }}</span>
+                        <span class="text-sm text-surface-500">{{
+                          comment.createdAt | date: layoutService.dateTimeFormat()
+                        }}</span>
                       </div>
 
                       <div class="flex flex-wrap items-center justify-end gap-2">
                         <div class="flex flex-wrap items-center">
                           @if (comment.isEdited) {
-                            <p-tag [value]="'discussionComponent.edited' | translate" icon="pi pi-pencil" severity="warn"/>
+                            <p-tag
+                              icon="pi pi-pencil"
+                              severity="warn"
+                              [value]="'discussionComponent.edited' | translate" />
                           }
                         </div>
                         @if (comment.canEdit) {
@@ -6821,8 +7075,7 @@ class DiscussionComponent {
                             severity="secondary"
                             [rounded]="true"
                             [text]="true"
-                            (onClick)="startEdit(comment)"
-                          />
+                            (onClick)="startEdit(comment)" />
                         }
                         @if (comment.historyCount > 0) {
                           <p-button
@@ -6830,8 +7083,7 @@ class DiscussionComponent {
                             severity="secondary"
                             [rounded]="true"
                             [text]="true"
-                            (onClick)="toggleHistory(comment)"
-                          />
+                            (onClick)="toggleHistory(comment)" />
                         }
                         @if (comment.canDelete) {
                           <p-button
@@ -6839,47 +7091,42 @@ class DiscussionComponent {
                             severity="danger"
                             [rounded]="true"
                             [text]="true"
-                            (onClick)="deleteComment(comment)"
-                          />
+                            (onClick)="deleteComment(comment)" />
                         }
                       </div>
                     </div>
                     @if (editingCommentId === comment.commentId) {
                       <div class="flex flex-col gap-4">
                         <textarea
-                          pTextarea
                           class="min-h-24 w-full"
-                          [autoResize]="true"
+                          pTextarea
                           rows="4"
-                          [(ngModel)]="editContent"
+                          [autoResize]="true"
                           [placeholder]="'discussionComponent.editCommentPlaceholder' | translate"
-                        ></textarea>
+                          [(ngModel)]="editContent"></textarea>
                         <div class="flex flex-col gap-2 sm:flex-row sm:justify-end">
                           <div>
                             <label class="file-trigger">
                               <p-button
-                                [label]="'discussionComponent.addAttachment' | translate"
                                 icon="pi pi-paperclip"
-                                [text]="true"
                                 severity="secondary"
-                              />
-                              <input type="file" multiple (change)="onInlineFilesSelected(comment, $event)"/>
+                                [label]="'discussionComponent.addAttachment' | translate"
+                                [text]="true" />
+                              <input multiple type="file" (change)="onInlineFilesSelected(comment, $event)" />
                             </label>
                           </div>
 
                           <p-button
-                            [label]="'discussionComponent.save' | translate"
                             icon="pi pi-check"
                             [disabled]="!editContent.trim()"
-                            (onClick)="saveEdit(comment)"
-                          />
+                            [label]="'discussionComponent.save' | translate"
+                            (onClick)="saveEdit(comment)" />
                           <p-button
-                            [label]="'discussionComponent.cancel' | translate"
                             icon="pi pi-times"
                             severity="secondary"
+                            [label]="'discussionComponent.cancel' | translate"
                             [text]="true"
-                            (onClick)="cancelEdit()"
-                          />
+                            (onClick)="cancelEdit()" />
                         </div>
                       </div>
                     } @else {
@@ -6894,13 +7141,12 @@ class DiscussionComponent {
                               <div class="inline-flex items-center gap-2">
                                 <i class="pi pi-file"></i>
                                 <button
-                                  type="button"
                                   class="break-all bg-transparent p-0 text-left font-semibold text-primary-600 transition hover:text-primary-500"
-                                  (click)="downloadAttachment(attachment)"
-                                >
+                                  type="button"
+                                  (click)="downloadAttachment(attachment)">
                                   {{ attachment.fileName }}
                                 </button>
-                                <p-tag [value]="formatBytes(attachment.fileSize)" severity="contrast"/>
+                                <p-tag severity="contrast" [value]="formatBytes(attachment.fileSize)" />
                               </div>
 
                               @if (comment.canEdit) {
@@ -6909,8 +7155,7 @@ class DiscussionComponent {
                                   severity="danger"
                                   [rounded]="true"
                                   [text]="true"
-                                  (onClick)="deleteAttachment(comment, attachment)"
-                                />
+                                  (onClick)="deleteAttachment(comment, attachment)" />
                               }
                             </div>
                           }
@@ -6921,11 +7166,10 @@ class DiscussionComponent {
                     <div class="flex flex-wrap items-center gap-2">
                       @for (reaction of getReactions(comment); track reaction.emojiCode) {
                         <p-button
-                          [label]="reaction.emojiCode + ' ' + reaction.count"
                           severity="secondary"
+                          [label]="reaction.emojiCode + ' ' + reaction.count"
                           [outlined]="false"
-                          (onClick)="toggleReaction(comment, reaction)"
-                        />
+                          (onClick)="toggleReaction(comment, reaction)" />
                       }
 
                       @if (!hasUserReaction(comment)) {
@@ -6934,16 +7178,14 @@ class DiscussionComponent {
                           severity="secondary"
                           [rounded]="true"
                           [text]="true"
-                          (onClick)="reactionPopover.toggle($event)"
-                        />
+                          (onClick)="reactionPopover.toggle($event)" />
                         <p-popover #reactionPopover>
                           <div class="emoji-popover">
                             @for (emoji of emojiPalette; track emoji) {
                               <button
-                                type="button"
                                 class="emoji-option"
-                                (click)="reactWithEmoji(comment, emoji, reactionPopover)"
-                              >
+                                type="button"
+                                (click)="reactWithEmoji(comment, emoji, reactionPopover)">
                                 {{ emoji }}
                               </button>
                             }
@@ -6953,7 +7195,7 @@ class DiscussionComponent {
                     </div>
 
                     @if (historyByComment[comment.commentId]?.opened) {
-                      <p-panel class="block" [toggleable]="true" [collapsed]="false">
+                      <p-panel class="block" [collapsed]="false" [toggleable]="true">
                         <ng-template pTemplate="header">
                           <div class="inline-flex items-center gap-2 text-sm font-medium">
                             <i class="pi pi-history"></i>
@@ -6963,12 +7205,15 @@ class DiscussionComponent {
 
                         @if (historyByComment[comment.commentId]?.loading) {
                           <div class="flex items-center gap-3 text-surface-500">
-                            <p-progressSpinner strokeWidth="4"/>
+                            <p-progressSpinner strokeWidth="4" />
                             <span>{{ 'discussionComponent.loadingHistory' | translate }}</span>
                           </div>
                         } @else {
                           <div class="flex flex-col gap-4">
-                            @for (item of historyByComment[comment.commentId]?.items ?? []; track item.commentEditHistoryId) {
+                            @for (
+                              item of historyByComment[comment.commentId]?.items ?? [];
+                              track item.commentEditHistoryId
+                            ) {
                               <div class="rounded-2xl border border-surface-200 px-4 py-4 dark:border-surface-700">
                                 <div class="mb-3 inline-flex items-center gap-2 text-sm font-semibold">
                                   <i class="pi pi-clock"></i>
@@ -6976,18 +7221,16 @@ class DiscussionComponent {
                                 </div>
                                 <div class="grid gap-4 lg:grid-cols-2">
                                   <div class="flex flex-col gap-2">
-                                    <p-tag [value]="'discussionComponent.before' | translate" severity="secondary"/>
+                                    <p-tag severity="secondary" [value]="'discussionComponent.before' | translate" />
                                     <div
                                       class="history-markdown rounded-2xl bg-surface-50 px-4 py-3 leading-7 dark:bg-surface-900/40"
-                                      [innerHTML]="renderMarkdown(item.oldContent)"
-                                    ></div>
+                                      [innerHTML]="renderMarkdown(item.oldContent)"></div>
                                   </div>
                                   <div class="flex flex-col gap-2">
-                                    <p-tag [value]="'discussionComponent.after' | translate" severity="success"/>
+                                    <p-tag severity="success" [value]="'discussionComponent.after' | translate" />
                                     <div
                                       class="history-markdown rounded-2xl bg-surface-50 px-4 py-3 leading-7 dark:bg-surface-900/40"
-                                      [innerHTML]="renderMarkdown(item.newContent)"
-                                    ></div>
+                                      [innerHTML]="renderMarkdown(item.newContent)"></div>
                                   </div>
                                 </div>
                               </div>
@@ -7004,7 +7247,7 @@ class DiscussionComponent {
         </div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block}.file-trigger{position:relative;display:inline-flex}.file-trigger input{position:absolute;inset:0;opacity:0;cursor:pointer}.markdown-preview,.history-markdown{word-break:break-word}.markdown-preview :is(h1,h2,h3),.history-markdown :is(h1,h2,h3){margin:0 0 .75rem;font-weight:600}.markdown-preview a,.history-markdown a{color:#2563eb;text-decoration:underline;text-underline-offset:.18em}.emoji-popover{display:flex;flex-wrap:wrap;gap:.5rem;max-width:16rem}.emoji-option{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:1.25rem;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i6.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i7.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "pipe", type: i1$3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [":host{display:block}.file-trigger{position:relative;display:inline-flex}.file-trigger input{position:absolute;inset:0;opacity:0;cursor:pointer}.markdown-preview,.history-markdown{word-break:break-word}.markdown-preview :is(h1,h2,h3),.history-markdown :is(h1,h2,h3){margin:0 0 .75rem;font-weight:600}.markdown-preview a,.history-markdown a{color:#2563eb;text-decoration:underline;text-underline-offset:.18em}.emoji-popover{display:flex;flex-wrap:wrap;gap:.5rem;max-width:16rem}.emoji-option{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:1.25rem;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "directive", type: i2$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i6.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i7.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "pipe", type: i1$3.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DiscussionComponent, decorators: [{
             type: Component,
@@ -7024,27 +7267,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                         DatePipe,
                         TranslatePipe
                     ], template: `
-    <p-confirmDialog/>
+    <p-confirmDialog />
 
     <section class="flex flex-col gap-4">
-
       <p-card class="block">
         <div class="flex flex-col gap-4">
           @if (!previewMode) {
             <textarea
-              pTextarea
               class="min-h-28 w-full"
-              [autoResize]="true"
+              pTextarea
               rows="5"
-              [(ngModel)]="newComment"
-              (ngModelChange)="onComposerInput()"
+              [autoResize]="true"
               [placeholder]="'discussionComponent.writeCommentPlaceholder' | translate"
-            ></textarea>
+              [(ngModel)]="newComment"
+              (ngModelChange)="onComposerInput()"></textarea>
           } @else {
             <div
               class="markdown-preview min-h-28 rounded-2xl border border-surface-200 bg-surface-50 px-4 py-3 leading-7 dark:border-surface-700 dark:bg-surface-900/40"
-              [innerHTML]="renderMarkdown(newComment)"
-            ></div>
+              [innerHTML]="renderMarkdown(newComment)"></div>
           }
 
           @if (mentionSuggestions.length > 0) {
@@ -7059,10 +7299,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
               <div class="flex flex-col gap-3">
                 @for (candidate of mentionSuggestions; track candidate.userId) {
                   <button
-                    type="button"
                     class="flex w-full items-center justify-between gap-4 rounded-xl border border-transparent px-3 py-3 text-left transition hover:border-primary-200 hover:bg-primary-50 dark:hover:border-primary-800 dark:hover:bg-primary-950/30"
-                    (click)="insertMention(candidate)"
-                  >
+                    type="button"
+                    (click)="insertMention(candidate)">
                     <div class="min-w-0">
                       <strong>{{ candidate.displayName }}</strong>
                       <small class="mt-1 block text-surface-500">{{ candidate.email }}</small>
@@ -7082,15 +7321,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                   <div class="inline-flex items-center gap-2">
                     <i class="pi pi-file"></i>
                     <span class="break-all">{{ file.name }}</span>
-                    <p-tag [value]="formatBytes(file.size)" severity="contrast"/>
+                    <p-tag severity="contrast" [value]="formatBytes(file.size)" />
                   </div>
                   <p-button
                     icon="pi pi-times"
                     severity="danger"
                     [rounded]="true"
                     [text]="true"
-                    (onClick)="removePendingFile(file)"
-                  />
+                    (onClick)="removePendingFile(file)" />
                 </div>
               }
             </div>
@@ -7098,33 +7336,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 
           <div class="flex flex-col gap-2 sm:flex-row sm:justify-end">
             <p-button
+              severity="secondary"
+              [icon]="previewMode ? 'pi pi-pencil' : 'pi pi-eye'"
               [label]="
-                previewMode
-                  ? ('discussionComponent.edit' | translate)
-                  : ('discussionComponent.preview' | translate)
+                previewMode ? ('discussionComponent.edit' | translate) : ('discussionComponent.preview' | translate)
               "
-              [icon]="previewMode ? 'pi pi-pencil' : 'pi pi-eye'"
-              severity="secondary"
               [text]="true"
-              (onClick)="previewMode = !previewMode"
-            />
+              (onClick)="previewMode = !previewMode" />
 
             <label class="file-trigger">
               <p-button
-                [label]="'discussionComponent.attachFiles' | translate"
                 icon="pi pi-paperclip"
                 severity="secondary"
-                [text]="true"
-              />
-              <input type="file" multiple (change)="onFilesSelected($event)"/>
+                [label]="'discussionComponent.attachFiles' | translate"
+                [text]="true" />
+              <input multiple type="file" (change)="onFilesSelected($event)" />
             </label>
             <p-button
-              [label]="'discussionComponent.send' | translate"
               icon="pi pi-send"
-              [loading]="submitting"
               [disabled]="submitting || !newComment.trim()"
-              (onClick)="createComment()"
-            />
+              [label]="'discussionComponent.send' | translate"
+              [loading]="submitting"
+              (onClick)="createComment()" />
           </div>
         </div>
       </p-card>
@@ -7132,7 +7365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
       @if (loading) {
         <div
           class="flex min-h-20 flex-col items-center justify-center gap-3 rounded-2xl border border-surface-200 px-4 py-5 text-surface-500 dark:border-surface-700">
-          <p-progressSpinner strokeWidth="4"/>
+          <p-progressSpinner strokeWidth="4" />
           <span>{{ 'discussionComponent.loadingComments' | translate }}</span>
         </div>
       } @else if (comments.length === 0) {
@@ -7148,24 +7381,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
               <ng-template pTemplate="content">
                 <div class="grid gap-4 md:grid-cols-[3.2rem_minmax(0,1fr)]">
                   <div>
-                    <p-avatar
-                      [label]="getInitialsFromString(comment.authorDisplayName)"
-                      shape="circle"
-                    />
+                    <p-avatar shape="circle" [label]="getInitialsFromString(comment.authorDisplayName)" />
                   </div>
 
                   <div class="flex flex-col gap-2">
                     <div class="flex flex-row gap-3 justify-between">
                       <div class="flex flex-wrap items-center gap-2">
                         <strong>{{ comment.authorDisplayName }}</strong>
-                        <span
-                          class="text-sm text-surface-500">{{ comment.createdAt | date: layoutService.dateTimeFormat() }}</span>
+                        <span class="text-sm text-surface-500">{{
+                          comment.createdAt | date: layoutService.dateTimeFormat()
+                        }}</span>
                       </div>
 
                       <div class="flex flex-wrap items-center justify-end gap-2">
                         <div class="flex flex-wrap items-center">
                           @if (comment.isEdited) {
-                            <p-tag [value]="'discussionComponent.edited' | translate" icon="pi pi-pencil" severity="warn"/>
+                            <p-tag
+                              icon="pi pi-pencil"
+                              severity="warn"
+                              [value]="'discussionComponent.edited' | translate" />
                           }
                         </div>
                         @if (comment.canEdit) {
@@ -7174,8 +7408,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             severity="secondary"
                             [rounded]="true"
                             [text]="true"
-                            (onClick)="startEdit(comment)"
-                          />
+                            (onClick)="startEdit(comment)" />
                         }
                         @if (comment.historyCount > 0) {
                           <p-button
@@ -7183,8 +7416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             severity="secondary"
                             [rounded]="true"
                             [text]="true"
-                            (onClick)="toggleHistory(comment)"
-                          />
+                            (onClick)="toggleHistory(comment)" />
                         }
                         @if (comment.canDelete) {
                           <p-button
@@ -7192,47 +7424,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                             severity="danger"
                             [rounded]="true"
                             [text]="true"
-                            (onClick)="deleteComment(comment)"
-                          />
+                            (onClick)="deleteComment(comment)" />
                         }
                       </div>
                     </div>
                     @if (editingCommentId === comment.commentId) {
                       <div class="flex flex-col gap-4">
                         <textarea
-                          pTextarea
                           class="min-h-24 w-full"
-                          [autoResize]="true"
+                          pTextarea
                           rows="4"
-                          [(ngModel)]="editContent"
+                          [autoResize]="true"
                           [placeholder]="'discussionComponent.editCommentPlaceholder' | translate"
-                        ></textarea>
+                          [(ngModel)]="editContent"></textarea>
                         <div class="flex flex-col gap-2 sm:flex-row sm:justify-end">
                           <div>
                             <label class="file-trigger">
                               <p-button
-                                [label]="'discussionComponent.addAttachment' | translate"
                                 icon="pi pi-paperclip"
-                                [text]="true"
                                 severity="secondary"
-                              />
-                              <input type="file" multiple (change)="onInlineFilesSelected(comment, $event)"/>
+                                [label]="'discussionComponent.addAttachment' | translate"
+                                [text]="true" />
+                              <input multiple type="file" (change)="onInlineFilesSelected(comment, $event)" />
                             </label>
                           </div>
 
                           <p-button
-                            [label]="'discussionComponent.save' | translate"
                             icon="pi pi-check"
                             [disabled]="!editContent.trim()"
-                            (onClick)="saveEdit(comment)"
-                          />
+                            [label]="'discussionComponent.save' | translate"
+                            (onClick)="saveEdit(comment)" />
                           <p-button
-                            [label]="'discussionComponent.cancel' | translate"
                             icon="pi pi-times"
                             severity="secondary"
+                            [label]="'discussionComponent.cancel' | translate"
                             [text]="true"
-                            (onClick)="cancelEdit()"
-                          />
+                            (onClick)="cancelEdit()" />
                         </div>
                       </div>
                     } @else {
@@ -7247,13 +7474,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                               <div class="inline-flex items-center gap-2">
                                 <i class="pi pi-file"></i>
                                 <button
-                                  type="button"
                                   class="break-all bg-transparent p-0 text-left font-semibold text-primary-600 transition hover:text-primary-500"
-                                  (click)="downloadAttachment(attachment)"
-                                >
+                                  type="button"
+                                  (click)="downloadAttachment(attachment)">
                                   {{ attachment.fileName }}
                                 </button>
-                                <p-tag [value]="formatBytes(attachment.fileSize)" severity="contrast"/>
+                                <p-tag severity="contrast" [value]="formatBytes(attachment.fileSize)" />
                               </div>
 
                               @if (comment.canEdit) {
@@ -7262,8 +7488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                                   severity="danger"
                                   [rounded]="true"
                                   [text]="true"
-                                  (onClick)="deleteAttachment(comment, attachment)"
-                                />
+                                  (onClick)="deleteAttachment(comment, attachment)" />
                               }
                             </div>
                           }
@@ -7274,11 +7499,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     <div class="flex flex-wrap items-center gap-2">
                       @for (reaction of getReactions(comment); track reaction.emojiCode) {
                         <p-button
-                          [label]="reaction.emojiCode + ' ' + reaction.count"
                           severity="secondary"
+                          [label]="reaction.emojiCode + ' ' + reaction.count"
                           [outlined]="false"
-                          (onClick)="toggleReaction(comment, reaction)"
-                        />
+                          (onClick)="toggleReaction(comment, reaction)" />
                       }
 
                       @if (!hasUserReaction(comment)) {
@@ -7287,16 +7511,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                           severity="secondary"
                           [rounded]="true"
                           [text]="true"
-                          (onClick)="reactionPopover.toggle($event)"
-                        />
+                          (onClick)="reactionPopover.toggle($event)" />
                         <p-popover #reactionPopover>
                           <div class="emoji-popover">
                             @for (emoji of emojiPalette; track emoji) {
                               <button
-                                type="button"
                                 class="emoji-option"
-                                (click)="reactWithEmoji(comment, emoji, reactionPopover)"
-                              >
+                                type="button"
+                                (click)="reactWithEmoji(comment, emoji, reactionPopover)">
                                 {{ emoji }}
                               </button>
                             }
@@ -7306,7 +7528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                     </div>
 
                     @if (historyByComment[comment.commentId]?.opened) {
-                      <p-panel class="block" [toggleable]="true" [collapsed]="false">
+                      <p-panel class="block" [collapsed]="false" [toggleable]="true">
                         <ng-template pTemplate="header">
                           <div class="inline-flex items-center gap-2 text-sm font-medium">
                             <i class="pi pi-history"></i>
@@ -7316,12 +7538,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 
                         @if (historyByComment[comment.commentId]?.loading) {
                           <div class="flex items-center gap-3 text-surface-500">
-                            <p-progressSpinner strokeWidth="4"/>
+                            <p-progressSpinner strokeWidth="4" />
                             <span>{{ 'discussionComponent.loadingHistory' | translate }}</span>
                           </div>
                         } @else {
                           <div class="flex flex-col gap-4">
-                            @for (item of historyByComment[comment.commentId]?.items ?? []; track item.commentEditHistoryId) {
+                            @for (
+                              item of historyByComment[comment.commentId]?.items ?? [];
+                              track item.commentEditHistoryId
+                            ) {
                               <div class="rounded-2xl border border-surface-200 px-4 py-4 dark:border-surface-700">
                                 <div class="mb-3 inline-flex items-center gap-2 text-sm font-semibold">
                                   <i class="pi pi-clock"></i>
@@ -7329,18 +7554,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                                 </div>
                                 <div class="grid gap-4 lg:grid-cols-2">
                                   <div class="flex flex-col gap-2">
-                                    <p-tag [value]="'discussionComponent.before' | translate" severity="secondary"/>
+                                    <p-tag severity="secondary" [value]="'discussionComponent.before' | translate" />
                                     <div
                                       class="history-markdown rounded-2xl bg-surface-50 px-4 py-3 leading-7 dark:bg-surface-900/40"
-                                      [innerHTML]="renderMarkdown(item.oldContent)"
-                                    ></div>
+                                      [innerHTML]="renderMarkdown(item.oldContent)"></div>
                                   </div>
                                   <div class="flex flex-col gap-2">
-                                    <p-tag [value]="'discussionComponent.after' | translate" severity="success"/>
+                                    <p-tag severity="success" [value]="'discussionComponent.after' | translate" />
                                     <div
                                       class="history-markdown rounded-2xl bg-surface-50 px-4 py-3 leading-7 dark:bg-surface-900/40"
-                                      [innerHTML]="renderMarkdown(item.newContent)"
-                                    ></div>
+                                      [innerHTML]="renderMarkdown(item.newContent)"></div>
                                   </div>
                                 </div>
                               </div>
@@ -7445,7 +7668,7 @@ class IframeModuleComponent extends BaseModuleComponent {
                 placeholder="{{ 'iframe-module.iframeModule.urlPlaceholder' | translate }}"
                 qa-id="iframe-module-settings-site-url-input"
                 type="text"
-                [(ngModel)]="settings.url"/>
+                [(ngModel)]="settings.url" />
             </div>
             <div class="flex justify-end">
               <p-button
@@ -7459,7 +7682,7 @@ class IframeModuleComponent extends BaseModuleComponent {
         </div>
       </div>
     } @else if (isSecurity) {
-      <security [controller]="controller" [id]="id"/>
+      <security [controller]="controller" [id]="id" />
     }
   `, isInline: true, dependencies: [{ kind: "component", type: SecurityComponent, selector: "security", inputs: ["id", "controller"] }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
@@ -7489,7 +7712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 placeholder="{{ 'iframe-module.iframeModule.urlPlaceholder' | translate }}"
                 qa-id="iframe-module-settings-site-url-input"
                 type="text"
-                [(ngModel)]="settings.url"/>
+                [(ngModel)]="settings.url" />
             </div>
             <div class="flex justify-end">
               <p-button
@@ -7503,7 +7726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
         </div>
       </div>
     } @else if (isSecurity) {
-      <security [controller]="controller" [id]="id"/>
+      <security [controller]="controller" [id]="id" />
     }
   `
                 }]
@@ -7512,6 +7735,563 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
                 args: ['iframe']
             }] } });
 
+const OIP_EXTENSION_EVENTS = {
+    contextChange: 'oip:context-change',
+    titleChange: 'oip:title-change',
+    settingsChange: 'oip:settings-change',
+    notify: 'oip:notify',
+    navigate: 'oip:navigate',
+    error: 'oip:error'
+};
+function emitOipTitleChange(element, title) {
+    element.dispatchEvent(new CustomEvent(OIP_EXTENSION_EVENTS.titleChange, { detail: title, bubbles: true }));
+}
+function emitOipSettingsChange(element, settings) {
+    element.dispatchEvent(new CustomEvent(OIP_EXTENSION_EVENTS.settingsChange, { detail: settings, bubbles: true }));
+}
+function emitOipNotify(element, notification) {
+    element.dispatchEvent(new CustomEvent(OIP_EXTENSION_EVENTS.notify, { detail: notification, bubbles: true }));
+}
+function emitOipNavigate(element, navigation) {
+    element.dispatchEvent(new CustomEvent(OIP_EXTENSION_EVENTS.navigate, { detail: navigation, bubbles: true }));
+}
+function emitOipError(element, error) {
+    element.dispatchEvent(new CustomEvent(OIP_EXTENSION_EVENTS.error, { detail: error, bubbles: true }));
+}
+function emitOipContextChange(element, context) {
+    element.dispatchEvent(new CustomEvent(OIP_EXTENSION_EVENTS.contextChange, { detail: context }));
+}
+
+class ExtensionLoaderService {
+    constructor() {
+        this.loadedScripts = new Map();
+    }
+    loadScript(scriptUrl) {
+        const existing = this.loadedScripts.get(scriptUrl);
+        if (existing) {
+            return existing;
+        }
+        const loadPromise = new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.type = 'module';
+            script.src = scriptUrl;
+            script.async = true;
+            script.onload = () => resolve();
+            script.onerror = () => {
+                this.loadedScripts.delete(scriptUrl);
+                reject(new Error(`Extension script could not be loaded: ${scriptUrl}`));
+            };
+            document.head.appendChild(script);
+        });
+        this.loadedScripts.set(scriptUrl, loadPromise);
+        return loadPromise;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ExtensionLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ExtensionLoaderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ExtensionLoaderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class CustomElementExtensionModuleHostComponent extends BaseModuleComponent {
+    set extensionContainer(element) {
+        this.container = element;
+        this.queueRenderExtension();
+    }
+    get showContent() {
+        return this.isActiveTab('content');
+    }
+    get showSettings() {
+        return this.isActiveTab('settings');
+    }
+    get showSecurity() {
+        return this.isActiveTab('security');
+    }
+    get extensionKey() {
+        return this.route.snapshot.paramMap.get('extensionKey') ?? '';
+    }
+    constructor() {
+        super();
+        this.extensionLoader = inject(ExtensionLoaderService);
+        this.router = inject(Router);
+        this.hostChangeDetectorRef = inject(ChangeDetectorRef);
+        this.extensionModulesApi = inject(ExtensionModulesApi);
+        this.removeListeners = [];
+        this.renderQueued = false;
+        this.activeTabSyncQueued = false;
+        this.activeTabId = this.getCurrentActiveTabId();
+        this.destroyed = false;
+        this.loadError = null;
+        this.subscriptions.push(this.topBarService.activeId$.subscribe(() => {
+            this.queueActiveTabSync();
+        }));
+    }
+    async onModuleInstanceChange() {
+        await this.loadExtensionMetadata();
+        await this.renderExtension();
+    }
+    onSecurityRightsChange() {
+        this.updateExtensionContext();
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        this.destroyExtensionElement();
+        super.ngOnDestroy();
+    }
+    async reloadExtension() {
+        this.loadError = null;
+        this.extensionMetadata = undefined;
+        await this.loadExtensionMetadata();
+        await this.renderExtension();
+    }
+    async loadExtensionMetadata() {
+        if (this.extensionMetadata) {
+            return;
+        }
+        if (!this.extensionKey) {
+            this.loadError = 'Extension key is missing.';
+            return;
+        }
+        this.extensionMetadata = (await this.extensionModulesApi.getExtensionModuleByKey({
+            extensionKey: this.extensionKey
+        }));
+        await this.loadExtensionTranslations(this.extensionMetadata);
+    }
+    async renderExtension() {
+        if (this.destroyed || !this.container || !this.extensionMetadata || !this.showContent) {
+            return;
+        }
+        try {
+            this.loadError = null;
+            this.destroyExtensionElement();
+            await this.renderCustomElementExtension(this.extensionMetadata);
+        }
+        catch (error) {
+            this.loadError = error instanceof Error ? error.message : 'Extension could not be loaded.';
+            this.msgService.error(error);
+        }
+    }
+    queueRenderExtension() {
+        if (this.renderQueued) {
+            return;
+        }
+        this.renderQueued = true;
+        queueMicrotask(() => {
+            this.renderQueued = false;
+            void this.renderExtension();
+        });
+    }
+    isActiveTab(id) {
+        return this.activeTabId === id;
+    }
+    queueActiveTabSync() {
+        const nextActiveTabId = this.getCurrentActiveTabId();
+        if (this.activeTabId === nextActiveTabId || this.activeTabSyncQueued) {
+            return;
+        }
+        this.activeTabSyncQueued = true;
+        queueMicrotask(() => {
+            this.activeTabSyncQueued = false;
+            if (this.destroyed) {
+                return;
+            }
+            this.activeTabId = this.getCurrentActiveTabId();
+            this.hostChangeDetectorRef.detectChanges();
+            if (this.showContent) {
+                this.queueRenderExtension();
+            }
+            else {
+                this.destroyExtensionElement();
+            }
+        });
+    }
+    getCurrentActiveTabId() {
+        return this.topBarService.activeTopBarItem?.id ?? 'content';
+    }
+    updateExtensionContext() {
+        if (!this.extensionElement || !this.extensionMetadata?.extensionKey) {
+            return;
+        }
+        const context = {
+            moduleInstanceId: this.id,
+            extensionKey: this.extensionMetadata.extensionKey,
+            apiBasePath: this.buildUrl(`api/extensions/${this.extensionMetadata.extensionKey}`),
+            settings: this.settings,
+            locale: this.layoutService.language(),
+            theme: this.layoutService.layoutConfig(),
+            user: this.securityService.getCurrentUser(),
+            activeTabId: this.topBarService.activeId ?? 'content',
+            permissions: {
+                canRead: this.canRead,
+                canEdit: this.canEdit,
+                canDelete: this.canDelete
+            }
+        };
+        Object.assign(this.extensionElement, { oipContext: context });
+        emitOipContextChange(this.extensionElement, context);
+    }
+    attachListeners(element) {
+        this.addListener(element, OIP_EXTENSION_EVENTS.titleChange, (event) => {
+            const title = event.detail;
+            if (title) {
+                this.appTitleService.setTitle(title);
+            }
+        });
+        this.addListener(element, OIP_EXTENSION_EVENTS.settingsChange, (event) => {
+            this.settings = event.detail;
+            void this.saveSettings(this.settings);
+        });
+        this.addListener(element, OIP_EXTENSION_EVENTS.notify, (event) => {
+            const detail = event.detail;
+            const severity = detail?.severity ?? 'info';
+            const message = detail?.detail ?? detail?.summary ?? '';
+            switch (severity) {
+                case 'success':
+                    this.msgService.success(message, detail?.summary);
+                    break;
+                case 'warn':
+                    this.msgService.warn(message, detail?.summary);
+                    break;
+                case 'error':
+                    this.msgService.error(message, detail?.summary);
+                    break;
+                default:
+                    this.msgService.info(message, detail?.summary);
+            }
+        });
+        this.addListener(element, OIP_EXTENSION_EVENTS.navigate, (event) => {
+            const detail = event.detail;
+            if (detail?.commands) {
+                void this.router.navigate(detail.commands);
+            }
+            else if (detail?.url) {
+                void this.router.navigateByUrl(detail.url);
+            }
+        });
+        this.addListener(element, OIP_EXTENSION_EVENTS.error, (event) => {
+            this.msgService.error(event.detail);
+        });
+    }
+    buildUrl(path) {
+        const baseUrl = document.getElementsByTagName('base')[0]?.href ?? `${window.location.origin}/`;
+        return `${baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`}${path}`;
+    }
+    async loadExtensionTranslations(metadata) {
+        const extensionKey = metadata.extensionKey ?? this.extensionKey;
+        const apiBaseUrl = metadata.apiBaseUrl;
+        if (!extensionKey || !apiBaseUrl) {
+            return;
+        }
+        const lang = this.translateService.currentLang || this.layoutService.language() || 'en';
+        const url = this.buildExtensionI18nUrl(apiBaseUrl, extensionKey, lang);
+        try {
+            await firstValueFrom(this.l10nService.loadTranslationsFromUrl(extensionKey, url, lang));
+        }
+        catch (error) {
+            console.error(`No translations found for extension ${extensionKey}.${lang}.json`, error);
+        }
+    }
+    buildExtensionI18nUrl(apiBaseUrl, extensionKey, lang) {
+        return `${apiBaseUrl.replace(/\/+$/, '')}/assets/i18n/${encodeURIComponent(extensionKey)}.${encodeURIComponent(lang)}.json`;
+    }
+    addListener(element, eventName, listener) {
+        element.addEventListener(eventName, listener);
+        this.removeListeners.push(() => element.removeEventListener(eventName, listener));
+    }
+    destroyExtensionElement() {
+        this.removeListeners.forEach((remove) => remove());
+        this.removeListeners = [];
+        this.extensionElement?.remove();
+        this.extensionElement = undefined;
+    }
+    async renderCustomElementExtension(metadata) {
+        const { elementName, scriptUrl } = metadata;
+        if (!this.container || !elementName || !scriptUrl) {
+            this.loadError = 'Custom Element extension metadata is incomplete.';
+            return;
+        }
+        await this.extensionLoader.loadScript(scriptUrl);
+        await customElements.whenDefined(elementName);
+        const element = document.createElement(elementName);
+        this.extensionElement = element;
+        this.attachListeners(element);
+        this.container.nativeElement.appendChild(element);
+        this.updateExtensionContext();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CustomElementExtensionModuleHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: CustomElementExtensionModuleHostComponent, isStandalone: true, selector: "ng-component", providers: [ExtensionModulesApi], viewQueries: [{ propertyName: "extensionContainer", first: true, predicate: ["extensionContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    @if (showContent) {
+      <div class="min-h-[calc(100vh-10rem)] w-full">
+        @if (loadError) {
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ loadError }}</div>
+            <p-button icon="pi pi-refresh" label="Retry" (onClick)="reloadExtension()"></p-button>
+          </div>
+        } @else {
+          <div #extensionContainer class="w-full"></div>
+        }
+      </div>
+    } @else if (showSettings) {
+      <div class="flex flex-col md:flex-row gap-8">
+        <div class="md:w-1/2">
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ 'baseComponent.settings' | translate }}</div>
+            <p-button icon="pi pi-save" label="Save" (onClick)="saveSettings(settings)"></p-button>
+          </div>
+        </div>
+      </div>
+    } @else if (showSecurity) {
+      <security [controller]="controller" [id]="id" />
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SecurityComponent, selector: "security", inputs: ["id", "controller"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: CustomElementExtensionModuleHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [CommonModule, SecurityComponent, TranslatePipe, Button],
+                    providers: [ExtensionModulesApi],
+                    template: `
+    @if (showContent) {
+      <div class="min-h-[calc(100vh-10rem)] w-full">
+        @if (loadError) {
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ loadError }}</div>
+            <p-button icon="pi pi-refresh" label="Retry" (onClick)="reloadExtension()"></p-button>
+          </div>
+        } @else {
+          <div #extensionContainer class="w-full"></div>
+        }
+      </div>
+    } @else if (showSettings) {
+      <div class="flex flex-col md:flex-row gap-8">
+        <div class="md:w-1/2">
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ 'baseComponent.settings' | translate }}</div>
+            <p-button icon="pi pi-save" label="Save" (onClick)="saveSettings(settings)"></p-button>
+          </div>
+        </div>
+      </div>
+    } @else if (showSecurity) {
+      <security [controller]="controller" [id]="id" />
+    }
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { extensionContainer: [{
+                type: ViewChild,
+                args: ['extensionContainer']
+            }] } });
+
+class ExtensionModuleHostComponent extends BaseModuleComponent {
+    set extensionViewContainer(viewContainer) {
+        this.viewContainer = viewContainer;
+        this.queueRenderExtension();
+    }
+    get extensionKey() {
+        return this.route.snapshot.paramMap.get('extensionKey') ?? '';
+    }
+    constructor() {
+        super();
+        this.injector = inject(Injector);
+        this.environmentInjector = inject(EnvironmentInjector);
+        this.extensionModulesApi = inject(ExtensionModulesApi);
+        this.renderQueued = false;
+        this.destroyed = false;
+        this.loadError = null;
+        this.subscriptions.push(this.topBarService.activeId$.subscribe(() => {
+            this.updateExtensionContext();
+        }));
+    }
+    async reloadExtension() {
+        this.loadError = null;
+        this.extensionMetadata = undefined;
+        await this.loadExtensionMetadata();
+        await this.renderExtension();
+    }
+    async onModuleInstanceChange() {
+        await this.loadExtensionMetadata();
+        await this.renderExtension();
+    }
+    onSecurityRightsChange() {
+        this.updateExtensionContext();
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        this.destroyExtensionComponent();
+        super.ngOnDestroy();
+    }
+    async loadExtensionMetadata() {
+        if (this.extensionMetadata) {
+            return;
+        }
+        if (!this.extensionKey) {
+            this.loadError = 'Extension key is missing.';
+            return;
+        }
+        this.extensionMetadata = (await this.extensionModulesApi.getExtensionModuleByKey({
+            extensionKey: this.extensionKey
+        }));
+        await this.loadExtensionTranslations(this.extensionMetadata);
+    }
+    async renderExtension() {
+        if (this.destroyed || !this.viewContainer) {
+            return;
+        }
+        try {
+            this.loadError = null;
+            await this.loadExtensionMetadata();
+            if (!this.extensionMetadata) {
+                return;
+            }
+            this.destroyExtensionComponent();
+            if (this.extensionMetadata.loadType === 'moduleFederation') {
+                await this.renderFederatedExtension(this.extensionMetadata);
+            }
+            else {
+                this.extensionComponent = this.viewContainer.createComponent(CustomElementExtensionModuleHostComponent, {
+                    injector: this.injector,
+                    environmentInjector: this.environmentInjector
+                });
+            }
+        }
+        catch (error) {
+            this.loadError = error instanceof Error ? error.message : 'Extension could not be loaded.';
+            console.error(error);
+        }
+    }
+    queueRenderExtension() {
+        if (this.renderQueued) {
+            return;
+        }
+        this.renderQueued = true;
+        queueMicrotask(() => {
+            this.renderQueued = false;
+            void this.renderExtension();
+        });
+    }
+    destroyExtensionComponent() {
+        this.extensionComponent?.destroy();
+        this.extensionComponent = undefined;
+        this.extensionElement = undefined;
+        this.viewContainer?.clear();
+    }
+    async renderFederatedExtension(metadata) {
+        const { remoteEntryUrl, exposedModule, componentName } = metadata;
+        if (!remoteEntryUrl || !exposedModule || !componentName) {
+            this.loadError = 'Module Federation extension metadata is incomplete.';
+            return;
+        }
+        const remoteModule = await loadRemoteModule({
+            type: 'module',
+            remoteEntry: remoteEntryUrl,
+            exposedModule
+        });
+        const component = remoteModule[componentName];
+        if (!component) {
+            throw new Error(`Remote component '${componentName}' was not exported by '${exposedModule}'.`);
+        }
+        this.extensionComponent = this.viewContainer?.createComponent(component, {
+            environmentInjector: this.environmentInjector
+        });
+        this.extensionElement = this.extensionComponent?.location.nativeElement;
+        this.updateExtensionContext();
+    }
+    async loadExtensionTranslations(metadata) {
+        const extensionKey = metadata.extensionKey ?? this.extensionKey;
+        const apiBaseUrl = metadata.apiBaseUrl;
+        if (!extensionKey || !apiBaseUrl) {
+            return;
+        }
+        const lang = this.translateService.currentLang || this.layoutService.language() || 'en';
+        for (const namespace of this.getExtensionTranslationNamespaces(metadata, extensionKey)) {
+            const url = this.buildExtensionI18nUrl(apiBaseUrl, namespace, lang);
+            try {
+                await firstValueFrom(this.l10nService.loadTranslationsFromUrl(namespace, url, lang));
+                return;
+            }
+            catch (error) {
+                console.error(`No translations found for extension ${namespace}.${lang}.json`, error);
+            }
+        }
+    }
+    buildExtensionI18nUrl(apiBaseUrl, extensionKey, lang) {
+        return `${apiBaseUrl.replace(/\/+$/, '')}/assets/i18n/${encodeURIComponent(extensionKey)}.${encodeURIComponent(lang)}.json`;
+    }
+    getExtensionTranslationNamespaces(metadata, extensionKey) {
+        const namespaces = [extensionKey];
+        const componentNamespace = this.toKebabCase(metadata.componentName?.replace(/Component$/, '') ?? '');
+        if (componentNamespace && !namespaces.includes(componentNamespace)) {
+            namespaces.push(componentNamespace);
+        }
+        return namespaces;
+    }
+    toKebabCase(value) {
+        return value
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .replace(/[\s_]+/g, '-')
+            .toLowerCase();
+    }
+    updateExtensionContext() {
+        if (!this.extensionElement || !this.extensionMetadata?.extensionKey) {
+            return;
+        }
+        const context = {
+            moduleInstanceId: this.id,
+            extensionKey: this.extensionMetadata.extensionKey,
+            apiBasePath: this.buildUrl(`api/extensions/${this.extensionMetadata.extensionKey}`),
+            settings: this.settings,
+            locale: this.layoutService.language(),
+            theme: this.layoutService.layoutConfig(),
+            user: this.securityService.getCurrentUser(),
+            activeTabId: this.topBarService.activeId ?? 'content',
+            permissions: {
+                canRead: this.canRead,
+                canEdit: this.canEdit,
+                canDelete: this.canDelete
+            }
+        };
+        Object.assign(this.extensionElement, { oipContext: context });
+        emitOipContextChange(this.extensionElement, context);
+    }
+    buildUrl(path) {
+        const baseUrl = document.getElementsByTagName('base')[0]?.href ?? `${window.location.origin}/`;
+        return `${baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`}${path}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ExtensionModuleHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: ExtensionModuleHostComponent, isStandalone: true, selector: "ng-component", providers: [ExtensionModulesApi], viewQueries: [{ propertyName: "extensionViewContainer", first: true, predicate: ["extensionContainer"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: `
+    @if (loadError) {
+      <div class="card flex flex-col gap-4">
+        <div class="font-semibold text-xl">{{ loadError }}</div>
+        <p-button icon="pi pi-refresh" label="Retry" (onClick)="reloadExtension()"></p-button>
+      </div>
+    } @else {
+      <ng-container #extensionContainer></ng-container>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: ExtensionModuleHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [CommonModule, Button],
+                    providers: [ExtensionModulesApi],
+                    template: `
+    @if (loadError) {
+      <div class="card flex flex-col gap-4">
+        <div class="font-semibold text-xl">{{ loadError }}</div>
+        <p-button icon="pi pi-refresh" label="Retry" (onClick)="reloadExtension()"></p-button>
+      </div>
+    } @else {
+      <ng-container #extensionContainer></ng-container>
+    }
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { extensionViewContainer: [{
+                type: ViewChild,
+                args: ['extensionContainer', { read: ViewContainerRef }]
+            }] } });
+
 /**
  * A route guard that ensures the user is authenticated and has a valid access token.
  * If the access token is expired, it attempts to refresh the session.
@@ -7520,24 +8300,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
 class AuthGuardService {
     constructor() {
         this.oidcSecurityService = inject(SecurityService);
-        this.router = inject(Router);
     }
     /**
      * Checks whether the route can be activated.
      * - Returns `true` if the user is authenticated and the token is valid.
      * - Attempts to refresh the token if expired.
-     * - Redirects to `/unauthorized` if not authenticated or refresh fails.
+     * - Starts the authorization flow if not authenticated or refresh fails.
      *
-     * @returns {Observable<boolean | UrlTree>} A stream resolving to true (allow), or UrlTree (redirect).
+     * @returns {Observable<boolean>} A stream resolving to true (allow), or false after starting authorization.
      */
     canActivate(returnUrl = '/') {
         this.oidcSecurityService.auth();
-        return this.oidcSecurityService.isAuthenticated().pipe(map((authenticated) => authenticated
-            ? true
-            : this.router.createUrlTree(['/unauthorized'], { queryParams: { returnUrl: this.getReturnUrl(returnUrl) } })));
-    }
-    getReturnUrl(returnUrl) {
-        return returnUrl.startsWith('/unauthorized') ? '/' : returnUrl;
+        return this.oidcSecurityService.isAuthenticated().pipe(map((authenticated) => {
+            if (authenticated) {
+                return true;
+            }
+            this.oidcSecurityService.authorize(returnUrl);
+            return false;
+        }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AuthGuardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: AuthGuardService }); }
@@ -7618,13 +8398,55 @@ function replaceDefaults(themes) {
     return provideAppThemes(themes, { mode: 'replaceDefaults' });
 }
 
+const defaultTheme = [
+    {
+        id: 'Oip',
+        label: 'Oip',
+        preset: definePreset(Aura, {
+            components: {
+                toolbar: {
+                    colorScheme: {
+                        light: {
+                            root: {
+                                borderRadius: '0.7rem'
+                            }
+                        },
+                        dark: {
+                            root: {
+                                borderRadius: '0.7rem'
+                            }
+                        }
+                    }
+                }
+            }
+        }),
+        primaryColors: {
+            rose: primitive['red']
+        },
+        surfaceColors: {
+            zinc: {
+                0: '#ffffff',
+                50: '#fafafa',
+                100: '#f4f4f5',
+                200: '#e4e4e7',
+                300: '#d4d4d8',
+                400: '#a1a1aa',
+                500: '#71717a',
+                600: '#52525b',
+                700: '#3f3f46',
+                800: '#27272a',
+                900: '#18181b',
+                950: '#09090b'
+            }
+        }
+    }
+];
+
 const langIntercept = (req, next) => {
     const layoutService = inject(LayoutService);
     const securityService = inject(SecurityService);
     const lang = layoutService.language() ? layoutService.language() : 'en';
-    const headers = req.headers
-        .set('Accept-language', lang)
-        .set('X-Timezone', layoutService.timeZone());
+    const headers = req.headers.set('Accept-language', lang).set('X-Timezone', layoutService.timeZone());
     const reqWithCredentials = req.clone({
         headers,
         withCredentials: true
@@ -7717,5 +8539,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_THEME_PRESETS, APP_THEME_PRESETS_MERGE_MODE, AppConfiguratorComponent, AppFloatingConfiguratorComponent, AppLayoutComponent, AppModulesComponent, AppTopbar, AppTopbarApplicationSwitcherComponent, ApplicationRegistryService, ApplicationsApi, ApplicationsComponent, AuthGuardService, BaseModuleComponent, BffSecurityService, ConfigComponent, ContentType, DbMigrationComponent, DiscussionComponent, ErrorComponent, FolderModuleApi, FooterComponent, HttpClient, IframeModuleApi, IframeModuleComponent, L10nService, LOGO_COMPONENT_TOKEN, LayoutService, LogoComponent, LogoService, MenuComponent, MenuService, MsgService, NotfoundComponent, NotificationApi, NotificationService, ProfileComponent, SecurityApi, SecurityComponent, SecurityService, SidebarComponent, TableFilterService, TopBarService, UnauthorizedComponent, UserNotificationsComponent, UserProfileApi, UserService, convertToPrimeNgDateFormat, langIntercept, mergeWithDefaults, provideAppThemes, provideLogoComponent, provideOip, replaceDefaults };
+export { APP_THEME_PRESETS, APP_THEME_PRESETS_MERGE_MODE, AppConfiguratorComponent, AppFloatingConfiguratorComponent, AppLayoutComponent, AppModulesComponent, AppTopbar, AppTopbarApplicationSwitcherComponent, ApplicationRegistryService, ApplicationsApi, ApplicationsComponent, AuthGuardService, BaseModuleComponent, BffSecurityService, ConfigComponent, ContentType, CustomElementExtensionModuleHostComponent, DbMigrationComponent, DiscussionComponent, ErrorComponent, ExtensionLoaderService, ExtensionModuleHostComponent, FolderModuleApi, FooterComponent, HttpClient, IframeModuleApi, IframeModuleComponent, L10nService, LOGO_COMPONENT_TOKEN, LayoutService, LogoComponent, LogoService, MenuComponent, MenuService, MsgService, NotfoundComponent, NotificationApi, NotificationService, OIP_EXTENSION_EVENTS, ProfileComponent, SecurityApi, SecurityComponent, SecurityService, SidebarComponent, TableFilterService, TopBarService, UnauthorizedComponent, UserNotificationsComponent, UserProfileApi, UserService, convertToPrimeNgDateFormat, defaultTheme, emitOipContextChange, emitOipError, emitOipNavigate, emitOipNotify, emitOipSettingsChange, emitOipTitleChange, langIntercept, mergeWithDefaults, provideAppThemes, provideLogoComponent, provideOip, replaceDefaults };
 //# sourceMappingURL=oip-common.mjs.map