oip-common 0.1.7 → 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, makeEnvironmentProviders, 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" />
@@ -1524,119 +1847,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }] });
 
-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: () => [] });
-
 /**
  * UserService is responsible for retrieving and handling user-related data,
  * including the user's photo and short label for avatar display.
@@ -2088,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 = {
@@ -3519,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');
@@ -4125,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() {
@@ -4150,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: [{
@@ -4247,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]
                 }]