@yuuvis/user-management-app 2.0.3 → 2.1.0

package/fesm2022/yuuvis-user-management-app.mjs

@@ -1,26 +1,38 @@
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, signal, Input, linkedSignal, input, output, computed, effect, Inject, HostBinding, ViewChild } from '@angular/core';
-import * as i3 from '@angular/router';
+import { inject, Injectable, signal, computed, Component, Pipe, Input, linkedSignal, input, output, effect, Inject, HostBinding, ViewChild } from '@angular/core';
+import * as i5 from '@angular/router';
 import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
-import * as i1 from '@angular/material/button-toggle';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2$1 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i4 from '@angular/material/tooltip';
+import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import * as i1$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { filter } from 'rxjs/operators';
 import { Title } from '@angular/platform-browser';
-import { TranslateService, TranslatePipe, BackendService, ApiBase, Logger, NotificationService, UserService } from '@yuuvis/client-core';
-import * as i6 from '@yuuvis/material/panes';
+import { BackendService, TranslateService, ApiBase, TranslatePipe, NotificationService, Logger, LocalizationService, UserService } from '@yuuvis/client-core';
+import * as i6$1 from '@yuuvis/material/panes';
 import { YmtPanesModule } from '@yuuvis/material/panes';
-import * as i4$1 from '@yuuvis/client-shell';
+import * as i6 from '@yuuvis/client-shell';
 import { YuvClientShellModule } from '@yuuvis/client-shell';
 import { ShellService } from '@yuuvis/client-shell-core';
-import * as i1$3 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
-import * as i1$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule, FormBuilder, FormControl, Validators } from '@angular/forms';
+import * as i2 from '@angular/cdk/clipboard';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import { map, switchMap, of, forkJoin } from 'rxjs';
+import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
+import { ConfirmService, BusyOverlayDirective, DialogComponent, ClickDoubleDirective } from '@yuuvis/client-components/common';
+import { HttpParams } from '@angular/common/http';
 import * as i2$2 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
@@ -28,24 +40,15 @@ import * as i3$4 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { SelectionModel } from '@angular/cdk/collections';
-import { ConfirmService, BusyOverlayDirective, DialogComponent, ClickDoubleDirective } from '@yuuvis/client-components/common';
 import { SimpleSearchComponent } from '@yuuvis/client-framework/simple-search';
 import * as i8 from '@yuuvis/client-components/overflow-menu';
 import { YuvOverflowMenuModule } from '@yuuvis/client-components/overflow-menu';
-import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
-import * as i5 from '@yuuvis/material/layout';
+import { YmtBadge } from '@yuuvis/material/badge';
+import * as i5$1 from '@yuuvis/material/layout';
 import { YmtLayoutModule } from '@yuuvis/material/layout';
-import { HttpParams } from '@angular/common/http';
-import { map, switchMap, of, forkJoin } from 'rxjs';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3$1 from '@angular/material/chips';
+import * as i3$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
-import * as i1$1 from '@angular/forms';
-import { ReactiveFormsModule, FormBuilder, FormControl, Validators } from '@angular/forms';
-import * as i2 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$2 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
 import * as i7 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i3$3 from '@angular/material/list';
@@ -53,62 +56,26 @@ import { MatListModule } from '@angular/material/list';
 import { MatCardModule } from '@angular/material/card';
 
 const APP_ID = 'io.yuuvis.app.user-management';
+/**
+ * Role that marks a user as managed by an external identity provider (SCIM). It must never be
+ * assignable or removable through this UI. The backend already hides it, but we filter it out
+ * defensively in case a future backend change starts returning it from the roles endpoint again.
+ */
+const SCIM_MANAGED_ROLE = 'scim-managed';
 const APP_ICONS = {
     refresh: 'refresh',
     stateActive: 'account_circle',
     stateInactive: 'account_circle_off',
+    sourceExternal: 'cloud',
     actionCreateNewUser: 'person_add',
     actionEditUser: 'person_edit',
     actionActivateUser: 'person_check',
     actionDeactivateUser: 'person_off',
     actionDeleteUser: 'delete',
     actionEditGroup: 'edit',
+    actionSettings: 'settings',
 };
 
-class YuvUserManagementComponent {
-    #shell = inject(ShellService);
-    #titleService = inject(Title);
-    #translateService = inject(TranslateService);
-    #router = inject(Router);
-    #activatedRoute = inject(ActivatedRoute);
-    #app = this.#shell.getApp(APP_ID);
-    appName = this.#app?.title;
-    views = [
-        { id: 'users', title: 'yuv.app.user-management.navigation.users.label', link: 'users', tooltip: 'yuv.app.user-management.navigation.users.tooltip' },
-        { id: 'groups', title: 'yuv.app.user-management.navigation.groups.label', link: 'groups', tooltip: 'yuv.app.user-management.navigation.groups.tooltip' },
-    ];
-    activeLink = this.views[0].link;
-    constructor() {
-        this.#router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e) => {
-            const view = this.views.find(v => e.urlAfterRedirects.includes('/' + v.link));
-            if (view)
-                this.activeLink = view.link;
-        });
-    }
-    ngOnInit() {
-        const translatedTitle = this.appName.startsWith('yuv.')
-            ? this.#translateService.instant(this.appName)
-            : this.appName;
-        this.#titleService.setTitle(translatedTitle);
-    }
-    navigate(link) {
-        this.#router.navigate([link], { relativeTo: this.#activatedRoute });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: YuvUserManagementComponent, isStandalone: true, selector: "ymusrmgmt-root", ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"actions\">\n  <mat-button-toggle-group [value]=\"activeLink\" (change)=\"navigate($event.value)\" hideSingleSelectionIndicator>\n    @for (view of views; track view.id) {\n      <mat-button-toggle [value]=\"view.link\" [matTooltip]=\"view.tooltip | translate\">{{ view.title | translate }}</mat-button-toggle>\n    }\n  </mat-button-toggle-group>\n</ng-template>\n\n<main class=\"usrmgmt-main__content\" [attr.aria-label]=\"'yuv.app.user-management.content.aria.label' | translate\">\n  <router-outlet></router-outlet>\n</main>\n\n<router-outlet name=\"modal\"></router-outlet>\n", styles: [":host{display:flex;flex-flow:column;height:100%}:host .usrmgmt-main__content{flex:1;overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i4$1.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUserManagementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ymusrmgmt-root', standalone: true, imports: [
-                        MatButtonToggleModule,
-                        MatTooltipModule,
-                        RouterModule,
-                        TranslatePipe,
-                        YmtPanesModule,
-                        YuvClientShellModule,
-                    ], template: "<ng-template yuvAppHeaderSlot=\"actions\">\n  <mat-button-toggle-group [value]=\"activeLink\" (change)=\"navigate($event.value)\" hideSingleSelectionIndicator>\n    @for (view of views; track view.id) {\n      <mat-button-toggle [value]=\"view.link\" [matTooltip]=\"view.tooltip | translate\">{{ view.title | translate }}</mat-button-toggle>\n    }\n  </mat-button-toggle-group>\n</ng-template>\n\n<main class=\"usrmgmt-main__content\" [attr.aria-label]=\"'yuv.app.user-management.content.aria.label' | translate\">\n  <router-outlet></router-outlet>\n</main>\n\n<router-outlet name=\"modal\"></router-outlet>\n", styles: [":host{display:flex;flex-flow:column;height:100%}:host .usrmgmt-main__content{flex:1;overflow-y:hidden}\n"] }]
-        }], ctorParameters: () => [] });
-
 class YuvUserManagementService {
     static DEFAULT_PAGE_SIZE = 15;
     #backendService = inject(BackendService);
@@ -135,7 +102,9 @@ class YuvUserManagementService {
     fetchAllRoles() {
         return this.#backendService
             .get(`/tenant-management/api/idm/roles`, ApiBase.none)
-            .pipe(map((roles) => roles.map(role => role.name)));
+            .pipe(map((roles) => roles
+            .map(role => role.name)
+            .filter(name => name !== SCIM_MANAGED_ROLE)));
     }
     createUser(createUserRequest, withInvitation) {
         const createParams = new HttpParams()
@@ -210,6 +179,43 @@ class YuvUserManagementService {
         })));
         return combined$;
     }
+    /**
+     * Fetches the OIDC identity provider configuration (e.g. Microsoft Entra ID) of the current
+     * tenant. Emits a 404 error if no OIDC identity provider is configured.
+     */
+    fetchOIDCProviderConfig() {
+        return this.#backendService
+            .get(`/tenant-management/api/admin/identity-provider/oidc`, ApiBase.none);
+    }
+    /**
+     * Creates (or updates) the OIDC identity provider configuration of the current tenant. The
+     * discovery URL must be passed as `config.metadataDescriptorUrl` — the backend resolves the
+     * OIDC endpoints (authorizationUrl, tokenUrl, jwksUrl, ...) from the discovery document.
+     */
+    setOIDCProviderConfig(providerConfig) {
+        return this.#backendService
+            .post(`/tenant-management/api/admin/identity-provider/oidc`, providerConfig, ApiBase.none);
+    }
+    /**
+     * Deletes the OIDC identity provider configuration of the current tenant, after the user
+     * confirmed the action.
+     */
+    deleteOIDCProviderConfig() {
+        return this.#confirmService
+            .confirm({
+            title: this.#translateService.instant('yuv.app.user-management.settings.oidc.action.delete.label'),
+            message: this.#translateService.instant('yuv.app.user-management.settings.oidc.action.delete.confirm.message'),
+        })
+            .pipe(switchMap((confirmed) => {
+            if (confirmed) {
+                return this.#backendService
+                    .delete(`/tenant-management/api/admin/identity-provider/oidc`, ApiBase.none)
+                    .pipe(map(() => true));
+            }
+            else
+                return of(false);
+        }));
+    }
     getGroupDetails(id) {
         const queryParams = new HttpParams()
             .set('briefRepresentation', false);
@@ -226,6 +232,292 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 }]
         }] });
 
+const components$4 = [BusyOverlayDirective, YmtButtonDirective, DialogComponent];
+const modules$4 = [CommonModule, ReactiveFormsModule, TranslatePipe, ClipboardModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTooltipModule];
+/** Placeholder shown in the client secret field of an already configured provider; the backend never returns the real secret. */
+const FAKE_CLIENT_SECRET = '••••••••••••••••';
+class SettingsComponent {
+    #fb = inject(FormBuilder);
+    #userManagementService = inject(YuvUserManagementService);
+    #dialogRef = inject((MatDialogRef));
+    #translateService = inject(TranslateService);
+    #notificationService = inject(NotificationService);
+    #logger = inject(Logger);
+    busy = signal(true, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** True if the tenant has no OIDC identity provider configured (backend responds with 404). */
+    notConfigured = signal(false, ...(ngDevMode ? [{ debugName: "notConfigured" }] : /* istanbul ignore next */ []));
+    provider = signal(undefined, ...(ngDevMode ? [{ debugName: "provider" }] : /* istanbul ignore next */ []));
+    /**
+     * SCIM tenant URL. Uses the backend-provided value if present; otherwise falls back to a
+     * client-side computation from the redirect URI: `{redirectUri up to and including /realms/{tenant}}/scim/v2`.
+     */
+    tenantUrl = computed(() => {
+        const scimTenantUrl = this.provider()?.scimProvisioning?.tenantUrl;
+        if (scimTenantUrl)
+            return scimTenantUrl;
+        const redirectUri = this.provider()?.redirectUri;
+        const match = redirectUri?.match(/^(.*\/realms\/[^/]+)\//);
+        return match ? `${match[1]}/scim/v2` : undefined;
+    }, ...(ngDevMode ? [{ debugName: "tenantUrl" }] : /* istanbul ignore next */ []));
+    displayName = new FormControl('Microsoft Entra ID', [Validators.required]);
+    discoveryUrl = new FormControl('', [Validators.required]);
+    clientId = new FormControl('', [Validators.required]);
+    clientSecret = new FormControl('', [Validators.required]);
+    form = this.#fb.group({
+        displayName: this.displayName,
+        discoveryUrl: this.discoveryUrl,
+        clientId: this.clientId,
+        clientSecret: this.clientSecret,
+    });
+    /** Only used to update the client secret of an already configured OIDC identity provider, e.g. after it was rotated at the IdP. Pre-filled with a fake value; the update button unlocks once the user edits it. */
+    newClientSecret = new FormControl('');
+    constructor() {
+        this.#loadProviderConfig();
+    }
+    /** Resets the client secret field back to its fake placeholder value, pristine, so the update button locks again. */
+    #resetNewClientSecretField() {
+        this.newClientSecret.setValue(FAKE_CLIENT_SECRET);
+        this.newClientSecret.markAsPristine();
+    }
+    #loadProviderConfig() {
+        this.#userManagementService.fetchOIDCProviderConfig().subscribe({
+            next: (provider) => {
+                this.provider.set(provider);
+                this.notConfigured.set(false);
+                this.#resetNewClientSecretField();
+                this.busy.set(false);
+            },
+            error: (e) => {
+                if (e.status === 404) {
+                    this.notConfigured.set(true);
+                }
+                else {
+                    this.error.set(this.#translateService.instant('yuv.app.user-management.settings.oidc.error.unknown'));
+                    this.#logger.error('Failed to fetch OIDC identity provider configuration', e);
+                }
+                this.busy.set(false);
+            },
+        });
+    }
+    configure() {
+        this.busy.set(true);
+        this.error.set(undefined);
+        const providerConfig = {
+            displayName: this.displayName.value?.trim() ?? '',
+            config: {
+                // The discovery URL must be sent as `metadataDescriptorUrl` — the backend resolves the
+                // OIDC endpoints (authorizationUrl, tokenUrl, jwksUrl, ...) from the discovery document.
+                metadataDescriptorUrl: this.discoveryUrl.value?.trim() ?? '',
+                clientId: this.clientId.value?.trim() ?? '',
+                clientSecret: this.clientSecret.value ?? '',
+                defaultScope: 'openid profile',
+            },
+        };
+        this.#userManagementService
+            .setOIDCProviderConfig(providerConfig)
+            .pipe(
+        // Re-fetch so the overlay shows exactly what a fresh GET delivers (secrets stripped etc.).
+        switchMap(() => this.#userManagementService.fetchOIDCProviderConfig()))
+            .subscribe({
+            next: (provider) => {
+                this.provider.set(provider);
+                this.notConfigured.set(false);
+                this.#resetNewClientSecretField();
+                this.busy.set(false);
+            },
+            error: (e) => {
+                // 422: the backend could not resolve the OIDC endpoints from the discovery URL
+                this.error.set(this.#translateService.instant(e.status === 422
+                    ? 'yuv.app.user-management.settings.oidc.configure.error.discovery'
+                    : 'yuv.app.user-management.settings.oidc.configure.error.unknown'));
+                this.#logger.error('Failed to configure OIDC identity provider', e);
+                this.busy.set(false);
+            },
+        });
+    }
+    /** Updates the client secret of the already configured OIDC identity provider, keeping all other config values unchanged. */
+    update() {
+        const oidcProvider = this.provider();
+        const newClientSecret = this.newClientSecret.value?.trim();
+        if (!oidcProvider || !this.newClientSecret.dirty || !newClientSecret)
+            return;
+        this.busy.set(true);
+        this.error.set(undefined);
+        const providerConfig = {
+            displayName: oidcProvider.displayName,
+            config: {
+                metadataDescriptorUrl: oidcProvider.config?.['metadataDescriptorUrl'] ?? '',
+                clientId: oidcProvider.config?.['clientId'] ?? '',
+                clientSecret: newClientSecret,
+                defaultScope: oidcProvider.config?.['defaultScope'] ?? '',
+            },
+        };
+        this.#userManagementService
+            .setOIDCProviderConfig(providerConfig)
+            .pipe(
+        // Re-fetch so the overlay shows exactly what a fresh GET delivers (secrets stripped etc.).
+        switchMap(() => this.#userManagementService.fetchOIDCProviderConfig()))
+            .subscribe({
+            next: (provider) => {
+                this.provider.set(provider);
+                this.#resetNewClientSecretField();
+                this.busy.set(false);
+                this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.update.success'));
+            },
+            error: (e) => {
+                this.error.set(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.update.error'));
+                this.#logger.error('Failed to update the OIDC identity provider client secret', e);
+                this.busy.set(false);
+            },
+        });
+    }
+    /** Asks the user to confirm, then deletes the OIDC identity provider configuration. */
+    delete() {
+        this.#userManagementService.deleteOIDCProviderConfig().subscribe({
+            next: (deleted) => {
+                if (deleted) {
+                    this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.delete.success'));
+                    this.#dialogRef.close();
+                }
+            },
+            error: (e) => {
+                this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.delete.error'));
+                this.#logger.error('Failed to delete OIDC identity provider configuration', e);
+            },
+        });
+    }
+    /** Handles the `cdkCopyToClipboardCopied` output, which reports whether the copy succeeded. */
+    onCopied(success) {
+        if (success) {
+            this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.copy.success'));
+        }
+        else {
+            this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.copy.error'));
+        }
+    }
+    close() {
+        this.#dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SettingsComponent, isStandalone: true, selector: "ymusrmgmt-settings", ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.settings.dialog.title' | translate\">\n  <main class=\"yuv-dialog-content\">\n    @if (notConfigured()) {\n      <p class=\"hint\">{{ 'yuv.app.user-management.settings.oidc.notConfigured' | translate }}</p>\n      <form [formGroup]=\"form\">\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.displayName' | translate }}</mat-label>\n          <input matInput [formControl]=\"displayName\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.discoveryUrl' | translate }}</mat-label>\n          <input matInput [formControl]=\"discoveryUrl\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.clientId' | translate }}</mat-label>\n          <input matInput [formControl]=\"clientId\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.clientSecret' | translate }}</mat-label>\n          <input matInput [formControl]=\"clientSecret\" type=\"password\" autocomplete=\"new-password\" />\n        </mat-form-field>\n      </form>\n    } @else if (provider(); as oidcProvider) {\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.displayName' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.displayName || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.discoveryUrl' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.config?.['metadataDescriptorUrl'] || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.clientId' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.config?.['clientId'] || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.clientSecret' | translate }}</mat-label>\n        <input matInput [formControl]=\"newClientSecret\" type=\"password\" autocomplete=\"new-password\" />\n      </mat-form-field>\n      @if (oidcProvider.redirectUri; as redirectUri) {\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.redirectUri' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"redirectUri\" />\n          <button\n            matSuffix\n            mat-icon-button\n            class=\"copy-button\"\n            type=\"button\"\n            [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n            [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n            [cdkCopyToClipboard]=\"redirectUri\"\n            (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n            <mat-icon>content_copy</mat-icon>\n          </button>\n        </mat-form-field>\n      }\n\n      @if (oidcProvider.scimProvisioning; as scimProvisioning) {\n        <h4>{{ 'yuv.app.user-management.settings.oidc.section.provisioning' | translate }}</h4>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.tenantUrl' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"tenantUrl() || '\u2014'\" />\n          @if (tenantUrl(); as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.tokenUrl' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.tokenEndpoint || '\u2014'\" />\n          @if (scimProvisioning.tokenEndpoint; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.clientName' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.clientId || '\u2014'\" />\n          @if (scimProvisioning.clientId; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.clientSecret' | translate }}</mat-label>\n          <input matInput type=\"password\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.clientSecret || '\u2014'\" />\n          @if (scimProvisioning.clientSecret; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n      }\n    }\n\n    @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    @if (provider()) {\n      <button ymtButton=\"danger\" class=\"delete-button\" [disabled]=\"busy()\" (click)=\"delete()\">\n        {{ 'yuv.app.user-management.settings.oidc.action.delete.label' | translate }}\n      </button>\n    }\n    <button [ymtButton]=\"notConfigured() ? 'secondary' : 'primary'\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.settings.action.button.close' | translate }}\n    </button>\n    @if (notConfigured()) {\n      <button ymtButton=\"primary\" [disabled]=\"busy() || form.invalid\" (click)=\"configure()\">\n        {{ 'yuv.app.user-management.settings.action.button.configure' | translate }}\n      </button>\n    } @else if (provider()) {\n      <button ymtButton=\"secondary\" [disabled]=\"busy() || !newClientSecret.dirty || !newClientSecret.value?.trim()\" (click)=\"update()\">\n        {{ 'yuv.app.user-management.settings.oidc.action.update.label' | translate }}\n      </button>\n    }\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{padding:var(--ymt-spacing-m);min-height:120px}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0}:host main h4{margin:var(--ymt-spacing-m) 0 var(--ymt-spacing-s)}:host footer .delete-button{margin-inline-end:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymusrmgmt-settings', standalone: true, imports: [...modules$4, ...components$4], template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.settings.dialog.title' | translate\">\n  <main class=\"yuv-dialog-content\">\n    @if (notConfigured()) {\n      <p class=\"hint\">{{ 'yuv.app.user-management.settings.oidc.notConfigured' | translate }}</p>\n      <form [formGroup]=\"form\">\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.displayName' | translate }}</mat-label>\n          <input matInput [formControl]=\"displayName\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.discoveryUrl' | translate }}</mat-label>\n          <input matInput [formControl]=\"discoveryUrl\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.clientId' | translate }}</mat-label>\n          <input matInput [formControl]=\"clientId\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.clientSecret' | translate }}</mat-label>\n          <input matInput [formControl]=\"clientSecret\" type=\"password\" autocomplete=\"new-password\" />\n        </mat-form-field>\n      </form>\n    } @else if (provider(); as oidcProvider) {\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.displayName' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.displayName || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.discoveryUrl' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.config?.['metadataDescriptorUrl'] || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.clientId' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.config?.['clientId'] || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.clientSecret' | translate }}</mat-label>\n        <input matInput [formControl]=\"newClientSecret\" type=\"password\" autocomplete=\"new-password\" />\n      </mat-form-field>\n      @if (oidcProvider.redirectUri; as redirectUri) {\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.redirectUri' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"redirectUri\" />\n          <button\n            matSuffix\n            mat-icon-button\n            class=\"copy-button\"\n            type=\"button\"\n            [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n            [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n            [cdkCopyToClipboard]=\"redirectUri\"\n            (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n            <mat-icon>content_copy</mat-icon>\n          </button>\n        </mat-form-field>\n      }\n\n      @if (oidcProvider.scimProvisioning; as scimProvisioning) {\n        <h4>{{ 'yuv.app.user-management.settings.oidc.section.provisioning' | translate }}</h4>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.tenantUrl' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"tenantUrl() || '\u2014'\" />\n          @if (tenantUrl(); as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.tokenUrl' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.tokenEndpoint || '\u2014'\" />\n          @if (scimProvisioning.tokenEndpoint; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.clientName' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.clientId || '\u2014'\" />\n          @if (scimProvisioning.clientId; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.clientSecret' | translate }}</mat-label>\n          <input matInput type=\"password\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.clientSecret || '\u2014'\" />\n          @if (scimProvisioning.clientSecret; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n      }\n    }\n\n    @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    @if (provider()) {\n      <button ymtButton=\"danger\" class=\"delete-button\" [disabled]=\"busy()\" (click)=\"delete()\">\n        {{ 'yuv.app.user-management.settings.oidc.action.delete.label' | translate }}\n      </button>\n    }\n    <button [ymtButton]=\"notConfigured() ? 'secondary' : 'primary'\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.settings.action.button.close' | translate }}\n    </button>\n    @if (notConfigured()) {\n      <button ymtButton=\"primary\" [disabled]=\"busy() || form.invalid\" (click)=\"configure()\">\n        {{ 'yuv.app.user-management.settings.action.button.configure' | translate }}\n      </button>\n    } @else if (provider()) {\n      <button ymtButton=\"secondary\" [disabled]=\"busy() || !newClientSecret.dirty || !newClientSecret.value?.trim()\" (click)=\"update()\">\n        {{ 'yuv.app.user-management.settings.oidc.action.update.label' | translate }}\n      </button>\n    }\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{padding:var(--ymt-spacing-m);min-height:120px}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0}:host main h4{margin:var(--ymt-spacing-m) 0 var(--ymt-spacing-s)}:host footer .delete-button{margin-inline-end:auto}\n"] }]
+        }], ctorParameters: () => [] });
+
+class YuvUserManagementComponent {
+    #shell = inject(ShellService);
+    #titleService = inject(Title);
+    #translateService = inject(TranslateService);
+    #router = inject(Router);
+    #activatedRoute = inject(ActivatedRoute);
+    #dialog = inject(MatDialog);
+    #app = this.#shell.getApp(APP_ID);
+    appName = this.#app?.title;
+    icons = APP_ICONS;
+    views = [
+        { id: 'users', title: 'yuv.app.user-management.navigation.users.label', link: 'users', tooltip: 'yuv.app.user-management.navigation.users.tooltip' },
+        { id: 'groups', title: 'yuv.app.user-management.navigation.groups.label', link: 'groups', tooltip: 'yuv.app.user-management.navigation.groups.tooltip' },
+    ];
+    activeLink = this.views[0].link;
+    constructor() {
+        this.#router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e) => {
+            const view = this.views.find(v => e.urlAfterRedirects.includes('/' + v.link));
+            if (view)
+                this.activeLink = view.link;
+        });
+    }
+    ngOnInit() {
+        const translatedTitle = this.appName.startsWith('yuv.')
+            ? this.#translateService.instant(this.appName)
+            : this.appName;
+        this.#titleService.setTitle(translatedTitle);
+    }
+    navigate(link) {
+        this.#router.navigate([link], { relativeTo: this.#activatedRoute });
+    }
+    openSettings() {
+        this.#dialog.open(SettingsComponent, {
+            width: '600px',
+            maxWidth: '90vw',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: YuvUserManagementComponent, isStandalone: true, selector: "ymusrmgmt-root", ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"actions\">\n  <div class=\"usrmgmt-header-actions\">\n    <mat-button-toggle-group [value]=\"activeLink\" (change)=\"navigate($event.value)\" hideSingleSelectionIndicator>\n      @for (view of views; track view.id) {\n        <mat-button-toggle [value]=\"view.link\" [matTooltip]=\"view.tooltip | translate\">{{ view.title | translate }}</mat-button-toggle>\n      }\n    </mat-button-toggle-group>\n    <button\n      mat-icon-button\n      class=\"usrmgmt-settings-button\"\n      [matTooltip]=\"'yuv.app.user-management.navigation.settings.tooltip' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.navigation.settings.label' | translate\"\n      (click)=\"openSettings()\">\n      <mat-icon>{{ icons.actionSettings }}</mat-icon>\n    </button>\n  </div>\n</ng-template>\n\n<main class=\"usrmgmt-main__content\" [attr.aria-label]=\"'yuv.app.user-management.content.aria.label' | translate\">\n  <router-outlet></router-outlet>\n</main>\n\n<router-outlet name=\"modal\"></router-outlet>\n", styles: [":host{display:flex;flex-flow:column;height:100%}:host .usrmgmt-main__content{flex:1;overflow-y:hidden}.usrmgmt-header-actions{display:flex;align-items:center;width:100%}.usrmgmt-header-actions .usrmgmt-settings-button{margin-inline-start:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i6.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUserManagementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymusrmgmt-root', standalone: true, imports: [
+                        MatButtonModule,
+                        MatButtonToggleModule,
+                        MatIconModule,
+                        MatTooltipModule,
+                        RouterModule,
+                        TranslatePipe,
+                        YmtPanesModule,
+                        YuvClientShellModule,
+                    ], template: "<ng-template yuvAppHeaderSlot=\"actions\">\n  <div class=\"usrmgmt-header-actions\">\n    <mat-button-toggle-group [value]=\"activeLink\" (change)=\"navigate($event.value)\" hideSingleSelectionIndicator>\n      @for (view of views; track view.id) {\n        <mat-button-toggle [value]=\"view.link\" [matTooltip]=\"view.tooltip | translate\">{{ view.title | translate }}</mat-button-toggle>\n      }\n    </mat-button-toggle-group>\n    <button\n      mat-icon-button\n      class=\"usrmgmt-settings-button\"\n      [matTooltip]=\"'yuv.app.user-management.navigation.settings.tooltip' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.navigation.settings.label' | translate\"\n      (click)=\"openSettings()\">\n      <mat-icon>{{ icons.actionSettings }}</mat-icon>\n    </button>\n  </div>\n</ng-template>\n\n<main class=\"usrmgmt-main__content\" [attr.aria-label]=\"'yuv.app.user-management.content.aria.label' | translate\">\n  <router-outlet></router-outlet>\n</main>\n\n<router-outlet name=\"modal\"></router-outlet>\n", styles: [":host{display:flex;flex-flow:column;height:100%}:host .usrmgmt-main__content{flex:1;overflow-y:hidden}.usrmgmt-header-actions{display:flex;align-items:center;width:100%}.usrmgmt-header-actions .usrmgmt-settings-button{margin-inline-start:auto}\n"] }]
+        }], ctorParameters: () => [] });
+
+const ROLE_KEY_PREFIX = 'role:';
+/** Localized role name, falling back to the technical name when no `_label` entry exists. */
+function resolveRoleLabel(localization, role) {
+    return localization.getLocalizedLabel(ROLE_KEY_PREFIX + role) ?? role;
+}
+/**
+ * Tooltip text for a role chip:
+ * - Localized label present → show technical name + description (if any): "ROLE_NAME – Description"
+ * - No localized label → technical name already visible as chip text; show description only (if any)
+ */
+function resolveRoleTooltip(localization, role) {
+    const label = localization.getLocalizedLabel(ROLE_KEY_PREFIX + role);
+    const description = localization.getLocalizedDescription(ROLE_KEY_PREFIX + role);
+    if (!label) {
+        return description ?? '';
+    }
+    return description ? `${role} – ${description}` : role;
+}
+class RoleLabelPipe {
+    #localization = inject(LocalizationService);
+    transform(role) {
+        return resolveRoleLabel(this.#localization, role);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RoleLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: RoleLabelPipe, isStandalone: true, name: "roleLabel" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RoleLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'roleLabel', standalone: true }]
+        }] });
+class RoleTooltipPipe {
+    #localization = inject(LocalizationService);
+    transform(role) {
+        return resolveRoleTooltip(this.#localization, role);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RoleTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: RoleTooltipPipe, isStandalone: true, name: "roleTooltip" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RoleTooltipPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'roleTooltip', standalone: true }]
+        }] });
+class SortRolesByLabelPipe {
+    #localization = inject(LocalizationService);
+    transform(roles) {
+        if (!roles)
+            return [];
+        return [...roles].sort((a, b) => resolveRoleLabel(this.#localization, a).localeCompare(resolveRoleLabel(this.#localization, b)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SortRolesByLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: SortRolesByLabelPipe, isStandalone: true, name: "sortRolesByLabel" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SortRolesByLabelPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'sortRolesByLabel', standalone: true }]
+        }] });
+
 class UserDetailsComponent {
     userService;
     formBuilder;
@@ -272,8 +564,8 @@ class UserDetailsComponent {
             enabled: [{ value: false, disabled: true }]
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UserDetailsComponent, deps: [{ token: YuvUserManagementService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: UserDetailsComponent, isStandalone: true, selector: "ymusrmgmt-user-details", inputs: { userId: "userId" }, ngImport: i0, template: "@let currentUserDetails = userDetails();\n@if (currentUserDetails) {\n  <form [formGroup]=\"userDetailsForm\" class=\"user-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.username' | translate)}}</mat-label>\n      <input matInput formControlName=\"username\" readonly>\n      <mat-icon matPrefix>account_box</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.email' | translate)}}</mat-label>\n      <input matInput formControlName=\"email\" readonly>\n      <mat-icon matPrefix>email</mat-icon>\n    </mat-form-field>              \n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.firstname' | translate)}}</mat-label>\n      <input matInput formControlName=\"firstName\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.lastname' | translate)}}</mat-label>\n      <input matInput formControlName=\"lastName\" readonly>\n    </mat-form-field>\n    <mat-form-field class=\"groups-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.groups' | translate)}}</mat-label>\n        <mat-chip-grid #groupChipGrid>\n          @if (currentUserDetails.groups) {\n            @for (group of currentUserDetails.groups.sort(); track group) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{group}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"groupChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>\n    <mat-form-field class=\"roles-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentUserDetails.effectiveRoles) {\n          @for (role of currentUserDetails.effectiveRoles.slice().sort(); track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentUserDetails.roles.indexOf(role) === -1\"><div class=\"chip\">{{role}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field>\n    <mat-slide-toggle formControlName=\"enabled\">\n              {{ userDetailsForm.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) :\n              ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n    </mat-slide-toggle>           \n  </form>\n}", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}:host .user-details-form .groups-field mat-chip-grid,:host .user-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UserDetailsComponent, deps: [{ token: YuvUserManagementService }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: UserDetailsComponent, isStandalone: true, selector: "ymusrmgmt-user-details", inputs: { userId: "userId" }, ngImport: i0, template: "@let currentUserDetails = userDetails();\n@if (currentUserDetails) {\n  <form [formGroup]=\"userDetailsForm\" class=\"user-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.username' | translate)}}</mat-label>\n      <input matInput formControlName=\"username\" readonly>\n      <mat-icon matPrefix>account_box</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.email' | translate)}}</mat-label>\n      <input matInput formControlName=\"email\" readonly>\n      <mat-icon matPrefix>email</mat-icon>\n    </mat-form-field>              \n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.firstname' | translate)}}</mat-label>\n      <input matInput formControlName=\"firstName\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.lastname' | translate)}}</mat-label>\n      <input matInput formControlName=\"lastName\" readonly>\n    </mat-form-field>\n    <mat-form-field class=\"groups-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.groups' | translate)}}</mat-label>\n        <mat-chip-grid #groupChipGrid>\n          @if (currentUserDetails.groups) {\n            @for (group of currentUserDetails.groups.sort(); track group) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{group}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"groupChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>\n    <mat-form-field class=\"roles-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentUserDetails.effectiveRoles) {\n          @for (role of currentUserDetails.effectiveRoles | sortRolesByLabel; track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentUserDetails.roles.indexOf(role) === -1\" [matTooltip]=\"role | roleTooltip\"><div class=\"chip\">{{role | roleLabel}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field>\n    <mat-slide-toggle formControlName=\"enabled\">\n              {{ userDetailsForm.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) :\n              ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n    </mat-slide-toggle>           \n  </form>\n}", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}:host .user-details-form .groups-field mat-chip-grid,:host .user-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }, { kind: "pipe", type: SortRolesByLabelPipe, name: "sortRolesByLabel" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UserDetailsComponent, decorators: [{
             type: Component,
@@ -284,10 +576,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatIconModule,
                         MatCheckboxModule,
                         MatSlideToggleModule,
+                        MatTooltipModule,
                         ReactiveFormsModule,
-                        TranslatePipe
-                    ], template: "@let currentUserDetails = userDetails();\n@if (currentUserDetails) {\n  <form [formGroup]=\"userDetailsForm\" class=\"user-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.username' | translate)}}</mat-label>\n      <input matInput formControlName=\"username\" readonly>\n      <mat-icon matPrefix>account_box</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.email' | translate)}}</mat-label>\n      <input matInput formControlName=\"email\" readonly>\n      <mat-icon matPrefix>email</mat-icon>\n    </mat-form-field>              \n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.firstname' | translate)}}</mat-label>\n      <input matInput formControlName=\"firstName\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.lastname' | translate)}}</mat-label>\n      <input matInput formControlName=\"lastName\" readonly>\n    </mat-form-field>\n    <mat-form-field class=\"groups-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.groups' | translate)}}</mat-label>\n        <mat-chip-grid #groupChipGrid>\n          @if (currentUserDetails.groups) {\n            @for (group of currentUserDetails.groups.sort(); track group) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{group}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"groupChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>\n    <mat-form-field class=\"roles-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentUserDetails.effectiveRoles) {\n          @for (role of currentUserDetails.effectiveRoles.slice().sort(); track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentUserDetails.roles.indexOf(role) === -1\"><div class=\"chip\">{{role}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field>\n    <mat-slide-toggle formControlName=\"enabled\">\n              {{ userDetailsForm.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) :\n              ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n    </mat-slide-toggle>           \n  </form>\n}", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}:host .user-details-form .groups-field mat-chip-grid,:host .user-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: YuvUserManagementService }, { type: i1$1.FormBuilder }], propDecorators: { userId: [{
+                        TranslatePipe,
+                        RoleLabelPipe,
+                        RoleTooltipPipe,
+                        SortRolesByLabelPipe
+                    ], template: "@let currentUserDetails = userDetails();\n@if (currentUserDetails) {\n  <form [formGroup]=\"userDetailsForm\" class=\"user-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.username' | translate)}}</mat-label>\n      <input matInput formControlName=\"username\" readonly>\n      <mat-icon matPrefix>account_box</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.email' | translate)}}</mat-label>\n      <input matInput formControlName=\"email\" readonly>\n      <mat-icon matPrefix>email</mat-icon>\n    </mat-form-field>              \n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.firstname' | translate)}}</mat-label>\n      <input matInput formControlName=\"firstName\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.lastname' | translate)}}</mat-label>\n      <input matInput formControlName=\"lastName\" readonly>\n    </mat-form-field>\n    <mat-form-field class=\"groups-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.groups' | translate)}}</mat-label>\n        <mat-chip-grid #groupChipGrid>\n          @if (currentUserDetails.groups) {\n            @for (group of currentUserDetails.groups.sort(); track group) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{group}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"groupChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>\n    <mat-form-field class=\"roles-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentUserDetails.effectiveRoles) {\n          @for (role of currentUserDetails.effectiveRoles | sortRolesByLabel; track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentUserDetails.roles.indexOf(role) === -1\" [matTooltip]=\"role | roleTooltip\"><div class=\"chip\">{{role | roleLabel}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field>\n    <mat-slide-toggle formControlName=\"enabled\">\n              {{ userDetailsForm.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) :\n              ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n    </mat-slide-toggle>           \n  </form>\n}", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}:host .user-details-form .groups-field mat-chip-grid,:host .user-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"] }]
+        }], ctorParameters: () => [{ type: YuvUserManagementService }, { type: i1.FormBuilder }], propDecorators: { userId: [{
                 type: Input
             }] } });
 
@@ -380,16 +676,19 @@ class CreateUserComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CreateUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CreateUserComponent, isStandalone: true, selector: "ymusrmgmt-create-user", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstname\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastname\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"yuv-form-field\" id=\"enabledPropDiv\">\n        <mat-slide-toggle formControlName=\"enabled\">\n          {{ form.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) : ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n        </mat-slide-toggle>\n      </div>\n      @if (error()) {\n      <p class=\"error\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createUser()\">\n      {{ 'yuv.app.user-management.users.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CreateUserComponent, isStandalone: true, selector: "ymusrmgmt-create-user", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstname\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastname\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"yuv-form-field\" id=\"enabledPropDiv\">\n        <mat-slide-toggle formControlName=\"enabled\">\n          {{ form.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) : ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n        </mat-slide-toggle>\n      </div>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createUser()\">\n      {{ 'yuv.app.user-management.users.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CreateUserComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-create-user', standalone: true, imports: [...modules$3, ...components$3], host: {
                         '[class.busy]': '!busy()',
-                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstname\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastname\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"yuv-form-field\" id=\"enabledPropDiv\">\n        <mat-slide-toggle formControlName=\"enabled\">\n          {{ form.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) : ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n        </mat-slide-toggle>\n      </div>\n      @if (error()) {\n      <p class=\"error\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createUser()\">\n      {{ 'yuv.app.user-management.users.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"] }]
+                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstname\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastname\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"yuv-form-field\" id=\"enabledPropDiv\">\n        <mat-slide-toggle formControlName=\"enabled\">\n          {{ form.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) : ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n        </mat-slide-toggle>\n      </div>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createUser()\">\n      {{ 'yuv.app.user-management.users.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"] }]
         }] });
 
 class RolesSelectionComponent {
+    #localization = inject(LocalizationService);
+    /** Orders roles by their localized label so the lists read naturally in the active language. */
+    #compareByLabel = (a, b) => resolveRoleLabel(this.#localization, a).localeCompare(resolveRoleLabel(this.#localization, b));
     allRoles = input.required(...(ngDevMode ? [{ debugName: "allRoles" }] : /* istanbul ignore next */ []));
     initialRoles = input.required(...(ngDevMode ? [{ debugName: "initialRoles" }] : /* istanbul ignore next */ []));
     rolesChange = output();
@@ -403,36 +702,25 @@ class RolesSelectionComponent {
         effect(() => {
             const all = this.allRoles();
             const initial = this.initialRoles();
-            this.assignedRoles.set([...initial].sort());
-            this.availableRoles.set(all.filter((role) => !initial.includes(role)).sort());
+            this.assignedRoles.set([...initial].sort(this.#compareByLabel));
+            this.availableRoles.set(all.filter((role) => !initial.includes(role)).sort(this.#compareByLabel));
             this.selectedAvailable.set([]);
             this.selectedAssigned.set([]);
         });
     }
-    toggleAvailableRole(role) {
-        const current = this.selectedAvailable();
-        if (current.includes(role)) {
-            this.selectedAvailable.set(current.filter((r) => r !== role));
-        }
-        else {
-            this.selectedAvailable.set([...current, role]);
-        }
+    /** Bound to `mat-list-option`'s `(selectedChange)`, which fires uniformly for mouse and keyboard interaction — unlike `(click)`, which Material's keyboard handling never dispatches. */
+    onAvailableSelectedChange(role, selected) {
+        this.selectedAvailable.update((current) => selected ? [...current, role] : current.filter((r) => r !== role));
     }
-    toggleAssignedRole(role) {
-        const current = this.selectedAssigned();
-        if (current.includes(role)) {
-            this.selectedAssigned.set(current.filter((r) => r !== role));
-        }
-        else {
-            this.selectedAssigned.set([...current, role]);
-        }
+    onAssignedSelectedChange(role, selected) {
+        this.selectedAssigned.update((current) => selected ? [...current, role] : current.filter((r) => r !== role));
     }
     assignRoles() {
         const toAssign = this.selectedAvailable();
         if (toAssign.length === 0)
             return;
         this.availableRoles.update((roles) => roles.filter((r) => !toAssign.includes(r)));
-        this.assignedRoles.update((roles) => [...roles, ...toAssign].sort());
+        this.assignedRoles.update((roles) => [...roles, ...toAssign].sort(this.#compareByLabel));
         this.selectedAvailable.set([]);
         this.rolesChange.emit(this.assignedRoles());
     }
@@ -441,7 +729,7 @@ class RolesSelectionComponent {
         if (toRemove.length === 0)
             return;
         this.assignedRoles.update((roles) => roles.filter((r) => !toRemove.includes(r)));
-        this.availableRoles.update((roles) => [...roles, ...toRemove].sort());
+        this.availableRoles.update((roles) => [...roles, ...toRemove].sort(this.#compareByLabel));
         this.selectedAssigned.set([]);
         this.rolesChange.emit(this.assignedRoles());
     }
@@ -449,7 +737,7 @@ class RolesSelectionComponent {
         const allAvailable = this.availableRoles();
         if (allAvailable.length === 0)
             return;
-        this.assignedRoles.update((roles) => [...roles, ...allAvailable].sort());
+        this.assignedRoles.update((roles) => [...roles, ...allAvailable].sort(this.#compareByLabel));
         this.availableRoles.set([]);
         this.selectedAvailable.set([]);
         this.rolesChange.emit(this.assignedRoles());
@@ -458,7 +746,7 @@ class RolesSelectionComponent {
         const allAssigned = this.assignedRoles();
         if (allAssigned.length === 0)
             return;
-        this.availableRoles.update((roles) => [...roles, ...allAssigned].sort());
+        this.availableRoles.update((roles) => [...roles, ...allAssigned].sort(this.#compareByLabel));
         this.assignedRoles.set([]);
         this.selectedAssigned.set([]);
         this.rolesChange.emit(this.assignedRoles());
@@ -470,7 +758,7 @@ class RolesSelectionComponent {
         return this.selectedAssigned().includes(role);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RolesSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RolesSelectionComponent, isStandalone: true, selector: "ymusrmgmt-role-selection", inputs: { allRoles: { classPropertyName: "allRoles", publicName: "allRoles", isSignal: true, isRequired: true, transformFunction: null }, initialRoles: { classPropertyName: "initialRoles", publicName: "initialRoles", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { rolesChange: "rolesChange" }, ngImport: i0, template: "<div class=\"role-selector\">\n  <!-- Available Roles (Left) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.available' | translate }}\n    </div>\n    <mat-selection-list class=\"role-list\" #availableList hideSingleSelectionIndicator=\"true\">\n      @for (role of availableRoles(); track role) {\n        <mat-list-option \n          [value]=\"role\"\n          [matTooltip]=\"role\"\n          [selected]=\"isAvailableSelected(role)\"\n          (click)=\"toggleAvailableRole(role)\">\n          {{ role }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAvailable' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n\n  <!-- Control Buttons (Center) -->\n  <div class=\"control-buttons\">\n    <button \n      mat-icon-button \n      [disabled]=\"availableRoles().length === 0\"\n      (click)=\"assignAllRoles()\"\n      [title]=\"'yuv.app.user-management.users.roles.assignAll' | translate\">\n      <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button \n      mat-icon-button \n      [disabled]=\"!canAssign()\"\n      (click)=\"assignRoles()\"\n      [title]=\"'yuv.app.user-management.users.roles.assign' | translate\">\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button \n      mat-icon-button \n      [disabled]=\"!canRemove()\"\n      (click)=\"removeRoles()\"\n      [title]=\"'yuv.app.user-management.users.roles.remove' | translate\">\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button \n      mat-icon-button \n      [disabled]=\"assignedRoles().length === 0\"\n      (click)=\"removeAllRoles()\"\n      [title]=\"'yuv.app.user-management.users.roles.removeAll' | translate\">\n      <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n  </div>\n\n  <!-- Assigned Roles (Right) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.assigned' | translate }}\n    </div>\n    <mat-selection-list class=\"role-list\" #assignedList hideSingleSelectionIndicator=\"true\">\n      @for (role of assignedRoles(); track role) {\n        <mat-list-option \n          [value]=\"role\"\n          [matTooltip]=\"role\"\n          [selected]=\"isAssignedSelected(role)\"\n          (click)=\"toggleAssignedRole(role)\">\n          {{ role }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAssigned' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n</div>\n", styles: [".role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RolesSelectionComponent, isStandalone: true, selector: "ymusrmgmt-role-selection", inputs: { allRoles: { classPropertyName: "allRoles", publicName: "allRoles", isSignal: true, isRequired: true, transformFunction: null }, initialRoles: { classPropertyName: "initialRoles", publicName: "initialRoles", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { rolesChange: "rolesChange" }, ngImport: i0, template: "<div class=\"role-selector\">\n  <!-- Available Roles (Left) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.available' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #availableList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.available' | translate\">\n      @for (role of availableRoles(); track role) {\n        <mat-list-option\n          [value]=\"role\"\n          [matTooltip]=\"role | roleTooltip\"\n          [selected]=\"isAvailableSelected(role)\"\n          (selectedChange)=\"onAvailableSelectedChange(role, $event)\">\n          {{ role | roleLabel }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAvailable' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n\n  <!-- Control Buttons (Center) -->\n  <div class=\"control-buttons\">\n    <button\n      mat-icon-button\n      [disabled]=\"availableRoles().length === 0\"\n      (click)=\"assignAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.assignAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assignAll' | translate\">\n      <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canAssign()\"\n      (click)=\"assignRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.assign' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assign' | translate\">\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canRemove()\"\n      (click)=\"removeRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.remove' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.remove' | translate\">\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"assignedRoles().length === 0\"\n      (click)=\"removeAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.removeAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.removeAll' | translate\">\n      <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n  </div>\n\n  <!-- Assigned Roles (Right) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.assigned' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #assignedList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assigned' | translate\">\n      @for (role of assignedRoles(); track role) {\n        <mat-list-option\n          [value]=\"role\"\n          [matTooltip]=\"role | roleTooltip\"\n          [selected]=\"isAssignedSelected(role)\"\n          (selectedChange)=\"onAssignedSelectedChange(role, $event)\">\n          {{ role | roleLabel }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAssigned' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n</div>\n", styles: [".role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RolesSelectionComponent, decorators: [{
             type: Component,
@@ -481,7 +769,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatListModule,
                         MatTooltipModule,
                         TranslatePipe,
-                    ], standalone: true, template: "<div class=\"role-selector\">\n  <!-- Available Roles (Left) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.available' | translate }}\n    </div>\n    <mat-selection-list class=\"role-list\" #availableList hideSingleSelectionIndicator=\"true\">\n      @for (role of availableRoles(); track role) {\n        <mat-list-option \n          [value]=\"role\"\n          [matTooltip]=\"role\"\n          [selected]=\"isAvailableSelected(role)\"\n          (click)=\"toggleAvailableRole(role)\">\n          {{ role }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAvailable' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n\n  <!-- Control Buttons (Center) -->\n  <div class=\"control-buttons\">\n    <button \n      mat-icon-button \n      [disabled]=\"availableRoles().length === 0\"\n      (click)=\"assignAllRoles()\"\n      [title]=\"'yuv.app.user-management.users.roles.assignAll' | translate\">\n      <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button \n      mat-icon-button \n      [disabled]=\"!canAssign()\"\n      (click)=\"assignRoles()\"\n      [title]=\"'yuv.app.user-management.users.roles.assign' | translate\">\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button \n      mat-icon-button \n      [disabled]=\"!canRemove()\"\n      (click)=\"removeRoles()\"\n      [title]=\"'yuv.app.user-management.users.roles.remove' | translate\">\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button \n      mat-icon-button \n      [disabled]=\"assignedRoles().length === 0\"\n      (click)=\"removeAllRoles()\"\n      [title]=\"'yuv.app.user-management.users.roles.removeAll' | translate\">\n      <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n  </div>\n\n  <!-- Assigned Roles (Right) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.assigned' | translate }}\n    </div>\n    <mat-selection-list class=\"role-list\" #assignedList hideSingleSelectionIndicator=\"true\">\n      @for (role of assignedRoles(); track role) {\n        <mat-list-option \n          [value]=\"role\"\n          [matTooltip]=\"role\"\n          [selected]=\"isAssignedSelected(role)\"\n          (click)=\"toggleAssignedRole(role)\">\n          {{ role }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAssigned' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n</div>\n", styles: [".role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}\n"] }]
+                        RoleLabelPipe,
+                        RoleTooltipPipe,
+                    ], standalone: true, template: "<div class=\"role-selector\">\n  <!-- Available Roles (Left) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.available' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #availableList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.available' | translate\">\n      @for (role of availableRoles(); track role) {\n        <mat-list-option\n          [value]=\"role\"\n          [matTooltip]=\"role | roleTooltip\"\n          [selected]=\"isAvailableSelected(role)\"\n          (selectedChange)=\"onAvailableSelectedChange(role, $event)\">\n          {{ role | roleLabel }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAvailable' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n\n  <!-- Control Buttons (Center) -->\n  <div class=\"control-buttons\">\n    <button\n      mat-icon-button\n      [disabled]=\"availableRoles().length === 0\"\n      (click)=\"assignAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.assignAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assignAll' | translate\">\n      <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canAssign()\"\n      (click)=\"assignRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.assign' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assign' | translate\">\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canRemove()\"\n      (click)=\"removeRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.remove' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.remove' | translate\">\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"assignedRoles().length === 0\"\n      (click)=\"removeAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.removeAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.removeAll' | translate\">\n      <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n  </div>\n\n  <!-- Assigned Roles (Right) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.assigned' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #assignedList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assigned' | translate\">\n      @for (role of assignedRoles(); track role) {\n        <mat-list-option\n          [value]=\"role\"\n          [matTooltip]=\"role | roleTooltip\"\n          [selected]=\"isAssignedSelected(role)\"\n          (selectedChange)=\"onAssignedSelectedChange(role, $event)\">\n          {{ role | roleLabel }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAssigned' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n</div>\n", styles: [".role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { allRoles: [{ type: i0.Input, args: [{ isSignal: true, alias: "allRoles", required: true }] }], initialRoles: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialRoles", required: true }] }], rolesChange: [{ type: i0.Output, args: ["rolesChange"] }] } });
 
 const components$2 = [BusyOverlayDirective, YmtButtonDirective, DialogComponent, RolesSelectionComponent];
@@ -503,6 +793,8 @@ class EditUserComponent {
     error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     allAvailableRoles = signal([], ...(ngDevMode ? [{ debugName: "allAvailableRoles" }] : /* istanbul ignore next */ []));
     userRoles = signal([], ...(ngDevMode ? [{ debugName: "userRoles" }] : /* istanbul ignore next */ []));
+    /** Externally managed users (e.g. provisioned via SCIM) may only have roles assigned; their personal data is owned by the external IdP. */
+    externallyManaged = signal(false, ...(ngDevMode ? [{ debugName: "externallyManaged" }] : /* istanbul ignore next */ []));
     username = new FormControl('');
     email = new FormControl('', [Validators.required, Validators.email]);
     firstName = new FormControl('', [Validators.minLength(1), Validators.maxLength(255), Validators.pattern("^[^#!<>&/%=;*§$()[\\]{}]*$")]);
@@ -531,6 +823,11 @@ class EditUserComponent {
         });
         // Initialize userRoles from the data
         this.userRoles.set(this.data.user.roles || []);
+        // Externally managed users may only have roles assigned: their personal data fields are rendered
+        // read-only in the template (same mechanism as the username field) so they keep the identical look.
+        if (this.data.user.externallyManaged) {
+            this.externallyManaged.set(true);
+        }
         // Fetch all available roles
         this.#userManagementService.fetchAllRoles().subscribe({
             next: (roles) => {
@@ -561,7 +858,10 @@ class EditUserComponent {
         this.roles.markAsTouched(); // Mark as touched to trigger validation display
     }
     updateUser() {
-        const editParams = this.form.value;
+        // For externally managed users the personal data fields are read-only, so their original values
+        // are preserved here (the backend replaces the representation from the request, so omitting them
+        // would wipe them).
+        const editParams = this.form.getRawValue();
         this.busy.set(true);
         this.error.set(undefined);
         const updateUserRequest = {
@@ -595,13 +895,13 @@ class EditUserComponent {
         this.#dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EditUserComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: EditUserComponent, isStandalone: true, selector: "ymusrmgmt-edit-user", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\" #emailField/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstName\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastName\" type=\"text\"/>\n      </mat-form-field>\n      \n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"userRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      \n      @if (error()) {\n      <p class=\"error\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateUser()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: EditUserComponent, isStandalone: true, selector: "ymusrmgmt-edit-user", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      @if (externallyManaged()) {\n      <p class=\"externally-managed-hint\">{{ \"yuv.app.user-management.users.action.edit.identitySource.external.hint\" | translate }}</p>\n      }\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\" #emailField [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstName\" type=\"text\" [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastName\" type=\"text\" [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      \n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"userRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      \n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateUser()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .externally-managed-hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EditUserComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-edit-user', standalone: true, imports: [...modules$2, ...components$2], host: {
                         '[class.busy]': '!busy()',
-                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\" #emailField/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstName\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastName\" type=\"text\"/>\n      </mat-form-field>\n      \n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"userRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      \n      @if (error()) {\n      <p class=\"error\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateUser()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"] }]
+                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      @if (externallyManaged()) {\n      <p class=\"externally-managed-hint\">{{ \"yuv.app.user-management.users.action.edit.identitySource.external.hint\" | translate }}</p>\n      }\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\" #emailField [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstName\" type=\"text\" [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastName\" type=\"text\" [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      \n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"userRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      \n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateUser()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .externally-managed-hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -843,7 +1143,7 @@ class YuvUsersPageComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUsersPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: YuvUsersPageComponent, isStandalone: true, selector: "ymusrmgmt-users", host: { properties: { "class.busy": "!busy()", "class.pagination": "this.pagination" } }, viewQueries: [{ propertyName: "userDetailsComponent", first: true, predicate: UserDetailsComponent, descendants: true }], ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"search\">\n  <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\" [(detailsActive)]=\"detailsActive\" [options]=\"layoutOptions\" [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\" title=\"sss\">\n    <ymt-pane-body>\n      <mat-table [dataSource]=\"dataSource()\" class=\"user-table mat-elevation-z8\" row>\n        <ng-container matColumnDef=\"state\">\n          <mat-header-cell *matHeaderCellDef />\n          <mat-cell *matCellDef=\"let element\"><mat-icon>{{ element.enabled ? icons.stateActive : icons.stateInactive\n              }}</mat-icon></mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"name\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.username' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.username}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"firstName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.firstname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.firstName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"lastName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.lastname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.lastName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"email\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.email' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.email}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"id\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.id' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n        </ng-container>\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row \n          *matRowDef=\"let row; columns: displayedColumns;\" \n          (click.single)=\"select(row)\" \n          [class.selected-row]=\"this.isSelected(row)\" class=\"user-row\">\n        </mat-row>\n      </mat-table>\n    </ymt-pane-body>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    @let selectedUser = selection().selected.at(0);\n    <ymt-pane-header [icon]=\"'person'\" [title]=\"'yuv.app.user-management.users.details.title' | translate\" [subtitle]=\"selectedUser?.id || ('yuv.app.user-management.users.details.empty' | translate)\" [actions]=\"listActions\"></ymt-pane-header>\n    <ymt-pane-body>\n      <ymusrmgmt-user-details [userId]=\"selectedUser?.id\" />\n    </ymt-pane-body>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.users.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" aria-label=\"Select page\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh(true)\" [matTooltip]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n  <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n    <mat-icon>person_add</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .user-table{overflow:auto;height:100%}:host .user-row:hover{background-color:var(--ymt-hover-background)}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: SimpleSearchComponent, selector: "yuv-simple-search", inputs: ["query"], outputs: ["querySubmit", "clearInput", "targetSelectionChanged", "queryChange", "typeAggregation"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "component", type: UserDetailsComponent, selector: "ymusrmgmt-user-details", inputs: ["userId"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: YmtLayoutModule }, { kind: "component", type: i5.MasterDetailsLayoutComponent, selector: "ymt-master-details-layout", inputs: ["layoutSettingsID", "options", "direction", "gutterSize", "detailsActive"], outputs: ["detailsActiveChange"] }, { kind: "directive", type: i5.YmtLayoutPaneDirective, selector: "[ymtLayoutPane]", inputs: ["role", "topBarActions"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i6.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i6.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i4$1.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvOverflowMenuModule }, { kind: "component", type: i8.OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: YuvUsersPageComponent, isStandalone: true, selector: "ymusrmgmt-users", host: { properties: { "class.busy": "!busy()", "class.pagination": "this.pagination" } }, viewQueries: [{ propertyName: "userDetailsComponent", first: true, predicate: UserDetailsComponent, descendants: true }], ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"search\">\n  <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\" [(detailsActive)]=\"detailsActive\" [options]=\"layoutOptions\" [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\" title=\"sss\">\n    <ymt-pane-body>\n      <mat-table [dataSource]=\"dataSource()\" class=\"user-table mat-elevation-z8\" row>\n        <ng-container matColumnDef=\"state\">\n          <mat-header-cell *matHeaderCellDef [attr.aria-label]=\"'yuv.app.user-management.users.object.property.state' | translate\" />\n          <mat-cell *matCellDef=\"let element\">\n            <mat-icon\n              aria-hidden=\"false\"\n              [attr.aria-label]=\"(element.enabled ? 'yuv.app.user-management.users.object.property.enabled' : 'yuv.app.user-management.users.object.property.disabled') | translate\">{{\n              element.enabled ? icons.stateActive : icons.stateInactive }}</mat-icon>\n            @if (element.externallyManaged) {\n              <mat-icon class=\"external-source\"\n                aria-hidden=\"false\"\n                [matTooltip]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\"\n                [attr.aria-label]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\">{{\n                icons.sourceExternal }}</mat-icon>\n            }\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"name\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.username' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.username}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"firstName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.firstname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.firstName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"lastName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.lastname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.lastName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"email\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.email' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.email}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"id\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.id' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n        </ng-container>\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row\n          *matRowDef=\"let row; columns: displayedColumns;\"\n          (click.single)=\"select(row)\"\n          [attr.tabindex]=\"0\"\n          (keydown.enter)=\"select(row)\"\n          (keydown.space)=\"$event.preventDefault(); select(row)\"\n          [class.selected-row]=\"this.isSelected(row)\" class=\"user-row\">\n        </mat-row>\n      </mat-table>\n    </ymt-pane-body>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    @let selectedUser = selection().selected.at(0);\n    <ymt-pane-header [icon]=\"'person'\" [title]=\"'yuv.app.user-management.users.details.title' | translate\" [subtitle]=\"selectedUser?.id || ('yuv.app.user-management.users.details.empty' | translate)\" [actions]=\"listActions\" [badges]=\"selectedUser?.externallyManaged ? sourceBadge : undefined\"></ymt-pane-header>\n    <ymt-pane-body>\n      <ymusrmgmt-user-details [userId]=\"selectedUser?.id\" />\n    </ymt-pane-body>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.users.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" [attr.aria-label]=\"'yuv.app.user-management.users.navigation.pagination.aria' | translate\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh(true)\" [matTooltip]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\" [attr.aria-label]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n  <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n    <mat-icon>person_add</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>\n\n<ng-template #sourceBadge>\n  <ymt-badge severity=\"primary\" [aura]=\"true\" class=\"source-badge\"\n    [matTooltip]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\">\n    <mat-icon>{{ icons.sourceExternal }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.users.object.property.identitySource.external' | translate }}</span>\n  </ymt-badge>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .user-table{overflow:auto;height:100%}:host .user-row:hover{background-color:var(--ymt-hover-background)}:host mat-cell mat-icon.external-source{color:var(--ymt-primary);margin-left:.25rem}:host .source-badge{display:inline-flex;align-items:center;gap:.25rem}:host .source-badge mat-icon{font-size:1rem;width:1rem;height:1rem}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: SimpleSearchComponent, selector: "yuv-simple-search", inputs: ["query"], outputs: ["querySubmit", "clearInput", "targetSelectionChanged", "queryChange", "typeAggregation"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "component", type: UserDetailsComponent, selector: "ymusrmgmt-user-details", inputs: ["userId"] }, { kind: "component", type: YmtBadge, selector: "ymt-badge", inputs: ["severity", "outline", "aura"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: YmtLayoutModule }, { kind: "component", type: i5$1.MasterDetailsLayoutComponent, selector: "ymt-master-details-layout", inputs: ["layoutSettingsID", "options", "direction", "gutterSize", "detailsActive"], outputs: ["detailsActiveChange"] }, { kind: "directive", type: i5$1.YmtLayoutPaneDirective, selector: "[ymtLayoutPane]", inputs: ["role", "topBarActions"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i6$1.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i6$1.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i6.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvOverflowMenuModule }, { kind: "component", type: i8.OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUsersPageComponent, decorators: [{
             type: Component,
@@ -862,6 +1162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         BusyOverlayDirective,
                         ClickDoubleDirective,
                         UserDetailsComponent,
+                        YmtBadge,
                         YmtButtonDirective,
                         YmtIconButtonDirective,
                         YmtLayoutModule,
@@ -870,7 +1171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         YuvOverflowMenuModule,
                     ], host: {
                         '[class.busy]': '!busy()',
-                    }, template: "<ng-template yuvAppHeaderSlot=\"search\">\n  <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\" [(detailsActive)]=\"detailsActive\" [options]=\"layoutOptions\" [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\" title=\"sss\">\n    <ymt-pane-body>\n      <mat-table [dataSource]=\"dataSource()\" class=\"user-table mat-elevation-z8\" row>\n        <ng-container matColumnDef=\"state\">\n          <mat-header-cell *matHeaderCellDef />\n          <mat-cell *matCellDef=\"let element\"><mat-icon>{{ element.enabled ? icons.stateActive : icons.stateInactive\n              }}</mat-icon></mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"name\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.username' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.username}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"firstName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.firstname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.firstName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"lastName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.lastname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.lastName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"email\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.email' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.email}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"id\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.id' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n        </ng-container>\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row \n          *matRowDef=\"let row; columns: displayedColumns;\" \n          (click.single)=\"select(row)\" \n          [class.selected-row]=\"this.isSelected(row)\" class=\"user-row\">\n        </mat-row>\n      </mat-table>\n    </ymt-pane-body>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    @let selectedUser = selection().selected.at(0);\n    <ymt-pane-header [icon]=\"'person'\" [title]=\"'yuv.app.user-management.users.details.title' | translate\" [subtitle]=\"selectedUser?.id || ('yuv.app.user-management.users.details.empty' | translate)\" [actions]=\"listActions\"></ymt-pane-header>\n    <ymt-pane-body>\n      <ymusrmgmt-user-details [userId]=\"selectedUser?.id\" />\n    </ymt-pane-body>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.users.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" aria-label=\"Select page\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh(true)\" [matTooltip]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n  <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n    <mat-icon>person_add</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .user-table{overflow:auto;height:100%}:host .user-row:hover{background-color:var(--ymt-hover-background)}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"] }]
+                    }, template: "<ng-template yuvAppHeaderSlot=\"search\">\n  <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\" [(detailsActive)]=\"detailsActive\" [options]=\"layoutOptions\" [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\" title=\"sss\">\n    <ymt-pane-body>\n      <mat-table [dataSource]=\"dataSource()\" class=\"user-table mat-elevation-z8\" row>\n        <ng-container matColumnDef=\"state\">\n          <mat-header-cell *matHeaderCellDef [attr.aria-label]=\"'yuv.app.user-management.users.object.property.state' | translate\" />\n          <mat-cell *matCellDef=\"let element\">\n            <mat-icon\n              aria-hidden=\"false\"\n              [attr.aria-label]=\"(element.enabled ? 'yuv.app.user-management.users.object.property.enabled' : 'yuv.app.user-management.users.object.property.disabled') | translate\">{{\n              element.enabled ? icons.stateActive : icons.stateInactive }}</mat-icon>\n            @if (element.externallyManaged) {\n              <mat-icon class=\"external-source\"\n                aria-hidden=\"false\"\n                [matTooltip]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\"\n                [attr.aria-label]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\">{{\n                icons.sourceExternal }}</mat-icon>\n            }\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"name\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.username' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.username}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"firstName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.firstname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.firstName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"lastName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.lastname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.lastName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"email\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.email' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.email}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"id\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.id' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n        </ng-container>\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row\n          *matRowDef=\"let row; columns: displayedColumns;\"\n          (click.single)=\"select(row)\"\n          [attr.tabindex]=\"0\"\n          (keydown.enter)=\"select(row)\"\n          (keydown.space)=\"$event.preventDefault(); select(row)\"\n          [class.selected-row]=\"this.isSelected(row)\" class=\"user-row\">\n        </mat-row>\n      </mat-table>\n    </ymt-pane-body>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    @let selectedUser = selection().selected.at(0);\n    <ymt-pane-header [icon]=\"'person'\" [title]=\"'yuv.app.user-management.users.details.title' | translate\" [subtitle]=\"selectedUser?.id || ('yuv.app.user-management.users.details.empty' | translate)\" [actions]=\"listActions\" [badges]=\"selectedUser?.externallyManaged ? sourceBadge : undefined\"></ymt-pane-header>\n    <ymt-pane-body>\n      <ymusrmgmt-user-details [userId]=\"selectedUser?.id\" />\n    </ymt-pane-body>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.users.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" [attr.aria-label]=\"'yuv.app.user-management.users.navigation.pagination.aria' | translate\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh(true)\" [matTooltip]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\" [attr.aria-label]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n  <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n    <mat-icon>person_add</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>\n\n<ng-template #sourceBadge>\n  <ymt-badge severity=\"primary\" [aura]=\"true\" class=\"source-badge\"\n    [matTooltip]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\">\n    <mat-icon>{{ icons.sourceExternal }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.users.object.property.identitySource.external' | translate }}</span>\n  </ymt-badge>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .user-table{overflow:auto;height:100%}:host .user-row:hover{background-color:var(--ymt-hover-background)}:host mat-cell mat-icon.external-source{color:var(--ymt-primary);margin-left:.25rem}:host .source-badge{display:inline-flex;align-items:center;gap:.25rem}:host .source-badge mat-icon{font-size:1rem;width:1rem;height:1rem}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"] }]
         }], propDecorators: { userDetailsComponent: [{
                 type: ViewChild,
                 args: [UserDetailsComponent]
@@ -975,13 +1276,13 @@ class CreateGroupComponent {
         this.roles.markAsTouched(); // Mark as touched to trigger validation display
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CreateGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CreateGroupComponent, isStandalone: true, selector: "ymusrmgmt-create-group", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      @if (error()) {\n      <p class=\"error\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.groups.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createGroup()\">\n      {{ 'yuv.app.user-management.groups.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CreateGroupComponent, isStandalone: true, selector: "ymusrmgmt-create-group", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.groups.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createGroup()\">\n      {{ 'yuv.app.user-management.groups.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CreateGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-create-group', standalone: true, imports: [...modules$1, ...components$1], host: {
                         '[class.busy]': '!busy()',
-                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      @if (error()) {\n      <p class=\"error\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.groups.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createGroup()\">\n      {{ 'yuv.app.user-management.groups.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"] }]
+                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.groups.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createGroup()\">\n      {{ 'yuv.app.user-management.groups.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: () => [] });
 
 class GroupDetailsComponent {
@@ -1022,8 +1323,8 @@ class GroupDetailsComponent {
             name: [{ value: '' }]
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GroupDetailsComponent, deps: [{ token: YuvUserManagementService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: GroupDetailsComponent, isStandalone: true, selector: "ymusrmgmt-group-details", inputs: { groupId: "groupId" }, ngImport: i0, template: "        \n@let currentGroupDetails = groupDetails();\n@if (currentGroupDetails) {\n  <form [formGroup]=\"groupDetailsForm\" class=\"group-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.groups.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.name' | translate)}}</mat-label>\n      <input matInput formControlName=\"name\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentGroupDetails.roles) {\n          @for (role of currentGroupDetails.roles.slice().sort(); track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentGroupDetails.roles.indexOf(role) === -1\"><div class=\"chip\">{{role}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field> \n      <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.members' | translate)}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @if (currentGroupDetails.members) {\n            @for (member of currentGroupDetails.members.sort(); track member) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>           \n  </form>\n} @else {\n  <p>{{('yuv.app.user-management.groups.details.empty' | translate)}}</p>\n}\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .group-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .group-details-form mat-chip-row{overflow:hidden}:host .group-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GroupDetailsComponent, deps: [{ token: YuvUserManagementService }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: GroupDetailsComponent, isStandalone: true, selector: "ymusrmgmt-group-details", inputs: { groupId: "groupId" }, ngImport: i0, template: "        \n@let currentGroupDetails = groupDetails();\n@if (currentGroupDetails) {\n  <form [formGroup]=\"groupDetailsForm\" class=\"group-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.groups.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.name' | translate)}}</mat-label>\n      <input matInput formControlName=\"name\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentGroupDetails.roles) {\n          @for (role of currentGroupDetails.roles | sortRolesByLabel; track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentGroupDetails.roles.indexOf(role) === -1\" [matTooltip]=\"role | roleTooltip\"><div class=\"chip\">{{role | roleLabel}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field> \n      <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.members' | translate)}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @if (currentGroupDetails.members) {\n            @for (member of currentGroupDetails.members.sort(); track member) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>           \n  </form>\n} @else {\n  <p>{{('yuv.app.user-management.groups.details.empty' | translate)}}</p>\n}\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .group-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .group-details-form mat-chip-row{overflow:hidden}:host .group-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }, { kind: "pipe", type: SortRolesByLabelPipe, name: "sortRolesByLabel" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GroupDetailsComponent, decorators: [{
             type: Component,
@@ -1036,10 +1337,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatCheckboxModule,
                         MatSlideToggleModule,
                         MatTabsModule,
+                        MatTooltipModule,
                         ReactiveFormsModule,
-                        TranslatePipe
-                    ], template: "        \n@let currentGroupDetails = groupDetails();\n@if (currentGroupDetails) {\n  <form [formGroup]=\"groupDetailsForm\" class=\"group-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.groups.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.name' | translate)}}</mat-label>\n      <input matInput formControlName=\"name\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentGroupDetails.roles) {\n          @for (role of currentGroupDetails.roles.slice().sort(); track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentGroupDetails.roles.indexOf(role) === -1\"><div class=\"chip\">{{role}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field> \n      <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.members' | translate)}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @if (currentGroupDetails.members) {\n            @for (member of currentGroupDetails.members.sort(); track member) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>           \n  </form>\n} @else {\n  <p>{{('yuv.app.user-management.groups.details.empty' | translate)}}</p>\n}\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .group-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .group-details-form mat-chip-row{overflow:hidden}:host .group-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: YuvUserManagementService }, { type: i1$1.FormBuilder }], propDecorators: { groupId: [{
+                        TranslatePipe,
+                        RoleLabelPipe,
+                        RoleTooltipPipe,
+                        SortRolesByLabelPipe
+                    ], template: "        \n@let currentGroupDetails = groupDetails();\n@if (currentGroupDetails) {\n  <form [formGroup]=\"groupDetailsForm\" class=\"group-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.groups.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.name' | translate)}}</mat-label>\n      <input matInput formControlName=\"name\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentGroupDetails.roles) {\n          @for (role of currentGroupDetails.roles | sortRolesByLabel; track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentGroupDetails.roles.indexOf(role) === -1\" [matTooltip]=\"role | roleTooltip\"><div class=\"chip\">{{role | roleLabel}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field> \n      <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.members' | translate)}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @if (currentGroupDetails.members) {\n            @for (member of currentGroupDetails.members.sort(); track member) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>           \n  </form>\n} @else {\n  <p>{{('yuv.app.user-management.groups.details.empty' | translate)}}</p>\n}\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .group-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .group-details-form mat-chip-row{overflow:hidden}:host .group-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"] }]
+        }], ctorParameters: () => [{ type: YuvUserManagementService }, { type: i1.FormBuilder }], propDecorators: { groupId: [{
                 type: Input
             }] } });
 
@@ -1154,13 +1459,13 @@ class EditGroupComponent {
         this.#dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EditGroupComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: EditGroupComponent, isStandalone: true, selector: "ymusrmgmt-edit-group", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{'yuv.app.user-management.groups.object.property.members' | translate}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @for (member of groupMembers(); track member) {\n            <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n      </mat-form-field>\n      @if (error()) {\n      <p class=\"error\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateGroup()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3$1.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: EditGroupComponent, isStandalone: true, selector: "ymusrmgmt-edit-group", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{'yuv.app.user-management.groups.object.property.members' | translate}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @for (member of groupMembers(); track member) {\n            <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n      </mat-form-field>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateGroup()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EditGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-edit-group', standalone: true, imports: [...modules, ...components], host: {
                         '[class.busy]': '!busy()',
-                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{'yuv.app.user-management.groups.object.property.members' | translate}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @for (member of groupMembers(); track member) {\n            <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n      </mat-form-field>\n      @if (error()) {\n      <p class=\"error\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateGroup()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"] }]
+                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{'yuv.app.user-management.groups.object.property.members' | translate}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @for (member of groupMembers(); track member) {\n            <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n      </mat-form-field>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateGroup()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -1327,7 +1632,7 @@ class YuvGroupsPageComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvGroupsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: YuvGroupsPageComponent, isStandalone: true, selector: "ymusrmgmt-groups", host: { properties: { "class.busy": "!busy()", "class.pagination": "this.pagination" } }, viewQueries: [{ propertyName: "groupDetailsComponent", first: true, predicate: GroupDetailsComponent, descendants: true }], ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"search\">\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\"\n  [gutterSize]=\"16\"\n  [options]=\"layoutOptions\"\n  [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\">\n    <ng-container *ngTemplateOutlet=\"masterPaneContent\"></ng-container>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    <ng-container *ngTemplateOutlet=\"detailsPaneContent\"></ng-container>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.groups.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" aria-label=\"Select page\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh()\" [matTooltip]=\"'yuv.app.user-management.groups.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>\n\n<ng-template #masterPaneContent>\n  <ymt-pane-body>\n    <mat-table [dataSource]=\"dataSource()\" class=\"group-table mat-elevation-z8\" row>\n      <ng-container matColumnDef=\"state\">\n        <mat-header-cell *matHeaderCellDef />\n        <mat-cell *matCellDef=\"let element\"><mat-icon>{{ element.enabled ? icons.stateActive : icons.stateInactive\n            }}</mat-icon></mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"name\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.name' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.name}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"description\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.description' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.description}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"id\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.id' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n      </ng-container>\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row \n        *matRowDef=\"let row; columns: displayedColumns;\" \n        (click.single)=\"select(row)\" \n        [class.selected-row]=\"this.isSelected(row)\" class=\"group-row\">\n      </mat-row>\n    </mat-table>\n  </ymt-pane-body>\n</ng-template>\n\n<ng-template #detailsPaneContent>\n  <ymt-pane-header [icon]=\"'group'\" [title]=\"'yuv.app.user-management.groups.details.title' | translate\" [subtitle]=\"selection().selected.at(0)?.id || ('yuv.app.user-management.groups.details.empty' | translate)\" [actions]=\"listActions\"></ymt-pane-header>\n  <ymt-pane-body>\n    <ymusrmgmt-group-details #groupDetails [groupId]=\"selection().selected.at(0)?.id\" />\n  </ymt-pane-body>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .group-table{overflow:auto;height:100%}:host .group-row:hover{background-color:var(--ymt-hover-background)}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "component", type: GroupDetailsComponent, selector: "ymusrmgmt-group-details", inputs: ["groupId"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: YmtLayoutModule }, { kind: "component", type: i5.MasterDetailsLayoutComponent, selector: "ymt-master-details-layout", inputs: ["layoutSettingsID", "options", "direction", "gutterSize", "detailsActive"], outputs: ["detailsActiveChange"] }, { kind: "directive", type: i5.YmtLayoutPaneDirective, selector: "[ymtLayoutPane]", inputs: ["role", "topBarActions"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i6.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i6.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i4$1.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvOverflowMenuModule }, { kind: "component", type: i8.OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: YuvGroupsPageComponent, isStandalone: true, selector: "ymusrmgmt-groups", host: { properties: { "class.busy": "!busy()", "class.pagination": "this.pagination" } }, viewQueries: [{ propertyName: "groupDetailsComponent", first: true, predicate: GroupDetailsComponent, descendants: true }], ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"search\">\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\"\n  [gutterSize]=\"16\"\n  [options]=\"layoutOptions\"\n  [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\">\n    <ng-container *ngTemplateOutlet=\"masterPaneContent\"></ng-container>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    <ng-container *ngTemplateOutlet=\"detailsPaneContent\"></ng-container>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.groups.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" [attr.aria-label]=\"'yuv.app.user-management.groups.navigation.pagination.aria' | translate\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh()\" [matTooltip]=\"'yuv.app.user-management.groups.navigation.refresh.tooltip' | translate\" [attr.aria-label]=\"'yuv.app.user-management.groups.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>\n\n<ng-template #masterPaneContent>\n  <ymt-pane-body>\n    <mat-table [dataSource]=\"dataSource()\" class=\"group-table mat-elevation-z8\" row>\n      <ng-container matColumnDef=\"state\">\n        <mat-header-cell *matHeaderCellDef />\n        <mat-cell *matCellDef=\"let element\"><mat-icon>{{ element.enabled ? icons.stateActive : icons.stateInactive\n            }}</mat-icon></mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"name\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.name' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.name}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"description\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.description' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.description}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"id\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.id' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n      </ng-container>\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row\n        *matRowDef=\"let row; columns: displayedColumns;\"\n        (click.single)=\"select(row)\"\n        [attr.tabindex]=\"0\"\n        (keydown.enter)=\"select(row)\"\n        (keydown.space)=\"$event.preventDefault(); select(row)\"\n        [class.selected-row]=\"this.isSelected(row)\" class=\"group-row\">\n      </mat-row>\n    </mat-table>\n  </ymt-pane-body>\n</ng-template>\n\n<ng-template #detailsPaneContent>\n  <ymt-pane-header [icon]=\"'group'\" [title]=\"'yuv.app.user-management.groups.details.title' | translate\" [subtitle]=\"selection().selected.at(0)?.id || ('yuv.app.user-management.groups.details.empty' | translate)\" [actions]=\"listActions\"></ymt-pane-header>\n  <ymt-pane-body>\n    <ymusrmgmt-group-details #groupDetails [groupId]=\"selection().selected.at(0)?.id\" />\n  </ymt-pane-body>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .group-table{overflow:auto;height:100%}:host .group-row:hover{background-color:var(--ymt-hover-background)}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "component", type: GroupDetailsComponent, selector: "ymusrmgmt-group-details", inputs: ["groupId"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: YmtLayoutModule }, { kind: "component", type: i5$1.MasterDetailsLayoutComponent, selector: "ymt-master-details-layout", inputs: ["layoutSettingsID", "options", "direction", "gutterSize", "detailsActive"], outputs: ["detailsActiveChange"] }, { kind: "directive", type: i5$1.YmtLayoutPaneDirective, selector: "[ymtLayoutPane]", inputs: ["role", "topBarActions"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i6$1.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i6$1.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i6.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvOverflowMenuModule }, { kind: "component", type: i8.OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvGroupsPageComponent, decorators: [{
             type: Component,
@@ -1351,7 +1656,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         YuvOverflowMenuModule,
                     ], host: {
                         '[class.busy]': '!busy()',
-                    }, template: "<ng-template yuvAppHeaderSlot=\"search\">\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\"\n  [gutterSize]=\"16\"\n  [options]=\"layoutOptions\"\n  [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\">\n    <ng-container *ngTemplateOutlet=\"masterPaneContent\"></ng-container>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    <ng-container *ngTemplateOutlet=\"detailsPaneContent\"></ng-container>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.groups.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" aria-label=\"Select page\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh()\" [matTooltip]=\"'yuv.app.user-management.groups.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>\n\n<ng-template #masterPaneContent>\n  <ymt-pane-body>\n    <mat-table [dataSource]=\"dataSource()\" class=\"group-table mat-elevation-z8\" row>\n      <ng-container matColumnDef=\"state\">\n        <mat-header-cell *matHeaderCellDef />\n        <mat-cell *matCellDef=\"let element\"><mat-icon>{{ element.enabled ? icons.stateActive : icons.stateInactive\n            }}</mat-icon></mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"name\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.name' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.name}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"description\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.description' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.description}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"id\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.id' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n      </ng-container>\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row \n        *matRowDef=\"let row; columns: displayedColumns;\" \n        (click.single)=\"select(row)\" \n        [class.selected-row]=\"this.isSelected(row)\" class=\"group-row\">\n      </mat-row>\n    </mat-table>\n  </ymt-pane-body>\n</ng-template>\n\n<ng-template #detailsPaneContent>\n  <ymt-pane-header [icon]=\"'group'\" [title]=\"'yuv.app.user-management.groups.details.title' | translate\" [subtitle]=\"selection().selected.at(0)?.id || ('yuv.app.user-management.groups.details.empty' | translate)\" [actions]=\"listActions\"></ymt-pane-header>\n  <ymt-pane-body>\n    <ymusrmgmt-group-details #groupDetails [groupId]=\"selection().selected.at(0)?.id\" />\n  </ymt-pane-body>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .group-table{overflow:auto;height:100%}:host .group-row:hover{background-color:var(--ymt-hover-background)}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"] }]
+                    }, template: "<ng-template yuvAppHeaderSlot=\"search\">\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\"\n  [gutterSize]=\"16\"\n  [options]=\"layoutOptions\"\n  [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\">\n    <ng-container *ngTemplateOutlet=\"masterPaneContent\"></ng-container>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    <ng-container *ngTemplateOutlet=\"detailsPaneContent\"></ng-container>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.groups.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" [attr.aria-label]=\"'yuv.app.user-management.groups.navigation.pagination.aria' | translate\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh()\" [matTooltip]=\"'yuv.app.user-management.groups.navigation.refresh.tooltip' | translate\" [attr.aria-label]=\"'yuv.app.user-management.groups.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>\n\n<ng-template #masterPaneContent>\n  <ymt-pane-body>\n    <mat-table [dataSource]=\"dataSource()\" class=\"group-table mat-elevation-z8\" row>\n      <ng-container matColumnDef=\"state\">\n        <mat-header-cell *matHeaderCellDef />\n        <mat-cell *matCellDef=\"let element\"><mat-icon>{{ element.enabled ? icons.stateActive : icons.stateInactive\n            }}</mat-icon></mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"name\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.name' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.name}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"description\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.description' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.description}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"id\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.id' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n      </ng-container>\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row\n        *matRowDef=\"let row; columns: displayedColumns;\"\n        (click.single)=\"select(row)\"\n        [attr.tabindex]=\"0\"\n        (keydown.enter)=\"select(row)\"\n        (keydown.space)=\"$event.preventDefault(); select(row)\"\n        [class.selected-row]=\"this.isSelected(row)\" class=\"group-row\">\n      </mat-row>\n    </mat-table>\n  </ymt-pane-body>\n</ng-template>\n\n<ng-template #detailsPaneContent>\n  <ymt-pane-header [icon]=\"'group'\" [title]=\"'yuv.app.user-management.groups.details.title' | translate\" [subtitle]=\"selection().selected.at(0)?.id || ('yuv.app.user-management.groups.details.empty' | translate)\" [actions]=\"listActions\"></ymt-pane-header>\n  <ymt-pane-body>\n    <ymusrmgmt-group-details #groupDetails [groupId]=\"selection().selected.at(0)?.id\" />\n  </ymt-pane-body>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .group-table{overflow:auto;height:100%}:host .group-row:hover{background-color:var(--ymt-hover-background)}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"] }]
         }], propDecorators: { groupDetailsComponent: [{
                 type: ViewChild,
                 args: [GroupDetailsComponent]