oip-common 0.0.3 → 0.0.5

package/fesm2022/oip-common.mjs

@@ -0,0 +1,4267 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, signal, effect, Component, Input, computed, PLATFORM_ID, HostBinding, EventEmitter, Output, ViewChild, Renderer2, Pipe } from '@angular/core';
+import * as i2$3 from 'primeng/api';
+import { MessageService, ConfirmationService, PrimeIcons, SharedModule } from 'primeng/api';
+import { HttpErrorResponse, HttpClient as HttpClient$1, HttpHeaders } from '@angular/common/http';
+import { TranslateService, TranslatePipe } 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, filter as filter$1, combineLatest, of, map as map$1, Observable } from 'rxjs';
+import { Title, DomSanitizer } from '@angular/platform-browser';
+import * as i1 from 'primeng/multiselect';
+import { MultiSelectModule } from 'primeng/multiselect';
+import * as i2 from 'primeng/tooltip';
+import { TooltipModule, Tooltip } from 'primeng/tooltip';
+import * as i1$1 from 'primeng/button';
+import { ButtonModule, Button } from 'primeng/button';
+import * as i5 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$2 from '@angular/common';
+import { isPlatformBrowser, CommonModule, NgIf, NgClass, NgFor } from '@angular/common';
+import * as i4 from 'primeng/styleclass';
+import { StyleClassModule } from 'primeng/styleclass';
+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, map, switchMap, catchError } from 'rxjs/operators';
+import { Tabs, TabList, Tab } from 'primeng/tabs';
+import * as i5$1 from 'primeng/avatar';
+import { AvatarModule } from 'primeng/avatar';
+import * as i1$4 from 'primeng/contextmenu';
+import { ContextMenuModule, ContextMenu } from 'primeng/contextmenu';
+import * as i2$1 from 'primeng/dialog';
+import { DialogModule } from 'primeng/dialog';
+import * as i3$2 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import * as i3$1 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import * as i4$1 from 'primeng/select';
+import { SelectModule, Select } from 'primeng/select';
+import * as i1$5 from 'primeng/fileupload';
+import { FileUploadModule } from 'primeng/fileupload';
+import { ImageModule } from 'primeng/image';
+import { Fluid } from 'primeng/fluid';
+import * as i1$6 from 'primeng/table';
+import { TableModule } from 'primeng/table';
+import * as i2$2 from 'primeng/toggleswitch';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import { TagModule, Tag } from 'primeng/tag';
+import { TextareaModule } from 'primeng/textarea';
+import * as i4$2 from 'primeng/toolbar';
+import { ToolbarModule } from 'primeng/toolbar';
+
+class TopBarService {
+    get availableTopBarItems() {
+        return this.topBarItems;
+    }
+    get activeTopBarItem() {
+        if (this._activeId === undefined) {
+            return undefined;
+        }
+        return this.topBarItems.find((topBarItem) => topBarItem.id === this._activeId);
+    }
+    get activeId() {
+        return this._activeId;
+    }
+    set activeId(value) {
+        this._activeId = value;
+        if (this.activeTopBarItem?.click)
+            this.activeTopBarItem.click();
+    }
+    constructor() {
+        this.topBarItems = [];
+    }
+    // Set tob bar items
+    setTopBarItems(items) {
+        this.topBarItems = items;
+    }
+    checkId(id) {
+        if (this.activeTopBarItem === undefined && id === 'content')
+            return true;
+        if (this.activeTopBarItem === undefined)
+            return false;
+        return this.activeTopBarItem.id == id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TopBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TopBarService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: TopBarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class MsgService {
+    constructor() {
+        this.messageService = inject(MessageService);
+        this.translate = inject(TranslateService);
+        this.lifetime = 2000;
+    }
+    add(msg) {
+        this.messageService.add(msg);
+    }
+    success(detail, summary = this.translate.instant('msgService.success'), life = this.lifetime) {
+        this.messageService.add({
+            severity: 'success',
+            summary: summary,
+            detail: detail,
+            life: life
+        });
+    }
+    info(detail, summary = this.translate.instant('msgService.info'), life = this.lifetime) {
+        this.messageService.add({
+            severity: 'info',
+            summary: summary,
+            detail: detail,
+            life: life
+        });
+    }
+    warn(detail, summary = this.translate.instant('msgService.warn'), life = this.lifetime) {
+        this.messageService.add({
+            severity: 'warn',
+            summary: summary,
+            detail: detail,
+            life: life
+        });
+    }
+    error(detail, summary = this.translate.instant('msgService.error'), life = this.lifetime) {
+        if (detail instanceof HttpErrorResponse) {
+            summary = `Error: ${detail.status} ${detail.statusText}`;
+            detail = `${detail.name} \r\n ${detail.message}`;
+        }
+        this.messageService.add({
+            severity: 'error',
+            summary: summary,
+            detail: detail.toString(),
+            life: life
+        });
+    }
+    contrast(detail, summary = this.translate.instant('msgService.error'), life = this.lifetime) {
+        this.messageService.add({
+            severity: 'contrast',
+            summary: summary,
+            detail: detail,
+            life: life
+        });
+    }
+    secondary(detail, summary = this.translate.instant('msgService.secondary'), life = this.lifetime) {
+        this.messageService.add({
+            severity: 'secondary',
+            summary: summary,
+            detail: detail,
+            life: life
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MsgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MsgService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MsgService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/**
+ * BaseDataService provides a unified interface for sending HTTP requests
+ * using Angular's HttpClient. It supports standard HTTP methods and automatic
+ * credential handling.
+ */
+class BaseDataService {
+    constructor() {
+        this.http = inject(HttpClient$1);
+    }
+    /**
+     * Gets the base URL of the application from the HTML <base> tag.
+     */
+    get baseUrl() {
+        return document.getElementsByTagName('base')[0].href;
+    }
+    /**
+     * Sends an HTTP request with the specified method and data.
+     *
+     * @template TResponse - Expected response type.
+     * @param url - The target URL for the HTTP request.
+     * @param method - The HTTP method to use (GET, PUT, POST, DELETE). Default is 'GET'.
+     * @param data - An object containing request parameters or payload.
+     * @returns A promise that resolves to the response of type TResponse.
+     */
+    sendRequest(url, method = 'GET', data = {}) {
+        const httpOptions = { withCredentials: true };
+        let result;
+        switch (method) {
+            case 'GET':
+                result = this.http.get(url, { params: data });
+                break;
+            case 'PUT':
+                result = this.http.put(url, data, httpOptions);
+                break;
+            case 'POST':
+                result = this.http.post(url, data, httpOptions);
+                break;
+            case 'DELETE':
+                result = this.http.request('DELETE', url, {
+                    body: data,
+                    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+                    withCredentials: true
+                });
+                break;
+        }
+        return lastValueFrom(result);
+    }
+    /**
+     * Sends a GET request and retrieves a response as a Blob.
+     *
+     * @param url - The target URL for the GET request.
+     * @returns A promise that resolves to a Object response.
+     */
+    getBlob(url) {
+        const httpOptions = {
+            responseType: 'blob',
+            withCredentials: true
+        };
+        const result = this.http.get(url, httpOptions);
+        return lastValueFrom(result);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: BaseDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: BaseDataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: BaseDataService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Service to manage the application title.
+ */
+class AppTitleService {
+    constructor() {
+        this.title = inject(Title);
+        this.titleSubject = new BehaviorSubject('');
+        this.title$ = this.titleSubject.asObservable();
+    }
+    /**
+     * Set the title of the current HTML document.
+     * @param newTitle
+     */
+    setTitle(newTitle) {
+        this.title.setTitle(newTitle);
+        this.titleSubject.next(newTitle);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppTitleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppTitleService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppTitleService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class BaseModuleComponent {
+    /**
+     * Updates local settings and persists them to local storage.
+     * @return {void}
+     */
+    onConfigUpdate() {
+        if (Object.keys(this.localSettings()).length > 0) {
+            this._localSettings = { ...this.localSettings() };
+            this.localSettingsUpdate.next(this._localSettings);
+            localStorage.setItem(`Instance_${this.id}`, JSON.stringify(this._localSettings));
+        }
+    }
+    getLocalStorageSettings() {
+        try {
+            const localStorageSettingsString = localStorage.getItem(`Instance_${this.id}`);
+            if (localStorageSettingsString != null) {
+                this.localSettings.set(JSON.parse(localStorageSettingsString));
+            }
+        }
+        catch (error) {
+            this.msgService.error(error, 'Error parsing layoutConfig:');
+            this.localSettings.set({});
+        }
+    }
+    /**
+     * Checks if the content ID is present.
+     * @returns {boolean} True if the content ID is present, false otherwise.
+     */
+    get isContent() {
+        return this.topBarService.checkId('content');
+    }
+    /**
+     * Checks if the settings ID is present.
+     * @returns {boolean} True if the settings ID is present, false otherwise.
+     */
+    get isSettings() {
+        return this.topBarService.checkId('settings');
+    }
+    /**
+     * Checks if the security ID is present.
+     * @returns {boolean} True if the security ID is present, false otherwise.
+     */
+    get isSecurity() {
+        return this.topBarService.checkId('security');
+    }
+    /**
+     * Initializes the component and subscribes to local settings updates.
+     */
+    constructor() {
+        /**
+         * Provides access to topbar related functionality, such as managing visibility and content.
+         * @type {TopBarService}
+         */
+        this.topBarService = inject(TopBarService);
+        /**
+         * Provides access to information about the current route.
+         * This includes route parameters, data, and the route's path.
+         */
+        this.route = inject(ActivatedRoute);
+        /**
+         * Provides access to messaging services.
+         */
+        this.msgService = inject(MsgService);
+        /**
+         * Provides access to base data service functionality.
+         * @deprecated The method should not be used
+         */
+        this.baseDataService = inject(BaseDataService);
+        /**
+         * Provides access to translation functionality.
+         */
+        this.translateService = inject(TranslateService);
+        /**
+         * Provides access to the application's title service.
+         */
+        this.appTitleService = inject(AppTitleService);
+        /**
+         * Reference to the ChangeDetector. Used to trigger change detection manually.
+         */
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        /**
+         * Represents a subscription to an observable.
+         * Manages the lifecycle of receiving data from the observable and allows unsubscribing to stop receiving data.
+         * @type {Subscription}
+         */
+        this.subscriptions = [];
+        /**
+         * Configuration object for backend storage
+         * @type {TBackendStoreSettings}
+         */
+        this.settings = {};
+        /**
+         * Configuration object for local storage.
+         * @type {TLocalStoreSettings}
+         */
+        this._localSettings = {};
+        /**
+         * A signal representing the local application settings.  Changes to this signal
+         * propagate updates to the underlying local store settings.
+         * @type {WritableSignal<TLocalStoreSettings>}
+         */
+        this.localSettings = signal(this._localSettings, ...(ngDevMode ? [{ debugName: "localSettings" }] : []));
+        /**
+         * A Subject emitting updates to local store settings. Observables can subscribe to this Subject to react to changes in local settings.
+         * @type {Subject<TLocalStoreSettings>}
+         */
+        this.localSettingsUpdate = new Subject();
+        /**
+         * A unique numerical identifier for the module.
+         * @type {number}
+         */
+        this.id = undefined;
+        /**
+         * Defines the top bar items.
+         */
+        this.topBarItems = [
+            { id: 'content', icon: 'pi-box', caption: '' },
+            { id: 'settings', icon: 'pi-cog', caption: '' },
+            { id: 'security', icon: 'pi-lock', caption: '' }
+        ];
+        effect(() => {
+            const config = this.localSettings();
+            if (config) {
+                this.onConfigUpdate();
+            }
+        });
+        this.subscriptions.push(this.route.url.subscribe((url) => {
+            this.controller = url[0].path;
+        }));
+        this.subscriptions.push(this.route.paramMap.subscribe((params) => {
+            this.id = +params.get('id');
+            this.getLocalStorageSettings();
+        }));
+    }
+    /**
+     * Lifecycle hook that is called when a component is destroyed.
+     * Unsubscribes from all subscriptions to prevent memory leaks,
+     * resets the top bar items to an empty array, and sets the active ID
+     * to the ID of the first top bar item (if available).
+     */
+    ngOnDestroy() {
+        this.topBarService.setTopBarItems([]);
+        this.topBarService.activeId = this.topBarItems[0].id;
+        this.subscriptions.forEach((s) => s.unsubscribe());
+    }
+    /**
+     * Initializes the component. Subscribes to translation service to set captions for top bar items,
+     * sets the top bar items via the top bar service, sets the active ID,
+     * subscribes to route parameters to get the ID, and retrieves settings.
+     * @return {Promise<void>} A promise that resolves when the initialization is complete.
+     */
+    async ngOnInit() {
+        this.subscriptions.push(this.translateService.get('baseComponent').subscribe((value) => {
+            this.topBarItems[0].caption = value.content;
+            this.topBarItems[1].caption = value.settings;
+            this.topBarItems[2].caption = value.security;
+        }));
+        this.topBarService.setTopBarItems(this.topBarItems);
+        this.topBarService.activeId = this.topBarItems[0].id;
+        await this.getSettings();
+        this.subscriptions.push(this.appTitleService.title$.subscribe((title) => {
+            this.title = title;
+            this.changeDetectorRef.detectChanges();
+        }));
+    }
+    /**
+     * Retrieves module instance settings.
+     * @return {Promise<void>} A promise that resolves when settings are retrieved.
+     */
+    async getSettings() {
+        try {
+            this.settings = await this.baseDataService.sendRequest(`${this.baseDataService.baseUrl}api/${this.controller}/get-module-instance-settings?id=${this.id}`);
+        }
+        catch (error) {
+            this.msgService.error(error);
+        }
+    }
+    /**
+     * Saves the provided settings to the backend.
+     * @param {TLocalStoreSettings} settings - The settings object to save.
+     * @return {Promise<void>} A promise that resolves when the settings are saved. Reject if an error occurs.
+     */
+    async saveSettings(settings) {
+        await this.baseDataService
+            .sendRequest(`api/${this.controller}/put-module-instance-settings`, 'PUT', {
+            id: this.id,
+            settings: settings
+        })
+            .then(() => {
+            this.msgService.success(this.translateService.instant('baseComponent.success'));
+        })
+            .catch((error) => {
+            this.msgService.error(error);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: BaseModuleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: BaseModuleComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: BaseModuleComponent, decorators: [{
+            type: Component,
+            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.2", ngImport: i0, type: SecurityDataService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurityDataService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurityDataService, decorators: [{
+            type: Injectable
+        }] });
+
+class SecurityComponent {
+    constructor() {
+        this.msgService = inject(MsgService);
+        this.dataService = inject(SecurityDataService);
+        this.translateService = inject(TranslateService);
+        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!');
+        }
+        this.dataService.getSecurity(this.controller, this.id).then((result) => {
+            this.securityData = result;
+        }, (error) => this.msgService.error(error));
+        this.dataService.getRealmRoles().then((result) => {
+            this.roles = result;
+        }, (error) => this.msgService.error(error));
+    }
+    saveClick() {
+        const request = {
+            id: this.id,
+            securities: this.securityData
+        };
+        this.dataService.saveSecurity(this.controller, request).then((result) => {
+            this.msgService.success(this.translateService.instant('securityComponent.savedSecurity'));
+        }, (error) => this.msgService.error(error));
+    }
+    saveKeyDown($event) {
+        if ($event.key === 'Enter' || $event.key === 'Space') {
+            this.saveKeyDown(null);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: SecurityComponent, isStandalone: true, selector: "security", inputs: { id: "id", controller: "controller" }, 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">
+          <div class="font-semibold text-xl">
+            {{ 'securityComponent.security' | translate }}
+          </div>
+          @for (item of securityData; track item.name) {
+            <div class="flex flex-col gap-2">
+              <label htmlFor="oip-security-multiselect-{{ item.name }}">
+                {{ item.name }}
+                <span class="pi pi-question-circle" pTooltip="{{ item.description }}" tooltipPosition="right"></span>
+              </label>
+              <p-multiSelect
+                id="oip-security-multiselect-{{ item.name }}"
+                placeholder="Select roles"
+                [maxSelectedLabels]="10"
+                [options]="roles"
+                [(ngModel)]="item.roles" />
+            </div>
+          }
+          <div class="flex justify-content-end flex-wrap">
+            <p-button
+              icon="pi pi-save"
+              id="oip-security-save-button"
+              label="{{ 'securityComponent.save' | translate }}"
+              (click)="saveClick()"
+              (keydown)="saveKeyDown($event)" />
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurityComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'security',
+                    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">
+          <div class="font-semibold text-xl">
+            {{ 'securityComponent.security' | translate }}
+          </div>
+          @for (item of securityData; track item.name) {
+            <div class="flex flex-col gap-2">
+              <label htmlFor="oip-security-multiselect-{{ item.name }}">
+                {{ item.name }}
+                <span class="pi pi-question-circle" pTooltip="{{ item.description }}" tooltipPosition="right"></span>
+              </label>
+              <p-multiSelect
+                id="oip-security-multiselect-{{ item.name }}"
+                placeholder="Select roles"
+                [maxSelectedLabels]="10"
+                [options]="roles"
+                [(ngModel)]="item.roles" />
+            </div>
+          }
+          <div class="flex justify-content-end flex-wrap">
+            <p-button
+              icon="pi pi-save"
+              id="oip-security-save-button"
+              label="{{ 'securityComponent.save' | translate }}"
+              (click)="saveClick()"
+              (keydown)="saveKeyDown($event)" />
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                    imports: [MultiSelectModule, TooltipModule, FormsModule, ButtonModule, TranslatePipe],
+                    standalone: true
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], controller: [{
+                type: Input
+            }] } });
+
+/**
+ * Convert Date to string in format 2022-02-22
+ * @param date
+ */
+function dateToString(date) {
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+    return `${year}-${month}-${day}`;
+}
+/**
+ * Convert string in format 2022-02-22 to Date
+ * @param date
+ */
+function stringToDate(date) {
+    const dateParts = date.split('-');
+    const day = parseInt(dateParts[2], 10);
+    const month = parseInt(dateParts[1], 10) - 1;
+    const year = parseInt(dateParts[0], 10);
+    return new Date(year, month, day);
+}
+/**
+ * Add days to date
+ * @param date
+ * @param days
+ */
+function addDays(date, days) {
+    const clonedDate = structuredClone(date);
+    clonedDate.setDate(clonedDate.getDate() + days);
+    return clonedDate;
+}
+/**
+ * Get today's date
+ * @param date
+ */
+function getTodayDate() {
+    const date = new Date();
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+/* Convert dateformat from DatePipe to PrimeNG*/
+function convertToPrimeNgDateFormat(dateformat) {
+    switch (dateformat) {
+        case 'dd.MM.yyyy':
+            return 'dd.mm.yy';
+        case 'dd.MM.yy':
+            return 'dd.mm.y';
+        case 'yyyy-MM-dd':
+            return 'yy-mm-dd';
+        case 'dd.MMM.yyyy':
+            return 'dd.M.yy';
+        default:
+            console.error(`Failed to convert format: ${dateformat}`);
+    }
+}
+/**
+ * Convert all properties of an object with string dates to Date objects
+ * @param obj
+ */
+function restoreDates(obj) {
+    if (obj === null || typeof obj !== 'object')
+        return obj;
+    if (Array.isArray(obj)) {
+        return obj.map((item) => restoreDates(item));
+    }
+    const result = {};
+    for (const key in obj) {
+        const value = obj[key];
+        if (typeof value === 'string' && isIsoDate(value)) {
+            result[key] = new Date(value);
+        }
+        else if (typeof value === 'object' && value !== null && !(value instanceof Date)) {
+            result[key] = restoreDates(value);
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+/**
+ * Check if a string is a date in ISO format
+ * @param str
+ */
+function isIsoDate(str) {
+    return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?Z$/.test(str);
+}
+
+class LayoutService {
+    constructor() {
+        this._config = this.getAppConfigFromStorage();
+        this._state = {
+            staticMenuDesktopInactive: false,
+            overlayMenuActive: false,
+            configSidebarVisible: false,
+            staticMenuMobileActive: false,
+            menuHoverActive: false
+        };
+        this.layoutConfig = signal(this._config, ...(ngDevMode ? [{ debugName: "layoutConfig" }] : []));
+        this.layoutState = signal(this._state, ...(ngDevMode ? [{ debugName: "layoutState" }] : []));
+        this.configUpdate = new Subject();
+        this.overlayOpen = new Subject();
+        this.menuSource = new Subject();
+        this.resetSource = new Subject();
+        this.menuSource$ = this.menuSource.asObservable();
+        this.resetSource$ = this.resetSource.asObservable();
+        this.configUpdate$ = this.configUpdate.asObservable();
+        this.overlayOpen$ = this.overlayOpen.asObservable();
+        this.theme = computed(() => (this.layoutConfig()?.darkTheme ? 'light' : 'dark'), ...(ngDevMode ? [{ debugName: "theme" }] : []));
+        this.isSidebarActive = computed(() => this.layoutState().overlayMenuActive || this.layoutState().staticMenuMobileActive, ...(ngDevMode ? [{ debugName: "isSidebarActive" }] : []));
+        this.isDarkTheme = computed(() => this.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+        this.getPrimary = computed(() => this.layoutConfig().primary, ...(ngDevMode ? [{ debugName: "getPrimary" }] : []));
+        this.getSurface = computed(() => this.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "getSurface" }] : []));
+        this.isOverlay = computed(() => this.layoutConfig().menuMode === 'overlay', ...(ngDevMode ? [{ debugName: "isOverlay" }] : []));
+        this.language = computed(() => this.layoutConfig().language, ...(ngDevMode ? [{ debugName: "language" }] : []));
+        this.dateFormat = computed(() => this.layoutConfig().dateFormat, ...(ngDevMode ? [{ debugName: "dateFormat" }] : []));
+        this.primeNgDateFormat = computed(() => convertToPrimeNgDateFormat(this.layoutConfig().dateFormat), ...(ngDevMode ? [{ debugName: "primeNgDateFormat" }] : []));
+        this.timeFormat = computed(() => this.layoutConfig().timeFormat, ...(ngDevMode ? [{ debugName: "timeFormat" }] : []));
+        this.dateTimeFormat = computed(() => `${this.layoutConfig().dateFormat} ${this.layoutConfig().timeFormat}`, ...(ngDevMode ? [{ debugName: "dateTimeFormat" }] : []));
+        this.monthFormat = computed(() => {
+            const reDay = /d+/i;
+            const reDelimeter = /^[^\w]|[^\w]$|([^\w])\1+/;
+            const ngDateFormat = convertToPrimeNgDateFormat(this.layoutConfig().dateFormat);
+            const ngDate = ngDateFormat.replace(reDay, '');
+            const dateGroups = ngDate.match(reDelimeter);
+            if (Array.isArray(dateGroups) && dateGroups.length > 1) {
+                return dateGroups[1] !== undefined
+                    ? ngDate.replace(dateGroups[0], '')
+                    : ngDate.startsWith(dateGroups[0])
+                        ? ngDate.substring(1)
+                        : ngDate.substring(0, ngDate.length - 1);
+            }
+            return ngDateFormat;
+        }, ...(ngDevMode ? [{ debugName: "monthFormat" }] : []));
+        this.timeZone = computed(() => this.layoutConfig().timeZone, ...(ngDevMode ? [{ debugName: "timeZone" }] : []));
+        this.transitionComplete = signal(false, ...(ngDevMode ? [{ debugName: "transitionComplete" }] : []));
+        this.initialized = false;
+        effect(() => {
+            const config = this.layoutConfig();
+            if (config) {
+                this.onConfigUpdate();
+            }
+        });
+        effect(() => {
+            const config = this.layoutConfig();
+            if (!this.initialized || !config) {
+                this.initialized = true;
+                return;
+            }
+            this.handleDarkModeTransition(config);
+        });
+    }
+    /**
+     * Get application settings from browser storage
+     * @returns AppConfig
+     */
+    getAppConfigFromStorage() {
+        const appConfigUiString = localStorage.getItem('layoutConfig');
+        if (appConfigUiString != null) {
+            const config = JSON.parse(appConfigUiString);
+            config.timeZone ??= Intl.DateTimeFormat().resolvedOptions().timeZone;
+            return config;
+        }
+        return {
+            preset: 'Aura',
+            primary: 'emerald',
+            surface: null,
+            darkTheme: false,
+            menuMode: 'static',
+            language: 'ru',
+            dateFormat: 'yyyy-MM-dd',
+            timeFormat: 'HH:mm:ss',
+            dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
+            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+        };
+    }
+    handleDarkModeTransition(config) {
+        if (document.startViewTransition) {
+            this.startViewTransition(config);
+        }
+        else {
+            this.toggleDarkMode(config);
+            this.onTransitionEnd();
+        }
+    }
+    startViewTransition(config) {
+        const transition = document.startViewTransition(() => {
+            this.toggleDarkMode(config);
+        });
+        transition.ready
+            .then(() => {
+            this.onTransitionEnd();
+        })
+            .catch(() => { });
+    }
+    toggleDarkMode(config) {
+        const _config = config || this.layoutConfig();
+        if (_config.darkTheme) {
+            document.documentElement.classList.add('app-dark');
+        }
+        else {
+            document.documentElement.classList.remove('app-dark');
+        }
+    }
+    onTransitionEnd() {
+        this.transitionComplete.set(true);
+        setTimeout(() => {
+            this.transitionComplete.set(false);
+        });
+    }
+    onMenuToggle() {
+        if (this.isOverlay()) {
+            this.layoutState.update((prev) => ({ ...prev, overlayMenuActive: !this.layoutState().overlayMenuActive }));
+            if (this.layoutState().overlayMenuActive) {
+                this.overlayOpen.next(null);
+            }
+        }
+        if (this.isDesktop()) {
+            this.layoutState.update((prev) => ({
+                ...prev,
+                staticMenuDesktopInactive: !this.layoutState().staticMenuDesktopInactive
+            }));
+        }
+        else {
+            this.layoutState.update((prev) => ({
+                ...prev,
+                staticMenuMobileActive: !this.layoutState().staticMenuMobileActive
+            }));
+            if (this.layoutState().staticMenuMobileActive) {
+                this.overlayOpen.next(null);
+            }
+        }
+    }
+    isDesktop() {
+        return window.innerWidth > 991;
+    }
+    isMobile() {
+        return !this.isDesktop();
+    }
+    onConfigUpdate() {
+        this._config = { ...this.layoutConfig() };
+        this.configUpdate.next(this.layoutConfig());
+        localStorage.setItem('layoutConfig', JSON.stringify(this.layoutConfig()));
+    }
+    onMenuStateChange(event) {
+        this.menuSource.next(event);
+    }
+    reset() {
+        this.resetSource.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LayoutService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const presets = {
+    Aura,
+    Lara,
+    Nora
+};
+class AppConfiguratorComponent {
+    constructor() {
+        this.router = inject(Router);
+        this.config = inject(PrimeNG);
+        this.layoutService = inject(LayoutService);
+        this.platformId = inject(PLATFORM_ID);
+        this.primeng = inject(PrimeNG);
+        this.presets = Object.keys(presets);
+        this.showMenuModeButton = signal(!this.router.url.includes('auth'), ...(ngDevMode ? [{ debugName: "showMenuModeButton" }] : []));
+        this.menuModeOptions = [
+            { label: 'Static', value: 'static' },
+            { label: 'Overlay', value: 'overlay' }
+        ];
+        this.surfaces = [
+            {
+                name: 'slate',
+                palette: {
+                    0: '#ffffff',
+                    50: '#f8fafc',
+                    100: '#f1f5f9',
+                    200: '#e2e8f0',
+                    300: '#cbd5e1',
+                    400: '#94a3b8',
+                    500: '#64748b',
+                    600: '#475569',
+                    700: '#334155',
+                    800: '#1e293b',
+                    900: '#0f172a',
+                    950: '#020617'
+                }
+            },
+            {
+                name: 'gray',
+                palette: {
+                    0: '#ffffff',
+                    50: '#f9fafb',
+                    100: '#f3f4f6',
+                    200: '#e5e7eb',
+                    300: '#d1d5db',
+                    400: '#9ca3af',
+                    500: '#6b7280',
+                    600: '#4b5563',
+                    700: '#374151',
+                    800: '#1f2937',
+                    900: '#111827',
+                    950: '#030712'
+                }
+            },
+            {
+                name: 'zinc',
+                palette: {
+                    0: '#ffffff',
+                    50: '#fafafa',
+                    100: '#f4f4f5',
+                    200: '#e4e4e7',
+                    300: '#d4d4d8',
+                    400: '#a1a1aa',
+                    500: '#71717a',
+                    600: '#52525b',
+                    700: '#3f3f46',
+                    800: '#27272a',
+                    900: '#18181b',
+                    950: '#09090b'
+                }
+            },
+            {
+                name: 'neutral',
+                palette: {
+                    0: '#ffffff',
+                    50: '#fafafa',
+                    100: '#f5f5f5',
+                    200: '#e5e5e5',
+                    300: '#d4d4d4',
+                    400: '#a3a3a3',
+                    500: '#737373',
+                    600: '#525252',
+                    700: '#404040',
+                    800: '#262626',
+                    900: '#171717',
+                    950: '#0a0a0a'
+                }
+            },
+            {
+                name: 'stone',
+                palette: {
+                    0: '#ffffff',
+                    50: '#fafaf9',
+                    100: '#f5f5f4',
+                    200: '#e7e5e4',
+                    300: '#d6d3d1',
+                    400: '#a8a29e',
+                    500: '#78716c',
+                    600: '#57534e',
+                    700: '#44403c',
+                    800: '#292524',
+                    900: '#1c1917',
+                    950: '#0c0a09'
+                }
+            },
+            {
+                name: 'soho',
+                palette: {
+                    0: '#ffffff',
+                    50: '#ececec',
+                    100: '#dedfdf',
+                    200: '#c4c4c6',
+                    300: '#adaeb0',
+                    400: '#97979b',
+                    500: '#7f8084',
+                    600: '#6a6b70',
+                    700: '#55565b',
+                    800: '#3f4046',
+                    900: '#2c2c34',
+                    950: '#16161d'
+                }
+            },
+            {
+                name: 'viva',
+                palette: {
+                    0: '#ffffff',
+                    50: '#f3f3f3',
+                    100: '#e7e7e8',
+                    200: '#cfd0d0',
+                    300: '#b7b8b9',
+                    400: '#9fa1a1',
+                    500: '#87898a',
+                    600: '#6e7173',
+                    700: '#565a5b',
+                    800: '#3e4244',
+                    900: '#262b2c',
+                    950: '#0e1315'
+                }
+            },
+            {
+                name: 'ocean',
+                palette: {
+                    0: '#ffffff',
+                    50: '#fbfcfc',
+                    100: '#F7F9F8',
+                    200: '#EFF3F2',
+                    300: '#DADEDD',
+                    400: '#B1B7B6',
+                    500: '#828787',
+                    600: '#5F7274',
+                    700: '#415B61',
+                    800: '#29444E',
+                    900: '#183240',
+                    950: '#0c1920'
+                }
+            }
+        ];
+        this.selectedPrimaryColor = computed(() => {
+            return this.layoutService.layoutConfig().primary;
+        }, ...(ngDevMode ? [{ debugName: "selectedPrimaryColor" }] : []));
+        this.selectedSurfaceColor = computed(() => this.layoutService.layoutConfig().surface, ...(ngDevMode ? [{ debugName: "selectedSurfaceColor" }] : []));
+        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;
+        }, ...(ngDevMode ? [{ debugName: "primaryColors" }] : []));
+    }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.onPresetChange(this.layoutService.layoutConfig().preset);
+        }
+    }
+    getPresetExt() {
+        const color = this.primaryColors().find((c) => c.name === this.selectedPrimaryColor()) || {};
+        const preset = this.layoutService.layoutConfig().preset;
+        if (color.name === 'noir') {
+            return {
+                semantic: {
+                    primary: {
+                        50: '{surface.50}',
+                        100: '{surface.100}',
+                        200: '{surface.200}',
+                        300: '{surface.300}',
+                        400: '{surface.400}',
+                        500: '{surface.500}',
+                        600: '{surface.600}',
+                        700: '{surface.700}',
+                        800: '{surface.800}',
+                        900: '{surface.900}',
+                        950: '{surface.950}'
+                    },
+                    colorScheme: {
+                        light: {
+                            primary: {
+                                color: '{primary.950}',
+                                contrastColor: '#ffffff',
+                                hoverColor: '{primary.800}',
+                                activeColor: '{primary.700}'
+                            },
+                            highlight: {
+                                background: '{primary.950}',
+                                focusBackground: '{primary.700}',
+                                color: '#ffffff',
+                                focusColor: '#ffffff'
+                            }
+                        },
+                        dark: {
+                            primary: {
+                                color: '{primary.50}',
+                                contrastColor: '{primary.950}',
+                                hoverColor: '{primary.200}',
+                                activeColor: '{primary.300}'
+                            },
+                            highlight: {
+                                background: '{primary.50}',
+                                focusBackground: '{primary.300}',
+                                color: '{primary.950}',
+                                focusColor: '{primary.950}'
+                            }
+                        }
+                    }
+                }
+            };
+        }
+        else if (preset === 'Nora') {
+            return {
+                semantic: {
+                    primary: color.palette,
+                    colorScheme: {
+                        light: {
+                            primary: {
+                                color: '{primary.600}',
+                                contrastColor: '#ffffff',
+                                hoverColor: '{primary.700}',
+                                activeColor: '{primary.800}'
+                            },
+                            highlight: {
+                                background: '{primary.600}',
+                                focusBackground: '{primary.700}',
+                                color: '#ffffff',
+                                focusColor: '#ffffff'
+                            }
+                        },
+                        dark: {
+                            primary: {
+                                color: '{primary.500}',
+                                contrastColor: '{surface.900}',
+                                hoverColor: '{primary.400}',
+                                activeColor: '{primary.300}'
+                            },
+                            highlight: {
+                                background: '{primary.500}',
+                                focusBackground: '{primary.400}',
+                                color: '{surface.900}',
+                                focusColor: '{surface.900}'
+                            }
+                        }
+                    }
+                }
+            };
+        }
+        else {
+            return {
+                semantic: {
+                    primary: color.palette,
+                    colorScheme: {
+                        light: {
+                            primary: {
+                                color: '{primary.500}',
+                                contrastColor: '#ffffff',
+                                hoverColor: '{primary.600}',
+                                activeColor: '{primary.700}'
+                            },
+                            highlight: {
+                                background: '{primary.50}',
+                                focusBackground: '{primary.100}',
+                                color: '{primary.700}',
+                                focusColor: '{primary.800}'
+                            }
+                        },
+                        dark: {
+                            primary: {
+                                color: '{primary.400}',
+                                contrastColor: '{surface.900}',
+                                hoverColor: '{primary.300}',
+                                activeColor: '{primary.200}'
+                            },
+                            highlight: {
+                                background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
+                                focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)',
+                                color: 'rgba(255,255,255,.87)',
+                                focusColor: 'rgba(255,255,255,.87)'
+                            }
+                        }
+                    }
+                }
+            };
+        }
+    }
+    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) {
+        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.2", ngImport: i0, type: AppConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", 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">Primary</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">Surface</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">Presets</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">Menu Mode</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: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppConfiguratorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-configurator',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, SelectButtonModule],
+                    template: `
+    <div class="flex flex-col gap-4">
+      <div>
+        <span class="text-sm text-muted-color font-semibold">Primary</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">Surface</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">Presets</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">Menu Mode</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 LogoComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: LogoComponent, isStandalone: true, selector: "logo", inputs: { width: "width", height: "height" }, ngImport: i0, template: `
+    <svg
+      viewBox="0.8516 1.7159 60.0074 64.7142"
+      xmlns="http://www.w3.org/2000/svg"
+      [attr.height]="height + 'px'"
+      [attr.width]="width + 'px'">
+      <path
+        class="primary-logo-color"
+        d="M -130.45 -104.78 C -130.45 -105.9 -130.43 -107.01 -130.45 -108.13 C -130.49 -108.52 -130.28 -108.9 -129.92 -109.07 C -125.87 -111.4 -121.82 -113.74 -117.77 -116.08 C -115.7 -117.26 -113.63 -118.45 -111.58 -119.67 C -111.26 -119.89 -110.83 -119.89 -110.51 -119.67 C -101.66 -114.53 -92.787 -109.41 -83.915 -104.29 C -83.752 -104.2 -83.479 -104.16 -83.475 -103.94 C -83.472 -103.72 -83.766 -103.65 -83.947 -103.54 C -86.326 -102.16 -88.716 -100.79 -91.092 -99.39 C -91.377 -99.18 -91.761 -99.18 -92.046 -99.39 C -98.211 -102.98 -104.38 -106.55 -110.56 -110.12 C -110.85 -110.33 -111.23 -110.33 -111.52 -110.12 C -114.88 -108.16 -118.25 -106.22 -121.63 -104.28 C -122.01 -104.11 -122.24 -103.71 -122.2 -103.3 C -122.18 -101.11 -122.2 -98.922 -122.2 -96.736 C -122.19 -95.98 -122.21 -95.98 -122.84 -96.335 C -125.2 -97.7 -127.57 -99.07 -129.93 -100.42 C -130.27 -100.57 -130.49 -100.92 -130.46 -101.3 C -130.43 -102.46 -130.45 -103.62 -130.45 -104.78 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+      <path
+        class="primary-logo-color"
+        d="M -70.504 -100.94 L -70.504 -90.438 C -70.447 -89.98 -70.692 -89.537 -71.11 -89.342 C -78.942 -84.839 -86.769 -80.325 -94.592 -75.8 C -95.635 -75.2 -96.684 -74.612 -97.713 -73.988 C -98.17 -73.708 -98.255 -73.846 -98.255 -74.314 L -98.255 -82.785 C -98.268 -83.116 -98.07 -83.419 -97.762 -83.541 C -92.003 -86.86 -86.269 -90.236 -80.468 -93.47 C -79.181 -94.179 -78.667 -94.934 -78.731 -96.441 C -78.869 -99.76 -78.791 -103.09 -78.755 -106.42 C -78.694 -107 -79.02 -107.56 -79.56 -107.8 C -81.436 -108.83 -83.28 -109.93 -85.138 -110.99 C -85.734 -111.34 -85.734 -111.34 -85.113 -111.7 C -82.748 -113.07 -80.379 -114.43 -78.021 -115.82 C -77.707 -116.05 -77.283 -116.06 -76.957 -115.84 C -74.962 -114.66 -72.953 -113.5 -70.929 -112.37 C -70.62 -112.19 -70.456 -111.84 -70.521 -111.49 C -70.514 -107.99 -70.508 -104.48 -70.504 -100.94 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+      <path
+        class="primary-logo-color"
+        d="M -108.68 -85.743 L -108.68 -75.169 C -108.72 -74.754 -108.5 -74.358 -108.12 -74.179 C -104.77 -72.267 -101.44 -70.339 -98.117 -68.396 C -97.762 -68.141 -97.284 -68.141 -96.929 -68.396 C -95.028 -69.527 -93.096 -70.598 -91.195 -71.725 C -90.667 -72.041 -90.581 -71.892 -90.581 -71.371 C -90.596 -68.591 -90.596 -65.811 -90.581 -63.03 C -90.551 -62.7 -90.729 -62.386 -91.028 -62.243 C -93.083 -61.073 -95.13 -59.891 -97.17 -58.697 C -97.436 -58.537 -97.775 -58.569 -98.007 -58.775 C -102.74 -61.517 -107.47 -64.254 -112.22 -66.984 C -113.63 -67.796 -115.01 -68.615 -116.42 -69.406 C -116.77 -69.561 -116.97 -69.913 -116.94 -70.286 C -116.93 -80.555 -116.93 -90.823 -116.94 -101.09 C -116.94 -101.63 -116.86 -101.75 -116.35 -101.44 C -113.98 -100.05 -111.59 -98.667 -109.19 -97.303 C -108.84 -97.135 -108.62 -96.76 -108.66 -96.367 C -108.68 -92.833 -108.69 -89.291 -108.68 -85.743 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+      <path
+        class="secondary-logo-color"
+        d="M -122.18 -85.807 L -122.18 -82.129 C -122.18 -81.637 -122.34 -81.615 -122.72 -81.839 C -125.16 -83.257 -127.6 -84.667 -130.05 -86.069 C -130.35 -86.219 -130.53 -86.535 -130.5 -86.867 L -130.5 -94.09 C -130.5 -94.64 -130.34 -94.679 -129.89 -94.417 C -127.49 -92.998 -125.09 -91.607 -122.67 -90.243 C -122.35 -90.103 -122.15 -89.772 -122.18 -89.42 C -122.21 -88.214 -122.18 -87.012 -122.18 -85.807 Z M -82.688 -119.15 C -83.954 -118.41 -85.17 -117.7 -86.365 -117.02 C -87.748 -116.22 -89.138 -115.44 -90.514 -114.63 C -90.761 -114.45 -91.093 -114.45 -91.34 -114.63 C -93.432 -115.86 -95.535 -117.07 -97.649 -118.27 C -98.053 -118.5 -98.191 -118.63 -97.67 -118.93 C -95.216 -120.32 -92.776 -121.74 -90.337 -123.15 C -90.134 -123.33 -89.845 -123.36 -89.61 -123.23 L -82.918 -119.33 C -82.862 -119.28 -82.812 -119.24 -82.688 -119.15 Z M -85.365 -65.616 L -85.365 -72.062 L -85.365 -74.622 C -85.403 -74.928 -85.24 -75.223 -84.961 -75.353 C -82.886 -76.534 -80.83 -77.736 -78.77 -78.931 C -78.174 -79.286 -78.135 -79.257 -78.135 -78.576 L -78.135 -70.303 C -78.135 -69.991 -78.135 -69.711 -78.468 -69.52 C -80.656 -68.275 -82.833 -67.013 -85.014 -65.761 C -85.127 -65.704 -85.245 -65.655 -85.365 -65.616 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+    </svg>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LogoComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'logo',
+                    standalone: true,
+                    template: `
+    <svg
+      viewBox="0.8516 1.7159 60.0074 64.7142"
+      xmlns="http://www.w3.org/2000/svg"
+      [attr.height]="height + 'px'"
+      [attr.width]="width + 'px'">
+      <path
+        class="primary-logo-color"
+        d="M -130.45 -104.78 C -130.45 -105.9 -130.43 -107.01 -130.45 -108.13 C -130.49 -108.52 -130.28 -108.9 -129.92 -109.07 C -125.87 -111.4 -121.82 -113.74 -117.77 -116.08 C -115.7 -117.26 -113.63 -118.45 -111.58 -119.67 C -111.26 -119.89 -110.83 -119.89 -110.51 -119.67 C -101.66 -114.53 -92.787 -109.41 -83.915 -104.29 C -83.752 -104.2 -83.479 -104.16 -83.475 -103.94 C -83.472 -103.72 -83.766 -103.65 -83.947 -103.54 C -86.326 -102.16 -88.716 -100.79 -91.092 -99.39 C -91.377 -99.18 -91.761 -99.18 -92.046 -99.39 C -98.211 -102.98 -104.38 -106.55 -110.56 -110.12 C -110.85 -110.33 -111.23 -110.33 -111.52 -110.12 C -114.88 -108.16 -118.25 -106.22 -121.63 -104.28 C -122.01 -104.11 -122.24 -103.71 -122.2 -103.3 C -122.18 -101.11 -122.2 -98.922 -122.2 -96.736 C -122.19 -95.98 -122.21 -95.98 -122.84 -96.335 C -125.2 -97.7 -127.57 -99.07 -129.93 -100.42 C -130.27 -100.57 -130.49 -100.92 -130.46 -101.3 C -130.43 -102.46 -130.45 -103.62 -130.45 -104.78 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+      <path
+        class="primary-logo-color"
+        d="M -70.504 -100.94 L -70.504 -90.438 C -70.447 -89.98 -70.692 -89.537 -71.11 -89.342 C -78.942 -84.839 -86.769 -80.325 -94.592 -75.8 C -95.635 -75.2 -96.684 -74.612 -97.713 -73.988 C -98.17 -73.708 -98.255 -73.846 -98.255 -74.314 L -98.255 -82.785 C -98.268 -83.116 -98.07 -83.419 -97.762 -83.541 C -92.003 -86.86 -86.269 -90.236 -80.468 -93.47 C -79.181 -94.179 -78.667 -94.934 -78.731 -96.441 C -78.869 -99.76 -78.791 -103.09 -78.755 -106.42 C -78.694 -107 -79.02 -107.56 -79.56 -107.8 C -81.436 -108.83 -83.28 -109.93 -85.138 -110.99 C -85.734 -111.34 -85.734 -111.34 -85.113 -111.7 C -82.748 -113.07 -80.379 -114.43 -78.021 -115.82 C -77.707 -116.05 -77.283 -116.06 -76.957 -115.84 C -74.962 -114.66 -72.953 -113.5 -70.929 -112.37 C -70.62 -112.19 -70.456 -111.84 -70.521 -111.49 C -70.514 -107.99 -70.508 -104.48 -70.504 -100.94 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+      <path
+        class="primary-logo-color"
+        d="M -108.68 -85.743 L -108.68 -75.169 C -108.72 -74.754 -108.5 -74.358 -108.12 -74.179 C -104.77 -72.267 -101.44 -70.339 -98.117 -68.396 C -97.762 -68.141 -97.284 -68.141 -96.929 -68.396 C -95.028 -69.527 -93.096 -70.598 -91.195 -71.725 C -90.667 -72.041 -90.581 -71.892 -90.581 -71.371 C -90.596 -68.591 -90.596 -65.811 -90.581 -63.03 C -90.551 -62.7 -90.729 -62.386 -91.028 -62.243 C -93.083 -61.073 -95.13 -59.891 -97.17 -58.697 C -97.436 -58.537 -97.775 -58.569 -98.007 -58.775 C -102.74 -61.517 -107.47 -64.254 -112.22 -66.984 C -113.63 -67.796 -115.01 -68.615 -116.42 -69.406 C -116.77 -69.561 -116.97 -69.913 -116.94 -70.286 C -116.93 -80.555 -116.93 -90.823 -116.94 -101.09 C -116.94 -101.63 -116.86 -101.75 -116.35 -101.44 C -113.98 -100.05 -111.59 -98.667 -109.19 -97.303 C -108.84 -97.135 -108.62 -96.76 -108.66 -96.367 C -108.68 -92.833 -108.69 -89.291 -108.68 -85.743 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+      <path
+        class="secondary-logo-color"
+        d="M -122.18 -85.807 L -122.18 -82.129 C -122.18 -81.637 -122.34 -81.615 -122.72 -81.839 C -125.16 -83.257 -127.6 -84.667 -130.05 -86.069 C -130.35 -86.219 -130.53 -86.535 -130.5 -86.867 L -130.5 -94.09 C -130.5 -94.64 -130.34 -94.679 -129.89 -94.417 C -127.49 -92.998 -125.09 -91.607 -122.67 -90.243 C -122.35 -90.103 -122.15 -89.772 -122.18 -89.42 C -122.21 -88.214 -122.18 -87.012 -122.18 -85.807 Z M -82.688 -119.15 C -83.954 -118.41 -85.17 -117.7 -86.365 -117.02 C -87.748 -116.22 -89.138 -115.44 -90.514 -114.63 C -90.761 -114.45 -91.093 -114.45 -91.34 -114.63 C -93.432 -115.86 -95.535 -117.07 -97.649 -118.27 C -98.053 -118.5 -98.191 -118.63 -97.67 -118.93 C -95.216 -120.32 -92.776 -121.74 -90.337 -123.15 C -90.134 -123.33 -89.845 -123.36 -89.61 -123.23 L -82.918 -119.33 C -82.862 -119.28 -82.812 -119.24 -82.688 -119.15 Z M -85.365 -65.616 L -85.365 -72.062 L -85.365 -74.622 C -85.403 -74.928 -85.24 -75.223 -84.961 -75.353 C -82.886 -76.534 -80.83 -77.736 -78.77 -78.931 C -78.174 -79.286 -78.135 -79.257 -78.135 -78.576 L -78.135 -70.303 C -78.135 -69.991 -78.135 -69.711 -78.468 -69.52 C -80.656 -68.275 -82.833 -67.013 -85.014 -65.761 C -85.127 -65.704 -85.245 -65.655 -85.365 -65.616 Z"
+        transform="matrix(1, 0, 0, 1, 131.35482788085938, 125.0257797241211)" />
+    </svg>
+  `
+                }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }] } });
+
+/**
+ * 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 SecurityService 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);
+        this.publicEventsService
+            .registerForEvents()
+            .pipe(filter((event) => event.type === EventTypes.NewAuthenticationResult))
+            .subscribe(() => {
+            this.auth();
+        });
+    }
+    /**
+     * Returns the ID token for the sign-in.
+     * @returns A string with the id token.
+     */
+    getAccessToken() {
+        return this.loginResponse.pipe(map((data) => data?.accessToken));
+    }
+    /**
+     * Indicates whether the current user has the 'admin' role.
+     *
+     * @returns {boolean} True if the user is an admin, false otherwise.
+     */
+    get 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.userData = _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();
+    }
+    /**
+     * 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.2", ngImport: i0, type: SecurityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurityService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurityService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+/**
+ * UserService is responsible for retrieving and handling user-related data,
+ * including the user's photo and short label for avatar display.
+ */
+class UserService {
+    constructor() {
+        this.securityService = inject(SecurityService);
+        this.baseDataService = inject(BaseDataService);
+        /**
+         * Stores the user's photo as a data URL or binary blob, depending on how it's processed.
+         */
+        this.photo = null;
+        /**
+         * Indicates whether the user photo has finished loading.
+         */
+        this.photoLoaded = false;
+        this.getUserPhoto();
+    }
+    /**
+     * Returns a short label composed of the user's initials.
+     * Typically used for avatar display when a photo is unavailable.
+     */
+    get shortLabel() {
+        const data = this.securityService.userData;
+        return data.given_name[0] + data.family_name[0];
+    }
+    get userName() {
+        const data = this.securityService.userData;
+        return `${data.given_name} ${data.family_name}`;
+    }
+    /**
+     * Initiates an HTTP request to fetch the user's photo based on their email,
+     * and updates the `photo` and `photoLoaded` properties accordingly.
+     */
+    getUserPhoto() {
+        const url = `${this.baseDataService.baseUrl}api/user-profile/get-user-photo?email=${this.securityService.userData.email}`;
+        this.baseDataService.getBlob(url).then((data) => {
+            this.createImageFromBlob(data);
+            this.photoLoaded = true;
+        }, (error) => {
+            console.log(error);
+        });
+    }
+    /**
+     * Converts a Blob image into a Base64 data URL and stores it in the `photo` property.
+     *
+     * @param image - The image Blob to be converted.
+     */
+    createImageFromBlob(image) {
+        const reader = new FileReader();
+        reader.addEventListener('load', () => {
+            this.photo = reader.result;
+        }, false);
+        if (image) {
+            reader.readAsDataURL(image);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UserService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UserService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class AppTopbar {
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this.securityService = inject(SecurityService);
+        this.topBarService = inject(TopBarService);
+        this.userService = inject(UserService);
+    }
+    toggleDarkMode() {
+        this.layoutService.layoutConfig.update((state) => ({
+            ...state,
+            darkTheme: !state.darkTheme
+        }));
+    }
+    logoutKeyDown($event) {
+        if ($event.key === 'Enter') {
+            this.securityService.logout();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppTopbar, deps: [{ token: LayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: AppTopbar, isStandalone: true, selector: "app-topbar", ngImport: i0, template: ` <div class="layout-topbar">
+    <div class="layout-topbar-logo-container">
+      <button class="layout-menu-button layout-topbar-action" (click)="layoutService.onMenuToggle()">
+        <i class="pi pi-bars"></i>
+      </button>
+      <a class="layout-topbar-logo" id="oip-app-topbar-logo-link" routerLink="">
+        <logo [height]="36" [width]="36"></logo>
+        <span>OIP</span>
+      </a>
+    </div>
+
+    @if (securityService.isAdmin && topBarService.topBarItems.length > 0) {
+      <p-tabs class="layout-topbar-tabs ml-2" [(value)]="topBarService.activeId">
+        <p-tablist>
+          @for (tab of topBarService.availableTopBarItems; track tab.id) {
+            <p-tab id="oip-app-topbar-tab-{{ tab.id }}" [value]="tab.id">
+              <i class="pi {{ tab.icon }}"></i>
+              <span class="ml-2">{{ tab.caption }}</span>
+            </p-tab>
+          }
+        </p-tablist>
+      </p-tabs>
+    }
+    <div class="layout-topbar-actions">
+      <div class="layout-config-menu">
+        <p-button
+          class="layout-topbar-action"
+          id="oip-app-topbar-theme-button"
+          severity="secondary"
+          type="button"
+          [rounded]="true"
+          [text]="true"
+          (click)="toggleDarkMode()">
+          <i
+            class="pi"
+            [ngClass]="{
+              'pi-moon': layoutService.isDarkTheme(),
+              'pi-sun': !layoutService.isDarkTheme()
+            }"></i>
+        </p-button>
+        <div class="relative">
+          <p-button
+            class="layout-topbar-action layout-topbar-action-highlight"
+            enterActiveClass="animate-scalein"
+            enterFromClass="hidden"
+            id="oip-app-topbar-palette-button"
+            leaveActiveClass="animate-fadeout"
+            leaveToClass="hidden"
+            pStyleClass="@next"
+            [hideOnOutsideClick]="true"
+            [rounded]="true">
+            <i class="pi pi-palette"></i>
+          </p-button>
+          <app-configurator />
+        </div>
+      </div>
+
+      <button
+        class="layout-topbar-menu-button layout-topbar-action"
+        enterActiveClass="animate-scalein"
+        enterFromClass="hidden"
+        id="oip-app-topbar-menu-expand-button"
+        leaveActiveClass="animate-fadeout"
+        leaveToClass="hidden"
+        pStyleClass="@next"
+        [hideOnOutsideClick]="true">
+        <i class="pi pi-ellipsis-v"></i>
+      </button>
+
+      <div class="layout-topbar-menu hidden lg:block">
+        <div class="layout-topbar-menu-content">
+          <button
+            class="layout-topbar-action"
+            id="oip-app-topbar-logout-button"
+            type="button"
+            (click)="securityService.logout()"
+            (keydown)="logoutKeyDown($event)">
+            <i class="pi pi-sign-out"></i>
+            <span>Logout</span>
+          </button>
+          <button class="layout-topbar-action" routerLink="config">
+            <p-avatar
+              class="p-link flex align-items-center"
+              id="oip-app-topbar-user-avatar"
+              shape="circle"
+              size="normal"
+              [image]="userService.photoLoaded ? userService.photo : null"
+              >{{ !userService.photoLoaded ? userService.shortLabel : null }}
+            </p-avatar>
+            <span class="ml-2">Profile</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i4.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfiguratorComponent, selector: "app-configurator" }, { kind: "component", type: LogoComponent, selector: "logo", inputs: ["width", "height"] }, { kind: "component", type: Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: TabList, selector: "p-tablist" }, { kind: "component", type: Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i5$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppTopbar, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-topbar',
+                    standalone: true,
+                    imports: [
+                        RouterModule,
+                        CommonModule,
+                        StyleClassModule,
+                        AppConfiguratorComponent,
+                        LogoComponent,
+                        Tabs,
+                        TabList,
+                        Tab,
+                        AvatarModule,
+                        ButtonModule
+                    ],
+                    template: ` <div class="layout-topbar">
+    <div class="layout-topbar-logo-container">
+      <button class="layout-menu-button layout-topbar-action" (click)="layoutService.onMenuToggle()">
+        <i class="pi pi-bars"></i>
+      </button>
+      <a class="layout-topbar-logo" id="oip-app-topbar-logo-link" routerLink="">
+        <logo [height]="36" [width]="36"></logo>
+        <span>OIP</span>
+      </a>
+    </div>
+
+    @if (securityService.isAdmin && topBarService.topBarItems.length > 0) {
+      <p-tabs class="layout-topbar-tabs ml-2" [(value)]="topBarService.activeId">
+        <p-tablist>
+          @for (tab of topBarService.availableTopBarItems; track tab.id) {
+            <p-tab id="oip-app-topbar-tab-{{ tab.id }}" [value]="tab.id">
+              <i class="pi {{ tab.icon }}"></i>
+              <span class="ml-2">{{ tab.caption }}</span>
+            </p-tab>
+          }
+        </p-tablist>
+      </p-tabs>
+    }
+    <div class="layout-topbar-actions">
+      <div class="layout-config-menu">
+        <p-button
+          class="layout-topbar-action"
+          id="oip-app-topbar-theme-button"
+          severity="secondary"
+          type="button"
+          [rounded]="true"
+          [text]="true"
+          (click)="toggleDarkMode()">
+          <i
+            class="pi"
+            [ngClass]="{
+              'pi-moon': layoutService.isDarkTheme(),
+              'pi-sun': !layoutService.isDarkTheme()
+            }"></i>
+        </p-button>
+        <div class="relative">
+          <p-button
+            class="layout-topbar-action layout-topbar-action-highlight"
+            enterActiveClass="animate-scalein"
+            enterFromClass="hidden"
+            id="oip-app-topbar-palette-button"
+            leaveActiveClass="animate-fadeout"
+            leaveToClass="hidden"
+            pStyleClass="@next"
+            [hideOnOutsideClick]="true"
+            [rounded]="true">
+            <i class="pi pi-palette"></i>
+          </p-button>
+          <app-configurator />
+        </div>
+      </div>
+
+      <button
+        class="layout-topbar-menu-button layout-topbar-action"
+        enterActiveClass="animate-scalein"
+        enterFromClass="hidden"
+        id="oip-app-topbar-menu-expand-button"
+        leaveActiveClass="animate-fadeout"
+        leaveToClass="hidden"
+        pStyleClass="@next"
+        [hideOnOutsideClick]="true">
+        <i class="pi pi-ellipsis-v"></i>
+      </button>
+
+      <div class="layout-topbar-menu hidden lg:block">
+        <div class="layout-topbar-menu-content">
+          <button
+            class="layout-topbar-action"
+            id="oip-app-topbar-logout-button"
+            type="button"
+            (click)="securityService.logout()"
+            (keydown)="logoutKeyDown($event)">
+            <i class="pi pi-sign-out"></i>
+            <span>Logout</span>
+          </button>
+          <button class="layout-topbar-action" routerLink="config">
+            <p-avatar
+              class="p-link flex align-items-center"
+              id="oip-app-topbar-user-avatar"
+              shape="circle"
+              size="normal"
+              [image]="userService.photoLoaded ? userService.photo : null"
+              >{{ !userService.photoLoaded ? userService.shortLabel : null }}
+            </p-avatar>
+            <span class="ml-2">Profile</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>`
+                }]
+        }], ctorParameters: () => [{ type: LayoutService }] });
+
+class FooterComponent {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: FooterComponent, isStandalone: true, selector: "app-footer", ngImport: i0, template: `
+    <div class="layout-footer">
+      <logo class="mr-2" height="18" width="18"></logo>
+      <span class="font-medium">OIP</span>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: LogoComponent, selector: "logo", inputs: ["width", "height"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-footer',
+                    template: `
+    <div class="layout-footer">
+      <logo class="mr-2" height="18" width="18"></logo>
+      <span class="font-medium">OIP</span>
+    </div>
+  `,
+                    standalone: true,
+                    imports: [LogoComponent]
+                }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/*
+ * ---------------------------------------------------------------
+ * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
+ * ##                                                           ##
+ * ## AUTHOR: acacode                                           ##
+ * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
+ * ---------------------------------------------------------------
+ */
+var ContentType;
+(function (ContentType) {
+    ContentType["Json"] = "application/json";
+    ContentType["FormData"] = "multipart/form-data";
+    ContentType["UrlEncoded"] = "application/x-www-form-urlencoded";
+    ContentType["Text"] = "text/plain";
+})(ContentType || (ContentType = {}));
+class HttpClient {
+    constructor() {
+        this.securityService = inject(SecurityService);
+        this.layoutService = inject(LayoutService);
+        this.baseUrl = "";
+        this.securityData = null;
+        this.securityWorker = (securityData) => ({
+            headers: {
+                "Accept-language": this.layoutService.language()
+                    ? this.layoutService.language()
+                    : "en",
+                "X-Timezone": this.layoutService.timeZone(),
+                Authorization: `Bearer ${securityData}`,
+            },
+        });
+        this.abortControllers = new Map();
+        this.customFetch = (...fetchParams) => fetch(...fetchParams);
+        this.baseApiParams = {
+            credentials: "same-origin",
+            headers: {},
+            redirect: "follow",
+            referrerPolicy: "no-referrer",
+        };
+        this.setSecurityData = (data) => {
+            this.securityData = data;
+        };
+        this.contentFormatters = {
+            [ContentType.Json]: (input) => input !== null && (typeof input === "object" || typeof input === "string")
+                ? JSON.stringify(input)
+                : input,
+            [ContentType.Text]: (input) => input !== null && typeof input !== "string"
+                ? JSON.stringify(input)
+                : input,
+            [ContentType.FormData]: (input) => Object.keys(input || {}).reduce((formData, key) => {
+                const property = input[key];
+                formData.append(key, property instanceof Blob
+                    ? property
+                    : typeof property === "object" && property !== null
+                        ? JSON.stringify(property)
+                        : `${property}`);
+                return formData;
+            }, new FormData()),
+            [ContentType.UrlEncoded]: (input) => this.toQueryString(input),
+        };
+        this.createAbortSignal = (cancelToken) => {
+            if (this.abortControllers.has(cancelToken)) {
+                const abortController = this.abortControllers.get(cancelToken);
+                if (abortController) {
+                    return abortController.signal;
+                }
+                return void 0;
+            }
+            const abortController = new AbortController();
+            this.abortControllers.set(cancelToken, abortController);
+            return abortController.signal;
+        };
+        this.abortRequest = (cancelToken) => {
+            const abortController = this.abortControllers.get(cancelToken);
+            if (abortController) {
+                abortController.abort();
+                this.abortControllers.delete(cancelToken);
+            }
+        };
+        this.request = async ({ body, secure, path, type, query, format, baseUrl, cancelToken, ...params }) => {
+            const secureParams = ((typeof secure === "boolean" ? secure : this.baseApiParams.secure) &&
+                this.securityWorker &&
+                (await this.securityWorker(this.securityData))) ||
+                {};
+            const requestParams = this.mergeRequestParams(params, secureParams);
+            const queryString = query && this.toQueryString(query);
+            const payloadFormatter = this.contentFormatters[type || ContentType.Json];
+            let responseFormat = format || requestParams.format;
+            return this.customFetch(`${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`, {
+                ...requestParams,
+                headers: {
+                    ...(requestParams.headers || {}),
+                    ...(type && type !== ContentType.FormData
+                        ? { "Content-Type": type }
+                        : {}),
+                },
+                signal: (cancelToken
+                    ? this.createAbortSignal(cancelToken)
+                    : requestParams.signal) || null,
+                body: typeof body === "undefined" || body === null
+                    ? null
+                    : payloadFormatter(body),
+            }).then(async (response) => {
+                const r = response.clone();
+                r.data = null;
+                r.error = null;
+                if (typeof E !== undefined && responseFormat === undefined)
+                    responseFormat = "json";
+                const data = !responseFormat
+                    ? r
+                    : await response[responseFormat]()
+                        .then((data) => {
+                        if (r.ok) {
+                            r.data = data;
+                        }
+                        else {
+                            r.error = data;
+                        }
+                        return r;
+                    })
+                        .catch((e) => {
+                        r.error = e;
+                        return r;
+                    });
+                if (cancelToken) {
+                    this.abortControllers.delete(cancelToken);
+                }
+                if (!response.ok)
+                    throw data;
+                return data.data;
+            });
+        };
+        this.securityService.getAccessToken().subscribe((token) => {
+            this.securityData = token;
+        });
+    }
+    encodeQueryParam(key, value) {
+        const encodedKey = encodeURIComponent(key);
+        return `${encodedKey}=${encodeURIComponent(typeof value === "number" ? value : `${value}`)}`;
+    }
+    addQueryParam(query, key) {
+        return this.encodeQueryParam(key, query[key]);
+    }
+    addArrayQueryParam(query, key) {
+        const value = query[key];
+        return value.map((v) => this.encodeQueryParam(key, v)).join("&");
+    }
+    toQueryString(rawQuery) {
+        const query = rawQuery || {};
+        const keys = Object.keys(query).filter((key) => "undefined" !== typeof query[key]);
+        return keys
+            .map((key) => Array.isArray(query[key])
+            ? this.addArrayQueryParam(query, key)
+            : this.addQueryParam(query, key))
+            .join("&");
+    }
+    addQueryParams(rawQuery) {
+        const queryString = this.toQueryString(rawQuery);
+        return queryString ? `?${queryString}` : "";
+    }
+    mergeRequestParams(params1, params2) {
+        return {
+            ...this.baseApiParams,
+            ...params1,
+            ...(params2 || {}),
+            headers: {
+                ...(this.baseApiParams.headers || {}),
+                ...(params1.headers || {}),
+                ...((params2 && params2.headers) || {}),
+            },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: HttpClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: HttpClient, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: HttpClient, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/*
+ * ---------------------------------------------------------------
+ * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
+ * ##                                                           ##
+ * ## AUTHOR: acacode                                           ##
+ * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
+ * ---------------------------------------------------------------
+ */
+class Menu extends HttpClient {
+    constructor() {
+        super(...arguments);
+        /**
+         * @description Retrieves the menu available to the current authenticated user.
+         *
+         * @tags Menu
+         * @name menuGet
+         * @request GET:/api/menu/get
+         * @secure
+         */
+        this.menuGet = (params = {}) => this.request({
+            path: `/api/menu/get`,
+            method: "GET",
+            secure: true,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Retrieves the admin-specific menu.
+         *
+         * @tags Menu
+         * @name menuGetAdminMenu
+         * @request GET:/api/menu/get-admin-menu
+         * @secure
+         */
+        this.menuGetAdminMenu = (params = {}) => this.request({
+            path: `/api/menu/get-admin-menu`,
+            method: "GET",
+            secure: true,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Retrieves all available modules in the system.
+         *
+         * @tags Menu
+         * @name menuGetModules
+         * @request GET:/api/menu/get-modules
+         * @secure
+         */
+        this.menuGetModules = (params = {}) => this.request({
+            path: `/api/menu/get-modules`,
+            method: "GET",
+            secure: true,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Adds a new module instance to the system.
+         *
+         * @tags Menu
+         * @name menuAddModuleInstance
+         * @request POST:/api/menu/add-module-instance
+         * @secure
+         */
+        this.menuAddModuleInstance = (data, params = {}) => this.request({
+            path: `/api/menu/add-module-instance`,
+            method: "POST",
+            body: data,
+            secure: true,
+            type: ContentType.Json,
+            ...params,
+        });
+        /**
+         * @description Edits an existing module instance.
+         *
+         * @tags Menu
+         * @name menuEditModuleInstance
+         * @request POST:/api/menu/edit-module-instance
+         * @secure
+         */
+        this.menuEditModuleInstance = (data, params = {}) => this.request({
+            path: `/api/menu/edit-module-instance`,
+            method: "POST",
+            body: data,
+            secure: true,
+            type: ContentType.Json,
+            ...params,
+        });
+        /**
+         * @description Deletes a module instance by its identifier.
+         *
+         * @tags Menu
+         * @name menuDeleteModuleInstance
+         * @request DELETE:/api/menu/delete-module-instance
+         * @secure
+         */
+        this.menuDeleteModuleInstance = (query, params = {}) => this.request({
+            path: `/api/menu/delete-module-instance`,
+            method: "DELETE",
+            query: query,
+            secure: true,
+            ...params,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Menu, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Menu }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Menu, decorators: [{
+            type: Injectable
+        }] });
+
+class MenuService extends BaseDataService {
+    constructor() {
+        super(...arguments);
+        this.menuSource = new Subject();
+        this.resetSource = new Subject();
+        this.titleService = inject(AppTitleService);
+        this.menuDataService = inject(Menu);
+        this.menuSource$ = this.menuSource.asObservable();
+        this.resetSource$ = this.resetSource.asObservable();
+        this.menu = [];
+        this.adminMode = false;
+    }
+    async loadMenu() {
+        this.menu = this.adminMode ? await this.getAdminMenu() : await this.getMenu();
+    }
+    /**
+     * Handles changes in the menu state.
+     * @param {MenuChangeEvent} event - The event containing information about the menu state change.
+     * @return {void}
+     */
+    onMenuStateChange(event) {
+        this.menuSource.next(event);
+        this.titleService.setTitle(event.item.label);
+    }
+    reset() {
+        this.resetSource.next(true);
+    }
+    getMenu() {
+        return this.menuDataService.menuGet();
+    }
+    getAdminMenu() {
+        return this.menuDataService.menuGetAdminMenu();
+    }
+    getModules() {
+        return this.menuDataService.menuGetModules();
+    }
+    addModuleInstance(addModuleInstance) {
+        return this.menuDataService.menuAddModuleInstance(addModuleInstance);
+    }
+    deleteItem(moduleInstanceId) {
+        return this.sendRequest(this.baseUrl + 'api/menu/delete-module-instance?id=' + moduleInstanceId, 'DELETE');
+    }
+    editModuleInstance(item) {
+        return this.sendRequest(this.baseUrl + 'api/menu/edit-module-instance', 'POST', item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuService, decorators: [{
+            type: Injectable
+        }] });
+
+class MenuItemComponent {
+    constructor(cd, router, menuService) {
+        this.cd = cd;
+        this.router = router;
+        this.menuService = menuService;
+        this.layoutService = inject(LayoutService);
+        this.translateService = inject(TranslateService);
+        this.confirmationService = inject(ConfirmationService);
+        this.msgService = inject(MsgService);
+        this.menuDataService = inject(Menu);
+        this.active = false;
+        this.subscriptions = [];
+        this.localization = {};
+        this.key = '';
+        this.subscriptions.push(this.menuService.menuSource$.subscribe((value) => {
+            Promise.resolve(null).then(() => {
+                if (value.routeEvent) {
+                    this.active = value.key === this.key || value.key.startsWith(this.key + '-');
+                }
+                else if (value.key !== this.key && !value.key.startsWith(this.key + '-')) {
+                    this.active = false;
+                }
+            });
+        }));
+        this.subscriptions.push(this.menuService.resetSource$.subscribe(() => {
+            this.active = false;
+        }));
+        this.subscriptions.push(this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params) => {
+            if (this.item.routerLink) {
+                this.updateActiveStateFromRoute();
+            }
+        }));
+        this.subscriptions.push(this.translateService.get('menuItemComponent').subscribe((value) => {
+            this.localization = value;
+        }));
+    }
+    ngOnInit() {
+        this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+        if (this.item.routerLink) {
+            this.updateActiveStateFromRoute();
+        }
+    }
+    updateActiveStateFromRoute() {
+        const activeRoute = this.router.isActive(this.item.routerLink[0], {
+            paths: 'exact',
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored'
+        });
+        if (activeRoute) {
+            this.menuService.onMenuStateChange({
+                key: this.key,
+                item: this.item,
+                routeEvent: true
+            });
+        }
+    }
+    itemClick(event) {
+        // avoid processing disabled items
+        if (this.item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // execute command
+        if (this.item.command) {
+            this.item.command({ originalEvent: event, item: this.item });
+        }
+        // toggle active state
+        if (this.item.items) {
+            this.active = !this.active;
+        }
+        this.menuService.onMenuStateChange({ key: this.key, item: this.item });
+    }
+    get submenuAnimation() {
+        return this.root || this.active ? 'expanded' : 'collapsed';
+    }
+    get activeClass() {
+        return this.active && !this.root;
+    }
+    ngOnDestroy() {
+        this.subscriptions.map((s) => s.unsubscribe());
+    }
+    newClick(e) {
+        this.menuItemCreateDialogComponent.showDialog();
+    }
+    onContextMenu($event, item) {
+        this.menuService.contextMenuItem = item;
+        this.contextMenu.model = [
+            {
+                label: this.localization.new,
+                icon: PrimeIcons.PLUS,
+                command: (event) => this.newClick(event)
+            },
+            {
+                label: this.localization.edit,
+                icon: PrimeIcons.FILE_EDIT,
+                command: (event) => this.editClick(event)
+            },
+            { separator: true },
+            {
+                label: this.localization.delete,
+                icon: PrimeIcons.TRASH,
+                command: (event) => this.deleteItem(event)
+            }
+        ];
+        this.contextMenu.show($event);
+    }
+    deleteItem(event) {
+        this.confirmationService.confirm({
+            header: this.localization.deleteItemConfirmHeader,
+            message: this.localization.deleteItemConfirmMessage,
+            icon: PrimeIcons.TRASH,
+            rejectButtonProps: {
+                label: this.localization.deleteItemConfirmRejectButtonPropsLabel,
+                severity: 'secondary',
+                outlined: true
+            },
+            acceptButtonProps: {
+                label: this.localization.deleteItemConfirmAcceptButtonPropsLabel,
+                severity: 'danger'
+            },
+            accept: async () => {
+                await this.menuDataService.menuDeleteModuleInstance({
+                    id: this.menuService.contextMenuItem?.moduleInstanceId
+                });
+                this.msgService.success(this.localization.deleteItemSuccessMessage);
+                await this.menuService.loadMenu();
+            }
+        });
+    }
+    editClick(event) {
+        this.menuItemEditDialogComponent.showDialog();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.Router }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: MenuItemComponent, isStandalone: true, selector: "[app-menuitem]", inputs: { item: "item", index: "index", root: "root", parentKey: "parentKey", menuItemCreateDialogComponent: "menuItemCreateDialogComponent", menuItemEditDialogComponent: "menuItemEditDialogComponent", contextMenu: "contextMenu" }, host: { properties: { "class.layout-root-menuitem": "this.root", "class.active-menuitem": "this.activeClass" } }, providers: [ConfirmationService], ngImport: i0, template: `
+    <ng-container>
+      <p-confirm-dialog />
+      <div
+        *ngIf="root && item.visible !== false"
+        class="layout-menuitem-root-text"
+        (contextmenu)="onContextMenu($event, item)">
+        {{ item.label }}
+      </div>
+      <a
+        *ngIf="(!item.routerLink || item.items) && item.visible !== false"
+        pRipple
+        tabindex="0"
+        [attr.href]="item.url"
+        [attr.target]="item.target"
+        [ngClass]="item.class"
+        (click)="itemClick($event)">
+        <i class="layout-menuitem-icon" [ngClass]="item.icon"></i>
+        <span class="layout-menuitem-text">{{ item.label }}</span>
+        <i *ngIf="item.items" class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+      </a>
+      <a
+        *ngIf="item.routerLink && !item.items && item.visible !== false"
+        pRipple
+        routerLinkActive="active-route"
+        tabindex="0"
+        [attr.target]="item.target"
+        [fragment]="item.fragment"
+        [ngClass]="item.class"
+        [preserveFragment]="item.preserveFragment"
+        [queryParams]="item.queryParams"
+        [queryParamsHandling]="item.queryParamsHandling"
+        [replaceUrl]="item.replaceUrl"
+        [routerLink]="item.routerLink"
+        [routerLinkActiveOptions]="
+          item.routerLinkActiveOptions || {
+            paths: 'exact',
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored'
+          }
+        "
+        [skipLocationChange]="item.skipLocationChange"
+        [state]="item.state"
+        (click)="itemClick($event)"
+        (contextmenu)="onContextMenu($event, item)">
+        <i class="layout-menuitem-icon" [ngClass]="item.icon"></i>
+        <span class="layout-menuitem-text">{{ item.label }}</span>
+        <i *ngIf="item.items" class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+      </a>
+
+      <ul
+        *ngIf="item.items && item.visible !== false"
+        [@children]="submenuAnimation"
+        (contextmenu)="onContextMenu($event, item)">
+        <ng-template let-child let-i="index" ngFor [ngForOf]="item.items">
+          <li
+            app-menuitem
+            [class]="child.badgeClass"
+            [contextMenu]="contextMenu"
+            [index]="i"
+            [item]="child"
+            [menuItemCreateDialogComponent]="menuItemCreateDialogComponent"
+            [menuItemEditDialogComponent]="menuItemEditDialogComponent"
+            [parentKey]="key"></li>
+        </ng-template>
+      </ul>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "component", type: MenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey", "menuItemCreateDialogComponent", "menuItemEditDialogComponent", "contextMenu"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$1.Ripple, selector: "[pRipple]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ContextMenuModule }, { 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", "visible", "position", "draggable"], outputs: ["onHide"] }], animations: [
+            trigger('children', [
+                state('collapsed', style({
+                    height: '0'
+                })),
+                state('expanded', style({
+                    height: '*'
+                })),
+                transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+            ])
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[app-menuitem]',
+                    template: `
+    <ng-container>
+      <p-confirm-dialog />
+      <div
+        *ngIf="root && item.visible !== false"
+        class="layout-menuitem-root-text"
+        (contextmenu)="onContextMenu($event, item)">
+        {{ item.label }}
+      </div>
+      <a
+        *ngIf="(!item.routerLink || item.items) && item.visible !== false"
+        pRipple
+        tabindex="0"
+        [attr.href]="item.url"
+        [attr.target]="item.target"
+        [ngClass]="item.class"
+        (click)="itemClick($event)">
+        <i class="layout-menuitem-icon" [ngClass]="item.icon"></i>
+        <span class="layout-menuitem-text">{{ item.label }}</span>
+        <i *ngIf="item.items" class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+      </a>
+      <a
+        *ngIf="item.routerLink && !item.items && item.visible !== false"
+        pRipple
+        routerLinkActive="active-route"
+        tabindex="0"
+        [attr.target]="item.target"
+        [fragment]="item.fragment"
+        [ngClass]="item.class"
+        [preserveFragment]="item.preserveFragment"
+        [queryParams]="item.queryParams"
+        [queryParamsHandling]="item.queryParamsHandling"
+        [replaceUrl]="item.replaceUrl"
+        [routerLink]="item.routerLink"
+        [routerLinkActiveOptions]="
+          item.routerLinkActiveOptions || {
+            paths: 'exact',
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored'
+          }
+        "
+        [skipLocationChange]="item.skipLocationChange"
+        [state]="item.state"
+        (click)="itemClick($event)"
+        (contextmenu)="onContextMenu($event, item)">
+        <i class="layout-menuitem-icon" [ngClass]="item.icon"></i>
+        <span class="layout-menuitem-text">{{ item.label }}</span>
+        <i *ngIf="item.items" class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+      </a>
+
+      <ul
+        *ngIf="item.items && item.visible !== false"
+        [@children]="submenuAnimation"
+        (contextmenu)="onContextMenu($event, item)">
+        <ng-template let-child let-i="index" ngFor [ngForOf]="item.items">
+          <li
+            app-menuitem
+            [class]="child.badgeClass"
+            [contextMenu]="contextMenu"
+            [index]="i"
+            [item]="child"
+            [menuItemCreateDialogComponent]="menuItemCreateDialogComponent"
+            [menuItemEditDialogComponent]="menuItemEditDialogComponent"
+            [parentKey]="key"></li>
+        </ng-template>
+      </ul>
+    </ng-container>
+  `,
+                    animations: [
+                        trigger('children', [
+                            state('collapsed', style({
+                                height: '0'
+                            })),
+                            state('expanded', style({
+                                height: '*'
+                            })),
+                            transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+                        ])
+                    ],
+                    imports: [NgIf, RippleModule, NgClass, RouterLinkActive, RouterLink, NgFor, ContextMenuModule, ConfirmDialog],
+                    providers: [ConfirmationService]
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.Router }, { type: MenuService }], propDecorators: { item: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], root: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.layout-root-menuitem']
+            }], parentKey: [{
+                type: Input
+            }], menuItemCreateDialogComponent: [{
+                type: Input
+            }], menuItemEditDialogComponent: [{
+                type: Input
+            }], contextMenu: [{
+                type: Input
+            }], activeClass: [{
+                type: HostBinding,
+                args: ['class.active-menuitem']
+            }] } });
+
+class MenuItemCreateDialogComponent {
+    constructor() {
+        this.menuService = inject(MenuService);
+        this.menu = inject(Menu);
+        this.visibleChange = new EventEmitter();
+        this.modules = [];
+        this.selectIcon = 'pi pi-box';
+    }
+    async ngOnInit() {
+        this.modules = await this.menu.menuGetModules();
+    }
+    changeVisible() {
+        this.visible = !this.visible;
+        this.visibleChange.emit(this.visible);
+    }
+    async save() {
+        const item = {
+            moduleId: this.selectModule,
+            label: this.label,
+            icon: this.selectIcon,
+            parentId: this.menuService.contextMenuItem?.moduleInstanceId
+        };
+        await this.menuService.addModuleInstance(item);
+        await this.menuService.loadMenu();
+        this.hide();
+    }
+    hide() {
+        this.visible = false;
+        this.visibleChange.emit(this.visible);
+    }
+    showDialog() {
+        this.visible = true;
+        this.visibleChange.emit(this.visible);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuItemCreateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: MenuItemCreateDialogComponent, isStandalone: true, selector: "menu-item-create-dialog", inputs: { visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: `
+    <p-dialog
+      header="{{ 'menuItemCreateDialogComponent.header' | translate }}"
+      [modal]="true"
+      [style]="{ width: '40rem' }"
+      [(visible)]="visible">
+      @if (menuService.contextMenuItem) {
+        <div class="flex items-center gap-4 mb-4 mt-1">
+          <label class="font-semibold w-1/3" for="oip-menu-item-create-dialog-parent-input">
+            {{ 'menuItemCreateDialogComponent.parentLabel' | translate }}
+          </label>
+          <input
+            autocomplete="off"
+            class="flex-auto"
+            id="oip-menu-item-create-dialog-parent-input"
+            pInputText
+            readonly
+            [ngModel]="menuService.contextMenuItem?.label"/>
+        </div>
+      }
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-create-label">
+          {{ 'menuItemCreateDialogComponent.label' | translate }}
+        </label>
+        <input autocomplete="off" class="flex-auto" id="oip-menu-item-create-label" pInputText [(ngModel)]="label"/>
+      </div>
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-create-module">
+          {{ 'menuItemCreateDialogComponent.module' | translate }}
+        </label>
+        <p-select
+          appendTo="body"
+          class="flex-auto"
+          id="oip-menu-item-create-module"
+          optionLabel="value"
+          optionValue="key"
+          placeholder="{{ 'menuItemCreateDialogComponent.selectModule' | translate }}"
+          [options]="modules"
+          [(ngModel)]="selectModule"/>
+      </div>
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-create-dialog-icon">
+          {{ 'menuItemCreateDialogComponent.icon' | translate }}
+        </label>
+        <i class="{{ selectIcon }}"></i>
+        <input class="flex-auto" id="oip-menu-item-create-dialog-icon" pInputText [(ngModel)]="selectIcon"/>
+      </div>
+      <div class="flex justify-end gap-2">
+        <p-button
+          id="oip-menu-item-create-cancel"
+          label="{{ 'menuItemCreateDialogComponent.cancel' | translate }}"
+          severity="secondary"
+          (click)="changeVisible()"
+          (keydown)="changeVisible()"/>
+        <p-button
+          id="oip-menu-item-create-save"
+          label="{{ 'menuItemCreateDialogComponent.save' | translate }}"
+          (click)="save()"
+          (keydown)="save()"/>
+      </div>
+    </p-dialog>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuItemCreateDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'menu-item-create-dialog',
+                    standalone: true,
+                    imports: [ButtonModule, DialogModule, InputTextModule, SelectModule, FormsModule, TranslatePipe],
+                    template: `
+    <p-dialog
+      header="{{ 'menuItemCreateDialogComponent.header' | translate }}"
+      [modal]="true"
+      [style]="{ width: '40rem' }"
+      [(visible)]="visible">
+      @if (menuService.contextMenuItem) {
+        <div class="flex items-center gap-4 mb-4 mt-1">
+          <label class="font-semibold w-1/3" for="oip-menu-item-create-dialog-parent-input">
+            {{ 'menuItemCreateDialogComponent.parentLabel' | translate }}
+          </label>
+          <input
+            autocomplete="off"
+            class="flex-auto"
+            id="oip-menu-item-create-dialog-parent-input"
+            pInputText
+            readonly
+            [ngModel]="menuService.contextMenuItem?.label"/>
+        </div>
+      }
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-create-label">
+          {{ 'menuItemCreateDialogComponent.label' | translate }}
+        </label>
+        <input autocomplete="off" class="flex-auto" id="oip-menu-item-create-label" pInputText [(ngModel)]="label"/>
+      </div>
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-create-module">
+          {{ 'menuItemCreateDialogComponent.module' | translate }}
+        </label>
+        <p-select
+          appendTo="body"
+          class="flex-auto"
+          id="oip-menu-item-create-module"
+          optionLabel="value"
+          optionValue="key"
+          placeholder="{{ 'menuItemCreateDialogComponent.selectModule' | translate }}"
+          [options]="modules"
+          [(ngModel)]="selectModule"/>
+      </div>
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-create-dialog-icon">
+          {{ 'menuItemCreateDialogComponent.icon' | translate }}
+        </label>
+        <i class="{{ selectIcon }}"></i>
+        <input class="flex-auto" id="oip-menu-item-create-dialog-icon" pInputText [(ngModel)]="selectIcon"/>
+      </div>
+      <div class="flex justify-end gap-2">
+        <p-button
+          id="oip-menu-item-create-cancel"
+          label="{{ 'menuItemCreateDialogComponent.cancel' | translate }}"
+          severity="secondary"
+          (click)="changeVisible()"
+          (keydown)="changeVisible()"/>
+        <p-button
+          id="oip-menu-item-create-save"
+          label="{{ 'menuItemCreateDialogComponent.save' | translate }}"
+          (click)="save()"
+          (keydown)="save()"/>
+      </div>
+    </p-dialog>
+  `
+                }]
+        }], propDecorators: { visible: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }] } });
+
+class MenuItemEditDialogComponent {
+    constructor() {
+        this.menuService = inject(MenuService);
+        this.securityDataService = inject(SecurityDataService);
+        this.visibleChange = new EventEmitter();
+        this.modules = [];
+        this.roles = [];
+        this.item = {
+            icon: '',
+            label: '',
+            viewRoles: [''],
+            moduleId: 0,
+            moduleInstanceId: 0,
+            parentId: 0
+        };
+    }
+    changeVisible() {
+        this.visible = !this.visible;
+        this.visibleChange.emit(this.visible);
+    }
+    async save() {
+        await this.menuService.editModuleInstance(this.item);
+        await this.menuService.loadMenu();
+        this.hide();
+    }
+    hide() {
+        this.visible = false;
+        this.visibleChange.emit(this.visible);
+    }
+    async showDialog() {
+        this.item = {
+            moduleInstanceId: this.menuService.contextMenuItem?.moduleInstanceId,
+            moduleId: this.menuService.contextMenuItem?.moduleId,
+            parentId: this.menuService.contextMenuItem?.parentId,
+            label: this.menuService.contextMenuItem?.label,
+            icon: this.menuService.contextMenuItem?.icon,
+            viewRoles: this.menuService.contextMenuItem?.securities
+        };
+        this.roles = await this.securityDataService.getRealmRoles();
+        this.menuService.getModules().then((data) => {
+            this.modules = data;
+        });
+        this.visible = true;
+        this.visibleChange.emit(this.visible);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuItemEditDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: MenuItemEditDialogComponent, isStandalone: true, selector: "menu-item-edit-dialog", inputs: { visible: "visible" }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: `
+    <p-dialog
+      header="{{ 'menuItemEditDialogComponent.header' | translate }}"
+      [modal]="true"
+      [style]="{ width: '40rem' }"
+      [(visible)]="visible">
+      <div class="flex items-center gap-4 mb-4 mt-1">
+        <label class="font-semibold w-1/3" for="oip-menu-item-edit-dialog-menu-input">
+          {{ 'menuItemEditDialogComponent.label' | translate }}
+        </label>
+        <input
+          autocomplete="off"
+          class="flex-auto"
+          id="oip-menu-item-edit-dialog-menu-input"
+          pInputText
+          [(ngModel)]="item.label"/>
+      </div>
+
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-edit-dialog-icon">
+          {{ 'menuItemEditDialogComponent.icon' | translate }}
+        </label>
+        <i class="{{ item.icon }}"></i>
+        <input class="flex-auto" id="oip-menu-item-edit-dialog-icon" pInputText [(ngModel)]="item.icon"/>
+      </div>
+
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="security">
+          {{ 'menuItemEditDialogComponent.security' | translate }}
+        </label>
+        <p-multiSelect
+          appendTo="body"
+          class="flex-auto"
+          id="oip-menu-item-edit-dialog-roles-multi-select"
+          placeholder="Select roles"
+          [maxSelectedLabels]="10"
+          [options]="roles"
+          [(ngModel)]="item.viewRoles"/>
+      </div>
+
+      <div class="flex justify-end gap-2">
+        <p-button
+          id="oip-menu-item-edit-dialog-cancel-edit-button"
+          label="{{ 'menuItemEditDialogComponent.cancel' | translate }}"
+          severity="secondary"
+          (click)="changeVisible()"
+          (keydown)="changeVisible()"/>
+        <p-button
+          id="oip-menu-item-edit-dialog-save-edit-button"
+          label="{{ 'menuItemEditDialogComponent.save' | translate }}"
+          (click)="save()"
+          (keydown)="save()"/>
+      </div>
+    </p-dialog>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$1.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$2.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuItemEditDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [ButtonModule, DialogModule, InputTextModule, FormsModule, TranslatePipe, MultiSelectModule],
+                    selector: 'menu-item-edit-dialog',
+                    standalone: true,
+                    template: `
+    <p-dialog
+      header="{{ 'menuItemEditDialogComponent.header' | translate }}"
+      [modal]="true"
+      [style]="{ width: '40rem' }"
+      [(visible)]="visible">
+      <div class="flex items-center gap-4 mb-4 mt-1">
+        <label class="font-semibold w-1/3" for="oip-menu-item-edit-dialog-menu-input">
+          {{ 'menuItemEditDialogComponent.label' | translate }}
+        </label>
+        <input
+          autocomplete="off"
+          class="flex-auto"
+          id="oip-menu-item-edit-dialog-menu-input"
+          pInputText
+          [(ngModel)]="item.label"/>
+      </div>
+
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="oip-menu-item-edit-dialog-icon">
+          {{ 'menuItemEditDialogComponent.icon' | translate }}
+        </label>
+        <i class="{{ item.icon }}"></i>
+        <input class="flex-auto" id="oip-menu-item-edit-dialog-icon" pInputText [(ngModel)]="item.icon"/>
+      </div>
+
+      <div class="flex items-center gap-4 mb-4">
+        <label class="font-semibold w-1/3" for="security">
+          {{ 'menuItemEditDialogComponent.security' | translate }}
+        </label>
+        <p-multiSelect
+          appendTo="body"
+          class="flex-auto"
+          id="oip-menu-item-edit-dialog-roles-multi-select"
+          placeholder="Select roles"
+          [maxSelectedLabels]="10"
+          [options]="roles"
+          [(ngModel)]="item.viewRoles"/>
+      </div>
+
+      <div class="flex justify-end gap-2">
+        <p-button
+          id="oip-menu-item-edit-dialog-cancel-edit-button"
+          label="{{ 'menuItemEditDialogComponent.cancel' | translate }}"
+          severity="secondary"
+          (click)="changeVisible()"
+          (keydown)="changeVisible()"/>
+        <p-button
+          id="oip-menu-item-edit-dialog-save-edit-button"
+          label="{{ 'menuItemEditDialogComponent.save' | translate }}"
+          (click)="save()"
+          (keydown)="save()"/>
+      </div>
+    </p-dialog>
+  `
+                }]
+        }], propDecorators: { visible: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }] } });
+
+class MenuComponent {
+    constructor() {
+        this.menuService = inject(MenuService);
+        this.securityService = inject(SecurityService);
+        this.translateService = inject(TranslateService);
+    }
+    ngOnInit() {
+        this.menuService.loadMenu().then();
+    }
+    newClick(e) {
+        this.menuItemCreateDialogComponent.showDialog();
+    }
+    onContextMenu($event) {
+        this.menuService.contextMenuItem = null;
+        this.contextMenu.model = [
+            {
+                label: this.translateService.instant('menuComponent.new'),
+                icon: PrimeIcons.PLUS,
+                command: (event) => this.newClick(event)
+            }
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: MenuComponent, isStandalone: true, selector: "app-menu", providers: [Menu], viewQueries: [{ propertyName: "menuItemCreateDialogComponent", first: true, predicate: MenuItemCreateDialogComponent, descendants: true }, { propertyName: "menuItemEditDialogComponent", first: true, predicate: MenuItemEditDialogComponent, descendants: true }, { propertyName: "contextMenu", first: true, predicate: ContextMenu, descendants: true }], ngImport: i0, template: ` <div #empty class="layout-sidebar" (contextmenu)="onContextMenu($event)">
+      <ul class="layout-menu">
+        @for (item of menuService.menu; track item; let i = $index) {
+          <ng-container>
+            @if (item.separator) {
+              <li class="menu-separator"></li>
+            } @else {
+              <li
+                app-menuitem
+                [contextMenu]="contextMenu"
+                [index]="i"
+                [item]="item"
+                [menuItemCreateDialogComponent]="menuItemCreateDialogComponent"
+                [menuItemEditDialogComponent]="menuItemEditDialogComponent"
+                [root]="true"></li>
+            }
+          </ng-container>
+        }
+      </ul>
+    </div>
+    <p-contextMenu [target]="empty" />
+    @if (securityService.isAdmin) {
+      <menu-item-create-dialog />
+      <menu-item-edit-dialog />
+    }`, isInline: true, dependencies: [{ kind: "component", type: MenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey", "menuItemCreateDialogComponent", "menuItemEditDialogComponent", "contextMenu"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: ContextMenuModule }, { kind: "component", type: i1$4.ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "component", type: MenuItemCreateDialogComponent, selector: "menu-item-create-dialog", inputs: ["visible"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: MenuItemEditDialogComponent, selector: "menu-item-edit-dialog", inputs: ["visible"], outputs: ["visibleChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        MenuItemComponent,
+                        ButtonModule,
+                        ContextMenuModule,
+                        DialogModule,
+                        InputTextModule,
+                        MenuItemCreateDialogComponent,
+                        FormsModule,
+                        MenuItemEditDialogComponent
+                    ],
+                    providers: [Menu],
+                    selector: 'app-menu',
+                    standalone: true,
+                    template: ` <div #empty class="layout-sidebar" (contextmenu)="onContextMenu($event)">
+      <ul class="layout-menu">
+        @for (item of menuService.menu; track item; let i = $index) {
+          <ng-container>
+            @if (item.separator) {
+              <li class="menu-separator"></li>
+            } @else {
+              <li
+                app-menuitem
+                [contextMenu]="contextMenu"
+                [index]="i"
+                [item]="item"
+                [menuItemCreateDialogComponent]="menuItemCreateDialogComponent"
+                [menuItemEditDialogComponent]="menuItemEditDialogComponent"
+                [root]="true"></li>
+            }
+          </ng-container>
+        }
+      </ul>
+    </div>
+    <p-contextMenu [target]="empty" />
+    @if (securityService.isAdmin) {
+      <menu-item-create-dialog />
+      <menu-item-edit-dialog />
+    }`
+                }]
+        }], propDecorators: { menuItemCreateDialogComponent: [{
+                type: ViewChild,
+                args: [MenuItemCreateDialogComponent]
+            }], menuItemEditDialogComponent: [{
+                type: ViewChild,
+                args: [MenuItemEditDialogComponent]
+            }], contextMenu: [{
+                type: ViewChild,
+                args: [ContextMenu]
+            }] } });
+
+class SidebarComponent {
+    constructor() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: SidebarComponent, isStandalone: true, selector: "app-sidebar", ngImport: i0, template: ` <app-menu></app-menu>`, isInline: true, dependencies: [{ kind: "component", type: MenuComponent, selector: "app-menu" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-sidebar',
+                    template: ` <app-menu></app-menu>`,
+                    standalone: true,
+                    imports: [MenuComponent]
+                }]
+        }], ctorParameters: () => [] });
+
+class AppLayoutComponent {
+    constructor() {
+        this.layoutService = inject(LayoutService);
+        this.router = inject(Router);
+        this.renderer = inject(Renderer2);
+        this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
+            if (!this.menuOutsideClickListener) {
+                this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
+                    if (this.isOutsideClicked(event)) {
+                        this.hideMenu();
+                    }
+                });
+            }
+            if (this.layoutService.layoutState().staticMenuMobileActive) {
+                this.blockBodyScroll();
+            }
+        });
+        this.router.events.pipe(filter$1((event) => event instanceof NavigationEnd)).subscribe(() => {
+            this.hideMenu();
+        });
+    }
+    isOutsideClicked(event) {
+        const sidebarEl = document.querySelector('.layout-sidebar');
+        const topbarEl = document.querySelector('.layout-menu-button');
+        const eventTarget = event.target;
+        return !(sidebarEl?.isSameNode(eventTarget) ||
+            sidebarEl?.contains(eventTarget) ||
+            topbarEl?.isSameNode(eventTarget) ||
+            topbarEl?.contains(eventTarget));
+    }
+    hideMenu() {
+        this.layoutService.layoutState.update((prev) => ({
+            ...prev,
+            overlayMenuActive: false,
+            staticMenuMobileActive: false,
+            menuHoverActive: false
+        }));
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+            this.menuOutsideClickListener = null;
+        }
+        this.unblockBodyScroll();
+    }
+    blockBodyScroll() {
+        if (document.body.classList) {
+            document.body.classList.add('blocked-scroll');
+        }
+        else {
+            document.body.className += ' blocked-scroll';
+        }
+    }
+    unblockBodyScroll() {
+        if (document.body.classList) {
+            document.body.classList.remove('blocked-scroll');
+        }
+        else {
+            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+    get containerClass() {
+        return {
+            'layout-overlay': this.layoutService.layoutConfig().menuMode === 'overlay',
+            'layout-static': this.layoutService.layoutConfig().menuMode === 'static',
+            'layout-static-inactive': this.layoutService.layoutState().staticMenuDesktopInactive &&
+                this.layoutService.layoutConfig().menuMode === 'static',
+            'layout-overlay-active': this.layoutService.layoutState().overlayMenuActive,
+            'layout-mobile-active': this.layoutService.layoutState().staticMenuMobileActive
+        };
+    }
+    ngOnDestroy() {
+        if (this.overlayMenuOpenSubscription) {
+            this.overlayMenuOpenSubscription.unsubscribe();
+        }
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: AppLayoutComponent, isStandalone: true, selector: "app-layout", providers: [MenuService, Menu], viewQueries: [{ propertyName: "appSidebar", first: true, predicate: SidebarComponent, descendants: true }, { propertyName: "appTopBar", first: true, predicate: AppTopbar, descendants: true }], ngImport: i0, template: `
+    <div class="layout-wrapper" [ngClass]="containerClass">
+      <app-topbar></app-topbar>
+      <app-sidebar></app-sidebar>
+      <div class="layout-main-container">
+        <div class="layout-main">
+          <router-outlet></router-outlet>
+        </div>
+        <app-footer></app-footer>
+      </div>
+      <div class="layout-mask animate-fadein"></div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AppTopbar, selector: "app-topbar" }, { kind: "component", type: SidebarComponent, selector: "app-sidebar" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: FooterComponent, selector: "app-footer" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-layout',
+                    standalone: true,
+                    imports: [CommonModule, AppTopbar, SidebarComponent, RouterModule, FooterComponent],
+                    template: `
+    <div class="layout-wrapper" [ngClass]="containerClass">
+      <app-topbar></app-topbar>
+      <app-sidebar></app-sidebar>
+      <div class="layout-main-container">
+        <div class="layout-main">
+          <router-outlet></router-outlet>
+        </div>
+        <app-footer></app-footer>
+      </div>
+      <div class="layout-mask animate-fadein"></div>
+    </div>
+  `,
+                    providers: [MenuService, Menu]
+                }]
+        }], ctorParameters: () => [], propDecorators: { appSidebar: [{
+                type: ViewChild,
+                args: [SidebarComponent]
+            }], appTopBar: [{
+                type: ViewChild,
+                args: [AppTopbar]
+            }] } });
+
+class AppFloatingConfiguratorComponent {
+    constructor() {
+        this.LayoutService = inject(LayoutService);
+        this.isDarkTheme = computed(() => this.LayoutService.layoutConfig().darkTheme, ...(ngDevMode ? [{ debugName: "isDarkTheme" }] : []));
+    }
+    toggleDarkMode() {
+        this.LayoutService.layoutConfig.update((state) => ({
+            ...state,
+            darkTheme: !state.darkTheme
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppFloatingConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: AppFloatingConfiguratorComponent, isStandalone: true, selector: "app-floating-configurator", ngImport: i0, template: `
+    <div class="fixed flex gap-4 top-8 right-8">
+      <p-button
+        id="oip-app-floating-configurator-dark-theme-button"
+        severity="secondary"
+        type="button"
+        [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'"
+        [rounded]="true"
+        (onClick)="toggleDarkMode()" />
+      <div class="relative">
+        <p-button
+          enterActiveClass="animate-scalein"
+          enterFromClass="hidden"
+          icon="pi pi-palette"
+          id="oip-app-floating-configurator-next-button"
+          leaveActiveClass="animate-fadeout"
+          leaveToClass="hidden"
+          pStyleClass="@next"
+          type="button"
+          [hideOnOutsideClick]="true"
+          [rounded]="true" />
+        <app-configurator />
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i4.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfiguratorComponent, selector: "app-configurator" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppFloatingConfiguratorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-floating-configurator',
+                    imports: [ButtonModule, StyleClassModule, AppConfiguratorComponent],
+                    template: `
+    <div class="fixed flex gap-4 top-8 right-8">
+      <p-button
+        id="oip-app-floating-configurator-dark-theme-button"
+        severity="secondary"
+        type="button"
+        [icon]="isDarkTheme() ? 'pi pi-moon' : 'pi pi-sun'"
+        [rounded]="true"
+        (onClick)="toggleDarkMode()" />
+      <div class="relative">
+        <p-button
+          enterActiveClass="animate-scalein"
+          enterFromClass="hidden"
+          icon="pi pi-palette"
+          id="oip-app-floating-configurator-next-button"
+          leaveActiveClass="animate-fadeout"
+          leaveToClass="hidden"
+          pStyleClass="@next"
+          type="button"
+          [hideOnOutsideClick]="true"
+          [rounded]="true" />
+        <app-configurator />
+      </div>
+    </div>
+  `
+                }]
+        }] });
+
+class NotfoundComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NotfoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: NotfoundComponent, isStandalone: true, selector: "app-notfound", ngImport: i0, template: ` <app-floating-configurator />
+    <div class="flex items-center justify-center min-h-screen overflow-hidden">
+      <div class="flex flex-col items-center justify-center">
+        <div
+          style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color), transparent 60%) 10%, var(--surface-ground) 30%)">
+          <div
+            class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center"
+            style="border-radius: 53px">
+            <div class="flex flex-col items-center justify-center">
+              <logo height="96" width="96"></logo>
+            </div>
+            <span class="text-primary font-bold text-3xl">404</span>
+            <h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
+            <div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
+            <p-button id="oip-app-notfound-go-to-home-button" label="Go to home" routerLink="/" />
+          </div>
+        </div>
+      </div>
+    </div>`, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LogoComponent, selector: "logo", inputs: ["width", "height"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AppFloatingConfiguratorComponent, selector: "app-floating-configurator" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NotfoundComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-notfound',
+                    template: ` <app-floating-configurator />
+    <div class="flex items-center justify-center min-h-screen overflow-hidden">
+      <div class="flex flex-col items-center justify-center">
+        <div
+          style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-color), transparent 60%) 10%, var(--surface-ground) 30%)">
+          <div
+            class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20 flex flex-col items-center"
+            style="border-radius: 53px">
+            <div class="flex flex-col items-center justify-center">
+              <logo height="96" width="96"></logo>
+            </div>
+            <span class="text-primary font-bold text-3xl">404</span>
+            <h1 class="text-surface-900 dark:text-surface-0 font-bold text-3xl lg:text-5xl mb-2">Not Found</h1>
+            <div class="text-surface-600 dark:text-surface-200 mb-8">Requested resource is not available.</div>
+            <p-button id="oip-app-notfound-go-to-home-button" label="Go to home" routerLink="/" />
+          </div>
+        </div>
+      </div>
+    </div>`,
+                    imports: [RouterLink, LogoComponent, Button, AppFloatingConfiguratorComponent],
+                    standalone: true
+                }]
+        }] });
+
+class UnauthorizedComponent {
+    constructor() {
+        this.securityService = inject(SecurityService);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UnauthorizedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: UnauthorizedComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+    <app-floating-configurator />
+    <div
+      class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
+      <div class="flex flex-col items-center justify-center">
+        <div
+          style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
+          <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
+            <div class="flex flex-col items-center justify-center">
+              <logo [height]="96" [width]="96" />
+            </div>
+            <div class="text-center mb-8">
+              <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
+                {{ 'unauthorized.welcomeToOip' | translate }}
+              </div>
+              <span class="text-muted-color font-medium">{{ 'unauthorized.signInToContinue' | translate }}</span>
+            </div>
+            <div>
+              <p-button
+                id="oip-unauthorized-error-sign-in-button"
+                label="{{ 'unauthorized.signIn' | translate }}"
+                styleClass="w-full"
+                (click)="securityService.authorize()"></p-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: RippleModule }, { kind: "component", type: LogoComponent, selector: "logo", inputs: ["width", "height"] }, { kind: "component", type: AppFloatingConfiguratorComponent, selector: "app-floating-configurator" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: UnauthorizedComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <app-floating-configurator />
+    <div
+      class="bg-surface-50 dark:bg-surface-950 flex items-center justify-center min-h-screen min-w-[100vw] overflow-hidden">
+      <div class="flex flex-col items-center justify-center">
+        <div
+          style="border-radius: 56px; padding: 0.3rem; background: linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)">
+          <div class="w-full bg-surface-0 dark:bg-surface-900 py-20 px-8 sm:px-20" style="border-radius: 53px">
+            <div class="flex flex-col items-center justify-center">
+              <logo [height]="96" [width]="96" />
+            </div>
+            <div class="text-center mb-8">
+              <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium mb-4">
+                {{ 'unauthorized.welcomeToOip' | translate }}
+              </div>
+              <span class="text-muted-color font-medium">{{ 'unauthorized.signInToContinue' | translate }}</span>
+            </div>
+            <div>
+              <p-button
+                id="oip-unauthorized-error-sign-in-button"
+                label="{{ 'unauthorized.signIn' | translate }}"
+                styleClass="w-full"
+                (click)="securityService.authorize()"></p-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+                    imports: [
+                        ButtonModule,
+                        RippleModule,
+                        LogoComponent,
+                        AppFloatingConfiguratorComponent,
+                        ReactiveFormsModule,
+                        TranslatePipe
+                    ]
+                }]
+        }] });
+
+class ErrorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: ErrorComponent, isStandalone: true, selector: "app-error", ngImport: i0, template: `<div
+    class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
+    <div class="flex flex-column align-items-center justify-content-center">
+      <img alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" src="assets/demo/images/error/logo-error.svg" />
+      <div
+        style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
+        <div
+          class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center"
+          style="border-radius:53px">
+          <div class="grid flex flex-column align-items-center">
+            <div
+              class="flex justify-content-center align-items-center bg-pink-500 border-circle"
+              style="height:3.2rem; width:3.2rem;">
+              <i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
+            </div>
+            <h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
+            <span class="text-600 mb-5">Requested resource is not available.</span>
+            <img alt="Error" class="mb-5" src="assets/demo/images/error/asset-error.svg" width="80%" />
+            <button
+              class="p-button-text"
+              icon="pi pi-arrow-left"
+              id="oip-app-error-go-to-dashboard-button"
+              label="Go to Dashboard"
+              pButton
+              pRipple
+              [routerLink]="['/']"></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$1.Ripple, selector: "[pRipple]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ErrorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-error',
+                    template: `<div
+    class="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
+    <div class="flex flex-column align-items-center justify-content-center">
+      <img alt="Sakai logo" class="mb-5 w-6rem flex-shrink-0" src="assets/demo/images/error/logo-error.svg" />
+      <div
+        style="border-radius:56px; padding:0.3rem; background: linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%);">
+        <div
+          class="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center"
+          style="border-radius:53px">
+          <div class="grid flex flex-column align-items-center">
+            <div
+              class="flex justify-content-center align-items-center bg-pink-500 border-circle"
+              style="height:3.2rem; width:3.2rem;">
+              <i class="pi pi-fw pi-exclamation-circle text-2xl text-white"></i>
+            </div>
+            <h1 class="text-900 font-bold text-5xl mb-2">Error Occured</h1>
+            <span class="text-600 mb-5">Requested resource is not available.</span>
+            <img alt="Error" class="mb-5" src="assets/demo/images/error/asset-error.svg" width="80%" />
+            <button
+              class="p-button-text"
+              icon="pi pi-arrow-left"
+              id="oip-app-error-go-to-dashboard-button"
+              label="Go to Dashboard"
+              pButton
+              pRipple
+              [routerLink]="['/']"></button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>`,
+                    standalone: true,
+                    imports: [ButtonModule, RippleModule, RouterLink]
+                }]
+        }] });
+
+class ProfileComponent {
+    constructor() {
+        this.userService = inject(UserService);
+        this.msgService = inject(MsgService);
+        this.translateService = inject(TranslateService);
+    }
+    onBasicUploadAuto($event) {
+        this.msgService.success(this.translateService.instant('profileComponent.successfullyUploaded'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: ProfileComponent, isStandalone: true, selector: "user-profile", ngImport: i0, template: `
+    <p-avatar
+      class="mr-2"
+      id="oip-user-profile-photo-avatar"
+      shape="circle"
+      size="xlarge"
+      [image]="userService.photoLoaded ? userService.photo : null"/>
+    <div class="mt-2">
+      <p-fileupload
+        accept="image/*"
+        chooseIcon="pi pi-upload"
+        chooseLabel="{{ 'profileComponent.changePhoto' | translate }}"
+        id="oip-user-profile-file-upload"
+        maxFileSize="1000000"
+        mode="basic"
+        name="files"
+        url="/api/user-profile/post-user-photo"
+        withCredentials="true"
+        [auto]="true"
+        (onUpload)="onBasicUploadAuto($event)"/>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i1$5.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "ngmodule", type: ImageModule }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i5$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ProfileComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'user-profile',
+                    standalone: true,
+                    imports: [FileUploadModule, ImageModule, ImageModule, FileUploadModule, ImageModule, AvatarModule, TranslatePipe],
+                    template: `
+    <p-avatar
+      class="mr-2"
+      id="oip-user-profile-photo-avatar"
+      shape="circle"
+      size="xlarge"
+      [image]="userService.photoLoaded ? userService.photo : null"/>
+    <div class="mt-2">
+      <p-fileupload
+        accept="image/*"
+        chooseIcon="pi pi-upload"
+        chooseLabel="{{ 'profileComponent.changePhoto' | translate }}"
+        id="oip-user-profile-file-upload"
+        maxFileSize="1000000"
+        mode="basic"
+        name="files"
+        url="/api/user-profile/post-user-photo"
+        withCredentials="true"
+        [auto]="true"
+        (onUpload)="onBasicUploadAuto($event)"/>
+    </div>
+  `
+                }]
+        }] });
+
+/**
+ * Service for managing translation loading in the application
+ */
+class L10nService {
+    constructor() {
+        this.loadedTranslations = new Set();
+        this.httpClient = inject(HttpClient$1);
+        this.translateService = inject(TranslateService);
+    }
+    /**
+     * Loads translations for a specific component
+     * @param component - Name of the component to load translations for
+     */
+    async loadComponentTranslations(component) {
+        const lang = this.translateService.currentLang;
+        await 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
+     */
+    async get(key) {
+        await this.loadComponentTranslations(key);
+        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
+     */
+    async loadTranslations(component, lang) {
+        // Create unique key for this component-language combination
+        const key = `${component}.${lang}`;
+        // Skip if translations are already loaded
+        if (this.loadedTranslations.has(key)) {
+            return;
+        }
+        try {
+            // Load translation file from assets
+            const translations = await lastValueFrom(this.httpClient.get(`./assets/i18n/${component}.${lang}.json`));
+            // Get existing translations for the language
+            const current = this.translateService.translations[lang] || {};
+            // Merge new translations with existing ones
+            this.translateService.setTranslation(lang, { ...current, ...translations }, true);
+            // Mark these translations as loaded
+            this.loadedTranslations.add(key);
+        }
+        catch (e) {
+            console.warn(`No translations found for ${component}.${lang}.json`);
+            console.error(e);
+        }
+    }
+    /**
+     * Changes the lang currently used
+     */
+    use(selectedLanguage) {
+        this.translateService.use(selectedLanguage);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: L10nService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: L10nService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: L10nService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ConfigComponent {
+    constructor() {
+        this.layoutService = inject(LayoutService);
+        this.l10nService = inject(L10nService);
+        this.userService = inject(UserService);
+        this.securityService = inject(SecurityService);
+        this.menuService = inject(MenuService);
+        this.l10n = {};
+        this.languages = [
+            { value: 'en', label: 'English' },
+            { value: 'ru', label: 'Русский' }
+        ];
+        this.selectedLanguage = this.layoutService.language();
+    }
+    async ngOnInit() {
+        (await this.l10nService.get('config')).subscribe((l10n) => {
+            this.l10n = l10n;
+        });
+    }
+    /**
+     * Changes the application's language.
+     * @return {void}
+     */
+    changeLanguage() {
+        this.layoutService.layoutConfig.update((config) => ({
+            ...config,
+            language: this.selectedLanguage
+        }));
+        this.l10nService.use(this.selectedLanguage);
+    }
+    async onSwitchChange() {
+        await this.menuService.loadMenu();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: ConfigComponent, isStandalone: true, selector: "app-config", ngImport: i0, template: `
+    <p-fluid>
+      <div class="flex flex-col md:flex-row gap-4">
+        <div class="md:w-1/2">
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ l10n.profile }}</div>
+            <div class="flex justify-content-end flex-wrap">
+              {{ userService.userName }}
+            </div>
+            <label>
+              {{ l10n.photo }}
+              <span
+                class="pi pi-question-circle"
+                pTooltip="{{ l10n.usePhoto256x256Pixel }}"
+                tooltipPosition="right"></span>
+            </label>
+            <div class="flex justify-content-end flex-wrap">
+              <user-profile></user-profile>
+            </div>
+          </div>
+        </div>
+        <div class="md:w-1/2">
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ l10n.localization }}</div>
+            <label> {{ l10n.selectLanguage }} </label>
+            <div class="flex justify-content-end flex-wrap">
+              <p-select
+                class="w-full md:w-56"
+                id="oip-app-config-language-select"
+                optionLabel="label"
+                optionValue="value"
+                [options]="languages"
+                [(ngModel)]="selectedLanguage"
+                (onChange)="changeLanguage()" />
+            </div>
+          </div>
+        </div>
+        @if (securityService.isAdmin) {
+          <div class="md:w-1/2">
+            <div class="card flex flex-col gap-4">
+              <div class="font-semibold text-xl">{{ l10n.menu }}</div>
+              <div class="flex items-center gap-2">
+                <label for="oip-app-config-admin-mode">{{ l10n.all }}</label>
+                <p-toggle-switch
+                  id="oip-app-config-admin-mode"
+                  [(ngModel)]="menuService.adminMode"
+                  (onChange)="onSwitchChange()"></p-toggle-switch>
+              </div>
+              <div class="flex items-center gap-2">
+                <label for="oip-app-config-admin-mode">{{ l10n.moduleManagement }}</label>
+                <p-button icon="pi pi-cog" label="{{ l10n.goTo }}" routerLink="/modules" />
+              </div>
+            </div>
+          </div>
+        }
+      </div>
+    </p-fluid>
+  `, isInline: true, dependencies: [{ kind: "component", type: ProfileComponent, selector: "user-profile" }, { kind: "component", type: Fluid, selector: "p-fluid" }, { 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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: TableModule }, { kind: "ngmodule", type: ToggleSwitchModule }, { kind: "component", type: i2$2.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: ConfigComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-config',
+                    template: `
+    <p-fluid>
+      <div class="flex flex-col md:flex-row gap-4">
+        <div class="md:w-1/2">
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ l10n.profile }}</div>
+            <div class="flex justify-content-end flex-wrap">
+              {{ userService.userName }}
+            </div>
+            <label>
+              {{ l10n.photo }}
+              <span
+                class="pi pi-question-circle"
+                pTooltip="{{ l10n.usePhoto256x256Pixel }}"
+                tooltipPosition="right"></span>
+            </label>
+            <div class="flex justify-content-end flex-wrap">
+              <user-profile></user-profile>
+            </div>
+          </div>
+        </div>
+        <div class="md:w-1/2">
+          <div class="card flex flex-col gap-4">
+            <div class="font-semibold text-xl">{{ l10n.localization }}</div>
+            <label> {{ l10n.selectLanguage }} </label>
+            <div class="flex justify-content-end flex-wrap">
+              <p-select
+                class="w-full md:w-56"
+                id="oip-app-config-language-select"
+                optionLabel="label"
+                optionValue="value"
+                [options]="languages"
+                [(ngModel)]="selectedLanguage"
+                (onChange)="changeLanguage()" />
+            </div>
+          </div>
+        </div>
+        @if (securityService.isAdmin) {
+          <div class="md:w-1/2">
+            <div class="card flex flex-col gap-4">
+              <div class="font-semibold text-xl">{{ l10n.menu }}</div>
+              <div class="flex items-center gap-2">
+                <label for="oip-app-config-admin-mode">{{ l10n.all }}</label>
+                <p-toggle-switch
+                  id="oip-app-config-admin-mode"
+                  [(ngModel)]="menuService.adminMode"
+                  (onChange)="onSwitchChange()"></p-toggle-switch>
+              </div>
+              <div class="flex items-center gap-2">
+                <label for="oip-app-config-admin-mode">{{ l10n.moduleManagement }}</label>
+                <p-button icon="pi pi-cog" label="{{ l10n.goTo }}" routerLink="/modules" />
+              </div>
+            </div>
+          </div>
+        }
+      </div>
+    </p-fluid>
+  `,
+                    imports: [ProfileComponent, Fluid, Tooltip, FormsModule, Select, TableModule, ToggleSwitchModule, RouterLink, Button]
+                }]
+        }], ctorParameters: () => [] });
+
+class DbMigrationComponent extends BaseModuleComponent {
+    async ngOnInit() {
+        await super.ngOnInit();
+        await this.refreshAction();
+    }
+    async refreshAction() {
+        this.getData()
+            .then((response) => {
+            this.data = response;
+        })
+            .catch((error) => {
+            console.log(error);
+            this.msgService.error('Error refreshing database');
+        });
+    }
+    async getData() {
+        return this.baseDataService.sendRequest(`api/${this.controller}/get-migrations`, 'GET');
+    }
+    async applyMigration(rowData) {
+        const request = { name: rowData.name };
+        return this.baseDataService.sendRequest(`api/${this.controller}/apply-migration`, 'POST', request);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DbMigrationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: DbMigrationComponent, isStandalone: true, selector: "db-migration", providers: [ConfirmationService], usesInheritance: true, ngImport: i0, template: `
+    <div *ngIf="isContent" class="card" style="height: 100%">
+      <p-confirmDialog/>
+      <div>
+        <h5>Migration manager</h5>
+        <div class="flex flex-row gap-2">
+          <p-button
+            icon="pi pi-refresh"
+            pTooltip="Refresh"
+            severity="secondary"
+            tooltipPosition="bottom"
+            [outlined]="true"
+            (click)="refreshAction()"/>
+          <p-button
+            icon="pi pi-filter-slash"
+            pTooltip="Clean filter"
+            severity="secondary"
+            tooltipPosition="bottom"
+            [outlined]="true"
+            (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">
+                  Migration name
+                  <p-columnFilter display="menu" field="name" type="text"/>
+                </th>
+                <th scope="col">Applied</th>
+                <th scope="col">Exist</th>
+                <th>Pending</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>
+                  <p-button
+                    *ngIf="rowData.applied"
+                    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="Apply migration"
+                    severity="secondary"
+                    tooltipPosition="left"
+                    [rounded]="true"
+                    [text]="true"
+                    (click)="applyMigration(rowData)">
+                  </p-button>
+                </td>
+              </tr>
+            </ng-template>
+          </p-table>
+        </div>
+      </div>
+    </div>
+    @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$3.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$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "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", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: DbMigrationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [
+                        TableModule,
+                        SharedModule,
+                        TagModule,
+                        InputTextModule,
+                        TextareaModule,
+                        ButtonModule,
+                        FormsModule,
+                        ConfirmDialog,
+                        NgIf,
+                        SecurityComponent,
+                        Tooltip
+                    ],
+                    selector: 'db-migration',
+                    template: `
+    <div *ngIf="isContent" class="card" style="height: 100%">
+      <p-confirmDialog/>
+      <div>
+        <h5>Migration manager</h5>
+        <div class="flex flex-row gap-2">
+          <p-button
+            icon="pi pi-refresh"
+            pTooltip="Refresh"
+            severity="secondary"
+            tooltipPosition="bottom"
+            [outlined]="true"
+            (click)="refreshAction()"/>
+          <p-button
+            icon="pi pi-filter-slash"
+            pTooltip="Clean filter"
+            severity="secondary"
+            tooltipPosition="bottom"
+            [outlined]="true"
+            (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">
+                  Migration name
+                  <p-columnFilter display="menu" field="name" type="text"/>
+                </th>
+                <th scope="col">Applied</th>
+                <th scope="col">Exist</th>
+                <th>Pending</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>
+                  <p-button
+                    *ngIf="rowData.applied"
+                    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="Apply migration"
+                    severity="secondary"
+                    tooltipPosition="left"
+                    [rounded]="true"
+                    [text]="true"
+                    (click)="applyMigration(rowData)">
+                  </p-button>
+                </td>
+              </tr>
+            </ng-template>
+          </p-table>
+        </div>
+      </div>
+    </div>
+    @if (isSecurity) {
+      <security [controller]="controller" [id]="id"/>
+    }
+  `,
+                    providers: [ConfirmationService]
+                }]
+        }] });
+
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+/*
+ * ---------------------------------------------------------------
+ * ## THIS FILE WAS GENERATED VIA SWAGGER-TYPESCRIPT-API        ##
+ * ##                                                           ##
+ * ## AUTHOR: acacode                                           ##
+ * ## SOURCE: https://github.com/acacode/swagger-typescript-api ##
+ * ---------------------------------------------------------------
+ */
+class Module extends HttpClient {
+    constructor() {
+        super(...arguments);
+        /**
+         * @description Retrieves all modules stored in the system.
+         *
+         * @tags Module
+         * @name moduleGetAll
+         * @request GET:/api/module/get-all
+         * @secure
+         */
+        this.moduleGetAll = (params = {}) => this.request({
+            path: `/api/module/get-all`,
+            method: "GET",
+            secure: true,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Inserts a new module into the system.
+         *
+         * @tags Module
+         * @name moduleInsert
+         * @request POST:/api/module/insert
+         * @secure
+         */
+        this.moduleInsert = (data, params = {}) => this.request({
+            path: `/api/module/insert`,
+            method: "POST",
+            body: data,
+            secure: true,
+            type: ContentType.Json,
+            ...params,
+        });
+        /**
+         * @description Deletes a module by its identifier.
+         *
+         * @tags Module
+         * @name moduleDelete
+         * @request DELETE:/api/module/delete
+         * @secure
+         */
+        this.moduleDelete = (data, params = {}) => this.request({
+            path: `/api/module/delete`,
+            method: "DELETE",
+            body: data,
+            secure: true,
+            type: ContentType.Json,
+            ...params,
+        });
+        /**
+         * @description Returns all registered modules and indicates whether each one is currently loaded into the application.
+         *
+         * @tags Module
+         * @name moduleGetModulesWithLoadStatus
+         * @request GET:/api/module/get-modules-with-load-status
+         * @secure
+         */
+        this.moduleGetModulesWithLoadStatus = (params = {}) => this.request({
+            path: `/api/module/get-modules-with-load-status`,
+            method: "GET",
+            secure: true,
+            format: "json",
+            ...params,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Module, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Module }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: Module, decorators: [{
+            type: Injectable
+        }] });
+
+class AppModulesComponent {
+    constructor() {
+        this.dataService = inject(BaseDataService);
+        this.modules = [];
+        this.msgService = inject(MsgService);
+        this.confirmationService = inject(ConfirmationService);
+        this.l10nService = inject(L10nService);
+        this.l10n = {};
+        this.titleService = inject(AppTitleService);
+        this.moduleService = inject(Module);
+    }
+    async ngOnInit() {
+        (await this.l10nService.get('app-modules')).subscribe((l) => {
+            this.l10n = l;
+        });
+        this.titleService.setTitle(this.l10n.title);
+        await this.refreshAction();
+    }
+    async refreshAction() {
+        this.modules = await this.moduleService.moduleGetModulesWithLoadStatus();
+    }
+    deleteModule(module) {
+        this.confirmationService.confirm({
+            header: this.l10n.confirm.header,
+            message: this.l10n.confirm.message,
+            icon: 'pi pi-trash',
+            rejectButtonProps: {
+                label: this.l10n.confirm.cancel,
+                severity: 'secondary',
+                outlined: true
+            },
+            acceptButtonProps: {
+                label: this.l10n.confirm.delete,
+                severity: 'danger'
+            },
+            accept: async () => {
+                this.dataService
+                    .sendRequest(`api/module/delete`, 'DELETE', {
+                    moduleId: module.moduleId
+                })
+                    .then(() => this.refreshAction())
+                    .catch((error) => console.error(error));
+                this.msgService.success(this.l10n.messages.deleteSuccess);
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppModulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: AppModulesComponent, isStandalone: true, selector: "app-modules", providers: [ConfirmationService, Module], ngImport: i0, template: `
+    <p-confirmDialog></p-confirmDialog>
+    <div class="flex flex-col md:flex-row gap-4">
+      <div class="card w-full">
+        <div class="font-semibold text-xl mb-4">
+          {{ l10n.title }}
+        </div>
+        <div class="mb-4">
+          <p-toolbar>
+            <p-button
+              icon="pi pi-refresh"
+              rounded="true"
+              severity="secondary"
+              text="true"
+              tooltipPosition="bottom"
+              [pTooltip]="l10n.refreshTooltip"
+              (onClick)="refreshAction()"></p-button>
+          </p-toolbar>
+        </div>
+        <p-table class="mt-4" [paginator]="true" [rows]="100" [value]="modules">
+          <ng-template pTemplate="header">
+            <tr>
+              <th>{{ l10n.table.moduleId }}</th>
+              <th>{{ l10n.table.name }}</th>
+              <th>{{ l10n.table.currentlyLoaded }}</th>
+              <th style="width: 4rem"></th>
+            </tr>
+          </ng-template>
+          <ng-template let-module pTemplate="body">
+            <tr>
+              <td>{{ module.moduleId }}</td>
+              <td>{{ module.name }}</td>
+              <td>
+                <p-tag
+                  [severity]="module.currentlyLoaded ? 'success' : 'danger'"
+                  [value]="module.currentlyLoaded ? l10n.table.yes : l10n.table.no"></p-tag>
+              </td>
+              <td>
+                <p-button
+                  icon="pi pi-trash"
+                  rounded="true"
+                  severity="danger"
+                  text="true"
+                  tooltipPosition="bottom"
+                  [pTooltip]="l10n.table.deleteTooltip"
+                  (onClick)="deleteModule(module)"></p-button>
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$2.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { 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", "visible", "position", "draggable"], outputs: ["onHide"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AppModulesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [FormsModule, TableModule, Tag, ButtonModule, ToolbarModule, Tooltip, ConfirmDialog],
+                    providers: [ConfirmationService, Module],
+                    selector: 'app-modules',
+                    template: `
+    <p-confirmDialog></p-confirmDialog>
+    <div class="flex flex-col md:flex-row gap-4">
+      <div class="card w-full">
+        <div class="font-semibold text-xl mb-4">
+          {{ l10n.title }}
+        </div>
+        <div class="mb-4">
+          <p-toolbar>
+            <p-button
+              icon="pi pi-refresh"
+              rounded="true"
+              severity="secondary"
+              text="true"
+              tooltipPosition="bottom"
+              [pTooltip]="l10n.refreshTooltip"
+              (onClick)="refreshAction()"></p-button>
+          </p-toolbar>
+        </div>
+        <p-table class="mt-4" [paginator]="true" [rows]="100" [value]="modules">
+          <ng-template pTemplate="header">
+            <tr>
+              <th>{{ l10n.table.moduleId }}</th>
+              <th>{{ l10n.table.name }}</th>
+              <th>{{ l10n.table.currentlyLoaded }}</th>
+              <th style="width: 4rem"></th>
+            </tr>
+          </ng-template>
+          <ng-template let-module pTemplate="body">
+            <tr>
+              <td>{{ module.moduleId }}</td>
+              <td>{{ module.name }}</td>
+              <td>
+                <p-tag
+                  [severity]="module.currentlyLoaded ? 'success' : 'danger'"
+                  [value]="module.currentlyLoaded ? l10n.table.yes : l10n.table.no"></p-tag>
+              </td>
+              <td>
+                <p-button
+                  icon="pi pi-trash"
+                  rounded="true"
+                  severity="danger"
+                  text="true"
+                  tooltipPosition="bottom"
+                  [pTooltip]="l10n.table.deleteTooltip"
+                  (onClick)="deleteModule(module)"></p-button>
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
+    </div>
+  `
+                }]
+        }] });
+
+/**
+ * A route guard that ensures the user is authenticated and has a valid access token.
+ * If the access token is expired, it attempts to refresh the session.
+ * If authentication fails or refresh is unsuccessful, redirects to the unauthorized page.
+ */
+class AuthGuardService {
+    constructor() {
+        this.oidcSecurityService = inject(SecurityService);
+        this.router = inject(Router);
+    }
+    /**
+     * Checks whether the route can be activated.
+     * - Returns `true` if the user is authenticated and the token is valid.
+     * - Attempts to refresh the token if expired.
+     * - Redirects to `/unauthorized` if not authenticated or refresh fails.
+     *
+     * @returns {Observable<boolean | UrlTree>} A stream resolving to true (allow), or UrlTree (redirect).
+     */
+    canActivate() {
+        return combineLatest([this.oidcSecurityService.isAuthenticated(), this.oidcSecurityService.isTokenExpired()]).pipe(switchMap(([authenticated, tokenExpired]) => {
+            if (!authenticated) {
+                return of(this.router.parseUrl('/unauthorized'));
+            }
+            if (!tokenExpired) {
+                return of(true);
+            }
+            // Token is expired; attempt to refresh
+            return this.tryRefreshToken();
+        }));
+    }
+    /**
+     * Attempts to refresh the session using the refresh token.
+     * If successful, allows route activation; otherwise, redirects to `/unauthorized`.
+     *
+     * @returns {boolean | UrlTree} A stream resolving to true or redirect UrlTree.
+     */
+    tryRefreshToken() {
+        return this.oidcSecurityService.forceRefreshSession().pipe(map((refreshSuccess) => {
+            return refreshSuccess ? true : this.router.parseUrl('/unauthorized');
+        }), catchError((err) => {
+            console.warn(err);
+            return of(this.router.parseUrl('/unauthorized'));
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthGuardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthGuardService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthGuardService, decorators: [{
+            type: Injectable
+        }] });
+
+class SecurityStorageService {
+    read(key) {
+        return localStorage.getItem(key);
+    }
+    write(key, value) {
+        localStorage.setItem(key, value);
+    }
+    remove(key) {
+        localStorage.removeItem(key);
+    }
+    clear() {
+        localStorage.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurityStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurityStorageService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurityStorageService, decorators: [{
+            type: Injectable
+        }] });
+
+const langIntercept = (req, next) => {
+    const layoutService = inject(LayoutService);
+    const lang = layoutService.language() ? layoutService.language() : 'en';
+    const httpHeaders = req.headers.set('Accept-language', lang);
+    const authReq = req.clone({
+        headers: httpHeaders
+    });
+    return next(authReq);
+};
+
+class SecurePipe {
+    constructor() {
+        this.http = inject(HttpClient$1);
+        this.sanitizer = inject(DomSanitizer);
+    }
+    transform(url) {
+        return this.http
+            .get(url, { responseType: 'blob' })
+            .pipe(map$1((val) => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val))));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.2", ngImport: i0, type: SecurePipe, isStandalone: true, name: "secure" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SecurePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'secure'
+                }]
+        }] });
+
+/**
+ * Load keycloak settings from backend and save to sessionStorage
+ * @param httpClient
+ * @returns StsConfigHttpLoader
+ */
+const httpLoaderAuthFactory = (httpClient) => {
+    const KEYCLOAK_SETTINGS_KEY = 'keycloak-client-settings';
+    const settingsStings = sessionStorage.getItem(KEYCLOAK_SETTINGS_KEY);
+    if (settingsStings) {
+        const config$ = new Observable((subscribe) => {
+            subscribe.next(JSON.parse(settingsStings));
+        });
+        return new StsConfigHttpLoader(config$);
+    }
+    else {
+        const config$ = httpClient.get(`api/security/get-keycloak-client-settings`).pipe(map$1((config) => {
+            const authConfig = {
+                authority: config.authority,
+                redirectUrl: window.location.origin,
+                postLogoutRedirectUri: window.location.origin,
+                clientId: config.clientId,
+                scope: config.scope,
+                responseType: config.responseType,
+                useRefreshToken: config.useRefreshToken,
+                silentRenew: config.silentRenew,
+                logLevel: config.logLevel,
+                secureRoutes: config.secureRoutes
+            };
+            sessionStorage.setItem(KEYCLOAK_SETTINGS_KEY, JSON.stringify(authConfig));
+            return authConfig;
+        }));
+        return new StsConfigHttpLoader(config$);
+    }
+};
+
+// Components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppLayoutComponent, AppModulesComponent, AppTopbar, AuthGuardService, BaseDataService, BaseModuleComponent, ConfigComponent, DbMigrationComponent, ErrorComponent, FooterComponent, LayoutService, LogoComponent, MenuComponent, MenuService, MsgService, NotfoundComponent, ProfileComponent, SecurePipe, SecurityComponent, SecurityDataService, SecurityService, SecurityStorageService, SidebarComponent, TopBarService, UnauthorizedComponent, UserService, httpLoaderAuthFactory, langIntercept };
+//# sourceMappingURL=oip-common.mjs.map