oip-common 0.1.6 → 0.1.8

package/fesm2022/oip-common.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, InjectionToken, signal, computed, effect, ChangeDetectorRef, Component, Input, PLATFORM_ID, HostBinding, EventEmitter, Output, ViewChild, Renderer2, SecurityContext, ChangeDetectionStrategy, Pipe } from '@angular/core';
+import { Injectable, inject, InjectionToken, signal, computed, effect, DestroyRef, ChangeDetectorRef, Component, Input, PLATFORM_ID, HostBinding, EventEmitter, Output, ViewChild, Renderer2, SecurityContext, ChangeDetectionStrategy, makeEnvironmentProviders, Pipe } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2$6 from 'primeng/api';
 import { MessageService, ConfirmationService, PrimeIcons, SharedModule } from 'primeng/api';
 import { HttpErrorResponse, HttpClient as HttpClient$1, HttpHeaders } from '@angular/common/http';
@@ -7,8 +8,11 @@ import * as i2$4 from '@ngx-translate/core';
 import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
 import * as i1$3 from '@angular/router';
 import { ActivatedRoute, Router, RouterModule, NavigationEnd, RouterLinkActive, RouterLink } from '@angular/router';
-import { lastValueFrom, BehaviorSubject, Subject, ReplaySubject, merge, filter as filter$1, combineLatest, of, map as map$1, Observable } from 'rxjs';
+import { lastValueFrom, BehaviorSubject, Subject, ReplaySubject, merge, from, filter as filter$1, combineLatest, of, map as map$1, Observable } from 'rxjs';
+import { filter, distinctUntilChanged, map, switchMap, catchError } from 'rxjs/operators';
 import { Title, DomSanitizer } from '@angular/platform-browser';
+import { PrimeNG } from 'primeng/config';
+import { OidcSecurityService, PublicEventsService, EventTypes, StsConfigHttpLoader } from 'angular-auth-oidc-client';
 import * as i1 from 'primeng/multiselect';
 import { MultiSelectModule } from 'primeng/multiselect';
 import * as i2 from 'primeng/tooltip';
@@ -25,11 +29,8 @@ import { updatePreset, updateSurfacePalette, $t } from '@primeng/themes';
 import Aura from '@primeng/themes/aura';
 import Lara from '@primeng/themes/lara';
 import Nora from '@primeng/themes/nora';
-import { PrimeNG } from 'primeng/config';
 import * as i3 from 'primeng/selectbutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
-import { OidcSecurityService, PublicEventsService, EventTypes, StsConfigHttpLoader } from 'angular-auth-oidc-client';
-import { filter, distinctUntilChanged, map, switchMap, catchError } from 'rxjs/operators';
 import { Tabs, TabList, Tab } from 'primeng/tabs';
 import * as i2$2 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
@@ -144,7 +145,11 @@ class MsgService {
         });
     }
     error(detail, summary = this.translate.instant('msgService.error'), life = this.lifetime) {
-        if (detail instanceof HttpErrorResponse) {
+        const validationMessage = this.extractValidationMessage(detail);
+        if (validationMessage) {
+            detail = validationMessage;
+        }
+        else if (detail instanceof HttpErrorResponse) {
             summary = `Error: ${detail.status} ${detail.statusText}`;
             detail = `${detail.name} \r\n ${detail.message}`;
         }
@@ -156,6 +161,10 @@ class MsgService {
         });
     }
     extractErrorMessage(error, fallback) {
+        const validationMessage = this.extractValidationMessage(error);
+        if (validationMessage) {
+            return validationMessage;
+        }
         if (typeof error === 'object' &&
             error &&
             'error' in error &&
@@ -170,6 +179,35 @@ class MsgService {
         }
         return fallback;
     }
+    extractValidationMessage(error) {
+        const responseError = this.getObjectProperty(error, 'error');
+        const validationErrors = this.getObjectProperty(responseError, 'errors') ?? this.getObjectProperty(error, 'errors');
+        if (!validationErrors) {
+            return null;
+        }
+        const messages = Object.entries(validationErrors)
+            .reduce((result, [field, value]) => [...result, ...this.toValidationMessages(field, value)], [])
+            .filter((message) => message.length > 0);
+        return messages.length > 0 ? messages.join('\n') : null;
+    }
+    toValidationMessages(field, value) {
+        if (Array.isArray(value)) {
+            return value
+                .filter((message) => typeof message === 'string')
+                .map((message) => `${field}: ${message}`);
+        }
+        if (typeof value === 'string') {
+            return [`${field}: ${value}`];
+        }
+        return [];
+    }
+    getObjectProperty(source, property) {
+        if (typeof source !== 'object' || source === null || !(property in source)) {
+            return null;
+        }
+        const value = source[property];
+        return typeof value === 'object' && value !== null ? value : null;
+    }
     errorFromException(error, fallback, summary = fallback, life = this.lifetime) {
         this.error(this.extractErrorMessage(error, fallback), summary, life);
     }
@@ -567,7 +605,219 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
+/**
+ * Service for managing translation loading in the application
+ */
+class L10nService {
+    constructor() {
+        this.loadedTranslations = new Set();
+        this.httpClient = inject(HttpClient$1);
+        this.translateService = inject(TranslateService);
+        this.primeNg = inject(PrimeNG);
+        this.layoutService = inject(LayoutService);
+    }
+    /**
+     * Loads translations for a specific component
+     * @param component - Name of the component to load translations for
+     */
+    loadComponentTranslations(component) {
+        const lang = this.translateService.currentLang;
+        this.loadTranslations(component, lang);
+    }
+    /**
+     * Gets the translated value of a key (or an array of keys)
+     * @returns the translated key, or an object of translated keys
+     */
+    get(key) {
+        this.loadComponentTranslations(key.split('.')[0]);
+        return this.translateService.get(key);
+    }
+    /**
+     * Internal method to load translations from JSON files
+     * @param component - Component or translation namespace
+     * @param lang - Language code to load translations for
+     */
+    loadTranslations(component, lang) {
+        const key = `${component}.${lang}`;
+        if (this.loadedTranslations.has(key)) {
+            return;
+        }
+        try {
+            this.httpClient.get(`./assets/i18n/${component}.${lang}.json`).subscribe((translations) => {
+                const current = this.translateService.translations[lang] || {};
+                this.translateService.setTranslation(lang, { ...current, ...translations }, true);
+                this.loadedTranslations.add(key);
+            });
+        }
+        catch (e) {
+            console.error(`No translations found for ${component}.${lang}.json`);
+            console.error(e);
+        }
+    }
+    /**
+     * Changes the lang currently used
+     */
+    use(selectedLanguage, key = null) {
+        if (key) {
+            this.get(key);
+        }
+        this.translateService.use(selectedLanguage);
+    }
+    init(languages) {
+        this.availableLanguages = languages;
+        this.translateService.addLangs(languages.map((x) => x.code));
+        const lang = this.layoutService.language() ? this.layoutService.language() : 'en';
+        this.translateService.setDefaultLang(lang);
+        this.translateService.use(lang).subscribe(() => {
+            this.loadComponentTranslations('app-info');
+            this.translateService.get('primeng').subscribe((res) => this.primeNg.setTranslation(res));
+        });
+    }
+    instant(key, interpolateParams) {
+        return this.translateService.instant(key, interpolateParams);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: L10nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: L10nService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: L10nService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class SecurityDataService extends BaseDataService {
+    getSecurity(controller, id) {
+        return this.sendRequest(this.baseUrl + `api/${controller}/get-security?id=${id}`);
+    }
+    saveSecurity(controller, request) {
+        return this.sendRequest(this.baseUrl + `api/${controller}/put-security`, 'PUT', request);
+    }
+    getRealmRoles() {
+        return this.sendRequest(this.baseUrl + `api/security/get-realm-roles`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SecurityDataService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SecurityDataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SecurityDataService, decorators: [{
+            type: Injectable
+        }] });
+
+class SecurityService {
+}
+/**
+ * SecurityService extends OidcSecurityService to manage authentication,
+ * token handling, and user role access in an Angular application.
+ *
+ * It provides helper methods for checking authentication, managing tokens,
+ * determining user roles, and performing logout and refresh operations.
+ */
+class KeycloakSecurityService extends OidcSecurityService {
+    /**
+     * Initializes service and subscribes to authentication events.
+     * When a 'NewAuthenticationResult' event is received, the `auth` method is called.
+     */
+    constructor() {
+        super();
+        /**
+         * Handles angular OIDC events.
+         */
+        this.publicEventsService = inject(PublicEventsService);
+        /**
+         * Stores the latest login response from checkAuth().
+         */
+        this.loginResponse = new BehaviorSubject(null);
+        /**
+         * Stores the decoded access token payload.
+         */
+        this.payload = new BehaviorSubject(null);
+        /**
+         * Stores user-specific data from the login response.
+         */
+        this.currentUser = new BehaviorSubject(null);
+        /**
+         * Emits access token updates from initial auth check, manual refresh,
+         * and library authentication events.
+         */
+        this.accessToken = new ReplaySubject(1);
+        this.publicEventsService
+            .registerForEvents()
+            .pipe(filter((event) => event.type === EventTypes.NewAuthenticationResult))
+            .subscribe(() => {
+            super.getAccessToken().subscribe(token => { this.accessToken.next(token); });
+            this.auth();
+        });
+    }
+    getCurrentUser() {
+        return this.currentUser.getValue();
+    }
+    getCurrentUser$() {
+        return this.currentUser.asObservable();
+    }
+    /**
+     * Returns the ID token for the sign-in.
+     * @returns A string with the id token.
+     */
+    getAccessToken(configId) {
+        return merge(super.getAccessToken(configId), this.accessToken.asObservable()).pipe(distinctUntilChanged());
+    }
+    /**
+     * Indicates whether the current user has the 'admin' role.
+     *
+     * @returns {boolean} True if the user is an admin, false otherwise.
+     */
+    isAdmin() {
+        return this.payload.getValue()?.realm_access?.roles?.includes('admin');
+    }
+    /**
+     * Initiates authentication check and updates login response, user data,
+     * and decoded token payload if authenticated.
+     */
+    auth() {
+        super.checkAuth().subscribe((_response) => {
+            this.loginResponse.next(_response);
+            this.currentUser.next(_response.userData);
+            this.getPayloadFromAccessToken().subscribe((_token) => {
+                this.payload.next(_token);
+            });
+        });
+    }
+    /**
+     * Performs logout and clears the local token payload.
+     *
+     * @param {string} [configId] Optional configuration ID for logout.
+     * @param {LogoutAuthOptions} [logoutAuthOptions] Optional logout options.
+     */
+    logout(configId, logoutAuthOptions) {
+        this.logoff(configId, logoutAuthOptions).subscribe((x) => this.payload.next(x));
+    }
+    /**
+     * Completes the BehaviorSubjects when the service is destroyed to avoid memory leaks.
+     */
+    ngOnDestroy() {
+        this.loginResponse.complete();
+        this.payload.complete();
+        this.currentUser.complete();
+    }
+    /**
+     * Checks whether the current access token is expired based on the 'exp' claim.
+     *
+     * @returns {Observable<boolean>} Observable that emits true if the token is expired.
+     */
+    isTokenExpired() {
+        return this.getPayloadFromAccessToken().pipe(map((payload) => {
+            return payload.exp < Math.floor(Date.now() / 1000);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KeycloakSecurityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KeycloakSecurityService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KeycloakSecurityService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 class BaseModuleComponent {
+    static { this.readRight = 'read'; }
+    static { this.editRight = 'edit'; }
+    static { this.deleteRight = 'delete'; }
     /**
      * Updates local settings and persists them to local storage.
      * @return {void}
@@ -615,12 +865,21 @@ class BaseModuleComponent {
     get isSecurity() {
         return this.topBarService.checkId('security');
     }
+    /**
+     * Gets an instant translation for a key or an array of keys.
+     */
+    t(key, interpolateParams) {
+        return this.translateService.instant(key, interpolateParams);
+    }
     /**
      * Initializes the component and subscribes to local settings updates.
      */
     constructor() {
         this.isInitialized = false;
         this.moduleInstanceReloadPromise = Promise.resolve();
+        this.destroyRef = inject(DestroyRef);
+        this.securityDataService = inject(SecurityDataService);
+        this.securityService = inject(SecurityService);
         /**
          * Provide access to app settings
          */
@@ -683,6 +942,11 @@ class BaseModuleComponent {
          * @type {Subject<TLocalStoreSettings>}
          */
         this.localSettingsUpdate = new Subject();
+        this.l10nService = inject(L10nService);
+        this.canRead = false;
+        this.canEdit = false;
+        this.canDelete = false;
+        this.securityRightsLoaded = false;
         /**
          * A unique numerical identifier for the module.
          * @type {number}
@@ -704,6 +968,7 @@ class BaseModuleComponent {
         });
         this.subscriptions.push(this.route.url.subscribe((url) => {
             this.controller = url[0].path;
+            this.l10n$ = this.l10nService.get(this.controller);
         }));
         this.subscriptions.push(this.route.paramMap.subscribe((params) => {
             const routeId = params.get('id');
@@ -725,6 +990,7 @@ class BaseModuleComponent {
     ngOnDestroy() {
         this.topBarService.setTopBarItems([]);
         this.topBarService.activeId = this.topBarItems[0].id;
+        this.rightsSubscription?.unsubscribe();
         this.subscriptions.forEach((s) => s.unsubscribe());
     }
     /**
@@ -782,10 +1048,58 @@ 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() {
+    }
+    /**
+     * Starts watching current token roles and maps them to module instance security settings.
+     */
+    watchSecurityRights(controller = this.controller, id = this.id) {
+        this.rightsSubscription?.unsubscribe();
+        this.resetRightsState();
+        if (!controller || id == null) {
+            return;
+        }
+        this.rightsSubscription = this.securityService.payload
+            .pipe(switchMap((payload) => from(this.securityDataService.getSecurity(controller, id)).pipe(map((securitySettings) => ({ payload, securitySettings })))), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: ({ payload, securitySettings }) => {
+                const roles = payload?.realm_access?.roles ?? [];
+                this.updateRightsState(roles, securitySettings);
+            },
+            error: (error) => {
+                this.securityRightsLoaded = true;
+                console.error('Не удалось загрузить права', error);
+                this.onSecurityRightsChange();
+            }
+        });
+    }
+    resetRightsState() {
+        this.canRead = false;
+        this.canEdit = false;
+        this.canDelete = false;
+        this.securityRightsLoaded = false;
+    }
+    updateRightsState(roles, securitySettings) {
+        this.canRead = this.hasSecurityRight(roles, securitySettings, BaseModuleComponent.readRight);
+        this.canEdit = this.hasSecurityRight(roles, securitySettings, BaseModuleComponent.editRight);
+        this.canDelete = this.hasSecurityRight(roles, securitySettings, BaseModuleComponent.deleteRight);
+        this.securityRightsLoaded = true;
+        this.onSecurityRightsChange();
+    }
+    hasSecurityRight(roles, securitySettings, code) {
+        return securitySettings
+            .find((security) => security.code === code)
+            ?.roles?.some((role) => roles.includes(role)) ?? false;
+    }
     async reloadModuleInstance() {
         this.moduleInstanceReloadPromise = this.moduleInstanceReloadPromise.then(async () => {
             await this.getSettings();
+            this.watchSecurityRights();
             await this.onModuleInstanceChange();
         });
         await this.moduleInstanceReloadPromise;
@@ -798,48 +1112,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ standalone: true, template: '' }]
         }], ctorParameters: () => [] });
 
-class SecurityDataService extends BaseDataService {
-    getSecurity(controller, id) {
-        return this.sendRequest(this.baseUrl + `api/${controller}/get-security?id=${id}`);
-    }
-    saveSecurity(controller, request) {
-        return this.sendRequest(this.baseUrl + `api/${controller}/put-security`, 'PUT', request);
-    }
-    getRealmRoles() {
-        return this.sendRequest(this.baseUrl + `api/security/get-realm-roles`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SecurityDataService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SecurityDataService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SecurityDataService, decorators: [{
-            type: Injectable
-        }] });
-
 class SecurityComponent {
     constructor() {
         this.msgService = inject(MsgService);
         this.dataService = inject(SecurityDataService);
         this.translateService = inject(TranslateService);
+        this.securityLoadToken = 0;
+        this.securityData = [];
         this.roles = [];
     }
     ngOnDestroy() {
         // on destroy
     }
-    ngOnInit() {
-        if (!this.id) {
-            this.msgService.error('Module id not passed!');
-        }
-        if (!this.controller) {
-            this.msgService.error('Controller not passed!');
+    ngOnChanges(changes) {
+        if (changes['id'] || changes['controller']) {
+            void this.loadSecurity();
         }
-        this.dataService.getSecurity(this.controller, this.id).then((result) => {
-            this.securityData = result;
-        }, (error) => this.msgService.error(error));
+    }
+    ngOnInit() {
         this.dataService.getRealmRoles().then((result) => {
             this.roles = result;
         }, (error) => this.msgService.error(error));
     }
     saveClick() {
+        if (this.id == null) {
+            this.msgService.error('Module id not passed!');
+            return;
+        }
+        if (!this.controller) {
+            this.msgService.error('Controller not passed!');
+            return;
+        }
         const request = {
             id: this.id,
             securities: this.securityData
@@ -850,11 +1153,31 @@ class SecurityComponent {
     }
     saveKeyDown($event) {
         if ($event.key === 'Enter' || $event.key === 'Space') {
-            this.saveKeyDown(null);
+            this.saveClick();
+        }
+    }
+    async loadSecurity() {
+        const loadToken = ++this.securityLoadToken;
+        const controller = this.controller;
+        const id = this.id;
+        this.securityData = [];
+        if (!controller || id == null) {
+            return;
+        }
+        try {
+            const result = await this.dataService.getSecurity(controller, id);
+            if (loadToken === this.securityLoadToken) {
+                this.securityData = result;
+            }
+        }
+        catch (error) {
+            if (loadToken === this.securityLoadToken) {
+                this.msgService.error(error);
+            }
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SecurityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SecurityComponent, isStandalone: true, selector: "security", inputs: { id: "id", controller: "controller" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SecurityComponent, isStandalone: true, selector: "security", inputs: { id: "id", controller: "controller" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="flex flex-col md:flex-row gap-8">
       <div class="md:w-1/2">
         <div class="card flex flex-col gap-4">
@@ -869,7 +1192,7 @@ class SecurityComponent {
               </label>
               <p-multiSelect
                 id="oip-security-multiselect-{{ item.name }}"
-                placeholder="Select roles"
+                placeholder="{{ 'securityComponent.selectRoles' | translate }}"
                 [maxSelectedLabels]="10"
                 [options]="roles"
                 [(ngModel)]="item.roles" />
@@ -907,7 +1230,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               </label>
               <p-multiSelect
                 id="oip-security-multiselect-{{ item.name }}"
-                placeholder="Select roles"
+                placeholder="{{ 'securityComponent.selectRoles' | translate }}"
                 [maxSelectedLabels]="10"
                 [options]="roles"
                 [(ngModel)]="item.roles" />
@@ -934,11 +1257,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
-const presets = {
-    Aura,
-    Lara,
-    Nora
-};
+const APP_THEME_PRESETS = new InjectionToken('APP_THEME_PRESETS', {
+    factory: () => []
+});
+const APP_THEME_PRESETS_MERGE_MODE = new InjectionToken('APP_THEME_PRESETS_MERGE_MODE', {
+    factory: () => 'mergeWithDefaults'
+});
+
+const DEFAULT_THEME_PRESETS = [
+    { id: 'Aura', label: 'Aura', preset: Aura },
+    { id: 'Lara', label: 'Lara', preset: Lara },
+    { id: 'Nora', label: 'Nora', preset: Nora }
+];
+const PRIMARY_COLORS = [
+    'emerald',
+    'green',
+    'lime',
+    'orange',
+    'amber',
+    'yellow',
+    'teal',
+    'cyan',
+    'sky',
+    'blue',
+    'indigo',
+    'violet',
+    'purple',
+    'fuchsia',
+    'pink',
+    'rose'
+];
 class AppConfiguratorComponent {
     constructor() {
         this.router = inject(Router);
@@ -946,7 +1294,14 @@ class AppConfiguratorComponent {
         this.layoutService = inject(LayoutService);
         this.platformId = inject(PLATFORM_ID);
         this.primeng = inject(PrimeNG);
-        this.presets = Object.keys(presets);
+        this.injectedThemePresets = inject(APP_THEME_PRESETS);
+        this.themePresetMergeMode = inject(APP_THEME_PRESETS_MERGE_MODE);
+        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.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 = [
             { label: 'Static', value: 'static' },
@@ -1097,43 +1452,23 @@ class AppConfiguratorComponent {
         this.selectedPreset = computed(() => this.layoutService.layoutConfig().preset, ...(ngDevMode ? [{ debugName: "selectedPreset" }] : []));
         this.menuMode = computed(() => this.layoutService.layoutConfig().menuMode, ...(ngDevMode ? [{ debugName: "menuMode" }] : []));
         this.primaryColors = computed(() => {
-            const presetPalette = presets[this.layoutService.layoutConfig().preset].primitive;
-            const colors = [
-                'emerald',
-                'green',
-                'lime',
-                'orange',
-                'amber',
-                'yellow',
-                'teal',
-                'cyan',
-                'sky',
-                'blue',
-                'indigo',
-                'violet',
-                'purple',
-                'fuchsia',
-                'pink',
-                'rose'
-            ];
-            const palettes = [{ name: 'noir', palette: {} }];
-            colors.forEach((color) => {
-                palettes.push({
-                    name: color,
-                    palette: presetPalette?.[color]
-                });
-            });
-            return palettes;
+            const activeThemePreset = this.getThemeById(this.layoutService.layoutConfig().preset);
+            return this.getPrimaryColorOptions(activeThemePreset);
         }, ...(ngDevMode ? [{ debugName: "primaryColors" }] : []));
+        this.surfaceColors = computed(() => {
+            const activeThemePreset = this.getThemeById(this.layoutService.layoutConfig().preset);
+            return this.getSurfaceColorOptions(activeThemePreset);
+        }, ...(ngDevMode ? [{ debugName: "surfaceColors" }] : []));
     }
     ngOnInit() {
         if (isPlatformBrowser(this.platformId)) {
-            this.onPresetChange(this.layoutService.layoutConfig().preset);
+            const presetId = this.ensureValidThemeId(this.layoutService.layoutConfig().preset);
+            this.onPresetChange(presetId);
         }
     }
     getPresetExt() {
         const color = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
-        const preset = this.layoutService.layoutConfig().preset;
+        const preset = this.getThemeById(this.layoutService.layoutConfig().preset).id;
         if (color.name === 'noir') {
             return {
                 semantic: {
@@ -1258,307 +1593,259 @@ class AppConfiguratorComponent {
             };
         }
     }
-    updateColors(event, type, color) {
-        if (type === 'primary') {
-            this.layoutService.layoutConfig.update((state) => ({
-                ...state,
-                primary: color.name
-            }));
-        }
-        else if (type === 'surface') {
-            this.layoutService.layoutConfig.update((state) => ({
-                ...state,
-                surface: color.name
-            }));
-        }
-        this.applyTheme(type, color);
-        event.stopPropagation();
-    }
-    applyTheme(type, color) {
-        if (type === 'primary') {
-            updatePreset(this.getPresetExt());
-        }
-        else if (type === 'surface') {
-            updateSurfacePalette(color.palette);
+    getThemePresets() {
+        const source = this.themePresetMergeMode === 'replaceDefaults' ? [] : [...DEFAULT_THEME_PRESETS];
+        const result = [...source];
+        for (const theme of this.injectedThemePresets ?? []) {
+            if (!theme?.id || !theme?.preset) {
+                continue;
+            }
+            const index = result.findIndex((item) => item.id === theme.id);
+            if (index >= 0) {
+                result[index] = theme;
+            }
+            else {
+                result.push(theme);
+            }
         }
+        return result;
     }
-    onPresetChange(event) {
-        this.layoutService.layoutConfig.update((state) => ({
-            ...state,
-            preset: event
-        }));
-        const preset = presets[event];
-        const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor())?.palette;
-        $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
-    }
-    onMenuModeChange(event) {
-        this.layoutService.layoutConfig.update((prev) => ({
-            ...prev,
-            menuMode: event
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AppConfiguratorComponent, isStandalone: true, selector: "app-configurator", host: { classAttribute: "hidden absolute top-[3.25rem] right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" }, ngImport: i0, template: `
-    <div class="flex flex-col gap-4">
-      <div>
-        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.primary' | translate }}</span>
-        <div class="pt-2 flex gap-2 flex-wrap justify-start">
-          @for (primaryColor of primaryColors(); track primaryColor.name) {
-            <button
-              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-              id="oip-app-configurator-primary-color-{{ primaryColor.name }}"
-              type="button"
-              [ngClass]="{
-                'outline-primary': primaryColor.name === selectedPrimaryColor()
-              }"
-              [style]="{
-                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-              }"
-              [title]="primaryColor.name"
-              (click)="updateColors($event, 'primary', primaryColor)"></button>
-          }
-        </div>
-      </div>
-      <div>
-        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.surface' | translate }}</span>
-        <div class="pt-2 flex gap-2 flex-wrap justify-start">
-          @for (surface of surfaces; track surface.name) {
-            <button
-              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-              id="oip-app-configurator-surface-color-{{ surface.name }}"
-              type="button"
-              [ngClass]="{
-                'outline-primary': selectedSurfaceColor()
-                  ? selectedSurfaceColor() === surface.name
-                  : layoutService.layoutConfig().darkTheme
-                    ? surface.name === 'zinc'
-                    : surface.name === 'slate'
-              }"
-              [style]="{
-                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-              }"
-              [title]="surface.name"
-              (click)="updateColors($event, 'surface', surface)"></button>
-          }
-        </div>
-      </div>
-      <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.presets' | translate }}</span>
-        <p-selectButton
-          id="oip-app-configurator-preset-select-button"
-          size="small"
-          [allowEmpty]="false"
-          [ngModel]="selectedPreset()"
-          [options]="presets"
-          (ngModelChange)="onPresetChange($event)" />
-      </div>
-      @if (showMenuModeButton()) {
-        <div class="flex flex-col gap-2">
-          <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.menuMode' | translate }}</span>
-          <p-selectButton
-            id="oip-app-configurator-menu-mode-select-button"
-            size="small"
-            [allowEmpty]="false"
-            [ngModel]="menuMode()"
-            [options]="menuModeOptions"
-            (ngModelChange)="onMenuModeChange($event)" />
-        </div>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppConfiguratorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'app-configurator',
-                    standalone: true,
-                    imports: [CommonModule, FormsModule, SelectButtonModule, TranslatePipe],
-                    template: `
-    <div class="flex flex-col gap-4">
-      <div>
-        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.primary' | translate }}</span>
-        <div class="pt-2 flex gap-2 flex-wrap justify-start">
-          @for (primaryColor of primaryColors(); track primaryColor.name) {
-            <button
-              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-              id="oip-app-configurator-primary-color-{{ primaryColor.name }}"
-              type="button"
-              [ngClass]="{
-                'outline-primary': primaryColor.name === selectedPrimaryColor()
-              }"
-              [style]="{
-                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
-              }"
-              [title]="primaryColor.name"
-              (click)="updateColors($event, 'primary', primaryColor)"></button>
-          }
-        </div>
-      </div>
-      <div>
-        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.surface' | translate }}</span>
-        <div class="pt-2 flex gap-2 flex-wrap justify-start">
-          @for (surface of surfaces; track surface.name) {
-            <button
-              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
-              id="oip-app-configurator-surface-color-{{ surface.name }}"
-              type="button"
-              [ngClass]="{
-                'outline-primary': selectedSurfaceColor()
-                  ? selectedSurfaceColor() === surface.name
-                  : layoutService.layoutConfig().darkTheme
-                    ? surface.name === 'zinc'
-                    : surface.name === 'slate'
-              }"
-              [style]="{
-                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
-              }"
-              [title]="surface.name"
-              (click)="updateColors($event, 'surface', surface)"></button>
-          }
-        </div>
-      </div>
-      <div class="flex flex-col gap-2">
-        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.presets' | translate }}</span>
-        <p-selectButton
-          id="oip-app-configurator-preset-select-button"
-          size="small"
-          [allowEmpty]="false"
-          [ngModel]="selectedPreset()"
-          [options]="presets"
-          (ngModelChange)="onPresetChange($event)" />
-      </div>
-      @if (showMenuModeButton()) {
-        <div class="flex flex-col gap-2">
-          <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.menuMode' | translate }}</span>
-          <p-selectButton
-            id="oip-app-configurator-menu-mode-select-button"
-            size="small"
-            [allowEmpty]="false"
-            [ngModel]="menuMode()"
-            [options]="menuModeOptions"
-            (ngModelChange)="onMenuModeChange($event)" />
-        </div>
-      }
-    </div>
-  `,
-                    host: {
-                        class: 'hidden absolute top-[3.25rem] right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]'
-                    }
-                }]
-        }] });
-
-class SecurityService {
-}
-/**
- * SecurityService extends OidcSecurityService to manage authentication,
- * token handling, and user role access in an Angular application.
- *
- * It provides helper methods for checking authentication, managing tokens,
- * determining user roles, and performing logout and refresh operations.
- */
-class KeycloakSecurityService extends OidcSecurityService {
-    /**
-     * Initializes service and subscribes to authentication events.
-     * When a 'NewAuthenticationResult' event is received, the `auth` method is called.
-     */
-    constructor() {
-        super();
-        /**
-         * Handles angular OIDC events.
-         */
-        this.publicEventsService = inject(PublicEventsService);
-        /**
-         * Stores the latest login response from checkAuth().
-         */
-        this.loginResponse = new BehaviorSubject(null);
-        /**
-         * Stores the decoded access token payload.
-         */
-        this.payload = new BehaviorSubject(null);
-        /**
-         * Stores user-specific data from the login response.
-         */
-        this.currentUser = new BehaviorSubject(null);
-        /**
-         * Emits access token updates from initial auth check, manual refresh,
-         * and library authentication events.
-         */
-        this.accessToken = new ReplaySubject(1);
-        this.publicEventsService
-            .registerForEvents()
-            .pipe(filter((event) => event.type === EventTypes.NewAuthenticationResult))
-            .subscribe(() => {
-            super.getAccessToken().subscribe(token => { this.accessToken.next(token); });
-            this.auth();
-        });
-    }
-    getCurrentUser() {
-        return this.currentUser.getValue();
-    }
-    getCurrentUser$() {
-        return this.currentUser.asObservable();
-    }
-    /**
-     * Returns the ID token for the sign-in.
-     * @returns A string with the id token.
-     */
-    getAccessToken(configId) {
-        return merge(super.getAccessToken(configId), this.accessToken.asObservable()).pipe(distinctUntilChanged());
-    }
-    /**
-     * Indicates whether the current user has the 'admin' role.
-     *
-     * @returns {boolean} True if the user is an admin, false otherwise.
-     */
-    isAdmin() {
-        return this.payload.getValue()?.realm_access?.roles?.includes('admin');
-    }
-    /**
-     * Initiates authentication check and updates login response, user data,
-     * and decoded token payload if authenticated.
-     */
-    auth() {
-        super.checkAuth().subscribe((_response) => {
-            this.loginResponse.next(_response);
-            this.currentUser.next(_response.userData);
-            this.getPayloadFromAccessToken().subscribe((_token) => {
-                this.payload.next(_token);
+    getThemeById(themeId) {
+        return this.themePresetsMap.get(themeId ?? '') ?? this.defaultThemePreset;
+    }
+    getPrimaryColorOptions(activeThemePreset) {
+        if (activeThemePreset.primaryColors) {
+            return Object.entries(activeThemePreset.primaryColors)
+                .filter((entry) => Boolean(entry[1]))
+                .map(([name, palette]) => ({ name, palette }));
+        }
+        const presetPalette = (activeThemePreset.preset.primitive ?? {});
+        const palettes = [{ name: 'noir', palette: {} }];
+        PRIMARY_COLORS.forEach((color) => {
+            palettes.push({
+                name: color,
+                palette: presetPalette[color] ?? this.fallbackPrimaryColors[color]
             });
         });
+        return palettes;
     }
-    /**
-     * Performs logout and clears the local token payload.
-     *
-     * @param {string} [configId] Optional configuration ID for logout.
-     * @param {LogoutAuthOptions} [logoutAuthOptions] Optional logout options.
-     */
-    logout(configId, logoutAuthOptions) {
-        this.logoff(configId, logoutAuthOptions).subscribe((x) => this.payload.next(x));
+    getSurfaceColorOptions(activeThemePreset) {
+        if (activeThemePreset.surfaceColors) {
+            return Object.entries(activeThemePreset.surfaceColors)
+                .filter((entry) => Boolean(entry[1]))
+                .map(([name, palette]) => ({ name, palette }));
+        }
+        return this.surfaces;
     }
-    /**
-     * Completes the BehaviorSubjects when the service is destroyed to avoid memory leaks.
-     */
-    ngOnDestroy() {
-        this.loginResponse.complete();
-        this.payload.complete();
-        this.currentUser.complete();
+    ensureValidThemeId(themeId) {
+        if (themeId && this.themePresetsMap.has(themeId)) {
+            return themeId;
+        }
+        if (themeId && isPlatformBrowser(this.platformId)) {
+            console.warn(`[AppConfigurator] Unknown theme preset "${themeId}", fallback to "${this.defaultThemePreset.id}".`);
+        }
+        return this.defaultThemePreset.id;
     }
-    /**
-     * Checks whether the current access token is expired based on the 'exp' claim.
-     *
-     * @returns {Observable<boolean>} Observable that emits true if the token is expired.
-     */
-    isTokenExpired() {
-        return this.getPayloadFromAccessToken().pipe(map((payload) => {
-            return payload.exp < Math.floor(Date.now() / 1000);
+    updateColors(event, type, color) {
+        if (type === 'primary') {
+            this.layoutService.layoutConfig.update((state) => ({
+                ...state,
+                primary: color.name
+            }));
+        }
+        else if (type === 'surface') {
+            this.layoutService.layoutConfig.update((state) => ({
+                ...state,
+                surface: color.name
+            }));
+        }
+        this.applyTheme(type, color);
+        event.stopPropagation();
+    }
+    applyTheme(type, color) {
+        if (type === 'primary') {
+            updatePreset(this.getPresetExt());
+        }
+        else if (type === 'surface') {
+            updateSurfacePalette(color.palette);
+        }
+    }
+    onPresetChange(event) {
+        const nextThemeId = this.ensureValidThemeId(event);
+        const nextTheme = this.getThemeById(nextThemeId);
+        const primaryColors = this.getPrimaryColorOptions(nextTheme);
+        const surfaceColors = this.getSurfaceColorOptions(nextTheme);
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            preset: nextThemeId,
+            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
         }));
+        const preset = nextTheme.preset;
+        const surfacePalette = this.surfaceColors().find((s) => s.name === this.selectedSurfaceColor())?.palette;
+        $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KeycloakSecurityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KeycloakSecurityService }); }
+    onMenuModeChange(event) {
+        this.layoutService.layoutConfig.update((prev) => ({
+            ...prev,
+            menuMode: event
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AppConfiguratorComponent, isStandalone: true, selector: "app-configurator", host: { classAttribute: "hidden absolute top-[3.25rem] right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]" }, ngImport: i0, template: `
+    <div class="flex flex-col gap-4">
+      <div>
+        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.primary' | translate }}</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (primaryColor of primaryColors(); track primaryColor.name) {
+            <button
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+              id="oip-app-configurator-primary-color-{{ primaryColor.name }}"
+              type="button"
+              [ngClass]="{
+                'outline-primary': primaryColor.name === selectedPrimaryColor()
+              }"
+              [style]="{
+                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+              }"
+              [title]="primaryColor.name"
+              (click)="updateColors($event, 'primary', primaryColor)"></button>
+          }
+        </div>
+      </div>
+      <div>
+        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.surface' | translate }}</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (surface of surfaceColors(); track surface.name) {
+            <button
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+              id="oip-app-configurator-surface-color-{{ surface.name }}"
+              type="button"
+              [ngClass]="{
+                'outline-primary': selectedSurfaceColor()
+                  ? selectedSurfaceColor() === surface.name
+                  : layoutService.layoutConfig().darkTheme
+                    ? surface.name === 'zinc'
+                    : surface.name === 'slate'
+              }"
+              [style]="{
+                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
+              }"
+              [title]="surface.name"
+              (click)="updateColors($event, 'surface', surface)"></button>
+          }
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.presets' | translate }}</span>
+        <p-selectButton
+          id="oip-app-configurator-preset-select-button"
+          size="small"
+          [allowEmpty]="false"
+          [ngModel]="selectedPreset()"
+          [options]="presets"
+          optionLabel="label"
+          optionValue="value"
+          (ngModelChange)="onPresetChange($event)" />
+      </div>
+      @if (showMenuModeButton()) {
+        <div class="flex flex-col gap-2">
+          <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.menuMode' | translate }}</span>
+          <p-selectButton
+            id="oip-app-configurator-menu-mode-select-button"
+            size="small"
+            [allowEmpty]="false"
+            [ngModel]="menuMode()"
+            [options]="menuModeOptions"
+            (ngModelChange)="onMenuModeChange($event)" />
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KeycloakSecurityService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppConfiguratorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-configurator',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, SelectButtonModule, TranslatePipe],
+                    template: `
+    <div class="flex flex-col gap-4">
+      <div>
+        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.primary' | translate }}</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (primaryColor of primaryColors(); track primaryColor.name) {
+            <button
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+              id="oip-app-configurator-primary-color-{{ primaryColor.name }}"
+              type="button"
+              [ngClass]="{
+                'outline-primary': primaryColor.name === selectedPrimaryColor()
+              }"
+              [style]="{
+                'background-color': primaryColor?.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette?.['500']
+              }"
+              [title]="primaryColor.name"
+              (click)="updateColors($event, 'primary', primaryColor)"></button>
+          }
+        </div>
+      </div>
+      <div>
+        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.surface' | translate }}</span>
+        <div class="pt-2 flex gap-2 flex-wrap justify-start">
+          @for (surface of surfaceColors(); track surface.name) {
+            <button
+              class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
+              id="oip-app-configurator-surface-color-{{ surface.name }}"
+              type="button"
+              [ngClass]="{
+                'outline-primary': selectedSurfaceColor()
+                  ? selectedSurfaceColor() === surface.name
+                  : layoutService.layoutConfig().darkTheme
+                    ? surface.name === 'zinc'
+                    : surface.name === 'slate'
+              }"
+              [style]="{
+                'background-color': surface?.name === 'noir' ? 'var(--text-color)' : surface?.palette?.['500']
+              }"
+              [title]="surface.name"
+              (click)="updateColors($event, 'surface', surface)"></button>
+          }
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.presets' | translate }}</span>
+        <p-selectButton
+          id="oip-app-configurator-preset-select-button"
+          size="small"
+          [allowEmpty]="false"
+          [ngModel]="selectedPreset()"
+          [options]="presets"
+          optionLabel="label"
+          optionValue="value"
+          (ngModelChange)="onPresetChange($event)" />
+      </div>
+      @if (showMenuModeButton()) {
+        <div class="flex flex-col gap-2">
+          <span class="text-sm text-muted-color font-semibold">{{ 'app-configurator.menuMode' | translate }}</span>
+          <p-selectButton
+            id="oip-app-configurator-menu-mode-select-button"
+            size="small"
+            [allowEmpty]="false"
+            [ngModel]="menuMode()"
+            [options]="menuModeOptions"
+            (ngModelChange)="onMenuModeChange($event)" />
+        </div>
+      }
+    </div>
+  `,
+                    host: {
+                        class: 'hidden absolute top-[3.25rem] right-0 w-72 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]'
+                    }
+                }]
+        }] });
 
 /**
  * UserService is responsible for retrieving and handling user-related data,
@@ -2011,18 +2298,15 @@ class HttpClient {
         this.layoutService = inject(LayoutService);
         this.baseUrl = "";
         this.securityData = null;
-        this.securityWorker = (securityData) => {
-            const headers = {
+        this.securityWorker = (securityData) => ({
+            headers: {
                 "Accept-language": this.layoutService.language()
                     ? this.layoutService.language()
                     : "en",
                 "X-Timezone": this.layoutService.timeZone(),
-            };
-            if (securityData) {
-                headers.Authorization = `Bearer ${securityData}`;
-            }
-            return { headers };
-        };
+                Authorization: `Bearer ${securityData}`,
+            },
+        });
         this.abortControllers = new Map();
         this.customFetch = (...fetchParams) => fetch(...fetchParams);
         this.baseApiParams = {
@@ -3442,85 +3726,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
-/**
- * Service for managing translation loading in the application
- */
-class L10nService {
-    constructor() {
-        this.loadedTranslations = new Set();
-        this.httpClient = inject(HttpClient$1);
-        this.translateService = inject(TranslateService);
-        this.primeNg = inject(PrimeNG);
-        this.layoutService = inject(LayoutService);
-    }
-    /**
-     * Loads translations for a specific component
-     * @param component - Name of the component to load translations for
-     */
-    loadComponentTranslations(component) {
-        const lang = this.translateService.currentLang;
-        this.loadTranslations(component, lang);
-    }
-    /**
-     * Gets the translated value of a key (or an array of keys)
-     * @returns the translated key, or an object of translated keys
-     */
-    get(key) {
-        this.loadComponentTranslations(key.split('.')[0]);
-        return this.translateService.get(key);
-    }
-    /**
-     * Internal method to load translations from JSON files
-     * @param component - Component or translation namespace
-     * @param lang - Language code to load translations for
-     */
-    loadTranslations(component, lang) {
-        const key = `${component}.${lang}`;
-        if (this.loadedTranslations.has(key)) {
-            return;
-        }
-        try {
-            this.httpClient.get(`./assets/i18n/${component}.${lang}.json`).subscribe((translations) => {
-                const current = this.translateService.translations[lang] || {};
-                this.translateService.setTranslation(lang, { ...current, ...translations }, true);
-                this.loadedTranslations.add(key);
-            });
-        }
-        catch (e) {
-            console.error(`No translations found for ${component}.${lang}.json`);
-            console.error(e);
-        }
-    }
-    /**
-     * Changes the lang currently used
-     */
-    use(selectedLanguage, key = null) {
-        if (key) {
-            this.get(key);
-        }
-        this.translateService.use(selectedLanguage);
-    }
-    init(languages) {
-        this.availableLanguages = languages;
-        this.translateService.addLangs(languages.map((x) => x.code));
-        const lang = this.layoutService.language() ? this.layoutService.language() : 'en';
-        this.translateService.setDefaultLang(lang);
-        this.translateService.use(lang).subscribe(() => {
-            this.loadComponentTranslations('app-info');
-            this.translateService.get('primeng').subscribe((res) => this.primeNg.setTranslation(res));
-        });
-    }
-    instant(key, interpolateParams) {
-        return this.translateService.instant(key, interpolateParams);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: L10nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: L10nService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: L10nService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 class NotfoundComponent {
     constructor(l10nService) {
         l10nService.get('notfound');
@@ -4048,7 +4253,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class DbMigrationComponent extends BaseModuleComponent {
     constructor() {
         super();
-        this.l10nService = inject(L10nService);
         this.l10nService.loadComponentTranslations('db-migration');
     }
     async ngOnInit() {
@@ -4073,84 +4277,84 @@ class DbMigrationComponent extends BaseModuleComponent {
         return this.baseDataService.sendRequest(`api/${this.controller}/apply-migration`, 'POST', request);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DbMigrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DbMigrationComponent, isStandalone: true, selector: "db-migration", providers: [ConfirmationService], usesInheritance: true, ngImport: i0, template: `
-    @if (isContent) {
-      <div class="card" style="height: 100%">
-        <p-confirmDialog />
-        <div>
-          <h5>{{ 'db-migration.migrationManager' | translate }}</h5>
-          <div class="flex flex-row gap-2">
-            <p-button
-              icon="pi pi-refresh"
-              severity="secondary"
-              tooltipPosition="bottom"
-              [outlined]="true"
-              [pTooltip]="'db-migration.actions.refresh' | translate"
-              (click)="refreshAction()" />
-            <p-button
-              icon="pi pi-filter-slash"
-              severity="secondary"
-              tooltipPosition="bottom"
-              [outlined]="true"
-              [pTooltip]="'db-migration.actions.cleanFilter' | translate"
-              (click)="dt.clear()" />
-          </div>
-          <div>
-            <p-table #dt dataKey="name" editMode="row" size="small" [scrollable]="true" [value]="data">
-              <ng-template let-columns pTemplate="header">
-                <tr>
-                  <th pSortableColumn="name" scope="col">
-                    {{ 'db-migration.columns.name' | translate }}
-                    <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>
-                  <th scope="col">{{ 'db-migration.columns.pending' | translate }}</th>
-                  <th scope="col"></th>
-                </tr>
-              </ng-template>
-
-              <ng-template #body let-columns="columns" let-editing="editing" let-ri="rowIndex" let-rowData>
-                <tr [pEditableRow]="rowData">
-                  <td>
-                    {{ rowData.name }}
-                  </td>
-                  <td>
-                    @if (rowData.applied) {
-                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"> </p-button>
-                    }
-                  </td>
-                  <td>
-                    @if (rowData.exist) {
-                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true" />
-                    }
-                  </td>
-                  <td>
-                    @if (rowData.pending) {
-                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"></p-button>
-                    }
-                  </td>
-                  <td>
-                    <p-button
-                      icon="pi pi-bolt"
-                      pCancelEditableRow
-                      pTooltip="{{ 'db-migration.actions.applyMigration' | translate }}"
-                      severity="secondary"
-                      tooltipPosition="left"
-                      [rounded]="true"
-                      [text]="true"
-                      (click)="applyMigration(rowData)">
-                    </p-button>
-                  </td>
-                </tr>
-              </ng-template>
-            </p-table>
-          </div>
-        </div>
-      </div>
-    } @else if (isSecurity) {
-      <security [controller]="controller" [id]="id" />
-    }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DbMigrationComponent, isStandalone: true, selector: "db-migration", providers: [ConfirmationService], usesInheritance: true, ngImport: i0, template: `
+    @if (isContent) {
+      <div class="card" style="height: 100%">
+        <p-confirmDialog/>
+        <div>
+          <h5>{{ 'db-migration.migrationManager' | translate }}</h5>
+          <div class="flex flex-row gap-2">
+            <p-button
+              icon="pi pi-refresh"
+              severity="secondary"
+              tooltipPosition="bottom"
+              [outlined]="true"
+              [pTooltip]="'db-migration.actions.refresh' | translate"
+              (click)="refreshAction()"/>
+            <p-button
+              icon="pi pi-filter-slash"
+              severity="secondary"
+              tooltipPosition="bottom"
+              [outlined]="true"
+              [pTooltip]="'db-migration.actions.cleanFilter' | translate"
+              (click)="dt.clear()"/>
+          </div>
+          <div>
+            <p-table #dt dataKey="name" editMode="row" size="small" [scrollable]="true" [value]="data">
+              <ng-template let-columns pTemplate="header">
+                <tr>
+                  <th pSortableColumn="name" scope="col">
+                    {{ 'db-migration.columns.name' | translate }}
+                    <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>
+                  <th scope="col">{{ 'db-migration.columns.pending' | translate }}</th>
+                  <th scope="col"></th>
+                </tr>
+              </ng-template>
+
+              <ng-template #body let-columns="columns" let-editing="editing" let-ri="rowIndex" let-rowData>
+                <tr [pEditableRow]="rowData">
+                  <td>
+                    {{ rowData.name }}
+                  </td>
+                  <td>
+                    @if (rowData.applied) {
+                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"></p-button>
+                    }
+                  </td>
+                  <td>
+                    @if (rowData.exist) {
+                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"/>
+                    }
+                  </td>
+                  <td>
+                    @if (rowData.pending) {
+                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"></p-button>
+                    }
+                  </td>
+                  <td>
+                    <p-button
+                      icon="pi pi-bolt"
+                      pCancelEditableRow
+                      pTooltip="{{ 'db-migration.actions.applyMigration' | translate }}"
+                      severity="secondary"
+                      tooltipPosition="left"
+                      [rounded]="true"
+                      [text]="true"
+                      (click)="applyMigration(rowData)">
+                    </p-button>
+                  </td>
+                </tr>
+              </ng-template>
+            </p-table>
+          </div>
+        </div>
+      </div>
+    } @else if (isSecurity) {
+      <security [controller]="controller" [id]="id"/>
+    }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$6.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$6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$6.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i1$6.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i1$6.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DbMigrationComponent, decorators: [{
@@ -4170,84 +4374,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         TranslatePipe
                     ],
                     selector: 'db-migration',
-                    template: `
-    @if (isContent) {
-      <div class="card" style="height: 100%">
-        <p-confirmDialog />
-        <div>
-          <h5>{{ 'db-migration.migrationManager' | translate }}</h5>
-          <div class="flex flex-row gap-2">
-            <p-button
-              icon="pi pi-refresh"
-              severity="secondary"
-              tooltipPosition="bottom"
-              [outlined]="true"
-              [pTooltip]="'db-migration.actions.refresh' | translate"
-              (click)="refreshAction()" />
-            <p-button
-              icon="pi pi-filter-slash"
-              severity="secondary"
-              tooltipPosition="bottom"
-              [outlined]="true"
-              [pTooltip]="'db-migration.actions.cleanFilter' | translate"
-              (click)="dt.clear()" />
-          </div>
-          <div>
-            <p-table #dt dataKey="name" editMode="row" size="small" [scrollable]="true" [value]="data">
-              <ng-template let-columns pTemplate="header">
-                <tr>
-                  <th pSortableColumn="name" scope="col">
-                    {{ 'db-migration.columns.name' | translate }}
-                    <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>
-                  <th scope="col">{{ 'db-migration.columns.pending' | translate }}</th>
-                  <th scope="col"></th>
-                </tr>
-              </ng-template>
-
-              <ng-template #body let-columns="columns" let-editing="editing" let-ri="rowIndex" let-rowData>
-                <tr [pEditableRow]="rowData">
-                  <td>
-                    {{ rowData.name }}
-                  </td>
-                  <td>
-                    @if (rowData.applied) {
-                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"> </p-button>
-                    }
-                  </td>
-                  <td>
-                    @if (rowData.exist) {
-                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true" />
-                    }
-                  </td>
-                  <td>
-                    @if (rowData.pending) {
-                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"></p-button>
-                    }
-                  </td>
-                  <td>
-                    <p-button
-                      icon="pi pi-bolt"
-                      pCancelEditableRow
-                      pTooltip="{{ 'db-migration.actions.applyMigration' | translate }}"
-                      severity="secondary"
-                      tooltipPosition="left"
-                      [rounded]="true"
-                      [text]="true"
-                      (click)="applyMigration(rowData)">
-                    </p-button>
-                  </td>
-                </tr>
-              </ng-template>
-            </p-table>
-          </div>
-        </div>
-      </div>
-    } @else if (isSecurity) {
-      <security [controller]="controller" [id]="id" />
-    }
+                    template: `
+    @if (isContent) {
+      <div class="card" style="height: 100%">
+        <p-confirmDialog/>
+        <div>
+          <h5>{{ 'db-migration.migrationManager' | translate }}</h5>
+          <div class="flex flex-row gap-2">
+            <p-button
+              icon="pi pi-refresh"
+              severity="secondary"
+              tooltipPosition="bottom"
+              [outlined]="true"
+              [pTooltip]="'db-migration.actions.refresh' | translate"
+              (click)="refreshAction()"/>
+            <p-button
+              icon="pi pi-filter-slash"
+              severity="secondary"
+              tooltipPosition="bottom"
+              [outlined]="true"
+              [pTooltip]="'db-migration.actions.cleanFilter' | translate"
+              (click)="dt.clear()"/>
+          </div>
+          <div>
+            <p-table #dt dataKey="name" editMode="row" size="small" [scrollable]="true" [value]="data">
+              <ng-template let-columns pTemplate="header">
+                <tr>
+                  <th pSortableColumn="name" scope="col">
+                    {{ 'db-migration.columns.name' | translate }}
+                    <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>
+                  <th scope="col">{{ 'db-migration.columns.pending' | translate }}</th>
+                  <th scope="col"></th>
+                </tr>
+              </ng-template>
+
+              <ng-template #body let-columns="columns" let-editing="editing" let-ri="rowIndex" let-rowData>
+                <tr [pEditableRow]="rowData">
+                  <td>
+                    {{ rowData.name }}
+                  </td>
+                  <td>
+                    @if (rowData.applied) {
+                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"></p-button>
+                    }
+                  </td>
+                  <td>
+                    @if (rowData.exist) {
+                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"/>
+                    }
+                  </td>
+                  <td>
+                    @if (rowData.pending) {
+                      <p-button icon="pi pi-check" severity="success" [rounded]="true" [text]="true"></p-button>
+                    }
+                  </td>
+                  <td>
+                    <p-button
+                      icon="pi pi-bolt"
+                      pCancelEditableRow
+                      pTooltip="{{ 'db-migration.actions.applyMigration' | translate }}"
+                      severity="secondary"
+                      tooltipPosition="left"
+                      [rounded]="true"
+                      [text]="true"
+                      (click)="applyMigration(rowData)">
+                    </p-button>
+                  </td>
+                </tr>
+              </ng-template>
+            </p-table>
+          </div>
+        </div>
+      </div>
+    } @else if (isSecurity) {
+      <security [controller]="controller" [id]="id"/>
+    }
   `,
                     providers: [ConfirmationService]
                 }]
@@ -6060,6 +6264,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             type: Injectable
         }] });
 
+function provideAppThemes(themes, options) {
+    const mode = options?.mode ?? 'mergeWithDefaults';
+    return makeEnvironmentProviders([
+        { provide: APP_THEME_PRESETS, useValue: themes },
+        { provide: APP_THEME_PRESETS_MERGE_MODE, useValue: mode }
+    ]);
+}
+function mergeWithDefaults(themes) {
+    return provideAppThemes(themes, { mode: 'mergeWithDefaults' });
+}
+function replaceDefaults(themes) {
+    return provideAppThemes(themes, { mode: 'replaceDefaults' });
+}
+
 const langIntercept = (req, next) => {
     const layoutService = inject(LayoutService);
     const lang = layoutService.language() ? layoutService.language() : 'en';
@@ -6132,5 +6350,5 @@ const httpLoaderAuthFactory = (httpClient) => {
  * Generated bundle index. Do not edit.
  */
 
-export { AppConfiguratorComponent, AppFloatingConfiguratorComponent, AppLayoutComponent, AppModulesComponent, AppTopbar, AuthGuardService, BaseDataService, BaseModuleComponent, ConfigComponent, ContentType, DEFAULT_OIP_FRONTEND_CONFIG, DbMigrationComponent, DiscussionComponent, ErrorComponent, FooterComponent, HttpClient, KeycloakSecurityService, L10nService, LOGO_COMPONENT_TOKEN, LayoutService, LogoComponent, LogoService, MenuComponent, MenuService, MsgService, NotfoundComponent, NotificationService, OIP_FRONTEND_CONFIG, ProfileComponent, SecurePipe, SecurityComponent, SecurityDataService, SecurityService, SecurityStorageService, SidebarComponent, TableFilterService, TopBarService, UnauthorizedComponent, UserService, httpLoaderAuthFactory, langIntercept, provideLogoComponent };
+export { APP_THEME_PRESETS, APP_THEME_PRESETS_MERGE_MODE, AppConfiguratorComponent, AppFloatingConfiguratorComponent, AppLayoutComponent, AppModulesComponent, AppTopbar, AuthGuardService, BaseDataService, BaseModuleComponent, ConfigComponent, ContentType, DEFAULT_OIP_FRONTEND_CONFIG, DbMigrationComponent, DiscussionComponent, ErrorComponent, FooterComponent, HttpClient, KeycloakSecurityService, L10nService, LOGO_COMPONENT_TOKEN, LayoutService, LogoComponent, LogoService, MenuComponent, MenuService, MsgService, NotfoundComponent, NotificationService, OIP_FRONTEND_CONFIG, ProfileComponent, SecurePipe, SecurityComponent, SecurityDataService, SecurityService, SecurityStorageService, SidebarComponent, TableFilterService, TopBarService, UnauthorizedComponent, UserService, httpLoaderAuthFactory, langIntercept, mergeWithDefaults, provideAppThemes, provideLogoComponent, replaceDefaults };
 //# sourceMappingURL=oip-common.mjs.map