@yuuvis/user-management-app 1.1.1 → 1.2.1

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

@@ -1,7 +1,6 @@
-import * as i1$3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Component, Injectable, signal, linkedSignal, input, output, computed, effect, Inject, Input, HostBinding, ViewChild } from '@angular/core';
+import { inject, Component, Injectable, signal, Input, linkedSignal, input, output, computed, effect, Inject, HostBinding, ViewChild } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i2 from '@yuuvis/client-core';
@@ -10,52 +9,51 @@ import { Title } from '@angular/platform-browser';
 import { ShellService } from '@yuuvis/client-shell-core';
 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 i4$2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatSortModule } from '@angular/material/sort';
-import * as i6 from '@angular/material/paginator';
+import * as i2$2 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i5$1 from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import * as i3$3 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import { HttpParams } from '@angular/common/http';
-import { map, switchMap, of, forkJoin } from 'rxjs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { SelectionModel } from '@angular/cdk/collections';
 import { ConfirmService, BusyOverlayDirective, DialogComponent, ClickDoubleDirective } from '@yuuvis/client-framework/common';
 import { SimpleSearchComponent } from '@yuuvis/client-framework/simple-search';
+import * as i9 from '@yuuvis/client-framework/overflow-menu';
+import { YuvOverflowMenuModule } from '@yuuvis/client-framework/overflow-menu';
 import * as i8 from '@yuuvis/client-shell';
 import { YuvClientShellModule } from '@yuuvis/client-shell';
+import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
+import * as i6 from '@yuuvis/material/layout';
+import { YmtLayoutModule } from '@yuuvis/material/layout';
+import * as i7$1 from '@yuuvis/material/panes';
+import { YmtPanesModule } from '@yuuvis/material/panes';
+import { HttpParams } from '@angular/common/http';
+import { map, switchMap, of, forkJoin } from 'rxjs';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i3 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 { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
-import * as i3 from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { YmtButtonDirective } from '@yuuvis/material';
-import * as i4 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular/material/list';
+import * as i7 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i3$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import { SelectionModel } from '@angular/cdk/collections';
-import * as i9$1 from '@yuuvis/client-framework/master-details';
-import { YuvMasterDetailsModule } from '@yuuvis/client-framework/master-details';
-import * as i3$2 from '@angular/material/card';
-import { MatCardModule } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4$1 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i9 from '@angular/material/tabs';
-import { MatTabsModule } from '@angular/material/tabs';
-import * as i10 from '@yuuvis/client-framework/overflow-menu';
-import { YuvOverflowMenuModule } from '@yuuvis/client-framework/overflow-menu';
 
 const APP_ID = 'io.yuuvis.app.user-management';
 const APP_ICONS = {
     refresh: 'refresh',
     stateActive: 'account_circle',
     stateInactive: 'account_circle_off',
-    actionCreateNewUser: 'add',
+    actionCreateNewUser: 'person_add',
     actionEditUser: 'person_edit',
     actionActivateUser: 'person_check',
     actionDeactivateUser: 'person_off',
@@ -76,10 +74,10 @@ class YuvUserManagementComponent {
             : this.appName;
         this.#titleService.setTitle(translatedTitle);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvUserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: YuvUserManagementComponent, isStandalone: true, selector: "ymusrmgmt-root", ngImport: i0, template: "<section class=\"usrmgmt-main__content\" [attr.aria-label]=\"'yuv.app.user-management.content.aria.label' | translate\">\n  <router-outlet></router-outlet>\n</section>\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: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: YuvUserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: YuvUserManagementComponent, isStandalone: true, selector: "ymusrmgmt-root", ngImport: i0, template: "<section class=\"usrmgmt-main__content\" [attr.aria-label]=\"'yuv.app.user-management.content.aria.label' | translate\">\n  <router-outlet></router-outlet>\n</section>\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: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvUserManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: YuvUserManagementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-root', standalone: true, imports: [
                         CommonModule,
@@ -112,12 +110,12 @@ class YuvUserManagementService {
             .set('withInvitation', withInvitation || false)
             .set('temporaryPassword', true);
         return this.#backendService
-            .post(`/tenant-management/api/admin/users?${createParams}`, createUserRequest, ApiBase.none, { responseType: 'text' })
+            .post(`/tenant-management/api/idm/users?${createParams}`, createUserRequest, ApiBase.none, { responseType: 'text' })
             .pipe(map((createdUserId) => createdUserId));
     }
     editUser(userId, updateUserRequest) {
         return this.#backendService
-            .put(`/tenant-management/api/admin/users/${userId}`, updateUserRequest, ApiBase.none);
+            .put(`/tenant-management/api/idm/users/${userId}`, updateUserRequest, ApiBase.none);
     }
     deleteUser(user) {
         return this.#confirmService
@@ -128,7 +126,7 @@ class YuvUserManagementService {
             .pipe(switchMap((confirmed) => {
             if (confirmed) {
                 return this.#backendService
-                    .delete(`/tenant-management/api/admin/users/${user.id}`, ApiBase.none)
+                    .delete(`/tenant-management/api/idm/users/${user.id}`, ApiBase.none)
                     .pipe(map(() => true));
             }
             else
@@ -142,7 +140,6 @@ class YuvUserManagementService {
             userDetails: this.#backendService
                 .get(`/tenant-management/api/idm/users/${id}?${queryParams}`, ApiBase.none)
                 .pipe(map(user => {
-                // Destruct 'roles' from response and collect everything else into 'rest'
                 const { roles: effectiveRoles, ...rest } = user;
                 return { effectiveRoles, ...rest };
             })),
@@ -154,16 +151,81 @@ class YuvUserManagementService {
         })));
         return combined$;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvUserManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvUserManagementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: YuvUserManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: YuvUserManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvUserManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: YuvUserManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
+class UserDetailsComponent {
+    userService;
+    formBuilder;
+    userDetails = signal(undefined);
+    userDetailsForm;
+    currentUserId;
+    set userId(value) {
+        this.currentUserId = value;
+        this.loadUserDetails();
+    }
+    loadUserDetails() {
+        if (this.currentUserId) {
+            this.userService.getUserDetails(this.currentUserId).subscribe(user => {
+                this.userDetails.set(user);
+                this.userDetailsForm.patchValue({
+                    id: user.id,
+                    username: user.username,
+                    firstName: user.firstName,
+                    lastName: user.lastName,
+                    email: user.email,
+                    enabled: user.enabled
+                });
+            });
+        }
+        else {
+            this.userDetails.set(undefined);
+        }
+    }
+    /**
+     * Refresh the user details by reloading the data from the server
+     */
+    refresh() {
+        this.loadUserDetails();
+    }
+    constructor(userService, formBuilder) {
+        this.userService = userService;
+        this.formBuilder = formBuilder;
+        this.userDetailsForm = this.formBuilder.group({
+            id: [{ value: '' }],
+            username: [{ value: '' }],
+            firstName: [{ value: '' }],
+            lastName: [{ value: '' }],
+            email: [{ value: '' }],
+            enabled: [{ value: false, disabled: true }]
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: UserDetailsComponent, deps: [{ token: YuvUserManagementService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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>\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>\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; 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{display:grid;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3.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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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],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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: UserDetailsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymusrmgmt-user-details', imports: [
+                        MatChipsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatCheckboxModule,
+                        MatSlideToggleModule,
+                        ReactiveFormsModule,
+                        TranslateModule
+                    ], 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>\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>\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; 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{display:grid;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: YuvUserManagementService }, { type: i1$1.FormBuilder }], propDecorators: { userId: [{
+                type: Input
+            }] } });
+
 const components$1 = [BusyOverlayDirective, YmtButtonDirective, DialogComponent];
 const modules$1 = [
     CommonModule,
@@ -254,10 +316,10 @@ class CreateUserComponent {
             this.changedInput.set(value);
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CreateUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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],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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i4.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: i5.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"] }, { 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: ["headertitel"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CreateUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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],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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.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: i5.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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CreateUserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: CreateUserComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-create-user', standalone: true, imports: [...modules$1, ...components$1], host: {
                         '[class.busy]': '!busy()',
@@ -345,10 +407,10 @@ class EditUserRolesComponent {
     isAssignedSelected(role) {
         return this.selectedAssigned().includes(role);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EditUserRolesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: EditUserRolesComponent, isStandalone: true, selector: "ymusrmgmt-edit-user-roles", inputs: { allRoles: { classPropertyName: "allRoles", publicName: "allRoles", isSignal: true, isRequired: true, transformFunction: null }, assignedRoles: { classPropertyName: "assignedRoles", publicName: "assignedRoles", 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          [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]=\"userRoles().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 userRoles(); track role) {\n        <mat-list-option \n          [value]=\"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);min-height:var(--ymt-sizing-2xl)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle)}.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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$1.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$1.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EditUserRolesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: EditUserRolesComponent, isStandalone: true, selector: "ymusrmgmt-edit-user-roles", inputs: { allRoles: { classPropertyName: "allRoles", publicName: "allRoles", isSignal: true, isRequired: true, transformFunction: null }, assignedRoles: { classPropertyName: "assignedRoles", publicName: "assignedRoles", 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          [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]=\"userRoles().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 userRoles(); track role) {\n        <mat-list-option \n          [value]=\"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);min-height:var(--ymt-sizing-2xl)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle)}.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]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$2.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$2.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EditUserRolesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EditUserRolesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-edit-user-roles', imports: [
                         CommonModule,
@@ -471,10 +533,10 @@ class EditUserComponent {
     close() {
         this.#dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EditUserComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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-edit-user-roles\n          [allRoles]=\"allAvailableRoles()\"\n          [assignedRoles]=\"userRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-edit-user-roles>\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)=\"editUser()\">\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-edit-user-roles{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],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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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"] }, { 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: ["headertitel"] }, { kind: "component", type: EditUserRolesComponent, selector: "ymusrmgmt-edit-user-roles", inputs: ["allRoles", "assignedRoles"], outputs: ["rolesChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EditUserComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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-edit-user-roles\n          [allRoles]=\"allAvailableRoles()\"\n          [assignedRoles]=\"userRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-edit-user-roles>\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)=\"editUser()\">\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-edit-user-roles{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],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: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: EditUserRolesComponent, selector: "ymusrmgmt-edit-user-roles", inputs: ["allRoles", "assignedRoles"], outputs: ["rolesChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: EditUserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: EditUserComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-edit-user', standalone: true, imports: [...modules, ...components], host: {
                         '[class.busy]': '!busy()',
@@ -484,73 +546,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
-class UserDetailsComponent {
-    userService;
-    formBuilder;
-    userDetails = signal(undefined);
-    userDetailsForm;
-    currentUserId;
-    set userId(value) {
-        this.currentUserId = value;
-        this.loadUserDetails();
-    }
-    loadUserDetails() {
-        if (this.currentUserId) {
-            this.userService.getUserDetails(this.currentUserId).subscribe(user => {
-                this.userDetails.set(user);
-                this.userDetailsForm.patchValue({
-                    id: user.id,
-                    username: user.username,
-                    firstName: user.firstName,
-                    lastName: user.lastName,
-                    email: user.email,
-                    enabled: user.enabled
-                });
-            });
-        }
-        else {
-            this.userDetails.set(undefined);
-        }
-    }
-    /**
-     * Refresh the user details by reloading the data from the server
-     */
-    refresh() {
-        this.loadUserDetails();
-    }
-    constructor(userService, formBuilder) {
-        this.userService = userService;
-        this.formBuilder = formBuilder;
-        this.userDetailsForm = this.formBuilder.group({
-            id: [{ value: '' }],
-            username: [{ value: '' }],
-            firstName: [{ value: '' }],
-            lastName: [{ value: '' }],
-            email: [{ value: '' }],
-            enabled: [{ value: false, disabled: true }]
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserDetailsComponent, deps: [{ token: YuvUserManagementService }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: UserDetailsComponent, isStandalone: true, selector: "ymusrmgmt-user-details", inputs: { userId: "userId" }, ngImport: i0, template: "        \n  <mat-tab-group>\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <mat-icon>person</mat-icon>\n        {{('yuv.app.user-management.users.details.title' | translate)}}\n      </ng-template>\n      <mat-card class=\"user-details-card\">\n        <mat-card-content>\n          @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>\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>\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; 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          } @else {\n            <p>{{('yuv.app.user-management.users.details.empty' | translate)}}</p>\n          }\n        </mat-card-content>\n      </mat-card>\n    </mat-tab>\n  </mat-tab-group>", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-card{margin:var(--ymt-spacing-m)}:host .user-details-form{display:grid;gap:var(--ymt-spacing-m)}:host .user-details-form mat-chip-row{overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4$1.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i4$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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i4.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: MatTabsModule }, { kind: "directive", type: i9.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { 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],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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UserDetailsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ymusrmgmt-user-details', imports: [
-                        MatCardModule,
-                        MatChipsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatIconModule,
-                        MatCheckboxModule,
-                        MatSlideToggleModule,
-                        MatTabsModule,
-                        ReactiveFormsModule,
-                        TranslateModule
-                    ], template: "        \n  <mat-tab-group>\n    <mat-tab>\n      <ng-template mat-tab-label>\n        <mat-icon>person</mat-icon>\n        {{('yuv.app.user-management.users.details.title' | translate)}}\n      </ng-template>\n      <mat-card class=\"user-details-card\">\n        <mat-card-content>\n          @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>\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>\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; 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          } @else {\n            <p>{{('yuv.app.user-management.users.details.empty' | translate)}}</p>\n          }\n        </mat-card-content>\n      </mat-card>\n    </mat-tab>\n  </mat-tab-group>", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-card{margin:var(--ymt-spacing-m)}:host .user-details-form{display:grid;gap:var(--ymt-spacing-m)}:host .user-details-form mat-chip-row{overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: YuvUserManagementService }, { type: i1$1.FormBuilder }], propDecorators: { userId: [{
-                type: Input
-            }] } });
-
 class YuvUsersPageComponent {
     layoutSettingsID = APP_ID + '#root.layout.settings';
     #logger = inject(Logger);
@@ -561,24 +556,27 @@ class YuvUsersPageComponent {
     #userService = inject(UserService);
     #confirmService = inject(ConfirmService);
     userDetailsComponent;
-    actions = [];
     pagination;
     busy = signal(false);
+    actions = [];
     displayedColumns = ['state', 'name', 'firstName', 'lastName', 'email', 'id'];
     icons = {
         ...APP_ICONS,
     };
     dataSource = signal([]);
     selection = signal(new SelectionModel(false, undefined));
-    enableDetails = signal(false);
-    layoutOptions = signal({
-        masterSize: 80,
-        detailsSize: 20,
-    });
+    detailsActive = true;
+    layoutOptions = {
+        resizable: true,
+        detailsSize: 25,
+        detailsMinSize: 25,
+        detailsMaxSize: 75
+    };
     #query = { term: '' };
     #updateActions(selectedUser) {
         if (!selectedUser) {
             this.actions = [];
+            this.detailsActive = false;
             return;
         }
         const currentUser = this.#userService.getCurrentUser();
@@ -610,6 +608,7 @@ class YuvUsersPageComponent {
             callback: () => this.deleteSelectedUser(),
         };
         this.actions = [editAction, activateAction, deactivateAction, deleteAction];
+        this.detailsActive = true;
     }
     createNewUser() {
         this.#logger.debug('Create new user ...');
@@ -715,7 +714,6 @@ class YuvUsersPageComponent {
             this.selection().select(row);
             this.#updateActions(row);
         }
-        this.enableDetails.set(true);
     }
     deselect() {
         this.selection().clear();
@@ -765,57 +763,46 @@ class YuvUsersPageComponent {
             },
             complete: () => {
                 const selected = this.selection().hasValue() ? this.selection().selected[0] : undefined;
-                if (selected) {
-                    if (this.dataSource().some(u => u.id === selected.id)) {
-                        const updatedSelected = this.dataSource().find(u => u.id === selected.id);
-                        this.select(updatedSelected);
-                    }
-                    else {
-                        this.#userManagementService.getUserDetails(selected.id).subscribe({
-                            next: (user) => {
-                                this.select(user);
-                            },
-                            error: (e) => {
-                                this.#logger.error(`Failed to fetch data for selected user with id '${selected.id}'. Deselecting user...`, e);
-                                this.deselect();
-                            }
-                        });
-                    }
-                    this.refreshUserDetails();
+                if (selected && this.dataSource().some(u => u.id === selected.id)) {
+                    const updatedSelected = this.dataSource().find(u => u.id === selected.id);
+                    this.select(updatedSelected);
                 }
                 else {
-                    this.deselect();
+                    this.select(this.dataSource()[0]);
                 }
                 this.busy.set(false);
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvUsersPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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=\"actions\">\n</ng-template>\n\n<ng-template yuvAppHeaderSlot=\"search\">\n  <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<header>\n  <nav [attr.aria-label]=\"'yuv.app.user-management.users.naviagtion.aria.label' | translate\">\n    <div class=\"primary-actions\">\n      <button mat-mini-fab (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.navigation.add-user.tooltip' | translate\">\n        <mat-icon>{{icons.actionCreateNewUser}}</mat-icon>        \n      </button>\n    </div>\n    <div class=\"user-actions\">\n      <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n    </div>\n    <div class=\"secondary-actions\">\n      <button mat-icon-button (click)=\"enableDetails.set(!enableDetails())\" [matTooltip]=\"enableDetails() ? ('yuv.app.user-management.users.navigation.hidedetails.tooltip' | translate) : ('yuv.app.user-management.users.navigation.showdetails.tooltip' | translate)\" [ngClass]=\"{ enabled: enableDetails() }\">\n        <mat-icon>dock_to_left</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"refresh()\" [matTooltip]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\">\n        <mat-icon>{{icons.refresh}}</mat-icon>\n      </button>\n    </div>\n  </nav>\n</header>\n\n<main [yuvBusyOverlay]=\"busy()\">\n  <yuv-master-details\n    [gutterSize]=\"1\"\n    [detailsActive]=\"enableDetails()\"\n    [layoutOptions]=\"layoutOptions()\"\n    [layoutSettingsID]=\"layoutSettingsID\"\n    [mode]=\"'aside'\">\n\n    <ng-template #yuvMasterPane>\n      <div class=\"masterPaneContainer\">\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\n        @if (pagination) {\n        <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageSize]=\"getPageSize()\" aria-label=\"Select page\"\n          (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n        }\n      </div>\n\n      <ng-template #yuvDetailsPane>\n        <div class=\"detailsPaneContainer\">\n          <ymusrmgmt-user-details #userDetails [userId]=\"selection().selected.at(0)?.id\" />\n        </div>\n      </ng-template>\n\n    </ng-template>\n  </yuv-master-details>\n</main>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);--split-gutter-background-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host header{flex:0 0 auto}:host header>nav{flex:0 0 auto;border-block-end:1px solid var(--ymt-outline-variant);display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"primary actions sort secondary\";align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs);min-height:40px;position:relative}:host header>nav .primary-actions{grid-area:primary;overflow-x:auto;border-color:var(--ymt-outline-variant);border-width:0 1px 0 0;border-style:solid;padding-right:10px}:host header>nav .secondary-actions{grid-area:secondary;overflow-x:auto;border-color:var(--ymt-outline-variant);border-width:0 0 0 1px;border-style:solid;padding-left:10px}:host main{height:100%;overflow:hidden;background-color:var(--ymt-surface);display:flex;flex-flow:column}:host main yuv-master-details{height:100%}:host main .user-table{overflow:auto;height:100%}:host main .masterPaneContainer{display:flex;flex-direction:column;height:100%;overflow:hidden}:host main .detailsPaneContainer{display:flex;flex-direction:column;height:100%;overflow:auto}: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: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { 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$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i6.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: SimpleSearchComponent, selector: "yuv-simple-search", inputs: ["query"], outputs: ["querySubmit", "clearInput", "targetSelectionChanged", "queryChange", "typeAggregation"] }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i8.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvMasterDetailsModule }, { kind: "component", type: i9$1.YuvMasterDetailsComponent, selector: "yuv-master-details", inputs: ["detailsActive", "layoutSettingsID", "layoutOptions", "undockableDetails", "panelStyle", "gutterSize", "mode"], outputs: ["detailsActiveChange"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig"] }, { 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: "ngmodule", type: YuvOverflowMenuModule }, { kind: "component", type: i10.OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: YuvUsersPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", 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=\"actions\">\n  <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n    <mat-icon>{{icons.actionCreateNewUser}}</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n  </button>\n</ng-template>\n\n<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\">\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  @if (pagination) {\n    <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageSize]=\"getPageSize()\" aria-label=\"Select page\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  }\n  <button ymt-icon-button (click)=\"refresh()\" [matTooltip]=\"'yuv.app.user-management.users.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>", 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 .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$3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$3.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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { 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: i6.MasterDetailsLayoutComponent, selector: "ymt-master-details-layout", inputs: ["layoutSettingsID", "options", "direction", "gutterSize", "detailsActive"], outputs: ["detailsActiveChange"] }, { kind: "directive", type: i6.YmtLayoutPaneDirective, selector: "[ymtLayoutPane]", inputs: ["role", "topBarActions"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i7$1.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions"] }, { kind: "component", type: i7$1.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i8.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvOverflowMenuModule }, { kind: "component", type: i9.OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: YuvUsersPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: YuvUsersPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-users', standalone: true, imports: [
                         CommonModule,
                         MatButtonModule,
                         MatIconModule,
-                        MatTooltipModule,
-                        MatTableModule,
                         MatPaginatorModule,
                         MatSortModule,
+                        MatTableModule,
+                        MatTabsModule,
+                        MatTooltipModule,
                         RouterModule,
                         TranslateModule,
                         SimpleSearchComponent,
-                        YuvClientShellModule,
-                        YuvMasterDetailsModule,
                         BusyOverlayDirective,
                         ClickDoubleDirective,
                         UserDetailsComponent,
+                        YmtButtonDirective,
+                        YmtIconButtonDirective,
+                        YmtLayoutModule,
+                        YmtPanesModule,
                         YuvClientShellModule,
-                        YuvOverflowMenuModule
+                        YuvOverflowMenuModule,
                     ], host: {
                         '[class.busy]': '!busy()',
-                    }, template: "<ng-template yuvAppHeaderSlot=\"actions\">\n</ng-template>\n\n<ng-template yuvAppHeaderSlot=\"search\">\n  <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<header>\n  <nav [attr.aria-label]=\"'yuv.app.user-management.users.naviagtion.aria.label' | translate\">\n    <div class=\"primary-actions\">\n      <button mat-mini-fab (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.navigation.add-user.tooltip' | translate\">\n        <mat-icon>{{icons.actionCreateNewUser}}</mat-icon>        \n      </button>\n    </div>\n    <div class=\"user-actions\">\n      <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n    </div>\n    <div class=\"secondary-actions\">\n      <button mat-icon-button (click)=\"enableDetails.set(!enableDetails())\" [matTooltip]=\"enableDetails() ? ('yuv.app.user-management.users.navigation.hidedetails.tooltip' | translate) : ('yuv.app.user-management.users.navigation.showdetails.tooltip' | translate)\" [ngClass]=\"{ enabled: enableDetails() }\">\n        <mat-icon>dock_to_left</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"refresh()\" [matTooltip]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\">\n        <mat-icon>{{icons.refresh}}</mat-icon>\n      </button>\n    </div>\n  </nav>\n</header>\n\n<main [yuvBusyOverlay]=\"busy()\">\n  <yuv-master-details\n    [gutterSize]=\"1\"\n    [detailsActive]=\"enableDetails()\"\n    [layoutOptions]=\"layoutOptions()\"\n    [layoutSettingsID]=\"layoutSettingsID\"\n    [mode]=\"'aside'\">\n\n    <ng-template #yuvMasterPane>\n      <div class=\"masterPaneContainer\">\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\n        @if (pagination) {\n        <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageSize]=\"getPageSize()\" aria-label=\"Select page\"\n          (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n        }\n      </div>\n\n      <ng-template #yuvDetailsPane>\n        <div class=\"detailsPaneContainer\">\n          <ymusrmgmt-user-details #userDetails [userId]=\"selection().selected.at(0)?.id\" />\n        </div>\n      </ng-template>\n\n    </ng-template>\n  </yuv-master-details>\n</main>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);--split-gutter-background-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host header{flex:0 0 auto}:host header>nav{flex:0 0 auto;border-block-end:1px solid var(--ymt-outline-variant);display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"primary actions sort secondary\";align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-xs);min-height:40px;position:relative}:host header>nav .primary-actions{grid-area:primary;overflow-x:auto;border-color:var(--ymt-outline-variant);border-width:0 1px 0 0;border-style:solid;padding-right:10px}:host header>nav .secondary-actions{grid-area:secondary;overflow-x:auto;border-color:var(--ymt-outline-variant);border-width:0 0 0 1px;border-style:solid;padding-left:10px}:host main{height:100%;overflow:hidden;background-color:var(--ymt-surface);display:flex;flex-flow:column}:host main yuv-master-details{height:100%}:host main .user-table{overflow:auto;height:100%}:host main .masterPaneContainer{display:flex;flex-direction:column;height:100%;overflow:hidden}:host main .detailsPaneContainer{display:flex;flex-direction:column;height:100%;overflow:auto}: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=\"actions\">\n  <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n    <mat-icon>{{icons.actionCreateNewUser}}</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n  </button>\n</ng-template>\n\n<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\">\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  @if (pagination) {\n    <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageSize]=\"getPageSize()\" aria-label=\"Select page\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  }\n  <button ymt-icon-button (click)=\"refresh()\" [matTooltip]=\"'yuv.app.user-management.users.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>", 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 .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"] }]
         }], propDecorators: { userDetailsComponent: [{
                 type: ViewChild,
                 args: [UserDetailsComponent]