oip-common 0.0.36 → 0.0.37

package/fesm2022/oip-common.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, computed, effect, ChangeDetectorRef, Component, Input, PLATFORM_ID, InjectionToken, HostBinding, EventEmitter, Output, ViewChild, Renderer2, Pipe } from '@angular/core';
-import * as i2$5 from 'primeng/api';
+import { Injectable, inject, signal, computed, effect, ChangeDetectorRef, Component, Input, PLATFORM_ID, InjectionToken, HostBinding, EventEmitter, Output, ViewChild, Renderer2, SecurityContext, ChangeDetectionStrategy, Pipe } from '@angular/core';
+import * as i2$6 from 'primeng/api';
 import { MessageService, ConfirmationService, PrimeIcons, SharedModule } from 'primeng/api';
 import { HttpErrorResponse, HttpClient as HttpClient$1, HttpHeaders } from '@angular/common/http';
-import * as i2$3 from '@ngx-translate/core';
+import * as i2$4 from '@ngx-translate/core';
 import { TranslateService, TranslatePipe, TranslateModule } from '@ngx-translate/core';
-import * as i1$2 from '@angular/router';
+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';
@@ -13,12 +13,12 @@ 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 * as i1$2 from 'primeng/button';
 import { ButtonModule, Button } from 'primeng/button';
-import * as i5 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@angular/common';
-import { isPlatformBrowser, CommonModule, NgComponentOutlet, NgClass } from '@angular/common';
+import { isPlatformBrowser, CommonModule, NgComponentOutlet, NgClass, DatePipe } from '@angular/common';
 import * as i3$1 from 'primeng/styleclass';
 import { StyleClassModule } from 'primeng/styleclass';
 import { updatePreset, updateSurfacePalette, $t } from '@primeng/themes';
@@ -31,11 +31,11 @@ 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 i4 from 'primeng/avatar';
+import * as i2$2 from 'primeng/avatar';
 import { AvatarModule } from 'primeng/avatar';
-import * as i1$3 from 'primeng/contextmenu';
+import * as i1$4 from 'primeng/contextmenu';
 import { ContextMenuModule, ContextMenu } from 'primeng/contextmenu';
-import * as i2$2 from 'primeng/dialog';
+import * as i2$3 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import * as i3$3 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
@@ -43,19 +43,29 @@ import { trigger, state, transition, style, animate } from '@angular/animations'
 import * as i3$2 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import { ConfirmDialog } from 'primeng/confirmdialog';
-import * as i4$1 from 'primeng/select';
+import * as i4 from 'primeng/select';
 import { SelectModule, Select } from 'primeng/select';
-import * as i1$4 from 'primeng/fileupload';
+import * as i1$5 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
 import { ImageModule } from 'primeng/image';
-import * as i1$5 from 'primeng/table';
+import * as i1$6 from 'primeng/table';
 import { TableModule } from 'primeng/table';
-import * as i2$4 from 'primeng/toggleswitch';
+import * as i2$5 from 'primeng/toggleswitch';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import * as i9 from 'primeng/tag';
 import { TagModule, Tag } from 'primeng/tag';
-import { TextareaModule } from 'primeng/textarea';
-import * as i4$2 from 'primeng/toolbar';
+import { TextareaModule, Textarea } from 'primeng/textarea';
+import * as i4$1 from 'primeng/toolbar';
 import { ToolbarModule } from 'primeng/toolbar';
+import * as i5 from 'primeng/card';
+import { CardModule } from 'primeng/card';
+import { DividerModule } from 'primeng/divider';
+import * as i6 from 'primeng/panel';
+import { PanelModule } from 'primeng/panel';
+import * as i7 from 'primeng/popover';
+import { PopoverModule } from 'primeng/popover';
+import * as i8 from 'primeng/progressspinner';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
 import * as signalR from '@microsoft/signalr';
 
 class TopBarService {
@@ -145,6 +155,24 @@ class MsgService {
             life: life
         });
     }
+    extractErrorMessage(error, fallback) {
+        if (typeof error === 'object' &&
+            error &&
+            'error' in error &&
+            typeof error.error === 'object' &&
+            error.error &&
+            'message' in error.error &&
+            typeof error.error.message === 'string') {
+            return error.error.message;
+        }
+        if (typeof error === 'object' && error && 'message' in error && typeof error.message === 'string') {
+            return error.message;
+        }
+        return fallback;
+    }
+    errorFromException(error, fallback, summary = fallback, life = this.lifetime) {
+        this.error(this.extractErrorMessage(error, fallback), summary, life);
+    }
     contrast(detail, summary = this.translate.instant('msgService.error'), life = this.lifetime) {
         this.messageService.add({
             severity: 'contrast',
@@ -814,7 +842,7 @@ class SecurityComponent {
         </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", "ptTooltip"] }, { 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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+  `, 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", "ptTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SecurityComponent, decorators: [{
             type: Component,
@@ -1293,7 +1321,7 @@ class AppConfiguratorComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: 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"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i3.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppConfiguratorComponent, decorators: [{
             type: Component,
@@ -1734,7 +1762,7 @@ class AppTopbar {
         </div>
       </div>
     </div>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfiguratorComponent, selector: "app-configurator" }, { kind: "component", type: Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: TabList, selector: "p-tablist" }, { kind: "component", type: Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i4.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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+  </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: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfiguratorComponent, selector: "app-configurator" }, { kind: "component", type: Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: TabList, selector: "p-tablist" }, { kind: "component", type: Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppTopbar, decorators: [{
             type: Component,
@@ -1903,9 +1931,20 @@ var ContentType;
     ContentType["Text"] = "text/plain";
 })(ContentType || (ContentType = {}));
 class HttpClient {
-    constructor(apiConfig = {}) {
+    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 = {
@@ -1970,7 +2009,7 @@ class HttpClient {
             const requestParams = this.mergeRequestParams(params, secureParams);
             const queryString = query && this.toQueryString(query);
             const payloadFormatter = this.contentFormatters[type || ContentType.Json];
-            const responseFormat = format || requestParams.format;
+            let responseFormat = format || requestParams.format;
             return this.customFetch(`${baseUrl || this.baseUrl || ""}${path}${queryString ? `?${queryString}` : ""}`, {
                 ...requestParams,
                 headers: {
@@ -2016,7 +2055,9 @@ class HttpClient {
                 return data.data;
             });
         };
-        Object.assign(this, apiConfig);
+        this.securityService.getAccessToken().subscribe((token) => {
+            this.securityData = token;
+        });
     }
     encodeQueryParam(key, value) {
         const encodedKey = encodeURIComponent(key);
@@ -2054,13 +2095,13 @@ class HttpClient {
             },
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HttpClient, deps: "invalid", target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HttpClient, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HttpClient, providedIn: "root" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HttpClient, decorators: [{
             type: Injectable,
             args: [{ providedIn: "root" }]
-        }], ctorParameters: () => [{ type: undefined }] });
+        }], ctorParameters: () => [] });
 
 /* eslint-disable */
 /* tslint:disable */
@@ -2359,7 +2400,7 @@ class MenuItemComponent {
             },
             { separator: true, visible: this.hasVisibleNext(item) || this.hasVisiblePrev(item) },
             {
-                label: 'Up',
+                label: this.localization.moveUp,
                 icon: PrimeIcons.ANGLE_UP,
                 command: (event) => {
                     this.moveUp(item);
@@ -2369,7 +2410,7 @@ class MenuItemComponent {
                 visible: this.hasVisiblePrev(item)
             },
             {
-                label: 'Down',
+                label: this.localization.moveDown,
                 icon: PrimeIcons.ANGLE_DOWN,
                 command: (event) => {
                     this.moveDown(item);
@@ -2470,79 +2511,79 @@ class MenuItemComponent {
         const currentIndex = items.findIndex((item) => item.moduleInstanceId == currentItem.moduleInstanceId);
         return currentIndex < items.length - 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MenuItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.Router }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 />
-      @if (root && item.visible !== false) {
-        <div class="layout-menuitem-root-text" (contextmenu)="onContextMenu($event, item)">
-          {{ item.label }}
-        </div>
-      }
-      @if ((!item.routerLink || item.items) && item.visible !== false) {
-        <a
-          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>
-          @if (item.items) {
-            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
-          }
-        </a>
-      }
-      @if (item.routerLink && !item.items && item.visible !== false) {
-        <a
-          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>
-          @if (item.items) {
-            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
-          }
-        </a>
-      }
-
-      @if (item.items && item.visible !== false) {
-        <ul [@children]="submenuAnimation" (contextmenu)="onContextMenu($event, item)">
-          @for (child of item.items; track child; let i = $index) {
-            <li
-              app-menuitem
-              [class]="child.badgeClass"
-              [contextMenu]="contextMenu"
-              [index]="i"
-              [item]="child"
-              [menuItemCreateDialogComponent]="menuItemCreateDialogComponent"
-              [menuItemEditDialogComponent]="menuItemEditDialogComponent"
-              [parentKey]="key"></li>
-          }
-        </ul>
-      }
-    </ng-container>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MenuItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.Router }, { token: MenuService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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 />
+      @if (root && item.visible !== false) {
+        <div class="layout-menuitem-root-text" (contextmenu)="onContextMenu($event, item)">
+          {{ item.label }}
+        </div>
+      }
+      @if ((!item.routerLink || item.items) && item.visible !== false) {
+        <a
+          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>
+          @if (item.items) {
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+          }
+        </a>
+      }
+      @if (item.routerLink && !item.items && item.visible !== false) {
+        <a
+          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>
+          @if (item.items) {
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+          }
+        </a>
+      }
+
+      @if (item.items && item.visible !== false) {
+        <ul [@children]="submenuAnimation" (contextmenu)="onContextMenu($event, item)">
+          @for (child of item.items; track child; let i = $index) {
+            <li
+              app-menuitem
+              [class]="child.badgeClass"
+              [contextMenu]="contextMenu"
+              [index]="i"
+              [item]="child"
+              [menuItemCreateDialogComponent]="menuItemCreateDialogComponent"
+              [menuItemEditDialogComponent]="menuItemEditDialogComponent"
+              [parentKey]="key"></li>
+          }
+        </ul>
+      }
+    </ng-container>
   `, isInline: true, dependencies: [{ kind: "component", type: MenuItemComponent, selector: "[app-menuitem]", inputs: ["item", "index", "root", "parentKey", "menuItemCreateDialogComponent", "menuItemEditDialogComponent", "contextMenu"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$2.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: "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", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }], animations: [
             trigger('children', [
                 state('collapsed', style({
@@ -2560,78 +2601,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[app-menuitem]',
-                    template: `
-    <ng-container>
-      <p-confirm-dialog />
-      @if (root && item.visible !== false) {
-        <div class="layout-menuitem-root-text" (contextmenu)="onContextMenu($event, item)">
-          {{ item.label }}
-        </div>
-      }
-      @if ((!item.routerLink || item.items) && item.visible !== false) {
-        <a
-          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>
-          @if (item.items) {
-            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
-          }
-        </a>
-      }
-      @if (item.routerLink && !item.items && item.visible !== false) {
-        <a
-          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>
-          @if (item.items) {
-            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
-          }
-        </a>
-      }
-
-      @if (item.items && item.visible !== false) {
-        <ul [@children]="submenuAnimation" (contextmenu)="onContextMenu($event, item)">
-          @for (child of item.items; track child; let i = $index) {
-            <li
-              app-menuitem
-              [class]="child.badgeClass"
-              [contextMenu]="contextMenu"
-              [index]="i"
-              [item]="child"
-              [menuItemCreateDialogComponent]="menuItemCreateDialogComponent"
-              [menuItemEditDialogComponent]="menuItemEditDialogComponent"
-              [parentKey]="key"></li>
-          }
-        </ul>
-      }
-    </ng-container>
+                    template: `
+    <ng-container>
+      <p-confirm-dialog />
+      @if (root && item.visible !== false) {
+        <div class="layout-menuitem-root-text" (contextmenu)="onContextMenu($event, item)">
+          {{ item.label }}
+        </div>
+      }
+      @if ((!item.routerLink || item.items) && item.visible !== false) {
+        <a
+          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>
+          @if (item.items) {
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+          }
+        </a>
+      }
+      @if (item.routerLink && !item.items && item.visible !== false) {
+        <a
+          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>
+          @if (item.items) {
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler"></i>
+          }
+        </a>
+      }
+
+      @if (item.items && item.visible !== false) {
+        <ul [@children]="submenuAnimation" (contextmenu)="onContextMenu($event, item)">
+          @for (child of item.items; track child; let i = $index) {
+            <li
+              app-menuitem
+              [class]="child.badgeClass"
+              [contextMenu]="contextMenu"
+              [index]="i"
+              [item]="child"
+              [menuItemCreateDialogComponent]="menuItemCreateDialogComponent"
+              [menuItemEditDialogComponent]="menuItemEditDialogComponent"
+              [parentKey]="key"></li>
+          }
+        </ul>
+      }
+    </ng-container>
   `,
                     animations: [
                         trigger('children', [
@@ -2647,7 +2688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     imports: [RippleModule, NgClass, RouterLinkActive, RouterLink, ContextMenuModule, ConfirmDialog],
                     providers: [ConfirmationService]
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.Router }, { type: MenuService }], propDecorators: { item: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.Router }, { type: MenuService }], propDecorators: { item: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -2704,68 +2745,68 @@ class MenuItemCreateDialogComponent {
         this.visibleChange.emit(this.visible);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MenuItemCreateDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$2.Dialog, selector: "p-dialog", inputs: ["hostName", "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$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", 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$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$3.Dialog, selector: "p-dialog", inputs: ["hostName", "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$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i4.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: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MenuItemCreateDialogComponent, decorators: [{
             type: Component,
@@ -2773,67 +2814,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     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>
+                    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: [{
@@ -2888,61 +2929,61 @@ class MenuItemEditDialogComponent {
         this.visibleChange.emit(this.visible);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MenuItemEditDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$2.Dialog, selector: "p-dialog", inputs: ["hostName", "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$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i2$3.Dialog, selector: "p-dialog", inputs: ["hostName", "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$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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.16", ngImport: i0, type: MenuItemEditDialogComponent, decorators: [{
             type: Component,
@@ -2950,60 +2991,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     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>
+                    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: [{
@@ -3035,31 +3076,31 @@ class MenuComponent {
         ];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MenuComponent, isStandalone: true, selector: "app-menu", providers: [MenuApi], viewQueries: [{ propertyName: "menuItemCreateDialogComponent", first: true, predicate: MenuItemCreateDialogComponent, descendants: true }, { propertyName: "menuItemEditDialogComponent", first: true, predicate: MenuItemEditDialogComponent, descendants: true }, { propertyName: "contextMenu", first: true, predicate: ContextMenu, descendants: true }], ngImport: i0, template: ` <div #empty class="layout-sidebar" (contextmenu)="onContextMenu($event)">
-      <ul class="layout-menu">
-        @for (item of menuService.menu; track item; let i = $index) {
-          <ng-container>
-            @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$3.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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MenuComponent, isStandalone: true, selector: "app-menu", providers: [MenuApi], viewQueries: [{ propertyName: "menuItemCreateDialogComponent", first: true, predicate: MenuItemCreateDialogComponent, descendants: true }, { propertyName: "menuItemEditDialogComponent", first: true, predicate: MenuItemEditDialogComponent, descendants: true }, { propertyName: "contextMenu", first: true, predicate: ContextMenu, descendants: true }], ngImport: i0, template: ` <div #empty class="layout-sidebar" (contextmenu)="onContextMenu($event)">
+      <ul class="layout-menu">
+        @for (item of menuService.menu; track item; let i = $index) {
+          <ng-container>
+            @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.16", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
@@ -3077,30 +3118,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     providers: [MenuApi],
                     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 />
+                    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: [{
@@ -3207,19 +3248,19 @@ class AppLayoutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AppLayoutComponent, isStandalone: true, selector: "app-layout", providers: [MenuService, MenuApi], 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: i2$1.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$2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: FooterComponent, selector: "app-footer" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AppLayoutComponent, isStandalone: true, selector: "app-layout", providers: [MenuService, MenuApi], 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: i2$1.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.16", ngImport: i0, type: AppLayoutComponent, decorators: [{
             type: Component,
@@ -3227,18 +3268,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     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>
+                    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, MenuApi]
                 }]
@@ -3286,7 +3327,7 @@ class AppFloatingConfiguratorComponent {
         <app-configurator />
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$1.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape", "hideOnResize", "resizeSelector"] }, { kind: "component", type: AppConfiguratorComponent, selector: "app-configurator" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$1.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.16", ngImport: i0, type: AppFloatingConfiguratorComponent, decorators: [{
             type: Component,
@@ -3425,7 +3466,7 @@ class NotfoundComponent {
           </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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AppFloatingConfiguratorComponent, selector: "app-floating-configurator" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$3.TranslatePipe, name: "translate" }] }); }
+    </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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AppFloatingConfiguratorComponent, selector: "app-floating-configurator" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotfoundComponent, decorators: [{
             type: Component,
@@ -3490,7 +3531,7 @@ class UnauthorizedComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: 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" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: 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.16", ngImport: i0, type: UnauthorizedComponent, decorators: [{
             type: Component,
@@ -3567,7 +3608,7 @@ class ErrorComponent {
         </div>
       </div>
     </div>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$2.Ripple, selector: "[pRipple]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i3$2.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.16", ngImport: i0, type: ErrorComponent, decorators: [{
             type: Component,
@@ -3640,7 +3681,7 @@ class ProfileComponent {
         [auto]="true"
         (onUpload)="onBasicUploadAuto($event)" />
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i1$4.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: i4.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+  `, 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: i2$2.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.16", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
@@ -3807,7 +3848,7 @@ class ConfigComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ProfileComponent, selector: "user-profile" }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "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$4.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: ProfileComponent, selector: "user-profile" }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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$5.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfigComponent, decorators: [{
             type: Component,
@@ -4030,7 +4071,7 @@ class DbMigrationComponent extends BaseModuleComponent {
     } @else if (isSecurity) {
       <security [controller]="controller" [id]="id" />
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$5.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$5.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$5.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$5.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i1$5.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i1$5.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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: SecurityComponent, selector: "security", inputs: ["id", "controller"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: TableModule }, { kind: "component", type: i1$6.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i2$6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1$6.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i1$6.EditableRow, selector: "[pEditableRow]", inputs: ["pEditableRow", "pEditableRowDisabled"] }, { kind: "directive", type: i1$6.CancelEditableRow, selector: "[pCancelEditableRow]" }, { kind: "component", type: i1$6.ColumnFilter, selector: "p-columnFilter, p-column-filter, p-columnfilter", inputs: ["field", "type", "display", "showMenu", "matchMode", "operator", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "hideOnClear", "placeholder", "matchModeOptions", "maxConstraints", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "locale", "localeMatcher", "currency", "currencyDisplay", "filterOn", "useGrouping", "showButtons", "ariaLabel", "filterButtonProps"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: TagModule }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "component", type: SecurityComponent, selector: "security", inputs: ["id", "controller"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DbMigrationComponent, decorators: [{
             type: Component,
@@ -4271,61 +4312,61 @@ class AppModulesComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppModulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AppModulesComponent, isStandalone: true, selector: "app-modules", providers: [ConfirmationService, ModuleApi], 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]="'app-modules.refreshTooltip' | translate"
-              (onClick)="refreshAction()"></p-button>
-          </p-toolbar>
-        </div>
-        <p-table class="mt-4" [paginator]="true" [rows]="100" [value]="modules">
-          <ng-template pTemplate="header">
-            <tr>
-              <th>{{ 'app-modules.table.moduleId' | translate }}</th>
-              <th>{{ 'app-modules.table.name' | translate }}</th>
-              <th>{{ 'app-modules.table.currentlyLoaded' | translate }}</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 ? 'app-modules.table.yes' : 'app-modules.table.no') | translate
-                  "></p-tag>
-              </td>
-              <td>
-                <p-button
-                  icon="pi pi-trash"
-                  rounded="true"
-                  severity="danger"
-                  text="true"
-                  tooltipPosition="bottom"
-                  [pTooltip]="'app-modules.table.deleteTooltip' | translate"
-                  (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$5.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$5.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: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$2.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AppModulesComponent, isStandalone: true, selector: "app-modules", providers: [ConfirmationService, ModuleApi], 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]="'app-modules.refreshTooltip' | translate"
+              (onClick)="refreshAction()"></p-button>
+          </p-toolbar>
+        </div>
+        <p-table class="mt-4" [paginator]="true" [rows]="100" [value]="modules">
+          <ng-template pTemplate="header">
+            <tr>
+              <th>{{ 'app-modules.table.moduleId' | translate }}</th>
+              <th>{{ 'app-modules.table.name' | translate }}</th>
+              <th>{{ 'app-modules.table.currentlyLoaded' | translate }}</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 ? 'app-modules.table.yes' : 'app-modules.table.no') | translate
+                  "></p-tag>
+              </td>
+              <td>
+                <p-button
+                  icon="pi pi-trash"
+                  rounded="true"
+                  severity="danger"
+                  text="true"
+                  tooltipPosition="bottom"
+                  [pTooltip]="'app-modules.table.deleteTooltip' | translate"
+                  (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$6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ToolbarModule }, { kind: "component", type: i4$1.Toolbar, selector: "p-toolbar", inputs: ["styleClass", "ariaLabelledBy"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppModulesComponent, decorators: [{
             type: Component,
@@ -4333,64 +4374,1429 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                     imports: [FormsModule, TableModule, Tag, ButtonModule, ToolbarModule, Tooltip, ConfirmDialog, TranslatePipe],
                     providers: [ConfirmationService, ModuleApi],
                     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]="'app-modules.refreshTooltip' | translate"
-              (onClick)="refreshAction()"></p-button>
-          </p-toolbar>
-        </div>
-        <p-table class="mt-4" [paginator]="true" [rows]="100" [value]="modules">
-          <ng-template pTemplate="header">
-            <tr>
-              <th>{{ 'app-modules.table.moduleId' | translate }}</th>
-              <th>{{ 'app-modules.table.name' | translate }}</th>
-              <th>{{ 'app-modules.table.currentlyLoaded' | translate }}</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 ? 'app-modules.table.yes' : 'app-modules.table.no') | translate
-                  "></p-tag>
-              </td>
-              <td>
-                <p-button
-                  icon="pi pi-trash"
-                  rounded="true"
-                  severity="danger"
-                  text="true"
-                  tooltipPosition="bottom"
-                  [pTooltip]="'app-modules.table.deleteTooltip' | translate"
-                  (onClick)="deleteModule(module)"></p-button>
-              </td>
-            </tr>
-          </ng-template>
-        </p-table>
-      </div>
-    </div>
+                    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]="'app-modules.refreshTooltip' | translate"
+              (onClick)="refreshAction()"></p-button>
+          </p-toolbar>
+        </div>
+        <p-table class="mt-4" [paginator]="true" [rows]="100" [value]="modules">
+          <ng-template pTemplate="header">
+            <tr>
+              <th>{{ 'app-modules.table.moduleId' | translate }}</th>
+              <th>{{ 'app-modules.table.name' | translate }}</th>
+              <th>{{ 'app-modules.table.currentlyLoaded' | translate }}</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 ? 'app-modules.table.yes' : 'app-modules.table.no') | translate
+                  "></p-tag>
+              </td>
+              <td>
+                <p-button
+                  icon="pi pi-trash"
+                  rounded="true"
+                  severity="danger"
+                  text="true"
+                  tooltipPosition="bottom"
+                  [pTooltip]="'app-modules.table.deleteTooltip' | translate"
+                  (onClick)="deleteModule(module)"></p-button>
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
+    </div>
   `
                 }]
         }] });
 
+/* eslint-disable */
+/* tslint:disable */
+// @ts-nocheck
+class DiscussionApi extends HttpClient {
+    constructor() {
+        super(...arguments);
+        /**
+         * @description Gets comments by object type and object identifier.
+         *
+         * @tags Discussion
+         * @name getByObject
+         * @summary Gets comments by object type and object identifier.
+         * @request GET:/api/discussion/get-by-object
+         * @secure
+         * @response `200` `(CommentDto)[]` OK
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         */
+        this.getByObject = (query, params = {}) => this.request({
+            path: `/api/discussion/get-by-object`,
+            method: "GET",
+            query: query,
+            secure: true,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Gets a comment by identifier.
+         *
+         * @tags Discussion
+         * @name getById
+         * @summary Gets a comment by identifier.
+         * @request GET:/api/discussion/get-by-id
+         * @secure
+         * @response `200` `CommentDto` OK
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         * @response `404` `ApiExceptionResponse` Not Found
+         */
+        this.getById = (query, params = {}) => this.request({
+            path: `/api/discussion/get-by-id`,
+            method: "GET",
+            query: query,
+            secure: true,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Creates a new comment
+         *
+         * @tags Discussion
+         * @name create
+         * @summary Creates a new comment
+         * @request POST:/api/discussion/create
+         * @secure
+         * @response `200` `CommentDto` OK
+         * @response `400` `ApiExceptionResponse` Bad Request
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         */
+        this.create = (data, params = {}) => this.request({
+            path: `/api/discussion/create`,
+            method: "POST",
+            body: data,
+            secure: true,
+            type: ContentType.Json,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Updates an existing comment.
+         *
+         * @tags Discussion
+         * @name update
+         * @summary Updates an existing comment.
+         * @request PUT:/api/discussion/update/{id}
+         * @secure
+         * @response `200` `CommentDto` OK
+         * @response `400` `ApiExceptionResponse` Bad Request
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         * @response `403` `ApiExceptionResponse` Forbidden
+         * @response `404` `ApiExceptionResponse` Not Found
+         */
+        this.update = ({ id, ...query }, data, params = {}) => this.request({
+            path: `/api/discussion/update/${id}`,
+            method: "PUT",
+            body: data,
+            secure: true,
+            type: ContentType.Json,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Soft deletes a comment.
+         *
+         * @tags Discussion
+         * @name delete
+         * @summary Soft deletes a comment.
+         * @request DELETE:/api/discussion/delete/{id}
+         * @secure
+         * @response `204` `void` No Content
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         * @response `403` `ApiExceptionResponse` Forbidden
+         * @response `404` `ApiExceptionResponse` Not Found
+         */
+        this.delete = ({ id, ...query }, params = {}) => this.request({
+            path: `/api/discussion/delete/${id}`,
+            method: "DELETE",
+            secure: true,
+            ...params,
+        });
+        /**
+         * @description Gets edit history for a comment.
+         *
+         * @tags Discussion
+         * @name getHistory
+         * @summary Gets edit history for a comment.
+         * @request GET:/api/discussion/get-history/{id}
+         * @secure
+         * @response `200` `(CommentHistoryDto)[]` OK
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         * @response `404` `ApiExceptionResponse` Not Found
+         */
+        this.getHistory = ({ id, ...query }, params = {}) => this.request({
+            path: `/api/discussion/get-history/${id}`,
+            method: "GET",
+            secure: true,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Uploads an attachment for a comment.
+         *
+         * @tags Discussion
+         * @name uploadAttachment
+         * @summary Uploads an attachment for a comment.
+         * @request POST:/api/discussion/upload-attachment
+         * @secure
+         * @response `200` `AttachmentDto` OK
+         * @response `400` `ApiExceptionResponse` Bad Request
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         * @response `403` `ApiExceptionResponse` Forbidden
+         * @response `404` `ApiExceptionResponse` Not Found
+         */
+        this.uploadAttachment = (data, params = {}) => this.request({
+            path: `/api/discussion/upload-attachment`,
+            method: "POST",
+            body: data,
+            secure: true,
+            type: ContentType.FormData,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Deletes an attachment.
+         *
+         * @tags Discussion
+         * @name deleteAttachment
+         * @summary Deletes an attachment.
+         * @request DELETE:/api/discussion/delete-attachment/{id}
+         * @secure
+         * @response `204` `void` No Content
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         * @response `403` `ApiExceptionResponse` Forbidden
+         * @response `404` `ApiExceptionResponse` Not Found
+         */
+        this.deleteAttachment = ({ id, ...query }, params = {}) => this.request({
+            path: `/api/discussion/delete-attachment/${id}`,
+            method: "DELETE",
+            secure: true,
+            ...params,
+        });
+        /**
+         * @description Downloads attachment content.
+         *
+         * @tags Discussion
+         * @name getAttachmentContent
+         * @summary Downloads attachment content.
+         * @request GET:/api/discussion/get-attachment-content/{id}
+         * @secure
+         * @response `200` `void` OK
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         * @response `404` `ApiExceptionResponse` Not Found
+         */
+        this.getAttachmentContent = ({ id, ...query }, params = {}) => this.request({
+            path: `/api/discussion/get-attachment-content/${id}`,
+            method: "GET",
+            secure: true,
+            ...params,
+        });
+        /**
+         * @description Adds or toggles a reaction for a comment.
+         *
+         * @tags Discussion
+         * @name addReaction
+         * @summary Adds or toggles a reaction for a comment.
+         * @request POST:/api/discussion/add-reaction
+         * @secure
+         * @response `200` `(CommentReactionDto)[]` OK
+         * @response `400` `ApiExceptionResponse` Bad Request
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         * @response `404` `ApiExceptionResponse` Not Found
+         */
+        this.addReaction = (data, params = {}) => this.request({
+            path: `/api/discussion/add-reaction`,
+            method: "POST",
+            body: data,
+            secure: true,
+            type: ContentType.Json,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Removes a reaction from a comment.
+         *
+         * @tags Discussion
+         * @name removeReaction
+         * @summary Removes a reaction from a comment.
+         * @request DELETE:/api/discussion/remove-reaction
+         * @secure
+         * @response `200` `(CommentReactionDto)[]` OK
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         * @response `404` `ApiExceptionResponse` Not Found
+         */
+        this.removeReaction = (query, params = {}) => this.request({
+            path: `/api/discussion/remove-reaction`,
+            method: "DELETE",
+            query: query,
+            secure: true,
+            format: "json",
+            ...params,
+        });
+        /**
+         * @description Searches users that can be mentioned in a comment.
+         *
+         * @tags Discussion
+         * @name searchMentionUsers
+         * @summary Searches users that can be mentioned in a comment.
+         * @request GET:/api/discussion/search-mention-users
+         * @secure
+         * @response `200` `(MentionUserDto)[]` OK
+         * @response `400` `ApiExceptionResponse` Bad Request
+         * @response `401` `ApiExceptionResponse` Unauthorized
+         */
+        this.searchMentionUsers = (query, params = {}) => this.request({
+            path: `/api/discussion/search-mention-users`,
+            method: "GET",
+            query: query,
+            secure: true,
+            format: "json",
+            ...params,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DiscussionApi, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DiscussionApi }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DiscussionApi, decorators: [{
+            type: Injectable
+        }] });
+
+function getInitialsFromString(input) {
+    if (!input || input.trim().length === 0) {
+        return '';
+    }
+    const words = input.trim().split(/\s+/);
+    if (words.length === 1) {
+        return words[0].charAt(0).toUpperCase();
+    }
+    const firstInitial = words[0].charAt(0).toUpperCase();
+    const lastInitial = words[words.length - 1].charAt(0).toUpperCase();
+    return firstInitial + lastInitial;
+}
+
+class DiscussionComponent {
+    constructor() {
+        this.msgService = inject(MsgService);
+        this.discussionApi = inject(DiscussionApi);
+        this.sanitizer = inject(DomSanitizer);
+        this.translateService = inject(TranslateService);
+        this.cdr = inject(ChangeDetectorRef);
+        this.confirmationService = inject(ConfirmationService);
+        this.layoutService = inject(LayoutService);
+        this.objectTypeId = 1;
+        this.objectId = 1;
+        this.comments = [];
+        this.loading = false;
+        this.submitting = false;
+        this.previewMode = false;
+        this.newComment = '';
+        this.editContent = '';
+        this.editingCommentId = null;
+        this.pendingFiles = [];
+        this.mentionSuggestions = [];
+        this.historyByComment = {};
+        this.emojiPalette = ['👍', '👎', '🐳', '🍆', '🍑'];
+        this.mentionSearchTimer = null;
+        this.getInitialsFromString = getInitialsFromString;
+    }
+    ngOnChanges(changes) {
+        if ((changes['objectTypeId'] || changes['objectId']) && this.objectTypeId && this.objectId) {
+            this.loadComments().then();
+        }
+    }
+    async ngOnInit() {
+        await this.loadComments();
+    }
+    ngOnDestroy() {
+        if (this.mentionSearchTimer) {
+            clearTimeout(this.mentionSearchTimer);
+        }
+    }
+    async loadComments() {
+        if (!this.objectTypeId || !this.objectId) {
+            return;
+        }
+        this.loading = true;
+        this.cdr.markForCheck();
+        try {
+            const items = await this.discussionApi.getByObject({
+                objectTypeId: this.objectTypeId,
+                objectId: this.objectId,
+                skip: 0,
+                take: 50
+            });
+            this.comments = items.map((item) => this.normalizeComment(item));
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.translateService.instant('discussionComponent.errors.loadComments'));
+        }
+        finally {
+            this.loading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    async createComment() {
+        const content = this.newComment.trim();
+        if (!content) {
+            return;
+        }
+        this.submitting = true;
+        this.cdr.markForCheck();
+        try {
+            const created = await this.discussionApi.create({
+                objectTypeId: this.objectTypeId,
+                objectId: this.objectId,
+                content
+            });
+            if (this.pendingFiles.length > 0) {
+                for (const file of this.pendingFiles) {
+                    await this.discussionApi.uploadAttachment({
+                        CommentId: created.commentId,
+                        File: file
+                    });
+                }
+            }
+            this.newComment = '';
+            this.pendingFiles = [];
+            this.previewMode = false;
+            this.mentionSuggestions = [];
+            await this.loadComments();
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.translateService.instant('discussionComponent.errors.createComment'));
+        }
+        finally {
+            this.submitting = false;
+            this.cdr.markForCheck();
+        }
+    }
+    startEdit(comment) {
+        this.editingCommentId = comment.commentId;
+        this.editContent = comment.content;
+    }
+    cancelEdit() {
+        this.editingCommentId = null;
+        this.editContent = '';
+    }
+    async saveEdit(comment) {
+        try {
+            const updated = await this.discussionApi.update({ id: comment.commentId }, { content: this.editContent.trim() });
+            this.comments = this.comments.map((item) => item.commentId === comment.commentId ? this.normalizeComment(updated) : item);
+            this.cancelEdit();
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.translateService.instant('discussionComponent.errors.updateComment'));
+        }
+        finally {
+            this.cdr.markForCheck();
+        }
+    }
+    deleteComment(comment) {
+        this.confirmationService.confirm({
+            header: this.translateService.instant('discussionComponent.warning'),
+            message: this.translateService.instant('discussionComponent.confirmDeleteComment'),
+            icon: 'pi pi-trash',
+            rejectButtonProps: {
+                label: this.translateService.instant('discussionComponent.cancel'),
+                severity: 'secondary',
+                outlined: true
+            },
+            acceptButtonProps: {
+                label: this.translateService.instant('discussionComponent.delete'),
+                severity: 'danger'
+            },
+            accept: async () => {
+                await this.performDeleteComment(comment);
+            }
+        });
+    }
+    async toggleHistory(comment) {
+        const current = this.historyByComment[comment.commentId];
+        if (current?.opened) {
+            this.historyByComment[comment.commentId] = { ...current, opened: false };
+            return;
+        }
+        this.historyByComment[comment.commentId] = {
+            opened: true,
+            loading: true,
+            items: current?.items ?? []
+        };
+        this.cdr.markForCheck();
+        try {
+            const items = await this.discussionApi.getHistory({ id: comment.commentId });
+            this.historyByComment[comment.commentId] = {
+                opened: true,
+                loading: false,
+                items: items.map((item) => this.normalizeHistoryItem(item))
+            };
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.translateService.instant('discussionComponent.errors.loadEditHistory'));
+            this.historyByComment[comment.commentId] = {
+                opened: false,
+                loading: false,
+                items: []
+            };
+        }
+        finally {
+            this.cdr.markForCheck();
+        }
+    }
+    onFilesSelected(event) {
+        const input = event.target;
+        this.pendingFiles = [...this.pendingFiles, ...Array.from(input.files ?? [])];
+        input.value = '';
+    }
+    removePendingFile(file) {
+        this.pendingFiles = this.pendingFiles.filter((item) => item !== file);
+    }
+    async onInlineFilesSelected(comment, event) {
+        const input = event.target;
+        const files = Array.from(input.files ?? []);
+        input.value = '';
+        try {
+            for (const file of files) {
+                await this.discussionApi.uploadAttachment({
+                    CommentId: comment.commentId,
+                    File: file
+                });
+            }
+            await this.loadComments();
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.translateService.instant('discussionComponent.errors.uploadAttachment'));
+            this.cdr.markForCheck();
+        }
+    }
+    deleteAttachment(comment, attachment) {
+        this.confirmationService.confirm({
+            header: this.translateService.instant('discussionComponent.warning'),
+            message: this.translateService.instant('discussionComponent.confirmDeleteFile', { fileName: attachment.fileName }),
+            icon: 'pi pi-trash',
+            rejectButtonProps: {
+                label: this.translateService.instant('discussionComponent.cancel'),
+                severity: 'secondary',
+                outlined: true
+            },
+            acceptButtonProps: {
+                label: this.translateService.instant('discussionComponent.delete'),
+                severity: 'danger'
+            },
+            accept: async () => {
+                await this.performDeleteAttachment(comment, attachment);
+            }
+        });
+    }
+    async performDeleteComment(comment) {
+        try {
+            await this.discussionApi.delete({ id: comment.commentId });
+            this.comments = this.comments.filter((item) => item.commentId !== comment.commentId);
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.translateService.instant('discussionComponent.errors.deleteComment'));
+        }
+        finally {
+            this.cdr.markForCheck();
+        }
+    }
+    async performDeleteAttachment(comment, attachment) {
+        try {
+            await this.discussionApi.deleteAttachment({ id: attachment.attachmentId });
+            this.comments = this.comments.map((item) => item.commentId === comment.commentId
+                ? { ...item, attachments: item.attachments.filter((entry) => entry.attachmentId !== attachment.attachmentId) }
+                : item);
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.translateService.instant('discussionComponent.errors.deleteAttachment'));
+        }
+        finally {
+            this.cdr.markForCheck();
+        }
+    }
+    async downloadAttachment(attachment) {
+        try {
+            const blob = (await this.discussionApi.getAttachmentContent({ id: attachment.attachmentId }, { format: 'blob' }));
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = attachment.fileName;
+            link.click();
+            URL.revokeObjectURL(url);
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.translateService.instant('discussionComponent.errors.downloadAttachment'));
+            this.cdr.markForCheck();
+        }
+    }
+    async toggleReaction(comment, reaction) {
+        try {
+            const reactions = reaction.reactedByCurrentUser
+                ? await this.discussionApi.removeReaction({ commentId: comment.commentId, emojiCode: reaction.emojiCode })
+                : await this.discussionApi.addReaction({ commentId: comment.commentId, emojiCode: reaction.emojiCode });
+            this.applyReactions(comment.commentId, reactions.map((item) => this.normalizeReaction(item)));
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.translateService.instant('discussionComponent.errors.updateReaction'));
+        }
+        finally {
+            this.cdr.markForCheck();
+        }
+    }
+    async reactWithEmoji(comment, emojiCode, popover) {
+        try {
+            const reactions = await this.discussionApi.addReaction({ commentId: comment.commentId, emojiCode });
+            this.applyReactions(comment.commentId, reactions.map((item) => this.normalizeReaction(item)));
+            popover?.hide();
+        }
+        catch (error) {
+            this.msgService.errorFromException(error, this.translateService.instant('discussionComponent.errors.addReaction'));
+        }
+        finally {
+            this.cdr.markForCheck();
+        }
+    }
+    onComposerInput() {
+        if (this.mentionSearchTimer) {
+            clearTimeout(this.mentionSearchTimer);
+        }
+        const token = this.extractMentionQuery(this.newComment);
+        if (!token || token.length < 2) {
+            this.mentionSuggestions = [];
+            this.cdr.markForCheck();
+            return;
+        }
+        this.mentionSearchTimer = setTimeout(async () => {
+            try {
+                const users = await this.discussionApi.searchMentionUsers({ term: token });
+                this.mentionSuggestions = users.map((item) => this.normalizeMentionUser(item));
+            }
+            catch {
+                this.mentionSuggestions = [];
+            }
+            finally {
+                this.cdr.markForCheck();
+            }
+        }, 250);
+    }
+    insertMention(candidate) {
+        const query = this.extractMentionQuery(this.newComment);
+        if (!query) {
+            return;
+        }
+        this.newComment = this.newComment.replace(/@[\w.+\-@]*$/, `@${candidate.email} `);
+        this.mentionSuggestions = [];
+    }
+    renderMarkdown(markdown) {
+        const escaped = markdown.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+        const html = escaped
+            .replace(/^### (.*)$/gm, '<h3>$1</h3>')
+            .replace(/^## (.*)$/gm, '<h2>$1</h2>')
+            .replace(/^# (.*)$/gm, '<h1>$1</h1>')
+            .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+            .replace(/\*(.+?)\*/g, '<em>$1</em>')
+            .replace(/`(.+?)`/g, '<code>$1</code>')
+            .replace(/\[([^\]]+)\]\((https?:\/\/[^\s]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>')
+            .replace(/(^|\s)@([A-Za-z0-9._+\-@]+)/g, '$1<span class="mention-token">@$2</span>')
+            .replace(/\n/g, '<br>');
+        return this.sanitizer.sanitize(SecurityContext.HTML, html) ?? '';
+    }
+    formatBytes(value) {
+        if (value < 1024) {
+            return `${value} ${this.translateService.instant('discussionComponent.units.bytes')}`;
+        }
+        if (value < 1024 * 1024) {
+            return `${(value / 1024).toFixed(1)} ${this.translateService.instant('discussionComponent.units.kilobytes')}`;
+        }
+        return `${(value / (1024 * 1024)).toFixed(1)} ${this.translateService.instant('discussionComponent.units.megabytes')}`;
+    }
+    hasUserReaction(comment) {
+        return comment.reactions.some((reaction) => reaction.reactedByCurrentUser);
+    }
+    getReactions(comment) {
+        return comment.reactions;
+    }
+    applyReactions(commentId, reactions) {
+        this.comments = this.comments.map((item) => (item.commentId === commentId ? { ...item, reactions } : item));
+    }
+    normalizeComment(comment) {
+        return {
+            ...comment,
+            commentId: comment.commentId ?? 0,
+            content: comment.content ?? '',
+            authorDisplayName: comment.authorDisplayName ?? '',
+            authorEmail: comment.authorEmail ?? '',
+            isEdited: comment.isEdited ?? false,
+            historyCount: comment.historyCount ?? 0,
+            canEdit: comment.canEdit ?? false,
+            canDelete: comment.canDelete ?? false,
+            attachments: (comment.attachments ?? []).map((item) => this.normalizeAttachment(item)),
+            reactions: (comment.reactions ?? []).map((item) => this.normalizeReaction(item))
+        };
+    }
+    normalizeAttachment(attachment) {
+        return {
+            attachmentId: attachment.attachmentId ?? 0,
+            fileName: attachment.fileName ?? '',
+            fileType: attachment.fileType ?? '',
+            fileSize: attachment.fileSize ?? 0,
+            uploadedAt: attachment.uploadedAt ?? new Date(0),
+            storageFileId: attachment.storageFileId ?? '',
+            downloadUrl: attachment.downloadUrl ?? ''
+        };
+    }
+    normalizeReaction(reaction) {
+        return {
+            emojiCode: reaction.emojiCode ?? '',
+            count: reaction.count ?? 0,
+            reactedByCurrentUser: reaction.reactedByCurrentUser ?? false
+        };
+    }
+    normalizeMentionUser(user) {
+        return {
+            userId: user.userId ?? 0,
+            displayName: user.displayName ?? '',
+            email: user.email ?? ''
+        };
+    }
+    normalizeHistoryItem(item) {
+        return {
+            commentEditHistoryId: item.commentEditHistoryId ?? 0,
+            oldContent: item.oldContent ?? '',
+            newContent: item.newContent ?? '',
+            editedByUserId: item.editedByUserId ?? 0,
+            editedByDisplayName: item.editedByDisplayName ?? '',
+            editedAt: item.editedAt ?? new Date(0)
+        };
+    }
+    extractMentionQuery(value) {
+        const match = value.match(/@([A-Za-z0-9._+\-@]*)$/);
+        return match?.[1] ?? null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DiscussionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DiscussionComponent, isStandalone: true, selector: "discussion", inputs: { objectTypeId: "objectTypeId", objectId: "objectId" }, providers: [ConfirmationService, DiscussionApi], usesOnChanges: true, ngImport: i0, template: `
+    <p-confirmDialog/>
+
+    <section class="flex flex-col gap-4">
+
+      <p-card class="block">
+        <div class="flex flex-col gap-4">
+          @if (!previewMode) {
+            <textarea
+              pTextarea
+              class="min-h-28 w-full"
+              [autoResize]="true"
+              rows="5"
+              [(ngModel)]="newComment"
+              (ngModelChange)="onComposerInput()"
+              [placeholder]="'discussionComponent.writeCommentPlaceholder' | translate"
+            ></textarea>
+          } @else {
+            <div
+              class="markdown-preview min-h-28 rounded-2xl border border-surface-200 bg-surface-50 px-4 py-3 leading-7 dark:border-surface-700 dark:bg-surface-900/40"
+              [innerHTML]="renderMarkdown(newComment)"
+            ></div>
+          }
+
+          @if (mentionSuggestions.length > 0) {
+            <p-panel class="block">
+              <ng-template pTemplate="header">
+                <div class="inline-flex items-center gap-2 text-sm font-medium">
+                  <i class="pi pi-at"></i>
+                  <span>{{ 'discussionComponent.mentionSuggestions' | translate }}</span>
+                </div>
+              </ng-template>
+
+              <div class="flex flex-col gap-3">
+                @for (candidate of mentionSuggestions; track candidate.userId) {
+                  <button
+                    type="button"
+                    class="flex w-full items-center justify-between gap-4 rounded-xl border border-transparent px-3 py-3 text-left transition hover:border-primary-200 hover:bg-primary-50 dark:hover:border-primary-800 dark:hover:bg-primary-950/30"
+                    (click)="insertMention(candidate)"
+                  >
+                    <div class="min-w-0">
+                      <strong>{{ candidate.displayName }}</strong>
+                      <small class="mt-1 block text-surface-500">{{ candidate.email }}</small>
+                    </div>
+                    <i class="pi pi-arrow-up-left shrink-0 text-surface-400"></i>
+                  </button>
+                }
+              </div>
+            </p-panel>
+          }
+
+          @if (pendingFiles.length > 0) {
+            <div class="flex flex-col gap-3">
+              @for (file of pendingFiles; track file.name + file.size) {
+                <div
+                  class="flex flex-col gap-3 rounded-2xl border border-surface-200 px-4 py-3 sm:flex-row sm:items-center sm:justify-between dark:border-surface-700">
+                  <div class="inline-flex items-center gap-2">
+                    <i class="pi pi-file"></i>
+                    <span class="break-all">{{ file.name }}</span>
+                    <p-tag [value]="formatBytes(file.size)" severity="contrast"/>
+                  </div>
+                  <p-button
+                    icon="pi pi-times"
+                    severity="danger"
+                    [rounded]="true"
+                    [text]="true"
+                    (onClick)="removePendingFile(file)"
+                  />
+                </div>
+              }
+            </div>
+          }
+
+          <div class="flex flex-col gap-2 sm:flex-row sm:justify-end">
+            <p-button
+              [label]="
+                previewMode
+                  ? ('discussionComponent.edit' | translate)
+                  : ('discussionComponent.preview' | translate)
+              "
+              [icon]="previewMode ? 'pi pi-pencil' : 'pi pi-eye'"
+              severity="secondary"
+              [text]="true"
+              (onClick)="previewMode = !previewMode"
+            />
+
+            <label class="file-trigger">
+              <p-button
+                [label]="'discussionComponent.attachFiles' | translate"
+                icon="pi pi-paperclip"
+                severity="secondary"
+                [text]="true"
+              />
+              <input type="file" multiple (change)="onFilesSelected($event)"/>
+            </label>
+            <p-button
+              [label]="'discussionComponent.send' | translate"
+              icon="pi pi-send"
+              [loading]="submitting"
+              [disabled]="submitting || !newComment.trim()"
+              (onClick)="createComment()"
+            />
+          </div>
+        </div>
+      </p-card>
+
+      @if (loading) {
+        <div
+          class="flex min-h-20 flex-col items-center justify-center gap-3 rounded-2xl border border-surface-200 px-4 py-5 text-surface-500 dark:border-surface-700">
+          <p-progressSpinner strokeWidth="4"/>
+          <span>{{ 'discussionComponent.loadingComments' | translate }}</span>
+        </div>
+      } @else if (comments.length === 0) {
+        <div
+          class="flex min-h-20 items-center justify-center gap-3 rounded-2xl border border-surface-200 px-4 py-5 text-surface-500 dark:border-surface-700">
+          <i class="pi pi-inbox"></i>
+          <span>{{ 'discussionComponent.noCommentsYet' | translate }}</span>
+        </div>
+      } @else {
+        <div class="flex flex-col gap-4">
+          @for (comment of comments; track comment.commentId) {
+            <p-card class="block">
+              <ng-template pTemplate="content">
+                <div class="grid gap-4 md:grid-cols-[3.2rem_minmax(0,1fr)]">
+                  <div>
+                    <p-avatar
+                      [label]="getInitialsFromString(comment.authorDisplayName)"
+                      shape="circle"
+                    />
+                  </div>
+
+                  <div class="flex flex-col gap-2">
+                    <div class="flex flex-row gap-3 justify-between">
+                      <div class="flex flex-wrap items-center gap-2">
+                        <strong>{{ comment.authorDisplayName }}</strong>
+                        <span
+                          class="text-sm text-surface-500">{{ comment.createdAt | date: layoutService.dateTimeFormat() }}</span>
+                      </div>
+
+                      <div class="flex flex-wrap items-center justify-end gap-2">
+                        <div class="flex flex-wrap items-center">
+                          @if (comment.isEdited) {
+                            <p-tag [value]="'discussionComponent.edited' | translate" icon="pi pi-pencil" severity="warn"/>
+                          }
+                        </div>
+                        @if (comment.canEdit) {
+                          <p-button
+                            icon="pi pi-pencil"
+                            severity="secondary"
+                            [rounded]="true"
+                            [text]="true"
+                            (onClick)="startEdit(comment)"
+                          />
+                        }
+                        @if (comment.historyCount > 0) {
+                          <p-button
+                            icon="pi pi-history"
+                            severity="secondary"
+                            [rounded]="true"
+                            [text]="true"
+                            (onClick)="toggleHistory(comment)"
+                          />
+                        }
+                        @if (comment.canDelete) {
+                          <p-button
+                            icon="pi pi-trash"
+                            severity="danger"
+                            [rounded]="true"
+                            [text]="true"
+                            (onClick)="deleteComment(comment)"
+                          />
+                        }
+                      </div>
+                    </div>
+                    @if (editingCommentId === comment.commentId) {
+                      <div class="flex flex-col gap-4">
+                        <textarea
+                          pTextarea
+                          class="min-h-24 w-full"
+                          [autoResize]="true"
+                          rows="4"
+                          [(ngModel)]="editContent"
+                          [placeholder]="'discussionComponent.editCommentPlaceholder' | translate"
+                        ></textarea>
+                        <div class="flex flex-col gap-2 sm:flex-row sm:justify-end">
+                          <div>
+                            <label class="file-trigger">
+                              <p-button
+                                [label]="'discussionComponent.addAttachment' | translate"
+                                icon="pi pi-paperclip"
+                                [text]="true"
+                                severity="secondary"
+                              />
+                              <input type="file" multiple (change)="onInlineFilesSelected(comment, $event)"/>
+                            </label>
+                          </div>
+
+                          <p-button
+                            [label]="'discussionComponent.save' | translate"
+                            icon="pi pi-check"
+                            [disabled]="!editContent.trim()"
+                            (onClick)="saveEdit(comment)"
+                          />
+                          <p-button
+                            [label]="'discussionComponent.cancel' | translate"
+                            icon="pi pi-times"
+                            severity="secondary"
+                            [text]="true"
+                            (onClick)="cancelEdit()"
+                          />
+                        </div>
+                      </div>
+                    } @else {
+                      <div class="markdown-preview" [innerHTML]="renderMarkdown(comment.content)"></div>
+                    }
+
+                    @if (comment.attachments.length > 0) {
+                      <div class="flex flex-col gap-3">
+                        <div class="flex flex-col gap-3">
+                          @for (attachment of comment.attachments; track attachment.attachmentId) {
+                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
+                              <div class="inline-flex items-center gap-2">
+                                <i class="pi pi-file"></i>
+                                <button
+                                  type="button"
+                                  class="break-all bg-transparent p-0 text-left font-semibold text-primary-600 transition hover:text-primary-500"
+                                  (click)="downloadAttachment(attachment)"
+                                >
+                                  {{ attachment.fileName }}
+                                </button>
+                                <p-tag [value]="formatBytes(attachment.fileSize)" severity="contrast"/>
+                              </div>
+
+                              @if (comment.canEdit) {
+                                <p-button
+                                  icon="pi pi-times"
+                                  severity="danger"
+                                  [rounded]="true"
+                                  [text]="true"
+                                  (onClick)="deleteAttachment(comment, attachment)"
+                                />
+                              }
+                            </div>
+                          }
+                        </div>
+                      </div>
+                    }
+
+                    <div class="flex flex-wrap items-center gap-2">
+                      @for (reaction of getReactions(comment); track reaction.emojiCode) {
+                        <p-button
+                          [label]="reaction.emojiCode + ' ' + reaction.count"
+                          severity="secondary"
+                          [outlined]="false"
+                          (onClick)="toggleReaction(comment, reaction)"
+                        />
+                      }
+
+                      @if (!hasUserReaction(comment)) {
+                        <p-button
+                          icon="pi pi-face-smile"
+                          severity="secondary"
+                          [rounded]="true"
+                          [text]="true"
+                          (onClick)="reactionPopover.toggle($event)"
+                        />
+                        <p-popover #reactionPopover>
+                          <div class="emoji-popover">
+                            @for (emoji of emojiPalette; track emoji) {
+                              <button
+                                type="button"
+                                class="emoji-option"
+                                (click)="reactWithEmoji(comment, emoji, reactionPopover)"
+                              >
+                                {{ emoji }}
+                              </button>
+                            }
+                          </div>
+                        </p-popover>
+                      }
+                    </div>
+
+                    @if (historyByComment[comment.commentId]?.opened) {
+                      <p-panel class="block" [toggleable]="true" [collapsed]="false">
+                        <ng-template pTemplate="header">
+                          <div class="inline-flex items-center gap-2 text-sm font-medium">
+                            <i class="pi pi-history"></i>
+                            <span>{{ 'discussionComponent.editHistory' | translate }}</span>
+                          </div>
+                        </ng-template>
+
+                        @if (historyByComment[comment.commentId]?.loading) {
+                          <div class="flex items-center gap-3 text-surface-500">
+                            <p-progressSpinner strokeWidth="4"/>
+                            <span>{{ 'discussionComponent.loadingHistory' | translate }}</span>
+                          </div>
+                        } @else {
+                          <div class="flex flex-col gap-4">
+                            @for (item of historyByComment[comment.commentId]?.items ?? []; track item.commentEditHistoryId) {
+                              <div class="rounded-2xl border border-surface-200 px-4 py-4 dark:border-surface-700">
+                                <div class="mb-3 inline-flex items-center gap-2 text-sm font-semibold">
+                                  <i class="pi pi-clock"></i>
+                                  <span>{{ item.editedByDisplayName }} · {{ item.editedAt | date: 'short' }}</span>
+                                </div>
+                                <div class="grid gap-4 lg:grid-cols-2">
+                                  <div class="flex flex-col gap-2">
+                                    <p-tag [value]="'discussionComponent.before' | translate" severity="secondary"/>
+                                    <div
+                                      class="history-markdown rounded-2xl bg-surface-50 px-4 py-3 leading-7 dark:bg-surface-900/40"
+                                      [innerHTML]="renderMarkdown(item.oldContent)"
+                                    ></div>
+                                  </div>
+                                  <div class="flex flex-col gap-2">
+                                    <p-tag [value]="'discussionComponent.after' | translate" severity="success"/>
+                                    <div
+                                      class="history-markdown rounded-2xl bg-surface-50 px-4 py-3 leading-7 dark:bg-surface-900/40"
+                                      [innerHTML]="renderMarkdown(item.newContent)"
+                                    ></div>
+                                  </div>
+                                </div>
+                              </div>
+                            }
+                          </div>
+                        }
+                      </p-panel>
+                    }
+                  </div>
+                </div>
+              </ng-template>
+            </p-card>
+          }
+        </div>
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:block}.file-trigger{position:relative;display:inline-flex}.file-trigger input{position:absolute;inset:0;opacity:0;cursor:pointer}.markdown-preview,.history-markdown{word-break:break-word}.markdown-preview :is(h1,h2,h3),.history-markdown :is(h1,h2,h3){margin:0 0 .75rem;font-weight:600}.markdown-preview a,.history-markdown a{color:#2563eb;text-decoration:underline;text-underline-offset:.18em}.emoji-popover{display:flex;flex-wrap:wrap;gap:.5rem;max-width:16rem}.emoji-option{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:1.25rem;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i2$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "directive", type: i2$6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i5.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "modal", "visible", "position", "draggable"], outputs: ["onHide"] }, { kind: "ngmodule", type: DividerModule }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i6.Panel, selector: "p-panel", inputs: ["id", "toggleable", "header", "collapsed", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i7.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i8.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DiscussionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'discussion', standalone: true, providers: [ConfirmationService, DiscussionApi], imports: [
+                        CommonModule,
+                        FormsModule,
+                        AvatarModule,
+                        ButtonModule,
+                        CardModule,
+                        ConfirmDialog,
+                        DividerModule,
+                        PanelModule,
+                        PopoverModule,
+                        ProgressSpinnerModule,
+                        TagModule,
+                        Textarea,
+                        DatePipe,
+                        TranslatePipe
+                    ], template: `
+    <p-confirmDialog/>
+
+    <section class="flex flex-col gap-4">
+
+      <p-card class="block">
+        <div class="flex flex-col gap-4">
+          @if (!previewMode) {
+            <textarea
+              pTextarea
+              class="min-h-28 w-full"
+              [autoResize]="true"
+              rows="5"
+              [(ngModel)]="newComment"
+              (ngModelChange)="onComposerInput()"
+              [placeholder]="'discussionComponent.writeCommentPlaceholder' | translate"
+            ></textarea>
+          } @else {
+            <div
+              class="markdown-preview min-h-28 rounded-2xl border border-surface-200 bg-surface-50 px-4 py-3 leading-7 dark:border-surface-700 dark:bg-surface-900/40"
+              [innerHTML]="renderMarkdown(newComment)"
+            ></div>
+          }
+
+          @if (mentionSuggestions.length > 0) {
+            <p-panel class="block">
+              <ng-template pTemplate="header">
+                <div class="inline-flex items-center gap-2 text-sm font-medium">
+                  <i class="pi pi-at"></i>
+                  <span>{{ 'discussionComponent.mentionSuggestions' | translate }}</span>
+                </div>
+              </ng-template>
+
+              <div class="flex flex-col gap-3">
+                @for (candidate of mentionSuggestions; track candidate.userId) {
+                  <button
+                    type="button"
+                    class="flex w-full items-center justify-between gap-4 rounded-xl border border-transparent px-3 py-3 text-left transition hover:border-primary-200 hover:bg-primary-50 dark:hover:border-primary-800 dark:hover:bg-primary-950/30"
+                    (click)="insertMention(candidate)"
+                  >
+                    <div class="min-w-0">
+                      <strong>{{ candidate.displayName }}</strong>
+                      <small class="mt-1 block text-surface-500">{{ candidate.email }}</small>
+                    </div>
+                    <i class="pi pi-arrow-up-left shrink-0 text-surface-400"></i>
+                  </button>
+                }
+              </div>
+            </p-panel>
+          }
+
+          @if (pendingFiles.length > 0) {
+            <div class="flex flex-col gap-3">
+              @for (file of pendingFiles; track file.name + file.size) {
+                <div
+                  class="flex flex-col gap-3 rounded-2xl border border-surface-200 px-4 py-3 sm:flex-row sm:items-center sm:justify-between dark:border-surface-700">
+                  <div class="inline-flex items-center gap-2">
+                    <i class="pi pi-file"></i>
+                    <span class="break-all">{{ file.name }}</span>
+                    <p-tag [value]="formatBytes(file.size)" severity="contrast"/>
+                  </div>
+                  <p-button
+                    icon="pi pi-times"
+                    severity="danger"
+                    [rounded]="true"
+                    [text]="true"
+                    (onClick)="removePendingFile(file)"
+                  />
+                </div>
+              }
+            </div>
+          }
+
+          <div class="flex flex-col gap-2 sm:flex-row sm:justify-end">
+            <p-button
+              [label]="
+                previewMode
+                  ? ('discussionComponent.edit' | translate)
+                  : ('discussionComponent.preview' | translate)
+              "
+              [icon]="previewMode ? 'pi pi-pencil' : 'pi pi-eye'"
+              severity="secondary"
+              [text]="true"
+              (onClick)="previewMode = !previewMode"
+            />
+
+            <label class="file-trigger">
+              <p-button
+                [label]="'discussionComponent.attachFiles' | translate"
+                icon="pi pi-paperclip"
+                severity="secondary"
+                [text]="true"
+              />
+              <input type="file" multiple (change)="onFilesSelected($event)"/>
+            </label>
+            <p-button
+              [label]="'discussionComponent.send' | translate"
+              icon="pi pi-send"
+              [loading]="submitting"
+              [disabled]="submitting || !newComment.trim()"
+              (onClick)="createComment()"
+            />
+          </div>
+        </div>
+      </p-card>
+
+      @if (loading) {
+        <div
+          class="flex min-h-20 flex-col items-center justify-center gap-3 rounded-2xl border border-surface-200 px-4 py-5 text-surface-500 dark:border-surface-700">
+          <p-progressSpinner strokeWidth="4"/>
+          <span>{{ 'discussionComponent.loadingComments' | translate }}</span>
+        </div>
+      } @else if (comments.length === 0) {
+        <div
+          class="flex min-h-20 items-center justify-center gap-3 rounded-2xl border border-surface-200 px-4 py-5 text-surface-500 dark:border-surface-700">
+          <i class="pi pi-inbox"></i>
+          <span>{{ 'discussionComponent.noCommentsYet' | translate }}</span>
+        </div>
+      } @else {
+        <div class="flex flex-col gap-4">
+          @for (comment of comments; track comment.commentId) {
+            <p-card class="block">
+              <ng-template pTemplate="content">
+                <div class="grid gap-4 md:grid-cols-[3.2rem_minmax(0,1fr)]">
+                  <div>
+                    <p-avatar
+                      [label]="getInitialsFromString(comment.authorDisplayName)"
+                      shape="circle"
+                    />
+                  </div>
+
+                  <div class="flex flex-col gap-2">
+                    <div class="flex flex-row gap-3 justify-between">
+                      <div class="flex flex-wrap items-center gap-2">
+                        <strong>{{ comment.authorDisplayName }}</strong>
+                        <span
+                          class="text-sm text-surface-500">{{ comment.createdAt | date: layoutService.dateTimeFormat() }}</span>
+                      </div>
+
+                      <div class="flex flex-wrap items-center justify-end gap-2">
+                        <div class="flex flex-wrap items-center">
+                          @if (comment.isEdited) {
+                            <p-tag [value]="'discussionComponent.edited' | translate" icon="pi pi-pencil" severity="warn"/>
+                          }
+                        </div>
+                        @if (comment.canEdit) {
+                          <p-button
+                            icon="pi pi-pencil"
+                            severity="secondary"
+                            [rounded]="true"
+                            [text]="true"
+                            (onClick)="startEdit(comment)"
+                          />
+                        }
+                        @if (comment.historyCount > 0) {
+                          <p-button
+                            icon="pi pi-history"
+                            severity="secondary"
+                            [rounded]="true"
+                            [text]="true"
+                            (onClick)="toggleHistory(comment)"
+                          />
+                        }
+                        @if (comment.canDelete) {
+                          <p-button
+                            icon="pi pi-trash"
+                            severity="danger"
+                            [rounded]="true"
+                            [text]="true"
+                            (onClick)="deleteComment(comment)"
+                          />
+                        }
+                      </div>
+                    </div>
+                    @if (editingCommentId === comment.commentId) {
+                      <div class="flex flex-col gap-4">
+                        <textarea
+                          pTextarea
+                          class="min-h-24 w-full"
+                          [autoResize]="true"
+                          rows="4"
+                          [(ngModel)]="editContent"
+                          [placeholder]="'discussionComponent.editCommentPlaceholder' | translate"
+                        ></textarea>
+                        <div class="flex flex-col gap-2 sm:flex-row sm:justify-end">
+                          <div>
+                            <label class="file-trigger">
+                              <p-button
+                                [label]="'discussionComponent.addAttachment' | translate"
+                                icon="pi pi-paperclip"
+                                [text]="true"
+                                severity="secondary"
+                              />
+                              <input type="file" multiple (change)="onInlineFilesSelected(comment, $event)"/>
+                            </label>
+                          </div>
+
+                          <p-button
+                            [label]="'discussionComponent.save' | translate"
+                            icon="pi pi-check"
+                            [disabled]="!editContent.trim()"
+                            (onClick)="saveEdit(comment)"
+                          />
+                          <p-button
+                            [label]="'discussionComponent.cancel' | translate"
+                            icon="pi pi-times"
+                            severity="secondary"
+                            [text]="true"
+                            (onClick)="cancelEdit()"
+                          />
+                        </div>
+                      </div>
+                    } @else {
+                      <div class="markdown-preview" [innerHTML]="renderMarkdown(comment.content)"></div>
+                    }
+
+                    @if (comment.attachments.length > 0) {
+                      <div class="flex flex-col gap-3">
+                        <div class="flex flex-col gap-3">
+                          @for (attachment of comment.attachments; track attachment.attachmentId) {
+                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
+                              <div class="inline-flex items-center gap-2">
+                                <i class="pi pi-file"></i>
+                                <button
+                                  type="button"
+                                  class="break-all bg-transparent p-0 text-left font-semibold text-primary-600 transition hover:text-primary-500"
+                                  (click)="downloadAttachment(attachment)"
+                                >
+                                  {{ attachment.fileName }}
+                                </button>
+                                <p-tag [value]="formatBytes(attachment.fileSize)" severity="contrast"/>
+                              </div>
+
+                              @if (comment.canEdit) {
+                                <p-button
+                                  icon="pi pi-times"
+                                  severity="danger"
+                                  [rounded]="true"
+                                  [text]="true"
+                                  (onClick)="deleteAttachment(comment, attachment)"
+                                />
+                              }
+                            </div>
+                          }
+                        </div>
+                      </div>
+                    }
+
+                    <div class="flex flex-wrap items-center gap-2">
+                      @for (reaction of getReactions(comment); track reaction.emojiCode) {
+                        <p-button
+                          [label]="reaction.emojiCode + ' ' + reaction.count"
+                          severity="secondary"
+                          [outlined]="false"
+                          (onClick)="toggleReaction(comment, reaction)"
+                        />
+                      }
+
+                      @if (!hasUserReaction(comment)) {
+                        <p-button
+                          icon="pi pi-face-smile"
+                          severity="secondary"
+                          [rounded]="true"
+                          [text]="true"
+                          (onClick)="reactionPopover.toggle($event)"
+                        />
+                        <p-popover #reactionPopover>
+                          <div class="emoji-popover">
+                            @for (emoji of emojiPalette; track emoji) {
+                              <button
+                                type="button"
+                                class="emoji-option"
+                                (click)="reactWithEmoji(comment, emoji, reactionPopover)"
+                              >
+                                {{ emoji }}
+                              </button>
+                            }
+                          </div>
+                        </p-popover>
+                      }
+                    </div>
+
+                    @if (historyByComment[comment.commentId]?.opened) {
+                      <p-panel class="block" [toggleable]="true" [collapsed]="false">
+                        <ng-template pTemplate="header">
+                          <div class="inline-flex items-center gap-2 text-sm font-medium">
+                            <i class="pi pi-history"></i>
+                            <span>{{ 'discussionComponent.editHistory' | translate }}</span>
+                          </div>
+                        </ng-template>
+
+                        @if (historyByComment[comment.commentId]?.loading) {
+                          <div class="flex items-center gap-3 text-surface-500">
+                            <p-progressSpinner strokeWidth="4"/>
+                            <span>{{ 'discussionComponent.loadingHistory' | translate }}</span>
+                          </div>
+                        } @else {
+                          <div class="flex flex-col gap-4">
+                            @for (item of historyByComment[comment.commentId]?.items ?? []; track item.commentEditHistoryId) {
+                              <div class="rounded-2xl border border-surface-200 px-4 py-4 dark:border-surface-700">
+                                <div class="mb-3 inline-flex items-center gap-2 text-sm font-semibold">
+                                  <i class="pi pi-clock"></i>
+                                  <span>{{ item.editedByDisplayName }} · {{ item.editedAt | date: 'short' }}</span>
+                                </div>
+                                <div class="grid gap-4 lg:grid-cols-2">
+                                  <div class="flex flex-col gap-2">
+                                    <p-tag [value]="'discussionComponent.before' | translate" severity="secondary"/>
+                                    <div
+                                      class="history-markdown rounded-2xl bg-surface-50 px-4 py-3 leading-7 dark:bg-surface-900/40"
+                                      [innerHTML]="renderMarkdown(item.oldContent)"
+                                    ></div>
+                                  </div>
+                                  <div class="flex flex-col gap-2">
+                                    <p-tag [value]="'discussionComponent.after' | translate" severity="success"/>
+                                    <div
+                                      class="history-markdown rounded-2xl bg-surface-50 px-4 py-3 leading-7 dark:bg-surface-900/40"
+                                      [innerHTML]="renderMarkdown(item.newContent)"
+                                    ></div>
+                                  </div>
+                                </div>
+                              </div>
+                            }
+                          </div>
+                        }
+                      </p-panel>
+                    }
+                  </div>
+                </div>
+              </ng-template>
+            </p-card>
+          }
+        </div>
+      }
+    </section>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.file-trigger{position:relative;display:inline-flex}.file-trigger input{position:absolute;inset:0;opacity:0;cursor:pointer}.markdown-preview,.history-markdown{word-break:break-word}.markdown-preview :is(h1,h2,h3),.history-markdown :is(h1,h2,h3){margin:0 0 .75rem;font-weight:600}.markdown-preview a,.history-markdown a{color:#2563eb;text-decoration:underline;text-underline-offset:.18em}.emoji-popover{display:flex;flex-wrap:wrap;gap:.5rem;max-width:16rem}.emoji-option{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;font-size:1.25rem;cursor:pointer}\n"] }]
+        }], propDecorators: { objectTypeId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], objectId: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
 /**
  * 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.
@@ -4630,5 +6036,5 @@ const httpLoaderAuthFactory = (httpClient) => {
  * Generated bundle index. Do not edit.
  */
 
-export { AppConfiguratorComponent, AppFloatingConfiguratorComponent, AppLayoutComponent, AppModulesComponent, AppTopbar, AuthGuardService, BaseDataService, BaseModuleComponent, ConfigComponent, ContentType, DbMigrationComponent, ErrorComponent, FooterComponent, HttpClient, KeycloakSecurityService, L10nService, LOGO_COMPONENT_TOKEN, LayoutService, LogoComponent, LogoService, MenuComponent, MenuService, MsgService, NotfoundComponent, NotificationService, ProfileComponent, SecurePipe, SecurityComponent, SecurityDataService, SecurityService, SecurityStorageService, SidebarComponent, TableFilterService, TopBarService, UnauthorizedComponent, UserService, httpLoaderAuthFactory, langIntercept, provideLogoComponent };
+export { AppConfiguratorComponent, AppFloatingConfiguratorComponent, AppLayoutComponent, AppModulesComponent, AppTopbar, AuthGuardService, BaseDataService, BaseModuleComponent, ConfigComponent, ContentType, DbMigrationComponent, DiscussionComponent, ErrorComponent, FooterComponent, HttpClient, KeycloakSecurityService, L10nService, LOGO_COMPONENT_TOKEN, LayoutService, LogoComponent, LogoService, MenuComponent, MenuService, MsgService, NotfoundComponent, NotificationService, ProfileComponent, SecurePipe, SecurityComponent, SecurityDataService, SecurityService, SecurityStorageService, SidebarComponent, TableFilterService, TopBarService, UnauthorizedComponent, UserService, httpLoaderAuthFactory, langIntercept, provideLogoComponent };
 //# sourceMappingURL=oip-common.mjs.map