@yuuvis/user-management-app 2.2.1 → 2.3.0

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

@@ -1,59 +1,51 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, signal, computed, Component, Pipe, Input, linkedSignal, input, output, effect, Inject, HostBinding, ViewChild } from '@angular/core';
-import * as i5 from '@angular/router';
-import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
-import * as i3 from '@angular/material/button';
+import { inject, Injectable, TemplateRef, Input, ContentChild, Component, Pipe, input, output, signal, computed, effect, linkedSignal, Inject, ElementRef, Directive, DestroyRef, Injector, EventEmitter, viewChildren, Output, ViewEncapsulation, ViewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Title } from '@angular/platform-browser';
+import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i2$1 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatDialogRef, MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as i1$1 from '@angular/material/icon';
+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$1 from '@angular/material/tooltip';
+import * as i3$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i4$1 from '@angular/material/paginator';
+import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
+import * as i5 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import { FocusKeyManager, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import * as i4 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { filter } from 'rxjs/operators';
-import { Title } from '@angular/platform-browser';
-import { BackendService, TranslateService, ApiBase, TranslatePipe, NotificationService, Logger, LocalizationService, UserService } from '@yuuvis/client-core';
-import * as i6$1 from '@yuuvis/material/panes';
-import { YmtPanesModule } from '@yuuvis/material/panes';
-import * as i6 from '@yuuvis/client-shell';
-import { YuvClientShellModule } from '@yuuvis/client-shell';
+import { Router, ActivatedRoute } from '@angular/router';
+import { expand, EMPTY, reduce, switchMap, map, of, forkJoin, shareReplay, catchError, throwError, debounceTime, distinctUntilChanged, startWith, filter, tap } from 'rxjs';
+import { BackendService, TranslateService, ApiBase, LocalizationService, Logger, NotificationService, TranslatePipe, TabGuardDirective, UserService } from '@yuuvis/client-core';
+import { ConfirmService, AbstractMatFormField, BusyOverlayDirective, DialogComponent, LayoutSettingsService, ClickDoubleDirective } from '@yuuvis/client-components/common';
+import { SimpleSearchComponent } from '@yuuvis/client-framework/simple-search';
 import { ShellService } from '@yuuvis/client-shell-core';
-import * as i1$2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1 from '@angular/forms';
-import { ReactiveFormsModule, FormBuilder, FormControl, Validators } from '@angular/forms';
-import * as i2 from '@angular/cdk/clipboard';
-import { ClipboardModule } from '@angular/cdk/clipboard';
-import * as i4 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3$1 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import { map, switchMap, of, forkJoin } from 'rxjs';
+import * as i8$1 from '@yuuvis/client-shell';
+import { YuvClientShellModule } from '@yuuvis/client-shell';
 import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
-import { ConfirmService, BusyOverlayDirective, DialogComponent, ClickDoubleDirective } from '@yuuvis/client-components/common';
+import * as i7 from '@yuuvis/material/panes';
+import { YmtPanesModule } from '@yuuvis/material/panes';
+import * as i9 from '@yuuvis/client-components/split-view';
+import { YuvSplitViewModule } from '@yuuvis/client-components/split-view';
 import { HttpParams } from '@angular/common/http';
-import * as i2$2 from '@angular/material/paginator';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import * as i3$4 from '@angular/material/table';
-import { MatTableModule } from '@angular/material/table';
-import { MatTabsModule } from '@angular/material/tabs';
-import { SelectionModel } from '@angular/cdk/collections';
-import { SimpleSearchComponent } from '@yuuvis/client-framework/simple-search';
-import * as i8 from '@yuuvis/client-components/overflow-menu';
-import { YuvOverflowMenuModule } from '@yuuvis/client-components/overflow-menu';
+import * as i1 from '@angular/cdk/clipboard';
+import { ClipboardModule } from '@angular/cdk/clipboard';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import { YmtBadge } from '@yuuvis/material/badge';
-import * as i5$1 from '@yuuvis/material/layout';
-import { YmtLayoutModule } from '@yuuvis/material/layout';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3$2 from '@angular/material/chips';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i7 from '@angular/material/slide-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i3$3 from '@angular/material/list';
+import * as i1$4 from '@angular/common';
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
+import * as i1$3 from '@angular/forms';
+import { ReactiveFormsModule, FormBuilder, FormControl, Validators } from '@angular/forms';
+import * as i3$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import { MatCardModule } from '@angular/material/card';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i8 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
 
 const APP_ID = 'io.yuuvis.app.user-management';
 /**
@@ -65,58 +57,135 @@ const SCIM_MANAGED_ROLE = 'scim-managed';
 const APP_ICONS = {
     refresh: 'refresh',
     stateActive: 'account_circle',
-    stateInactive: 'account_circle_off',
+    stateInactive: 'block',
     sourceExternal: 'cloud',
-    actionCreateNewUser: 'person_add',
+    actionCreateNewUser: 'person',
+    actionCreateNewGroup: 'group',
     actionEditUser: 'person_edit',
     actionActivateUser: 'person_check',
     actionDeactivateUser: 'person_off',
     actionDeleteUser: 'delete',
     actionEditGroup: 'edit',
-    actionSettings: 'settings',
+    actionDeleteGroup: 'delete',
+    actionRemoveGroupMember: 'group_remove',
+    actionAddGroupMembers: 'group_add',
+    actionSettings: 'manage_accounts',
 };
 
+/**
+ * Walks every page of a paginated endpoint and concatenates the results. Used where the API
+ * only offers server-side pagination but a feature needs the full, unpaginated list (e.g. the
+ * groups rail, which needs every group at once rather than one page at a time).
+ */
+function aggregateAllPages(fetchPage) {
+    return fetchPage(0).pipe(expand((response, index) => (response.hasMoreItems ? fetchPage(index + 1) : EMPTY)), reduce((acc, response) => [...acc, ...response.objects], []));
+}
+
+var _a;
+/**
+ * Maps an HTTP error status to an i18n key under `${keyPrefix}.error.*`, e.g.
+ * "yuv.app.user-management.users.action.create.error.forbidden" for a 403.
+ * `extraStatusSuffixes` lets a caller opt in to additional statuses beyond the
+ * universal 403/"forbidden" and default/"unknown" (e.g. `{ 409: 'conflict' }`).
+ */
+function resolveErrorMessageKey(keyPrefix, status, extraStatusSuffixes = {}) {
+    if (status === 403) {
+        return `${keyPrefix}.error.forbidden`;
+    }
+    const extraSuffix = extraStatusSuffixes[status];
+    return `${keyPrefix}.error.${extraSuffix || 'unknown'}`;
+}
 class YuvUserManagementService {
-    static DEFAULT_PAGE_SIZE = 15;
+    /** Also the default in the page-size selector on the users/group-membership list - see `YuvUserManagementComponent.pageSizeOptions`. */
+    static DEFAULT_PAGE_SIZE = 25;
+    /**
+     * Page size used when walking *every* page of a list (see `aggregateAllPages`), which the
+     * backend only exposes paginated. Deliberately much larger than `DEFAULT_PAGE_SIZE`: those walks
+     * are sequential (each page's request only goes out once the previous one has answered), so the
+     * page size is what decides how many round trips a full list costs.
+     */
+    static AGGREGATE_PAGE_SIZE = 200;
     #backendService = inject(BackendService);
     #translateService = inject(TranslateService);
     #confirmService = inject(ConfirmService);
-    fetchUsers(page = 0, search) {
-        const filterParams = new HttpParams()
-            .set('page', page)
-            .set('size', YuvUserManagementService.DEFAULT_PAGE_SIZE)
-            .set('sort', 'username%2Casc')
-            .set('search', search || '');
-        return this.#backendService
-            .get(`/tenant-management/api/idm/users?${filterParams}`, ApiBase.none);
-    }
-    fetchGroups(page = 0, search) {
-        const filterParams = new HttpParams()
-            .set('page', page)
-            .set('size', YuvUserManagementService.DEFAULT_PAGE_SIZE)
-            .set('sort', 'name%2Casc')
-            .set('search', search || '');
-        return this.#backendService
-            .get(`/tenant-management/api/idm/groups?${filterParams}`, ApiBase.none);
+    /** Common `page`/`size`/`sort` params shared by every paginated `/idm/` list endpoint. */
+    #pageParams(page, sort, size = _a.DEFAULT_PAGE_SIZE) {
+        return new HttpParams().set('page', page).set('size', size).set('sort', sort);
+    }
+    /** `enabled` filters by user state: `true` for enabled-only, `false` for disabled-only, omitted for both. */
+    fetchUsers(page = 0, search, enabled, pageSize) {
+        let filterParams = this.#pageParams(page, 'username%2Casc', pageSize).set('search', search || '');
+        if (enabled !== undefined) {
+            filterParams = filterParams.set('enabled', enabled);
+        }
+        return this.#backendService.get(`/tenant-management/api/idm/users?${filterParams}`, ApiBase.none);
+    }
+    fetchGroups(page = 0, search, pageSize) {
+        const filterParams = this.#pageParams(page, 'name%2Casc', pageSize).set('search', search || '');
+        return this.#backendService.get(`/tenant-management/api/idm/groups?${filterParams}`, ApiBase.none);
+    }
+    /**
+     * Fetches every group across all pages. Used for the groups rail, which needs the full list
+     * rather than one page at a time.
+     */
+    fetchAllGroups() {
+        return aggregateAllPages((page) => this.fetchGroups(page, undefined, _a.AGGREGATE_PAGE_SIZE));
+    }
+    /**
+     * Fetches one server-paginated page of a group's members as full user records. Group
+     * membership search isn't supported by the backend - there's no `search` param here, see
+     * `YuvUserManagementComponent` for how the UI enforces that a search always scopes to "All users"
+     * instead.
+     */
+    fetchGroupMembers(groupId, page = 0, pageSize) {
+        const filterParams = this.#pageParams(page, 'username%2Casc', pageSize);
+        return this.#backendService.get(`/tenant-management/api/idm/groups/${groupId}/members?${filterParams}`, ApiBase.none);
+    }
+    /**
+     * Removes a user from a group (the user account itself is unaffected), after the user
+     * confirms the action.
+     */
+    removeGroupMember(group, user) {
+        return this.#confirmService
+            .confirm({
+            title: this.#translateService.instant('yuv.app.user-management.groups.action.removeMember.label'),
+            message: this.#translateService.instant('yuv.app.user-management.groups.action.removeMember.confirm.message', { username: user.username, name: group.name }),
+            confirmLabel: this.#translateService.instant('yuv.app.user-management.groups.action.removeMember.confirm.label'),
+        })
+            .pipe(switchMap((confirmed) => {
+            if (confirmed) {
+                return this.#backendService
+                    .delete(`/tenant-management/api/idm/groups/${group.id}/members/${user.id}`, ApiBase.none)
+                    .pipe(map(() => true));
+            }
+            else
+                return of(false);
+        }));
+    }
+    /**
+     * Adds a user to a group (the user account itself is unaffected). Unlike `removeGroupMember`,
+     * adding isn't destructive, so no confirmation dialog - consistent with createUser/createGroup.
+     */
+    addGroupMember(group, userId) {
+        return this.#backendService.put(`/tenant-management/api/idm/groups/${group.id}/members/${userId}`, null, ApiBase.none);
     }
     fetchAllRoles() {
         return this.#backendService
             .get(`/tenant-management/api/idm/roles`, ApiBase.none)
-            .pipe(map((roles) => roles
-            .map(role => role.name)
-            .filter(name => name !== SCIM_MANAGED_ROLE)));
+            .pipe(map((roles) => roles.map((role) => role.name).filter((name) => name !== SCIM_MANAGED_ROLE)));
     }
     createUser(createUserRequest, withInvitation) {
         const createParams = new HttpParams()
             .set('withInvitation', withInvitation || false)
             .set('temporaryPassword', true);
         return this.#backendService
-            .post(`/tenant-management/api/idm/users?${createParams}`, createUserRequest, ApiBase.none, { responseType: 'text' })
+            .post(`/tenant-management/api/idm/users?${createParams}`, createUserRequest, ApiBase.none, {
+            responseType: 'text',
+        })
             .pipe(map((createdUserId) => createdUserId));
     }
     updateUser(userId, updateUserRequest) {
-        return this.#backendService
-            .put(`/tenant-management/api/idm/users/${userId}`, updateUserRequest, ApiBase.none);
+        return this.#backendService.put(`/tenant-management/api/idm/users/${userId}`, updateUserRequest, ApiBase.none);
     }
     deleteUser(user) {
         return this.#confirmService
@@ -138,12 +207,13 @@ class YuvUserManagementService {
     createGroup(createGroupRequest) {
         const createParams = new HttpParams();
         return this.#backendService
-            .post(`/tenant-management/api/idm/groups?${createParams}`, createGroupRequest, ApiBase.none, { responseType: 'text' })
+            .post(`/tenant-management/api/idm/groups?${createParams}`, createGroupRequest, ApiBase.none, {
+            responseType: 'text',
+        })
             .pipe(map((createdGroupId) => createdGroupId));
     }
     updateGroup(groupId, updateGroupRequest) {
-        return this.#backendService
-            .put(`/tenant-management/api/idm/groups/${groupId}`, updateGroupRequest, ApiBase.none);
+        return this.#backendService.put(`/tenant-management/api/idm/groups/${groupId}`, updateGroupRequest, ApiBase.none);
     }
     deleteGroup(group) {
         return this.#confirmService
@@ -162,20 +232,17 @@ class YuvUserManagementService {
         }));
     }
     getUserDetails(id) {
-        const queryParams = new HttpParams()
-            .set('briefRepresentation', false);
         const combined$ = forkJoin({
             userDetails: this.#backendService
-                .get(`/tenant-management/api/idm/users/${id}?${queryParams}`, ApiBase.none)
-                .pipe(map(user => {
-                const { roles: effectiveRoles, ...rest } = user;
+                .get(`/tenant-management/api/idm/users/${id}`, ApiBase.none)
+                .pipe(map((user) => {
+                const { roles: effectiveRoles = [], ...rest } = user;
                 return { effectiveRoles, ...rest };
             })),
-            userRoles: this.#backendService
-                .get(`/tenant-management/api/idm/users/${id}/roles`, ApiBase.none)
+            userRoles: this.#backendService.get(`/tenant-management/api/idm/users/${id}/roles`, ApiBase.none),
         }).pipe(map((response) => ({
             ...response.userDetails,
-            roles: response.userRoles
+            roles: response.userRoles,
         })));
         return combined$;
     }
@@ -184,8 +251,16 @@ class YuvUserManagementService {
      * tenant. Emits a 404 error if no OIDC identity provider is configured.
      */
     fetchOIDCProviderConfig() {
-        return this.#backendService
-            .get(`/tenant-management/api/admin/identity-provider/oidc`, ApiBase.none);
+        return this.#backendService.get(`/tenant-management/api/admin/identity-provider/oidc`, ApiBase.none);
+    }
+    /**
+     * Fetches the tenant-specific values needed to configure an external identity provider (the
+     * OIDC redirect URI and the SCIM provisioning endpoint/credentials). Available independent of
+     * whether an OIDC identity provider has already been configured, since both values are derived
+     * from the tenant alone.
+     */
+    fetchIdentityProviderSetupInfo() {
+        return this.#backendService.get(`/tenant-management/api/admin/identity-provider/setup-info`, ApiBase.none);
     }
     /**
      * Creates (or updates) the OIDC identity provider configuration of the current tenant. The
@@ -193,8 +268,7 @@ class YuvUserManagementService {
      * OIDC endpoints (authorizationUrl, tokenUrl, jwksUrl, ...) from the discovery document.
      */
     setOIDCProviderConfig(providerConfig) {
-        return this.#backendService
-            .post(`/tenant-management/api/admin/identity-provider/oidc`, providerConfig, ApiBase.none);
+        return this.#backendService.post(`/tenant-management/api/admin/identity-provider/oidc`, providerConfig, ApiBase.none);
     }
     /**
      * Deletes the OIDC identity provider configuration of the current tenant, after the user
@@ -203,8 +277,8 @@ class YuvUserManagementService {
     deleteOIDCProviderConfig() {
         return this.#confirmService
             .confirm({
-            title: this.#translateService.instant('yuv.app.user-management.settings.oidc.action.delete.label'),
-            message: this.#translateService.instant('yuv.app.user-management.settings.oidc.action.delete.confirm.message'),
+            title: this.#translateService.instant('yuv.app.user-management.settings.oidc.action.reset.label'),
+            message: this.#translateService.instant('yuv.app.user-management.settings.oidc.action.reset.confirm.message'),
         })
             .pipe(switchMap((confirmed) => {
             if (confirmed) {
@@ -217,249 +291,128 @@ class YuvUserManagementService {
         }));
     }
     getGroupDetails(id) {
-        const queryParams = new HttpParams()
-            .set('briefRepresentation', false);
-        return this.#backendService
-            .get(`/tenant-management/api/idm/groups/${id}?${queryParams}`, ApiBase.none);
+        return this.#backendService.get(`/tenant-management/api/idm/groups/${id}`, ApiBase.none);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUserManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUserManagementService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: YuvUserManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: YuvUserManagementService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUserManagementService, decorators: [{
+_a = YuvUserManagementService;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: YuvUserManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
         }] });
 
-const components$4 = [BusyOverlayDirective, YmtButtonDirective, DialogComponent];
-const modules$4 = [CommonModule, ReactiveFormsModule, TranslatePipe, ClipboardModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTooltipModule];
-/** Placeholder shown in the client secret field of an already configured provider; the backend never returns the real secret. */
-const FAKE_CLIENT_SECRET = '••••••••••••••••';
-class SettingsComponent {
-    #fb = inject(FormBuilder);
-    #userManagementService = inject(YuvUserManagementService);
-    #dialogRef = inject((MatDialogRef));
-    #translateService = inject(TranslateService);
-    #notificationService = inject(NotificationService);
-    #logger = inject(Logger);
-    busy = signal(true, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
-    error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    /** True if the tenant has no OIDC identity provider configured (backend responds with 404). */
-    notConfigured = signal(false, ...(ngDevMode ? [{ debugName: "notConfigured" }] : /* istanbul ignore next */ []));
-    provider = signal(undefined, ...(ngDevMode ? [{ debugName: "provider" }] : /* istanbul ignore next */ []));
+let nextId = 0;
+/**
+ * A read-only `MatFormFieldControl` that renders a *list* of values inside a real
+ * `<mat-form-field>` - for "fields" that are inherently a list (assigned roles, group membership)
+ * rather than a single text value, but should still look and behave like every other field
+ * (outline, floating label, spacing) without a hand-matched CSS mock: `mat-form-field` throws at
+ * runtime unless its content is a real `MatFormFieldControl`, which is exactly what this is.
+ *
+ * The `MatFormFieldControl` contract itself comes from `AbstractMatFormField`, the framework's own
+ * base for this (it's what `yuv-autocomplete` extends) - so `stateChanges`, `value`, `placeholder`,
+ * `required`, `disabled`, `focused`, `errorState`, `ngControl` and `shouldLabelFloat` are all
+ * inherited rather than re-implemented here. Two of its behaviours are deliberately opted out of;
+ * both are noted where that happens below.
+ *
+ * `[value]` is the list itself. Each item's markup comes entirely from the `<ng-template let-item>`
+ * projected as this component's content - deliberately not a fixed "badge" shape with a growing
+ * pile of `displayWith`/`tooltipWith`/`severityWith`/... inputs, since what a list item actually
+ * needs to show (a plain badge, an icon+badge, a clickable button wrapping one) varies enough
+ * between usages that a template the caller fully controls is simpler than anticipating every
+ * variation through more inputs - and the caller's own pipes/translations/click handlers are
+ * already in scope inside that template, with no need to re-expose them as function inputs.
+ * `[emptyLabel]` is shown as plain text when the list is empty - pass it already translated (e.g.
+ * `[emptyLabel]="'...' | translate"`), this component has no i18n dependency of its own.
+ *
+ * Note the empty state is driven by the template's own `@if (value && value.length)`, not by the
+ * inherited `empty` - which the base derives as `!value`, i.e. `false` for an empty array. That
+ * suits this control: `shouldLabelFloat` is `focused || !empty`, so the label floats permanently,
+ * which is what a labelled list wants (there is no "empty native input" state for a label to sit
+ * over as placeholder text).
+ *
+ * @example
+ * ```html
+ * <mat-form-field>
+ *   <mat-label>Assigned roles</mat-label>
+ *   <ymusrmgmt-list-field [value]="roles" [emptyLabel]="'None' | translate">
+ *     <ng-template let-role>
+ *       <ymt-badge [matTooltip]="role | roleTooltip">{{ role | roleLabel }}</ymt-badge>
+ *     </ng-template>
+ *   </ymusrmgmt-list-field>
+ * </mat-form-field>
+ * ```
+ */
+class ListFieldComponent extends AbstractMatFormField {
+    /** The per-item template, projected as this component's content - receives each item as its
+     * implicit context (`<ng-template let-item>`). */
+    itemTemplate;
+    emptyLabel = '';
     /**
-     * SCIM tenant URL. Uses the backend-provided value if present; otherwise falls back to a
-     * client-side computation from the redirect URI: `{redirectUri up to and including /realms/{tenant}}/scim/v2`.
+     * The list to render. Declared here because the base doesn't do it itself:
+     * `AbstractMatFormField` marks `placeholder`/`required`/`disabled` as inputs but not `value`,
+     * since its other subclass (`yuv-autocomplete`) receives values through
+     * `ControlValueAccessor.writeValue` rather than a template binding. This control has no
+     * `NgControl`, so a binding is exactly what it needs - the accessor itself just forwards to the
+     * base, which keeps `empty` and `stateChanges` up to date.
      */
-    tenantUrl = computed(() => {
-        const scimTenantUrl = this.provider()?.scimProvisioning?.tenantUrl;
-        if (scimTenantUrl)
-            return scimTenantUrl;
-        const redirectUri = this.provider()?.redirectUri;
-        const match = redirectUri?.match(/^(.*\/realms\/[^/]+)\//);
-        return match ? `${match[1]}/scim/v2` : undefined;
-    }, ...(ngDevMode ? [{ debugName: "tenantUrl" }] : /* istanbul ignore next */ []));
-    displayName = new FormControl('Microsoft Entra ID', [Validators.required]);
-    discoveryUrl = new FormControl('', [Validators.required]);
-    clientId = new FormControl('', [Validators.required]);
-    clientSecret = new FormControl('', [Validators.required]);
-    form = this.#fb.group({
-        displayName: this.displayName,
-        discoveryUrl: this.discoveryUrl,
-        clientId: this.clientId,
-        clientSecret: this.clientSecret,
-    });
-    /** Only used to update the client secret of an already configured OIDC identity provider, e.g. after it was rotated at the IdP. Pre-filled with a fake value; the update button unlocks once the user edits it. */
-    newClientSecret = new FormControl('');
-    constructor() {
-        this.#loadProviderConfig();
-    }
-    /** Resets the client secret field back to its fake placeholder value, pristine, so the update button locks again. */
-    #resetNewClientSecretField() {
-        this.newClientSecret.setValue(FAKE_CLIENT_SECRET);
-        this.newClientSecret.markAsPristine();
-    }
-    #loadProviderConfig() {
-        this.#userManagementService.fetchOIDCProviderConfig().subscribe({
-            next: (provider) => {
-                this.provider.set(provider);
-                this.notConfigured.set(false);
-                this.#resetNewClientSecretField();
-                this.busy.set(false);
-            },
-            error: (e) => {
-                if (e.status === 404) {
-                    this.notConfigured.set(true);
-                }
-                else {
-                    this.error.set(this.#translateService.instant('yuv.app.user-management.settings.oidc.error.unknown'));
-                    this.#logger.error('Failed to fetch OIDC identity provider configuration', e);
-                }
-                this.busy.set(false);
-            },
-        });
-    }
-    configure() {
-        this.busy.set(true);
-        this.error.set(undefined);
-        const providerConfig = {
-            displayName: this.displayName.value?.trim() ?? '',
-            config: {
-                // The discovery URL must be sent as `metadataDescriptorUrl` — the backend resolves the
-                // OIDC endpoints (authorizationUrl, tokenUrl, jwksUrl, ...) from the discovery document.
-                metadataDescriptorUrl: this.discoveryUrl.value?.trim() ?? '',
-                clientId: this.clientId.value?.trim() ?? '',
-                clientSecret: this.clientSecret.value ?? '',
-                defaultScope: 'openid profile',
-            },
-        };
-        this.#userManagementService
-            .setOIDCProviderConfig(providerConfig)
-            .pipe(
-        // Re-fetch so the overlay shows exactly what a fresh GET delivers (secrets stripped etc.).
-        switchMap(() => this.#userManagementService.fetchOIDCProviderConfig()))
-            .subscribe({
-            next: (provider) => {
-                this.provider.set(provider);
-                this.notConfigured.set(false);
-                this.#resetNewClientSecretField();
-                this.busy.set(false);
-            },
-            error: (e) => {
-                // 422: the backend could not resolve the OIDC endpoints from the discovery URL
-                this.error.set(this.#translateService.instant(e.status === 422
-                    ? 'yuv.app.user-management.settings.oidc.configure.error.discovery'
-                    : 'yuv.app.user-management.settings.oidc.configure.error.unknown'));
-                this.#logger.error('Failed to configure OIDC identity provider', e);
-                this.busy.set(false);
-            },
-        });
-    }
-    /** Updates the client secret of the already configured OIDC identity provider, keeping all other config values unchanged. */
-    update() {
-        const oidcProvider = this.provider();
-        const newClientSecret = this.newClientSecret.value?.trim();
-        if (!oidcProvider || !this.newClientSecret.dirty || !newClientSecret)
-            return;
-        this.busy.set(true);
-        this.error.set(undefined);
-        const providerConfig = {
-            displayName: oidcProvider.displayName,
-            config: {
-                metadataDescriptorUrl: oidcProvider.config?.['metadataDescriptorUrl'] ?? '',
-                clientId: oidcProvider.config?.['clientId'] ?? '',
-                clientSecret: newClientSecret,
-                defaultScope: oidcProvider.config?.['defaultScope'] ?? '',
-            },
-        };
-        this.#userManagementService
-            .setOIDCProviderConfig(providerConfig)
-            .pipe(
-        // Re-fetch so the overlay shows exactly what a fresh GET delivers (secrets stripped etc.).
-        switchMap(() => this.#userManagementService.fetchOIDCProviderConfig()))
-            .subscribe({
-            next: (provider) => {
-                this.provider.set(provider);
-                this.#resetNewClientSecretField();
-                this.busy.set(false);
-                this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.update.success'));
-            },
-            error: (e) => {
-                this.error.set(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.update.error'));
-                this.#logger.error('Failed to update the OIDC identity provider client secret', e);
-                this.busy.set(false);
-            },
-        });
-    }
-    /** Asks the user to confirm, then deletes the OIDC identity provider configuration. */
-    delete() {
-        this.#userManagementService.deleteOIDCProviderConfig().subscribe({
-            next: (deleted) => {
-                if (deleted) {
-                    this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.delete.success'));
-                    this.#dialogRef.close();
-                }
-            },
-            error: (e) => {
-                this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.delete.error'));
-                this.#logger.error('Failed to delete OIDC identity provider configuration', e);
-            },
-        });
-    }
-    /** Handles the `cdkCopyToClipboardCopied` output, which reports whether the copy succeeded. */
-    onCopied(success) {
-        if (success) {
-            this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.copy.success'));
-        }
-        else {
-            this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.copy.error'));
-        }
-    }
-    close() {
-        this.#dialogRef.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: SettingsComponent, isStandalone: true, selector: "ymusrmgmt-settings", ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.settings.dialog.title' | translate\">\n  <main class=\"yuv-dialog-content\">\n    @if (notConfigured()) {\n      <p class=\"hint\">{{ 'yuv.app.user-management.settings.oidc.notConfigured' | translate }}</p>\n      <form [formGroup]=\"form\">\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.displayName' | translate }}</mat-label>\n          <input matInput [formControl]=\"displayName\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.discoveryUrl' | translate }}</mat-label>\n          <input matInput [formControl]=\"discoveryUrl\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.clientId' | translate }}</mat-label>\n          <input matInput [formControl]=\"clientId\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.clientSecret' | translate }}</mat-label>\n          <input matInput [formControl]=\"clientSecret\" type=\"password\" autocomplete=\"new-password\" />\n        </mat-form-field>\n      </form>\n    } @else if (provider(); as oidcProvider) {\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.displayName' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.displayName || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.discoveryUrl' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.config?.['metadataDescriptorUrl'] || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.clientId' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.config?.['clientId'] || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.clientSecret' | translate }}</mat-label>\n        <input matInput [formControl]=\"newClientSecret\" type=\"password\" autocomplete=\"new-password\" />\n      </mat-form-field>\n      @if (oidcProvider.redirectUri; as redirectUri) {\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.redirectUri' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"redirectUri\" />\n          <button\n            matSuffix\n            mat-icon-button\n            class=\"copy-button\"\n            type=\"button\"\n            [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n            [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n            [cdkCopyToClipboard]=\"redirectUri\"\n            (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n            <mat-icon>content_copy</mat-icon>\n          </button>\n        </mat-form-field>\n      }\n\n      @if (oidcProvider.scimProvisioning; as scimProvisioning) {\n        <h4>{{ 'yuv.app.user-management.settings.oidc.section.provisioning' | translate }}</h4>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.tenantUrl' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"tenantUrl() || '\u2014'\" />\n          @if (tenantUrl(); as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.tokenUrl' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.tokenEndpoint || '\u2014'\" />\n          @if (scimProvisioning.tokenEndpoint; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.clientName' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.clientId || '\u2014'\" />\n          @if (scimProvisioning.clientId; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.clientSecret' | translate }}</mat-label>\n          <input matInput type=\"password\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.clientSecret || '\u2014'\" />\n          @if (scimProvisioning.clientSecret; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n      }\n    }\n\n    @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    @if (provider()) {\n      <button ymtButton=\"danger\" class=\"delete-button\" [disabled]=\"busy()\" (click)=\"delete()\">\n        {{ 'yuv.app.user-management.settings.oidc.action.delete.label' | translate }}\n      </button>\n    }\n    <button [ymtButton]=\"notConfigured() ? 'secondary' : 'primary'\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.settings.action.button.close' | translate }}\n    </button>\n    @if (notConfigured()) {\n      <button ymtButton=\"primary\" [disabled]=\"busy() || form.invalid\" (click)=\"configure()\">\n        {{ 'yuv.app.user-management.settings.action.button.configure' | translate }}\n      </button>\n    } @else if (provider()) {\n      <button ymtButton=\"secondary\" [disabled]=\"busy() || !newClientSecret.dirty || !newClientSecret.value?.trim()\" (click)=\"update()\">\n        {{ 'yuv.app.user-management.settings.oidc.action.update.label' | translate }}\n      </button>\n    }\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{padding:var(--ymt-spacing-m);min-height:120px}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0}:host main h4{margin:var(--ymt-spacing-m) 0 var(--ymt-spacing-s)}:host footer .delete-button{margin-inline-end:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i2.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SettingsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ymusrmgmt-settings', standalone: true, imports: [...modules$4, ...components$4], template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.settings.dialog.title' | translate\">\n  <main class=\"yuv-dialog-content\">\n    @if (notConfigured()) {\n      <p class=\"hint\">{{ 'yuv.app.user-management.settings.oidc.notConfigured' | translate }}</p>\n      <form [formGroup]=\"form\">\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.displayName' | translate }}</mat-label>\n          <input matInput [formControl]=\"displayName\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.discoveryUrl' | translate }}</mat-label>\n          <input matInput [formControl]=\"discoveryUrl\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.clientId' | translate }}</mat-label>\n          <input matInput [formControl]=\"clientId\" type=\"text\" />\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.clientSecret' | translate }}</mat-label>\n          <input matInput [formControl]=\"clientSecret\" type=\"password\" autocomplete=\"new-password\" />\n        </mat-form-field>\n      </form>\n    } @else if (provider(); as oidcProvider) {\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.displayName' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.displayName || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.discoveryUrl' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.config?.['metadataDescriptorUrl'] || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.clientId' | translate }}</mat-label>\n        <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"oidcProvider.config?.['clientId'] || '\u2014'\" />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.settings.oidc.configure.property.clientSecret' | translate }}</mat-label>\n        <input matInput [formControl]=\"newClientSecret\" type=\"password\" autocomplete=\"new-password\" />\n      </mat-form-field>\n      @if (oidcProvider.redirectUri; as redirectUri) {\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.property.redirectUri' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"redirectUri\" />\n          <button\n            matSuffix\n            mat-icon-button\n            class=\"copy-button\"\n            type=\"button\"\n            [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n            [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n            [cdkCopyToClipboard]=\"redirectUri\"\n            (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n            <mat-icon>content_copy</mat-icon>\n          </button>\n        </mat-form-field>\n      }\n\n      @if (oidcProvider.scimProvisioning; as scimProvisioning) {\n        <h4>{{ 'yuv.app.user-management.settings.oidc.section.provisioning' | translate }}</h4>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.tenantUrl' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"tenantUrl() || '\u2014'\" />\n          @if (tenantUrl(); as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.tokenUrl' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.tokenEndpoint || '\u2014'\" />\n          @if (scimProvisioning.tokenEndpoint; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.clientName' | translate }}</mat-label>\n          <input matInput type=\"text\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.clientId || '\u2014'\" />\n          @if (scimProvisioning.clientId; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        <mat-form-field class=\"yuv-form-field\">\n          <mat-label>{{ 'yuv.app.user-management.settings.oidc.provisioning.property.clientSecret' | translate }}</mat-label>\n          <input matInput type=\"password\" readonly [attr.tabindex]=\"-1\" [value]=\"scimProvisioning.clientSecret || '\u2014'\" />\n          @if (scimProvisioning.clientSecret; as value) {\n            <button\n              matSuffix\n              mat-icon-button\n              class=\"copy-button\"\n              type=\"button\"\n              [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n              [cdkCopyToClipboard]=\"value\"\n              (cdkCopyToClipboardCopied)=\"onCopied($event)\">\n              <mat-icon>content_copy</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n      }\n    }\n\n    @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    @if (provider()) {\n      <button ymtButton=\"danger\" class=\"delete-button\" [disabled]=\"busy()\" (click)=\"delete()\">\n        {{ 'yuv.app.user-management.settings.oidc.action.delete.label' | translate }}\n      </button>\n    }\n    <button [ymtButton]=\"notConfigured() ? 'secondary' : 'primary'\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.settings.action.button.close' | translate }}\n    </button>\n    @if (notConfigured()) {\n      <button ymtButton=\"primary\" [disabled]=\"busy() || form.invalid\" (click)=\"configure()\">\n        {{ 'yuv.app.user-management.settings.action.button.configure' | translate }}\n      </button>\n    } @else if (provider()) {\n      <button ymtButton=\"secondary\" [disabled]=\"busy() || !newClientSecret.dirty || !newClientSecret.value?.trim()\" (click)=\"update()\">\n        {{ 'yuv.app.user-management.settings.oidc.action.update.label' | translate }}\n      </button>\n    }\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{padding:var(--ymt-spacing-m);min-height:120px}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0}:host main h4{margin:var(--ymt-spacing-m) 0 var(--ymt-spacing-s)}:host footer .delete-button{margin-inline-end:auto}\n"] }]
-        }], ctorParameters: () => [] });
-
-class YuvUserManagementComponent {
-    #shell = inject(ShellService);
-    #titleService = inject(Title);
-    #translateService = inject(TranslateService);
-    #router = inject(Router);
-    #activatedRoute = inject(ActivatedRoute);
-    #dialog = inject(MatDialog);
-    #app = this.#shell.getApp(APP_ID);
-    appName = this.#app?.title;
-    icons = APP_ICONS;
-    views = [
-        { id: 'users', title: 'yuv.app.user-management.navigation.users.label', link: 'users', tooltip: 'yuv.app.user-management.navigation.users.tooltip' },
-        { id: 'groups', title: 'yuv.app.user-management.navigation.groups.label', link: 'groups', tooltip: 'yuv.app.user-management.navigation.groups.tooltip' },
-    ];
-    activeLink = this.views[0].link;
+    set value(items) {
+        super.value = items;
+    }
+    get value() {
+        return super.value;
+    }
+    /** Nothing focusable/labelable lives inside by default - there's no native control for a
+     * `<label for>` to point at, so automatic labeling would just be wrong (and Material would warn
+     * about it). An item template with its own focusable content (e.g. a clickable group badge)
+     * still gets focus/click normally - this only affects the form field's own label association. */
+    disableAutomaticLabeling = true;
+    /** Ids of any `mat-hint`/`mat-error` describing this control, reflected onto the host by the
+     * `aria-describedby` binding above - see `setDescribedByIds`. */
+    describedBy = '';
     constructor() {
-        this.#router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((e) => {
-            const view = this.views.find(v => e.urlAfterRedirects.includes('/' + v.link));
-            if (view)
-                this.activeLink = view.link;
-        });
-    }
-    ngOnInit() {
-        const translatedTitle = this.appName.startsWith('yuv.')
-            ? this.#translateService.instant(this.appName)
-            : this.appName;
-        this.#titleService.setTitle(translatedTitle);
-    }
-    navigate(link) {
-        this.#router.navigate([link], { relativeTo: this.#activatedRoute });
-    }
-    openSettings() {
-        this.#dialog.open(SettingsComponent, {
-            width: '600px',
-            maxWidth: '90vw',
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: YuvUserManagementComponent, isStandalone: true, selector: "ymusrmgmt-root", ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"actions\">\n  <div class=\"usrmgmt-header-actions\">\n    <mat-button-toggle-group [value]=\"activeLink\" (change)=\"navigate($event.value)\" hideSingleSelectionIndicator>\n      @for (view of views; track view.id) {\n        <mat-button-toggle [value]=\"view.link\" [matTooltip]=\"view.tooltip | translate\">{{ view.title | translate }}</mat-button-toggle>\n      }\n    </mat-button-toggle-group>\n    <button\n      mat-icon-button\n      class=\"usrmgmt-settings-button\"\n      [matTooltip]=\"'yuv.app.user-management.navigation.settings.tooltip' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.navigation.settings.label' | translate\"\n      (click)=\"openSettings()\">\n      <mat-icon>{{ icons.actionSettings }}</mat-icon>\n    </button>\n  </div>\n</ng-template>\n\n<main class=\"usrmgmt-main__content\" [attr.aria-label]=\"'yuv.app.user-management.content.aria.label' | translate\">\n  <router-outlet></router-outlet>\n</main>\n\n<router-outlet name=\"modal\"></router-outlet>\n", styles: [":host{display:flex;flex-flow:column;height:100%}:host .usrmgmt-main__content{flex:1;overflow-y:hidden}.usrmgmt-header-actions{display:flex;align-items:center;width:100%}.usrmgmt-header-actions .usrmgmt-settings-button{margin-inline-start:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i6.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+        super();
+        // The base starts every instance at `id: ''`, and `mat-form-field` needs a unique one to
+        // reference this control from its label.
+        this.id = `ymusrmgmt-list-field-${nextId++}`;
+        // Opts out of the base's `onContainerClick`, which forwards a click anywhere in the form field
+        // to the first focusable element inside the control. For a read-only list that would mean
+        // clicking the field's padding jumps focus onto the first group badge - a plain read-only
+        // field does nothing on such a click, and so does this one. `focusHandled` is the base's own
+        // flag for "the subclass manages its own focus", so this needs no override.
+        this.focusHandled.set(true);
+    }
+    /** The base's implementation is an empty stub (its body is commented out), so `aria-describedby`
+     * has to be wired here or a `mat-hint`/`mat-error` alongside this control would never be
+     * announced. Harmless today - no usage has either - but it would be a silent trap later. */
+    setDescribedByIds(ids) {
+        this.describedBy = ids.join(' ');
+    }
+    /** The base exposes its teardown as `onNgOnDestroy`, not as a lifecycle hook of its own, so it
+     * only runs if a subclass calls it - without this, `stateChanges` would never complete. */
+    ngOnDestroy() {
+        this.onNgOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ListFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: ListFieldComponent, isStandalone: true, selector: "ymusrmgmt-list-field", inputs: { emptyLabel: "emptyLabel", value: "value" }, host: { properties: { "id": "id", "attr.aria-describedby": "describedBy || null" } }, providers: [{ provide: MatFormFieldControl, useExisting: ListFieldComponent }], queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (value && value.length) {\n<div class=\"list-field-items\">\n  @for (item of value; track item) {\n  <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n  }\n</div>\n} @else {\n<span class=\"empty\">{{ emptyLabel }}</span>\n}\n", styles: [":host{display:block}.list-field-items{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-s) 0;overflow:hidden}.empty{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUserManagementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: ListFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymusrmgmt-root', standalone: true, imports: [
-                        MatButtonModule,
-                        MatButtonToggleModule,
-                        MatIconModule,
-                        MatTooltipModule,
-                        RouterModule,
-                        TranslatePipe,
-                        YmtPanesModule,
-                        YuvClientShellModule,
-                    ], template: "<ng-template yuvAppHeaderSlot=\"actions\">\n  <div class=\"usrmgmt-header-actions\">\n    <mat-button-toggle-group [value]=\"activeLink\" (change)=\"navigate($event.value)\" hideSingleSelectionIndicator>\n      @for (view of views; track view.id) {\n        <mat-button-toggle [value]=\"view.link\" [matTooltip]=\"view.tooltip | translate\">{{ view.title | translate }}</mat-button-toggle>\n      }\n    </mat-button-toggle-group>\n    <button\n      mat-icon-button\n      class=\"usrmgmt-settings-button\"\n      [matTooltip]=\"'yuv.app.user-management.navigation.settings.tooltip' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.navigation.settings.label' | translate\"\n      (click)=\"openSettings()\">\n      <mat-icon>{{ icons.actionSettings }}</mat-icon>\n    </button>\n  </div>\n</ng-template>\n\n<main class=\"usrmgmt-main__content\" [attr.aria-label]=\"'yuv.app.user-management.content.aria.label' | translate\">\n  <router-outlet></router-outlet>\n</main>\n\n<router-outlet name=\"modal\"></router-outlet>\n", styles: [":host{display:flex;flex-flow:column;height:100%}:host .usrmgmt-main__content{flex:1;overflow-y:hidden}.usrmgmt-header-actions{display:flex;align-items:center;width:100%}.usrmgmt-header-actions .usrmgmt-settings-button{margin-inline-start:auto}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'ymusrmgmt-list-field', standalone: true, imports: [NgTemplateOutlet], providers: [{ provide: MatFormFieldControl, useExisting: ListFieldComponent }], host: {
+                        '[id]': 'id',
+                        '[attr.aria-describedby]': 'describedBy || null',
+                    }, template: "@if (value && value.length) {\n<div class=\"list-field-items\">\n  @for (item of value; track item) {\n  <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n  }\n</div>\n} @else {\n<span class=\"empty\">{{ emptyLabel }}</span>\n}\n", styles: [":host{display:block}.list-field-items{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ymt-spacing-xs);padding:var(--ymt-spacing-s) 0;overflow:hidden}.empty{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { itemTemplate: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], emptyLabel: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
 
 const ROLE_KEY_PREFIX = 'role:';
 /** Localized role name, falling back to the technical name when no `_label` entry exists. */
@@ -484,10 +437,10 @@ class RoleLabelPipe {
     transform(role) {
         return resolveRoleLabel(this.#localization, role);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RoleLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: RoleLabelPipe, isStandalone: true, name: "roleLabel" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RoleLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: RoleLabelPipe, isStandalone: true, name: "roleLabel" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RoleLabelPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RoleLabelPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'roleLabel', standalone: true }]
         }] });
@@ -496,10 +449,10 @@ class RoleTooltipPipe {
     transform(role) {
         return resolveRoleTooltip(this.#localization, role);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RoleTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: RoleTooltipPipe, isStandalone: true, name: "roleTooltip" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RoleTooltipPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: RoleTooltipPipe, isStandalone: true, name: "roleTooltip" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RoleTooltipPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RoleTooltipPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'roleTooltip', standalone: true }]
         }] });
@@ -510,36 +463,90 @@ class SortRolesByLabelPipe {
             return [];
         return [...roles].sort((a, b) => resolveRoleLabel(this.#localization, a).localeCompare(resolveRoleLabel(this.#localization, b)));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SortRolesByLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: SortRolesByLabelPipe, isStandalone: true, name: "sortRolesByLabel" });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SortRolesByLabelPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: SortRolesByLabelPipe, isStandalone: true, name: "sortRolesByLabel" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SortRolesByLabelPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SortRolesByLabelPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'sortRolesByLabel', standalone: true }]
         }] });
 
 class UserDetailsComponent {
-    userService;
-    formBuilder;
+    #userService = inject(YuvUserManagementService);
+    #logger = inject(Logger);
+    #notificationService = inject(NotificationService);
+    #translateService = inject(TranslateService);
+    #router = inject(Router);
+    icons = APP_ICONS;
+    /** The row the pane header is built from - available synchronously from the table selection, so the header doesn't wait on `userDetails`. */
+    user = input(undefined, ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    /** Roles granted by the group currently scoping the page's user list (empty when viewing "All users"), used to highlight which of the user's inherited roles come from it specifically. */
+    groupRoles = input([], ...(ngDevMode ? [{ debugName: "groupRoles" }] : /* istanbul ignore next */ []));
+    /** Forwarded to the internal `ymt-pane`'s top bar - see `YmtPaneComponent.topBarActions`. */
+    topBarActions = input(...(ngDevMode ? [undefined, { debugName: "topBarActions" }] : /* istanbul ignore next */ []));
+    /** Emitted with the displayed user when the header's edit action is triggered - editing itself is owned by the page, this only surfaces the trigger. */
+    editUser = output();
+    /** Groups/roles overview content - fetched separately since it isn't available on the plain table row. */
     userDetails = signal(undefined, ...(ngDevMode ? [{ debugName: "userDetails" }] : /* istanbul ignore next */ []));
-    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
-                });
+    busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    /** Only reloads `userDetails` when the id actually changes, not on every new object reference for the same user. */
+    #userId = computed(() => this.user()?.id, ...(ngDevMode ? [{ debugName: "#userId" }] : /* istanbul ignore next */ []));
+    /** Groups the user belongs to, alphabetically - the raw `groups` array has no guaranteed order. */
+    sortedGroups = computed(() => [...(this.userDetails()?.groups ?? [])].sort((a, b) => a.localeCompare(b)), ...(ngDevMode ? [{ debugName: "sortedGroups" }] : /* istanbul ignore next */ []));
+    /** Roles assigned to the user directly. */
+    directRoles = computed(() => this.userDetails()?.roles ?? [], ...(ngDevMode ? [{ debugName: "directRoles" }] : /* istanbul ignore next */ []));
+    /** Roles the user only holds through group membership - present in `effectiveRoles` but not directly assigned. */
+    inheritedRoles = computed(() => {
+        const details = this.userDetails();
+        if (!details) {
+            return [];
+        }
+        const direct = new Set(details.roles);
+        return details.effectiveRoles.filter((role) => !direct.has(role));
+    }, ...(ngDevMode ? [{ debugName: "inheritedRoles" }] : /* istanbul ignore next */ []));
+    /** Fast lookup for `isFromCurrentGroup` - which of `groupRoles` (the currently scoped group's roles) is being checked per inherited-role chip. */
+    #currentGroupRoles = computed(() => new Set(this.groupRoles()), ...(ngDevMode ? [{ debugName: "#currentGroupRoles" }] : /* istanbul ignore next */ []));
+    /** Whether an inherited role is granted by the group currently scoping the page's user list, rather than some other group the user belongs to. */
+    isFromCurrentGroup(role) {
+        return this.#currentGroupRoles().has(role);
+    }
+    /** Cached, shared across every `openGroup` call - group badges can be clicked repeatedly, and
+     * `fetchAllGroups()` paginates through the entire group directory, so re-fetching it fresh on
+     * every click would be wasteful once the first click already has it. Lazily created on first
+     * use rather than eagerly in the constructor, since most users never click a group badge. */
+    #allGroups$;
+    /** Navigates to the given group in the groups pane. `userDetails().groups` is just a list of
+     * group names (the backend's user-details endpoint doesn't return group ids), so the name has
+     * to be resolved against the full groups list first. */
+    openGroup(groupName) {
+        (this.#allGroups$ ??= this.#userService.fetchAllGroups().pipe(shareReplay(1))).subscribe({
+            next: (groups) => {
+                const group = groups.find((g) => g.name === groupName);
+                if (!group) {
+                    this.#logger.error(`Could not resolve group '${groupName}' to a group id`);
+                    return;
+                }
+                this.#router.navigate(['/identities'], { queryParams: { group: group.id } });
+            },
+            error: (e) => this.#logger.error(`Failed to resolve group '${groupName}'`, e),
+        });
+    }
+    constructor() {
+        effect(() => this.loadUserDetails(this.#userId()));
+    }
+    loadUserDetails(userId) {
+        if (userId) {
+            // Clears the previous user's groups/roles immediately rather than leaving them up (stale)
+            // until the new response arrives - `busy` alone wouldn't make that obvious enough.
+            this.userDetails.set(undefined);
+            this.busy.set(true);
+            this.#userService.getUserDetails(userId).subscribe({
+                next: (user) => this.userDetails.set(user),
+                error: (e) => {
+                    this.#logger.error(`Failed to load details for user with id '${userId}'`, e);
+                    this.busy.set(false);
+                },
+                complete: () => this.busy.set(false),
             });
         }
         else {
@@ -550,145 +557,49 @@ class UserDetailsComponent {
      * 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 }]
-        });
+        this.loadUserDetails(this.user()?.id);
+    }
+    /** Handles the `cdkCopyToClipboardCopied` output, which reports whether the copy succeeded. */
+    onCopied(success) {
+        if (success) {
+            this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.common.action.copy.success'));
+        }
+        else {
+            this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.common.action.copy.error'));
+        }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UserDetailsComponent, deps: [{ token: YuvUserManagementService }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: UserDetailsComponent, isStandalone: true, selector: "ymusrmgmt-user-details", inputs: { userId: "userId" }, ngImport: i0, template: "@let currentUserDetails = userDetails();\n@if (currentUserDetails) {\n  <form [formGroup]=\"userDetailsForm\" class=\"user-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.username' | translate)}}</mat-label>\n      <input matInput formControlName=\"username\" readonly>\n      <mat-icon matPrefix>account_box</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.email' | translate)}}</mat-label>\n      <input matInput formControlName=\"email\" readonly>\n      <mat-icon matPrefix>email</mat-icon>\n    </mat-form-field>              \n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.firstname' | translate)}}</mat-label>\n      <input matInput formControlName=\"firstName\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.lastname' | translate)}}</mat-label>\n      <input matInput formControlName=\"lastName\" readonly>\n    </mat-form-field>\n    <mat-form-field class=\"groups-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.groups' | translate)}}</mat-label>\n        <mat-chip-grid #groupChipGrid>\n          @if (currentUserDetails.groups) {\n            @for (group of currentUserDetails.groups.sort(); track group) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{group}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"groupChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>\n    <mat-form-field class=\"roles-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentUserDetails.effectiveRoles) {\n          @for (role of currentUserDetails.effectiveRoles | sortRolesByLabel; track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentUserDetails.roles.indexOf(role) === -1\" [matTooltip]=\"role | roleTooltip\"><div class=\"chip\">{{role | roleLabel}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field>\n    <mat-slide-toggle formControlName=\"enabled\">\n              {{ userDetailsForm.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) :\n              ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n    </mat-slide-toggle>           \n  </form>\n}", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}:host .user-details-form .groups-field mat-chip-grid,:host .user-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }, { kind: "pipe", type: SortRolesByLabelPipe, name: "sortRolesByLabel" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: UserDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: UserDetailsComponent, isStandalone: true, selector: "ymusrmgmt-user-details", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, groupRoles: { classPropertyName: "groupRoles", publicName: "groupRoles", isSignal: true, isRequired: false, transformFunction: null }, topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { editUser: "editUser" }, ngImport: i0, template: "@let displayUser = user(); @let detailsTitle = 'yuv.app.user-management.users.label.details.title' |\ntranslate; @if (displayUser) {\n<ymt-pane [topBarActions]=\"topBarActions()\" role=\"region\" [attr.aria-label]=\"detailsTitle\">\n  <ymt-pane-header\n    [icon]=\"'badge'\"\n    [title]=\"'yuv.app.user-management.users.label.details.title' | translate\"\n    [subtitle]=\"displayUser.username\"\n    [actions]=\"headerActions\"\n    [badges]=\"badges\"\n  ></ymt-pane-header>\n  <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n    @let currentUserDetails = userDetails(); @if (currentUserDetails) {\n    <form class=\"properties-form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.id' | translate }}</mat-label>\n        <input\n          readonly\n          matInput\n          type=\"text\"\n          [value]=\"displayUser.id\"\n          [attr.tabindex]=\"-1\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.id' | translate\"\n        />\n        <button\n          matSuffix\n          class=\"copy-button\"\n          type=\"button\"\n          [matTooltip]=\"'yuv.app.user-management.common.action.copy.label' | translate\"\n          [attr.aria-label]=\"'yuv.app.user-management.common.action.copy.label' | translate\"\n          [cdkCopyToClipboard]=\"displayUser.id\"\n          (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n        >\n          <mat-icon>content_copy</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.email' | translate }}</mat-label>\n        <input\n          readonly\n          matInput\n          type=\"text\"\n          [value]=\"currentUserDetails.email\"\n          [attr.tabindex]=\"-1\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.firstname' | translate }}</mat-label>\n        <input\n          readonly\n          matInput\n          type=\"text\"\n          [value]=\"displayUser.firstName ?? ''\"\n          [attr.tabindex]=\"-1\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.lastname' | translate }}</mat-label>\n        <input\n          readonly\n          matInput\n          type=\"text\"\n          [value]=\"displayUser.lastName ?? ''\"\n          [attr.tabindex]=\"-1\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\n          'yuv.app.user-management.users.label.details.roles.direct.title' | translate\n        }}</mat-label>\n        <ymusrmgmt-list-field\n          [value]=\"directRoles() | sortRolesByLabel\"\n          [emptyLabel]=\"\n            'yuv.app.user-management.users.label.details.roles.direct.empty' | translate\n          \"\n        >\n          <ng-template let-role>\n            <ymt-badge class=\"role-badge\" severity=\"primary\" [matTooltip]=\"role | roleTooltip\">\n              <span class=\"badge-label\">{{ role | roleLabel }}</span>\n            </ymt-badge>\n          </ng-template>\n        </ymusrmgmt-list-field>\n      </mat-form-field>\n\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\n          'yuv.app.user-management.users.label.details.roles.inherited.title' | translate\n        }}</mat-label>\n        <ymusrmgmt-list-field\n          [value]=\"inheritedRoles() | sortRolesByLabel\"\n          [emptyLabel]=\"\n            'yuv.app.user-management.users.label.details.roles.inherited.empty' | translate\n          \"\n        >\n          <ng-template let-role>\n            @let fromCurrentGroup = isFromCurrentGroup(role); @let tooltipText = role | roleTooltip;\n            <ymt-badge\n              class=\"role-badge\"\n              [severity]=\"fromCurrentGroup ? 'primary' : 'neutral'\"\n              [outline]=\"true\"\n              [matTooltip]=\"\n                fromCurrentGroup\n                  ? ('yuv.app.user-management.users.label.details.roles.inherited.currentGroup.tooltip'\n                      | translate) + (tooltipText ? ' \u2013 ' + tooltipText : '')\n                  : tooltipText\n              \"\n            >\n              @if (fromCurrentGroup) {\n              <mat-icon>group</mat-icon>\n              }\n              <span class=\"badge-label\">{{ role | roleLabel }}</span>\n            </ymt-badge>\n          </ng-template>\n        </ymusrmgmt-list-field>\n      </mat-form-field>\n\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\n          'yuv.app.user-management.users.label.details.groups.title' | translate\n        }}</mat-label>\n        <ymusrmgmt-list-field\n          [value]=\"sortedGroups()\"\n          [emptyLabel]=\"'yuv.app.user-management.users.label.details.groups.empty' | translate\"\n        >\n          <ng-template let-group>\n            <button\n              type=\"button\"\n              class=\"group-badge-button\"\n              (click)=\"openGroup(group)\"\n              [matTooltip]=\"\n                'yuv.app.user-management.users.label.details.groups.open.tooltip' | translate\n              \"\n              [attr.aria-label]=\"\n                ('yuv.app.user-management.users.label.details.groups.open.tooltip' | translate) +\n                ': ' +\n                group\n              \"\n            >\n              <ymt-badge severity=\"neutral\">\n                <mat-icon>group</mat-icon>\n                <span class=\"badge-label\">{{ group }}</span>\n              </ymt-badge>\n            </button>\n          </ng-template>\n        </ymusrmgmt-list-field>\n      </mat-form-field>\n    </form>\n    }\n  </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #headerActions>\n  <button\n    mat-icon-button\n    [matTooltip]=\"'yuv.app.user-management.users.action.edit.label' | translate\"\n    [attr.aria-label]=\"'yuv.app.user-management.users.action.edit.label' | translate\"\n    (click)=\"editUser.emit(displayUser)\"\n  >\n    <mat-icon>{{ icons.actionEditUser }}</mat-icon>\n  </button>\n</ng-template>\n\n<ng-template #badges>\n  @if (!displayUser.enabled) {\n  <ymt-badge\n    severity=\"neutral\"\n    [aura]=\"true\"\n    [matTooltip]=\"'yuv.app.user-management.users.property.disabled' | translate\"\n  >\n    <mat-icon aria-hidden=\"true\">{{ icons.stateInactive }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.users.property.disabled' | translate }}</span>\n  </ymt-badge>\n  } @if (displayUser.externallyManaged) {\n  <ymt-badge\n    severity=\"primary\"\n    [aura]=\"true\"\n    [matTooltip]=\"'yuv.app.user-management.users.label.identitySource.external.tooltip' | translate\"\n  >\n    <mat-icon>{{ icons.sourceExternal }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.users.property.identitySource.external' | translate }}</span>\n  </ymt-badge>\n  }\n</ng-template>\n} @else {\n<ymt-pane [topBarActions]=\"topBarActions()\" role=\"region\" [attr.aria-label]=\"detailsTitle\">\n  <ymt-pane-body>\n    <div class=\"details-empty-state\">\n      <mat-icon>person_search</mat-icon>\n      {{ 'yuv.app.user-management.users.label.details.empty' | translate }}\n    </div>\n  </ymt-pane-body>\n</ymt-pane>\n}\n", styles: ["ymt-badge{--ymt-badge-corner: var(--ymt-corner-xs);--badge-icon-size: var(--ymt-sizing-xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);min-width:0;max-width:100%}ymt-badge mat-icon{flex-shrink:0;font-size:var(--badge-icon-size);width:var(--badge-icon-size);height:var(--badge-icon-size)}ymt-badge .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host{display:block;height:100%;--main-area-padding: var(--ymt-spacing-m)}:host ymt-pane-body{display:flex;flex-flow:column;gap:var(--ymt-spacing-m)}:host .properties-form{display:flex;flex-direction:column;gap:var(--ymt-spacing-m)}:host .properties-form .yuv-form-field{width:100%}:host .properties-form .copy-button{border:none;padding:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:var(--ymt-sizing-xl);height:var(--ymt-sizing-xl);border-radius:var(--ymt-corner-full);color:var(--ymt-text-color-subtle)}:host .properties-form .copy-button:hover{background-color:var(--ymt-hover-background)}:host .properties-form .copy-button mat-icon{font-size:var(--ymt-sizing-m);width:var(--ymt-sizing-m);height:var(--ymt-sizing-m)}:host .role-badge{cursor:help}:host .group-badge-button{border:none;padding:0;background:transparent;cursor:pointer;display:inline-flex;font:inherit;border-radius:var(--ymt-badge-corner, var(--ymt-corner-xs));min-width:0;max-width:100%}:host .group-badge-button:hover ymt-badge{background-color:var(--ymt-hover-background)}:host .details-empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}:host .details-empty-state mat-icon{font-size:var(--ymt-sizing-xl);width:var(--ymt-sizing-xl);height:var(--ymt-sizing-xl)}\n"], dependencies: [{ kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "component", type: ListFieldComponent, selector: "ymusrmgmt-list-field", inputs: ["emptyLabel", "value"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: YmtBadge, selector: "ymt-badge", inputs: ["severity", "outline", "aura"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i7.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i7.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i7.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }, { kind: "pipe", type: SortRolesByLabelPipe, name: "sortRolesByLabel" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: UserDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: UserDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-user-details', imports: [
-                        MatChipsModule,
+                        BusyOverlayDirective,
+                        ClipboardModule,
+                        ListFieldComponent,
+                        MatButtonModule,
                         MatFormFieldModule,
-                        MatInputModule,
                         MatIconModule,
-                        MatCheckboxModule,
-                        MatSlideToggleModule,
+                        MatInputModule,
                         MatTooltipModule,
-                        ReactiveFormsModule,
                         TranslatePipe,
+                        YmtBadge,
+                        YmtPanesModule,
                         RoleLabelPipe,
                         RoleTooltipPipe,
-                        SortRolesByLabelPipe
-                    ], template: "@let currentUserDetails = userDetails();\n@if (currentUserDetails) {\n  <form [formGroup]=\"userDetailsForm\" class=\"user-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.username' | translate)}}</mat-label>\n      <input matInput formControlName=\"username\" readonly>\n      <mat-icon matPrefix>account_box</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.email' | translate)}}</mat-label>\n      <input matInput formControlName=\"email\" readonly>\n      <mat-icon matPrefix>email</mat-icon>\n    </mat-form-field>              \n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.firstname' | translate)}}</mat-label>\n      <input matInput formControlName=\"firstName\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.users.object.property.lastname' | translate)}}</mat-label>\n      <input matInput formControlName=\"lastName\" readonly>\n    </mat-form-field>\n    <mat-form-field class=\"groups-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.groups' | translate)}}</mat-label>\n        <mat-chip-grid #groupChipGrid>\n          @if (currentUserDetails.groups) {\n            @for (group of currentUserDetails.groups.sort(); track group) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{group}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"groupChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>\n    <mat-form-field class=\"roles-field\">\n      <mat-label>{{('yuv.app.user-management.users.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentUserDetails.effectiveRoles) {\n          @for (role of currentUserDetails.effectiveRoles | sortRolesByLabel; track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentUserDetails.roles.indexOf(role) === -1\" [matTooltip]=\"role | roleTooltip\"><div class=\"chip\">{{role | roleLabel}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field>\n    <mat-slide-toggle formControlName=\"enabled\">\n              {{ userDetailsForm.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) :\n              ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n    </mat-slide-toggle>           \n  </form>\n}", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .user-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .user-details-form mat-chip-row{overflow:hidden}:host .user-details-form .groups-field mat-chip-grid,:host .user-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: YuvUserManagementService }, { type: i1.FormBuilder }], propDecorators: { userId: [{
-                type: Input
-            }] } });
-
-const components$3 = [BusyOverlayDirective, YmtButtonDirective, DialogComponent];
-const modules$3 = [
-    CommonModule,
-    ReactiveFormsModule,
-    TranslatePipe,
-    MatFormFieldModule,
-    MatSlideToggleModule,
-    MatInputModule
-];
-class CreateUserComponent {
-    #fb = inject(FormBuilder);
-    #userManagementService = inject(YuvUserManagementService);
-    #dialogRef = inject((MatDialogRef));
-    #translateService = inject(TranslateService);
-    #logger = inject(Logger);
-    busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
-    error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
-    username = new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(255), Validators.pattern('^[a-zA-Z0-9._-]*$')]);
-    email = new FormControl('', [Validators.required, Validators.email]);
-    firstname = new FormControl('', [Validators.minLength(1), Validators.maxLength(255), Validators.pattern("^[^#!<>&/%=;*§$()[\\]{}]*$")]);
-    lastname = new FormControl('', [Validators.minLength(1), Validators.maxLength(255), Validators.pattern("^[^#!<>&/%=;*§$()[\\]{}]*$")]);
-    enabled = new FormControl(true, []);
-    form = this.#fb.group({
-        username: this.username,
-        email: this.email,
-        firstname: this.firstname,
-        lastname: this.lastname,
-        enabled: this.enabled
-    });
-    changedInput = signal(undefined, ...(ngDevMode ? [{ debugName: "changedInput" }] : /* istanbul ignore next */ []));
-    disabledSubmit = linkedSignal({ ...(ngDevMode ? { debugName: "disabledSubmit" } : /* istanbul ignore next */ {}), source: this.changedInput,
-        computation: () => {
-            return this.busy() || this.form.invalid;
-        } });
-    createUser() {
-        let createdUserId;
-        const createParams = this.form.value;
-        this.busy.set(true);
-        this.error.set(undefined);
-        const createUserRequest = {
-            username: createParams.username,
-            email: createParams.email,
-            firstName: createParams.firstname ? createParams.firstname : null,
-            lastName: createParams.lastname ? createParams.lastname : null,
-            enabled: createParams.enabled,
-            roles: []
-        };
-        this.#userManagementService
-            .createUser(createUserRequest, true)
-            .subscribe({
-            error: (e) => {
-                switch (e.status) {
-                    case 409: {
-                        const errorMsg = JSON.parse(e.error).message;
-                        if (errorMsg === "User exists with same username") {
-                            this.error.set(this.#translateService.instant("yuv.app.user-management.users.action.create.error.usernameExists"));
-                        }
-                        else if (errorMsg === "User exists with same email") {
-                            this.error.set(this.#translateService.instant("yuv.app.user-management.users.action.create.error.emailExists"));
-                        }
-                        else {
-                            this.error.set(this.#translateService.instant("yuv.app.user-management.users.action.create.error.unknown"));
-                        }
-                        break;
-                    }
-                    default:
-                        this.error.set(this.#translateService.instant("yuv.app.user-management.users.action.create.error.unknown"));
-                }
-                this.#logger.error(`Failed to create user with username ${createUserRequest.username}`, e);
-                this.busy.set(false);
-            },
-            next: (userId) => {
-                createdUserId = userId;
-            },
-            complete: () => {
-                this.busy.set(false);
-                this.#dialogRef.close(createdUserId);
-            },
-        });
-    }
-    close() {
-        this.#dialogRef.close();
-    }
-    ngAfterViewInit() {
-        this.form.valueChanges.subscribe((value) => {
-            this.changedInput.set(value);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CreateUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CreateUserComponent, isStandalone: true, selector: "ymusrmgmt-create-user", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstname\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastname\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"yuv-form-field\" id=\"enabledPropDiv\">\n        <mat-slide-toggle formControlName=\"enabled\">\n          {{ form.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) : ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n        </mat-slide-toggle>\n      </div>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createUser()\">\n      {{ 'yuv.app.user-management.users.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CreateUserComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ymusrmgmt-create-user', standalone: true, imports: [...modules$3, ...components$3], host: {
-                        '[class.busy]': '!busy()',
-                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstname\" type=\"text\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastname\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"yuv-form-field\" id=\"enabledPropDiv\">\n        <mat-slide-toggle formControlName=\"enabled\">\n          {{ form.get('enabled')?.value ? ('yuv.app.user-management.users.object.property.enabled' | translate) : ('yuv.app.user-management.users.object.property.disabled' | translate) }}\n        </mat-slide-toggle>\n      </div>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createUser()\">\n      {{ 'yuv.app.user-management.users.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"] }]
-        }] });
+                        SortRolesByLabelPipe,
+                    ], template: "@let displayUser = user(); @let detailsTitle = 'yuv.app.user-management.users.label.details.title' |\ntranslate; @if (displayUser) {\n<ymt-pane [topBarActions]=\"topBarActions()\" role=\"region\" [attr.aria-label]=\"detailsTitle\">\n  <ymt-pane-header\n    [icon]=\"'badge'\"\n    [title]=\"'yuv.app.user-management.users.label.details.title' | translate\"\n    [subtitle]=\"displayUser.username\"\n    [actions]=\"headerActions\"\n    [badges]=\"badges\"\n  ></ymt-pane-header>\n  <ymt-pane-body [yuvBusyOverlay]=\"busy()\">\n    @let currentUserDetails = userDetails(); @if (currentUserDetails) {\n    <form class=\"properties-form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.id' | translate }}</mat-label>\n        <input\n          readonly\n          matInput\n          type=\"text\"\n          [value]=\"displayUser.id\"\n          [attr.tabindex]=\"-1\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.id' | translate\"\n        />\n        <button\n          matSuffix\n          class=\"copy-button\"\n          type=\"button\"\n          [matTooltip]=\"'yuv.app.user-management.common.action.copy.label' | translate\"\n          [attr.aria-label]=\"'yuv.app.user-management.common.action.copy.label' | translate\"\n          [cdkCopyToClipboard]=\"displayUser.id\"\n          (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n        >\n          <mat-icon>content_copy</mat-icon>\n        </button>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.email' | translate }}</mat-label>\n        <input\n          readonly\n          matInput\n          type=\"text\"\n          [value]=\"currentUserDetails.email\"\n          [attr.tabindex]=\"-1\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.firstname' | translate }}</mat-label>\n        <input\n          readonly\n          matInput\n          type=\"text\"\n          [value]=\"displayUser.firstName ?? ''\"\n          [attr.tabindex]=\"-1\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.lastname' | translate }}</mat-label>\n        <input\n          readonly\n          matInput\n          type=\"text\"\n          [value]=\"displayUser.lastName ?? ''\"\n          [attr.tabindex]=\"-1\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n        />\n      </mat-form-field>\n\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\n          'yuv.app.user-management.users.label.details.roles.direct.title' | translate\n        }}</mat-label>\n        <ymusrmgmt-list-field\n          [value]=\"directRoles() | sortRolesByLabel\"\n          [emptyLabel]=\"\n            'yuv.app.user-management.users.label.details.roles.direct.empty' | translate\n          \"\n        >\n          <ng-template let-role>\n            <ymt-badge class=\"role-badge\" severity=\"primary\" [matTooltip]=\"role | roleTooltip\">\n              <span class=\"badge-label\">{{ role | roleLabel }}</span>\n            </ymt-badge>\n          </ng-template>\n        </ymusrmgmt-list-field>\n      </mat-form-field>\n\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\n          'yuv.app.user-management.users.label.details.roles.inherited.title' | translate\n        }}</mat-label>\n        <ymusrmgmt-list-field\n          [value]=\"inheritedRoles() | sortRolesByLabel\"\n          [emptyLabel]=\"\n            'yuv.app.user-management.users.label.details.roles.inherited.empty' | translate\n          \"\n        >\n          <ng-template let-role>\n            @let fromCurrentGroup = isFromCurrentGroup(role); @let tooltipText = role | roleTooltip;\n            <ymt-badge\n              class=\"role-badge\"\n              [severity]=\"fromCurrentGroup ? 'primary' : 'neutral'\"\n              [outline]=\"true\"\n              [matTooltip]=\"\n                fromCurrentGroup\n                  ? ('yuv.app.user-management.users.label.details.roles.inherited.currentGroup.tooltip'\n                      | translate) + (tooltipText ? ' \u2013 ' + tooltipText : '')\n                  : tooltipText\n              \"\n            >\n              @if (fromCurrentGroup) {\n              <mat-icon>group</mat-icon>\n              }\n              <span class=\"badge-label\">{{ role | roleLabel }}</span>\n            </ymt-badge>\n          </ng-template>\n        </ymusrmgmt-list-field>\n      </mat-form-field>\n\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\n          'yuv.app.user-management.users.label.details.groups.title' | translate\n        }}</mat-label>\n        <ymusrmgmt-list-field\n          [value]=\"sortedGroups()\"\n          [emptyLabel]=\"'yuv.app.user-management.users.label.details.groups.empty' | translate\"\n        >\n          <ng-template let-group>\n            <button\n              type=\"button\"\n              class=\"group-badge-button\"\n              (click)=\"openGroup(group)\"\n              [matTooltip]=\"\n                'yuv.app.user-management.users.label.details.groups.open.tooltip' | translate\n              \"\n              [attr.aria-label]=\"\n                ('yuv.app.user-management.users.label.details.groups.open.tooltip' | translate) +\n                ': ' +\n                group\n              \"\n            >\n              <ymt-badge severity=\"neutral\">\n                <mat-icon>group</mat-icon>\n                <span class=\"badge-label\">{{ group }}</span>\n              </ymt-badge>\n            </button>\n          </ng-template>\n        </ymusrmgmt-list-field>\n      </mat-form-field>\n    </form>\n    }\n  </ymt-pane-body>\n</ymt-pane>\n\n<ng-template #headerActions>\n  <button\n    mat-icon-button\n    [matTooltip]=\"'yuv.app.user-management.users.action.edit.label' | translate\"\n    [attr.aria-label]=\"'yuv.app.user-management.users.action.edit.label' | translate\"\n    (click)=\"editUser.emit(displayUser)\"\n  >\n    <mat-icon>{{ icons.actionEditUser }}</mat-icon>\n  </button>\n</ng-template>\n\n<ng-template #badges>\n  @if (!displayUser.enabled) {\n  <ymt-badge\n    severity=\"neutral\"\n    [aura]=\"true\"\n    [matTooltip]=\"'yuv.app.user-management.users.property.disabled' | translate\"\n  >\n    <mat-icon aria-hidden=\"true\">{{ icons.stateInactive }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.users.property.disabled' | translate }}</span>\n  </ymt-badge>\n  } @if (displayUser.externallyManaged) {\n  <ymt-badge\n    severity=\"primary\"\n    [aura]=\"true\"\n    [matTooltip]=\"'yuv.app.user-management.users.label.identitySource.external.tooltip' | translate\"\n  >\n    <mat-icon>{{ icons.sourceExternal }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.users.property.identitySource.external' | translate }}</span>\n  </ymt-badge>\n  }\n</ng-template>\n} @else {\n<ymt-pane [topBarActions]=\"topBarActions()\" role=\"region\" [attr.aria-label]=\"detailsTitle\">\n  <ymt-pane-body>\n    <div class=\"details-empty-state\">\n      <mat-icon>person_search</mat-icon>\n      {{ 'yuv.app.user-management.users.label.details.empty' | translate }}\n    </div>\n  </ymt-pane-body>\n</ymt-pane>\n}\n", styles: ["ymt-badge{--ymt-badge-corner: var(--ymt-corner-xs);--badge-icon-size: var(--ymt-sizing-xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);min-width:0;max-width:100%}ymt-badge mat-icon{flex-shrink:0;font-size:var(--badge-icon-size);width:var(--badge-icon-size);height:var(--badge-icon-size)}ymt-badge .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host{display:block;height:100%;--main-area-padding: var(--ymt-spacing-m)}:host ymt-pane-body{display:flex;flex-flow:column;gap:var(--ymt-spacing-m)}:host .properties-form{display:flex;flex-direction:column;gap:var(--ymt-spacing-m)}:host .properties-form .yuv-form-field{width:100%}:host .properties-form .copy-button{border:none;padding:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:var(--ymt-sizing-xl);height:var(--ymt-sizing-xl);border-radius:var(--ymt-corner-full);color:var(--ymt-text-color-subtle)}:host .properties-form .copy-button:hover{background-color:var(--ymt-hover-background)}:host .properties-form .copy-button mat-icon{font-size:var(--ymt-sizing-m);width:var(--ymt-sizing-m);height:var(--ymt-sizing-m)}:host .role-badge{cursor:help}:host .group-badge-button{border:none;padding:0;background:transparent;cursor:pointer;display:inline-flex;font:inherit;border-radius:var(--ymt-badge-corner, var(--ymt-corner-xs));min-width:0;max-width:100%}:host .group-badge-button:hover ymt-badge{background-color:var(--ymt-hover-background)}:host .details-empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}:host .details-empty-state mat-icon{font-size:var(--ymt-sizing-xl);width:var(--ymt-sizing-xl);height:var(--ymt-sizing-xl)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], groupRoles: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRoles", required: false }] }], topBarActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "topBarActions", required: false }] }], editUser: [{ type: i0.Output, args: ["editUser"] }] } });
 
 class RolesSelectionComponent {
     #localization = inject(LocalizationService);
-    /** Orders roles by their localized label so the lists read naturally in the active language. */
-    #compareByLabel = (a, b) => resolveRoleLabel(this.#localization, a).localeCompare(resolveRoleLabel(this.#localization, b));
+    /** Orders roles by their localized label so the lists read naturally in the active language.
+     * Decorate-sort-undecorate: `resolveRoleLabel` is a `LocalizationService` lookup, and a plain
+     * comparator would re-resolve both operands on every one of the O(n log n) comparisons. */
+    #sortByLabel = (roles) => roles
+        .map((role) => [resolveRoleLabel(this.#localization, role), role])
+        .sort((a, b) => a[0].localeCompare(b[0]))
+        .map(([, role]) => role);
     allRoles = input.required(...(ngDevMode ? [{ debugName: "allRoles" }] : /* istanbul ignore next */ []));
     initialRoles = input.required(...(ngDevMode ? [{ debugName: "initialRoles" }] : /* istanbul ignore next */ []));
     rolesChange = output();
@@ -698,12 +609,17 @@ class RolesSelectionComponent {
     selectedAssigned = signal([], ...(ngDevMode ? [{ debugName: "selectedAssigned" }] : /* istanbul ignore next */ []));
     canAssign = computed(() => this.selectedAvailable().length > 0, ...(ngDevMode ? [{ debugName: "canAssign" }] : /* istanbul ignore next */ []));
     canRemove = computed(() => this.selectedAssigned().length > 0, ...(ngDevMode ? [{ debugName: "canRemove" }] : /* istanbul ignore next */ []));
+    /** Selection lookups for the two option lists. Both are read once per rendered option on every
+     * change-detection pass, so they're memoized `Set`s rather than an `Array#includes` scan each. */
+    #selectedAvailableSet = computed(() => new Set(this.selectedAvailable()), ...(ngDevMode ? [{ debugName: "#selectedAvailableSet" }] : /* istanbul ignore next */ []));
+    #selectedAssignedSet = computed(() => new Set(this.selectedAssigned()), ...(ngDevMode ? [{ debugName: "#selectedAssignedSet" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const all = this.allRoles();
             const initial = this.initialRoles();
-            this.assignedRoles.set([...initial].sort(this.#compareByLabel));
-            this.availableRoles.set(all.filter((role) => !initial.includes(role)).sort(this.#compareByLabel));
+            const initialSet = new Set(initial);
+            this.assignedRoles.set(this.#sortByLabel(initial));
+            this.availableRoles.set(this.#sortByLabel(all.filter((role) => !initialSet.has(role))));
             this.selectedAvailable.set([]);
             this.selectedAssigned.set([]);
         });
@@ -715,12 +631,27 @@ class RolesSelectionComponent {
     onAssignedSelectedChange(role, selected) {
         this.selectedAssigned.update((current) => selected ? [...current, role] : current.filter((r) => r !== role));
     }
+    /** Moves a single role from available to assigned, bypassing the selection/assign-button flow (e.g. on double-click). */
+    assignRole(role) {
+        this.availableRoles.update((roles) => roles.filter((r) => r !== role));
+        this.assignedRoles.update((roles) => this.#sortByLabel([...roles, role]));
+        this.selectedAvailable.update((current) => current.filter((r) => r !== role));
+        this.rolesChange.emit(this.assignedRoles());
+    }
+    /** Moves a single role from assigned to available, bypassing the selection/remove-button flow (e.g. on double-click). */
+    removeRole(role) {
+        this.assignedRoles.update((roles) => roles.filter((r) => r !== role));
+        this.availableRoles.update((roles) => this.#sortByLabel([...roles, role]));
+        this.selectedAssigned.update((current) => current.filter((r) => r !== role));
+        this.rolesChange.emit(this.assignedRoles());
+    }
     assignRoles() {
         const toAssign = this.selectedAvailable();
         if (toAssign.length === 0)
             return;
-        this.availableRoles.update((roles) => roles.filter((r) => !toAssign.includes(r)));
-        this.assignedRoles.update((roles) => [...roles, ...toAssign].sort(this.#compareByLabel));
+        const toAssignSet = new Set(toAssign);
+        this.availableRoles.update((roles) => roles.filter((r) => !toAssignSet.has(r)));
+        this.assignedRoles.update((roles) => this.#sortByLabel([...roles, ...toAssign]));
         this.selectedAvailable.set([]);
         this.rolesChange.emit(this.assignedRoles());
     }
@@ -728,8 +659,9 @@ class RolesSelectionComponent {
         const toRemove = this.selectedAssigned();
         if (toRemove.length === 0)
             return;
-        this.assignedRoles.update((roles) => roles.filter((r) => !toRemove.includes(r)));
-        this.availableRoles.update((roles) => [...roles, ...toRemove].sort(this.#compareByLabel));
+        const toRemoveSet = new Set(toRemove);
+        this.assignedRoles.update((roles) => roles.filter((r) => !toRemoveSet.has(r)));
+        this.availableRoles.update((roles) => this.#sortByLabel([...roles, ...toRemove]));
         this.selectedAssigned.set([]);
         this.rolesChange.emit(this.assignedRoles());
     }
@@ -737,7 +669,7 @@ class RolesSelectionComponent {
         const allAvailable = this.availableRoles();
         if (allAvailable.length === 0)
             return;
-        this.assignedRoles.update((roles) => [...roles, ...allAvailable].sort(this.#compareByLabel));
+        this.assignedRoles.update((roles) => this.#sortByLabel([...roles, ...allAvailable]));
         this.availableRoles.set([]);
         this.selectedAvailable.set([]);
         this.rolesChange.emit(this.assignedRoles());
@@ -746,21 +678,21 @@ class RolesSelectionComponent {
         const allAssigned = this.assignedRoles();
         if (allAssigned.length === 0)
             return;
-        this.availableRoles.update((roles) => [...roles, ...allAssigned].sort(this.#compareByLabel));
+        this.availableRoles.update((roles) => this.#sortByLabel([...roles, ...allAssigned]));
         this.assignedRoles.set([]);
         this.selectedAssigned.set([]);
         this.rolesChange.emit(this.assignedRoles());
     }
     isAvailableSelected(role) {
-        return this.selectedAvailable().includes(role);
+        return this.#selectedAvailableSet().has(role);
     }
     isAssignedSelected(role) {
-        return this.selectedAssigned().includes(role);
+        return this.#selectedAssignedSet().has(role);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RolesSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RolesSelectionComponent, isStandalone: true, selector: "ymusrmgmt-role-selection", inputs: { allRoles: { classPropertyName: "allRoles", publicName: "allRoles", isSignal: true, isRequired: true, transformFunction: null }, initialRoles: { classPropertyName: "initialRoles", publicName: "initialRoles", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { rolesChange: "rolesChange" }, ngImport: i0, template: "<div class=\"role-selector\">\n  <!-- Available Roles (Left) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.available' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #availableList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.available' | translate\">\n      @for (role of availableRoles(); track role) {\n        <mat-list-option\n          [value]=\"role\"\n          [matTooltip]=\"role | roleTooltip\"\n          [selected]=\"isAvailableSelected(role)\"\n          (selectedChange)=\"onAvailableSelectedChange(role, $event)\">\n          {{ role | roleLabel }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAvailable' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n\n  <!-- Control Buttons (Center) -->\n  <div class=\"control-buttons\">\n    <button\n      mat-icon-button\n      [disabled]=\"availableRoles().length === 0\"\n      (click)=\"assignAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.assignAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assignAll' | translate\">\n      <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canAssign()\"\n      (click)=\"assignRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.assign' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assign' | translate\">\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canRemove()\"\n      (click)=\"removeRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.remove' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.remove' | translate\">\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"assignedRoles().length === 0\"\n      (click)=\"removeAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.removeAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.removeAll' | translate\">\n      <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n  </div>\n\n  <!-- Assigned Roles (Right) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.assigned' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #assignedList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assigned' | translate\">\n      @for (role of assignedRoles(); track role) {\n        <mat-list-option\n          [value]=\"role\"\n          [matTooltip]=\"role | roleTooltip\"\n          [selected]=\"isAssignedSelected(role)\"\n          (selectedChange)=\"onAssignedSelectedChange(role, $event)\">\n          {{ role | roleLabel }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAssigned' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n</div>\n", styles: [".role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RolesSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: RolesSelectionComponent, isStandalone: true, selector: "ymusrmgmt-role-selection", inputs: { allRoles: { classPropertyName: "allRoles", publicName: "allRoles", isSignal: true, isRequired: true, transformFunction: null }, initialRoles: { classPropertyName: "initialRoles", publicName: "initialRoles", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { rolesChange: "rolesChange" }, ngImport: i0, template: "<div class=\"role-selector\">\n  <!-- Available Roles (Left) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.common.label.roles.available' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #availableList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.label.roles.available' | translate\"\n    >\n      @for (role of availableRoles(); track role) {\n      <mat-list-option\n        [value]=\"role\"\n        [matTooltip]=\"role | roleTooltip\"\n        [selected]=\"isAvailableSelected(role)\"\n        (selectedChange)=\"onAvailableSelectedChange(role, $event)\"\n        (dblclick)=\"assignRole(role)\"\n        (keydown.enter)=\"$event.stopPropagation(); assignRole(role)\"\n      >\n        {{ role | roleLabel }}\n      </mat-list-option>\n      } @empty {\n      <div class=\"empty-message\">\n        {{ 'yuv.app.user-management.common.label.roles.noAvailable' | translate }}\n      </div>\n      }\n    </mat-selection-list>\n  </div>\n\n  <!-- Control Buttons (Center) -->\n  <div class=\"control-buttons\">\n    <button\n      mat-icon-button\n      [disabled]=\"availableRoles().length === 0\"\n      (click)=\"assignAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.common.action.roles.assignAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.assignAll' | translate\"\n    >\n      <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canAssign()\"\n      (click)=\"assignRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.common.action.roles.assign' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.assign' | translate\"\n    >\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canRemove()\"\n      (click)=\"removeRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.common.action.roles.remove' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.remove' | translate\"\n    >\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"assignedRoles().length === 0\"\n      (click)=\"removeAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.common.action.roles.removeAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.removeAll' | translate\"\n    >\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.common.label.roles.assigned' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #assignedList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.label.roles.assigned' | translate\"\n    >\n      @for (role of assignedRoles(); track role) {\n      <mat-list-option\n        [value]=\"role\"\n        [matTooltip]=\"role | roleTooltip\"\n        [selected]=\"isAssignedSelected(role)\"\n        (selectedChange)=\"onAssignedSelectedChange(role, $event)\"\n        (dblclick)=\"removeRole(role)\"\n        (keydown.enter)=\"$event.stopPropagation(); removeRole(role)\"\n      >\n        {{ role | roleLabel }}\n      </mat-list-option>\n      } @empty {\n      <div class=\"empty-message\">\n        {{ 'yuv.app.user-management.common.label.roles.noAssigned' | translate }}\n      </div>\n      }\n    </mat-selection-list>\n  </div>\n</div>\n", styles: [".role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-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: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$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: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RolesSelectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: RolesSelectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ymusrmgmt-role-selection', imports: [
                         CommonModule,
@@ -771,19 +703,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         TranslatePipe,
                         RoleLabelPipe,
                         RoleTooltipPipe,
-                    ], standalone: true, template: "<div class=\"role-selector\">\n  <!-- Available Roles (Left) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.available' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #availableList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.available' | translate\">\n      @for (role of availableRoles(); track role) {\n        <mat-list-option\n          [value]=\"role\"\n          [matTooltip]=\"role | roleTooltip\"\n          [selected]=\"isAvailableSelected(role)\"\n          (selectedChange)=\"onAvailableSelectedChange(role, $event)\">\n          {{ role | roleLabel }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAvailable' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n\n  <!-- Control Buttons (Center) -->\n  <div class=\"control-buttons\">\n    <button\n      mat-icon-button\n      [disabled]=\"availableRoles().length === 0\"\n      (click)=\"assignAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.assignAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assignAll' | translate\">\n      <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canAssign()\"\n      (click)=\"assignRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.assign' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assign' | translate\">\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canRemove()\"\n      (click)=\"removeRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.remove' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.remove' | translate\">\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"assignedRoles().length === 0\"\n      (click)=\"removeAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.users.roles.removeAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.removeAll' | translate\">\n      <mat-icon>keyboard_double_arrow_left</mat-icon>\n    </button>\n  </div>\n\n  <!-- Assigned Roles (Right) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.users.roles.assigned' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #assignedList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.users.roles.assigned' | translate\">\n      @for (role of assignedRoles(); track role) {\n        <mat-list-option\n          [value]=\"role\"\n          [matTooltip]=\"role | roleTooltip\"\n          [selected]=\"isAssignedSelected(role)\"\n          (selectedChange)=\"onAssignedSelectedChange(role, $event)\">\n          {{ role | roleLabel }}\n        </mat-list-option>\n      }\n      @empty {\n        <div class=\"empty-message\">\n          {{ 'yuv.app.user-management.users.roles.noAssigned' | translate }}\n        </div>\n      }\n    </mat-selection-list>\n  </div>\n</div>\n", styles: [".role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;color:var(--ymt-text-color-subtle);font:var(--ymt-font-body-subtle)}\n"] }]
+                    ], standalone: true, template: "<div class=\"role-selector\">\n  <!-- Available Roles (Left) -->\n  <div class=\"role-list-container\">\n    <div class=\"role-list-header\">\n      {{ 'yuv.app.user-management.common.label.roles.available' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #availableList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.label.roles.available' | translate\"\n    >\n      @for (role of availableRoles(); track role) {\n      <mat-list-option\n        [value]=\"role\"\n        [matTooltip]=\"role | roleTooltip\"\n        [selected]=\"isAvailableSelected(role)\"\n        (selectedChange)=\"onAvailableSelectedChange(role, $event)\"\n        (dblclick)=\"assignRole(role)\"\n        (keydown.enter)=\"$event.stopPropagation(); assignRole(role)\"\n      >\n        {{ role | roleLabel }}\n      </mat-list-option>\n      } @empty {\n      <div class=\"empty-message\">\n        {{ 'yuv.app.user-management.common.label.roles.noAvailable' | translate }}\n      </div>\n      }\n    </mat-selection-list>\n  </div>\n\n  <!-- Control Buttons (Center) -->\n  <div class=\"control-buttons\">\n    <button\n      mat-icon-button\n      [disabled]=\"availableRoles().length === 0\"\n      (click)=\"assignAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.common.action.roles.assignAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.assignAll' | translate\"\n    >\n      <mat-icon>keyboard_double_arrow_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canAssign()\"\n      (click)=\"assignRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.common.action.roles.assign' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.assign' | translate\"\n    >\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"!canRemove()\"\n      (click)=\"removeRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.common.action.roles.remove' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.remove' | translate\"\n    >\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button\n      mat-icon-button\n      [disabled]=\"assignedRoles().length === 0\"\n      (click)=\"removeAllRoles()\"\n      [matTooltip]=\"'yuv.app.user-management.common.action.roles.removeAll' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.action.roles.removeAll' | translate\"\n    >\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.common.label.roles.assigned' | translate }}\n    </div>\n    <mat-selection-list\n      class=\"role-list\"\n      #assignedList\n      hideSingleSelectionIndicator=\"true\"\n      [attr.aria-label]=\"'yuv.app.user-management.common.label.roles.assigned' | translate\"\n    >\n      @for (role of assignedRoles(); track role) {\n      <mat-list-option\n        [value]=\"role\"\n        [matTooltip]=\"role | roleTooltip\"\n        [selected]=\"isAssignedSelected(role)\"\n        (selectedChange)=\"onAssignedSelectedChange(role, $event)\"\n        (dblclick)=\"removeRole(role)\"\n        (keydown.enter)=\"$event.stopPropagation(); removeRole(role)\"\n      >\n        {{ role | roleLabel }}\n      </mat-list-option>\n      } @empty {\n      <div class=\"empty-message\">\n        {{ 'yuv.app.user-management.common.label.roles.noAssigned' | translate }}\n      </div>\n      }\n    </mat-selection-list>\n  </div>\n</div>\n", styles: [".role-selector{display:flex;gap:var(--ymt-spacing-m);align-items:stretch;min-height:300px;padding:var(--ymt-spacing-xs) 0}.role-list-container{flex:1;display:flex;flex-direction:column;border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-xs);overflow:hidden;background-color:var(--ymt-surface-container-lowest);max-height:300px}.role-list-header{padding:var(--ymt-spacing-s) var(--ymt-spacing-m);background-color:var(--ymt-surface-container-high);color:var(--ymt-on-surface);font:var(--ymt-font-title-smallest);border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}.role-list{flex:1;overflow-y:auto;min-height:0}.role-list ::ng-deep .mat-mdc-list-option{font:var(--ymt-font-body-subtle);height:var(--ymt-sizing-l)}.role-list ::ng-deep .mdc-list-item__primary-text{font:var(--ymt-font-body-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.role-list ::ng-deep .mdc-checkbox{display:none}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true]{background-color:var(--ymt-selection-background)!important}.role-list ::ng-deep .mat-mdc-list-option[aria-selected=true] .mdc-list-item__primary-text{color:var(--ymt-on-selection-background);font-weight:500}.role-list ::ng-deep .mat-mdc-list-option:hover:not([aria-selected=true]){background-color:var(--ymt-hover-background)}.control-buttons{display:flex;flex-direction:column;justify-content:center;gap:var(--ymt-spacing-xs)}.empty-message{padding:var(--ymt-spacing-m);text-align:center;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { allRoles: [{ type: i0.Input, args: [{ isSignal: true, alias: "allRoles", required: true }] }], initialRoles: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialRoles", required: true }] }], rolesChange: [{ type: i0.Output, args: ["rolesChange"] }] } });
 
-const components$2 = [BusyOverlayDirective, YmtButtonDirective, DialogComponent, RolesSelectionComponent];
-const modules$2 = [
+const components$5 = [
+    BusyOverlayDirective,
+    YmtButtonDirective,
+    DialogComponent,
+    RolesSelectionComponent,
+];
+const modules$5 = [
     CommonModule,
     ReactiveFormsModule,
     TranslatePipe,
     MatFormFieldModule,
     MatInputModule,
 ];
-class EditUserComponent {
+class EditGroupComponent {
     data;
+    /** Shared `MatDialog.open()` config, so every call site opening this dialog stays in sync. */
+    static DIALOG_CONFIG = {
+        width: '600px',
+        maxWidth: '90vw',
+    };
     #fb = inject(FormBuilder);
     #userManagementService = inject(YuvUserManagementService);
     #dialogRef = inject((MatDialogRef));
@@ -792,20 +734,14 @@ class EditUserComponent {
     busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
     error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     allAvailableRoles = signal([], ...(ngDevMode ? [{ debugName: "allAvailableRoles" }] : /* istanbul ignore next */ []));
-    userRoles = signal([], ...(ngDevMode ? [{ debugName: "userRoles" }] : /* istanbul ignore next */ []));
-    /** Externally managed users (e.g. provisioned via SCIM) may only have roles assigned; their personal data is owned by the external IdP. */
-    externallyManaged = signal(false, ...(ngDevMode ? [{ debugName: "externallyManaged" }] : /* istanbul ignore next */ []));
-    username = new FormControl('');
-    email = new FormControl('', [Validators.required, Validators.email]);
-    firstName = new FormControl('', [Validators.minLength(1), Validators.maxLength(255), Validators.pattern("^[^#!<>&/%=;*§$()[\\]{}]*$")]);
-    lastName = new FormControl('', [Validators.minLength(1), Validators.maxLength(255), Validators.pattern("^[^#!<>&/%=;*§$()[\\]{}]*$")]);
+    groupRoles = signal([], ...(ngDevMode ? [{ debugName: "groupRoles" }] : /* istanbul ignore next */ []));
+    name = new FormControl('');
+    description = new FormControl('');
     roles = new FormControl([]);
     form = this.#fb.group({
-        username: this.username,
-        email: this.email,
-        firstName: this.firstName,
-        lastName: this.lastName,
-        roles: this.roles
+        name: this.name,
+        description: this.description,
+        roles: this.roles,
     });
     changedInput = signal(undefined, ...(ngDevMode ? [{ debugName: "changedInput" }] : /* istanbul ignore next */ []));
     disabledSubmit = linkedSignal({ ...(ngDevMode ? { debugName: "disabledSubmit" } : /* istanbul ignore next */ {}), source: this.changedInput,
@@ -815,27 +751,19 @@ class EditUserComponent {
     constructor(data) {
         this.data = data;
         this.form.patchValue({
-            username: this.data.user.username,
-            firstName: this.data.user.firstName,
-            lastName: this.data.user.lastName,
-            email: this.data.user.email,
-            roles: this.data.user.roles
+            name: this.data.group.name,
+            description: this.data.group.description,
+            roles: this.data.group.roles,
         });
-        // Initialize userRoles from the data
-        this.userRoles.set(this.data.user.roles || []);
-        // Externally managed users may only have roles assigned: their personal data fields are rendered
-        // read-only in the template (same mechanism as the username field) so they keep the identical look.
-        if (this.data.user.externallyManaged) {
-            this.externallyManaged.set(true);
-        }
+        this.groupRoles.set(this.data.group.roles || []);
         // Fetch all available roles
         this.#userManagementService.fetchAllRoles().subscribe({
             next: (roles) => {
-                this.allAvailableRoles.set(roles);
+                this.allAvailableRoles.set(roles.sort());
             },
             error: (e) => {
                 this.#logger.error('Failed to fetch roles', e);
-            }
+            },
         });
     }
     ngAfterViewInit() {
@@ -848,348 +776,522 @@ class EditUserComponent {
         return !isDataUnchanged;
     }
     isEquals(key) {
-        const oldVal = this.data.user?.[key];
+        const oldVal = this.data.group?.[key];
         const newVal = this.form.get(key)?.value;
         return oldVal === newVal;
     }
     onRolesChange(roles) {
-        this.userRoles.set(roles);
+        this.groupRoles.set(roles);
         this.form.patchValue({ roles: roles });
         this.roles.markAsTouched(); // Mark as touched to trigger validation display
     }
-    updateUser() {
-        // For externally managed users the personal data fields are read-only, so their original values
-        // are preserved here (the backend replaces the representation from the request, so omitting them
-        // would wipe them).
+    updateGroup() {
         const editParams = this.form.getRawValue();
         this.busy.set(true);
         this.error.set(undefined);
-        const updateUserRequest = {
-            email: editParams.email,
-            firstName: editParams.firstName ? editParams.firstName : "",
-            lastName: editParams.lastName ? editParams.lastName : "",
-            roles: editParams.roles
+        const updateGroupRequest = {
+            name: editParams.name,
+            description: editParams.description,
+            roles: editParams.roles,
         };
-        this.#userManagementService
-            .updateUser(this.data.user.id, updateUserRequest)
-            .subscribe({
+        this.#userManagementService.updateGroup(this.data.group.id, updateGroupRequest).subscribe({
             error: (e) => {
-                switch (e.status) {
-                    case 409: {
-                        this.error.set(this.#translateService.instant("yuv.app.user-management.users.action.create.error.emailExists"));
-                        break;
-                    }
-                    default:
-                        this.error.set(this.#translateService.instant("yuv.app.user-management.users.action.edit.error.unknown"));
-                }
-                this.#logger.error(`Failed to update user with id ${this.data.user.id}`, e);
+                const errorKey = resolveErrorMessageKey('yuv.app.user-management.groups.action.edit', e.status);
+                this.error.set(this.#translateService.instant(errorKey));
+                this.#logger.error(`Failed to update group with id ${this.data.group.id}`, e);
                 this.busy.set(false);
             },
             complete: () => {
                 this.busy.set(false);
-                this.#dialogRef.close(this.data.user.id);
+                // Returns the updated group (not just its id) so the caller can reconcile its own state
+                // without a redundant `getGroupDetails` round trip for what was just written - mirrors
+                // `CreateGroupComponent`. Everything the backend owns and this form doesn't touch (e.g.
+                // `members`) carries over from the details this dialog was opened with.
+                this.#dialogRef.close({ ...this.data.group, ...updateGroupRequest });
             },
         });
     }
     close() {
         this.#dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EditUserComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: EditUserComponent, isStandalone: true, selector: "ymusrmgmt-edit-user", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      @if (externallyManaged()) {\n      <p class=\"externally-managed-hint\">{{ \"yuv.app.user-management.users.action.edit.identitySource.external.hint\" | translate }}</p>\n      }\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\" #emailField [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstName\" type=\"text\" [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastName\" type=\"text\" [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      \n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"userRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      \n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateUser()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .externally-managed-hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: EditGroupComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: EditGroupComponent, isStandalone: true, selector: "ymusrmgmt-edit-group", ngImport: i0, template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"\n    'yuv.app.user-management.groups.action.edit.dialog.title'\n      | translate : { name: data.group.name }\n  \"\n>\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\">{{\n          'yuv.app.user-management.groups.property.name' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"name\"\n          type=\"text\"\n          [attr.tabindex]=\"-1\"\n          readonly\n          [attr.aria-label]=\"'yuv.app.user-management.groups.property.name' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\n          'yuv.app.user-management.groups.property.description' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"description\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.groups.property.description' | translate\"\n        />\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\"\n        >\n        </ymusrmgmt-role-selection>\n      </div>\n    </form>\n    @if (error()) {\n    <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.users.action.button.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateGroup()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main .readonly-field{opacity:.5;pointer-events:none}:host main .readonly-label{pointer-events:none}:host main .roles-section{margin:var(--ymt-spacing-m) 0}:host main .roles-section.has-error ymusrmgmt-role-selection{border:var(--ymt-focus-indicator-size) solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EditUserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: EditGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymusrmgmt-edit-user', standalone: true, imports: [...modules$2, ...components$2], host: {
-                        '[class.busy]': '!busy()',
-                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.users.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      @if (externallyManaged()) {\n      <p class=\"externally-managed-hint\">{{ \"yuv.app.user-management.users.action.edit.identitySource.external.hint\" | translate }}</p>\n      }\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.users.object.property.username\" | translate }}</mat-label>\n        <input matInput [formControl]=\"username\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.email\" | translate}}</mat-label>\n        <input matInput [formControl]=\"email\" type=\"text\" #emailField [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.firstname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"firstName\" type=\"text\" [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\"yuv.app.user-management.users.object.property.lastname\" | translate}}</mat-label>\n        <input matInput [formControl]=\"lastName\" type=\"text\" [readonly]=\"externallyManaged()\" [attr.tabindex]=\"externallyManaged() ? -1 : null\"/>\n      </mat-form-field>\n      \n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"userRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      \n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateUser()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .externally-managed-hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"] }]
+            args: [{ selector: 'ymusrmgmt-edit-group', standalone: true, imports: [...modules$5, ...components$5], template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"\n    'yuv.app.user-management.groups.action.edit.dialog.title'\n      | translate : { name: data.group.name }\n  \"\n>\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\">{{\n          'yuv.app.user-management.groups.property.name' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"name\"\n          type=\"text\"\n          [attr.tabindex]=\"-1\"\n          readonly\n          [attr.aria-label]=\"'yuv.app.user-management.groups.property.name' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\n          'yuv.app.user-management.groups.property.description' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"description\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.groups.property.description' | translate\"\n        />\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\"\n        >\n        </ymusrmgmt-role-selection>\n      </div>\n    </form>\n    @if (error()) {\n    <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.users.action.button.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateGroup()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main .readonly-field{opacity:.5;pointer-events:none}:host main .readonly-label{pointer-events:none}:host main .roles-section{margin:var(--ymt-spacing-m) 0}:host main .roles-section.has-error ymusrmgmt-role-selection{border:var(--ymt-focus-indicator-size) solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
-class YuvUsersPageComponent {
-    layoutSettingsID = APP_ID + '#root.layout.settings';
+/**
+ * Marks an element as one keyboard-navigable row, so CDK's `FocusKeyManager` can drive Up/Down
+ * navigation over a `viewChildren()` query of them.
+ *
+ * Used by both keyboard-navigable lists on this page - the groups rail and the user table - which
+ * had grown separate copies of the same roving-tabindex plumbing (an index derived from the
+ * selection, a bounds-clamping `moveActive`, and a `viewChildren` query whose elements were
+ * focused by hand).
+ *
+ * `FocusKeyManager` rather than `ActiveDescendantKeyManager` (and rather than `yuv-list`, which
+ * builds on the latter): both lists put real DOM focus on the row itself, and each row also
+ * contains its own "more actions" button. `ActiveDescendantKeyManager` keeps focus on the list
+ * container instead, which is why `yuv-list` sets `tabindex="-1"` on every focusable element
+ * inside an item - reachable by mouse only. A roving tabindex over real focus keeps those buttons
+ * in the keyboard order.
+ */
+class FocusableRowDirective {
+    #elementRef = inject(ElementRef);
+    /**
+     * Called by the key manager, and directly on a row click: with a roving tabindex, a
+     * not-yet-active row's `tabindex` is still `-1` at the moment it's clicked, and Safari/older
+     * Firefox don't move focus to a `tabindex="-1"` element via a plain click (only script can), so
+     * without this a click would select a row but leave keyboard focus behind, breaking the next
+     * arrow press.
+     */
+    focus() {
+        this.#elementRef.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FocusableRowDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: FocusableRowDirective, isStandalone: true, selector: "[ymusrmgmt-focusable-row]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FocusableRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ymusrmgmt-focusable-row]',
+                    standalone: true,
+                }]
+        }] });
+
+class GroupsComponent {
     #logger = inject(Logger);
     #userManagementService = inject(YuvUserManagementService);
     #translateService = inject(TranslateService);
-    #dialog = inject(MatDialog);
     #notificationService = inject(NotificationService);
-    #userService = inject(UserService);
-    #confirmService = inject(ConfirmService);
-    userDetailsComponent;
-    pagination = { total: 0, pages: 0, page: 0 };
+    #dialog = inject(MatDialog);
+    #destroyRef = inject(DestroyRef);
+    #injector = inject(Injector);
+    selectedGroupId = input(undefined, ...(ngDevMode ? [{ debugName: "selectedGroupId" }] : /* istanbul ignore next */ []));
+    /** Forwarded to the internal `ymt-pane`'s top bar - see `YmtPaneComponent.topBarActions`. */
+    topBarActions;
+    groupSelected = new EventEmitter();
+    /** Emitted when the group currently scoping the page's user list was edited, so its name/roles can be picked up (e.g. for the subtitle, or the "inherited from current group" role highlight). */
+    groupUpdated = new EventEmitter();
+    /** Emitted when the group currently scoping the page's user list was removed, so the page can fall back to "All users". */
+    groupDeleted = new EventEmitter();
+    /** Emitted when a row's "add members" action was picked - the page owns that flow (dialog,
+     * notifications and, when the group is the one currently scoping the list, reloading it). */
+    addMembersRequested = new EventEmitter();
     busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
-    actions = [];
-    displayedColumns = ['state', 'name', 'firstName', 'lastName', 'email', 'id'];
-    icons = {
-        ...APP_ICONS,
-    };
-    dataSource = signal([], ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
-    selection = signal(new SelectionModel(false, undefined), ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-    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();
-        const editAction = {
-            id: 'yuv.app.users.action.edit',
-            icon: APP_ICONS.actionEditUser,
-            label: this.#translateService.instant('yuv.app.user-management.users.action.edit.label'),
-            callback: () => this.editSelectedUser(),
-        };
-        const activateAction = {
-            id: 'yuv.app.users.action.activate',
-            icon: APP_ICONS.actionActivateUser,
-            label: this.#translateService.instant('yuv.app.user-management.users.action.activate.label'),
-            disabled: selectedUser.id === currentUser.id || selectedUser.enabled,
-            callback: () => this.activateSelectedUser(),
-        };
-        const deactivateAction = {
-            id: 'yuv.app.users.action.deactivate',
-            icon: APP_ICONS.actionDeactivateUser,
-            label: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.label'),
-            disabled: selectedUser.id === currentUser.id || !selectedUser.enabled,
-            callback: () => this.deactivateSelectedUser(),
-        };
-        const deleteAction = {
-            id: 'yuv.app.users.action.delete',
-            icon: APP_ICONS.actionDeleteUser,
-            label: this.#translateService.instant('yuv.app.user-management.users.action.delete.label'),
-            disabled: selectedUser.id === currentUser.id,
-            callback: () => this.deleteSelectedUser(),
-        };
-        this.actions = [editAction, activateAction, deactivateAction, deleteAction];
-        this.detailsActive = true;
+    groups = signal([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /** The rendered rows (index 0 = "All users", 1..n = `groups()`), in order - see
+     * `FocusableRowDirective`. */
+    rowItems = viewChildren(FocusableRowDirective, ...(ngDevMode ? [{ debugName: "rowItems" }] : /* istanbul ignore next */ []));
+    /** Drives Up/Down over the rows, moving real DOM focus with the roving tabindex. Shares its
+     * mechanism with the user table's own list - see `FocusableRowDirective`. */
+    #keyManager = new FocusKeyManager(this.rowItems, this.#injector);
+    constructor() {
+        // Selection follows keyboard focus, matching a native `<select>`'s Up/Down behavior rather
+        // than tracking a separate "highlighted but not yet selected" state.
+        this.#keyManager.change
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((index) => this.#selectAtIndex(index));
+    }
+    /** Roving-tabindex position in the combined "All users" (index 0) + groups (index i+1) list -
+     * the ARIA listbox/option pattern, where only the selected row is a real Tab stop and Up/Down
+     * move between rows instead. Without this, each row would need its own tabindex="0" alongside
+     * its "more actions" button - two independently-focusable interactive elements nested inside
+     * one another, which is what flagged this in the first place. Derived from `selectedGroupId`
+     * rather than tracked separately, so a selection made elsewhere (e.g. after creating a group)
+     * moves the roving position too. */
+    activeIndex = computed(() => {
+        const id = this.selectedGroupId();
+        if (!id)
+            return 0;
+        const i = this.groups().findIndex((g) => g.id === id);
+        return i === -1 ? 0 : i + 1;
+    }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.refresh();
     }
-    createNewUser() {
-        this.#logger.debug('Create new user ...');
-        this.#dialog.open(CreateUserComponent, {
-            width: '400px',
-            maxWidth: '90vw',
-        }).afterClosed().subscribe((createdUserId) => {
-            if (createdUserId) {
-                this.#logger.debug("New user created with ID: " + createdUserId);
-                this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.users.action.create.success'));
-                this.refresh();
-            }
+    refresh() {
+        this.busy.set(true);
+        this.#userManagementService.fetchAllGroups().subscribe({
+            next: (groups) => {
+                this.groups.set(groups);
+            },
+            error: (e) => {
+                this.#logger.error('Failed to fetch groups', e);
+                this.busy.set(false);
+            },
+            complete: () => {
+                this.busy.set(false);
+            },
         });
     }
-    editSelectedUser() {
-        const selected = this.selection().hasValue() ? this.selection().selected[0] : undefined;
-        if (selected) {
-            this.#logger.debug(`Edit selected user with id '${selected.id}'...`);
-            this.#dialog.open(EditUserComponent, {
-                width: '800px',
-                maxWidth: '90vw',
-                data: {
-                    user: this.userDetailsComponent.userDetails()
-                },
-            }).afterClosed().subscribe((editedUserId) => {
-                if (editedUserId) {
-                    this.#logger.debug("User edited with ID: " + editedUserId);
-                    this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.users.action.edit.success', { username: selected.username }));
-                    this.refresh(true);
-                }
-            });
+    selectAllUsers() {
+        this.groupSelected.emit(undefined);
+    }
+    selectGroup(group) {
+        this.groupSelected.emit(group);
+    }
+    /** Arrow keys for the roving-tabindex rows - handed to the key manager, which moves focus; the
+     * `change` subscription above turns that into a selection. */
+    onListKeydown(event) {
+        // The selection also moves from outside this component (a deep link, or a group created
+        // elsewhere and selected straight away), so re-anchor the key manager on whatever is selected
+        // now - without emitting `change` or moving focus - before letting it handle the key.
+        const active = this.activeIndex();
+        if (active !== this.#keyManager.activeItemIndex) {
+            this.#keyManager.updateActiveItem(active);
         }
+        this.#keyManager.onKeydown(event);
     }
-    activateSelectedUser() {
-        this.updateUserEnabledState(true);
-    }
-    deactivateSelectedUser() {
-        this.updateUserEnabledState(false);
-    }
-    updateUserEnabledState(enabled) {
-        const selected = this.selection().hasValue() ? this.selection().selected[0] : undefined;
-        if (!selected)
-            return;
-        const action = enabled ? 'activate' : 'deactivate';
-        const updateUserRequest = { enabled };
-        const performUpdate = () => {
-            this.busy.set(true);
-            this.#userManagementService.updateUser(selected.id, updateUserRequest).subscribe({
-                error: (e) => {
-                    this.#notificationService.error(this.#translateService.instant(`yuv.app.user-management.users.action.${action}.error`, { username: selected.username }));
-                    this.#logger.error(`Failed to ${action} user with id ${selected.id}`, e);
-                    this.busy.set(false);
-                },
-                complete: () => {
-                    this.#notificationService.success(this.#translateService.instant(`yuv.app.user-management.users.action.${action}.success`, { username: selected.username }));
-                    this.busy.set(false);
-                    this.refresh(true);
-                },
-            });
-        };
-        if (!enabled) {
-            this.#confirmService
-                .confirm({
-                title: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.label'),
-                message: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.confirm.message', { username: selected.username }),
-                confirmLabel: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.confirm.label'),
-            })
-                .subscribe({
-                next: (confirmed) => {
-                    if (confirmed) {
-                        performUpdate();
-                    }
-                }
-            });
+    /** Row 0 is the pinned "All users" entry, 1..n are `groups()` - see `activeIndex`. */
+    #selectAtIndex(index) {
+        if (index === 0) {
+            this.selectAllUsers();
         }
         else {
-            performUpdate();
+            const group = this.groups()[index - 1];
+            if (group)
+                this.selectGroup(group);
         }
     }
-    deleteSelectedUser() {
-        const selected = this.selection().hasValue() ? this.selection().selected[0] : undefined;
-        if (selected) {
-            this.#logger.debug(`Delete selected user with id '${selected.id}'...`);
-            this.#userManagementService.deleteUser(selected).subscribe({
-                next: (result) => {
-                    if (result) {
-                        this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.users.action.delete.success', { username: selected.username }));
-                        this.deselect();
-                        this.#loadUserList(this.pagination?.page || 0);
+    getGroupRowActions(group) {
+        return [
+            {
+                id: 'yuv.app.groups.action.edit',
+                icon: APP_ICONS.actionEditGroup,
+                label: this.#translateService.instant('yuv.app.user-management.groups.action.edit.label'),
+                callback: () => this.editGroup(group),
+            },
+            {
+                id: 'yuv.app.groups.action.addMembers',
+                icon: APP_ICONS.actionAddGroupMembers,
+                label: this.#translateService.instant('yuv.app.user-management.groups.action.addMembers.label'),
+                callback: () => this.addMembersRequested.emit(group),
+            },
+            {
+                id: 'yuv.app.groups.action.delete',
+                icon: APP_ICONS.actionDeleteGroup,
+                label: this.#translateService.instant('yuv.app.user-management.groups.action.delete.label'),
+                callback: () => this.deleteGroup(group),
+            },
+        ];
+    }
+    /** Edits any row's group - fetches its full details fresh rather than relying on already-loaded rail data. */
+    editGroup(group) {
+        this.#logger.debug(`Edit group with id '${group.id}'...`);
+        this.#userManagementService.getGroupDetails(group.id).subscribe({
+            next: (groupDetails) => {
+                this.#dialog
+                    .open(EditGroupComponent, {
+                    ...EditGroupComponent.DIALOG_CONFIG,
+                    data: { group: groupDetails },
+                })
+                    .afterClosed()
+                    .subscribe((editedGroup) => {
+                    if (editedGroup) {
+                        this.#logger.debug('Group edited with ID: ' + editedGroup.id);
+                        this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.groups.action.edit.success', { name: group.name }));
+                        this.refresh();
+                        this.groupUpdated.emit(editedGroup);
                     }
-                },
-                error: (e) => {
-                    this.#logger.error(`Failed to delete user with id '${selected.id}'`, e);
-                    this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.users.action.delete.error', { username: selected.username }));
-                }
-            });
-        }
-    }
-    select(row) {
-        if (this.selection().isSelected(row)) {
-            this.deselect();
-        }
-        else {
-            this.selection().select(row);
-            this.#updateActions(row);
-        }
-    }
-    deselect() {
-        this.selection().clear();
-        this.#updateActions(undefined);
-    }
-    isSelected(row) {
-        return this.selection().selected?.some(item => item.id === row.id);
-    }
-    refresh(refreshDetails = false) {
-        this.#loadUserList(this.pagination?.page || 0);
-        if (refreshDetails) {
-            this.refreshUserDetails();
-        }
-    }
-    refreshUserDetails() {
-        if (this.userDetailsComponent) {
-            this.userDetailsComponent.refresh();
-        }
-    }
-    getPageSize() {
-        return YuvUserManagementService.DEFAULT_PAGE_SIZE;
-    }
-    onChangePage($event) {
-        const { pageIndex } = $event;
-        this.#loadUserList(pageIndex);
-    }
-    onQueryChange(q) {
-        this.#query.term = q.term || '';
-        this.#loadUserList(0);
-    }
-    ngOnInit() {
-        this.#loadUserList(0);
-    }
-    #loadUserList(page) {
-        this.busy.set(true);
-        this.#userManagementService.fetchUsers(page, this.#query.term).subscribe({
-            next: (response) => {
-                console.log(`fetched users: ${response}`);
-                this.dataSource.set(response.objects);
-                this.pagination = {
-                    total: response.totalNumItems,
-                    pages: Math.ceil(response.totalNumItems / YuvUserManagementService.DEFAULT_PAGE_SIZE),
-                    page: page
-                };
+                });
             },
             error: (e) => {
-                this.#logger.error('Failed to fetch users', e);
-                this.busy.set(false);
+                this.#logger.error(`Failed to load details for group with id '${group.id}'`, e);
             },
-            complete: () => {
-                if (this.dataSource().length === 0 && page > 0) {
-                    this.#loadUserList(page - 1);
-                    return;
-                }
-                const selected = this.selection().hasValue() ? this.selection().selected[0] : undefined;
-                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.select(this.dataSource()[0]);
+        });
+    }
+    deleteGroup(group) {
+        this.#logger.debug(`Delete group with id '${group.id}'...`);
+        this.#userManagementService.deleteGroup(group).subscribe({
+            next: (result) => {
+                if (result) {
+                    this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.groups.action.delete.success', {
+                        name: group.name,
+                    }));
+                    this.refresh();
+                    this.groupDeleted.emit(group.id);
                 }
-                this.busy.set(false);
+            },
+            error: (e) => {
+                this.#logger.error(`Failed to delete group with id '${group.id}'`, e);
+                this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.groups.action.delete.error', {
+                    name: group.name,
+                }));
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUsersPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: YuvUsersPageComponent, isStandalone: true, selector: "ymusrmgmt-users", host: { properties: { "class.busy": "!busy()", "class.pagination": "this.pagination" } }, viewQueries: [{ propertyName: "userDetailsComponent", first: true, predicate: UserDetailsComponent, descendants: true }], ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"search\">\n  <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\" [(detailsActive)]=\"detailsActive\" [options]=\"layoutOptions\" [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\" title=\"sss\">\n    <ymt-pane-body>\n      <mat-table [dataSource]=\"dataSource()\" class=\"user-table mat-elevation-z8\" row>\n        <ng-container matColumnDef=\"state\">\n          <mat-header-cell *matHeaderCellDef [attr.aria-label]=\"'yuv.app.user-management.users.object.property.state' | translate\" />\n          <mat-cell *matCellDef=\"let element\">\n            <mat-icon\n              aria-hidden=\"false\"\n              [attr.aria-label]=\"(element.enabled ? 'yuv.app.user-management.users.object.property.enabled' : 'yuv.app.user-management.users.object.property.disabled') | translate\">{{\n              element.enabled ? icons.stateActive : icons.stateInactive }}</mat-icon>\n            @if (element.externallyManaged) {\n              <mat-icon class=\"external-source\"\n                aria-hidden=\"false\"\n                [matTooltip]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\"\n                [attr.aria-label]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\">{{\n                icons.sourceExternal }}</mat-icon>\n            }\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"name\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.username' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.username}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"firstName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.firstname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.firstName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"lastName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.lastname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.lastName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"email\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.email' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.email}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"id\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.id' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n        </ng-container>\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row\n          *matRowDef=\"let row; columns: displayedColumns;\"\n          (click.single)=\"select(row)\"\n          [attr.tabindex]=\"0\"\n          (keydown.enter)=\"select(row)\"\n          (keydown.space)=\"$event.preventDefault(); select(row)\"\n          [class.selected-row]=\"this.isSelected(row)\" class=\"user-row\">\n        </mat-row>\n      </mat-table>\n    </ymt-pane-body>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    @let selectedUser = selection().selected.at(0);\n    <ymt-pane-header [icon]=\"'person'\" [title]=\"'yuv.app.user-management.users.details.title' | translate\" [subtitle]=\"selectedUser?.id || ('yuv.app.user-management.users.details.empty' | translate)\" [actions]=\"listActions\" [badges]=\"selectedUser?.externallyManaged ? sourceBadge : undefined\"></ymt-pane-header>\n    <ymt-pane-body>\n      <ymusrmgmt-user-details [userId]=\"selectedUser?.id\" />\n    </ymt-pane-body>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.users.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" [attr.aria-label]=\"'yuv.app.user-management.users.navigation.pagination.aria' | translate\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh(true)\" [matTooltip]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\" [attr.aria-label]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n  <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n    <mat-icon>person_add</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>\n\n<ng-template #sourceBadge>\n  <ymt-badge severity=\"primary\" [aura]=\"true\" class=\"source-badge\"\n    [matTooltip]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\">\n    <mat-icon>{{ icons.sourceExternal }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.users.object.property.identitySource.external' | translate }}</span>\n  </ymt-badge>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .user-table{overflow:auto;height:100%}:host .user-row:hover{background-color:var(--ymt-hover-background)}:host mat-cell mat-icon.external-source{color:var(--ymt-primary);margin-left:.25rem}:host .source-badge{display:inline-flex;align-items:center;gap:.25rem}:host .source-badge mat-icon{font-size:1rem;width:1rem;height:1rem}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: SimpleSearchComponent, selector: "yuv-simple-search", inputs: ["query"], outputs: ["querySubmit", "clearInput", "targetSelectionChanged", "queryChange", "typeAggregation"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "component", type: UserDetailsComponent, selector: "ymusrmgmt-user-details", inputs: ["userId"] }, { kind: "component", type: YmtBadge, selector: "ymt-badge", inputs: ["severity", "outline", "aura"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: YmtLayoutModule }, { kind: "component", type: i5$1.MasterDetailsLayoutComponent, selector: "ymt-master-details-layout", inputs: ["layoutSettingsID", "options", "direction", "gutterSize", "detailsActive"], outputs: ["detailsActiveChange"] }, { kind: "directive", type: i5$1.YmtLayoutPaneDirective, selector: "[ymtLayoutPane]", inputs: ["role", "topBarActions"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i6$1.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i6$1.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i6.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvOverflowMenuModule }, { kind: "component", type: i8.OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: GroupsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: GroupsComponent, isStandalone: true, selector: "ymusrmgmt-groups", inputs: { selectedGroupId: { classPropertyName: "selectedGroupId", publicName: "selectedGroupId", isSignal: true, isRequired: false, transformFunction: null }, topBarActions: { classPropertyName: "topBarActions", publicName: "topBarActions", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { groupSelected: "groupSelected", groupUpdated: "groupUpdated", groupDeleted: "groupDeleted", addMembersRequested: "addMembersRequested" }, viewQueries: [{ propertyName: "rowItems", predicate: FocusableRowDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@let railTitle = 'yuv.app.user-management.label.rail.title' | translate;\n<ymt-pane\n  [busy]=\"busy()\"\n  [topBarActions]=\"topBarActions\"\n  role=\"region\"\n  [attr.aria-label]=\"railTitle\"\n>\n  <ymt-pane-header\n    [icon]=\"'groups'\"\n    [title]=\"railTitle\"\n    [subtitle]=\"\n      'yuv.app.user-management.label.rail.subtitle' | translate : { count: groups().length }\n    \"\n  ></ymt-pane-header>\n  <ymt-pane-body>\n    <div\n      class=\"groups-list\"\n      role=\"listbox\"\n      tabindex=\"-1\"\n      [attr.aria-label]=\"railTitle\"\n      (keydown)=\"onListKeydown($event)\"\n    >\n      <div\n        ymusrmgmt-focusable-row\n        class=\"group-item\"\n        role=\"option\"\n        [attr.aria-selected]=\"!selectedGroupId()\"\n        [class.active]=\"!selectedGroupId()\"\n        [attr.tabindex]=\"activeIndex() === 0 ? 0 : -1\"\n        (click)=\"selectAllUsers()\"\n        (keydown.enter)=\"selectAllUsers()\"\n        (keydown.space)=\"$event.preventDefault(); selectAllUsers()\"\n      >\n        <span class=\"group-icon\"><mat-icon>family_group</mat-icon></span>\n        <span class=\"group-name\">{{\n          'yuv.app.user-management.label.rail.usersEntry' | translate\n        }}</span>\n      </div>\n\n      <div class=\"groups-divider\"></div>\n\n      @for (group of groups(); track group.id; let i = $index) {\n      <div\n        ymusrmgmt-focusable-row\n        class=\"group-item\"\n        role=\"option\"\n        [attr.aria-selected]=\"selectedGroupId() === group.id\"\n        [class.active]=\"selectedGroupId() === group.id\"\n        [attr.tabindex]=\"activeIndex() === i + 1 ? 0 : -1\"\n        [matTooltip]=\"group.description || ''\"\n        (click)=\"selectGroup(group)\"\n        (keydown.enter)=\"selectGroup(group)\"\n        (keydown.space)=\"$event.preventDefault(); selectGroup(group)\"\n      >\n        <span class=\"group-icon\"><mat-icon>group</mat-icon></span>\n        <span class=\"group-name\">{{ group.name }}</span>\n        <button\n          mat-icon-button\n          class=\"group-actions\"\n          [matMenuTriggerFor]=\"groupRowMenu\"\n          [matMenuTriggerData]=\"{ group: group }\"\n          [matTooltip]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n          [attr.aria-label]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n          [tabIndex]=\"activeIndex() === i + 1 ? 0 : -1\"\n          (click)=\"$event.stopPropagation(); selectGroup(group)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      </div>\n      }\n    </div>\n  </ymt-pane-body>\n</ymt-pane>\n\n<mat-menu #groupRowMenu=\"matMenu\">\n  <ng-template matMenuContent let-group=\"group\">\n    @for (action of getGroupRowActions(group); track action.id) {\n    <button mat-menu-item [disabled]=\"action.disabled\" (click)=\"action.callback?.(action)\">\n      <mat-icon>{{ action.icon }}</mat-icon>\n      <span>{{ action.label }}</span>\n    </button>\n    }\n  </ng-template>\n</mat-menu>\n", styles: [":host{display:block;height:100%}.groups-list{padding:var(--ymt-spacing-xs)}.group-item{display:flex;align-items:center;gap:.625rem;padding:var(--ymt-spacing-xs) .625rem;border-radius:var(--ymt-corner-xs);cursor:pointer;margin-bottom:var(--ymt-spacing-3xs)}.group-item:hover{background-color:var(--ymt-hover-background)}.group-item.active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host(:not(:focus-within)) .group-item.active{background-color:var(--ymt-selection-background);color:var(--ymt-on-selection-background)}.group-item .group-icon{width:var(--ymt-sizing-l);height:var(--ymt-sizing-l);border-radius:var(--ymt-corner-full);background-color:var(--ymt-surface-container-high);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ymt-text-color-subtle)}.group-item .group-icon mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}.group-item.active .group-icon{background-color:var(--ymt-surface);color:var(--ymt-primary)}:host(:not(:focus-within)) .group-item.active .group-icon{color:var(--ymt-text-color-subtle)}.group-item .group-name{flex:1;min-width:0;font:var(--ymt-font-title-smallest);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-item .group-actions{flex-shrink:0;color:inherit;width:var(--ymt-sizing-l);height:var(--ymt-sizing-l);padding:0}.group-item .group-actions mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.groups-divider{height:var(--ymt-outline-width);background-color:var(--ymt-outline-variant);margin:.375rem .625rem .625rem}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { 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: YmtPanesModule }, { kind: "component", type: i7.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i7.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i7.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "directive", type: FocusableRowDirective, selector: "[ymusrmgmt-focusable-row]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvUsersPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: GroupsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymusrmgmt-users', standalone: true, imports: [
-                        CommonModule,
+            args: [{ selector: 'ymusrmgmt-groups', standalone: true, imports: [
                         MatButtonModule,
                         MatIconModule,
-                        MatPaginatorModule,
-                        MatSortModule,
-                        MatTableModule,
-                        MatTabsModule,
+                        MatMenuModule,
                         MatTooltipModule,
-                        RouterModule,
                         TranslatePipe,
-                        SimpleSearchComponent,
-                        BusyOverlayDirective,
-                        ClickDoubleDirective,
-                        UserDetailsComponent,
-                        YmtBadge,
-                        YmtButtonDirective,
-                        YmtIconButtonDirective,
-                        YmtLayoutModule,
                         YmtPanesModule,
-                        YuvClientShellModule,
-                        YuvOverflowMenuModule,
-                    ], host: {
-                        '[class.busy]': '!busy()',
-                    }, template: "<ng-template yuvAppHeaderSlot=\"search\">\n  <yuv-simple-search (queryChange)=\"onQueryChange($event)\"></yuv-simple-search>\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\" [(detailsActive)]=\"detailsActive\" [options]=\"layoutOptions\" [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\" title=\"sss\">\n    <ymt-pane-body>\n      <mat-table [dataSource]=\"dataSource()\" class=\"user-table mat-elevation-z8\" row>\n        <ng-container matColumnDef=\"state\">\n          <mat-header-cell *matHeaderCellDef [attr.aria-label]=\"'yuv.app.user-management.users.object.property.state' | translate\" />\n          <mat-cell *matCellDef=\"let element\">\n            <mat-icon\n              aria-hidden=\"false\"\n              [attr.aria-label]=\"(element.enabled ? 'yuv.app.user-management.users.object.property.enabled' : 'yuv.app.user-management.users.object.property.disabled') | translate\">{{\n              element.enabled ? icons.stateActive : icons.stateInactive }}</mat-icon>\n            @if (element.externallyManaged) {\n              <mat-icon class=\"external-source\"\n                aria-hidden=\"false\"\n                [matTooltip]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\"\n                [attr.aria-label]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\">{{\n                icons.sourceExternal }}</mat-icon>\n            }\n          </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"name\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.username' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.username}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"firstName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.firstname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.firstName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"lastName\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.lastname' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.lastName}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"email\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.email' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.email}} </mat-cell>\n        </ng-container>\n        <ng-container matColumnDef=\"id\">\n          <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.users.object.property.id' | translate\n            }}</mat-header-cell>\n          <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n        </ng-container>\n        <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n        <mat-row\n          *matRowDef=\"let row; columns: displayedColumns;\"\n          (click.single)=\"select(row)\"\n          [attr.tabindex]=\"0\"\n          (keydown.enter)=\"select(row)\"\n          (keydown.space)=\"$event.preventDefault(); select(row)\"\n          [class.selected-row]=\"this.isSelected(row)\" class=\"user-row\">\n        </mat-row>\n      </mat-table>\n    </ymt-pane-body>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    @let selectedUser = selection().selected.at(0);\n    <ymt-pane-header [icon]=\"'person'\" [title]=\"'yuv.app.user-management.users.details.title' | translate\" [subtitle]=\"selectedUser?.id || ('yuv.app.user-management.users.details.empty' | translate)\" [actions]=\"listActions\" [badges]=\"selectedUser?.externallyManaged ? sourceBadge : undefined\"></ymt-pane-header>\n    <ymt-pane-body>\n      <ymusrmgmt-user-details [userId]=\"selectedUser?.id\" />\n    </ymt-pane-body>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.users.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" [attr.aria-label]=\"'yuv.app.user-management.users.navigation.pagination.aria' | translate\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh(true)\" [matTooltip]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\" [attr.aria-label]=\"'yuv.app.user-management.users.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n  <button ymtButton=\"primary\" (click)=\"createNewUser()\" [matTooltip]=\"'yuv.app.user-management.users.action.create.description' | translate\">\n    <mat-icon>person_add</mat-icon>{{'yuv.app.user-management.users.action.create.label' | translate }}\n  </button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>\n\n<ng-template #sourceBadge>\n  <ymt-badge severity=\"primary\" [aura]=\"true\" class=\"source-badge\"\n    [matTooltip]=\"'yuv.app.user-management.users.identitySource.external.tooltip' | translate\">\n    <mat-icon>{{ icons.sourceExternal }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.users.object.property.identitySource.external' | translate }}</span>\n  </ymt-badge>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .user-table{overflow:auto;height:100%}:host .user-row:hover{background-color:var(--ymt-hover-background)}:host mat-cell mat-icon.external-source{color:var(--ymt-primary);margin-left:.25rem}:host .source-badge{display:inline-flex;align-items:center;gap:.25rem}:host .source-badge mat-icon{font-size:1rem;width:1rem;height:1rem}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"] }]
-        }], propDecorators: { userDetailsComponent: [{
-                type: ViewChild,
-                args: [UserDetailsComponent]
-            }], pagination: [{
-                type: HostBinding,
-                args: ['class.pagination']
-            }] } });
+                        FocusableRowDirective,
+                    ], template: "@let railTitle = 'yuv.app.user-management.label.rail.title' | translate;\n<ymt-pane\n  [busy]=\"busy()\"\n  [topBarActions]=\"topBarActions\"\n  role=\"region\"\n  [attr.aria-label]=\"railTitle\"\n>\n  <ymt-pane-header\n    [icon]=\"'groups'\"\n    [title]=\"railTitle\"\n    [subtitle]=\"\n      'yuv.app.user-management.label.rail.subtitle' | translate : { count: groups().length }\n    \"\n  ></ymt-pane-header>\n  <ymt-pane-body>\n    <div\n      class=\"groups-list\"\n      role=\"listbox\"\n      tabindex=\"-1\"\n      [attr.aria-label]=\"railTitle\"\n      (keydown)=\"onListKeydown($event)\"\n    >\n      <div\n        ymusrmgmt-focusable-row\n        class=\"group-item\"\n        role=\"option\"\n        [attr.aria-selected]=\"!selectedGroupId()\"\n        [class.active]=\"!selectedGroupId()\"\n        [attr.tabindex]=\"activeIndex() === 0 ? 0 : -1\"\n        (click)=\"selectAllUsers()\"\n        (keydown.enter)=\"selectAllUsers()\"\n        (keydown.space)=\"$event.preventDefault(); selectAllUsers()\"\n      >\n        <span class=\"group-icon\"><mat-icon>family_group</mat-icon></span>\n        <span class=\"group-name\">{{\n          'yuv.app.user-management.label.rail.usersEntry' | translate\n        }}</span>\n      </div>\n\n      <div class=\"groups-divider\"></div>\n\n      @for (group of groups(); track group.id; let i = $index) {\n      <div\n        ymusrmgmt-focusable-row\n        class=\"group-item\"\n        role=\"option\"\n        [attr.aria-selected]=\"selectedGroupId() === group.id\"\n        [class.active]=\"selectedGroupId() === group.id\"\n        [attr.tabindex]=\"activeIndex() === i + 1 ? 0 : -1\"\n        [matTooltip]=\"group.description || ''\"\n        (click)=\"selectGroup(group)\"\n        (keydown.enter)=\"selectGroup(group)\"\n        (keydown.space)=\"$event.preventDefault(); selectGroup(group)\"\n      >\n        <span class=\"group-icon\"><mat-icon>group</mat-icon></span>\n        <span class=\"group-name\">{{ group.name }}</span>\n        <button\n          mat-icon-button\n          class=\"group-actions\"\n          [matMenuTriggerFor]=\"groupRowMenu\"\n          [matMenuTriggerData]=\"{ group: group }\"\n          [matTooltip]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n          [attr.aria-label]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n          [tabIndex]=\"activeIndex() === i + 1 ? 0 : -1\"\n          (click)=\"$event.stopPropagation(); selectGroup(group)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      </div>\n      }\n    </div>\n  </ymt-pane-body>\n</ymt-pane>\n\n<mat-menu #groupRowMenu=\"matMenu\">\n  <ng-template matMenuContent let-group=\"group\">\n    @for (action of getGroupRowActions(group); track action.id) {\n    <button mat-menu-item [disabled]=\"action.disabled\" (click)=\"action.callback?.(action)\">\n      <mat-icon>{{ action.icon }}</mat-icon>\n      <span>{{ action.label }}</span>\n    </button>\n    }\n  </ng-template>\n</mat-menu>\n", styles: [":host{display:block;height:100%}.groups-list{padding:var(--ymt-spacing-xs)}.group-item{display:flex;align-items:center;gap:.625rem;padding:var(--ymt-spacing-xs) .625rem;border-radius:var(--ymt-corner-xs);cursor:pointer;margin-bottom:var(--ymt-spacing-3xs)}.group-item:hover{background-color:var(--ymt-hover-background)}.group-item.active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host(:not(:focus-within)) .group-item.active{background-color:var(--ymt-selection-background);color:var(--ymt-on-selection-background)}.group-item .group-icon{width:var(--ymt-sizing-l);height:var(--ymt-sizing-l);border-radius:var(--ymt-corner-full);background-color:var(--ymt-surface-container-high);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ymt-text-color-subtle)}.group-item .group-icon mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}.group-item.active .group-icon{background-color:var(--ymt-surface);color:var(--ymt-primary)}:host(:not(:focus-within)) .group-item.active .group-icon{color:var(--ymt-text-color-subtle)}.group-item .group-name{flex:1;min-width:0;font:var(--ymt-font-title-smallest);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.group-item .group-actions{flex-shrink:0;color:inherit;width:var(--ymt-sizing-l);height:var(--ymt-sizing-l);padding:0}.group-item .group-actions mat-icon{font-size:1.125rem;width:1.125rem;height:1.125rem}.groups-divider{height:var(--ymt-outline-width);background-color:var(--ymt-outline-variant);margin:.375rem .625rem .625rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { selectedGroupId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedGroupId", required: false }] }], topBarActions: [{
+                type: Input
+            }], groupSelected: [{
+                type: Output
+            }], groupUpdated: [{
+                type: Output
+            }], groupDeleted: [{
+                type: Output
+            }], addMembersRequested: [{
+                type: Output
+            }], rowItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FocusableRowDirective), { isSignal: true }] }] } });
 
-const components$1 = [BusyOverlayDirective, YmtButtonDirective, DialogComponent, RolesSelectionComponent];
-const modules$1 = [
-    CommonModule,
-    ReactiveFormsModule,
-    TranslatePipe,
-    MatFormFieldModule,
-    MatSlideToggleModule,
-    MatInputModule
-];
+/**
+ * A small icon button for a `ymt-pane`'s top bar that hides or toggles a sibling area (e.g. in a
+ * `yuv-split-view`). Rotates its icon 180° when `rotated` is set, so a single icon (e.g.
+ * `left_panel_close`) can indicate both directions of a toggle.
+ */
+class PaneToggleButtonComponent {
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    tooltip = input.required(...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    rotated = input(false, ...(ngDevMode ? [{ debugName: "rotated" }] : /* istanbul ignore next */ []));
+    toggled = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PaneToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: PaneToggleButtonComponent, isStandalone: true, selector: "ymusrmgmt-pane-toggle-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, rotated: { classPropertyName: "rotated", publicName: "rotated", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggled: "toggled" }, ngImport: i0, template: "<button\n  ymtIconButton\n  icon-button-size=\"small\"\n  [style.transform]=\"rotated() ? 'rotate(180deg)' : null\"\n  [matTooltip]=\"tooltip()\"\n  [attr.aria-label]=\"tooltip()\"\n  (click)=\"toggled.emit()\"\n>\n  <mat-icon>{{ icon() }}</mat-icon>\n</button>\n", styles: ["button{opacity:calc(1 - var(--ymt-disabled-opacity))}button:focus,button:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PaneToggleButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymusrmgmt-pane-toggle-button', standalone: true, imports: [MatIconModule, MatTooltipModule, YmtIconButtonDirective], template: "<button\n  ymtIconButton\n  icon-button-size=\"small\"\n  [style.transform]=\"rotated() ? 'rotate(180deg)' : null\"\n  [matTooltip]=\"tooltip()\"\n  [attr.aria-label]=\"tooltip()\"\n  (click)=\"toggled.emit()\"\n>\n  <mat-icon>{{ icon() }}</mat-icon>\n</button>\n", styles: ["button{opacity:calc(1 - var(--ymt-disabled-opacity))}button:focus,button:hover{opacity:1}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], rotated: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotated", required: false }] }], toggled: [{ type: i0.Output, args: ["toggled"] }] } });
+
+/**
+ * The narrow icon+label strip a `yuv-split-view` area collapses to instead of disappearing
+ * entirely (`hideArea()`/`showArea()` still drive the actual split-view visibility - this is
+ * just the "way back in" rendered as a sibling of the split-view while an area is hidden).
+ *
+ * The gutter div is the whole interactive target (click, Enter, Space all expand it) - the inner
+ * icon is `aria-hidden` and has no click handler of its own, so it's purely decorative rather
+ * than a second, independently-focusable interactive control.
+ */
+class PaneGutterComponent {
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    tooltip = input.required(...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+    /** Flips the label to read bottom-to-top (`vertical-rl` reads top-to-bottom by default) - for a
+     * gutter whose collapsed pane sits to the left, so the label flows outward toward that edge. */
+    flipLabel = input(false, ...(ngDevMode ? [{ debugName: "flipLabel" }] : /* istanbul ignore next */ []));
+    expand = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PaneGutterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: PaneGutterComponent, isStandalone: true, selector: "ymusrmgmt-pane-gutter", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: true, transformFunction: null }, flipLabel: { classPropertyName: "flipLabel", publicName: "flipLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expand: "expand" }, ngImport: i0, template: "<ymt-pane>\n  <ymt-pane-body>\n    <div\n      class=\"pane-gutter\"\n      role=\"button\"\n      tabindex=\"0\"\n      [matTooltip]=\"tooltip()\"\n      [attr.aria-label]=\"tooltip()\"\n      (click)=\"expand.emit()\"\n      (keydown.enter)=\"expand.emit()\"\n      (keydown.space)=\"$event.preventDefault(); expand.emit()\"\n    >\n      <mat-icon class=\"icon\" aria-hidden=\"true\">{{ icon() }}</mat-icon>\n      <span class=\"label\" [class.label--btt]=\"flipLabel()\">{{ label() }}</span>\n    </div>\n  </ymt-pane-body>\n</ymt-pane>\n", styles: [":host{display:flex;flex:0 0 var(--ymt-sizing-3xl);width:var(--ymt-sizing-3xl)}ymt-pane{width:100%}.pane-gutter{height:100%;display:flex;flex-flow:column;align-items:center;gap:var(--ymt-spacing-s);padding-block-start:var(--ymt-spacing-xs);opacity:calc(1 - var(--ymt-disabled-opacity));cursor:pointer}.pane-gutter .icon{height:var(--ymt-sizing-s);width:var(--ymt-sizing-s);font-size:var(--ymt-sizing-s);line-height:1}.pane-gutter .label{font:var(--ymt-font-body-subtle);writing-mode:vertical-rl;white-space:nowrap}.pane-gutter .label--btt{transform:rotate(180deg)}.pane-gutter:focus,.pane-gutter:hover{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i7.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i7.YmtPaneBodyComponent, selector: "ymt-pane-body" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: PaneGutterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymusrmgmt-pane-gutter', standalone: true, imports: [MatIconModule, MatTooltipModule, YmtPanesModule], template: "<ymt-pane>\n  <ymt-pane-body>\n    <div\n      class=\"pane-gutter\"\n      role=\"button\"\n      tabindex=\"0\"\n      [matTooltip]=\"tooltip()\"\n      [attr.aria-label]=\"tooltip()\"\n      (click)=\"expand.emit()\"\n      (keydown.enter)=\"expand.emit()\"\n      (keydown.space)=\"$event.preventDefault(); expand.emit()\"\n    >\n      <mat-icon class=\"icon\" aria-hidden=\"true\">{{ icon() }}</mat-icon>\n      <span class=\"label\" [class.label--btt]=\"flipLabel()\">{{ label() }}</span>\n    </div>\n  </ymt-pane-body>\n</ymt-pane>\n", styles: [":host{display:flex;flex:0 0 var(--ymt-sizing-3xl);width:var(--ymt-sizing-3xl)}ymt-pane{width:100%}.pane-gutter{height:100%;display:flex;flex-flow:column;align-items:center;gap:var(--ymt-spacing-s);padding-block-start:var(--ymt-spacing-xs);opacity:calc(1 - var(--ymt-disabled-opacity));cursor:pointer}.pane-gutter .icon{height:var(--ymt-sizing-s);width:var(--ymt-sizing-s);font-size:var(--ymt-sizing-s);line-height:1}.pane-gutter .label{font:var(--ymt-font-body-subtle);writing-mode:vertical-rl;white-space:nowrap}.pane-gutter .label--btt{transform:rotate(180deg)}.pane-gutter:focus,.pane-gutter:hover{opacity:1}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: true }] }], flipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "flipLabel", required: false }] }], expand: [{ type: i0.Output, args: ["expand"] }] } });
+
+/** Initials shown on a user's avatar - falls back to the first two letters of the username if no name is set. */
+function getInitials(user) {
+    const initials = `${user.firstName?.trim()?.charAt(0) ?? ''}${user.lastName?.trim()?.charAt(0) ?? ''}`.toUpperCase();
+    return initials || user.username?.slice(0, 2).toUpperCase() || '?';
+}
+/**
+ * Deterministic avatar color derived from the user's id (or username as fallback) - the same user
+ * always gets the same color across renders of the users table.
+ */
+function getAvatarColor(user) {
+    const hue = hashString(user.id || user.username) % 360;
+    return {
+        background: `hsl(${hue}, 46%, 90%)`,
+        color: `hsl(${hue}, 45%, 32%)`,
+    };
+}
+function hashString(value) {
+    let hash = 0;
+    for (let i = 0; i < value.length; i++) {
+        hash = (hash * 31 + value.charCodeAt(i)) >>> 0;
+    }
+    return hash;
+}
+
+/**
+ * Shared avatar anatomy for a user - initials on a deterministic per-user color, plus corner
+ * badges for "disabled" and (optionally) "externally managed" state. Used by both the main user
+ * table and the add-members dialog's search-result/selected-users rows.
+ */
+class UserAvatarComponent {
+    user = input.required(...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    /** Whether to show either corner badge (disabled/externally-managed) at all - both are gated
+     * by this one flag rather than having a separate toggle per badge. */
+    showBadges = input(true, ...(ngDevMode ? [{ debugName: "showBadges" }] : /* istanbul ignore next */ []));
+    icons = APP_ICONS;
+    /** Memoized rather than called directly in the template - both hash a string and allocate a
+     * fresh object/do string work, and this component is instantiated once per row, so re-running
+     * them on every change-detection pass (not just when `user()` changes) would be wasted work. */
+    avatarColor = computed(() => getAvatarColor(this.user()), ...(ngDevMode ? [{ debugName: "avatarColor" }] : /* istanbul ignore next */ []));
+    initials = computed(() => getInitials(this.user()), ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: UserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: UserAvatarComponent, isStandalone: true, selector: "ymusrmgmt-user-avatar", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, showBadges: { classPropertyName: "showBadges", publicName: "showBadges", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  class=\"user-avatar\"\n  [class.is-disabled]=\"!user().enabled\"\n  [style.background]=\"avatarColor().background\"\n  [style.color]=\"avatarColor().color\"\n>\n  <span>{{ initials() }}</span>\n  @if (showBadges() && !user().enabled) { @let disabledLabel =\n  'yuv.app.user-management.users.property.disabled' | translate;\n  <span\n    class=\"avatar-disabled-badge\"\n    [matTooltip]=\"disabledLabel\"\n    [attr.aria-label]=\"disabledLabel\"\n  >\n    <mat-icon aria-hidden=\"true\">{{ icons.stateInactive }}</mat-icon>\n  </span>\n  } @if (showBadges() && user().externallyManaged) { @let externalLabel =\n  'yuv.app.user-management.users.label.identitySource.external.tooltip' | translate;\n  <span class=\"avatar-source-badge\" [matTooltip]=\"externalLabel\" [attr.aria-label]=\"externalLabel\">\n    <mat-icon aria-hidden=\"true\">{{ icons.sourceExternal }}</mat-icon>\n  </span>\n  }\n</div>\n", styles: [":host{display:contents}.user-avatar{position:relative;width:var(--ymt-sizing-2xl);height:var(--ymt-sizing-2xl);border-radius:var(--ymt-corner-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8125rem;font-weight:600;letter-spacing:.01em;-webkit-user-select:none;user-select:none}.user-avatar.is-disabled{filter:grayscale(1);opacity:.6}.avatar-disabled-badge{position:absolute;right:-.1875rem;bottom:-.1875rem;width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);border:.125rem solid var(--ymt-surface, #fff);display:flex;align-items:center;justify-content:center}.avatar-disabled-badge mat-icon{font-size:.625rem;width:.625rem;height:.625rem;line-height:.625rem}.avatar-disabled-badge{background-color:var(--ymt-surface-container-high)}.avatar-disabled-badge mat-icon{color:var(--ymt-text-color-subtle)}.avatar-source-badge{position:absolute;left:-.1875rem;bottom:-.1875rem;width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);border:.125rem solid var(--ymt-surface, #fff);display:flex;align-items:center;justify-content:center}.avatar-source-badge mat-icon{font-size:.625rem;width:.625rem;height:.625rem;line-height:.625rem}.avatar-source-badge{background-color:var(--ymt-primary-container)}.avatar-source-badge mat-icon{color:var(--ymt-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: UserAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymusrmgmt-user-avatar', standalone: true, imports: [MatIconModule, MatTooltipModule, TranslatePipe], template: "<div\n  class=\"user-avatar\"\n  [class.is-disabled]=\"!user().enabled\"\n  [style.background]=\"avatarColor().background\"\n  [style.color]=\"avatarColor().color\"\n>\n  <span>{{ initials() }}</span>\n  @if (showBadges() && !user().enabled) { @let disabledLabel =\n  'yuv.app.user-management.users.property.disabled' | translate;\n  <span\n    class=\"avatar-disabled-badge\"\n    [matTooltip]=\"disabledLabel\"\n    [attr.aria-label]=\"disabledLabel\"\n  >\n    <mat-icon aria-hidden=\"true\">{{ icons.stateInactive }}</mat-icon>\n  </span>\n  } @if (showBadges() && user().externallyManaged) { @let externalLabel =\n  'yuv.app.user-management.users.label.identitySource.external.tooltip' | translate;\n  <span class=\"avatar-source-badge\" [matTooltip]=\"externalLabel\" [attr.aria-label]=\"externalLabel\">\n    <mat-icon aria-hidden=\"true\">{{ icons.sourceExternal }}</mat-icon>\n  </span>\n  }\n</div>\n", styles: [":host{display:contents}.user-avatar{position:relative;width:var(--ymt-sizing-2xl);height:var(--ymt-sizing-2xl);border-radius:var(--ymt-corner-full);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8125rem;font-weight:600;letter-spacing:.01em;-webkit-user-select:none;user-select:none}.user-avatar.is-disabled{filter:grayscale(1);opacity:.6}.avatar-disabled-badge{position:absolute;right:-.1875rem;bottom:-.1875rem;width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);border:.125rem solid var(--ymt-surface, #fff);display:flex;align-items:center;justify-content:center}.avatar-disabled-badge mat-icon{font-size:.625rem;width:.625rem;height:.625rem;line-height:.625rem}.avatar-disabled-badge{background-color:var(--ymt-surface-container-high)}.avatar-disabled-badge mat-icon{color:var(--ymt-text-color-subtle)}.avatar-source-badge{position:absolute;left:-.1875rem;bottom:-.1875rem;width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs);border-radius:var(--ymt-corner-full);border:.125rem solid var(--ymt-surface, #fff);display:flex;align-items:center;justify-content:center}.avatar-source-badge mat-icon{font-size:.625rem;width:.625rem;height:.625rem;line-height:.625rem}.avatar-source-badge{background-color:var(--ymt-primary-container)}.avatar-source-badge mat-icon{color:var(--ymt-on-primary-container)}\n"] }]
+        }], propDecorators: { user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], showBadges: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBadges", required: false }] }] } });
+
+class GlobalAddButtonComponent {
+    #translateService = inject(TranslateService);
+    createUser = output();
+    createGroup = output();
+    menuItems = [
+        {
+            icon: APP_ICONS.actionCreateNewUser,
+            label: this.#translateService.instant('yuv.app.user-management.users.action.create.label'),
+            action: () => this.createUser.emit(),
+        },
+        {
+            icon: APP_ICONS.actionCreateNewGroup,
+            label: this.#translateService.instant('yuv.app.user-management.groups.action.create.label'),
+            action: () => this.createGroup.emit(),
+        },
+    ];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: GlobalAddButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: GlobalAddButtonComponent, isStandalone: true, selector: "ymusrmgmt-global-add-button", outputs: { createUser: "createUser", createGroup: "createGroup" }, host: { classAttribute: "ymusrmgmt-global-add" }, ngImport: i0, template: "<button\n  mat-mini-fab\n  [matTooltip]=\"'yuv.app.user-management.common.action.add.label' | translate\"\n  [attr.aria-label]=\"'yuv.app.user-management.common.action.add.label' | translate\"\n  [matMenuTriggerFor]=\"menu\"\n>\n  <mat-icon>add</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"global-add-button-menu\">\n  @for (item of menuItems; track item.label) {\n  <button mat-menu-item (click)=\"item.action()\">\n    <mat-icon>{{ item.icon }}</mat-icon>\n    <span>{{ item.label }}</span>\n  </button>\n  }\n</mat-menu>\n", styles: [".global-add-button-menu{border:var(--ymt-outline-width) solid var(--ymt-primary-container);--mat-menu-container-color: var(--ymt-primary-container);--mat-menu-item-hover-state-layer-color: color-mix(in srgb, var(--ymt-primary) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent);--mat-menu-item-label-text-color: var(--ymt-on-primary-container);--mat-menu-item-icon-color: var(--ymt-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: GlobalAddButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymusrmgmt-global-add-button', standalone: true, imports: [TranslatePipe, MatButtonModule, MatIconModule, MatMenuModule, MatTooltipModule], encapsulation: ViewEncapsulation.None, host: {
+                        class: 'ymusrmgmt-global-add',
+                    }, template: "<button\n  mat-mini-fab\n  [matTooltip]=\"'yuv.app.user-management.common.action.add.label' | translate\"\n  [attr.aria-label]=\"'yuv.app.user-management.common.action.add.label' | translate\"\n  [matMenuTriggerFor]=\"menu\"\n>\n  <mat-icon>add</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"global-add-button-menu\">\n  @for (item of menuItems; track item.label) {\n  <button mat-menu-item (click)=\"item.action()\">\n    <mat-icon>{{ item.icon }}</mat-icon>\n    <span>{{ item.label }}</span>\n  </button>\n  }\n</mat-menu>\n", styles: [".global-add-button-menu{border:var(--ymt-outline-width) solid var(--ymt-primary-container);--mat-menu-container-color: var(--ymt-primary-container);--mat-menu-item-hover-state-layer-color: color-mix(in srgb, var(--ymt-primary) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent);--mat-menu-item-label-text-color: var(--ymt-on-primary-container);--mat-menu-item-icon-color: var(--ymt-on-primary-container)}\n"] }]
+        }], propDecorators: { createUser: [{ type: i0.Output, args: ["createUser"] }], createGroup: [{ type: i0.Output, args: ["createGroup"] }] } });
+
+const components$4 = [BusyOverlayDirective, YmtButtonDirective, DialogComponent];
+const modules$4 = [
+    CommonModule,
+    ReactiveFormsModule,
+    TranslatePipe,
+    MatFormFieldModule,
+    MatInputModule,
+];
+class CreateUserComponent {
+    /** Shared `MatDialog.open()` config, so every call site opening this dialog stays in sync. */
+    static DIALOG_CONFIG = {
+        width: '600px',
+        maxWidth: '90vw',
+    };
+    #fb = inject(FormBuilder);
+    #userManagementService = inject(YuvUserManagementService);
+    #dialogRef = inject((MatDialogRef));
+    #translateService = inject(TranslateService);
+    #logger = inject(Logger);
+    busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    username = new FormControl('', [
+        Validators.required,
+        Validators.minLength(3),
+        Validators.maxLength(255),
+        Validators.pattern('^[a-zA-Z0-9._-]*$'),
+    ]);
+    email = new FormControl('', [Validators.required, Validators.email]);
+    firstname = new FormControl('', [
+        Validators.minLength(1),
+        Validators.maxLength(255),
+        Validators.pattern('^[^#!<>&/%=;*§$()[\\]{}]*$'),
+    ]);
+    lastname = new FormControl('', [
+        Validators.minLength(1),
+        Validators.maxLength(255),
+        Validators.pattern('^[^#!<>&/%=;*§$()[\\]{}]*$'),
+    ]);
+    form = this.#fb.group({
+        username: this.username,
+        email: this.email,
+        firstname: this.firstname,
+        lastname: this.lastname,
+    });
+    changedInput = signal(undefined, ...(ngDevMode ? [{ debugName: "changedInput" }] : /* istanbul ignore next */ []));
+    disabledSubmit = linkedSignal({ ...(ngDevMode ? { debugName: "disabledSubmit" } : /* istanbul ignore next */ {}), source: this.changedInput,
+        computation: () => {
+            return this.busy() || this.form.invalid;
+        } });
+    createUser() {
+        let createdUserId;
+        const createParams = this.form.value;
+        this.busy.set(true);
+        this.error.set(undefined);
+        const createUserRequest = {
+            username: createParams.username,
+            email: createParams.email,
+            firstName: createParams.firstname ? createParams.firstname : null,
+            lastName: createParams.lastname ? createParams.lastname : null,
+            enabled: true,
+            roles: [],
+        };
+        this.#userManagementService.createUser(createUserRequest, true).subscribe({
+            error: (e) => {
+                const errorKey = resolveErrorMessageKey('yuv.app.user-management.users.action.create', e.status, { 409: 'conflict' });
+                this.error.set(this.#translateService.instant(errorKey));
+                this.#logger.error(`Failed to create user with username ${createUserRequest.username}`, e);
+                this.busy.set(false);
+            },
+            next: (userId) => {
+                createdUserId = userId;
+            },
+            complete: () => {
+                this.busy.set(false);
+                // Returns the full user (not just its id) so the caller can select it in the table
+                // without a redundant fetch - the backend only echoes back the id on create.
+                this.#dialogRef.close({
+                    id: createdUserId,
+                    username: createUserRequest.username,
+                    email: createUserRequest.email,
+                    firstName: createUserRequest.firstName ?? undefined,
+                    lastName: createUserRequest.lastName ?? undefined,
+                    enabled: createUserRequest.enabled,
+                });
+            },
+        });
+    }
+    close() {
+        this.#dialogRef.close();
+    }
+    ngAfterViewInit() {
+        this.form.valueChanges.subscribe((value) => {
+            this.changedInput.set(value);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CreateUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: CreateUserComponent, isStandalone: true, selector: "ymusrmgmt-create-user", ngImport: i0, template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"'yuv.app.user-management.users.action.create.label' | translate\"\n>\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.property.username' | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"username\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.username' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.email' | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"email\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.firstname' | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"firstname\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.lastname' | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"lastname\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n        />\n      </mat-form-field>\n    </form>\n    @if (error()) {\n    <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\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{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CreateUserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymusrmgmt-create-user', standalone: true, imports: [...modules$4, ...components$4], template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"'yuv.app.user-management.users.action.create.label' | translate\"\n>\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.property.username' | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"username\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.username' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.email' | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"email\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.firstname' | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"firstname\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.users.property.lastname' | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"lastname\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n        />\n      </mat-form-field>\n    </form>\n    @if (error()) {\n    <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\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{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}\n"] }]
+        }] });
+
+const components$3 = [
+    BusyOverlayDirective,
+    YmtButtonDirective,
+    DialogComponent,
+    RolesSelectionComponent,
+];
+const modules$3 = [
+    CommonModule,
+    ReactiveFormsModule,
+    TranslatePipe,
+    MatFormFieldModule,
+    MatSlideToggleModule,
+    MatInputModule,
+];
 class CreateGroupComponent {
+    /** Shared `MatDialog.open()` config, so every call site opening this dialog stays in sync. */
+    static DIALOG_CONFIG = {
+        width: '600px',
+        maxWidth: '90vw',
+    };
     #fb = inject(FormBuilder);
     #userManagementService = inject(YuvUserManagementService);
     #dialogRef = inject((MatDialogRef));
@@ -1198,13 +1300,18 @@ class CreateGroupComponent {
     busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
     error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     allAvailableRoles = signal([], ...(ngDevMode ? [{ debugName: "allAvailableRoles" }] : /* istanbul ignore next */ []));
-    allUsers = signal([], ...(ngDevMode ? [{ debugName: "allUsers" }] : /* istanbul ignore next */ []));
     groupRoles = signal([], ...(ngDevMode ? [{ debugName: "groupRoles" }] : /* istanbul ignore next */ []));
-    groupMembers = signal([], ...(ngDevMode ? [{ debugName: "groupMembers" }] : /* istanbul ignore next */ []));
-    name = new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(255), Validators.pattern('^[a-zA-Z0-9._-]*$')]);
+    name = new FormControl('', [
+        Validators.required,
+        Validators.minLength(3),
+        Validators.maxLength(255),
+        Validators.pattern('^[a-zA-Z0-9._-]*$'),
+    ]);
+    description = new FormControl('');
     roles = new FormControl([]);
     form = this.#fb.group({
         name: this.name,
+        description: this.description,
         roles: this.roles,
     });
     changedInput = signal(undefined, ...(ngDevMode ? [{ debugName: "changedInput" }] : /* istanbul ignore next */ []));
@@ -1219,7 +1326,7 @@ class CreateGroupComponent {
             },
             error: (e) => {
                 this.#logger.error('Failed to fetch roles', e);
-            }
+            },
         });
     }
     createGroup() {
@@ -1229,36 +1336,28 @@ class CreateGroupComponent {
         this.error.set(undefined);
         const createGroupRequest = {
             name: createParams.name,
+            description: createParams.description,
             roles: createParams.roles,
-            members: []
         };
-        this.#userManagementService
-            .createGroup(createGroupRequest)
-            .subscribe({
+        this.#userManagementService.createGroup(createGroupRequest).subscribe({
             error: (e) => {
-                switch (e.status) {
-                    case 409: {
-                        const errorMsg = JSON.parse(e.error).message;
-                        if (errorMsg === "Group exists with same username") {
-                            this.error.set(this.#translateService.instant("yuv.app.user-management.groups.action.create.error.groupExists"));
-                        }
-                        else {
-                            this.error.set(this.#translateService.instant("yuv.app.user-management.groups.action.create.error.unknown"));
-                        }
-                        break;
-                    }
-                    default:
-                        this.error.set(this.#translateService.instant("yuv.app.user-management.groups.action.create.error.unknown"));
-                }
-                this.#logger.error(`Failed to create user with username ${createGroupRequest.name}`, e);
+                const errorKey = resolveErrorMessageKey('yuv.app.user-management.groups.action.create', e.status);
+                this.error.set(this.#translateService.instant(errorKey));
+                this.#logger.error(`Failed to create group with name ${createGroupRequest.name}`, e);
                 this.busy.set(false);
             },
-            next: (userId) => {
-                createdGroupId = userId;
+            next: (groupId) => {
+                createdGroupId = groupId;
             },
             complete: () => {
                 this.busy.set(false);
-                this.#dialogRef.close(createdGroupId);
+                // Returns the full group (not just its id) so the caller can select it in the rail
+                // without a redundant fetch - the backend only echoes back the id on create.
+                this.#dialogRef.close({
+                    id: createdGroupId,
+                    name: createGroupRequest.name,
+                    description: createGroupRequest.description,
+                });
             },
         });
     }
@@ -1275,90 +1374,442 @@ class CreateGroupComponent {
         this.form.patchValue({ roles: roles });
         this.roles.markAsTouched(); // Mark as touched to trigger validation display
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CreateGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: CreateGroupComponent, isStandalone: true, selector: "ymusrmgmt-create-group", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.groups.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createGroup()\">\n      {{ 'yuv.app.user-management.groups.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CreateGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: CreateGroupComponent, isStandalone: true, selector: "ymusrmgmt-create-group", ngImport: i0, template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"'yuv.app.user-management.groups.action.create.label' | translate\"\n>\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.groups.property.name' | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"name\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.groups.property.name' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\n          'yuv.app.user-management.groups.property.description' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"description\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.groups.property.description' | translate\"\n        />\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\"\n        >\n        </ymusrmgmt-role-selection>\n      </div>\n    </form>\n    @if (error()) {\n    <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.groups.action.button.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createGroup()\">\n      {{ 'yuv.app.user-management.groups.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CreateGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CreateGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymusrmgmt-create-group', standalone: true, imports: [...modules$1, ...components$1], host: {
-                        '[class.busy]': '!busy()',
-                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.create.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\"/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.groups.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createGroup()\">\n      {{ 'yuv.app.user-management.groups.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form #enabledPropDiv{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: 'ymusrmgmt-create-group', standalone: true, imports: [...modules$3, ...components$3], template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"'yuv.app.user-management.groups.action.create.label' | translate\"\n>\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ 'yuv.app.user-management.groups.property.name' | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"name\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.groups.property.name' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{\n          'yuv.app.user-management.groups.property.description' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"description\"\n          type=\"text\"\n          [attr.aria-label]=\"'yuv.app.user-management.groups.property.description' | translate\"\n        />\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\"\n        >\n        </ymusrmgmt-role-selection>\n      </div>\n    </form>\n    @if (error()) {\n    <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.groups.action.button.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"createGroup()\">\n      {{ 'yuv.app.user-management.groups.action.button.create' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}\n"] }]
         }], ctorParameters: () => [] });
 
-class GroupDetailsComponent {
-    userService;
-    formBuilder;
-    groupDetails = signal(undefined, ...(ngDevMode ? [{ debugName: "groupDetails" }] : /* istanbul ignore next */ []));
-    groupDetailsForm;
-    currentGroupId;
-    set groupId(value) {
-        this.currentGroupId = value;
-        this.loadGroupDetails();
-    }
-    loadGroupDetails() {
-        if (this.currentGroupId) {
-            this.userService.getGroupDetails(this.currentGroupId).subscribe(group => {
-                this.groupDetails.set(group);
-                this.groupDetailsForm.patchValue({
-                    id: group.id,
-                    name: group.name
-                });
-            });
+const components$2 = [BusyOverlayDirective, YmtButtonDirective, DialogComponent, TabGuardDirective];
+const modules$2 = [
+    CommonModule,
+    ReactiveFormsModule,
+    TranslatePipe,
+    ClipboardModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatTabsModule,
+    MatTooltipModule,
+];
+/** Placeholder shown in the client secret field of an already configured provider; the backend never returns the real secret. */
+const FAKE_CLIENT_SECRET = '••••••••••••••••';
+class SettingsComponent {
+    /** Shared `MatDialog.open()` config, so every call site opening this dialog stays in sync. */
+    static DIALOG_CONFIG = {
+        width: '600px',
+        maxWidth: '90vw'
+    };
+    #fb = inject(FormBuilder);
+    #userManagementService = inject(YuvUserManagementService);
+    #dialogRef = inject((MatDialogRef));
+    #translateService = inject(TranslateService);
+    #notificationService = inject(NotificationService);
+    #logger = inject(Logger);
+    busy = signal(true, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** True if the tenant has no OIDC identity provider configured (backend responds with 404). */
+    notConfigured = signal(false, ...(ngDevMode ? [{ debugName: "notConfigured" }] : /* istanbul ignore next */ []));
+    /** True once the user has asked to add a provider from the empty-state hint, revealing the blank setup form. */
+    addStarted = signal(false, ...(ngDevMode ? [{ debugName: "addStarted" }] : /* istanbul ignore next */ []));
+    /** The form (blank, for first setup, or pre-filled, for editing) is showing - authentication tab only. */
+    showForm = computed(() => this.addStarted() || !!this.provider(), ...(ngDevMode ? [{ debugName: "showForm" }] : /* istanbul ignore next */ []));
+    provider = signal(undefined, ...(ngDevMode ? [{ debugName: "provider" }] : /* istanbul ignore next */ []));
+    /** Tenant-specific values needed to configure an external identity provider - available regardless of `provider()`. */
+    setupInfo = signal(undefined, ...(ngDevMode ? [{ debugName: "setupInfo" }] : /* istanbul ignore next */ []));
+    redirectUri = computed(() => this.setupInfo()?.redirectUri, ...(ngDevMode ? [{ debugName: "redirectUri" }] : /* istanbul ignore next */ []));
+    /** Null if the tenant has no SCIM client provisioned - shown as an "unavailable" hint in the provisioning tab. */
+    scimProvisioning = computed(() => this.setupInfo()?.scimProvisioning, ...(ngDevMode ? [{ debugName: "scimProvisioning" }] : /* istanbul ignore next */ []));
+    tenantUrl = computed(() => this.scimProvisioning()?.tenantUrl, ...(ngDevMode ? [{ debugName: "tenantUrl" }] : /* istanbul ignore next */ []));
+    displayName = new FormControl('', [Validators.required]);
+    discoveryUrl = new FormControl('', [Validators.required]);
+    clientId = new FormControl('', [Validators.required]);
+    clientSecret = new FormControl('', [Validators.required]);
+    form = this.#fb.group({
+        displayName: this.displayName,
+        discoveryUrl: this.discoveryUrl,
+        clientId: this.clientId,
+        clientSecret: this.clientSecret,
+    });
+    /**
+     * Guards both the save button and `configure()` itself: the form must be valid, and editing an
+     * already-configured provider additionally requires at least one field to be dirty (nothing to
+     * save otherwise). On first setup, `clientSecret` starts blank and required, so `form.invalid`
+     * alone already gates it. A plain method, not a `computed()`: `FormGroup.invalid`/`.dirty` aren't
+     * signals, so a computed reading them would never be invalidated after its first evaluation.
+     */
+    disabledSubmit() {
+        return this.busy() || this.form.invalid || (!!this.provider() && !this.form.dirty);
+    }
+    constructor() {
+        this.#reload();
+    }
+    /**
+     * Fetches the OIDC identity provider configuration (null if none is configured, a 404) and the
+     * tenant's setup info (redirect URI, SCIM provisioning) in parallel - the latter is available
+     * independent of whether a provider is configured, so both tabs can always render.
+     */
+    #load() {
+        this.busy.set(true);
+        this.error.set(undefined);
+        return forkJoin({
+            provider: this.#userManagementService.fetchOIDCProviderConfig().pipe(catchError((e) => (e.status === 404 ? of(null) : throwError(() => e)))),
+            setupInfo: this.#userManagementService.fetchIdentityProviderSetupInfo(),
+        });
+    }
+    /** Runs `#load()` and applies its result, optionally continuing on success - used for the initial load and after first-time setup. */
+    #reload(onLoaded) {
+        this.#load().subscribe({
+            next: ({ provider, setupInfo }) => {
+                this.#applyLoadResult(provider, setupInfo);
+                onLoaded?.();
+            },
+            error: (e) => this.#handleLoadError(e),
+        });
+    }
+    #applyLoadResult(provider, setupInfo) {
+        this.setupInfo.set(setupInfo);
+        if (provider) {
+            this.provider.set(provider);
+            this.notConfigured.set(false);
+            this.addStarted.set(false);
+            this.#populateForm(provider);
         }
         else {
-            this.groupDetails.set(undefined);
+            this.provider.set(undefined);
+            this.notConfigured.set(true);
         }
+        this.busy.set(false);
+    }
+    #handleLoadError(e) {
+        const errorKey = resolveErrorMessageKey('yuv.app.user-management.settings.oidc.label', e.status);
+        this.error.set(this.#translateService.instant(errorKey));
+        this.#logger.error('Failed to load identity provider settings', e);
+        this.busy.set(false);
     }
     /**
-     * Refresh the user details by reloading the data from the server
+     * Fills the form, pristine, from an already-configured provider - or blanks it when called
+     * without one, e.g. for a fresh "add". The client secret is never returned by the backend, so an
+     * existing provider gets the placeholder instead, and re-typing it (marking it dirty) is what
+     * unlocks saving again: since the backend takes a full replacement on every save, editing any of
+     * the other fields still requires the real secret to be supplied alongside them.
      */
-    refresh() {
-        this.loadGroupDetails();
-    }
-    constructor(userService, formBuilder) {
-        this.userService = userService;
-        this.formBuilder = formBuilder;
-        this.groupDetailsForm = this.formBuilder.group({
-            id: [{ value: '' }],
-            name: [{ value: '' }]
+    #populateForm(provider) {
+        this.displayName.setValue(provider?.displayName ?? '');
+        this.discoveryUrl.setValue(provider?.config?.['metadataDescriptorUrl'] ?? '');
+        this.clientId.setValue(provider?.config?.['clientId'] ?? '');
+        this.clientSecret.setValue(provider ? FAKE_CLIENT_SECRET : '');
+        this.form.markAsPristine();
+    }
+    /** Reveals the blank setup form from the empty-state hint. */
+    startAdd() {
+        this.#populateForm();
+        this.addStarted.set(true);
+    }
+    /**
+     * Submits the form to `setOIDCProviderConfig` - both the very first setup and every later edit
+     * of an already-configured provider go through this same call. `clientSecret` is only included
+     * in the request when re-typed (dirty) - left out otherwise, so the backend keeps the existing
+     * secret rather than overwriting it with the placeholder text.
+     */
+    configure() {
+        if (this.disabledSubmit())
+            return;
+        const isFirstSetup = !this.provider();
+        this.busy.set(true);
+        this.error.set(undefined);
+        const config = {
+            // The discovery URL must be sent as `metadataDescriptorUrl` — the backend resolves the
+            // OIDC endpoints (authorizationUrl, tokenUrl, jwksUrl, ...) from the discovery document.
+            metadataDescriptorUrl: this.discoveryUrl.value?.trim() ?? '',
+            clientId: this.clientId.value?.trim() ?? '',
+            defaultScope: 'openid profile',
+        };
+        if (isFirstSetup || this.clientSecret.dirty) {
+            config['clientSecret'] = this.clientSecret.value ?? '';
+        }
+        const providerConfig = {
+            displayName: this.displayName.value?.trim() ?? '',
+            config,
+        };
+        this.#userManagementService.setOIDCProviderConfig(providerConfig).subscribe({
+            next: () => {
+                const notifySuccess = () => this.#notificationService.success(this.#translateService.instant(isFirstSetup
+                    ? 'yuv.app.user-management.settings.oidc.action.configure.success'
+                    : 'yuv.app.user-management.settings.oidc.action.update.success'));
+                if (isFirstSetup) {
+                    // First-time setup may newly link the SCIM extension, so setup-info needs a full
+                    // re-fetch too; re-use `#reload()` rather than duplicating its subscribe logic.
+                    this.#reload(notifySuccess);
+                }
+                else {
+                    // A later edit only ever changes the provider itself - setup-info stays the same.
+                    this.#userManagementService.fetchOIDCProviderConfig().subscribe({
+                        next: (provider) => {
+                            this.#applyLoadResult(provider, this.setupInfo());
+                            notifySuccess();
+                        },
+                        error: (e) => this.#handleLoadError(e),
+                    });
+                }
+            },
+            error: (e) => {
+                // 422: the backend could not resolve the OIDC endpoints from the discovery URL
+                this.error.set(this.#translateService.instant(e.status === 422
+                    ? 'yuv.app.user-management.settings.oidc.action.configure.error.discovery'
+                    : 'yuv.app.user-management.settings.oidc.action.configure.error.unknown'));
+                this.#logger.error('Failed to configure OIDC identity provider', e);
+                this.busy.set(false);
+            },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GroupDetailsComponent, deps: [{ token: YuvUserManagementService }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: GroupDetailsComponent, isStandalone: true, selector: "ymusrmgmt-group-details", inputs: { groupId: "groupId" }, ngImport: i0, template: "        \n@let currentGroupDetails = groupDetails();\n@if (currentGroupDetails) {\n  <form [formGroup]=\"groupDetailsForm\" class=\"group-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.groups.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.name' | translate)}}</mat-label>\n      <input matInput formControlName=\"name\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentGroupDetails.roles) {\n          @for (role of currentGroupDetails.roles | sortRolesByLabel; track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentGroupDetails.roles.indexOf(role) === -1\" [matTooltip]=\"role | roleTooltip\"><div class=\"chip\">{{role | roleLabel}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field> \n      <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.members' | translate)}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @if (currentGroupDetails.members) {\n            @for (member of currentGroupDetails.members.sort(); track member) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>           \n  </form>\n} @else {\n  <p>{{('yuv.app.user-management.groups.details.empty' | translate)}}</p>\n}\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .group-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .group-details-form mat-chip-row{overflow:hidden}:host .group-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "ngmodule", type: MatTabsModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: RoleLabelPipe, name: "roleLabel" }, { kind: "pipe", type: RoleTooltipPipe, name: "roleTooltip" }, { kind: "pipe", type: SortRolesByLabelPipe, name: "sortRolesByLabel" }] });
+    /**
+     * Asks the user to confirm, then reverts (deletes) the OIDC identity provider configuration -
+     * the dialog stays open, falling back to the empty state. Only the setup info needs a re-fetch
+     * (deleting unlinks the SCIM provisioning extension, so it may have changed) - the provider is
+     * already known gone, so re-fetching it too would just be a second round trip for a 404.
+     */
+    revert() {
+        this.#userManagementService.deleteOIDCProviderConfig().subscribe({
+            next: (deleted) => {
+                if (!deleted)
+                    return;
+                this.#userManagementService.fetchIdentityProviderSetupInfo().subscribe({
+                    next: (setupInfo) => {
+                        this.#applyLoadResult(null, setupInfo);
+                        this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.reset.success'));
+                    },
+                    error: (e) => this.#handleLoadError(e),
+                });
+            },
+            error: (e) => {
+                this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.reset.error'));
+                this.#logger.error('Failed to reset OIDC identity provider configuration', e);
+            },
+        });
+    }
+    /** Handles the `cdkCopyToClipboardCopied` output, which reports whether the copy succeeded. */
+    onCopied(success) {
+        if (success) {
+            this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.copy.success'));
+        }
+        else {
+            this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.settings.oidc.action.copy.error'));
+        }
+    }
+    close() {
+        this.#dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: SettingsComponent, isStandalone: true, selector: "ymusrmgmt-settings", ngImport: i0, template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"'yuv.app.user-management.settings.label.dialog.title' | translate\"\n>\n  <main class=\"yuv-dialog-content\">\n    <ng-template\n      #editableField\n      let-labelKey=\"labelKey\"\n      let-control=\"control\"\n      let-type=\"type\"\n      let-placeholder=\"placeholder\"\n      let-autocomplete=\"autocomplete\"\n    >\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ labelKey | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"control\"\n          [type]=\"type || 'text'\"\n          [placeholder]=\"placeholder || ''\"\n          [autocomplete]=\"autocomplete || 'off'\"\n          [attr.aria-label]=\"labelKey | translate\"\n        />\n      </mat-form-field>\n    </ng-template>\n    <ng-template\n      #readonlyField\n      let-labelKey=\"labelKey\"\n      let-value=\"value\"\n      let-type=\"type\"\n      let-copyable=\"copyable\"\n    >\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ labelKey | translate }}</mat-label>\n        <input\n          matInput\n          readonly\n          [type]=\"type || 'text'\"\n          [attr.tabindex]=\"-1\"\n          [value]=\"value || '\u2014'\"\n          [attr.aria-label]=\"labelKey | translate\"\n        />\n        @if (copyable && value) {\n        <button\n          matSuffix\n          mat-icon-button\n          class=\"copy-button\"\n          type=\"button\"\n          [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n          [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n          [cdkCopyToClipboard]=\"value\"\n          (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n        >\n          <mat-icon>content_copy</mat-icon>\n        </button>\n        }\n      </mat-form-field>\n    </ng-template>\n\n    @if (!showForm()) {\n    <div class=\"empty-state\">\n      <mat-icon class=\"empty-state-icon\" aria-hidden=\"true\">admin_panel_settings</mat-icon>\n      <p class=\"empty-state-title\">\n        {{ 'yuv.app.user-management.settings.oidc.label.notConfigured' | translate }}\n      </p>\n      <p class=\"empty-state-description\">\n        {{ 'yuv.app.user-management.settings.oidc.label.setup.description' | translate }}\n      </p>\n      <button ymtButton=\"primary\" type=\"button\" (click)=\"startAdd()\">\n        {{ 'yuv.app.user-management.settings.oidc.action.setup.label' | translate }}\n      </button>\n    </div>\n    } @else {\n    <mat-tab-group yuvTabGuardDisable>\n      <mat-tab [label]=\"'yuv.app.user-management.settings.oidc.tab.authentication' | translate\">\n        <p class=\"hint\">\n          {{ 'yuv.app.user-management.settings.oidc.label.setup.hint' | translate }}\n        </p>\n        <form [formGroup]=\"form\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              editableField;\n              context: {\n                labelKey: 'yuv.app.user-management.settings.oidc.property.displayName',\n                control: displayName,\n                placeholder: 'e.g. Microsoft Entra ID'\n              }\n            \"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"\n              editableField;\n              context: {\n                labelKey: 'yuv.app.user-management.settings.oidc.property.discoveryUrl',\n                control: discoveryUrl,\n                placeholder:\n                  'e.g. https://login.microsoftonline.com/<entra-tenant-id>/v2.0/.well-known/openid-configuration'\n              }\n            \"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"\n              editableField;\n              context: {\n                labelKey: 'yuv.app.user-management.settings.oidc.property.clientId',\n                control: clientId,\n                placeholder: 'e.g. yuuvis'\n              }\n            \"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"\n              editableField;\n              context: {\n                labelKey: 'yuv.app.user-management.settings.oidc.property.clientSecret',\n                control: clientSecret,\n                type: 'password',\n                autocomplete: 'new-password'\n              }\n            \"\n          ></ng-container>\n          @if (redirectUri(); as uri) {\n          <hr class=\"divider\" />\n          <p class=\"hint\">\n            {{ 'yuv.app.user-management.settings.oidc.property.redirectUri.hint' | translate }}\n          </p>\n          <ng-container\n            *ngTemplateOutlet=\"\n              readonlyField;\n              context: {\n                labelKey: 'yuv.app.user-management.settings.oidc.property.redirectUri',\n                value: uri,\n                copyable: true\n              }\n            \"\n          ></ng-container>\n          }\n        </form>\n      </mat-tab>\n      <mat-tab\n        [label]=\"'yuv.app.user-management.settings.oidc.label.section.provisioning' | translate\"\n      >\n        @if (scimProvisioning(); as scimProvisioning) { @if (provider(); as oidcProvider) {\n        <p class=\"hint\">\n          {{\n            'yuv.app.user-management.settings.oidc.label.provisioning.hint'\n              | translate : { provider: oidcProvider.displayName }\n          }}\n        </p>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"\n            readonlyField;\n            context: {\n              labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tenantUrl',\n              value: tenantUrl(),\n              copyable: true\n            }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            readonlyField;\n            context: {\n              labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tokenUrl',\n              value: scimProvisioning.tokenEndpoint,\n              copyable: true\n            }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            readonlyField;\n            context: {\n              labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientName',\n              value: scimProvisioning.clientId,\n              copyable: true\n            }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            readonlyField;\n            context: {\n              labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientSecret',\n              value: scimProvisioning.clientSecret,\n              type: 'password',\n              copyable: true\n            }\n          \"\n        ></ng-container>\n        } @else {\n        <p class=\"hint\">\n          {{ 'yuv.app.user-management.settings.oidc.label.provisioning.unavailable' | translate }}\n        </p>\n        }\n      </mat-tab>\n    </mat-tab-group>\n    } @if (error()) {\n    <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    @if (provider()) {\n    <!--\n      `ymt-button--danger` is added explicitly (not just relying on `ymtButton=\"danger\"`):\n      YmtButtonDirective has a bug where its own dynamically-added `ymt-button--danger` class gets\n      wiped when it creates the underlying MatButton (which overwrites the host's `class`\n      attribute) and never restored, since the directive's `ngOnInit` snapshots \"classes to\n      restore\" before adding it. A class already present in the template survives that wipe, so\n      this is what actually makes the button render with danger colors. Don't remove it as a\n      seeming duplicate.\n    -->\n    <button\n      ymtButton=\"danger\"\n      class=\"ymt-button--danger footer-start\"\n      [disabled]=\"busy()\"\n      (click)=\"revert()\"\n    >\n      <mat-icon>reset_wrench</mat-icon>\n      {{ 'yuv.app.user-management.settings.oidc.action.reset.label' | translate }}\n    </button>\n    }\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.settings.action.button.cancel' | translate }}\n    </button>\n    @if (showForm()) {\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"configure()\">\n      {{ 'yuv.app.user-management.settings.oidc.action.save.label' | translate }}\n    </button>\n    }\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main{min-height:var(--ymt-sizing-7xl)}:host main .yuv-form-field input::placeholder{color:var(--ymt-text-color-subtle, inherit);font-size:.9em;opacity:1}:host main .empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ymt-spacing-m);width:100%;padding:var(--ymt-spacing-4xl) var(--ymt-spacing-l);justify-content:center;min-height:var(--ymt-sizing-7xl)}:host main .empty-state .empty-state-icon{width:var(--ymt-sizing-5xl);height:var(--ymt-sizing-5xl);border-radius:var(--ymt-corner-full);background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container);display:flex;align-items:center;justify-content:center;flex-shrink:0}:host main .empty-state .empty-state-title{font:var(--ymt-font-headline-small);color:var(--ymt-text-color);margin:0}:host main .empty-state .empty-state-description{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);max-width:80ch;margin:0}:host main .divider{border:none;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);margin:var(--ymt-spacing-m) 0}:host main ::ng-deep .mat-mdc-tab-body-content{padding-top:var(--ymt-spacing-m)}:host footer{display:flex;flex:1;align-items:center;gap:calc(var(--ymt-font-body) / 2)}:host footer .footer-start{margin-inline-end:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ClipboardModule }, { kind: "directive", type: i1.CdkCopyToClipboard, selector: "[cdkCopyToClipboard]", inputs: ["cdkCopyToClipboard", "cdkCopyToClipboardAttempts"], outputs: ["cdkCopyToClipboardCopied"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatTabsModule }, { kind: "component", type: i8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i8.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: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "directive", type: TabGuardDirective, selector: "mat-tab-group[yuvTabGuardDisable]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GroupDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SettingsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymusrmgmt-group-details', imports: [
-                        MatCardModule,
-                        MatChipsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatIconModule,
-                        MatCheckboxModule,
-                        MatSlideToggleModule,
-                        MatTabsModule,
-                        MatTooltipModule,
-                        ReactiveFormsModule,
-                        TranslatePipe,
-                        RoleLabelPipe,
-                        RoleTooltipPipe,
-                        SortRolesByLabelPipe
-                    ], template: "        \n@let currentGroupDetails = groupDetails();\n@if (currentGroupDetails) {\n  <form [formGroup]=\"groupDetailsForm\" class=\"group-details-form\">\n    <mat-form-field appearance=\"outline\">\n      <mat-label>{{('yuv.app.user-management.groups.object.property.id' | translate)}}</mat-label>\n      <input matInput formControlName=\"id\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.name' | translate)}}</mat-label>\n      <input matInput formControlName=\"name\" readonly>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.roles' | translate)}}</mat-label>\n      <mat-chip-grid #roleChipGrid>\n        @if (currentGroupDetails.roles) {\n          @for (role of currentGroupDetails.roles | sortRolesByLabel; track role) {\n            <mat-chip-row [editable]=\"false\" [disabled]=\"currentGroupDetails.roles.indexOf(role) === -1\" [matTooltip]=\"role | roleTooltip\"><div class=\"chip\">{{role | roleLabel}}</div></mat-chip-row>\n          }\n        }\n        <input [matChipInputFor]=\"roleChipGrid\" readonly/>\n      </mat-chip-grid>\n    </mat-form-field> \n      <mat-form-field>\n      <mat-label>{{('yuv.app.user-management.groups.object.property.members' | translate)}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @if (currentGroupDetails.members) {\n            @for (member of currentGroupDetails.members.sort(); track member) {\n              <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n            }\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n    </mat-form-field>           \n  </form>\n} @else {\n  <p>{{('yuv.app.user-management.groups.details.empty' | translate)}}</p>\n}\n", styles: [":host{height:100%;overflow:hidden;display:flex;flex-flow:column}:host .group-details-form{flex:1;overflow-y:auto;display:grid;align-items:start;align-content:start;gap:var(--ymt-spacing-m);padding:1rem}:host .group-details-form mat-chip-row{overflow:hidden}:host .group-details-form .roles-field mat-chip-grid{max-height:300px;overflow-y:auto;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: YuvUserManagementService }, { type: i1.FormBuilder }], propDecorators: { groupId: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ymusrmgmt-settings', standalone: true, imports: [...modules$2, ...components$2], template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"'yuv.app.user-management.settings.label.dialog.title' | translate\"\n>\n  <main class=\"yuv-dialog-content\">\n    <ng-template\n      #editableField\n      let-labelKey=\"labelKey\"\n      let-control=\"control\"\n      let-type=\"type\"\n      let-placeholder=\"placeholder\"\n      let-autocomplete=\"autocomplete\"\n    >\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ labelKey | translate }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"control\"\n          [type]=\"type || 'text'\"\n          [placeholder]=\"placeholder || ''\"\n          [autocomplete]=\"autocomplete || 'off'\"\n          [attr.aria-label]=\"labelKey | translate\"\n        />\n      </mat-form-field>\n    </ng-template>\n    <ng-template\n      #readonlyField\n      let-labelKey=\"labelKey\"\n      let-value=\"value\"\n      let-type=\"type\"\n      let-copyable=\"copyable\"\n    >\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{ labelKey | translate }}</mat-label>\n        <input\n          matInput\n          readonly\n          [type]=\"type || 'text'\"\n          [attr.tabindex]=\"-1\"\n          [value]=\"value || '\u2014'\"\n          [attr.aria-label]=\"labelKey | translate\"\n        />\n        @if (copyable && value) {\n        <button\n          matSuffix\n          mat-icon-button\n          class=\"copy-button\"\n          type=\"button\"\n          [matTooltip]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n          [attr.aria-label]=\"'yuv.app.user-management.settings.oidc.action.copy.label' | translate\"\n          [cdkCopyToClipboard]=\"value\"\n          (cdkCopyToClipboardCopied)=\"onCopied($event)\"\n        >\n          <mat-icon>content_copy</mat-icon>\n        </button>\n        }\n      </mat-form-field>\n    </ng-template>\n\n    @if (!showForm()) {\n    <div class=\"empty-state\">\n      <mat-icon class=\"empty-state-icon\" aria-hidden=\"true\">admin_panel_settings</mat-icon>\n      <p class=\"empty-state-title\">\n        {{ 'yuv.app.user-management.settings.oidc.label.notConfigured' | translate }}\n      </p>\n      <p class=\"empty-state-description\">\n        {{ 'yuv.app.user-management.settings.oidc.label.setup.description' | translate }}\n      </p>\n      <button ymtButton=\"primary\" type=\"button\" (click)=\"startAdd()\">\n        {{ 'yuv.app.user-management.settings.oidc.action.setup.label' | translate }}\n      </button>\n    </div>\n    } @else {\n    <mat-tab-group yuvTabGuardDisable>\n      <mat-tab [label]=\"'yuv.app.user-management.settings.oidc.tab.authentication' | translate\">\n        <p class=\"hint\">\n          {{ 'yuv.app.user-management.settings.oidc.label.setup.hint' | translate }}\n        </p>\n        <form [formGroup]=\"form\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              editableField;\n              context: {\n                labelKey: 'yuv.app.user-management.settings.oidc.property.displayName',\n                control: displayName,\n                placeholder: 'e.g. Microsoft Entra ID'\n              }\n            \"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"\n              editableField;\n              context: {\n                labelKey: 'yuv.app.user-management.settings.oidc.property.discoveryUrl',\n                control: discoveryUrl,\n                placeholder:\n                  'e.g. https://login.microsoftonline.com/<entra-tenant-id>/v2.0/.well-known/openid-configuration'\n              }\n            \"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"\n              editableField;\n              context: {\n                labelKey: 'yuv.app.user-management.settings.oidc.property.clientId',\n                control: clientId,\n                placeholder: 'e.g. yuuvis'\n              }\n            \"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"\n              editableField;\n              context: {\n                labelKey: 'yuv.app.user-management.settings.oidc.property.clientSecret',\n                control: clientSecret,\n                type: 'password',\n                autocomplete: 'new-password'\n              }\n            \"\n          ></ng-container>\n          @if (redirectUri(); as uri) {\n          <hr class=\"divider\" />\n          <p class=\"hint\">\n            {{ 'yuv.app.user-management.settings.oidc.property.redirectUri.hint' | translate }}\n          </p>\n          <ng-container\n            *ngTemplateOutlet=\"\n              readonlyField;\n              context: {\n                labelKey: 'yuv.app.user-management.settings.oidc.property.redirectUri',\n                value: uri,\n                copyable: true\n              }\n            \"\n          ></ng-container>\n          }\n        </form>\n      </mat-tab>\n      <mat-tab\n        [label]=\"'yuv.app.user-management.settings.oidc.label.section.provisioning' | translate\"\n      >\n        @if (scimProvisioning(); as scimProvisioning) { @if (provider(); as oidcProvider) {\n        <p class=\"hint\">\n          {{\n            'yuv.app.user-management.settings.oidc.label.provisioning.hint'\n              | translate : { provider: oidcProvider.displayName }\n          }}\n        </p>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"\n            readonlyField;\n            context: {\n              labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tenantUrl',\n              value: tenantUrl(),\n              copyable: true\n            }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            readonlyField;\n            context: {\n              labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.tokenUrl',\n              value: scimProvisioning.tokenEndpoint,\n              copyable: true\n            }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            readonlyField;\n            context: {\n              labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientName',\n              value: scimProvisioning.clientId,\n              copyable: true\n            }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            readonlyField;\n            context: {\n              labelKey: 'yuv.app.user-management.settings.oidc.provisioning.property.clientSecret',\n              value: scimProvisioning.clientSecret,\n              type: 'password',\n              copyable: true\n            }\n          \"\n        ></ng-container>\n        } @else {\n        <p class=\"hint\">\n          {{ 'yuv.app.user-management.settings.oidc.label.provisioning.unavailable' | translate }}\n        </p>\n        }\n      </mat-tab>\n    </mat-tab-group>\n    } @if (error()) {\n    <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    @if (provider()) {\n    <!--\n      `ymt-button--danger` is added explicitly (not just relying on `ymtButton=\"danger\"`):\n      YmtButtonDirective has a bug where its own dynamically-added `ymt-button--danger` class gets\n      wiped when it creates the underlying MatButton (which overwrites the host's `class`\n      attribute) and never restored, since the directive's `ngOnInit` snapshots \"classes to\n      restore\" before adding it. A class already present in the template survives that wipe, so\n      this is what actually makes the button render with danger colors. Don't remove it as a\n      seeming duplicate.\n    -->\n    <button\n      ymtButton=\"danger\"\n      class=\"ymt-button--danger footer-start\"\n      [disabled]=\"busy()\"\n      (click)=\"revert()\"\n    >\n      <mat-icon>reset_wrench</mat-icon>\n      {{ 'yuv.app.user-management.settings.oidc.action.reset.label' | translate }}\n    </button>\n    }\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.settings.action.button.cancel' | translate }}\n    </button>\n    @if (showForm()) {\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"configure()\">\n      {{ 'yuv.app.user-management.settings.oidc.action.save.label' | translate }}\n    </button>\n    }\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main{min-height:var(--ymt-sizing-7xl)}:host main .yuv-form-field input::placeholder{color:var(--ymt-text-color-subtle, inherit);font-size:.9em;opacity:1}:host main .empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ymt-spacing-m);width:100%;padding:var(--ymt-spacing-4xl) var(--ymt-spacing-l);justify-content:center;min-height:var(--ymt-sizing-7xl)}:host main .empty-state .empty-state-icon{width:var(--ymt-sizing-5xl);height:var(--ymt-sizing-5xl);border-radius:var(--ymt-corner-full);background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container);display:flex;align-items:center;justify-content:center;flex-shrink:0}:host main .empty-state .empty-state-title{font:var(--ymt-font-headline-small);color:var(--ymt-text-color);margin:0}:host main .empty-state .empty-state-description{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);max-width:80ch;margin:0}:host main .divider{border:none;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);margin:var(--ymt-spacing-m) 0}:host main ::ng-deep .mat-mdc-tab-body-content{padding-top:var(--ymt-spacing-m)}:host footer{display:flex;flex:1;align-items:center;gap:calc(var(--ymt-font-body) / 2)}:host footer .footer-start{margin-inline-end:auto}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Marks an element as one option of a listbox whose keystrokes arrive somewhere else - so CDK's
+ * `ActiveDescendantKeyManager` can move a highlight through them while real DOM focus stays put.
+ *
+ * That is the `aria-activedescendant` pattern, and it's what a combobox needs: the user keeps
+ * typing in the input while Up/Down move the highlighted suggestion. Contrast
+ * `FocusableRowDirective`, which is for lists that take focus onto the row itself.
+ *
+ * The highlight is exposed as `active` (and as an `.active` class on the host), so a caller
+ * declares this directive, binds `aria-selected` from it, and points the input's
+ * `aria-activedescendant` at `activeOptionId`. `aria-selected` is deliberately left to the call
+ * site rather than host-bound here: it keeps the option's ARIA visible in the template where it
+ * gets reviewed - and `@angular-eslint`'s `role-has-required-aria` can only see it there.
+ */
+class HighlightableOptionDirective {
+    #elementRef = inject(ElementRef);
+    /** Whether the key manager currently has this option highlighted. */
+    active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /** This option's element id - what the input's `aria-activedescendant` has to point at. */
+    get elementId() {
+        return this.#elementRef.nativeElement.id;
+    }
+    setActiveStyles() {
+        this.active.set(true);
+        // Nothing scrolls this into view on its own: focus never leaves the input, so the browser has
+        // no reason to. Without it, arrowing past the bottom of the list would highlight options the
+        // user can no longer see - and Enter would add one of them.
+        this.#elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
+    }
+    setInactiveStyles() {
+        this.active.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: HighlightableOptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: HighlightableOptionDirective, isStandalone: true, selector: "[ymusrmgmt-highlightable-option]", host: { properties: { "class.active": "active()" } }, exportAs: ["ymusrmgmtHighlightableOption"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: HighlightableOptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ymusrmgmt-highlightable-option]',
+                    standalone: true,
+                    exportAs: 'ymusrmgmtHighlightableOption',
+                    host: {
+                        '[class.active]': 'active()',
+                    },
+                }]
+        }] });
+
+const components$1 = [
+    BusyOverlayDirective,
+    YmtButtonDirective,
+    DialogComponent,
+    YmtBadge,
+    UserAvatarComponent,
+    HighlightableOptionDirective,
+];
+const modules$1 = [CommonModule, ReactiveFormsModule, TranslatePipe, MatIconModule, MatTooltipModule];
+class AddGroupMembersComponent {
+    data;
+    /** Shared `MatDialog.open()` config, so every call site opening this dialog stays in sync. */
+    static DIALOG_CONFIG = {
+        width: '800px',
+        maxWidth: '90vw',
+        height: '65vh',
+    };
+    #userManagementService = inject(YuvUserManagementService);
+    #dialogRef = inject((MatDialogRef));
+    #logger = inject(Logger);
+    #injector = inject(Injector);
+    busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    searchControl = new FormControl('');
+    /** Every current member's id, so search results can exclude users already in the group. */
+    currentMemberIds = signal(new Set(), ...(ngDevMode ? [{ debugName: "currentMemberIds" }] : /* istanbul ignore next */ []));
+    /** The term the current searchResults() were fetched for - lets the empty-state message tell
+     * "no term entered yet" apart from "this term matched nothing". */
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    searchResults = signal([], ...(ngDevMode ? [{ debugName: "searchResults" }] : /* istanbul ignore next */ []));
+    /** Accumulates picks across searches (dedup by id) - selecting a user moves them out of the
+     * search results and into this list, shown as removable rows in the right-hand column. */
+    selectedUsers = signal([], ...(ngDevMode ? [{ debugName: "selectedUsers" }] : /* istanbul ignore next */ []));
+    candidateResults = computed(() => {
+        const selectedIds = new Set(this.selectedUsers().map((u) => u.id));
+        return this.searchResults().filter((u) => !this.currentMemberIds().has(u.id) && !selectedIds.has(u.id));
+    }, ...(ngDevMode ? [{ debugName: "candidateResults" }] : /* istanbul ignore next */ []));
+    /** One per rendered candidate row, in `candidateResults()` order. */
+    candidateOptions = viewChildren(HighlightableOptionDirective, ...(ngDevMode ? [{ debugName: "candidateOptions" }] : /* istanbul ignore next */ []));
+    /** Moves the highlighted candidate while focus stays in the search input - the
+     * `aria-activedescendant` pattern, see `HighlightableOptionDirective`. Built from the
+     * `viewChildren` signal directly, so it follows the candidates as the search results change;
+     * that's what the `Injector` is for. */
+    #keyManager = new ActiveDescendantKeyManager(this.candidateOptions, this.#injector);
+    /** The highlighted option's element id, for the input's `aria-activedescendant`. Derived from the
+     * options themselves rather than tracked alongside the key manager, so the two can't disagree. */
+    activeOptionId = computed(() => this.candidateOptions().find((option) => option.active())?.elementId, ...(ngDevMode ? [{ debugName: "activeOptionId" }] : /* istanbul ignore next */ []));
+    disabledSubmit = computed(() => this.busy() || this.selectedUsers().length === 0, ...(ngDevMode ? [{ debugName: "disabledSubmit" }] : /* istanbul ignore next */ []));
+    constructor(data) {
+        this.data = data;
+        // Highlight the first candidate whenever the rendered set changes - a new search, or one
+        // fewer row because the user just picked it. Keyed on the rendered options rather than on
+        // `candidateResults()` so the key manager only ever sees rows that exist; arrow navigation
+        // doesn't change them, so it never clobbers the user's position.
+        effect(() => {
+            if (this.candidateOptions().length > 0) {
+                this.#keyManager.setActiveItem(0);
+            }
+        });
+        // Best-effort: used only to filter existing members out of search results - if this fails,
+        // just don't filter (a redundant add is a harmless no-op), so only log, don't block.
+        aggregateAllPages((page) => this.#userManagementService.fetchGroupMembers(this.data.group.id, page, YuvUserManagementService.AGGREGATE_PAGE_SIZE)).subscribe({
+            next: (members) => this.currentMemberIds.set(new Set(members.map((m) => m.id))),
+            error: (e) => this.#logger.error(`Failed to load members of group '${this.data.group.id}'`, e),
+        });
+        this.searchControl.valueChanges
+            .pipe(debounceTime(500), distinctUntilChanged(), 
+        // After the debounce, so the initial (empty-term) list is requested immediately on open
+        // rather than 500ms later - only the user's own typing should be debounced.
+        startWith(''), switchMap((term) => this.#userManagementService
+            .fetchUsers(0, term || '')
+            .pipe(map((response) => ({ term: term || '', response })))))
+            .subscribe({
+            next: ({ term, response }) => {
+                this.searchTerm.set(term);
+                this.searchResults.set(response.objects);
+            },
+            error: (e) => this.#logger.error('Failed to search users', e),
+        });
+    }
+    select(user) {
+        this.selectedUsers.update((current) => current.some((u) => u.id === user.id) ? current : [...current, user]);
+    }
+    deselect(user) {
+        this.selectedUsers.update((current) => current.filter((u) => u.id !== user.id));
+    }
+    /** Arrow keys move the highlighted candidate, Enter picks it - so matches can be added without
+     * ever leaving the search input.
+     *
+     * Only Enter is handled here; everything else goes to the key manager, which owns the bounds
+     * clamping and leaves the keys a text input needs alone. Home/End are deliberately *not* wired
+     * to it (`withHomeAndEnd()`): in a combobox those belong to the caret, not to the list. */
+    onSearchKeydown(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const index = this.#keyManager.activeItemIndex;
+            const user = index === null ? undefined : this.candidateResults()[index];
+            if (user)
+                this.select(user);
+            return;
+        }
+        this.#keyManager.onKeydown(event);
+    }
+    addMembers() {
+        const users = this.selectedUsers();
+        if (users.length === 0)
+            return;
+        this.busy.set(true);
+        forkJoin(users.map((user) => this.#userManagementService.addGroupMember(this.data.group, user.id).pipe(map(() => ({ success: true })), catchError((e) => {
+            this.#logger.error(`Failed to add user '${user.id}' to group '${this.data.group.id}'`, e);
+            return of({ success: false });
+        })))).subscribe((results) => {
+            this.busy.set(false);
+            this.#dialogRef.close({
+                addedCount: results.filter((r) => r.success).length,
+                failedCount: results.filter((r) => !r.success).length,
+            });
+        });
+    }
+    close() {
+        this.#dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AddGroupMembersComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: AddGroupMembersComponent, isStandalone: true, selector: "ymusrmgmt-add-group-members", viewQueries: [{ propertyName: "candidateOptions", predicate: HighlightableOptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"\n    'yuv.app.user-management.groups.action.addMembers.dialog.title'\n      | translate : { name: data.group.name }\n  \"\n>\n  <!-- Shared avatar + name/username anatomy for both the search-result and selected-users rows below. -->\n  <ng-template #userInfo let-user>\n    <ymusrmgmt-user-avatar [user]=\"user\" />\n    <span class=\"names\">\n      <span class=\"username\">{{ user.username }}</span>\n      <span class=\"name-row\">\n        <span class=\"name\">{{ user.firstName }} {{ user.lastName }}</span>\n      </span>\n    </span>\n  </ng-template>\n\n  <main class=\"yuv-dialog-content\">\n    <div class=\"search-column\">\n      <div class=\"search-row\">\n        <mat-icon aria-hidden=\"true\" class=\"icon\">search</mat-icon>\n        <input\n          class=\"input\"\n          type=\"text\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded=\"true\"\n          aria-controls=\"search-result-list\"\n          [attr.aria-activedescendant]=\"activeOptionId() || null\"\n          [formControl]=\"searchControl\"\n          (keydown)=\"onSearchKeydown($event)\"\n          [placeholder]=\"\n            'yuv.app.user-management.groups.action.addMembers.search.placeholder' | translate\n          \"\n          [attr.aria-label]=\"\n            'yuv.app.user-management.groups.action.addMembers.search.placeholder' | translate\n          \"\n        />\n      </div>\n\n      <div class=\"search-result\" id=\"search-result-list\" role=\"listbox\" tabindex=\"-1\">\n        @for (user of candidateResults(); track user.id) {\n        <button\n          ymusrmgmt-highlightable-option\n          #option=\"ymusrmgmtHighlightableOption\"\n          [attr.aria-selected]=\"option.active()\"\n          type=\"button\"\n          id=\"add-group-members-option-{{ user.id }}\"\n          role=\"option\"\n          tabindex=\"-1\"\n          class=\"user\"\n          [class.user--inactive]=\"!user.enabled\"\n          (click)=\"select(user)\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"userInfo\"\n            [ngTemplateOutletContext]=\"{ $implicit: user }\"\n          />\n        </button>\n        } @empty {\n        <div class=\"empty-message\">\n          {{\n            (searchTerm()\n              ? 'yuv.app.user-management.groups.action.addMembers.empty.noResults'\n              : 'yuv.app.user-management.groups.action.addMembers.empty.allAdded'\n            ) | translate\n          }}\n        </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"selected-users\">\n      @for (user of selectedUsers(); track user.id) {\n      <div class=\"user\" [class.user--inactive]=\"!user.enabled\">\n        <ng-container\n          [ngTemplateOutlet]=\"userInfo\"\n          [ngTemplateOutletContext]=\"{ $implicit: user }\"\n        />\n        <button\n          type=\"button\"\n          class=\"chip-remove\"\n          (click)=\"deselect(user)\"\n          [matTooltip]=\"\n            'yuv.app.user-management.groups.action.addMembers.removeSelected.tooltip' | translate\n          \"\n          [attr.aria-label]=\"\n            'yuv.app.user-management.groups.action.addMembers.removeSelected.tooltip' | translate\n          \"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n      } @empty {\n      <div class=\"empty-message\">\n        {{ 'yuv.app.user-management.groups.action.addMembers.empty.noneSelected' | translate }}\n      </div>\n      }\n    </div>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.groups.action.button.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"addMembers()\">\n      {{ 'yuv.app.user-management.groups.action.addMembers.button.add' | translate }}\n      @if (selectedUsers().length > 0) {\n      <ymt-badge class=\"count\" severity=\"neutral\">{{ selectedUsers().length }}</ymt-badge>\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: ["ymt-badge{--ymt-badge-corner: var(--ymt-corner-xs);--badge-icon-size: var(--ymt-sizing-xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);min-width:0;max-width:100%}ymt-badge mat-icon{flex-shrink:0;font-size:var(--badge-icon-size);width:var(--badge-icon-size);height:var(--badge-icon-size)}ymt-badge .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}yuv-dialog{flex:1;min-height:0}:host{box-sizing:border-box;--ymt-dialog-content-display: flex}:host ::ng-deep mat-dialog-content{max-height:90vh}:host main{display:flex;flex-direction:row;height:100%;overflow:hidden;background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m)}:host main .user{display:flex;align-items:center;gap:var(--ymt-spacing-s);width:100%;font:inherit;color:var(--ymt-text-color)}:host main .user .names{display:flex;flex:1;flex-direction:column;gap:var(--ymt-spacing-4xs);min-width:0}:host main .user .name-row{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);min-width:0}:host main .user .name{font:var(--ymt-font-title-smallest);color:var(--ymt-text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host main .user .username{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main .user.user--inactive .name,:host main .user.user--inactive .username{opacity:.6}:host main .search-column{display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host main .search-column .search-row{position:relative;flex-shrink:0}:host main .search-column .search-row .icon{position:absolute;left:var(--ymt-spacing-s);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ymt-text-color-subtle);font-size:var(--ymt-sizing-s);width:var(--ymt-sizing-s);height:var(--ymt-sizing-s)}:host main .search-column .search-row .input{display:block;width:100%;border:none;outline:none;background:none;font:inherit;color:var(--ymt-text-color);padding:var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s) calc(var(--ymt-sizing-s) + 2 * var(--ymt-spacing-s))}:host main .search-column .search-result{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:0 0 0 var(--ymt-corner-s)}:host main .search-column .search-result .user{text-align:left;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);background:none;border:none;border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant);cursor:pointer}:host main .search-column .search-result .user:last-child{border-bottom:none}:host main .search-column .search-result .user:hover{background-color:var(--ymt-hover-background)}:host main .search-column .search-result .user.active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host main .search-column .search-result .user.active .name,:host main .search-column .search-result .user.active .username{color:var(--ymt-on-primary-container)}:host main .selected-users{display:flex;flex-direction:column;flex:1 1 0;min-width:0;overflow-y:auto;padding:var(--ymt-spacing-s);border-left:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host main .selected-users .user{padding:var(--ymt-spacing-xs) 0;border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host main .selected-users .user:last-child{border-bottom:none}:host main .selected-users .chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ymt-sizing-s);height:var(--ymt-sizing-s);padding:0;border:none;border-radius:var(--ymt-corner-full);background:transparent;color:var(--ymt-text-color-subtle);cursor:pointer}:host main .selected-users .chip-remove:hover{background-color:var(--ymt-hover-background)}:host main .selected-users .chip-remove mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}:host main .empty-message{padding:var(--ymt-spacing-m);text-align:center;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "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: YmtBadge, selector: "ymt-badge", inputs: ["severity", "outline", "aura"] }, { kind: "component", type: UserAvatarComponent, selector: "ymusrmgmt-user-avatar", inputs: ["user", "showBadges"] }, { kind: "directive", type: HighlightableOptionDirective, selector: "[ymusrmgmt-highlightable-option]", exportAs: ["ymusrmgmtHighlightableOption"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AddGroupMembersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ymusrmgmt-add-group-members', standalone: true, imports: [...modules$1, ...components$1], template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"\n    'yuv.app.user-management.groups.action.addMembers.dialog.title'\n      | translate : { name: data.group.name }\n  \"\n>\n  <!-- Shared avatar + name/username anatomy for both the search-result and selected-users rows below. -->\n  <ng-template #userInfo let-user>\n    <ymusrmgmt-user-avatar [user]=\"user\" />\n    <span class=\"names\">\n      <span class=\"username\">{{ user.username }}</span>\n      <span class=\"name-row\">\n        <span class=\"name\">{{ user.firstName }} {{ user.lastName }}</span>\n      </span>\n    </span>\n  </ng-template>\n\n  <main class=\"yuv-dialog-content\">\n    <div class=\"search-column\">\n      <div class=\"search-row\">\n        <mat-icon aria-hidden=\"true\" class=\"icon\">search</mat-icon>\n        <input\n          class=\"input\"\n          type=\"text\"\n          role=\"combobox\"\n          aria-autocomplete=\"list\"\n          aria-expanded=\"true\"\n          aria-controls=\"search-result-list\"\n          [attr.aria-activedescendant]=\"activeOptionId() || null\"\n          [formControl]=\"searchControl\"\n          (keydown)=\"onSearchKeydown($event)\"\n          [placeholder]=\"\n            'yuv.app.user-management.groups.action.addMembers.search.placeholder' | translate\n          \"\n          [attr.aria-label]=\"\n            'yuv.app.user-management.groups.action.addMembers.search.placeholder' | translate\n          \"\n        />\n      </div>\n\n      <div class=\"search-result\" id=\"search-result-list\" role=\"listbox\" tabindex=\"-1\">\n        @for (user of candidateResults(); track user.id) {\n        <button\n          ymusrmgmt-highlightable-option\n          #option=\"ymusrmgmtHighlightableOption\"\n          [attr.aria-selected]=\"option.active()\"\n          type=\"button\"\n          id=\"add-group-members-option-{{ user.id }}\"\n          role=\"option\"\n          tabindex=\"-1\"\n          class=\"user\"\n          [class.user--inactive]=\"!user.enabled\"\n          (click)=\"select(user)\"\n        >\n          <ng-container\n            [ngTemplateOutlet]=\"userInfo\"\n            [ngTemplateOutletContext]=\"{ $implicit: user }\"\n          />\n        </button>\n        } @empty {\n        <div class=\"empty-message\">\n          {{\n            (searchTerm()\n              ? 'yuv.app.user-management.groups.action.addMembers.empty.noResults'\n              : 'yuv.app.user-management.groups.action.addMembers.empty.allAdded'\n            ) | translate\n          }}\n        </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"selected-users\">\n      @for (user of selectedUsers(); track user.id) {\n      <div class=\"user\" [class.user--inactive]=\"!user.enabled\">\n        <ng-container\n          [ngTemplateOutlet]=\"userInfo\"\n          [ngTemplateOutletContext]=\"{ $implicit: user }\"\n        />\n        <button\n          type=\"button\"\n          class=\"chip-remove\"\n          (click)=\"deselect(user)\"\n          [matTooltip]=\"\n            'yuv.app.user-management.groups.action.addMembers.removeSelected.tooltip' | translate\n          \"\n          [attr.aria-label]=\"\n            'yuv.app.user-management.groups.action.addMembers.removeSelected.tooltip' | translate\n          \"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n      } @empty {\n      <div class=\"empty-message\">\n        {{ 'yuv.app.user-management.groups.action.addMembers.empty.noneSelected' | translate }}\n      </div>\n      }\n    </div>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.groups.action.button.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"addMembers()\">\n      {{ 'yuv.app.user-management.groups.action.addMembers.button.add' | translate }}\n      @if (selectedUsers().length > 0) {\n      <ymt-badge class=\"count\" severity=\"neutral\">{{ selectedUsers().length }}</ymt-badge>\n      }\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: ["ymt-badge{--ymt-badge-corner: var(--ymt-corner-xs);--badge-icon-size: var(--ymt-sizing-xs);display:inline-flex;align-items:center;gap:var(--ymt-spacing-xs);min-width:0;max-width:100%}ymt-badge mat-icon{flex-shrink:0;font-size:var(--badge-icon-size);width:var(--badge-icon-size);height:var(--badge-icon-size)}ymt-badge .badge-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}yuv-dialog{flex:1;min-height:0}:host{box-sizing:border-box;--ymt-dialog-content-display: flex}:host ::ng-deep mat-dialog-content{max-height:90vh}:host main{display:flex;flex-direction:row;height:100%;overflow:hidden;background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m)}:host main .user{display:flex;align-items:center;gap:var(--ymt-spacing-s);width:100%;font:inherit;color:var(--ymt-text-color)}:host main .user .names{display:flex;flex:1;flex-direction:column;gap:var(--ymt-spacing-4xs);min-width:0}:host main .user .name-row{display:flex;align-items:center;gap:var(--ymt-spacing-2xs);min-width:0}:host main .user .name{font:var(--ymt-font-title-smallest);color:var(--ymt-text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host main .user .username{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}:host main .user.user--inactive .name,:host main .user.user--inactive .username{opacity:.6}:host main .search-column{display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host main .search-column .search-row{position:relative;flex-shrink:0}:host main .search-column .search-row .icon{position:absolute;left:var(--ymt-spacing-s);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ymt-text-color-subtle);font-size:var(--ymt-sizing-s);width:var(--ymt-sizing-s);height:var(--ymt-sizing-s)}:host main .search-column .search-row .input{display:block;width:100%;border:none;outline:none;background:none;font:inherit;color:var(--ymt-text-color);padding:var(--ymt-spacing-s) var(--ymt-spacing-s) var(--ymt-spacing-s) calc(var(--ymt-sizing-s) + 2 * var(--ymt-spacing-s))}:host main .search-column .search-result{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;border-top:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:0 0 0 var(--ymt-corner-s)}:host main .search-column .search-result .user{text-align:left;padding:var(--ymt-spacing-xs) var(--ymt-spacing-s);background:none;border:none;border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant);cursor:pointer}:host main .search-column .search-result .user:last-child{border-bottom:none}:host main .search-column .search-result .user:hover{background-color:var(--ymt-hover-background)}:host main .search-column .search-result .user.active{background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container)}:host main .search-column .search-result .user.active .name,:host main .search-column .search-result .user.active .username{color:var(--ymt-on-primary-container)}:host main .selected-users{display:flex;flex-direction:column;flex:1 1 0;min-width:0;overflow-y:auto;padding:var(--ymt-spacing-s);border-left:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host main .selected-users .user{padding:var(--ymt-spacing-xs) 0;border-bottom:var(--ymt-outline-width) solid var(--ymt-outline-variant)}:host main .selected-users .user:last-child{border-bottom:none}:host main .selected-users .chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ymt-sizing-s);height:var(--ymt-sizing-s);padding:0;border:none;border-radius:var(--ymt-corner-full);background:transparent;color:var(--ymt-text-color-subtle);cursor:pointer}:host main .selected-users .chip-remove:hover{background-color:var(--ymt-hover-background)}:host main .selected-users .chip-remove mat-icon{font-size:var(--ymt-sizing-xs);width:var(--ymt-sizing-xs);height:var(--ymt-sizing-xs)}:host main .empty-message{padding:var(--ymt-spacing-m);text-align:center;font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle)}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }], propDecorators: { candidateOptions: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => HighlightableOptionDirective), { isSignal: true }] }] } });
 
-const components = [BusyOverlayDirective, YmtButtonDirective, DialogComponent, RolesSelectionComponent];
+const components = [
+    BusyOverlayDirective,
+    YmtButtonDirective,
+    DialogComponent,
+    RolesSelectionComponent,
+];
 const modules = [
     CommonModule,
     ReactiveFormsModule,
     TranslatePipe,
     MatFormFieldModule,
     MatInputModule,
-    MatChipsModule,
 ];
-class EditGroupComponent {
+class EditUserComponent {
     data;
+    /** Shared `MatDialog.open()` config, so every call site opening this dialog stays in sync. */
+    static DIALOG_CONFIG = {
+        width: '600px',
+        maxWidth: '90vw',
+    };
     #fb = inject(FormBuilder);
     #userManagementService = inject(YuvUserManagementService);
     #dialogRef = inject((MatDialogRef));
@@ -1367,17 +1818,28 @@ class EditGroupComponent {
     busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
     error = signal(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     allAvailableRoles = signal([], ...(ngDevMode ? [{ debugName: "allAvailableRoles" }] : /* istanbul ignore next */ []));
-    allUsers = signal([], ...(ngDevMode ? [{ debugName: "allUsers" }] : /* istanbul ignore next */ []));
-    groupRoles = signal([], ...(ngDevMode ? [{ debugName: "groupRoles" }] : /* istanbul ignore next */ []));
-    groupMembers = signal([], ...(ngDevMode ? [{ debugName: "groupMembers" }] : /* istanbul ignore next */ []));
-    name = new FormControl('');
+    userRoles = signal([], ...(ngDevMode ? [{ debugName: "userRoles" }] : /* istanbul ignore next */ []));
+    /** Externally managed users (e.g. provisioned via SCIM) may only have roles assigned; their personal data is owned by the external IdP. */
+    externallyManaged = signal(false, ...(ngDevMode ? [{ debugName: "externallyManaged" }] : /* istanbul ignore next */ []));
+    username = new FormControl('');
+    email = new FormControl('', [Validators.required, Validators.email]);
+    firstName = new FormControl('', [
+        Validators.minLength(1),
+        Validators.maxLength(255),
+        Validators.pattern('^[^#!<>&/%=;*§$()[\\]{}]*$'),
+    ]);
+    lastName = new FormControl('', [
+        Validators.minLength(1),
+        Validators.maxLength(255),
+        Validators.pattern('^[^#!<>&/%=;*§$()[\\]{}]*$'),
+    ]);
     roles = new FormControl([]);
-    members = new FormControl([]);
-    userControl = new FormControl('');
     form = this.#fb.group({
-        name: this.name,
+        username: this.username,
+        email: this.email,
+        firstName: this.firstName,
+        lastName: this.lastName,
         roles: this.roles,
-        members: this.members
     });
     changedInput = signal(undefined, ...(ngDevMode ? [{ debugName: "changedInput" }] : /* istanbul ignore next */ []));
     disabledSubmit = linkedSignal({ ...(ngDevMode ? { debugName: "disabledSubmit" } : /* istanbul ignore next */ {}), source: this.changedInput,
@@ -1387,22 +1849,27 @@ class EditGroupComponent {
     constructor(data) {
         this.data = data;
         this.form.patchValue({
-            name: this.data.group.name,
-            roles: this.data.group.roles,
-            members: this.data.group.members
+            username: this.data.user.username,
+            firstName: this.data.user.firstName,
+            lastName: this.data.user.lastName,
+            email: this.data.user.email,
+            roles: this.data.user.roles,
         });
-        this.members.valueChanges.subscribe((v) => { this.#logger.info("members changed: " + v); });
-        this.groupRoles.set(this.data.group.roles || []);
-        this.groupMembers.set(this.data.group.members || []);
-        this.members.disable();
+        // Initialize userRoles from the data
+        this.userRoles.set(this.data.user.roles || []);
+        // Externally managed users may only have roles assigned: their personal data fields are rendered
+        // read-only in the template (same mechanism as the username field) so they keep the identical look.
+        if (this.data.user.externallyManaged) {
+            this.externallyManaged.set(true);
+        }
         // Fetch all available roles
         this.#userManagementService.fetchAllRoles().subscribe({
             next: (roles) => {
-                this.allAvailableRoles.set(roles.sort());
+                this.allAvailableRoles.set(roles);
             },
             error: (e) => {
                 this.#logger.error('Failed to fetch roles', e);
-            }
+            },
         });
     }
     ngAfterViewInit() {
@@ -1415,271 +1882,804 @@ class EditGroupComponent {
         return !isDataUnchanged;
     }
     isEquals(key) {
-        const oldVal = this.data.group?.[key];
+        const oldVal = this.data.user?.[key];
         const newVal = this.form.get(key)?.value;
         return oldVal === newVal;
     }
     onRolesChange(roles) {
-        this.groupRoles.set(roles);
+        this.userRoles.set(roles);
         this.form.patchValue({ roles: roles });
         this.roles.markAsTouched(); // Mark as touched to trigger validation display
     }
-    onMembersChange(members) {
-        this.groupMembers.set(members);
-        this.form.patchValue({ members: members });
-        this.roles.markAsTouched(); // Mark as touched to trigger validation display
-    }
-    updateGroup() {
+    updateUser() {
+        // For externally managed users the personal data fields are read-only, so their original values
+        // are preserved here (the backend replaces the representation from the request, so omitting them
+        // would wipe them).
         const editParams = this.form.getRawValue();
         this.busy.set(true);
         this.error.set(undefined);
-        const updateGroupRequest = {
-            name: editParams.name,
+        const updateUserRequest = {
+            email: editParams.email,
+            firstName: editParams.firstName ? editParams.firstName : '',
+            lastName: editParams.lastName ? editParams.lastName : '',
             roles: editParams.roles,
-            members: editParams.members
         };
-        this.#userManagementService
-            .updateGroup(this.data.group.id, updateGroupRequest)
-            .subscribe({
+        this.#userManagementService.updateUser(this.data.user.id, updateUserRequest).subscribe({
             error: (e) => {
-                switch (e.status) {
-                    default:
-                        this.error.set(this.#translateService.instant("yuv.app.user-management.groups.action.edit.error.unknown"));
-                }
-                this.#logger.error(`Failed to update group with id ${this.data.group.id}`, e);
+                const errorKey = resolveErrorMessageKey('yuv.app.user-management.users.action.edit', e.status);
+                this.error.set(this.#translateService.instant(errorKey));
+                this.#logger.error(`Failed to update user with id ${this.data.user.id}`, e);
                 this.busy.set(false);
             },
             complete: () => {
                 this.busy.set(false);
-                this.#dialogRef.close(this.data.group.id);
+                this.#dialogRef.close(this.data.user.id);
             },
         });
     }
     close() {
         this.#dialogRef.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EditGroupComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: EditGroupComponent, isStandalone: true, selector: "ymusrmgmt-edit-group", host: { properties: { "class.busy": "!busy()" } }, ngImport: i0, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{'yuv.app.user-management.groups.object.property.members' | translate}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @for (member of groupMembers(); track member) {\n            <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n      </mat-form-field>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateGroup()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: EditUserComponent, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: EditUserComponent, isStandalone: true, selector: "ymusrmgmt-edit-user", ngImport: i0, template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"\n    'yuv.app.user-management.users.action.edit.dialog.title'\n      | translate : { username: data.user.username }\n  \"\n>\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      @if (externallyManaged()) {\n      <p class=\"hint\">\n        {{ 'yuv.app.user-management.users.action.edit.identitySource.external.hint' | translate }}\n      </p>\n      }\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\n          'yuv.app.user-management.users.property.username' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"username\"\n          type=\"text\"\n          [attr.tabindex]=\"-1\"\n          readonly\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.username' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n          'yuv.app.user-management.users.property.email' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"email\"\n          type=\"text\"\n          #emailField\n          [readonly]=\"externallyManaged()\"\n          [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n          'yuv.app.user-management.users.property.firstname' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"firstName\"\n          type=\"text\"\n          [readonly]=\"externallyManaged()\"\n          [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n          'yuv.app.user-management.users.property.lastname' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"lastName\"\n          type=\"text\"\n          [readonly]=\"externallyManaged()\"\n          [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n        />\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"userRoles()\"\n          (rolesChange)=\"onRolesChange($event)\"\n        >\n        </ymusrmgmt-role-selection>\n      </div>\n    </form>\n    @if (error()) {\n    <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.users.action.button.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateUser()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main .readonly-field{opacity:.5;pointer-events:none}:host main .readonly-label{pointer-events:none}:host main .roles-section{margin:var(--ymt-spacing-m) 0}:host main .roles-section.has-error ymusrmgmt-role-selection{border:var(--ymt-focus-indicator-size) solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitle", "headertitel"] }, { kind: "component", type: RolesSelectionComponent, selector: "ymusrmgmt-role-selection", inputs: ["allRoles", "initialRoles"], outputs: ["rolesChange"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EditGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: EditUserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymusrmgmt-edit-group', standalone: true, imports: [...modules, ...components], host: {
-                        '[class.busy]': '!busy()',
-                    }, template: "<yuv-dialog [yuvBusyOverlay]=\"busy()\" [headertitel]=\"'yuv.app.user-management.groups.action.edit.label' | translate\">\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\"yuv.app.user-management.groups.object.property.name\" | translate }}</mat-label>\n        <input matInput [formControl]=\"name\" type=\"text\" [attr.tabindex]=\"-1\" readonly/>\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"groupRoles()\"\n          (rolesChange)=\"onRolesChange($event)\">\n        </ymusrmgmt-role-selection>\n      </div>\n      <mat-form-field class=\"yuv-form-field\">\n        <mat-label>{{'yuv.app.user-management.groups.object.property.members' | translate}}</mat-label>\n        <mat-chip-grid #memberChipGrid>\n          @for (member of groupMembers(); track member) {\n            <mat-chip-row [editable]=\"false\"><div class=\"chip\">{{member}}</div></mat-chip-row>\n          }\n          <input [matChipInputFor]=\"memberChipGrid\" readonly/>\n        </mat-chip-grid>\n      </mat-form-field>\n      @if (error()) {\n      <p class=\"error\" role=\"alert\">{{ error() }}</p>\n      }\n    </form>\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ \"yuv.app.user-management.users.action.button.cancel\" | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateGroup()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main form{padding:var(--ymt-spacing-m)}:host main form .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main form .readonly-field{opacity:.5;pointer-events:none}:host main form .readonly-label{pointer-events:none}:host main form .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs)}:host main form .roles-section{margin:var(--ymt-spacing-m) 0}:host main form .roles-section .roles-label{display:block;font-size:12px;font-weight:400;color:#0009;margin-bottom:var(--ymt-spacing-xs)}:host main form .roles-section.has-error .roles-label{color:var(--ymt-danger)}:host main form .roles-section.has-error ymusrmgmt-role-selection{border:2px solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}:host main form .roles-section .roles-error{color:var(--ymt-danger);font-size:12px;margin-top:var(--ymt-spacing-xs);padding-left:var(--ymt-spacing-m)}\n"] }]
+            args: [{ selector: 'ymusrmgmt-edit-user', standalone: true, imports: [...modules, ...components], template: "<yuv-dialog\n  class=\"not-separated\"\n  [yuvBusyOverlay]=\"busy()\"\n  [headertitle]=\"\n    'yuv.app.user-management.users.action.edit.dialog.title'\n      | translate : { username: data.user.username }\n  \"\n>\n  <main class=\"yuv-dialog-content\">\n    <form [formGroup]=\"form\">\n      @if (externallyManaged()) {\n      <p class=\"hint\">\n        {{ 'yuv.app.user-management.users.action.edit.identitySource.external.hint' | translate }}\n      </p>\n      }\n      <mat-form-field class=\"yuv-form-field readonly-field\">\n        <mat-label class=\"readonly-label\">{{\n          'yuv.app.user-management.users.property.username' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"username\"\n          type=\"text\"\n          [attr.tabindex]=\"-1\"\n          readonly\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.username' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n          'yuv.app.user-management.users.property.email' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"email\"\n          type=\"text\"\n          #emailField\n          [readonly]=\"externallyManaged()\"\n          [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.email' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n          'yuv.app.user-management.users.property.firstname' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"firstName\"\n          type=\"text\"\n          [readonly]=\"externallyManaged()\"\n          [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.firstname' | translate\"\n        />\n      </mat-form-field>\n      <mat-form-field class=\"yuv-form-field\" [class.readonly-field]=\"externallyManaged()\">\n        <mat-label [class.readonly-label]=\"externallyManaged()\">{{\n          'yuv.app.user-management.users.property.lastname' | translate\n        }}</mat-label>\n        <input\n          matInput\n          [formControl]=\"lastName\"\n          type=\"text\"\n          [readonly]=\"externallyManaged()\"\n          [attr.tabindex]=\"externallyManaged() ? -1 : null\"\n          [attr.aria-label]=\"'yuv.app.user-management.users.property.lastname' | translate\"\n        />\n      </mat-form-field>\n      <div class=\"roles-section\" [class.has-error]=\"roles.invalid && roles.touched\">\n        <ymusrmgmt-role-selection\n          [allRoles]=\"allAvailableRoles()\"\n          [initialRoles]=\"userRoles()\"\n          (rolesChange)=\"onRolesChange($event)\"\n        >\n        </ymusrmgmt-role-selection>\n      </div>\n    </form>\n    @if (error()) {\n    <p class=\"error\" role=\"alert\">{{ error() }}</p>\n    }\n  </main>\n  <footer>\n    <button ymtButton=\"secondary\" [disabled]=\"busy()\" (click)=\"close()\">\n      {{ 'yuv.app.user-management.users.action.button.cancel' | translate }}\n    </button>\n    <button ymtButton=\"primary\" [disabled]=\"disabledSubmit()\" (click)=\"updateUser()\">\n      {{ 'yuv.app.user-management.users.action.button.save' | translate }}\n    </button>\n  </footer>\n</yuv-dialog>\n", styles: [":host{display:block;position:relative}:host main{background-color:var(--ymt-surface);border:var(--ymt-outline-width) solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m)}:host main .yuv-form-field{width:100%;margin:var(--ymt-spacing-xs) 0}:host main .hint{color:var(--ymt-on-info-container, inherit);background-color:var(--ymt-info-container, var(--ymt-surface-container));padding:var(--ymt-spacing-m);border-radius:var(--ymt-corner-xs);margin:0 0 var(--ymt-spacing-m)}:host main .error{color:var(--ymt-on-danger-container);background-color:var(--ymt-danger-container);border-radius:var(--ymt-corner-m);padding:var(--ymt-spacing-m);margin:0}:host main .readonly-field{opacity:.5;pointer-events:none}:host main .readonly-label{pointer-events:none}:host main .roles-section{margin:var(--ymt-spacing-m) 0}:host main .roles-section.has-error ymusrmgmt-role-selection{border:var(--ymt-focus-indicator-size) solid var(--ymt-danger);border-radius:var(--ymt-corner-xs);display:block}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
 
-class YuvGroupsPageComponent {
+/**
+ * `MatPaginatorIntl` is provided app-wide as a single shared singleton (see `provideYmtMaterial`),
+ * translated from the generic `ymt.paginator.*` keys ("Hits per page" etc.) that every paginator
+ * in the whole shell reuses - overriding `itemsPerPageLabel` there would relabel every other
+ * paginator too, not just this page's. Providing this class at the component level instead scopes
+ * the override to just this page's `mat-paginator`, while still delegating everything else
+ * (including re-translation on language change) to the shared instance.
+ */
+class UserListPaginatorIntl extends MatPaginatorIntl {
+    /** `parent.changes` is the app-wide singleton's Subject - it outlives this instance, so the
+     * subscription below has to be torn down explicitly on destroy. Without it, every time this
+     * page's component is recreated (e.g. navigating away and back), another subscriber piles onto
+     * the singleton forever, since nothing else ever unsubscribes it. */
+    #parentSubscription;
+    constructor() {
+        super();
+        const parent = inject(MatPaginatorIntl, { skipSelf: true });
+        const translate = inject(TranslateService);
+        // Our own `changes` (inherited from the base class, not `parent`'s) is what this page's
+        // `mat-paginator` actually subscribes to, so re-translating on the parent's changes (e.g. a
+        // language switch) still has to be forwarded explicitly via `this.changes.next()`.
+        const update = () => {
+            this.itemsPerPageLabel = translate.instant('yuv.app.user-management.users.label.navigation.pagination.itemsPerPage');
+            this.nextPageLabel = parent.nextPageLabel;
+            this.previousPageLabel = parent.previousPageLabel;
+            this.firstPageLabel = parent.firstPageLabel;
+            this.lastPageLabel = parent.lastPageLabel;
+            this.getRangeLabel = parent.getRangeLabel;
+            this.changes.next();
+        };
+        update();
+        this.#parentSubscription = parent.changes.subscribe(update);
+    }
+    ngOnDestroy() {
+        this.#parentSubscription.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: UserListPaginatorIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: UserListPaginatorIntl });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: UserListPaginatorIntl, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+class YuvUserManagementComponent {
+    #shell = inject(ShellService);
+    #titleService = inject(Title);
+    #app = this.#shell.getApp(APP_ID);
+    appName = this.#app?.title;
     layoutSettingsID = APP_ID + '#root.layout.settings';
+    /** Key the chosen page size is remembered under, across sessions - see `#loadStoredPageSize`. */
+    #pageSizeSettingsKey = APP_ID + '#root.pageSize';
+    pageSizeOptions = [10, 25, 50, 100];
+    /** `yuv-split-view` area indices for the directory layout, so the top-bar hide/toggle buttons
+     * and the collapsed-rail templates don't hardcode them repeatedly. */
+    Area = { GROUPS: 0, DETAILS: 2 };
     #logger = inject(Logger);
     #userManagementService = inject(YuvUserManagementService);
     #translateService = inject(TranslateService);
     #dialog = inject(MatDialog);
     #notificationService = inject(NotificationService);
-    groupDetailsComponent;
-    actions = [];
+    #userService = inject(UserService);
+    #confirmService = inject(ConfirmService);
+    #route = inject(ActivatedRoute);
+    #router = inject(Router);
+    #destroyRef = inject(DestroyRef);
+    #injector = inject(Injector);
+    #layoutSettings = inject(LayoutSettingsService);
+    userDetailsComponent;
+    groupsComponent;
+    /** The search box's displayed value, bound to `<yuv-simple-search [query]>` in the template.
+     * A signal rather than a `viewChild` + imperative assignment: the box lives inside an
+     * `<ng-template yuvAppHeaderSlot="search">` that the shell renders into its own header component
+     * on the shell's timing, but the bindings in that template are still evaluated in *this*
+     * component's context, whenever and wherever it ends up being rendered - so there is nothing to
+     * wait for. Always set to a fresh object: `query` is a plain setter input, so Angular only
+     * re-invokes it when the bound reference changes. */
+    searchBoxQuery = signal({ term: '' }, ...(ngDevMode ? [{ debugName: "searchBoxQuery" }] : /* istanbul ignore next */ []));
     pagination = { total: 0, pages: 0, page: 0 };
     busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
-    displayedColumns = ['name', 'description', 'id'];
-    icons = {
-        ...APP_ICONS,
-    };
+    /** How many rows the user list and the group-membership list fetch/show per page - user-selectable
+     * via the paginator's page-size control, remembered across sessions. */
+    pageSize = signal(this.#loadStoredPageSize(), ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    displayedColumns = ['avatar', 'user', 'email', 'actions'];
+    icons = APP_ICONS;
     dataSource = signal([], ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
-    selection = signal(new SelectionModel(false, undefined), ...(ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []));
-    enableDetails = signal(false, ...(ngDevMode ? [{ debugName: "enableDetails" }] : /* istanbul ignore next */ []));
-    layoutOptions = {
-        resizable: true,
-        detailsSize: 25,
-        detailsMinSize: 25,
-        detailsMaxSize: 75
-    };
-    #query = { term: '' };
-    #updateActions(selectedGroup) {
-        if (!selectedGroup) {
-            this.actions = [];
-            return;
+    /** The selected row, or `undefined` when nothing is selected. Single-select and non-toggling
+     * (see `select`), so a plain signal rather than a `SelectionModel` - and being a real signal, it
+     * lets everything derived from it (`activeRowIndex`, `isSelected`) be a memoized `computed()`. */
+    selectedUser = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedUser" }] : /* istanbul ignore next */ []));
+    /** The rendered rows, in `dataSource()` order - see `FocusableRowDirective`. */
+    rowItems = viewChildren(FocusableRowDirective, ...(ngDevMode ? [{ debugName: "rowItems" }] : /* istanbul ignore next */ []));
+    /** Drives Up/Down over the rows, moving real DOM focus with the roving tabindex below. Built
+     * from the `viewChildren` signal directly, so it follows the rows as the page's contents change
+     * - hence the `Injector`, which is the signal overload's way of scoping that tracking.
+     *
+     * Selection follows focus here, matching the groups rail and a native single-select list: the
+     * manager only moves focus, so `change` is what turns that into a selection. */
+    #rowKeyManager = new FocusKeyManager(this.rowItems, this.#injector);
+    constructor() {
+        // Selection follows keyboard focus, the way a native single-select list behaves - and the way
+        // this table behaved when it moved focus by hand.
+        this.#rowKeyManager.change.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((index) => {
+            const row = this.dataSource()[index];
+            if (row)
+                this.select(row);
+        });
+    }
+    /** Row index per user id, so the roving tabindex and the selected-row class below are O(1)
+     * lookups rather than a `findIndex` per row per change-detection pass. */
+    #rowIndexById = computed(() => new Map(this.dataSource().map((user, index) => [user.id, index])), ...(ngDevMode ? [{ debugName: "#rowIndexById" }] : /* istanbul ignore next */ []));
+    /** Roving-tabindex position of the selected row within `dataSource()` - only this row (and its
+     * actions button) is a real Tab stop, so Tab moves from the selected row straight to whatever
+     * follows the table instead of stopping at every row in between, mirroring the groups rail.
+     * `-1` (never a valid row index) when nothing is selected, so that state correctly makes every
+     * row's button unreachable via Tab, rather than falling back to row 0 and making an arbitrary,
+     * never-selected row's button reachable. */
+    activeRowIndex = computed(() => {
+        const selected = this.selectedUser();
+        return selected ? this.#rowIndexById().get(selected.id) ?? -1 : -1;
+    }, ...(ngDevMode ? [{ debugName: "activeRowIndex" }] : /* istanbul ignore next */ []));
+    /** The id of the group currently scoping the user list, or `undefined` for "All users". This is
+     * the scope *axis* - set straight from the route, so the list can be fetched for it immediately,
+     * without waiting on the group's own record to arrive. `selectedGroupDetails` below is the same
+     * group's content, for display. */
+    selectedGroupId = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedGroupId" }] : /* istanbul ignore next */ []));
+    /** The full record (name, roles, members) of `selectedGroupId`'s group, fetched alongside the
+     * list rather than before it - see `#loadGroupDetails`. Briefly `undefined` after a group is
+     * picked, and whenever no group is selected. */
+    selectedGroupDetails = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedGroupDetails" }] : /* istanbul ignore next */ []));
+    /** Roles granted by the scoping group, so the detail pane can highlight which of a member's inherited roles come from it specifically. Empty until `selectedGroupDetails` has loaded, or when no group is selected. */
+    selectedGroupRoles = computed(() => this.selectedGroupDetails()?.roles ?? [], ...(ngDevMode ? [{ debugName: "selectedGroupRoles" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    /** Which entry of the list pane's "All / Enabled / Disabled" filter menu is active - `undefined`
+     * for "All users". Combines with `searchTerm` - both are sent to the users endpoint at once, so
+     * a state filter narrows an active search. Only applies to "All users" though: the backend
+     * doesn't support filtering group members by state. */
+    enabledFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "enabledFilter" }] : /* istanbul ignore next */ []));
+    /** One-entry memo for `getRowActions`, keyed on everything those actions are derived from.
+     *
+     * The row menu's `matMenuContent` template re-evaluates its `@for` on every change-detection
+     * pass for as long as the menu is open, and each rebuild costs a `getCurrentUser()` lookup, four
+     * or five `translateService.instant()` lookups and four fresh objects. Only one row's menu can
+     * be open at a time, so a single entry covers it.
+     *
+     * Keying on the row object rather than its id is deliberate: a list reload replaces the objects,
+     * so a row whose `enabled` state changed can't keep stale actions. The scoping group is part of
+     * the key for the same reason - it decides whether "Remove from group" is there at all, and
+     * carries the name that action's confirmation uses.
+     *
+     * Building the array on the trigger's `(menuOpened)` instead - the obvious alternative - does
+     * *not* work: `MatMenuTrigger.openMenu` attaches the menu content and focuses its first item
+     * before emitting `menuOpened`, so the menu would render, size and position itself empty.
+     */
+    #rowActionsMemo;
+    /** The action menu for one row - see `#rowActionsMemo`. Bound by the row menu's template. */
+    rowActionsFor(user) {
+        const group = this.selectedGroupDetails();
+        let memo = this.#rowActionsMemo;
+        if (!memo || memo.user !== user || memo.group !== group) {
+            memo = { user, group, actions: this.getRowActions(user) };
+            this.#rowActionsMemo = memo;
         }
+        return memo.actions;
+    }
+    /**
+     * Builds the edit/activate/deactivate/delete menu for a given user row - it doesn't depend on
+     * the row being selected first. When a group is currently scoping the list, a "Remove from
+     * group" action is appended too.
+     *
+     * Called through `rowActionsFor`, not directly from the template. (The detail pane has its own,
+     * separate header action - a single edit button that emits `editUser` - and never used this.)
+     */
+    getRowActions(user) {
+        const isSelf = user.id === this.#userService.getCurrentUser().id;
+        const group = this.selectedGroupDetails();
         const editAction = {
-            id: 'yuv.app.groups.action.edit',
-            icon: APP_ICONS.actionEditGroup,
-            label: this.#translateService.instant('yuv.app.user-management.groups.action.edit.label'),
-            callback: () => this.editSelectedGroup(),
+            id: 'yuv.app.users.action.edit',
+            icon: APP_ICONS.actionEditUser,
+            label: this.#translateService.instant('yuv.app.user-management.users.action.edit.label'),
+            callback: () => this.editUser(user),
+        };
+        const stateAction = user.enabled
+            ? {
+                id: 'yuv.app.users.action.deactivate',
+                icon: APP_ICONS.actionDeactivateUser,
+                label: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.label'),
+                disabled: isSelf,
+                callback: () => this.deactivateUser(user),
+            }
+            : {
+                id: 'yuv.app.users.action.activate',
+                icon: APP_ICONS.actionActivateUser,
+                label: this.#translateService.instant('yuv.app.user-management.users.action.activate.label'),
+                disabled: isSelf,
+                callback: () => this.activateUser(user),
+            };
+        const deleteAction = {
+            id: 'yuv.app.users.action.delete',
+            icon: APP_ICONS.actionDeleteUser,
+            label: this.#translateService.instant('yuv.app.user-management.users.action.delete.label'),
+            disabled: isSelf,
+            callback: () => this.deleteUser(user),
         };
-        this.actions = [editAction];
+        const actions = [editAction, stateAction];
+        if (group) {
+            actions.push({
+                id: 'yuv.app.users.action.removeGroupMember',
+                icon: APP_ICONS.actionRemoveGroupMember,
+                label: this.#translateService.instant('yuv.app.user-management.groups.action.removeMember.label'),
+                callback: () => this.removeGroupMember(group, user),
+            });
+        }
+        actions.push(deleteAction);
+        return actions;
+    }
+    createNewUser() {
+        this.#logger.debug('Create new user ...');
+        this.#dialog
+            .open(CreateUserComponent, CreateUserComponent.DIALOG_CONFIG)
+            .afterClosed()
+            .subscribe((createdUser) => {
+            if (createdUser) {
+                this.#logger.debug('New user created with ID: ' + createdUser.id);
+                this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.users.action.create.success'));
+                // The list is sorted alphabetically, so the new user could land on any page - searching
+                // by its own username reliably surfaces it (as the only/first match) instead, letting the
+                // usual auto-select-first-row fallback pick it: ready to assign roles/groups to right away.
+                // Clears any active state filter along with it, which would otherwise be free to hide the
+                // very user just created.
+                this.#navigateToScope({ search: createdUser.username, enabled: null });
+            }
+        });
     }
     createNewGroup() {
         this.#logger.debug('Create new group ...');
-        this.#dialog.open(CreateGroupComponent, {
-            width: '400px',
-            maxWidth: '90vw',
-        }).afterClosed().subscribe((createdGroupId) => {
-            if (createdGroupId) {
-                this.#logger.debug("New group created with ID: " + createdGroupId);
-                this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.group.action.create.success'));
-                this.refresh();
+        this.#dialog
+            .open(CreateGroupComponent, CreateGroupComponent.DIALOG_CONFIG)
+            .afterClosed()
+            .subscribe((createdGroup) => {
+            if (createdGroup) {
+                this.#logger.debug('New group created with ID: ' + createdGroup.id);
+                this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.groups.action.create.success'));
+                this.groupsComponent.refresh();
+                // Selects it right away so the (still empty) group is scoping the table, ready for adding members.
+                this.onGroupSelected(createdGroup);
             }
         });
     }
-    editSelectedGroup() {
-        const selected = this.selection().hasValue() ? this.selection().selected[0] : undefined;
-        if (selected) {
-            this.#logger.debug(`Edit selected user with id '${selected.id}'...`);
-            this.#dialog.open(EditGroupComponent, {
-                width: '800px',
-                maxWidth: '90vw',
-                data: {
-                    group: this.groupDetailsComponent.groupDetails()
-                },
-            }).afterClosed().subscribe((editedGroupId) => {
-                if (editedGroupId) {
-                    this.#logger.debug("Group edited with ID: " + editedGroupId);
-                    this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.groups.action.edit.success', { name: selected.name }));
-                    this.refresh();
+    /** Opens a dialog to bulk-add users to `group` - the single owner of that flow, for both the
+     * list pane's own button (where `group` is always the group scoping the list) and the rail's
+     * per-row action (where it can be any group, see `GroupsComponent.addMembersRequested`). */
+    openAddGroupMembersDialog(group) {
+        this.#logger.debug(`Add members to group '${group.id}' ...`);
+        this.#dialog
+            .open(AddGroupMembersComponent, {
+            ...AddGroupMembersComponent.DIALOG_CONFIG,
+            data: { group },
+        })
+            .afterClosed()
+            .subscribe((result) => {
+            if (!result)
+                return;
+            if (result.addedCount > 0) {
+                this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.groups.action.addMembers.success', { count: result.addedCount, name: group.name }));
+                // Only the list currently on screen needs reloading - adding members to some other
+                // group from the rail's row menu doesn't change it.
+                if (this.selectedGroupId() === group.id) {
+                    this.#reloadCurrentPage();
                 }
+            }
+            if (result.failedCount > 0) {
+                this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.groups.action.addMembers.partialError', { count: result.failedCount, name: group.name }));
+            }
+        });
+    }
+    /** Edit any row's user. */
+    editUser(user) {
+        this.#logger.debug(`Edit user with id '${user.id}'...`);
+        this.#userManagementService.getUserDetails(user.id).subscribe({
+            next: (userDetails) => {
+                this.#dialog
+                    .open(EditUserComponent, {
+                    ...EditUserComponent.DIALOG_CONFIG,
+                    data: { user: userDetails },
+                })
+                    .afterClosed()
+                    .subscribe((editedUserId) => {
+                    if (editedUserId) {
+                        this.#logger.debug('User edited with ID: ' + editedUserId);
+                        this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.users.action.edit.success', { username: user.username }));
+                        this.refresh(this.isSelected(user));
+                    }
+                });
+            },
+            error: (e) => {
+                this.#logger.error(`Failed to load details for user with id '${user.id}'`, e);
+            },
+        });
+    }
+    activateUser(user) {
+        this.updateUserEnabledState(user, true);
+    }
+    deactivateUser(user) {
+        this.updateUserEnabledState(user, false);
+    }
+    updateUserEnabledState(user, enabled) {
+        const action = enabled ? 'activate' : 'deactivate';
+        const updateUserRequest = { enabled };
+        // Deactivating is the destructive direction, so only it asks for confirmation; activating goes
+        // straight through.
+        const confirmed$ = enabled
+            ? of(true)
+            : this.#confirmService.confirm({
+                title: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.label'),
+                message: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.confirm.message', { username: user.username }),
+                confirmLabel: this.#translateService.instant('yuv.app.user-management.users.action.deactivate.confirm.label'),
             });
-        }
+        confirmed$
+            .pipe(filter(Boolean), tap(() => this.busy.set(true)), switchMap(() => this.#userManagementService.updateUser(user.id, updateUserRequest)))
+            .subscribe({
+            error: (e) => {
+                this.#notificationService.error(this.#translateService.instant(`yuv.app.user-management.users.action.${action}.error`, {
+                    username: user.username,
+                }));
+                this.#logger.error(`Failed to ${action} user with id ${user.id}`, e);
+                this.busy.set(false);
+            },
+            complete: () => {
+                this.#notificationService.success(this.#translateService.instant(`yuv.app.user-management.users.action.${action}.success`, { username: user.username }));
+                this.busy.set(false);
+                this.refresh(this.isSelected(user));
+            },
+        });
     }
-    deleteSelectedGroup() {
-        const selected = this.selection().hasValue() ? this.selection().selected[0] : undefined;
-        if (selected) {
-            this.#logger.debug(`Delete selected group with id '${selected.id}'...`);
-            this.#userManagementService.deleteGroup(selected).subscribe({
-                next: (result) => {
-                    if (result) {
-                        this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.groups.action.delete.success', { name: selected.name }));
+    deleteUser(user) {
+        this.#logger.debug(`Delete user with id '${user.id}'...`);
+        this.#userManagementService.deleteUser(user).subscribe({
+            next: (result) => {
+                if (result) {
+                    this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.users.action.delete.success', {
+                        username: user.username,
+                    }));
+                    if (this.isSelected(user)) {
                         this.deselect();
-                        const currentPage = this.pagination?.page || 0;
-                        const targetPage = (currentPage > 0 && this.dataSource().length === 1) ? currentPage - 1 : currentPage;
-                        this.#loadGroupList(targetPage);
                     }
-                },
-                error: (e) => {
-                    this.#logger.error(`Failed to delete group with id '${selected.id}'`, e);
-                    this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.groups.action.delete.error', { name: selected.name }));
+                    this.#reloadCurrentPage();
                 }
-            });
-        }
+            },
+            error: (e) => {
+                this.#logger.error(`Failed to delete user with id '${user.id}'`, e);
+                this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.users.action.delete.error', {
+                    username: user.username,
+                }));
+            },
+        });
+    }
+    /** Removes a user from the group currently scoping the list - the user account itself is unaffected. */
+    removeGroupMember(group, user) {
+        this.#logger.debug(`Remove user with id '${user.id}' from group '${group.id}'...`);
+        this.#userManagementService.removeGroupMember(group, user).subscribe({
+            next: (result) => {
+                if (result) {
+                    this.#notificationService.success(this.#translateService.instant('yuv.app.user-management.groups.action.removeMember.success', { username: user.username, name: group.name }));
+                    if (this.isSelected(user)) {
+                        this.deselect();
+                    }
+                    this.#reloadCurrentPage();
+                }
+            },
+            error: (e) => {
+                this.#logger.error(`Failed to remove user with id '${user.id}' from group '${group.id}'`, e);
+                this.#notificationService.error(this.#translateService.instant('yuv.app.user-management.groups.action.removeMember.error', { username: user.username, name: group.name }));
+            },
+        });
     }
+    /** Non-toggling - a row click/Enter/Space always (re-)selects, never deselects, so the list
+     * always has a selected row (and the detail pane never has to fall back to its empty state)
+     * whenever `dataSource()` isn't itself empty. */
     select(row) {
-        if (this.selection().isSelected(row)) {
-            this.deselect();
+        this.selectedUser.set(row);
+    }
+    deselect() {
+        this.selectedUser.set(undefined);
+    }
+    /** Arrow keys (and Home/End) for the row list - handed straight to the key manager, which moves
+     * focus; `#rowKeyManager`'s `change` subscription turns that into a selection. */
+    onTableKeydown(event) {
+        // The selection can move without the key manager having done it - the auto-select after a
+        // reload, or a row click - so bring its active index back in step first, or the next arrow
+        // press would move relative to a row that is no longer the current one. `updateActiveItem`
+        // does that without emitting `change` or moving focus.
+        const selected = this.activeRowIndex();
+        if (selected !== -1 && selected !== this.#rowKeyManager.activeItemIndex) {
+            this.#rowKeyManager.updateActiveItem(selected);
         }
-        else {
-            this.selection().select(row);
-            this.#updateActions(row);
+        this.#rowKeyManager.onKeydown(event);
+    }
+    /** Moves real DOM focus onto the row at `index` - also called on a plain row click, see
+     * `FocusableRowDirective.focus`. Going through the key manager (rather than the element) keeps
+     * its active index in step, so the next arrow press moves from the clicked row. */
+    focusRow(index) {
+        this.#rowKeyManager.setActiveItem(index);
+    }
+    /**
+     * Called by the groups rail - scopes the user list to that group's members, or back to every
+     * user when `group` is undefined (the rail's pinned "All users" entry).
+     *
+     * Navigation only: like every other scope change, it is applied by `#applyScopeFromRoute` once
+     * the router reports the new URL, never here.
+     */
+    onGroupSelected(group) {
+        this.#navigateToScope({ group: group?.id ?? null });
+    }
+    /** Called from the "All / enabled / disabled" filter menu in the list pane's header - only shown
+     * while viewing "All users". Narrows an active search rather than replacing it: the state filter
+     * and the search term combine (see `#navigateToScope`). */
+    onEnabledFilterSelected(enabled) {
+        this.#navigateToScope({ enabled: enabled ?? null });
+    }
+    /** Bound to `yuv-simple-search`'s `querySubmit` (Enter / the search button) and `clearInput`
+     * (the X button) - deliberately not its `queryChange`, which fires debounced on every keystroke
+     * and would otherwise refresh the list while the user is still typing.
+     *
+     * Leaves an active state filter in place (searching within "only disabled users" keeps showing
+     * only disabled ones), and clearing the term leaves it in place too - see `#navigateToScope`. */
+    onQueryChange(q) {
+        this.#navigateToScope({ search: q.term || null });
+    }
+    /**
+     * Points the URL at a new scope, and stops there - `#applyScopeFromRoute` does the rest.
+     *
+     * Takes a patch of the scope axes and merges it into the current query string
+     * (`queryParamsHandling: 'merge'`), so an axis the patch doesn't mention just keeps its current
+     * value - the router carries that over itself, straight from the current URL. The one real
+     * constraint the backend imposes needs an explicit override on top of that merge: `group` is
+     * exclusive with the other two - group membership supports neither search nor state-filtering -
+     * so touching the group axis at all (picking a group *or* going back to "All users") clears
+     * `search`/`enabled` alongside it, even if the patch didn't otherwise mention them. `search` and
+     * `enabled` themselves need no such override - the users endpoint takes both at once, so leaving
+     * one out of a patch is exactly "carry it over", which `merge` already does.
+     *
+     * Query params rather than path segments specifically so this never causes a route-config
+     * change - Angular only destroys/recreates a routed component across genuinely different route
+     * configs, never for a query-param-only change, so switching between "All users" and any group
+     * (or between two groups) always reuses this same instance.
+     */
+    #navigateToScope(patch) {
+        const isGroupChange = patch.group !== undefined;
+        const queryParams = {};
+        if (patch.group !== undefined)
+            queryParams['group'] = patch.group;
+        if (patch.search !== undefined)
+            queryParams['search'] = patch.search;
+        if (patch.enabled !== undefined) {
+            queryParams['enabled'] = patch.enabled === null ? null : String(patch.enabled);
+        }
+        if (isGroupChange) {
+            queryParams['search'] = null;
+            queryParams['enabled'] = null;
         }
-        this.enableDetails.set(true);
+        this.#router.navigate([], {
+            relativeTo: this.#route,
+            queryParamsHandling: 'merge',
+            queryParams,
+        });
     }
-    deselect() {
-        this.selection().clear();
-        this.#updateActions(undefined);
+    /** The groups rail edits/deletes rows itself; this only reconciles the page's own state when the group it's currently scoped to was affected. */
+    onGroupUpdated(group) {
+        if (this.selectedGroupId() === group.id) {
+            this.selectedGroupDetails.set(group);
+        }
+    }
+    /** Loads the scoping group's full record (name, roles) for display - see `selectedGroupDetails`.
+     * Fired alongside the list request rather than before it, so the rows aren't waiting on a
+     * response only the pane header needs. The guard covers the group being switched again while
+     * this one was still in flight. */
+    #loadGroupDetails(groupId) {
+        this.#userManagementService.getGroupDetails(groupId).subscribe({
+            next: (details) => {
+                if (this.selectedGroupId() === groupId) {
+                    this.selectedGroupDetails.set(details);
+                }
+            },
+            error: (e) => {
+                this.#logger.error(`Failed to load details for group with id '${groupId}'`, e);
+            },
+        });
+    }
+    onGroupDeleted(groupId) {
+        if (this.selectedGroupId() === groupId) {
+            this.onGroupSelected(undefined);
+        }
     }
     isSelected(row) {
-        return this.selection().selected?.some(item => item.id === row.id);
+        return this.selectedUser()?.id === row.id;
     }
-    refresh() {
-        this.#loadGroupList(this.pagination?.page || 0);
+    /** Reloads whichever page the list is currently showing, leaving the scope/search untouched. */
+    #reloadCurrentPage() {
+        this.#loadUserList(this.pagination.page);
     }
-    refreshGroupDetails() {
-        if (this.groupDetailsComponent) {
-            this.groupDetailsComponent.refresh();
+    refresh(refreshDetails = false) {
+        this.#reloadCurrentPage();
+        if (refreshDetails) {
+            this.refreshUserDetails();
         }
     }
-    getPageSize() {
-        return YuvUserManagementService.DEFAULT_PAGE_SIZE;
+    refreshUserDetails() {
+        if (this.userDetailsComponent) {
+            this.userDetailsComponent.refresh();
+        }
     }
-    onChangePage($event) {
-        const { pageIndex } = $event;
-        this.#loadGroupList(pageIndex);
+    /**
+     * Reads the remembered page size back, falling back to the default for anything unexpected (no
+     * stored value yet, or a size no longer offered in `pageSizeOptions`).
+     *
+     * Persisted through `LayoutSettingsService` rather than the browser store directly - the same
+     * mechanism the adjacent `yuv-split-view` uses for `[layoutSettingsID]`, so this page keeps one
+     * persistence story instead of two, and the value lands under the framework's own `yuv.layout:`
+     * namespace where `clearSettings()` can actually reach it. The service only accepts objects (it
+     * returns `false` for anything else, storing nothing), hence the one-field wrapper.
+     */
+    #loadStoredPageSize() {
+        const stored = this.#layoutSettings.getSettings(this.#pageSizeSettingsKey);
+        const pageSize = Number(stored?.pageSize);
+        return this.pageSizeOptions.includes(pageSize)
+            ? pageSize
+            : YuvUserManagementService.DEFAULT_PAGE_SIZE;
     }
-    onQueryChange(q) {
-        this.#query.term = q.term || '';
-        this.#loadGroupList(0);
+    onChangePage($event) {
+        const { pageIndex, pageSize } = $event;
+        if (pageSize !== this.pageSize()) {
+            this.pageSize.set(pageSize);
+            this.#layoutSettings.saveSettings(this.#pageSizeSettingsKey, { pageSize });
+            // A different page size shifts what "page N" means - restart from the first page rather
+            // than keeping an index that may now point past the end, or skip/duplicate rows.
+            this.#loadUserList(0);
+        }
+        else {
+            this.#loadUserList(pageIndex);
+        }
     }
     ngOnInit() {
-        this.#loadGroupList(0);
+        const translatedTitle = this.appName.startsWith('yuv.')
+            ? this.#translateService.instant(this.appName)
+            : this.appName;
+        this.#titleService.setTitle(translatedTitle);
+        // Reactive rather than a one-time snapshot: this component is never destroyed/recreated for a
+        // query-param-only change (see `#navigateToScope`), so a snapshot read would only ever see the
+        // very first scope and miss every later one - picking a different group, typing/clearing a
+        // search, switching the state filter, or browser Back/Forward through any of them.
+        this.#route.queryParamMap
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe((params) => this.#applyScopeFromRoute(params));
     }
-    #loadGroupList(page) {
+    /**
+     * The single writer of the page's scope state, and the only thing that loads the list for a
+     * scope change. Every source arrives here the same way: the groups rail, the search box, the
+     * filter menu, a deep link and browser Back/Forward all go through `#navigateToScope` (or the
+     * address bar) and are read back off the route.
+     *
+     * That one-way flow is why there is no "is this the echo of my own navigation?" bookkeeping
+     * here. Nothing applies a scope before navigating, so there is no echo to tell apart from a
+     * genuine external change. And re-selecting what is already selected produces an identical URL,
+     * which Angular's default `onSameUrlNavigation: 'ignore'` drops before it ever reaches this
+     * subscription - so the duplicate reload that used to need a guard of its own can't happen.
+     */
+    #applyScopeFromRoute(params) {
+        const groupId = params.get('group');
+        // A group scope wins over the other two axes. The backend supports neither search nor
+        // state-filtering for group members, so a URL carrying both (only reachable by hand-editing
+        // it - `#navigateToScope` never emits that combination) applies the group and drops the rest,
+        // rather than leaving a filter showing as active that nothing can honour. `search` and
+        // `enabled` do combine with each other, and are applied together below.
+        const term = groupId ? '' : params.get('search') ?? '';
+        const enabled = groupId ? undefined : this.#parseEnabledParam(params.get('enabled'));
+        // Entering, leaving or switching a group scope always starts over at the first row; a changed
+        // search or filter doesn't, so a row that survives into the new results stays selected (see
+        // `#loadUserList`'s restore-by-id).
+        if (groupId !== (this.selectedGroupId() ?? null)) {
+            this.deselect();
+        }
+        this.searchTerm.set(term);
+        this.searchBoxQuery.set({ term });
+        this.enabledFilter.set(enabled);
+        this.selectedGroupId.set(groupId ?? undefined);
+        this.selectedGroupDetails.set(undefined);
+        if (groupId) {
+            // Fired alongside the list request below, not before it: only the pane header needs the
+            // group's own record, so the rows shouldn't wait for it.
+            this.#loadGroupDetails(groupId);
+        }
+        this.#loadUserList(0);
+    }
+    /** `?enabled=true|false` - anything else (including the param being absent) means "All users". */
+    #parseEnabledParam(value) {
+        if (value === 'true')
+            return true;
+        if (value === 'false')
+            return false;
+        return undefined;
+    }
+    #loadUserList(page) {
         this.busy.set(true);
-        this.#userManagementService.fetchGroups(page, this.#query.term).subscribe({
+        // Clears the previously shown rows immediately rather than leaving them up (stale, and
+        // possibly for a different group) until the new response arrives - the busy indicator alone
+        // (a subtle animated pane border) isn't enough to make clear what's currently shown is old.
+        this.dataSource.set([]);
+        const groupId = this.selectedGroupId();
+        const term = this.searchTerm();
+        const pageSize = this.pageSize();
+        // Group membership search/state-filtering isn't supported by the backend - a group scope never
+        // coexists with a non-empty `term` or a set `enabledFilter`, which `#applyScopeFromRoute`
+        // guarantees for every scope, from every source. Outside a group the two are independent and
+        // both go to the endpoint, which ANDs them.
+        const request$ = groupId
+            ? this.#userManagementService.fetchGroupMembers(groupId, page, pageSize)
+            : this.#userManagementService.fetchUsers(page, term, this.enabledFilter(), pageSize);
+        request$.subscribe({
             next: (response) => {
-                console.log(`fetched groups: ${response}`);
                 this.dataSource.set(response.objects);
                 this.pagination = {
                     total: response.totalNumItems,
-                    pages: Math.ceil(response.totalNumItems / YuvUserManagementService.DEFAULT_PAGE_SIZE),
-                    page: page
+                    pages: Math.ceil(response.totalNumItems / pageSize) || 1,
+                    page: page,
                 };
             },
             error: (e) => {
-                this.#logger.error('Failed to fetch groups', e);
+                this.#logger.error('Failed to fetch users', e);
                 this.busy.set(false);
             },
             complete: () => {
-                const selected = this.selection().hasValue() ? this.selection().selected[0] : undefined;
-                if (selected && this.dataSource().some(g => g.id === selected.id)) {
-                    const updatedSelected = this.dataSource().find(g => g.id === selected.id);
+                if (this.dataSource().length === 0 && page > 0) {
+                    this.#loadUserList(page - 1);
+                    return;
+                }
+                // A plain name search matching nothing might actually be a user's exact id, pasted in by
+                // someone who only has that to go on - falling back to an exact-id lookup lets them jump
+                // straight to that user instead of hitting a dead end. Harmless no-op if it isn't one.
+                if (this.dataSource().length === 0 && page === 0 && !groupId && term) {
+                    this.#tryFindByIdFallback(term);
+                    return;
+                }
+                const selected = this.selectedUser();
+                const updatedSelected = selected && this.dataSource().find((u) => u.id === selected.id);
+                if (updatedSelected) {
                     this.select(updatedSelected);
-                    this.refreshGroupDetails();
                 }
-                else {
+                else if (this.dataSource().length > 0) {
+                    // Nothing selected (or the previous selection no longer exists in the freshly loaded
+                    // page) - always fall back to the first row rather than leaving the detail pane empty.
                     this.select(this.dataSource()[0]);
                 }
+                else {
+                    this.deselect();
+                }
                 this.busy.set(false);
             },
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvGroupsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: YuvGroupsPageComponent, isStandalone: true, selector: "ymusrmgmt-groups", host: { properties: { "class.busy": "!busy()", "class.pagination": "this.pagination" } }, viewQueries: [{ propertyName: "groupDetailsComponent", first: true, predicate: GroupDetailsComponent, descendants: true }], ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"search\">\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\"\n  [gutterSize]=\"16\"\n  [options]=\"layoutOptions\"\n  [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\">\n    <ng-container *ngTemplateOutlet=\"masterPaneContent\"></ng-container>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    <ng-container *ngTemplateOutlet=\"detailsPaneContent\"></ng-container>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.groups.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" [attr.aria-label]=\"'yuv.app.user-management.groups.navigation.pagination.aria' | translate\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh()\" [matTooltip]=\"'yuv.app.user-management.groups.navigation.refresh.tooltip' | translate\" [attr.aria-label]=\"'yuv.app.user-management.groups.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>\n\n<ng-template #masterPaneContent>\n  <ymt-pane-body>\n    <mat-table [dataSource]=\"dataSource()\" class=\"group-table mat-elevation-z8\" row>\n      <ng-container matColumnDef=\"state\">\n        <mat-header-cell *matHeaderCellDef />\n        <mat-cell *matCellDef=\"let element\"><mat-icon>{{ element.enabled ? icons.stateActive : icons.stateInactive\n            }}</mat-icon></mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"name\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.name' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.name}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"description\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.description' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.description}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"id\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.id' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n      </ng-container>\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row\n        *matRowDef=\"let row; columns: displayedColumns;\"\n        (click.single)=\"select(row)\"\n        [attr.tabindex]=\"0\"\n        (keydown.enter)=\"select(row)\"\n        (keydown.space)=\"$event.preventDefault(); select(row)\"\n        [class.selected-row]=\"this.isSelected(row)\" class=\"group-row\">\n      </mat-row>\n    </mat-table>\n  </ymt-pane-body>\n</ng-template>\n\n<ng-template #detailsPaneContent>\n  <ymt-pane-header [icon]=\"'group'\" [title]=\"'yuv.app.user-management.groups.details.title' | translate\" [subtitle]=\"selection().selected.at(0)?.id || ('yuv.app.user-management.groups.details.empty' | translate)\" [actions]=\"listActions\"></ymt-pane-header>\n  <ymt-pane-body>\n    <ymusrmgmt-group-details #groupDetails [groupId]=\"selection().selected.at(0)?.id\" />\n  </ymt-pane-body>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .group-table{overflow:auto;height:100%}:host .group-row:hover{background-color:var(--ymt-hover-background)}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: BusyOverlayDirective, selector: "[yuvBusyOverlay]", inputs: ["yuvBusyOverlay", "yuvBusyOverlayConfig", "yuvBusyError"], outputs: ["yuvBusyErrorDismiss"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "component", type: GroupDetailsComponent, selector: "ymusrmgmt-group-details", inputs: ["groupId"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }, { kind: "ngmodule", type: YmtLayoutModule }, { kind: "component", type: i5$1.MasterDetailsLayoutComponent, selector: "ymt-master-details-layout", inputs: ["layoutSettingsID", "options", "direction", "gutterSize", "detailsActive"], outputs: ["detailsActiveChange"] }, { kind: "directive", type: i5$1.YmtLayoutPaneDirective, selector: "[ymtLayoutPane]", inputs: ["role", "topBarActions"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i6$1.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i6$1.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i6.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvOverflowMenuModule }, { kind: "component", type: i8.OverflowMenuComponent, selector: "yuv-overflow-menu", inputs: ["overflowIcon", "groupLabels", "menuItems", "vertical"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    /** Called when a plain search matched no one - `term` might actually be a user's id rather than
+     * part of their name (the backend's search endpoint doesn't match on id, which is why the plain
+     * search above found nothing). If it resolves to a real user, show that one row directly rather
+     * than rewriting the search box to their username and re-running a name search for it - the box
+     * stays showing exactly the id that was typed. If not, this is just a genuine "no matches".
+     *
+     * An active state filter still applies: this lookup goes to the user endpoint directly, so a
+     * match whose state the filter excludes is discarded rather than shown as the one row of a list
+     * that claims to be filtered to the opposite state. */
+    #tryFindByIdFallback(term) {
+        const enabledFilter = this.enabledFilter();
+        this.#userManagementService.getUserDetails(term).subscribe({
+            next: (user) => {
+                if (enabledFilter !== undefined && user.enabled !== enabledFilter) {
+                    this.busy.set(false);
+                    return;
+                }
+                this.dataSource.set([user]);
+                this.pagination = { total: 1, pages: 1, page: 0 };
+                this.select(user);
+                this.busy.set(false);
+            },
+            error: () => {
+                this.busy.set(false);
+            },
+        });
+    }
+    openSettings() {
+        this.#dialog.open(SettingsComponent, SettingsComponent.DIALOG_CONFIG);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: YuvUserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: YuvUserManagementComponent, isStandalone: true, selector: "ymusrmgmt-root", providers: [
+            {
+                provide: MatPaginatorIntl,
+                useClass: UserListPaginatorIntl,
+            },
+        ], viewQueries: [{ propertyName: "rowItems", predicate: FocusableRowDirective, descendants: true, isSignal: true }, { propertyName: "userDetailsComponent", first: true, predicate: UserDetailsComponent, descendants: true }, { propertyName: "groupsComponent", first: true, predicate: GroupsComponent, descendants: true }], ngImport: i0, template: "<ng-template yuvAppHeaderSlot=\"actions\">\n  <div class=\"usrmgmt-header-actions\">\n    <ymusrmgmt-global-add-button (createUser)=\"createNewUser()\" (createGroup)=\"createNewGroup()\" />\n    <button\n      mat-icon-button\n      class=\"usrmgmt-settings-button\"\n      [matTooltip]=\"'yuv.app.user-management.navigation.action.settings.tooltip' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.navigation.action.settings.label' | translate\"\n      (click)=\"openSettings()\"\n    >\n      <mat-icon>{{ icons.actionSettings }}</mat-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template yuvAppHeaderSlot=\"search\">\n  <!-- querySubmit (Enter / the search button), not queryChange - queryChange fires debounced on\n       every keystroke, which used to refresh the list while still typing. clearInput (the X\n       button) still needs its own binding since it doesn't also emit querySubmit. -->\n  <yuv-simple-search\n    [query]=\"searchBoxQuery()\"\n    (querySubmit)=\"onQueryChange($event)\"\n    (clearInput)=\"onQueryChange({ term: '' })\"\n  ></yuv-simple-search>\n</ng-template>\n\n<main\n  class=\"usrmgmt-main__content\"\n  [attr.aria-label]=\"'yuv.app.user-management.content.label.aria' | translate\"\n>\n  @if (!split.isAreaVisible(Area.GROUPS)) {\n  <ymusrmgmt-pane-gutter\n    icon=\"left_panel_open\"\n    [flipLabel]=\"true\"\n    [label]=\"'yuv.app.user-management.label.rail.title' | translate\"\n    [tooltip]=\"'yuv.app.user-management.label.pane.showGroups.tooltip' | translate\"\n    (expand)=\"split.showArea(Area.GROUPS)\"\n  />\n  }\n\n  <yuv-split-view #split [layoutSettingsID]=\"layoutSettingsID\" class=\"content-split\">\n    <ng-template yuvSplitArea [size]=\"20\">\n      <ng-template #groupPaneTopBarActions>\n        <ymusrmgmt-pane-toggle-button\n          icon=\"left_panel_close\"\n          [tooltip]=\"'yuv.app.user-management.label.pane.hideGroups.tooltip' | translate\"\n          (toggled)=\"split.hideArea(Area.GROUPS)\"\n        />\n      </ng-template>\n\n      <ymusrmgmt-groups\n        [selectedGroupId]=\"selectedGroupId()\"\n        [topBarActions]=\"groupPaneTopBarActions\"\n        (groupSelected)=\"onGroupSelected($event)\"\n        (groupUpdated)=\"onGroupUpdated($event)\"\n        (groupDeleted)=\"onGroupDeleted($event)\"\n        (addMembersRequested)=\"openAddGroupMembersDialog($event)\"\n      >\n      </ymusrmgmt-groups>\n    </ng-template>\n\n    <ng-template yuvSplitArea [size]=\"60\">\n      <!-- `groupId` is the scope itself, known the moment a group is picked; `group` is that\n           group's record, which arrives a beat later (see `selectedGroupDetails`). Anything\n           structural keys off `groupId`, anything showing the group's own content off `group`. -->\n      @let groupId = selectedGroupId(); @let group = selectedGroupDetails(); @let enabled =\n      enabledFilter();\n      <!-- The list pane's own title, shared by its `aria-label` and its visible header. -->\n      @let listTitle = (groupId ? 'yuv.app.user-management.label.list.groupMembersTitle' :\n      'yuv.app.user-management.label.list.title' ) | translate;\n      <ng-template #userListTopBarActions>\n        @let groupsVisible = split.isAreaVisible(Area.GROUPS);\n        <ymusrmgmt-pane-toggle-button\n          align=\"start\"\n          icon=\"left_panel_close\"\n          [rotated]=\"!groupsVisible\"\n          [tooltip]=\"\n            (groupsVisible\n              ? 'yuv.app.user-management.label.pane.hideGroups.tooltip'\n              : 'yuv.app.user-management.label.pane.showGroups.tooltip'\n            ) | translate\n          \"\n          (toggled)=\"split.toggleArea(Area.GROUPS)\"\n        />\n        @let detailsVisible = split.isAreaVisible(Area.DETAILS);\n        <ymusrmgmt-pane-toggle-button\n          icon=\"right_panel_close\"\n          [rotated]=\"!detailsVisible\"\n          [tooltip]=\"\n            (detailsVisible\n              ? 'yuv.app.user-management.label.pane.hideUserDetails.tooltip'\n              : 'yuv.app.user-management.label.pane.showUserDetails.tooltip'\n            ) | translate\n          \"\n          (toggled)=\"split.toggleArea(Area.DETAILS)\"\n        />\n      </ng-template>\n\n      <!-- Enabled/disabled filtering isn't supported for group members - only offered while viewing \"All users\". -->\n      <ng-template #userFilterActions>\n        @if (!groupId) {\n        <button\n          mat-icon-button\n          class=\"user-filter-trigger\"\n          [class.active]=\"enabled !== undefined\"\n          [matMenuTriggerFor]=\"userFilterMenu\"\n          [matTooltip]=\"'yuv.app.user-management.label.filter.tooltip' | translate\"\n          [attr.aria-label]=\"'yuv.app.user-management.label.filter.tooltip' | translate\"\n        >\n          <mat-icon>filter_list</mat-icon>\n        </button>\n        } @else if (group) {\n        <button\n          mat-icon-button\n          (click)=\"openAddGroupMembersDialog(group)\"\n          [matTooltip]=\"'yuv.app.user-management.groups.action.addMembers.label' | translate\"\n          [attr.aria-label]=\"'yuv.app.user-management.groups.action.addMembers.label' | translate\"\n        >\n          <mat-icon>{{ icons.actionAddGroupMembers }}</mat-icon>\n        </button>\n        }\n      </ng-template>\n\n      <ymt-pane\n        [busy]=\"busy()\"\n        [yuvBusyOverlay]=\"busy()\"\n        [topBarActions]=\"userListTopBarActions\"\n        role=\"region\"\n        [attr.aria-label]=\"listTitle\"\n      >\n        <ymt-pane-header\n          [icon]=\"groupId ? 'group' : 'family_group'\"\n          [title]=\"listTitle\"\n          [actions]=\"userFilterActions\"\n        >\n          <ng-template #yuvPaneHeaderSubtitle>\n            <span class=\"pane-subtitle\">\n              <span>\n                @if (groupId) {\n                {{ group?.name }}\n                } @else if (enabled === true) {\n                {{ 'yuv.app.user-management.label.filter.enabled' | translate }}\n                } @else if (enabled === false) {\n                {{ 'yuv.app.user-management.label.filter.disabled' | translate }}\n                } @else {\n                {{ 'yuv.app.user-management.label.rail.allUsers' | translate }}\n                }\n              </span>\n              @if (searchTerm(); as term) {\n              <span class=\"search-hint\">{{\n                'yuv.app.user-management.label.search.filtered' | translate : { term }\n              }}</span>\n              }\n            </span>\n          </ng-template>\n        </ymt-pane-header>\n        <ymt-pane-body>\n          <mat-table\n            [dataSource]=\"dataSource()\"\n            class=\"user-table mat-elevation-z8\"\n            row\n            (keydown)=\"onTableKeydown($event)\"\n          >\n            <ng-container matColumnDef=\"avatar\">\n              <mat-header-cell *matHeaderCellDef />\n              <mat-cell *matCellDef=\"let element\">\n                <ymusrmgmt-user-avatar [user]=\"element\" />\n              </mat-cell>\n            </ng-container>\n            <ng-container matColumnDef=\"user\">\n              <mat-header-cell *matHeaderCellDef>{{\n                'yuv.app.user-management.users.property.user' | translate\n              }}</mat-header-cell>\n              <mat-cell *matCellDef=\"let element\">\n                <div class=\"user-identity\">\n                  <span class=\"user-username-row\">\n                    <span class=\"user-username\">{{ element.username }}</span>\n                  </span>\n                  <span class=\"user-name-row\">\n                    <span class=\"user-name\">{{ element.firstName }} {{ element.lastName }}</span>\n                  </span>\n                </div>\n              </mat-cell>\n            </ng-container>\n            <ng-container matColumnDef=\"email\">\n              <mat-header-cell *matHeaderCellDef>{{\n                'yuv.app.user-management.users.property.email' | translate\n              }}</mat-header-cell>\n              <mat-cell *matCellDef=\"let element\" class=\"user-email\">\n                {{ element.email }}\n              </mat-cell>\n            </ng-container>\n            <ng-container matColumnDef=\"actions\">\n              <mat-header-cell *matHeaderCellDef />\n              <mat-cell\n                *matCellDef=\"let element; let i = index\"\n                class=\"user-actions\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <button\n                  mat-icon-button\n                  [matMenuTriggerFor]=\"rowMenu\"\n                  [matMenuTriggerData]=\"{ user: element }\"\n                  [matTooltip]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n                  [attr.aria-label]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n                  [tabIndex]=\"activeRowIndex() === i ? 0 : -1\"\n                  (click)=\"select(element)\"\n                >\n                  <mat-icon>more_vert</mat-icon>\n                </button>\n              </mat-cell>\n            </ng-container>\n            <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n            <mat-row\n              ymusrmgmt-focusable-row\n              *matRowDef=\"let row; columns: displayedColumns; let i = index\"\n              (click.single)=\"select(row); focusRow(i)\"\n              [attr.tabindex]=\"activeRowIndex() === i ? 0 : -1\"\n              (keydown.enter)=\"select(row)\"\n              (keydown.space)=\"$event.preventDefault(); select(row)\"\n              [class.selected-row]=\"activeRowIndex() === i\"\n              [class.user-row--inactive]=\"!row.enabled\"\n              class=\"user-row\"\n            >\n            </mat-row>\n            <ng-template matNoDataRow>\n              @if (!busy() && selectedGroupDetails(); as group) {\n              <div class=\"empty-group-state\">\n                <span class=\"empty-group-state-icon\"\n                  ><mat-icon aria-hidden=\"true\">group_off</mat-icon></span\n                >\n                <h3 class=\"empty-group-state-title\">\n                  {{ 'yuv.app.user-management.label.emptyGroup.title' | translate }}\n                </h3>\n                <p class=\"empty-group-state-description\">\n                  {{\n                    'yuv.app.user-management.label.emptyGroup.description'\n                      | translate : { name: group.name }\n                  }}\n                </p>\n                <button ymtButton=\"primary\" (click)=\"openAddGroupMembersDialog(group)\">\n                  <mat-icon>{{ icons.actionAddGroupMembers }}</mat-icon>\n                  {{ 'yuv.app.user-management.groups.action.addMembers.label' | translate }}\n                </button>\n              </div>\n              }\n            </ng-template>\n          </mat-table>\n        </ymt-pane-body>\n        <ymt-pane-footer>\n          <mat-paginator\n            class=\"paginator\"\n            [length]=\"pagination.total\"\n            [pageIndex]=\"pagination.page\"\n            [pageSize]=\"pageSize()\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [attr.aria-label]=\"\n              'yuv.app.user-management.users.label.navigation.pagination.aria' | translate\n            \"\n            (page)=\"onChangePage($event)\"\n          ></mat-paginator>\n        </ymt-pane-footer>\n      </ymt-pane>\n    </ng-template>\n\n    <ng-template yuvSplitArea [size]=\"20\">\n      <ng-template #userDetailsPaneTopBarActions>\n        <ymusrmgmt-pane-toggle-button\n          align=\"start\"\n          icon=\"right_panel_close\"\n          [tooltip]=\"'yuv.app.user-management.label.pane.hideUserDetails.tooltip' | translate\"\n          (toggled)=\"split.hideArea(Area.DETAILS)\"\n        />\n      </ng-template>\n\n      <ymusrmgmt-user-details\n        [user]=\"selectedUser()\"\n        [groupRoles]=\"selectedGroupRoles()\"\n        [topBarActions]=\"userDetailsPaneTopBarActions\"\n        (editUser)=\"editUser($event)\"\n      />\n    </ng-template>\n  </yuv-split-view>\n\n  @if (!split.isAreaVisible(Area.DETAILS)) {\n  <ymusrmgmt-pane-gutter\n    icon=\"right_panel_open\"\n    [label]=\"'yuv.app.user-management.users.label.details.title' | translate\"\n    [tooltip]=\"'yuv.app.user-management.label.pane.showUserDetails.tooltip' | translate\"\n    (expand)=\"split.showArea(Area.DETAILS)\"\n  />\n  }\n</main>\n\n<mat-menu #rowMenu=\"matMenu\">\n  <ng-template matMenuContent let-user=\"user\">\n    @for (action of rowActionsFor(user); track action.id) {\n    <button mat-menu-item [disabled]=\"action.disabled\" (click)=\"action.callback?.(action)\">\n      <mat-icon>{{ action.icon }}</mat-icon>\n      <span>{{ action.label }}</span>\n    </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<mat-menu #userFilterMenu=\"matMenu\">\n  <button mat-menu-item (click)=\"onEnabledFilterSelected(undefined)\">\n    <mat-icon>{{\n      enabledFilter() === undefined ? 'radio_button_checked' : 'radio_button_unchecked'\n    }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.label.rail.allUsers' | translate }}</span>\n  </button>\n  <button mat-menu-item (click)=\"onEnabledFilterSelected(true)\">\n    <mat-icon>{{\n      enabledFilter() === true ? 'radio_button_checked' : 'radio_button_unchecked'\n    }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.label.filter.enabled' | translate }}</span>\n  </button>\n  <button mat-menu-item (click)=\"onEnabledFilterSelected(false)\">\n    <mat-icon>{{\n      enabledFilter() === false ? 'radio_button_checked' : 'radio_button_unchecked'\n    }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.label.filter.disabled' | translate }}</span>\n  </button>\n</mat-menu>\n", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);--mat-table-header-headline-font: var(--ymt-font-headline-small-font);--mat-table-header-headline-size: var(--ymt-font-headline-small-size);--mat-table-header-headline-weight: var(--ymt-font-headline-small-weight);display:flex;flex-flow:column;height:100%;overflow:hidden}:host .usrmgmt-main__content{flex:1;min-height:0;display:flex;flex-flow:row;overflow:hidden;gap:var(--ymt-spacing-s);padding:var(--ymt-spacing-m)}:host .content-split{flex:1;min-width:0}:host ymt-pane-footer{--footer-block-padding: 0;--footer-inline-padding: 0}:host .paginator{flex:1;background:transparent}:host .pane-subtitle{display:inline-flex;align-items:baseline;gap:var(--ymt-spacing-2xs);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .user-filter-trigger.active{color:var(--ymt-primary)}:host .user-table{overflow:auto;height:100%}:host .user-row{height:3.75rem}:host .user-row:hover:not(.selected-row){background-color:var(--ymt-hover-background)}:host .user-row.user-row--inactive .user-username,:host .user-row.user-row--inactive .user-name,:host .user-row.user-row--inactive .user-email{opacity:.6}:host .mat-column-avatar{flex:0 0 var(--ymt-sizing-6xl)}:host .mat-column-user{flex:1.75 1 0;min-width:0}:host .mat-column-email{flex:1.25 1 0;min-width:0}:host .mat-column-actions{flex:0 0 4.5rem;justify-content:flex-end;padding-right:var(--ymt-sizing-xs)}:host .user-actions{display:flex}:host .user-identity{display:flex;flex-direction:column;gap:var(--ymt-spacing-3xs);line-height:1.25;min-width:0}:host .user-identity .user-name-row,:host .user-identity .user-username-row{display:flex;align-items:center;gap:.375rem;min-width:0}:host .user-identity .user-name{font:var(--ymt-font-title-smallest);color:var(--ymt-text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host .user-identity .user-username{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .user-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .user-row.selected-row{background-color:var(--ymt-selection-background)}:host .user-table:focus-within .user-row.selected-row{background-color:var(--ymt-primary-container)}:host .user-table:focus-within .user-row.selected-row .user-name,:host .user-table:focus-within .user-row.selected-row .user-username,:host .user-table:focus-within .user-row.selected-row .user-email{color:var(--ymt-on-primary-container)}:host .user-table:focus-within .user-row.selected-row .user-actions button{--mat-icon-button-icon-color: var(--ymt-on-primary-container)}:host .empty-group-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ymt-spacing-m);width:100%;padding:var(--ymt-spacing-4xl) var(--ymt-spacing-l)}:host .empty-group-state-icon{width:var(--ymt-sizing-5xl);height:var(--ymt-sizing-5xl);border-radius:var(--ymt-corner-full);background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container);display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .empty-group-state-title{font:var(--ymt-font-headline-small);color:var(--ymt-text-color);margin:0}:host .empty-group-state-description{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);max-width:32ch;margin:0}.usrmgmt-header-actions{display:flex;align-items:center;width:100%}.usrmgmt-header-actions .usrmgmt-settings-button{margin-inline-start:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$2.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i3$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i5.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: ["user", "groupRoles", "topBarActions"], outputs: ["editUser"] }, { kind: "component", type: GroupsComponent, selector: "ymusrmgmt-groups", inputs: ["selectedGroupId", "topBarActions"], outputs: ["groupSelected", "groupUpdated", "groupDeleted", "addMembersRequested"] }, { kind: "component", type: PaneToggleButtonComponent, selector: "ymusrmgmt-pane-toggle-button", inputs: ["icon", "tooltip", "rotated"], outputs: ["toggled"] }, { kind: "component", type: PaneGutterComponent, selector: "ymusrmgmt-pane-gutter", inputs: ["icon", "label", "tooltip", "flipLabel"], outputs: ["expand"] }, { kind: "component", type: UserAvatarComponent, selector: "ymusrmgmt-user-avatar", inputs: ["user", "showBadges"] }, { kind: "component", type: GlobalAddButtonComponent, selector: "ymusrmgmt-global-add-button", outputs: ["createUser", "createGroup"] }, { kind: "directive", type: FocusableRowDirective, selector: "[ymusrmgmt-focusable-row]" }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }, { kind: "ngmodule", type: YmtPanesModule }, { kind: "component", type: i7.YmtPaneComponent, selector: "ymt-pane", inputs: ["topBarActions", "busy", "noAnimation", "plain"] }, { kind: "component", type: i7.YmtPaneHeaderComponent, selector: "ymt-pane-header", inputs: ["title", "icon", "subtitle", "actions", "badges"] }, { kind: "component", type: i7.YmtPaneBodyComponent, selector: "ymt-pane-body" }, { kind: "component", type: i7.YmtPaneFooterComponent, selector: "ymt-pane-footer" }, { kind: "ngmodule", type: YuvClientShellModule }, { kind: "directive", type: i8$1.YuvAppHeaderSlotDirective, selector: "ng-template[yuvAppHeaderSlot]", inputs: ["yuvAppHeaderSlot"] }, { kind: "ngmodule", type: YuvSplitViewModule }, { kind: "directive", type: i9.SplitAreaDirective, selector: "[yuvSplitArea]", inputs: ["size", "minSize", "maxSize", "panelClass", "visible", "lockSize"] }, { kind: "component", type: i9.SplitViewComponent, selector: "yuv-split-view", inputs: ["direction", "gutterSize", "restrictMove", "disabled", "layoutSettingsID"], outputs: ["layoutSettingsChange", "dragStart", "dragEnd", "gutterClick", "gutterDblClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: YuvGroupsPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: YuvUserManagementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ymusrmgmt-groups', standalone: true, imports: [
-                        CommonModule,
+            args: [{ selector: 'ymusrmgmt-root', imports: [
                         MatButtonModule,
                         MatIconModule,
-                        MatTooltipModule,
-                        MatTableModule,
+                        MatMenuModule,
                         MatPaginatorModule,
-                        MatSortModule,
-                        RouterModule,
+                        MatTableModule,
+                        MatTooltipModule,
                         TranslatePipe,
+                        SimpleSearchComponent,
                         BusyOverlayDirective,
                         ClickDoubleDirective,
-                        GroupDetailsComponent,
-                        YmtIconButtonDirective,
-                        YmtLayoutModule,
+                        UserDetailsComponent,
+                        GroupsComponent,
+                        PaneToggleButtonComponent,
+                        PaneGutterComponent,
+                        UserAvatarComponent,
+                        GlobalAddButtonComponent,
+                        FocusableRowDirective,
+                        YmtButtonDirective,
                         YmtPanesModule,
                         YuvClientShellModule,
-                        YuvOverflowMenuModule,
-                    ], host: {
-                        '[class.busy]': '!busy()',
-                    }, template: "<ng-template yuvAppHeaderSlot=\"search\">\n</ng-template>\n\n<ymt-master-details-layout [yuvBusyOverlay]=\"busy()\"\n  [gutterSize]=\"16\"\n  [options]=\"layoutOptions\"\n  [layoutSettingsID]=\"layoutSettingsID\">\n  <ng-template ymtLayoutPane role=\"master\" [topBarActions]=\"masterPaneActions\">\n    <ng-container *ngTemplateOutlet=\"masterPaneContent\"></ng-container>\n  </ng-template>\n  <ng-template ymtLayoutPane role=\"details\">\n    <ng-container *ngTemplateOutlet=\"detailsPaneContent\"></ng-container>\n  </ng-template>\n</ymt-master-details-layout>\n\n<ng-template #masterPaneActions>\n  <!--h2>{{('yuv.app.user-management.groups.title' | translate)}}</h2-->\n  <mat-paginator class=\"paginator\" [length]=\"pagination.total\" [pageIndex]=\"pagination.page\" [pageSize]=\"getPageSize()\" [attr.aria-label]=\"'yuv.app.user-management.groups.navigation.pagination.aria' | translate\" (page)=\"onChangePage($event)\" hidePageSize></mat-paginator>\n  <button ymt-icon-button (click)=\"refresh()\" [matTooltip]=\"'yuv.app.user-management.groups.navigation.refresh.tooltip' | translate\" [attr.aria-label]=\"'yuv.app.user-management.groups.navigation.refresh.tooltip' | translate\"><mat-icon>{{icons.refresh}}</mat-icon></button>\n</ng-template>\n\n<ng-template #listActions>\n  <yuv-overflow-menu [menuItems]=\"actions\"></yuv-overflow-menu>\n</ng-template>\n\n<ng-template #masterPaneContent>\n  <ymt-pane-body>\n    <mat-table [dataSource]=\"dataSource()\" class=\"group-table mat-elevation-z8\" row>\n      <ng-container matColumnDef=\"state\">\n        <mat-header-cell *matHeaderCellDef />\n        <mat-cell *matCellDef=\"let element\"><mat-icon>{{ element.enabled ? icons.stateActive : icons.stateInactive\n            }}</mat-icon></mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"name\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.name' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.name}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"description\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.description' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.description}} </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"id\">\n        <mat-header-cell *matHeaderCellDef>{{'yuv.app.user-management.groups.object.property.id' | translate\n          }}</mat-header-cell>\n        <mat-cell *matCellDef=\"let element\"> {{element.id}} </mat-cell>\n      </ng-container>\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row\n        *matRowDef=\"let row; columns: displayedColumns;\"\n        (click.single)=\"select(row)\"\n        [attr.tabindex]=\"0\"\n        (keydown.enter)=\"select(row)\"\n        (keydown.space)=\"$event.preventDefault(); select(row)\"\n        [class.selected-row]=\"this.isSelected(row)\" class=\"group-row\">\n      </mat-row>\n    </mat-table>\n  </ymt-pane-body>\n</ng-template>\n\n<ng-template #detailsPaneContent>\n  <ymt-pane-header [icon]=\"'group'\" [title]=\"'yuv.app.user-management.groups.details.title' | translate\" [subtitle]=\"selection().selected.at(0)?.id || ('yuv.app.user-management.groups.details.empty' | translate)\" [actions]=\"listActions\"></ymt-pane-header>\n  <ymt-pane-body>\n    <ymusrmgmt-group-details #groupDetails [groupId]=\"selection().selected.at(0)?.id\" />\n  </ymt-pane-body>\n</ng-template>", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);height:100%;overflow:hidden;display:flex;flex-flow:column}:host ymt-master-details-layout{height:100%;padding:1rem}:host .paginator{flex:1;background:transparent}:host .group-table{overflow:auto;height:100%}:host .group-row:hover{background-color:var(--ymt-hover-background)}:host .selected-row{background-color:var(--ymt-selection-background)!important}\n"] }]
-        }], propDecorators: { groupDetailsComponent: [{
+                        YuvSplitViewModule,
+                    ], providers: [
+                        {
+                            provide: MatPaginatorIntl,
+                            useClass: UserListPaginatorIntl,
+                        },
+                    ], template: "<ng-template yuvAppHeaderSlot=\"actions\">\n  <div class=\"usrmgmt-header-actions\">\n    <ymusrmgmt-global-add-button (createUser)=\"createNewUser()\" (createGroup)=\"createNewGroup()\" />\n    <button\n      mat-icon-button\n      class=\"usrmgmt-settings-button\"\n      [matTooltip]=\"'yuv.app.user-management.navigation.action.settings.tooltip' | translate\"\n      [attr.aria-label]=\"'yuv.app.user-management.navigation.action.settings.label' | translate\"\n      (click)=\"openSettings()\"\n    >\n      <mat-icon>{{ icons.actionSettings }}</mat-icon>\n    </button>\n  </div>\n</ng-template>\n\n<ng-template yuvAppHeaderSlot=\"search\">\n  <!-- querySubmit (Enter / the search button), not queryChange - queryChange fires debounced on\n       every keystroke, which used to refresh the list while still typing. clearInput (the X\n       button) still needs its own binding since it doesn't also emit querySubmit. -->\n  <yuv-simple-search\n    [query]=\"searchBoxQuery()\"\n    (querySubmit)=\"onQueryChange($event)\"\n    (clearInput)=\"onQueryChange({ term: '' })\"\n  ></yuv-simple-search>\n</ng-template>\n\n<main\n  class=\"usrmgmt-main__content\"\n  [attr.aria-label]=\"'yuv.app.user-management.content.label.aria' | translate\"\n>\n  @if (!split.isAreaVisible(Area.GROUPS)) {\n  <ymusrmgmt-pane-gutter\n    icon=\"left_panel_open\"\n    [flipLabel]=\"true\"\n    [label]=\"'yuv.app.user-management.label.rail.title' | translate\"\n    [tooltip]=\"'yuv.app.user-management.label.pane.showGroups.tooltip' | translate\"\n    (expand)=\"split.showArea(Area.GROUPS)\"\n  />\n  }\n\n  <yuv-split-view #split [layoutSettingsID]=\"layoutSettingsID\" class=\"content-split\">\n    <ng-template yuvSplitArea [size]=\"20\">\n      <ng-template #groupPaneTopBarActions>\n        <ymusrmgmt-pane-toggle-button\n          icon=\"left_panel_close\"\n          [tooltip]=\"'yuv.app.user-management.label.pane.hideGroups.tooltip' | translate\"\n          (toggled)=\"split.hideArea(Area.GROUPS)\"\n        />\n      </ng-template>\n\n      <ymusrmgmt-groups\n        [selectedGroupId]=\"selectedGroupId()\"\n        [topBarActions]=\"groupPaneTopBarActions\"\n        (groupSelected)=\"onGroupSelected($event)\"\n        (groupUpdated)=\"onGroupUpdated($event)\"\n        (groupDeleted)=\"onGroupDeleted($event)\"\n        (addMembersRequested)=\"openAddGroupMembersDialog($event)\"\n      >\n      </ymusrmgmt-groups>\n    </ng-template>\n\n    <ng-template yuvSplitArea [size]=\"60\">\n      <!-- `groupId` is the scope itself, known the moment a group is picked; `group` is that\n           group's record, which arrives a beat later (see `selectedGroupDetails`). Anything\n           structural keys off `groupId`, anything showing the group's own content off `group`. -->\n      @let groupId = selectedGroupId(); @let group = selectedGroupDetails(); @let enabled =\n      enabledFilter();\n      <!-- The list pane's own title, shared by its `aria-label` and its visible header. -->\n      @let listTitle = (groupId ? 'yuv.app.user-management.label.list.groupMembersTitle' :\n      'yuv.app.user-management.label.list.title' ) | translate;\n      <ng-template #userListTopBarActions>\n        @let groupsVisible = split.isAreaVisible(Area.GROUPS);\n        <ymusrmgmt-pane-toggle-button\n          align=\"start\"\n          icon=\"left_panel_close\"\n          [rotated]=\"!groupsVisible\"\n          [tooltip]=\"\n            (groupsVisible\n              ? 'yuv.app.user-management.label.pane.hideGroups.tooltip'\n              : 'yuv.app.user-management.label.pane.showGroups.tooltip'\n            ) | translate\n          \"\n          (toggled)=\"split.toggleArea(Area.GROUPS)\"\n        />\n        @let detailsVisible = split.isAreaVisible(Area.DETAILS);\n        <ymusrmgmt-pane-toggle-button\n          icon=\"right_panel_close\"\n          [rotated]=\"!detailsVisible\"\n          [tooltip]=\"\n            (detailsVisible\n              ? 'yuv.app.user-management.label.pane.hideUserDetails.tooltip'\n              : 'yuv.app.user-management.label.pane.showUserDetails.tooltip'\n            ) | translate\n          \"\n          (toggled)=\"split.toggleArea(Area.DETAILS)\"\n        />\n      </ng-template>\n\n      <!-- Enabled/disabled filtering isn't supported for group members - only offered while viewing \"All users\". -->\n      <ng-template #userFilterActions>\n        @if (!groupId) {\n        <button\n          mat-icon-button\n          class=\"user-filter-trigger\"\n          [class.active]=\"enabled !== undefined\"\n          [matMenuTriggerFor]=\"userFilterMenu\"\n          [matTooltip]=\"'yuv.app.user-management.label.filter.tooltip' | translate\"\n          [attr.aria-label]=\"'yuv.app.user-management.label.filter.tooltip' | translate\"\n        >\n          <mat-icon>filter_list</mat-icon>\n        </button>\n        } @else if (group) {\n        <button\n          mat-icon-button\n          (click)=\"openAddGroupMembersDialog(group)\"\n          [matTooltip]=\"'yuv.app.user-management.groups.action.addMembers.label' | translate\"\n          [attr.aria-label]=\"'yuv.app.user-management.groups.action.addMembers.label' | translate\"\n        >\n          <mat-icon>{{ icons.actionAddGroupMembers }}</mat-icon>\n        </button>\n        }\n      </ng-template>\n\n      <ymt-pane\n        [busy]=\"busy()\"\n        [yuvBusyOverlay]=\"busy()\"\n        [topBarActions]=\"userListTopBarActions\"\n        role=\"region\"\n        [attr.aria-label]=\"listTitle\"\n      >\n        <ymt-pane-header\n          [icon]=\"groupId ? 'group' : 'family_group'\"\n          [title]=\"listTitle\"\n          [actions]=\"userFilterActions\"\n        >\n          <ng-template #yuvPaneHeaderSubtitle>\n            <span class=\"pane-subtitle\">\n              <span>\n                @if (groupId) {\n                {{ group?.name }}\n                } @else if (enabled === true) {\n                {{ 'yuv.app.user-management.label.filter.enabled' | translate }}\n                } @else if (enabled === false) {\n                {{ 'yuv.app.user-management.label.filter.disabled' | translate }}\n                } @else {\n                {{ 'yuv.app.user-management.label.rail.allUsers' | translate }}\n                }\n              </span>\n              @if (searchTerm(); as term) {\n              <span class=\"search-hint\">{{\n                'yuv.app.user-management.label.search.filtered' | translate : { term }\n              }}</span>\n              }\n            </span>\n          </ng-template>\n        </ymt-pane-header>\n        <ymt-pane-body>\n          <mat-table\n            [dataSource]=\"dataSource()\"\n            class=\"user-table mat-elevation-z8\"\n            row\n            (keydown)=\"onTableKeydown($event)\"\n          >\n            <ng-container matColumnDef=\"avatar\">\n              <mat-header-cell *matHeaderCellDef />\n              <mat-cell *matCellDef=\"let element\">\n                <ymusrmgmt-user-avatar [user]=\"element\" />\n              </mat-cell>\n            </ng-container>\n            <ng-container matColumnDef=\"user\">\n              <mat-header-cell *matHeaderCellDef>{{\n                'yuv.app.user-management.users.property.user' | translate\n              }}</mat-header-cell>\n              <mat-cell *matCellDef=\"let element\">\n                <div class=\"user-identity\">\n                  <span class=\"user-username-row\">\n                    <span class=\"user-username\">{{ element.username }}</span>\n                  </span>\n                  <span class=\"user-name-row\">\n                    <span class=\"user-name\">{{ element.firstName }} {{ element.lastName }}</span>\n                  </span>\n                </div>\n              </mat-cell>\n            </ng-container>\n            <ng-container matColumnDef=\"email\">\n              <mat-header-cell *matHeaderCellDef>{{\n                'yuv.app.user-management.users.property.email' | translate\n              }}</mat-header-cell>\n              <mat-cell *matCellDef=\"let element\" class=\"user-email\">\n                {{ element.email }}\n              </mat-cell>\n            </ng-container>\n            <ng-container matColumnDef=\"actions\">\n              <mat-header-cell *matHeaderCellDef />\n              <mat-cell\n                *matCellDef=\"let element; let i = index\"\n                class=\"user-actions\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                <button\n                  mat-icon-button\n                  [matMenuTriggerFor]=\"rowMenu\"\n                  [matMenuTriggerData]=\"{ user: element }\"\n                  [matTooltip]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n                  [attr.aria-label]=\"'yuv.app.user-management.common.action.more.label' | translate\"\n                  [tabIndex]=\"activeRowIndex() === i ? 0 : -1\"\n                  (click)=\"select(element)\"\n                >\n                  <mat-icon>more_vert</mat-icon>\n                </button>\n              </mat-cell>\n            </ng-container>\n            <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n            <mat-row\n              ymusrmgmt-focusable-row\n              *matRowDef=\"let row; columns: displayedColumns; let i = index\"\n              (click.single)=\"select(row); focusRow(i)\"\n              [attr.tabindex]=\"activeRowIndex() === i ? 0 : -1\"\n              (keydown.enter)=\"select(row)\"\n              (keydown.space)=\"$event.preventDefault(); select(row)\"\n              [class.selected-row]=\"activeRowIndex() === i\"\n              [class.user-row--inactive]=\"!row.enabled\"\n              class=\"user-row\"\n            >\n            </mat-row>\n            <ng-template matNoDataRow>\n              @if (!busy() && selectedGroupDetails(); as group) {\n              <div class=\"empty-group-state\">\n                <span class=\"empty-group-state-icon\"\n                  ><mat-icon aria-hidden=\"true\">group_off</mat-icon></span\n                >\n                <h3 class=\"empty-group-state-title\">\n                  {{ 'yuv.app.user-management.label.emptyGroup.title' | translate }}\n                </h3>\n                <p class=\"empty-group-state-description\">\n                  {{\n                    'yuv.app.user-management.label.emptyGroup.description'\n                      | translate : { name: group.name }\n                  }}\n                </p>\n                <button ymtButton=\"primary\" (click)=\"openAddGroupMembersDialog(group)\">\n                  <mat-icon>{{ icons.actionAddGroupMembers }}</mat-icon>\n                  {{ 'yuv.app.user-management.groups.action.addMembers.label' | translate }}\n                </button>\n              </div>\n              }\n            </ng-template>\n          </mat-table>\n        </ymt-pane-body>\n        <ymt-pane-footer>\n          <mat-paginator\n            class=\"paginator\"\n            [length]=\"pagination.total\"\n            [pageIndex]=\"pagination.page\"\n            [pageSize]=\"pageSize()\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            [attr.aria-label]=\"\n              'yuv.app.user-management.users.label.navigation.pagination.aria' | translate\n            \"\n            (page)=\"onChangePage($event)\"\n          ></mat-paginator>\n        </ymt-pane-footer>\n      </ymt-pane>\n    </ng-template>\n\n    <ng-template yuvSplitArea [size]=\"20\">\n      <ng-template #userDetailsPaneTopBarActions>\n        <ymusrmgmt-pane-toggle-button\n          align=\"start\"\n          icon=\"right_panel_close\"\n          [tooltip]=\"'yuv.app.user-management.label.pane.hideUserDetails.tooltip' | translate\"\n          (toggled)=\"split.hideArea(Area.DETAILS)\"\n        />\n      </ng-template>\n\n      <ymusrmgmt-user-details\n        [user]=\"selectedUser()\"\n        [groupRoles]=\"selectedGroupRoles()\"\n        [topBarActions]=\"userDetailsPaneTopBarActions\"\n        (editUser)=\"editUser($event)\"\n      />\n    </ng-template>\n  </yuv-split-view>\n\n  @if (!split.isAreaVisible(Area.DETAILS)) {\n  <ymusrmgmt-pane-gutter\n    icon=\"right_panel_open\"\n    [label]=\"'yuv.app.user-management.users.label.details.title' | translate\"\n    [tooltip]=\"'yuv.app.user-management.label.pane.showUserDetails.tooltip' | translate\"\n    (expand)=\"split.showArea(Area.DETAILS)\"\n  />\n  }\n</main>\n\n<mat-menu #rowMenu=\"matMenu\">\n  <ng-template matMenuContent let-user=\"user\">\n    @for (action of rowActionsFor(user); track action.id) {\n    <button mat-menu-item [disabled]=\"action.disabled\" (click)=\"action.callback?.(action)\">\n      <mat-icon>{{ action.icon }}</mat-icon>\n      <span>{{ action.label }}</span>\n    </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<mat-menu #userFilterMenu=\"matMenu\">\n  <button mat-menu-item (click)=\"onEnabledFilterSelected(undefined)\">\n    <mat-icon>{{\n      enabledFilter() === undefined ? 'radio_button_checked' : 'radio_button_unchecked'\n    }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.label.rail.allUsers' | translate }}</span>\n  </button>\n  <button mat-menu-item (click)=\"onEnabledFilterSelected(true)\">\n    <mat-icon>{{\n      enabledFilter() === true ? 'radio_button_checked' : 'radio_button_unchecked'\n    }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.label.filter.enabled' | translate }}</span>\n  </button>\n  <button mat-menu-item (click)=\"onEnabledFilterSelected(false)\">\n    <mat-icon>{{\n      enabledFilter() === false ? 'radio_button_checked' : 'radio_button_unchecked'\n    }}</mat-icon>\n    <span>{{ 'yuv.app.user-management.label.filter.disabled' | translate }}</span>\n  </button>\n</mat-menu>\n", styles: [":host{--mat-table-row-item-outline-color: var(--ymt-outline-variant);--mat-table-header-headline-font: var(--ymt-font-headline-small-font);--mat-table-header-headline-size: var(--ymt-font-headline-small-size);--mat-table-header-headline-weight: var(--ymt-font-headline-small-weight);display:flex;flex-flow:column;height:100%;overflow:hidden}:host .usrmgmt-main__content{flex:1;min-height:0;display:flex;flex-flow:row;overflow:hidden;gap:var(--ymt-spacing-s);padding:var(--ymt-spacing-m)}:host .content-split{flex:1;min-width:0}:host ymt-pane-footer{--footer-block-padding: 0;--footer-inline-padding: 0}:host .paginator{flex:1;background:transparent}:host .pane-subtitle{display:inline-flex;align-items:baseline;gap:var(--ymt-spacing-2xs);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .user-filter-trigger.active{color:var(--ymt-primary)}:host .user-table{overflow:auto;height:100%}:host .user-row{height:3.75rem}:host .user-row:hover:not(.selected-row){background-color:var(--ymt-hover-background)}:host .user-row.user-row--inactive .user-username,:host .user-row.user-row--inactive .user-name,:host .user-row.user-row--inactive .user-email{opacity:.6}:host .mat-column-avatar{flex:0 0 var(--ymt-sizing-6xl)}:host .mat-column-user{flex:1.75 1 0;min-width:0}:host .mat-column-email{flex:1.25 1 0;min-width:0}:host .mat-column-actions{flex:0 0 4.5rem;justify-content:flex-end;padding-right:var(--ymt-sizing-xs)}:host .user-actions{display:flex}:host .user-identity{display:flex;flex-direction:column;gap:var(--ymt-spacing-3xs);line-height:1.25;min-width:0}:host .user-identity .user-name-row,:host .user-identity .user-username-row{display:flex;align-items:center;gap:.375rem;min-width:0}:host .user-identity .user-name{font:var(--ymt-font-title-smallest);color:var(--ymt-text-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host .user-identity .user-username{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .user-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .user-row.selected-row{background-color:var(--ymt-selection-background)}:host .user-table:focus-within .user-row.selected-row{background-color:var(--ymt-primary-container)}:host .user-table:focus-within .user-row.selected-row .user-name,:host .user-table:focus-within .user-row.selected-row .user-username,:host .user-table:focus-within .user-row.selected-row .user-email{color:var(--ymt-on-primary-container)}:host .user-table:focus-within .user-row.selected-row .user-actions button{--mat-icon-button-icon-color: var(--ymt-on-primary-container)}:host .empty-group-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--ymt-spacing-m);width:100%;padding:var(--ymt-spacing-4xl) var(--ymt-spacing-l)}:host .empty-group-state-icon{width:var(--ymt-sizing-5xl);height:var(--ymt-sizing-5xl);border-radius:var(--ymt-corner-full);background-color:var(--ymt-primary-container);color:var(--ymt-on-primary-container);display:flex;align-items:center;justify-content:center;flex-shrink:0}:host .empty-group-state-title{font:var(--ymt-font-headline-small);color:var(--ymt-text-color);margin:0}:host .empty-group-state-description{font:var(--ymt-font-body-subtle);color:var(--ymt-text-color-subtle);max-width:32ch;margin:0}.usrmgmt-header-actions{display:flex;align-items:center;width:100%}.usrmgmt-header-actions .usrmgmt-settings-button{margin-inline-start:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { userDetailsComponent: [{
                 type: ViewChild,
-                args: [GroupDetailsComponent]
-            }], pagination: [{
-                type: HostBinding,
-                args: ['class.pagination']
-            }] } });
+                args: [UserDetailsComponent]
+            }], groupsComponent: [{
+                type: ViewChild,
+                args: [GroupsComponent]
+            }], rowItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => FocusableRowDirective), { isSignal: true }] }] } });
 
 const YuvUserManagementRoutes = [
-    {
-        path: '',
-        component: YuvUserManagementComponent,
-        children: [
-            { path: 'users', component: YuvUsersPageComponent },
-            { path: 'groups', component: YuvGroupsPageComponent },
-            { path: '', redirectTo: 'users', pathMatch: 'full' }
-        ]
-    }
+    // The single directory view for both users and groups, bound directly at the app's own base
+    // path - which group (if any) is currently scoping the list is a `?group=<id>` query param
+    // rather than a path segment, so switching between "All users" and any group (or between two
+    // different groups) never destroys/recreates this component: Angular only remounts across
+    // genuinely different route configs, and query param changes alone never do that (see
+    // YuvUserManagementComponent.ngOnInit). A `?search=<term>` query param is kept in sync with the
+    // search box the same way, both read and written (see
+    // YuvUserManagementComponent#syncRouteToSearch/#applySearchFromRoute).
+    { path: '', component: YuvUserManagementComponent },
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { YuvUserManagementRoutes, YuvUserManagementService };
+export { YuvUserManagementRoutes, YuvUserManagementService, resolveErrorMessageKey };
 //# sourceMappingURL=yuuvis-user-management-app.mjs.map