@masterteam/delegations 0.1.0 → 0.2.0

package/fesm2022/masterteam-delegations.mjs

@@ -1,4 +1,4 @@
-import * as i1 from '@angular/common';
+import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, computed, Component, inject, Injectable, ChangeDetectionStrategy, viewChild, model, signal, effect, untracked, linkedSignal } from '@angular/core';
@@ -13,137 +13,104 @@ import { Chip } from '@masterteam/components/chip';
 import { Actions, Store, ofActionSuccessful, ofActionDispatched, Action, Selector, State, select } from '@ngxs/store';
 import { HttpClient, HttpParams, HttpContext } from '@angular/common/http';
 import { handleApiRequest, REQUEST_CONTEXT, UserSearchFieldConfig, TextareaFieldConfig, DateFieldConfig, RadioButtonFieldConfig, MultiSelectFieldConfig, ToggleFieldConfig, ValidatorConfig } from '@masterteam/components';
-import { EMPTY, catchError, switchMap, finalize } from 'rxjs';
+import { EMPTY, switchMap, finalize } from 'rxjs';
 import { ModalRef } from '@masterteam/components/dialog';
 import { Page } from '@masterteam/components/page';
 import { Breadcrumb } from '@masterteam/components/breadcrumb';
 import { Table } from '@masterteam/components/table';
-import * as i1$2 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
-import * as i1$1 from 'primeng/skeleton';
+import * as i1 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 import * as i2 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 
 const STATUS_VISUAL = {
     Active: {
-        i18nKey: 'delegations.active',
+        i18nKey: 'delegations.status.active',
         styleClass: 'mt-status-chip mt-status-chip--active',
     },
     Scheduled: {
-        i18nKey: 'delegations.scheduled',
+        i18nKey: 'delegations.status.scheduled',
         styleClass: 'mt-status-chip mt-status-chip--scheduled',
     },
     PendingApproval: {
-        i18nKey: 'delegations.pending-approval',
+        i18nKey: 'delegations.status.pendingApproval',
         styleClass: 'mt-status-chip mt-status-chip--pending',
     },
+    InactiveToday: {
+        i18nKey: 'delegations.status.inactiveToday',
+        styleClass: 'mt-status-chip mt-status-chip--scheduled',
+    },
     Expired: {
-        i18nKey: 'delegations.expired',
+        i18nKey: 'delegations.status.expired',
         styleClass: 'mt-status-chip mt-status-chip--expired',
     },
     Rejected: {
-        i18nKey: 'delegations.rejected',
+        i18nKey: 'delegations.status.rejected',
         styleClass: 'mt-status-chip mt-status-chip--rejected',
     },
     Cancelled: {
-        i18nKey: 'delegations.cancelled',
+        i18nKey: 'delegations.status.cancelled',
         styleClass: 'mt-status-chip mt-status-chip--cancelled',
     },
 };
 class DelegationStatusChip {
     status = input.required(...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-    visual = computed(() => STATUS_VISUAL[this.status()], ...(ngDevMode ? [{ debugName: "visual" }] : /* istanbul ignore next */ []));
+    visual = computed(() => STATUS_VISUAL[this.status()] ?? STATUS_VISUAL.Scheduled, ...(ngDevMode ? [{ debugName: "visual" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationStatusChip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: DelegationStatusChip, isStandalone: true, selector: "mt-delegation-status-chip", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <ng-container *transloco="let t">
-      @let v = visual();
-      <mt-chip [label]="t(v.i18nKey)" [styleClass]="v.styleClass"></mt-chip>
-    </ng-container>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: DelegationStatusChip, isStandalone: true, selector: "mt-delegation-status-chip", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <ng-container *transloco="let t">
+      @let v = visual();
+      <mt-chip [label]="t(v.i18nKey)" [styleClass]="v.styleClass"></mt-chip>
+    </ng-container>
   `, isInline: true, styles: [":host{display:inline-flex}:host ::ng-deep .mt-status-chip{font-weight:500;font-size:.75rem;border-radius:9999px;padding-inline:.625rem;padding-block:.125rem}:host ::ng-deep .mt-status-chip--active{background-color:#dcfce7;color:#166534}:host ::ng-deep .mt-status-chip--scheduled{background-color:#dbeafe;color:#1e40af}:host ::ng-deep .mt-status-chip--pending{background-color:#fef9c3;color:#854d0e}:host ::ng-deep .mt-status-chip--expired{background-color:#f3f4f6;color:#4b5563}:host ::ng-deep .mt-status-chip--rejected{background-color:#fee2e2;color:#991b1b}:host ::ng-deep .mt-status-chip--cancelled{background-color:#e5e7eb;color:#374151}:host-context(.dark) ::ng-deep .mt-status-chip--active{background-color:#22c55e33;color:#86efac}:host-context(.dark) ::ng-deep .mt-status-chip--scheduled{background-color:#3b82f633;color:#93c5fd}:host-context(.dark) ::ng-deep .mt-status-chip--pending{background-color:#eab30833;color:#fde047}:host-context(.dark) ::ng-deep .mt-status-chip--expired{background-color:#94a3b833;color:#cbd5e1}:host-context(.dark) ::ng-deep .mt-status-chip--rejected{background-color:#ef444433;color:#fca5a5}:host-context(.dark) ::ng-deep .mt-status-chip--cancelled{background-color:#94a3b826;color:#cbd5e1}\n"], dependencies: [{ kind: "component", type: Chip, selector: "mt-chip", inputs: ["label", "icon", "image", "removable", "removeIcon", "styleClass"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationStatusChip, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-delegation-status-chip', standalone: true, imports: [Chip, TranslocoDirective], template: `
-    <ng-container *transloco="let t">
-      @let v = visual();
-      <mt-chip [label]="t(v.i18nKey)" [styleClass]="v.styleClass"></mt-chip>
-    </ng-container>
+            args: [{ selector: 'mt-delegation-status-chip', standalone: true, imports: [Chip, TranslocoDirective], template: `
+    <ng-container *transloco="let t">
+      @let v = visual();
+      <mt-chip [label]="t(v.i18nKey)" [styleClass]="v.styleClass"></mt-chip>
+    </ng-container>
   `, styles: [":host{display:inline-flex}:host ::ng-deep .mt-status-chip{font-weight:500;font-size:.75rem;border-radius:9999px;padding-inline:.625rem;padding-block:.125rem}:host ::ng-deep .mt-status-chip--active{background-color:#dcfce7;color:#166534}:host ::ng-deep .mt-status-chip--scheduled{background-color:#dbeafe;color:#1e40af}:host ::ng-deep .mt-status-chip--pending{background-color:#fef9c3;color:#854d0e}:host ::ng-deep .mt-status-chip--expired{background-color:#f3f4f6;color:#4b5563}:host ::ng-deep .mt-status-chip--rejected{background-color:#fee2e2;color:#991b1b}:host ::ng-deep .mt-status-chip--cancelled{background-color:#e5e7eb;color:#374151}:host-context(.dark) ::ng-deep .mt-status-chip--active{background-color:#22c55e33;color:#86efac}:host-context(.dark) ::ng-deep .mt-status-chip--scheduled{background-color:#3b82f633;color:#93c5fd}:host-context(.dark) ::ng-deep .mt-status-chip--pending{background-color:#eab30833;color:#fde047}:host-context(.dark) ::ng-deep .mt-status-chip--expired{background-color:#94a3b833;color:#cbd5e1}:host-context(.dark) ::ng-deep .mt-status-chip--rejected{background-color:#ef444433;color:#fca5a5}:host-context(.dark) ::ng-deep .mt-status-chip--cancelled{background-color:#94a3b826;color:#cbd5e1}\n"] }]
         }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }] } });
 
-/** Reads sessionStorage + login candidates, restores any tab-local active session. */
-class BootstrapDelegationSession {
-    static type = '[DelegationSession] Bootstrap';
+/** Fetch the active delegations the current user may start (user/activedelegations). */
+class LoadDelegationCandidates {
+    static type = '[DelegationSession] Load Candidates';
 }
-/** Replaces the candidate pool (called after LoginSuccess or when user.delegations changes). */
-class SetDelegationCandidates {
-    candidates;
-    static type = '[DelegationSession] Set Candidates';
-    constructor(candidates) {
-        this.candidates = candidates;
-    }
-}
-/** Start a delegated session for the given assignment. */
+/** Start a delegated session for the given assignment row. */
 class StartDelegationSession {
-    delegationId;
+    delegation;
     static type = '[DelegationSession] Start';
-    constructor(delegationId) {
-        this.delegationId = delegationId;
+    constructor(delegation) {
+        this.delegation = delegation;
     }
 }
-/** End the current delegated session (server + local). */
+/** End the current delegated session. Client-local only (doc 05). */
 class EndDelegationSession {
-    options;
+    reason;
     static type = '[DelegationSession] End';
-    constructor(options = {}) {
-        this.options = options;
+    constructor(reason = 'Manual') {
+        this.reason = reason;
     }
 }
-/** Atomically end current + start another. */
+/** Switch directly from the current session to another delegation. */
 class SwitchDelegationSession {
-    delegationId;
+    delegation;
     static type = '[DelegationSession] Switch';
-    constructor(delegationId) {
-        this.delegationId = delegationId;
-    }
-}
-/** Refresh the delegation access token via refresh-token rotation. */
-class RefreshDelegationSession {
-    static type = '[DelegationSession] Refresh';
-}
-/** Verify the current session against the server (used after bootstrap). */
-class VerifyDelegationSession {
-    static type = '[DelegationSession] Verify';
-}
-/** Surface a recoverable session error from any pipeline (e.g. 403 codes). */
-class DelegationSessionInvalidated {
-    reason;
-    static type = '[DelegationSession] Invalidated';
-    constructor(reason) {
-        this.reason = reason;
+    constructor(delegation) {
+        this.delegation = delegation;
     }
 }
 
-const DELEGATION_SESSION_STORAGE_KEY = 'mt.delegation.session.v1';
-function toActiveSession(pair) {
-    return {
-        accessToken: pair.accessToken,
-        accessTokenExpiresAtUtc: pair.accessTokenExpiresAtUtc,
-        refreshToken: pair.refreshToken,
-        refreshTokenExpiresAtUtc: pair.refreshTokenExpiresAtUtc,
-        delegation: pair.delegation,
-    };
-}
 var DelegationSessionActionKey;
 (function (DelegationSessionActionKey) {
-    DelegationSessionActionKey["Bootstrap"] = "bootstrap";
+    DelegationSessionActionKey["LoadCandidates"] = "loadCandidates";
     DelegationSessionActionKey["StartSession"] = "startSession";
-    DelegationSessionActionKey["EndSession"] = "endSession";
-    DelegationSessionActionKey["RefreshSession"] = "refreshSession";
-    DelegationSessionActionKey["GetSession"] = "getSession";
 })(DelegationSessionActionKey || (DelegationSessionActionKey = {}));
 
 var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -153,74 +120,29 @@ var __decorate$1 = (this && this.__decorate) || function (decorators, target, ke
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 const BASE$1 = 'identity/delegations';
-// ---------------------------------------------------------------------------
-// Action shells for loose coupling with gateway-auth (matched by `type` string).
-// ---------------------------------------------------------------------------
+// Action shells matching gateway-auth type strings — loose coupling, matched by
+// `type` only so this package does not depend on @masterteam/gateway-auth.
 class GatewayLoginSuccessShell {
     static type = '[Auth] Login Success';
 }
 class GatewayLogoutShell {
     static type = '[Auth] Logout';
 }
-function readStored() {
-    try {
-        const raw = sessionStorage.getItem(DELEGATION_SESSION_STORAGE_KEY);
-        if (!raw)
-            return null;
-        const parsed = JSON.parse(raw);
-        if (!parsed?.accessToken || !parsed?.accessTokenExpiresAtUtc)
-            return null;
-        if (new Date(parsed.accessTokenExpiresAtUtc).getTime() < Date.now()) {
-            sessionStorage.removeItem(DELEGATION_SESSION_STORAGE_KEY);
-            return null;
-        }
-        return parsed;
-    }
-    catch {
-        return null;
-    }
-}
-function writeStored(value) {
-    try {
-        if (value) {
-            sessionStorage.setItem(DELEGATION_SESSION_STORAGE_KEY, JSON.stringify(value));
-        }
-        else {
-            sessionStorage.removeItem(DELEGATION_SESSION_STORAGE_KEY);
-        }
-    }
-    catch {
-        /* sessionStorage may be unavailable in some embeds; ignore */
-    }
-}
-/**
- * Filters a delegation list to "candidates the user could activate".
- * Active + StartSession in allowedActions is the runtime gate.
- */
-function pickCandidates(delegations) {
-    if (!Array.isArray(delegations))
-        return [];
-    return delegations.filter((d) => d.status === 'Active' && d.allowedActions?.includes('StartSession'));
+function canStart(row) {
+    return (row.effectiveStatus === 'Active' &&
+        row.allowedActions?.includes('StartSession'));
 }
 let DelegationSessionState = class DelegationSessionState {
     http = inject(HttpClient);
     actions$ = inject(Actions);
     store = inject(Store);
     constructor() {
-        // ---- Bridge to gateway-auth lifecycle (loose coupling via Actions stream) ----
-        // We use local action *shells* matching gateway-auth's type strings to avoid
-        // a hard project dependency on @masterteam/gateway-auth. NGXS matches actions
-        // by the static `type` field, so any class with the same type string works.
         this.actions$
             .pipe(ofActionSuccessful(GatewayLoginSuccessShell))
-            .subscribe(() => {
-            this.store.dispatch(new BootstrapDelegationSession());
-        });
+            .subscribe(() => this.store.dispatch(new LoadDelegationCandidates()));
         this.actions$
             .pipe(ofActionDispatched(GatewayLogoutShell))
-            .subscribe(() => {
-            this.store.dispatch(new EndDelegationSession({ silent: true }));
-        });
+            .subscribe(() => this.store.dispatch(new EndDelegationSession('Logout')));
     }
     // ---------------------------------------------------------------------------
     // Selectors
@@ -243,116 +165,44 @@ let DelegationSessionState = class DelegationSessionState {
     // ---------------------------------------------------------------------------
     // Actions
     // ---------------------------------------------------------------------------
-    bootstrap(ctx) {
-        // 1. Hydrate active session from sessionStorage (tab-local).
-        const stored = readStored();
-        ctx.patchState({ active: stored });
-        // 2. Hydrate candidates from gateway-auth user.delegations (loose lookup).
-        const authUser = this.store.snapshot()['auth'];
-        const userDelegations = authUser?.user
-            ?.delegations ?? [];
-        ctx.patchState({ candidates: pickCandidates(userDelegations) });
-        // 3. If we had a stored session, verify it against the server.
-        if (stored) {
-            this.store.dispatch(new VerifyDelegationSession());
-        }
-    }
-    setCandidates(ctx, { candidates }) {
-        ctx.patchState({ candidates });
-    }
-    verify(ctx) {
-        const req$ = this.http.get(`${BASE$1}/session`);
+    loadCandidates(ctx) {
+        const req$ = this.http.get(`${BASE$1}/user/activedelegations`);
         return handleApiRequest({
             ctx,
-            key: DelegationSessionActionKey.GetSession,
+            key: DelegationSessionActionKey.LoadCandidates,
             request$: req$,
-            onSuccess: (response) => {
-                if (!response.data) {
-                    writeStored(null);
-                    return { active: null };
-                }
-                const current = ctx.getState().active;
-                if (current && response.data.id === current.delegation.id) {
-                    // Server confirms the same delegation — keep token, just refresh summary.
-                    const updated = {
-                        ...current,
-                        delegation: response.data,
-                    };
-                    writeStored(updated);
-                    return { active: updated };
-                }
-                // Mismatch — drop local session.
-                writeStored(null);
-                return { active: null };
-            },
+            onSuccess: (response) => ({
+                candidates: (response.data?.items ?? []).filter(canStart),
+            }),
         });
     }
-    start(ctx, { delegationId }) {
-        const req$ = this.http.post(`${BASE$1}/${delegationId}/token`, {});
+    start(ctx, { delegation }) {
+        const req$ = this.http.post(`${BASE$1}/delegationToken/${delegation.delegationId}`, {});
         return handleApiRequest({
             ctx,
             key: DelegationSessionActionKey.StartSession,
             request$: req$,
-            onSuccess: (response) => {
-                const active = toActiveSession(response.data);
-                writeStored(active);
-                return { active };
-            },
+            onSuccess: (response) => ({
+                active: { token: response.data, delegation },
+            }),
         });
     }
-    end(ctx, { options }) {
-        const state = ctx.getState();
-        // Always clear local state immediately.
-        writeStored(null);
+    end(ctx) {
+        // Client-local only — there is no server end-session endpoint (doc 05).
         ctx.patchState({ active: null });
-        if (!state.active || options.silent) {
-            return EMPTY;
-        }
-        // Fire-and-forget the server end call; failures don't roll back local clear.
-        return this.http
-            .post(`${BASE$1}/session/end`, {})
-            .pipe(catchError(() => EMPTY));
+        return EMPTY;
     }
-    switch(ctx, { delegationId }) {
+    switch(ctx, { delegation }) {
         return this.store
-            .dispatch(new EndDelegationSession({ silent: true }))
-            .pipe(switchMap(() => this.store.dispatch(new StartDelegationSession(delegationId))));
-    }
-    refresh(ctx) {
-        const current = ctx.getState().active;
-        if (!current)
-            return EMPTY;
-        const req$ = this.http.post(`${BASE$1}/token/refresh`, { refreshToken: current.refreshToken });
-        return handleApiRequest({
-            ctx,
-            key: DelegationSessionActionKey.RefreshSession,
-            request$: req$,
-            onSuccess: (response) => {
-                const active = toActiveSession(response.data);
-                writeStored(active);
-                return { active };
-            },
-        });
-    }
-    invalidated(ctx) {
-        // Same effect as EndDelegationSession({ silent: true }), but as a distinct
-        // signal so UI can react with a toast or modal.
-        writeStored(null);
-        ctx.patchState({ active: null });
-        return EMPTY;
+            .dispatch(new EndDelegationSession('Manual'))
+            .pipe(switchMap(() => this.store.dispatch(new StartDelegationSession(delegation))));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationSessionState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationSessionState });
 };
 __decorate$1([
-    Action(BootstrapDelegationSession)
-], DelegationSessionState.prototype, "bootstrap", null);
-__decorate$1([
-    Action(SetDelegationCandidates)
-], DelegationSessionState.prototype, "setCandidates", null);
-__decorate$1([
-    Action(VerifyDelegationSession)
-], DelegationSessionState.prototype, "verify", null);
+    Action(LoadDelegationCandidates)
+], DelegationSessionState.prototype, "loadCandidates", null);
 __decorate$1([
     Action(StartDelegationSession)
 ], DelegationSessionState.prototype, "start", null);
@@ -362,12 +212,6 @@ __decorate$1([
 __decorate$1([
     Action(SwitchDelegationSession)
 ], DelegationSessionState.prototype, "switch", null);
-__decorate$1([
-    Action(RefreshDelegationSession)
-], DelegationSessionState.prototype, "refresh", null);
-__decorate$1([
-    Action(DelegationSessionInvalidated)
-], DelegationSessionState.prototype, "invalidated", null);
 __decorate$1([
     Selector()
 ], DelegationSessionState, "getActive", null);
@@ -396,7 +240,7 @@ DelegationSessionState = __decorate$1([
 ], DelegationSessionState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationSessionState, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [], propDecorators: { bootstrap: [], setCandidates: [], verify: [], start: [], end: [], switch: [], refresh: [], invalidated: [] } });
+        }], ctorParameters: () => [], propDecorators: { loadCandidates: [], start: [], end: [], switch: [] } });
 
 class DelegationSessionFacade {
     store = inject(Store);
@@ -408,41 +252,31 @@ class DelegationSessionFacade {
     isDelegated = select(DelegationSessionState.isDelegated);
     loadingActive = select(DelegationSessionState.getLoadingActive);
     // ---------------------------------------------------------------------------
-    // Derived (used by interceptor + topbar menu)
+    // Derived (interceptor + topbar)
     // ---------------------------------------------------------------------------
-    delegator = computed(() => this.active()?.delegation.delegator ?? null, ...(ngDevMode ? [{ debugName: "delegator" }] : /* istanbul ignore next */ []));
-    accessToken = computed(() => this.active()?.accessToken ?? null, ...(ngDevMode ? [{ debugName: "accessToken" }] : /* istanbul ignore next */ []));
-    accessTokenExpiresAtUtc = computed(() => this.active()?.accessTokenExpiresAtUtc ?? null, ...(ngDevMode ? [{ debugName: "accessTokenExpiresAtUtc" }] : /* istanbul ignore next */ []));
+    /** Raw delegation token for the `app-delegation` header. */
+    token = computed(() => this.active()?.token ?? null, ...(ngDevMode ? [{ debugName: "token" }] : /* istanbul ignore next */ []));
+    /** On-behalf-of (delegator). */
+    onBehalfOf = computed(() => this.active()?.delegation.delegator ?? null, ...(ngDevMode ? [{ debugName: "onBehalfOf" }] : /* istanbul ignore next */ []));
+    /** Executed-by (actual logged-in / delegated user). */
+    executedBy = computed(() => this.active()?.delegation.delegatedUser ?? null, ...(ngDevMode ? [{ debugName: "executedBy" }] : /* istanbul ignore next */ []));
     hasCandidates = computed(() => this.candidates().length > 0, ...(ngDevMode ? [{ debugName: "hasCandidates" }] : /* istanbul ignore next */ []));
-    isStartingSession = computed(() => this.loadingActive().includes(DelegationSessionActionKey.StartSession), ...(ngDevMode ? [{ debugName: "isStartingSession" }] : /* istanbul ignore next */ []));
-    isEndingSession = computed(() => this.loadingActive().includes(DelegationSessionActionKey.EndSession), ...(ngDevMode ? [{ debugName: "isEndingSession" }] : /* istanbul ignore next */ []));
-    isRefreshingSession = computed(() => this.loadingActive().includes(DelegationSessionActionKey.RefreshSession), ...(ngDevMode ? [{ debugName: "isRefreshingSession" }] : /* istanbul ignore next */ []));
+    isStarting = computed(() => this.loadingActive().includes(DelegationSessionActionKey.StartSession), ...(ngDevMode ? [{ debugName: "isStarting" }] : /* istanbul ignore next */ []));
+    isLoadingCandidates = computed(() => this.loadingActive().includes(DelegationSessionActionKey.LoadCandidates), ...(ngDevMode ? [{ debugName: "isLoadingCandidates" }] : /* istanbul ignore next */ []));
     // ---------------------------------------------------------------------------
     // Dispatchers
     // ---------------------------------------------------------------------------
-    bootstrap() {
-        return this.store.dispatch(new BootstrapDelegationSession());
-    }
-    setCandidates(candidates) {
-        return this.store.dispatch(new SetDelegationCandidates(candidates));
-    }
-    startSession(delegationId) {
-        return this.store.dispatch(new StartDelegationSession(delegationId));
+    loadCandidates() {
+        return this.store.dispatch(new LoadDelegationCandidates());
     }
-    endSession(opts = {}) {
-        return this.store.dispatch(new EndDelegationSession(opts));
+    startSession(delegation) {
+        return this.store.dispatch(new StartDelegationSession(delegation));
     }
-    switchSession(delegationId) {
-        return this.store.dispatch(new SwitchDelegationSession(delegationId));
+    switchSession(delegation) {
+        return this.store.dispatch(new SwitchDelegationSession(delegation));
     }
-    refreshSession() {
-        return this.store.dispatch(new RefreshDelegationSession());
-    }
-    verifySession() {
-        return this.store.dispatch(new VerifyDelegationSession());
-    }
-    invalidate(reason = 'Unknown') {
-        return this.store.dispatch(new DelegationSessionInvalidated(reason));
+    endSession(reason = 'Manual') {
+        return this.store.dispatch(new EndDelegationSession(reason));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationSessionFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationSessionFacade, providedIn: 'root' });
@@ -453,30 +287,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
         }] });
 
 /**
- * Confirmation dialog opened by the topbar menu before starting (or switching to)
- * a delegated session. Calls the facade and closes itself on success.
+ * Confirmation dialog before starting (or switching to) a delegated session.
+ * Calls the facade, which POSTs to `delegationToken/{id}` and stores the raw
+ * token in memory only.
  */
 class StartSessionDialog {
-    candidate = input.required(...(ngDevMode ? [{ debugName: "candidate" }] : /* istanbul ignore next */ []));
+    delegation = input.required(...(ngDevMode ? [{ debugName: "delegation" }] : /* istanbul ignore next */ []));
     intent = input('start', ...(ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []));
     ref = inject(ModalRef);
     facade = inject(DelegationSessionFacade);
-    isBusy = computed(() => this.facade.isStartingSession() || this.facade.isEndingSession(), ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
-    title = computed(() => this.intent() === 'switch'
-        ? 'delegations.switch-session-confirm-title'
-        : 'delegations.start-session-confirm-title', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    body = computed(() => this.intent() === 'switch'
-        ? 'delegations.switch-session-confirm-body'
-        : 'delegations.start-session-confirm-body', ...(ngDevMode ? [{ debugName: "body" }] : /* istanbul ignore next */ []));
+    isBusy = this.facade.isStarting;
+    bodyKey = computed(() => this.intent() === 'switch'
+        ? 'delegations.session.switchConfirmBody'
+        : 'delegations.session.startConfirmBody', ...(ngDevMode ? [{ debugName: "bodyKey" }] : /* istanbul ignore next */ []));
     confirm() {
-        const id = this.candidate().id;
+        const row = this.delegation();
         const op$ = this.intent() === 'switch'
-            ? this.facade.switchSession(id)
-            : this.facade.startSession(id);
+            ? this.facade.switchSession(row)
+            : this.facade.startSession(row);
         op$.subscribe({
             next: () => this.ref.close(true),
             error: () => {
-                /* facade publishes the error to the toast pipeline; just stay open */
+                /* error surfaced via shared toast pipeline; keep dialog open */
             },
         });
     }
@@ -484,27 +316,24 @@ class StartSessionDialog {
         this.ref.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StartSessionDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: StartSessionDialog, isStandalone: true, selector: "mt-start-session-dialog", inputs: { candidate: { classPropertyName: "candidate", publicName: "candidate", isSignal: true, isRequired: true, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <div class=\"flex items-start gap-3\">\r\n      <mt-avatar\r\n        [image]=\"candidate().delegator.photo || ''\"\r\n        icon=\"user.user-01\"\r\n        styleClass=\"w-12! h-12! text-lg! bg-surface-200!\"\r\n      ></mt-avatar>\r\n      <div class=\"flex flex-col min-w-0\">\r\n        <div class=\"text-base font-medium text-gray-900 truncate\">\r\n          {{ candidate().delegator.displayName }}\r\n        </div>\r\n        @if (candidate().delegator.email) {\r\n          <div class=\"text-xs text-gray-500 truncate\">\r\n            {{ candidate().delegator.email }}\r\n          </div>\r\n        }\r\n        @if (candidate().scopeSummary) {\r\n          <div class=\"text-xs text-gray-500 mt-1\">\r\n            {{ t(\"delegations.scope\") }}: {{ candidate().scopeSummary }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <p class=\"text-sm text-gray-600 leading-relaxed\">\r\n      {{ t(body()) }}\r\n    </p>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-gray-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('cancel')\"\r\n        [disabled]=\"isBusy()\"\r\n        (click)=\"cancel()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        color=\"primary\"\r\n        icon=\"user.users-check\"\r\n        [label]=\"\r\n          intent() === 'switch'\r\n            ? t('delegations.switch-session')\r\n            : t('delegations.start-session')\r\n        \"\r\n        [loading]=\"isBusy()\"\r\n        (click)=\"confirm()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: StartSessionDialog, isStandalone: true, selector: "mt-start-session-dialog", inputs: { delegation: { classPropertyName: "delegation", publicName: "delegation", isSignal: true, isRequired: true, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex items-start gap-3\">\n      <mt-avatar\n        icon=\"user.user-01\"\n        styleClass=\"w-12! h-12! text-lg! bg-surface-200!\"\n      ></mt-avatar>\n      <div class=\"flex flex-col min-w-0\">\n        <div class=\"text-base font-medium text-gray-900 truncate\">\n          {{ delegation().delegator.displayName }}\n        </div>\n        @if (delegation().delegator.email) {\n          <div class=\"text-xs text-gray-500 truncate\">\n            {{ delegation().delegator.email }}\n          </div>\n        }\n        @if (delegation().scopeSummary) {\n          <div class=\"text-xs text-gray-500 mt-1\">\n            {{ t(\"delegations.column.scopeSummary\") }}:\n            {{ delegation().scopeSummary }}\n          </div>\n        }\n      </div>\n    </div>\n\n    <p class=\"text-sm text-gray-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-gray-200\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.cancel')\"\n        [disabled]=\"isBusy()\"\n        (click)=\"cancel()\"\n      ></mt-button>\n      <mt-button\n        color=\"primary\"\n        icon=\"user.users-check\"\n        [label]=\"t('delegations.action.startSession')\"\n        [loading]=\"isBusy()\"\n        (click)=\"confirm()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StartSessionDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-start-session-dialog', standalone: true, imports: [CommonModule, Avatar, Button, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <div class=\"flex items-start gap-3\">\r\n      <mt-avatar\r\n        [image]=\"candidate().delegator.photo || ''\"\r\n        icon=\"user.user-01\"\r\n        styleClass=\"w-12! h-12! text-lg! bg-surface-200!\"\r\n      ></mt-avatar>\r\n      <div class=\"flex flex-col min-w-0\">\r\n        <div class=\"text-base font-medium text-gray-900 truncate\">\r\n          {{ candidate().delegator.displayName }}\r\n        </div>\r\n        @if (candidate().delegator.email) {\r\n          <div class=\"text-xs text-gray-500 truncate\">\r\n            {{ candidate().delegator.email }}\r\n          </div>\r\n        }\r\n        @if (candidate().scopeSummary) {\r\n          <div class=\"text-xs text-gray-500 mt-1\">\r\n            {{ t(\"delegations.scope\") }}: {{ candidate().scopeSummary }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <p class=\"text-sm text-gray-600 leading-relaxed\">\r\n      {{ t(body()) }}\r\n    </p>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-gray-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('cancel')\"\r\n        [disabled]=\"isBusy()\"\r\n        (click)=\"cancel()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        color=\"primary\"\r\n        icon=\"user.users-check\"\r\n        [label]=\"\r\n          intent() === 'switch'\r\n            ? t('delegations.switch-session')\r\n            : t('delegations.start-session')\r\n        \"\r\n        [loading]=\"isBusy()\"\r\n        (click)=\"confirm()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
-        }], propDecorators: { candidate: [{ type: i0.Input, args: [{ isSignal: true, alias: "candidate", required: true }] }], intent: [{ type: i0.Input, args: [{ isSignal: true, alias: "intent", required: false }] }] } });
+            args: [{ selector: 'mt-start-session-dialog', standalone: true, imports: [CommonModule, Avatar, Button, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex items-start gap-3\">\n      <mt-avatar\n        icon=\"user.user-01\"\n        styleClass=\"w-12! h-12! text-lg! bg-surface-200!\"\n      ></mt-avatar>\n      <div class=\"flex flex-col min-w-0\">\n        <div class=\"text-base font-medium text-gray-900 truncate\">\n          {{ delegation().delegator.displayName }}\n        </div>\n        @if (delegation().delegator.email) {\n          <div class=\"text-xs text-gray-500 truncate\">\n            {{ delegation().delegator.email }}\n          </div>\n        }\n        @if (delegation().scopeSummary) {\n          <div class=\"text-xs text-gray-500 mt-1\">\n            {{ t(\"delegations.column.scopeSummary\") }}:\n            {{ delegation().scopeSummary }}\n          </div>\n        }\n      </div>\n    </div>\n\n    <p class=\"text-sm text-gray-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-gray-200\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.cancel')\"\n        [disabled]=\"isBusy()\"\n        (click)=\"cancel()\"\n      ></mt-button>\n      <mt-button\n        color=\"primary\"\n        icon=\"user.users-check\"\n        [label]=\"t('delegations.action.startSession')\"\n        [loading]=\"isBusy()\"\n        (click)=\"confirm()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n" }]
+        }], propDecorators: { delegation: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegation", required: true }] }], intent: [{ type: i0.Input, args: [{ isSignal: true, alias: "intent", required: false }] }] } });
 
 /**
- * Topbar surface for the delegation runtime.
+ * Topbar surface for the delegation runtime (doc 05, 09).
  *
  * State A — no candidates, no active session: renders nothing.
- * State B — candidates exist, no active session: shows a "Switch identity" affordance.
- * State C — active delegation session: shows the delegator name + back/switch.
- *
- * Designed to be projected into a host topbar's `[actions]` slot (alongside the
- * existing user popover) — it does NOT replace the user dropdown.
+ * State B — candidates exist, no active session: lets the user start a session.
+ * State C — active delegated session: shows "Acting on behalf of {delegator}" +
+ *           "Executed by {actual user}", plus Back / Switch.
  */
 class TopbarDelegationMenu {
     /** Path to the management page, e.g. `/control-panel/delegations` or `/delegations`. */
     managePath = input('/delegations', ...(ngDevMode ? [{ debugName: "managePath" }] : /* istanbul ignore next */ []));
-    /** Compact mode hides the inline delegator name next to the button. */
     compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     facade = inject(DelegationSessionFacade);
     modal = inject(ModalService);
@@ -513,10 +342,8 @@ class TopbarDelegationMenu {
     active = this.facade.active;
     candidates = this.facade.candidates;
     hasCandidates = this.facade.hasCandidates;
-    isStarting = this.facade.isStartingSession;
-    isEnding = this.facade.isEndingSession;
-    delegatorName = computed(() => this.active()?.delegation.delegator.displayName ?? '', ...(ngDevMode ? [{ debugName: "delegatorName" }] : /* istanbul ignore next */ []));
-    /** State machine: which UI to render. */
+    onBehalfOf = this.facade.onBehalfOf;
+    executedBy = this.facade.executedBy;
     mode = computed(() => {
         if (this.active())
             return 'active';
@@ -527,37 +354,32 @@ class TopbarDelegationMenu {
     togglePopover(event) {
         this.popover().toggle(event);
     }
-    startCandidate(candidate, event) {
+    start(row, event) {
         event.stopPropagation();
         this.popover().hide();
-        this.openConfirmation(candidate, 'start');
+        this.openConfirm(row, 'start');
     }
-    switchTo(candidate, event) {
+    switchTo(row, event) {
         event.stopPropagation();
         this.popover().hide();
-        this.openConfirmation(candidate, 'switch');
+        this.openConfirm(row, 'switch');
     }
     endSession(event) {
         event.stopPropagation();
         this.popover().hide();
-        this.facade.endSession().subscribe();
+        this.facade.endSession('Manual').subscribe();
     }
-    openConfirmation(candidate, intent) {
+    openConfirm(row, intent) {
         this.modal.openModal(StartSessionDialog, 'dialog', {
-            header: this.transloco.translate(intent === 'switch'
-                ? 'delegations.switch-session'
-                : 'delegations.start-session'),
+            header: this.transloco.translate('delegations.action.startSession'),
             styleClass: '!w-[min(96vw,28rem)] !max-w-[96vw]',
             dismissableMask: true,
             dismissible: true,
-            inputValues: {
-                candidate,
-                intent,
-            },
+            inputValues: { delegation: row, intent },
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TopbarDelegationMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TopbarDelegationMenu, isStandalone: true, selector: "mt-topbar-delegation-menu", inputs: { managePath: { classPropertyName: "managePath", publicName: "managePath", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  @if (mode() !== \"hidden\") {\r\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"mt-delegation-trigger__button flex items-center gap-2 px-2 py-1 rounded-full cursor-pointer hover:bg-surface-100\"\r\n        [attr.aria-label]=\"t('delegations.delegation-menu')\"\r\n        (click)=\"togglePopover($event)\"\r\n      >\r\n        @if (mode() === \"active\") {\r\n          <mt-icon\r\n            icon=\"user.users-check\"\r\n            styleClass=\"text-lg text-primary\"\r\n          ></mt-icon>\r\n          @if (!compact()) {\r\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\r\n              {{ t(\"delegations.acting-on-behalf-of\") }}: {{ delegatorName() }}\r\n            </span>\r\n          }\r\n          <mt-delegation-status-chip\r\n            status=\"Active\"\r\n          ></mt-delegation-status-chip>\r\n        } @else {\r\n          <mt-icon\r\n            icon=\"user.users-plus\"\r\n            styleClass=\"text-lg text-primary\"\r\n          ></mt-icon>\r\n          @if (!compact()) {\r\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\r\n              {{ t(\"delegations.delegations-available\") }}\r\n            </span>\r\n          }\r\n        }\r\n      </button>\r\n    </div>\r\n\r\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\r\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\r\n        @if (mode() === \"active\" && active(); as session) {\r\n          <!-- ============================================================ -->\r\n          <!--   STATE C \u2014 active session                                    -->\r\n          <!-- ============================================================ -->\r\n          <div\r\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\r\n          >\r\n            <mt-avatar\r\n              [image]=\"session.delegation.delegator.photo || ''\"\r\n              icon=\"user.user-01\"\r\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\r\n            ></mt-avatar>\r\n            <div class=\"flex flex-col min-w-0 flex-1\">\r\n              <div class=\"text-xs text-gray-500\">\r\n                {{ t(\"delegations.acting-on-behalf-of\") }}\r\n              </div>\r\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\r\n                {{ session.delegation.delegator.displayName }}\r\n              </div>\r\n              @if (session.delegation.scopeSummary) {\r\n                <div\r\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\r\n                  [title]=\"session.delegation.scopeSummary\"\r\n                >\r\n                  {{ t(\"delegations.scope\") }}:\r\n                  {{ session.delegation.scopeSummary }}\r\n                </div>\r\n              }\r\n              <div class=\"text-xs text-gray-400 mt-1\">\r\n                {{ t(\"delegations.session-ends-at\") }}:\r\n                {{ session.accessTokenExpiresAtUtc | date: \"short\" }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\r\n            <mt-button\r\n              variant=\"text\"\r\n              icon=\"arrow.arrow-left\"\r\n              [label]=\"t('delegations.back-to-my-session')\"\r\n              [loading]=\"isEnding()\"\r\n              styleClass=\"w-full justify-start\"\r\n              (click)=\"endSession($event)\"\r\n            ></mt-button>\r\n          </div>\r\n\r\n          @if (candidates().length > 1) {\r\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\r\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\r\n                {{ t(\"delegations.switch-to-another\") }}\r\n              </div>\r\n              @for (cand of candidates(); track cand.id) {\r\n                @if (cand.id !== session.delegation.id) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\r\n                    (click)=\"switchTo(cand, $event)\"\r\n                  >\r\n                    <div class=\"flex items-center gap-2 min-w-0\">\r\n                      <mt-avatar\r\n                        [image]=\"cand.delegator.photo || ''\"\r\n                        icon=\"user.user-01\"\r\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\r\n                      ></mt-avatar>\r\n                      <span class=\"text-sm text-gray-900 truncate\">\r\n                        {{ cand.delegator.displayName }}\r\n                      </span>\r\n                    </div>\r\n                    <mt-icon\r\n                      icon=\"arrow.switch-horizontal-01\"\r\n                      styleClass=\"text-base text-gray-400\"\r\n                    ></mt-icon>\r\n                  </button>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        } @else if (mode() === \"candidates\") {\r\n          <!-- ============================================================ -->\r\n          <!--   STATE B \u2014 candidates available, no active session           -->\r\n          <!-- ============================================================ -->\r\n          <div class=\"border-b border-gray-200 px-4 py-3\">\r\n            <div class=\"text-sm font-medium text-gray-900\">\r\n              {{ t(\"delegations.you-can-act-as\") }}\r\n            </div>\r\n            <div class=\"text-xs text-gray-500 mt-1\">\r\n              {{ t(\"delegations.choose-delegator-hint\") }}\r\n            </div>\r\n          </div>\r\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\r\n            @for (cand of candidates(); track cand.id) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\r\n                (click)=\"startCandidate(cand, $event)\"\r\n              >\r\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\r\n                  <mt-avatar\r\n                    [image]=\"cand.delegator.photo || ''\"\r\n                    icon=\"user.user-01\"\r\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\r\n                  ></mt-avatar>\r\n                  <div class=\"flex flex-col min-w-0\">\r\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\r\n                      {{ cand.delegator.displayName }}\r\n                    </span>\r\n                    @if (cand.scopeSummary) {\r\n                      <span\r\n                        class=\"text-xs text-gray-500 truncate\"\r\n                        [title]=\"cand.scopeSummary\"\r\n                      >\r\n                        {{ cand.scopeSummary }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <mt-icon\r\n                  icon=\"arrow.arrow-right\"\r\n                  styleClass=\"text-base text-gray-400\"\r\n                ></mt-icon>\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Footer (always shown when popover renders) -->\r\n        <div class=\"border-t border-gray-200 px-2 py-2\">\r\n          <a\r\n            [routerLink]=\"managePath()\"\r\n            (click)=\"popover().hide()\"\r\n            class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\r\n          >\r\n            <mt-icon\r\n              icon=\"general.settings-02\"\r\n              styleClass=\"text-base\"\r\n            ></mt-icon>\r\n            <span>{{ t(\"delegations.manage-delegations\") }}</span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </p-popover>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:inline-flex;align-items:center}.mt-delegation-trigger__button{transition:background-color .2s ease-out}.mt-delegation-trigger__label{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TopbarDelegationMenu, isStandalone: true, selector: "mt-topbar-delegation-menu", inputs: { managePath: { classPropertyName: "managePath", publicName: "managePath", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"mt-delegation-trigger__button flex items-center gap-2 px-2 py-1 rounded-full cursor-pointer hover:bg-surface-100\"\n        [attr.aria-label]=\"t('delegations.title')\"\n        (click)=\"togglePopover($event)\"\n      >\n        @if (mode() === \"active\") {\n          <mt-icon\n            icon=\"user.users-check\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{\n                t(\"delegations.session.banner\", {\n                  delegatorName: onBehalfOf()?.displayName,\n                })\n              }}\n            </span>\n          }\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        } @else {\n          <mt-icon\n            icon=\"user.users-plus\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{ t(\"delegations.session.availableTitle\") }}\n            </span>\n          }\n        }\n      </button>\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\n        @if (mode() === \"active\" && active(); as session) {\n          <!-- STATE C \u2014 active session -->\n          <div\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\n          >\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\n            ></mt-avatar>\n            <div class=\"flex flex-col min-w-0 flex-1\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\n                {{ onBehalfOf()?.displayName }}\n              </div>\n              <div class=\"text-xs text-gray-500 mt-1\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </div>\n              @if (session.delegation.scopeSummary) {\n                <div\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\n                  [title]=\"session.delegation.scopeSummary\"\n                >\n                  {{ t(\"delegations.column.scopeSummary\") }}:\n                  {{ session.delegation.scopeSummary }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\n            <mt-button\n              variant=\"text\"\n              icon=\"arrow.arrow-left\"\n              [label]=\"t('delegations.action.endSession')\"\n              styleClass=\"w-full justify-start\"\n              (click)=\"endSession($event)\"\n            ></mt-button>\n          </div>\n\n          @if (candidates().length > 1) {\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\n                {{ t(\"delegations.session.switchToAnother\") }}\n              </div>\n              @for (cand of candidates(); track cand.delegationId) {\n                @if (cand.delegationId !== session.delegation.delegationId) {\n                  <button\n                    type=\"button\"\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\n                    (click)=\"switchTo(cand, $event)\"\n                  >\n                    <div class=\"flex items-center gap-2 min-w-0\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\n                      ></mt-avatar>\n                      <span class=\"text-sm text-gray-900 truncate\">\n                        {{ cand.delegator.displayName }}\n                      </span>\n                    </div>\n                    <mt-icon\n                      icon=\"arrow.switch-horizontal-01\"\n                      styleClass=\"text-base text-gray-400\"\n                    ></mt-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        } @else if (mode() === \"candidates\") {\n          <!-- STATE B \u2014 candidates available -->\n          <div class=\"border-b border-gray-200 px-4 py-3\">\n            <div class=\"text-sm font-medium text-gray-900\">\n              {{ t(\"delegations.session.youCanActAs\") }}\n            </div>\n            <div class=\"text-xs text-gray-500 mt-1\">\n              {{ t(\"delegations.session.chooseDelegatorHint\") }}\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\n            @for (cand of candidates(); track cand.delegationId) {\n              <button\n                type=\"button\"\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\n                (click)=\"start(cand, $event)\"\n              >\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n                  <mt-avatar\n                    icon=\"user.user-01\"\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\n                  ></mt-avatar>\n                  <div class=\"flex flex-col min-w-0\">\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\n                      {{ cand.delegator.displayName }}\n                    </span>\n                    @if (cand.scopeSummary) {\n                      <span\n                        class=\"text-xs text-gray-500 truncate\"\n                        [title]=\"cand.scopeSummary\"\n                      >\n                        {{ cand.scopeSummary }}\n                      </span>\n                    }\n                  </div>\n                </div>\n                <mt-icon\n                  icon=\"arrow.arrow-right\"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Footer -->\n        <div class=\"border-t border-gray-200 px-2 py-2\">\n          <a\n            [routerLink]=\"managePath()\"\n            (click)=\"popover().hide()\"\n            class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\n          >\n            <mt-icon\n              icon=\"general.settings-02\"\n              styleClass=\"text-base\"\n            ></mt-icon>\n            <span>{{ t(\"delegations.session.manage\") }}</span>\n          </a>\n        </div>\n      </div>\n    </p-popover>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center}.mt-delegation-trigger__button{transition:background-color .2s ease-out}.mt-delegation-trigger__label{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TopbarDelegationMenu, decorators: [{
             type: Component,
@@ -570,7 +392,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         RouterLink,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  @if (mode() !== \"hidden\") {\r\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"mt-delegation-trigger__button flex items-center gap-2 px-2 py-1 rounded-full cursor-pointer hover:bg-surface-100\"\r\n        [attr.aria-label]=\"t('delegations.delegation-menu')\"\r\n        (click)=\"togglePopover($event)\"\r\n      >\r\n        @if (mode() === \"active\") {\r\n          <mt-icon\r\n            icon=\"user.users-check\"\r\n            styleClass=\"text-lg text-primary\"\r\n          ></mt-icon>\r\n          @if (!compact()) {\r\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\r\n              {{ t(\"delegations.acting-on-behalf-of\") }}: {{ delegatorName() }}\r\n            </span>\r\n          }\r\n          <mt-delegation-status-chip\r\n            status=\"Active\"\r\n          ></mt-delegation-status-chip>\r\n        } @else {\r\n          <mt-icon\r\n            icon=\"user.users-plus\"\r\n            styleClass=\"text-lg text-primary\"\r\n          ></mt-icon>\r\n          @if (!compact()) {\r\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\r\n              {{ t(\"delegations.delegations-available\") }}\r\n            </span>\r\n          }\r\n        }\r\n      </button>\r\n    </div>\r\n\r\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\r\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\r\n        @if (mode() === \"active\" && active(); as session) {\r\n          <!-- ============================================================ -->\r\n          <!--   STATE C \u2014 active session                                    -->\r\n          <!-- ============================================================ -->\r\n          <div\r\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\r\n          >\r\n            <mt-avatar\r\n              [image]=\"session.delegation.delegator.photo || ''\"\r\n              icon=\"user.user-01\"\r\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\r\n            ></mt-avatar>\r\n            <div class=\"flex flex-col min-w-0 flex-1\">\r\n              <div class=\"text-xs text-gray-500\">\r\n                {{ t(\"delegations.acting-on-behalf-of\") }}\r\n              </div>\r\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\r\n                {{ session.delegation.delegator.displayName }}\r\n              </div>\r\n              @if (session.delegation.scopeSummary) {\r\n                <div\r\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\r\n                  [title]=\"session.delegation.scopeSummary\"\r\n                >\r\n                  {{ t(\"delegations.scope\") }}:\r\n                  {{ session.delegation.scopeSummary }}\r\n                </div>\r\n              }\r\n              <div class=\"text-xs text-gray-400 mt-1\">\r\n                {{ t(\"delegations.session-ends-at\") }}:\r\n                {{ session.accessTokenExpiresAtUtc | date: \"short\" }}\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\r\n            <mt-button\r\n              variant=\"text\"\r\n              icon=\"arrow.arrow-left\"\r\n              [label]=\"t('delegations.back-to-my-session')\"\r\n              [loading]=\"isEnding()\"\r\n              styleClass=\"w-full justify-start\"\r\n              (click)=\"endSession($event)\"\r\n            ></mt-button>\r\n          </div>\r\n\r\n          @if (candidates().length > 1) {\r\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\r\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\r\n                {{ t(\"delegations.switch-to-another\") }}\r\n              </div>\r\n              @for (cand of candidates(); track cand.id) {\r\n                @if (cand.id !== session.delegation.id) {\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\r\n                    (click)=\"switchTo(cand, $event)\"\r\n                  >\r\n                    <div class=\"flex items-center gap-2 min-w-0\">\r\n                      <mt-avatar\r\n                        [image]=\"cand.delegator.photo || ''\"\r\n                        icon=\"user.user-01\"\r\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\r\n                      ></mt-avatar>\r\n                      <span class=\"text-sm text-gray-900 truncate\">\r\n                        {{ cand.delegator.displayName }}\r\n                      </span>\r\n                    </div>\r\n                    <mt-icon\r\n                      icon=\"arrow.switch-horizontal-01\"\r\n                      styleClass=\"text-base text-gray-400\"\r\n                    ></mt-icon>\r\n                  </button>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        } @else if (mode() === \"candidates\") {\r\n          <!-- ============================================================ -->\r\n          <!--   STATE B \u2014 candidates available, no active session           -->\r\n          <!-- ============================================================ -->\r\n          <div class=\"border-b border-gray-200 px-4 py-3\">\r\n            <div class=\"text-sm font-medium text-gray-900\">\r\n              {{ t(\"delegations.you-can-act-as\") }}\r\n            </div>\r\n            <div class=\"text-xs text-gray-500 mt-1\">\r\n              {{ t(\"delegations.choose-delegator-hint\") }}\r\n            </div>\r\n          </div>\r\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\r\n            @for (cand of candidates(); track cand.id) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\r\n                (click)=\"startCandidate(cand, $event)\"\r\n              >\r\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\r\n                  <mt-avatar\r\n                    [image]=\"cand.delegator.photo || ''\"\r\n                    icon=\"user.user-01\"\r\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\r\n                  ></mt-avatar>\r\n                  <div class=\"flex flex-col min-w-0\">\r\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\r\n                      {{ cand.delegator.displayName }}\r\n                    </span>\r\n                    @if (cand.scopeSummary) {\r\n                      <span\r\n                        class=\"text-xs text-gray-500 truncate\"\r\n                        [title]=\"cand.scopeSummary\"\r\n                      >\r\n                        {{ cand.scopeSummary }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <mt-icon\r\n                  icon=\"arrow.arrow-right\"\r\n                  styleClass=\"text-base text-gray-400\"\r\n                ></mt-icon>\r\n              </button>\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Footer (always shown when popover renders) -->\r\n        <div class=\"border-t border-gray-200 px-2 py-2\">\r\n          <a\r\n            [routerLink]=\"managePath()\"\r\n            (click)=\"popover().hide()\"\r\n            class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\r\n          >\r\n            <mt-icon\r\n              icon=\"general.settings-02\"\r\n              styleClass=\"text-base\"\r\n            ></mt-icon>\r\n            <span>{{ t(\"delegations.manage-delegations\") }}</span>\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </p-popover>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:inline-flex;align-items:center}.mt-delegation-trigger__button{transition:background-color .2s ease-out}.mt-delegation-trigger__label{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"mt-delegation-trigger__button flex items-center gap-2 px-2 py-1 rounded-full cursor-pointer hover:bg-surface-100\"\n        [attr.aria-label]=\"t('delegations.title')\"\n        (click)=\"togglePopover($event)\"\n      >\n        @if (mode() === \"active\") {\n          <mt-icon\n            icon=\"user.users-check\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{\n                t(\"delegations.session.banner\", {\n                  delegatorName: onBehalfOf()?.displayName,\n                })\n              }}\n            </span>\n          }\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        } @else {\n          <mt-icon\n            icon=\"user.users-plus\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{ t(\"delegations.session.availableTitle\") }}\n            </span>\n          }\n        }\n      </button>\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\n        @if (mode() === \"active\" && active(); as session) {\n          <!-- STATE C \u2014 active session -->\n          <div\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\n          >\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\n            ></mt-avatar>\n            <div class=\"flex flex-col min-w-0 flex-1\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\n                {{ onBehalfOf()?.displayName }}\n              </div>\n              <div class=\"text-xs text-gray-500 mt-1\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </div>\n              @if (session.delegation.scopeSummary) {\n                <div\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\n                  [title]=\"session.delegation.scopeSummary\"\n                >\n                  {{ t(\"delegations.column.scopeSummary\") }}:\n                  {{ session.delegation.scopeSummary }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\n            <mt-button\n              variant=\"text\"\n              icon=\"arrow.arrow-left\"\n              [label]=\"t('delegations.action.endSession')\"\n              styleClass=\"w-full justify-start\"\n              (click)=\"endSession($event)\"\n            ></mt-button>\n          </div>\n\n          @if (candidates().length > 1) {\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\n                {{ t(\"delegations.session.switchToAnother\") }}\n              </div>\n              @for (cand of candidates(); track cand.delegationId) {\n                @if (cand.delegationId !== session.delegation.delegationId) {\n                  <button\n                    type=\"button\"\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\n                    (click)=\"switchTo(cand, $event)\"\n                  >\n                    <div class=\"flex items-center gap-2 min-w-0\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\n                      ></mt-avatar>\n                      <span class=\"text-sm text-gray-900 truncate\">\n                        {{ cand.delegator.displayName }}\n                      </span>\n                    </div>\n                    <mt-icon\n                      icon=\"arrow.switch-horizontal-01\"\n                      styleClass=\"text-base text-gray-400\"\n                    ></mt-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        } @else if (mode() === \"candidates\") {\n          <!-- STATE B \u2014 candidates available -->\n          <div class=\"border-b border-gray-200 px-4 py-3\">\n            <div class=\"text-sm font-medium text-gray-900\">\n              {{ t(\"delegations.session.youCanActAs\") }}\n            </div>\n            <div class=\"text-xs text-gray-500 mt-1\">\n              {{ t(\"delegations.session.chooseDelegatorHint\") }}\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\n            @for (cand of candidates(); track cand.delegationId) {\n              <button\n                type=\"button\"\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\n                (click)=\"start(cand, $event)\"\n              >\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n                  <mt-avatar\n                    icon=\"user.user-01\"\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\n                  ></mt-avatar>\n                  <div class=\"flex flex-col min-w-0\">\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\n                      {{ cand.delegator.displayName }}\n                    </span>\n                    @if (cand.scopeSummary) {\n                      <span\n                        class=\"text-xs text-gray-500 truncate\"\n                        [title]=\"cand.scopeSummary\"\n                      >\n                        {{ cand.scopeSummary }}\n                      </span>\n                    }\n                  </div>\n                </div>\n                <mt-icon\n                  icon=\"arrow.arrow-right\"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Footer -->\n        <div class=\"border-t border-gray-200 px-2 py-2\">\n          <a\n            [routerLink]=\"managePath()\"\n            (click)=\"popover().hide()\"\n            class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\n          >\n            <mt-icon\n              icon=\"general.settings-02\"\n              styleClass=\"text-base\"\n            ></mt-icon>\n            <span>{{ t(\"delegations.session.manage\") }}</span>\n          </a>\n        </div>\n      </div>\n    </p-popover>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center}.mt-delegation-trigger__button{transition:background-color .2s ease-out}.mt-delegation-trigger__label{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"] }]
         }], propDecorators: { managePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "managePath", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
 
 class Delegations {
@@ -579,15 +401,15 @@ class Delegations {
         this.router.navigate(['control-panel/product-settings']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Delegations, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: Delegations, isStandalone: true, selector: "mt-delegations", ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <mt-page\n    [title]=\"t('delegations.delegations')\"\n    [avatarIcon]=\"'custom.hierarchy-structure'\"\n    [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-indigo-50)',\n      '--p-avatar-color': 'var(--p-indigo-700)',\n    }\"\n    (backButtonClick)=\"goBack()\"\n    backButton\n  >\n    <router-outlet />\n  </mt-page>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: Delegations, isStandalone: true, selector: "mt-delegations", ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <mt-page\n    [title]=\"t('delegations.title')\"\n    [avatarIcon]=\"'custom.hierarchy-structure'\"\n    [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-indigo-50)',\n      '--p-avatar-color': 'var(--p-indigo-700)',\n    }\"\n    (backButtonClick)=\"goBack()\"\n    backButton\n  >\n    <router-outlet />\n  </mt-page>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Delegations, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-delegations', imports: [Page, RouterOutlet, TranslocoDirective], template: "<ng-container *transloco=\"let t\">\n  <mt-page\n    [title]=\"t('delegations.delegations')\"\n    [avatarIcon]=\"'custom.hierarchy-structure'\"\n    [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-indigo-50)',\n      '--p-avatar-color': 'var(--p-indigo-700)',\n    }\"\n    (backButtonClick)=\"goBack()\"\n    backButton\n  >\n    <router-outlet />\n  </mt-page>\n</ng-container>\n" }]
+            args: [{ selector: 'mt-delegations', imports: [Page, RouterOutlet, TranslocoDirective], template: "<ng-container *transloco=\"let t\">\n  <mt-page\n    [title]=\"t('delegations.title')\"\n    [avatarIcon]=\"'custom.hierarchy-structure'\"\n    [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-indigo-50)',\n      '--p-avatar-color': 'var(--p-indigo-700)',\n    }\"\n    (backButtonClick)=\"goBack()\"\n    backButton\n  >\n    <router-outlet />\n  </mt-page>\n</ng-container>\n" }]
         }] });
 
 // ---------------------------------------------------------------------------
-// List / detail
+// Lists / detail
 // ---------------------------------------------------------------------------
 class GetMyDelegations {
     query;
@@ -603,37 +425,81 @@ class GetAssignedDelegations {
         this.query = query;
     }
 }
-class GetDelegation {
+class GetActiveAssignedDelegations {
+    query;
+    static type = '[Delegations] Get Active Assigned Delegations';
+    constructor(query = {}) {
+        this.query = query;
+    }
+}
+class GetDelegationDetail {
     id;
-    includeStatusHistory;
-    static type = '[Delegations] Get Delegation';
-    constructor(id, includeStatusHistory = false) {
+    static type = '[Delegations] Get Delegation Detail';
+    constructor(id) {
         this.id = id;
-        this.includeStatusHistory = includeStatusHistory;
     }
 }
-class ClearSelectedDelegation {
-    static type = '[Delegations] Clear Selected Delegation';
+class ClearDelegationDetail {
+    static type = '[Delegations] Clear Delegation Detail';
+}
+// ---------------------------------------------------------------------------
+// Scope
+// ---------------------------------------------------------------------------
+class GetScopeOptions {
+    delegatorUserId;
+    static type = '[Delegations] Get Scope Options';
+    constructor(delegatorUserId) {
+        this.delegatorUserId = delegatorUserId;
+    }
+}
+class PreviewScope {
+    scope;
+    static type = '[Delegations] Preview Scope';
+    constructor(scope) {
+        this.scope = scope;
+    }
+}
+class ClearScopePreview {
+    static type = '[Delegations] Clear Scope Preview';
 }
 // ---------------------------------------------------------------------------
-// Lifecycle
+// Create / edit (legacy + v2)
 // ---------------------------------------------------------------------------
-class CreateDelegation {
+class CreateDelegationLegacy {
     request;
-    static type = '[Delegations] Create Delegation';
+    static type = '[Delegations] Create Delegation (legacy)';
     constructor(request) {
         this.request = request;
     }
 }
-class UpdateDelegation {
+class CreateDelegationV2 {
+    request;
+    static type = '[Delegations] Create Delegation (v2)';
+    constructor(request) {
+        this.request = request;
+    }
+}
+class UpdateDelegationLegacy {
+    id;
+    request;
+    static type = '[Delegations] Update Delegation (legacy)';
+    constructor(id, request) {
+        this.id = id;
+        this.request = request;
+    }
+}
+class UpdateDelegationV2 {
     id;
     request;
-    static type = '[Delegations] Update Delegation';
+    static type = '[Delegations] Update Delegation (v2)';
     constructor(id, request) {
         this.id = id;
         this.request = request;
     }
 }
+// ---------------------------------------------------------------------------
+// Decisions
+// ---------------------------------------------------------------------------
 class ApproveDelegation {
     id;
     request;
@@ -654,50 +520,32 @@ class RejectDelegation {
 }
 class CancelDelegation {
     id;
-    request;
+    rowVersion;
+    asAdmin;
     static type = '[Delegations] Cancel Delegation';
-    constructor(id, request) {
+    constructor(id, rowVersion, asAdmin = false) {
         this.id = id;
-        this.request = request;
-    }
-}
-// ---------------------------------------------------------------------------
-// Scope picker (form support)
-// ---------------------------------------------------------------------------
-class GetScopeOptions {
-    delegatorUserId;
-    static type = '[Delegations] Get Scope Options';
-    /** Admin-only override; ignored for normal users. */
-    constructor(delegatorUserId) {
-        this.delegatorUserId = delegatorUserId;
+        this.rowVersion = rowVersion;
+        this.asAdmin = asAdmin;
     }
 }
-class PreviewScope {
-    scope;
-    static type = '[Delegations] Preview Scope';
-    constructor(scope) {
-        this.scope = scope;
-    }
-}
-class ClearScopePreview {
-    static type = '[Delegations] Clear Scope Preview';
-}
 
 // ============================================================================
 // NGXS state shape + action keys
 // ============================================================================
 var DelegationsActionKey;
 (function (DelegationsActionKey) {
-    DelegationsActionKey["GetMyDelegations"] = "getMyDelegations";
-    DelegationsActionKey["GetAssignedDelegations"] = "getAssignedDelegations";
-    DelegationsActionKey["GetDelegation"] = "getDelegation";
-    DelegationsActionKey["CreateDelegation"] = "createDelegation";
-    DelegationsActionKey["UpdateDelegation"] = "updateDelegation";
-    DelegationsActionKey["ApproveDelegation"] = "approveDelegation";
-    DelegationsActionKey["RejectDelegation"] = "rejectDelegation";
-    DelegationsActionKey["CancelDelegation"] = "cancelDelegation";
+    DelegationsActionKey["GetMy"] = "getMy";
+    DelegationsActionKey["GetAssigned"] = "getAssigned";
+    DelegationsActionKey["GetActive"] = "getActive";
+    DelegationsActionKey["GetDetail"] = "getDetail";
     DelegationsActionKey["GetScopeOptions"] = "getScopeOptions";
     DelegationsActionKey["PreviewScope"] = "previewScope";
+    DelegationsActionKey["Create"] = "create";
+    DelegationsActionKey["Update"] = "update";
+    DelegationsActionKey["Approve"] = "approve";
+    DelegationsActionKey["Reject"] = "reject";
+    DelegationsActionKey["Cancel"] = "cancel";
 })(DelegationsActionKey || (DelegationsActionKey = {}));
 
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
@@ -709,62 +557,44 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 const BASE = 'identity/delegations';
 function buildListParams(query) {
     let params = new HttpParams();
-    if (query.page != null)
-        params = params.set('page', query.page);
-    if (query.pageSize != null)
-        params = params.set('pageSize', query.pageSize);
-    if (query.q)
-        params = params.set('q', query.q);
-    if (query.startFrom)
-        params = params.set('startFrom', query.startFrom);
-    if (query.startTo)
-        params = params.set('startTo', query.startTo);
-    if (query.endFrom)
-        params = params.set('endFrom', query.endFrom);
-    if (query.endTo)
-        params = params.set('endTo', query.endTo);
-    if (query.activeOn)
-        params = params.set('activeOn', query.activeOn);
-    if (query.approvalStatus)
-        params = params.set('approvalStatus', query.approvalStatus);
-    if (query.moduleId != null)
-        params = params.set('moduleId', query.moduleId);
-    if (query.accessibilityGroupId != null)
-        params = params.set('accessibilityGroupId', query.accessibilityGroupId);
+    if (query.activeOnly != null)
+        params = params.set('activeOnly', query.activeOnly);
+    if (query.status)
+        params = params.set('status', query.status);
+    if (query.search)
+        params = params.set('search', query.search);
+    if (query.fromUtc)
+        params = params.set('fromUtc', query.fromUtc);
+    if (query.toUtc)
+        params = params.set('toUtc', query.toUtc);
     if (query.sortBy)
         params = params.set('sortBy', query.sortBy);
-    if (query.sortDir)
-        params = params.set('sortDir', query.sortDir);
-    if (query.status?.length) {
-        for (const s of query.status) {
-            params = params.append('status', s);
-        }
-    }
+    if (query.sortDirection)
+        params = params.set('sortDirection', query.sortDirection);
+    params = params.set('page', query.page ?? 1);
+    params = params.set('pageSize', query.pageSize ?? 25);
+    if (query.delegatorUserId)
+        params = params.set('delegatorUserId', query.delegatorUserId);
+    if (query.delegatedUserId)
+        params = params.set('delegatedUserId', query.delegatedUserId);
     return params;
 }
-function replaceInPage(page, updated) {
-    if (!page)
-        return page;
-    const idx = page.items.findIndex((it) => it.id === updated.id);
-    if (idx === -1)
-        return page;
-    const items = page.items.slice();
-    items[idx] = updated;
-    return { ...page, items };
-}
 let DelegationsState = class DelegationsState {
     http = inject(HttpClient);
     // ============================================================================
     // Selectors
     // ============================================================================
-    static getMyPage(state) {
+    static getMy(state) {
         return state.my;
     }
-    static getAssignedPage(state) {
+    static getAssigned(state) {
         return state.assigned;
     }
-    static getSelected(state) {
-        return state.selected;
+    static getActive(state) {
+        return state.active;
+    }
+    static getDetail(state) {
+        return state.detail;
     }
     static getScopeOptions(state) {
         return state.scopeOptions;
@@ -779,95 +609,57 @@ let DelegationsState = class DelegationsState {
         return state.errors;
     }
     // ============================================================================
-    // List
+    // Lists
     // ============================================================================
-    getMyDelegations(ctx, { query }) {
-        const req$ = this.http.get(`${BASE}/my`, {
+    getMy(ctx, { query }) {
+        const req$ = this.http.get(BASE, {
             params: buildListParams(query),
         });
         return handleApiRequest({
             ctx,
-            key: DelegationsActionKey.GetMyDelegations,
+            key: DelegationsActionKey.GetMy,
             request$: req$,
             onSuccess: (response) => ({ my: response.data }),
         });
     }
-    getAssignedDelegations(ctx, { query }) {
+    getAssigned(ctx, { query }) {
         const req$ = this.http.get(`${BASE}/assigned`, { params: buildListParams(query) });
         return handleApiRequest({
             ctx,
-            key: DelegationsActionKey.GetAssignedDelegations,
+            key: DelegationsActionKey.GetAssigned,
             request$: req$,
             onSuccess: (response) => ({ assigned: response.data }),
         });
     }
-    getDelegation(ctx, { id, includeStatusHistory }) {
-        let params = new HttpParams();
-        if (includeStatusHistory) {
-            params = params.set('include', 'statusHistory');
-        }
-        const req$ = this.http.get(`${BASE}/${id}`, {
-            params,
-        });
+    getActive(ctx, { query }) {
+        const req$ = this.http.get(`${BASE}/user/activedelegations`, { params: buildListParams(query) });
         return handleApiRequest({
             ctx,
-            key: DelegationsActionKey.GetDelegation,
+            key: DelegationsActionKey.GetActive,
             request$: req$,
-            onSuccess: (response) => ({ selected: response.data ?? null }),
+            onSuccess: (response) => ({ active: response.data }),
         });
     }
-    clearSelectedDelegation(ctx) {
-        ctx.patchState({ selected: null });
-    }
-    // ============================================================================
-    // Lifecycle
-    // ============================================================================
-    createDelegation(ctx, { request }) {
-        const req$ = this.http.post(BASE, request);
+    getDetail(ctx, { id }) {
+        const req$ = this.http.get(`${BASE}/${id}`);
         return handleApiRequest({
             ctx,
-            key: DelegationsActionKey.CreateDelegation,
+            key: DelegationsActionKey.GetDetail,
             request$: req$,
-            onSuccess: (response) => {
-                const created = response.data;
-                const state = ctx.getState();
-                return {
-                    my: state.my
-                        ? { ...state.my, items: [created, ...state.my.items] }
-                        : state.my,
-                };
-            },
+            onSuccess: (response) => ({ detail: response.data ?? null }),
         });
     }
-    updateDelegation(ctx, { id, request }) {
-        const req$ = this.http.put(`${BASE}/${id}`, request);
-        return this.applyLifecycleResult(ctx, DelegationsActionKey.UpdateDelegation, req$);
-    }
-    approveDelegation(ctx, { id, request }) {
-        const req$ = this.http.post(`${BASE}/${id}/approve`, request);
-        return this.applyLifecycleResult(ctx, DelegationsActionKey.ApproveDelegation, req$);
-    }
-    rejectDelegation(ctx, { id, request }) {
-        const req$ = this.http.post(`${BASE}/${id}/reject`, request);
-        return this.applyLifecycleResult(ctx, DelegationsActionKey.RejectDelegation, req$);
-    }
-    cancelDelegation(ctx, { id, request }) {
-        const req$ = this.http.post(`${BASE}/${id}/cancel`, request);
-        return this.applyLifecycleResult(ctx, DelegationsActionKey.CancelDelegation, req$);
+    clearDetail(ctx) {
+        ctx.patchState({ detail: null });
     }
     // ============================================================================
-    // Scope (options + preview)
+    // Scope
     // ============================================================================
     getScopeOptions(ctx, { delegatorUserId }) {
         let params = new HttpParams();
         if (delegatorUserId)
             params = params.set('delegatorUserId', delegatorUserId);
-        const url = delegatorUserId
-            ? `identity/admin/delegations/scope/options`
-            : `${BASE}/scope/options`;
-        const req$ = this.http.get(url, {
-            params,
-        });
+        const req$ = this.http.get(`${BASE}/scope/options`, { params });
         return handleApiRequest({
             ctx,
             key: DelegationsActionKey.GetScopeOptions,
@@ -876,7 +668,7 @@ let DelegationsState = class DelegationsState {
         });
     }
     previewScope(ctx, { scope }) {
-        const req$ = this.http.post(`${BASE}/scope/preview`, scope);
+        const req$ = this.http.post(`${BASE}/scope/preview`, { scope });
         return handleApiRequest({
             ctx,
             key: DelegationsActionKey.PreviewScope,
@@ -888,24 +680,75 @@ let DelegationsState = class DelegationsState {
         ctx.patchState({ scopePreview: null });
     }
     // ============================================================================
-    // Helpers
+    // Create / edit  (response is legacy DelegationDto — clients reload list/detail)
     // ============================================================================
-    applyLifecycleResult(ctx, key, req$) {
+    createLegacy(ctx, { request }) {
+        const req$ = this.http.post(BASE, request);
         return handleApiRequest({
             ctx,
-            key,
+            key: DelegationsActionKey.Create,
             request$: req$,
-            onSuccess: (response) => {
-                const updated = response.data;
-                const state = ctx.getState();
-                return {
-                    my: replaceInPage(state.my, updated),
-                    assigned: replaceInPage(state.assigned, updated),
-                    selected: state.selected && state.selected.id === updated.id
-                        ? { ...state.selected, ...updated }
-                        : state.selected,
-                };
-            },
+            onSuccess: () => ({}),
+        });
+    }
+    createV2(ctx, { request }) {
+        const req$ = this.http.post(`${BASE}/v2`, request);
+        return handleApiRequest({
+            ctx,
+            key: DelegationsActionKey.Create,
+            request$: req$,
+            onSuccess: () => ({}),
+        });
+    }
+    updateLegacy(ctx, { id, request }) {
+        const req$ = this.http.put(`${BASE}/${id}`, request);
+        return handleApiRequest({
+            ctx,
+            key: DelegationsActionKey.Update,
+            request$: req$,
+            onSuccess: () => ({}),
+        });
+    }
+    updateV2(ctx, { id, request }) {
+        const req$ = this.http.put(`${BASE}/v2/${id}`, request);
+        return handleApiRequest({
+            ctx,
+            key: DelegationsActionKey.Update,
+            request$: req$,
+            onSuccess: () => ({}),
+        });
+    }
+    // ============================================================================
+    // Decisions
+    // ============================================================================
+    approve(ctx, { id, request }) {
+        const req$ = this.http.post(`${BASE}/${id}/approve`, request);
+        return handleApiRequest({
+            ctx,
+            key: DelegationsActionKey.Approve,
+            request$: req$,
+            onSuccess: () => ({}),
+        });
+    }
+    reject(ctx, { id, request }) {
+        const req$ = this.http.post(`${BASE}/${id}/reject`, request);
+        return handleApiRequest({
+            ctx,
+            key: DelegationsActionKey.Reject,
+            request$: req$,
+            onSuccess: () => ({}),
+        });
+    }
+    cancel(ctx, { id, rowVersion, asAdmin }) {
+        const path = asAdmin ? `${BASE}/Admin/${id}` : `${BASE}/${id}`;
+        const req$ = this.http.delete(path, {
+            params: new HttpParams().set('rowVersion', rowVersion),
+        });
+        return handleApiRequest({
+            ctx,
+            key: DelegationsActionKey.Cancel,
+            request$: req$,
+            onSuccess: () => ({}),
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -913,31 +756,19 @@ let DelegationsState = class DelegationsState {
 };
 __decorate([
     Action(GetMyDelegations)
-], DelegationsState.prototype, "getMyDelegations", null);
+], DelegationsState.prototype, "getMy", null);
 __decorate([
     Action(GetAssignedDelegations)
-], DelegationsState.prototype, "getAssignedDelegations", null);
-__decorate([
-    Action(GetDelegation)
-], DelegationsState.prototype, "getDelegation", null);
-__decorate([
-    Action(ClearSelectedDelegation)
-], DelegationsState.prototype, "clearSelectedDelegation", null);
-__decorate([
-    Action(CreateDelegation)
-], DelegationsState.prototype, "createDelegation", null);
+], DelegationsState.prototype, "getAssigned", null);
 __decorate([
-    Action(UpdateDelegation)
-], DelegationsState.prototype, "updateDelegation", null);
+    Action(GetActiveAssignedDelegations)
+], DelegationsState.prototype, "getActive", null);
 __decorate([
-    Action(ApproveDelegation)
-], DelegationsState.prototype, "approveDelegation", null);
+    Action(GetDelegationDetail)
+], DelegationsState.prototype, "getDetail", null);
 __decorate([
-    Action(RejectDelegation)
-], DelegationsState.prototype, "rejectDelegation", null);
-__decorate([
-    Action(CancelDelegation)
-], DelegationsState.prototype, "cancelDelegation", null);
+    Action(ClearDelegationDetail)
+], DelegationsState.prototype, "clearDetail", null);
 __decorate([
     Action(GetScopeOptions)
 ], DelegationsState.prototype, "getScopeOptions", null);
@@ -947,15 +778,39 @@ __decorate([
 __decorate([
     Action(ClearScopePreview)
 ], DelegationsState.prototype, "clearScopePreview", null);
+__decorate([
+    Action(CreateDelegationLegacy)
+], DelegationsState.prototype, "createLegacy", null);
+__decorate([
+    Action(CreateDelegationV2)
+], DelegationsState.prototype, "createV2", null);
+__decorate([
+    Action(UpdateDelegationLegacy)
+], DelegationsState.prototype, "updateLegacy", null);
+__decorate([
+    Action(UpdateDelegationV2)
+], DelegationsState.prototype, "updateV2", null);
+__decorate([
+    Action(ApproveDelegation)
+], DelegationsState.prototype, "approve", null);
+__decorate([
+    Action(RejectDelegation)
+], DelegationsState.prototype, "reject", null);
+__decorate([
+    Action(CancelDelegation)
+], DelegationsState.prototype, "cancel", null);
 __decorate([
     Selector()
-], DelegationsState, "getMyPage", null);
+], DelegationsState, "getMy", null);
 __decorate([
     Selector()
-], DelegationsState, "getAssignedPage", null);
+], DelegationsState, "getAssigned", null);
 __decorate([
     Selector()
-], DelegationsState, "getSelected", null);
+], DelegationsState, "getActive", null);
+__decorate([
+    Selector()
+], DelegationsState, "getDetail", null);
 __decorate([
     Selector()
 ], DelegationsState, "getScopeOptions", null);
@@ -974,7 +829,8 @@ DelegationsState = __decorate([
         defaults: {
             my: null,
             assigned: null,
-            selected: null,
+            active: null,
+            detail: null,
             scopeOptions: null,
             scopePreview: null,
             loadingActive: [],
@@ -984,16 +840,17 @@ DelegationsState = __decorate([
 ], DelegationsState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsState, decorators: [{
             type: Injectable
-        }], propDecorators: { getMyDelegations: [], getAssignedDelegations: [], getDelegation: [], clearSelectedDelegation: [], createDelegation: [], updateDelegation: [], approveDelegation: [], rejectDelegation: [], cancelDelegation: [], getScopeOptions: [], previewScope: [], clearScopePreview: [] } });
+        }], propDecorators: { getMy: [], getAssigned: [], getActive: [], getDetail: [], clearDetail: [], getScopeOptions: [], previewScope: [], clearScopePreview: [], createLegacy: [], createV2: [], updateLegacy: [], updateV2: [], approve: [], reject: [], cancel: [] } });
 
 class DelegationsFacade {
     store = inject(Store);
     // ---------------------------------------------------------------------------
     // Data slices
     // ---------------------------------------------------------------------------
-    myPage = select(DelegationsState.getMyPage);
-    assignedPage = select(DelegationsState.getAssignedPage);
-    selected = select(DelegationsState.getSelected);
+    myPage = select(DelegationsState.getMy);
+    assignedPage = select(DelegationsState.getAssigned);
+    activePage = select(DelegationsState.getActive);
+    detail = select(DelegationsState.getDetail);
     scopeOptions = select(DelegationsState.getScopeOptions);
     scopePreview = select(DelegationsState.getScopePreview);
     loadingActive = select(DelegationsState.getLoadingActive);
@@ -1003,30 +860,30 @@ class DelegationsFacade {
     // ---------------------------------------------------------------------------
     myItems = computed(() => this.myPage()?.items ?? [], ...(ngDevMode ? [{ debugName: "myItems" }] : /* istanbul ignore next */ []));
     assignedItems = computed(() => this.assignedPage()?.items ?? [], ...(ngDevMode ? [{ debugName: "assignedItems" }] : /* istanbul ignore next */ []));
+    activeItems = computed(() => this.activePage()?.items ?? [], ...(ngDevMode ? [{ debugName: "activeItems" }] : /* istanbul ignore next */ []));
     // ---------------------------------------------------------------------------
     // Loading
     // ---------------------------------------------------------------------------
-    isLoadingMy = computed(() => this.loadingActive().includes(DelegationsActionKey.GetMyDelegations), ...(ngDevMode ? [{ debugName: "isLoadingMy" }] : /* istanbul ignore next */ []));
-    isLoadingAssigned = computed(() => this.loadingActive().includes(DelegationsActionKey.GetAssignedDelegations), ...(ngDevMode ? [{ debugName: "isLoadingAssigned" }] : /* istanbul ignore next */ []));
-    isLoadingDetail = computed(() => this.loadingActive().includes(DelegationsActionKey.GetDelegation), ...(ngDevMode ? [{ debugName: "isLoadingDetail" }] : /* istanbul ignore next */ []));
-    isCreating = computed(() => this.loadingActive().includes(DelegationsActionKey.CreateDelegation), ...(ngDevMode ? [{ debugName: "isCreating" }] : /* istanbul ignore next */ []));
-    isUpdating = computed(() => this.loadingActive().includes(DelegationsActionKey.UpdateDelegation), ...(ngDevMode ? [{ debugName: "isUpdating" }] : /* istanbul ignore next */ []));
-    isApproving = computed(() => this.loadingActive().includes(DelegationsActionKey.ApproveDelegation), ...(ngDevMode ? [{ debugName: "isApproving" }] : /* istanbul ignore next */ []));
-    isRejecting = computed(() => this.loadingActive().includes(DelegationsActionKey.RejectDelegation), ...(ngDevMode ? [{ debugName: "isRejecting" }] : /* istanbul ignore next */ []));
-    isCancelling = computed(() => this.loadingActive().includes(DelegationsActionKey.CancelDelegation), ...(ngDevMode ? [{ debugName: "isCancelling" }] : /* istanbul ignore next */ []));
+    isLoadingMy = computed(() => this.loadingActive().includes(DelegationsActionKey.GetMy), ...(ngDevMode ? [{ debugName: "isLoadingMy" }] : /* istanbul ignore next */ []));
+    isLoadingAssigned = computed(() => this.loadingActive().includes(DelegationsActionKey.GetAssigned), ...(ngDevMode ? [{ debugName: "isLoadingAssigned" }] : /* istanbul ignore next */ []));
+    isLoadingActive = computed(() => this.loadingActive().includes(DelegationsActionKey.GetActive), ...(ngDevMode ? [{ debugName: "isLoadingActive" }] : /* istanbul ignore next */ []));
+    isLoadingDetail = computed(() => this.loadingActive().includes(DelegationsActionKey.GetDetail), ...(ngDevMode ? [{ debugName: "isLoadingDetail" }] : /* istanbul ignore next */ []));
     isLoadingScopeOptions = computed(() => this.loadingActive().includes(DelegationsActionKey.GetScopeOptions), ...(ngDevMode ? [{ debugName: "isLoadingScopeOptions" }] : /* istanbul ignore next */ []));
     isPreviewingScope = computed(() => this.loadingActive().includes(DelegationsActionKey.PreviewScope), ...(ngDevMode ? [{ debugName: "isPreviewingScope" }] : /* istanbul ignore next */ []));
+    isSaving = computed(() => this.loadingActive().includes(DelegationsActionKey.Create) ||
+        this.loadingActive().includes(DelegationsActionKey.Update), ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
+    isApproving = computed(() => this.loadingActive().includes(DelegationsActionKey.Approve), ...(ngDevMode ? [{ debugName: "isApproving" }] : /* istanbul ignore next */ []));
+    isRejecting = computed(() => this.loadingActive().includes(DelegationsActionKey.Reject), ...(ngDevMode ? [{ debugName: "isRejecting" }] : /* istanbul ignore next */ []));
+    isCancelling = computed(() => this.loadingActive().includes(DelegationsActionKey.Cancel), ...(ngDevMode ? [{ debugName: "isCancelling" }] : /* istanbul ignore next */ []));
     // ---------------------------------------------------------------------------
     // Errors
     // ---------------------------------------------------------------------------
-    errorMy = computed(() => this.errors()[DelegationsActionKey.GetMyDelegations] ?? null, ...(ngDevMode ? [{ debugName: "errorMy" }] : /* istanbul ignore next */ []));
-    errorAssigned = computed(() => this.errors()[DelegationsActionKey.GetAssignedDelegations] ?? null, ...(ngDevMode ? [{ debugName: "errorAssigned" }] : /* istanbul ignore next */ []));
-    errorDetail = computed(() => this.errors()[DelegationsActionKey.GetDelegation] ?? null, ...(ngDevMode ? [{ debugName: "errorDetail" }] : /* istanbul ignore next */ []));
-    errorCreate = computed(() => this.errors()[DelegationsActionKey.CreateDelegation] ?? null, ...(ngDevMode ? [{ debugName: "errorCreate" }] : /* istanbul ignore next */ []));
-    errorUpdate = computed(() => this.errors()[DelegationsActionKey.UpdateDelegation] ?? null, ...(ngDevMode ? [{ debugName: "errorUpdate" }] : /* istanbul ignore next */ []));
-    errorApprove = computed(() => this.errors()[DelegationsActionKey.ApproveDelegation] ?? null, ...(ngDevMode ? [{ debugName: "errorApprove" }] : /* istanbul ignore next */ []));
-    errorReject = computed(() => this.errors()[DelegationsActionKey.RejectDelegation] ?? null, ...(ngDevMode ? [{ debugName: "errorReject" }] : /* istanbul ignore next */ []));
-    errorCancel = computed(() => this.errors()[DelegationsActionKey.CancelDelegation] ?? null, ...(ngDevMode ? [{ debugName: "errorCancel" }] : /* istanbul ignore next */ []));
+    errorMy = computed(() => this.errors()[DelegationsActionKey.GetMy] ?? null, ...(ngDevMode ? [{ debugName: "errorMy" }] : /* istanbul ignore next */ []));
+    errorAssigned = computed(() => this.errors()[DelegationsActionKey.GetAssigned] ?? null, ...(ngDevMode ? [{ debugName: "errorAssigned" }] : /* istanbul ignore next */ []));
+    errorDetail = computed(() => this.errors()[DelegationsActionKey.GetDetail] ?? null, ...(ngDevMode ? [{ debugName: "errorDetail" }] : /* istanbul ignore next */ []));
+    errorSave = computed(() => this.errors()[DelegationsActionKey.Create] ??
+        this.errors()[DelegationsActionKey.Update] ??
+        null, ...(ngDevMode ? [{ debugName: "errorSave" }] : /* istanbul ignore next */ []));
     // ---------------------------------------------------------------------------
     // Dispatchers
     // ---------------------------------------------------------------------------
@@ -1036,26 +893,14 @@ class DelegationsFacade {
     getAssigned(query = {}) {
         return this.store.dispatch(new GetAssignedDelegations(query));
     }
-    getOne(id, includeStatusHistory = false) {
-        return this.store.dispatch(new GetDelegation(id, includeStatusHistory));
-    }
-    clearSelected() {
-        return this.store.dispatch(new ClearSelectedDelegation());
+    getActive(query = {}) {
+        return this.store.dispatch(new GetActiveAssignedDelegations(query));
     }
-    create(request) {
-        return this.store.dispatch(new CreateDelegation(request));
+    getDetail(id) {
+        return this.store.dispatch(new GetDelegationDetail(id));
     }
-    update(id, request) {
-        return this.store.dispatch(new UpdateDelegation(id, request));
-    }
-    approve(id, request) {
-        return this.store.dispatch(new ApproveDelegation(id, request));
-    }
-    reject(id, request) {
-        return this.store.dispatch(new RejectDelegation(id, request));
-    }
-    cancel(id, request) {
-        return this.store.dispatch(new CancelDelegation(id, request));
+    clearDetail() {
+        return this.store.dispatch(new ClearDelegationDetail());
     }
     loadScopeOptions(delegatorUserId) {
         return this.store.dispatch(new GetScopeOptions(delegatorUserId));
@@ -1066,6 +911,27 @@ class DelegationsFacade {
     clearScopePreview() {
         return this.store.dispatch(new ClearScopePreview());
     }
+    createLegacy(request) {
+        return this.store.dispatch(new CreateDelegationLegacy(request));
+    }
+    createV2(request) {
+        return this.store.dispatch(new CreateDelegationV2(request));
+    }
+    updateLegacy(id, request) {
+        return this.store.dispatch(new UpdateDelegationLegacy(id, request));
+    }
+    updateV2(id, request) {
+        return this.store.dispatch(new UpdateDelegationV2(id, request));
+    }
+    approve(id, request) {
+        return this.store.dispatch(new ApproveDelegation(id, request));
+    }
+    reject(id, request) {
+        return this.store.dispatch(new RejectDelegation(id, request));
+    }
+    cancel(id, rowVersion, asAdmin = false) {
+        return this.store.dispatch(new CancelDelegation(id, rowVersion, asAdmin));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsFacade, providedIn: 'root' });
 }
@@ -1074,92 +940,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-const EMPTY_SCOPE$1 = {
-    mode: 'Explicit',
-    readPolicy: 'ImplicitReadForSelectedActions',
-    accessibilityGroupIds: [],
-    targets: [],
-};
+const EMPTY_SCOPE$1 = { grants: [], metadata: {} };
 function targetKey(t) {
-    return `${t.targetType}:${t.targetId ?? ''}:${t.permissionTargetId ?? ''}:${t.moduleKey}`;
+    return `${t.applicationKey}::${t.targetType}::${t.targetKey}`;
 }
-function requestTargetKey(t) {
-    return `${t.targetType}:${t.targetId ?? ''}:${t.permissionTargetId ?? ''}:${t.moduleKey}`;
+function grantKey(g) {
+    return `${targetKey(g.target)}::${g.action.operationKey}`;
+}
+function normalizeGrant(g) {
+    return {
+        ...g,
+        accessibilities: g.accessibilities ?? [],
+        dataFilters: g.dataFilters ?? [],
+        constraints: g.constraints ?? [],
+    };
 }
 /**
- * Scope picker driven entirely by Identity-provided options.
+ * Grants-based scope picker (doc 03). Driven entirely by `scope/options`:
+ * - lists grantable target/action pairs returned by the backend,
+ * - lets the user toggle each grant,
+ * - calls `scope/preview` (debounced) and surfaces summary / warnings / denied.
  *
- * - `[(scope)]` two-way binds a normalized `DelegationScopeRequest`.
- * - Loads options via `DelegationsFacade.loadScopeOptions()` on init.
- * - Calls `/scope/preview` (debounced) so the user sees the server-built summary
- *   and denied items before they save.
- * - Non-delegable operations render disabled with the BE-supplied `reason`.
+ * `[(scope)]` two-way binds a `DelegationScopeSelection`. The component never
+ * invents permission metadata — it only echoes grants returned by options.
  */
 class ScopePicker {
-    /** Two-way bound — the form drives initial value and reads updates back. */
     scope = model(EMPTY_SCOPE$1, ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    /** Admin scope-as-another-user — passed through to the options endpoint. */
     delegatorUserId = input(undefined, ...(ngDevMode ? [{ debugName: "delegatorUserId" }] : /* istanbul ignore next */ []));
     facade = inject(DelegationsFacade);
-    transloco = inject(TranslocoService);
     options = this.facade.scopeOptions;
     preview = this.facade.scopePreview;
     isLoadingOptions = this.facade.isLoadingScopeOptions;
     isPreviewing = this.facade.isPreviewingScope;
-    /** Set of accordion target keys currently expanded. */
-    expanded = signal(new Set(), ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    readPolicies = computed(() => this.options()?.readPolicies ?? [], ...(ngDevMode ? [{ debugName: "readPolicies" }] : /* istanbul ignore next */ []));
-    /** Flat list of accessibility group options (across modules). */
-    accessibilityGroups = computed(() => {
-        const acc = this.options()?.accessibilities ?? [];
-        return acc.flatMap((a) => a.groups.map((g) => ({
-            appAccessibilityId: a.appAccessibilityId,
-            accessibilityGroupId: g.accessibilityGroupId,
-            moduleName: a.moduleName,
-            groupName: g.name,
-        })));
-    }, ...(ngDevMode ? [{ debugName: "accessibilityGroups" }] : /* istanbul ignore next */ []));
-    /** Targets grouped by `targetType` for the accordion UI. */
-    groupedTargets = computed(() => {
-        const targets = this.options()?.targets ?? [];
-        const map = new Map();
-        for (const t of targets) {
-            const list = map.get(t.targetType) ?? [];
-            list.push(t);
-            map.set(t.targetType, list);
-        }
-        return Array.from(map.entries()).map(([type, items]) => ({
-            type,
-            items,
-        }));
-    }, ...(ngDevMode ? [{ debugName: "groupedTargets" }] : /* istanbul ignore next */ []));
-    /** O(1) lookup: is this accessibility group selected? */
-    selectedAccessibilityIds = computed(() => new Set(this.scope().accessibilityGroupIds ?? []), ...(ngDevMode ? [{ debugName: "selectedAccessibilityIds" }] : /* istanbul ignore next */ []));
-    /** O(1) lookup: which targets are picked, and which ops per target? */
-    selectedTargetMap = computed(() => {
+    /** Grantable options grouped by target. */
+    groups = computed(() => {
+        const grants = this.options()?.grants ?? [];
         const map = new Map();
-        for (const t of this.scope().targets) {
-            const key = requestTargetKey(t);
-            map.set(key, new Set(t.operations.map((op) => op.permissionCommand)));
+        for (const g of grants) {
+            const key = targetKey(g.target);
+            const existing = map.get(key);
+            if (existing) {
+                existing.grants.push(g);
+            }
+            else {
+                map.set(key, { key, target: g.target, grants: [g] });
+            }
         }
-        return map;
-    }, ...(ngDevMode ? [{ debugName: "selectedTargetMap" }] : /* istanbul ignore next */ []));
-    // -------------------------------------------------------------------------
-    // Lifecycle
-    // -------------------------------------------------------------------------
+        return Array.from(map.values());
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /** Selected grant keys for O(1) checkbox state. */
+    selectedKeys = computed(() => new Set(this.scope().grants.map(grantKey)), ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    expanded = signal(new Set(), ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this.facade.loadScopeOptions(this.delegatorUserId());
     }
     constructor() {
-        // Debounced preview: whenever the scope changes, call /scope/preview.
-        // (Skips the empty initial value.)
         let timer = null;
         effect(() => {
             const s = this.scope();
-            const hasContent = s.accessibilityGroupIds.length > 0 || s.targets.length > 0;
             untracked(() => {
-                if (!hasContent) {
+                if (!s.grants.length) {
                     this.facade.clearScopePreview();
                     return;
                 }
@@ -1169,115 +1010,38 @@ class ScopePicker {
             });
         });
     }
-    // -------------------------------------------------------------------------
-    // UI handlers
-    // -------------------------------------------------------------------------
-    setReadPolicy(policy) {
-        if (this.readonly())
-            return;
-        this.scope.update((s) => ({ ...s, readPolicy: policy }));
-    }
-    toggleAccessibility(group) {
-        if (this.readonly())
-            return;
-        this.scope.update((s) => {
-            const ids = new Set(s.accessibilityGroupIds);
-            if (ids.has(group.accessibilityGroupId)) {
-                ids.delete(group.accessibilityGroupId);
-            }
-            else {
-                ids.add(group.accessibilityGroupId);
-            }
-            return { ...s, accessibilityGroupIds: Array.from(ids) };
-        });
-    }
-    isAccessibilitySelected(group) {
-        return this.selectedAccessibilityIds().has(group.accessibilityGroupId);
+    isExpanded(group) {
+        return this.expanded().has(group.key);
     }
-    toggleAccordion(target) {
-        const key = targetKey(target);
+    toggleAccordion(group) {
         const next = new Set(this.expanded());
-        if (next.has(key))
-            next.delete(key);
+        if (next.has(group.key))
+            next.delete(group.key);
         else
-            next.add(key);
+            next.add(group.key);
         this.expanded.set(next);
     }
-    isExpanded(target) {
-        return this.expanded().has(targetKey(target));
+    isSelected(grant) {
+        return this.selectedKeys().has(grantKey(grant));
     }
-    toggleOperation(target, op) {
-        if (this.readonly() || !op.isDelegable)
+    toggleGrant(grant) {
+        if (this.readonly())
             return;
+        const key = grantKey(grant);
         this.scope.update((s) => {
-            const reqKey = `${target.targetType}:${target.targetId ?? ''}:${target.permissionTargetId ?? ''}:${target.moduleKey}`;
-            const targets = [...s.targets];
-            const idx = targets.findIndex((t) => requestTargetKey(t) === reqKey);
-            const baseRequest = {
-                targetType: target.targetType,
-                targetId: target.targetId,
-                levelId: target.levelId,
-                levelModuleId: target.levelModuleId,
-                domainModuleId: target.domainModuleId,
-                moduleKey: target.moduleKey,
-                permissionModuleType: target.permissionModuleType,
-                permissionTargetId: target.permissionTargetId,
-                operations: [],
-            };
-            if (idx === -1) {
-                targets.push({
-                    ...baseRequest,
-                    operations: [
-                        {
-                            operationKey: op.operationKey,
-                            permissionCommand: op.permissionCommand,
-                        },
-                    ],
-                });
-            }
-            else {
-                const current = targets[idx];
-                const opIdx = current.operations.findIndex((o) => o.permissionCommand === op.permissionCommand);
-                if (opIdx === -1) {
-                    targets[idx] = {
-                        ...current,
-                        operations: [
-                            ...current.operations,
-                            {
-                                operationKey: op.operationKey,
-                                permissionCommand: op.permissionCommand,
-                            },
-                        ],
-                    };
-                }
-                else {
-                    const nextOps = current.operations.slice();
-                    nextOps.splice(opIdx, 1);
-                    if (nextOps.length === 0) {
-                        // last op removed — drop the target entirely
-                        targets.splice(idx, 1);
-                    }
-                    else {
-                        targets[idx] = { ...current, operations: nextOps };
-                    }
-                }
-            }
-            return { ...s, targets };
+            const exists = s.grants.some((g) => grantKey(g) === key);
+            const grants = exists
+                ? s.grants.filter((g) => grantKey(g) !== key)
+                : [...s.grants, normalizeGrant(grant)];
+            return { ...s, grants };
         });
     }
-    isOperationSelected(target, op) {
-        const key = `${target.targetType}:${target.targetId ?? ''}:${target.permissionTargetId ?? ''}:${target.moduleKey}`;
-        return (this.selectedTargetMap().get(key)?.has(op.permissionCommand) ?? false);
-    }
-    selectedOpsCount(target) {
-        const key = `${target.targetType}:${target.targetId ?? ''}:${target.permissionTargetId ?? ''}:${target.moduleKey}`;
-        return this.selectedTargetMap().get(key)?.size ?? 0;
-    }
-    reasonLabel(op) {
-        return op.reason ?? this.transloco.translate('delegations.non-delegable-reason');
+    selectedCount(group) {
+        const keys = this.selectedKeys();
+        return group.grants.filter((g) => keys.has(grantKey(g))).length;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ScopePicker, isStandalone: true, selector: "mt-scope-picker", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"mt-scope-picker flex flex-col gap-4\">\r\n    <!-- Loading skeleton -->\r\n    @if (isLoadingOptions() && !options()) {\r\n      <p-skeleton height=\"2rem\"></p-skeleton>\r\n      <p-skeleton height=\"6rem\"></p-skeleton>\r\n      <p-skeleton height=\"6rem\"></p-skeleton>\r\n    } @else if (options(); as opts) {\r\n      <!-- ============================================================ -->\r\n      <!--   Read policy                                                  -->\r\n      <!-- ============================================================ -->\r\n      <section class=\"flex flex-col gap-2\">\r\n        <h4 class=\"text-sm font-medium text-gray-800\">\r\n          {{ t('delegations.read-policy') }}\r\n        </h4>\r\n        <div class=\"flex flex-wrap gap-2\">\r\n          @for (rp of readPolicies(); track rp.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"px-3 py-1.5 rounded-full text-xs border transition-colors cursor-pointer\"\r\n              [class.border-primary]=\"scope().readPolicy === rp.key\"\r\n              [class.bg-primary-50]=\"scope().readPolicy === rp.key\"\r\n              [class.text-primary]=\"scope().readPolicy === rp.key\"\r\n              [class.border-gray-300]=\"scope().readPolicy !== rp.key\"\r\n              [class.text-gray-700]=\"scope().readPolicy !== rp.key\"\r\n              [disabled]=\"readonly()\"\r\n              (click)=\"setReadPolicy(rp.key)\">\r\n              {{ t('delegations.' + (rp.key === 'ImplicitReadForSelectedActions'\r\n                  ? 'implicit-read'\r\n                  : rp.key === 'ExplicitReadOnly'\r\n                    ? 'explicit-read-only'\r\n                    : 'no-read-unless-own-permission')) }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </section>\r\n\r\n      <!-- ============================================================ -->\r\n      <!--   Accessibilities                                              -->\r\n      <!-- ============================================================ -->\r\n      @if (accessibilityGroups().length > 0) {\r\n        <section class=\"flex flex-col gap-2\">\r\n          <h4 class=\"text-sm font-medium text-gray-800\">\r\n            {{ t('delegations.scope') }} \u2014\r\n            {{ t('delegations.delegated-to') }}\r\n          </h4>\r\n          <div class=\"flex flex-wrap gap-2\">\r\n            @for (g of accessibilityGroups(); track g.accessibilityGroupId) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"flex items-center gap-2 px-3 py-1.5 rounded-md text-xs border transition-colors cursor-pointer\"\r\n                [class.border-primary]=\"isAccessibilitySelected(g)\"\r\n                [class.bg-primary-50]=\"isAccessibilitySelected(g)\"\r\n                [class.text-primary]=\"isAccessibilitySelected(g)\"\r\n                [class.border-gray-300]=\"!isAccessibilitySelected(g)\"\r\n                [class.text-gray-700]=\"!isAccessibilitySelected(g)\"\r\n                [disabled]=\"readonly()\"\r\n                (click)=\"toggleAccessibility(g)\">\r\n                @if (isAccessibilitySelected(g)) {\r\n                  <mt-icon icon=\"general.check\" styleClass=\"text-sm\"></mt-icon>\r\n                }\r\n                <span>{{ g.moduleName }} / {{ g.groupName }}</span>\r\n              </button>\r\n            }\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      <!-- ============================================================ -->\r\n      <!--   Targets + operations                                         -->\r\n      <!-- ============================================================ -->\r\n      <section class=\"flex flex-col gap-2\">\r\n        <h4 class=\"text-sm font-medium text-gray-800\">\r\n          {{ t('delegations.target-type') }} /\r\n          {{ t('delegations.operations') }}\r\n        </h4>\r\n\r\n        @if (groupedTargets().length === 0) {\r\n          <p class=\"text-xs text-gray-500\">\r\n            {{ t('delegations.no-targets-selected') }}\r\n          </p>\r\n        }\r\n\r\n        @for (group of groupedTargets(); track group.type) {\r\n          <div class=\"flex flex-col gap-1\">\r\n            <div class=\"text-xs uppercase text-gray-500 tracking-wide px-2\">\r\n              {{ group.type }}\r\n            </div>\r\n            @for (target of group.items; track target.displayName) {\r\n              <div class=\"border border-gray-200 rounded-md overflow-hidden\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex items-center justify-between w-full px-3 py-2 hover:bg-surface-50 cursor-pointer\"\r\n                  (click)=\"toggleAccordion(target)\">\r\n                  <div class=\"flex items-center gap-2 min-w-0\">\r\n                    <mt-icon\r\n                      [icon]=\"\r\n                        isExpanded(target)\r\n                          ? 'arrow.chevron-down'\r\n                          : 'arrow.chevron-right'\r\n                      \"\r\n                      styleClass=\"text-base text-gray-400\"></mt-icon>\r\n                    <span class=\"text-sm text-gray-900 truncate\">\r\n                      {{ target.displayName }}\r\n                    </span>\r\n                  </div>\r\n                  @if (selectedOpsCount(target); as count) {\r\n                    @if (count > 0) {\r\n                      <span\r\n                        class=\"text-xs text-primary font-medium px-2 py-0.5 rounded-full bg-primary-50\">\r\n                        {{ count }}\r\n                      </span>\r\n                    }\r\n                  }\r\n                </button>\r\n\r\n                @if (isExpanded(target)) {\r\n                  <div class=\"flex flex-col gap-1 px-3 py-2 bg-surface-50/40\">\r\n                    @for (op of target.operations; track op.permissionCommand) {\r\n                      <label\r\n                        class=\"flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer\"\r\n                        [class.opacity-60]=\"!op.isDelegable\"\r\n                        [class.cursor-not-allowed]=\"!op.isDelegable\"\r\n                        [class.hover:bg-surface-100]=\"op.isDelegable\"\r\n                        [pTooltip]=\"!op.isDelegable ? reasonLabel(op) : null\"\r\n                        tooltipPosition=\"top\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          [checked]=\"isOperationSelected(target, op)\"\r\n                          [disabled]=\"!op.isDelegable || readonly()\"\r\n                          (change)=\"toggleOperation(target, op)\" />\r\n                        <span class=\"text-sm\">{{ op.displayName }}</span>\r\n                        @if (op.isHighRisk) {\r\n                          <mt-icon\r\n                            icon=\"alert.alert-triangle\"\r\n                            styleClass=\"text-sm text-amber-500\"\r\n                            [pTooltip]=\"t('delegations.high-risk-action')\"\r\n                            tooltipPosition=\"top\"></mt-icon>\r\n                        }\r\n                        @if (!op.isDelegable) {\r\n                          <span class=\"text-xs text-gray-400 ms-auto\">\r\n                            {{ reasonLabel(op) }}\r\n                          </span>\r\n                        }\r\n                      </label>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </section>\r\n\r\n      <!-- ============================================================ -->\r\n      <!--   Preview                                                      -->\r\n      <!-- ============================================================ -->\r\n      <section\r\n        class=\"flex flex-col gap-1 px-3 py-2 rounded-md border border-dashed border-gray-300 bg-surface-50\">\r\n        <div class=\"flex items-center justify-between gap-2\">\r\n          <div class=\"text-xs font-medium text-gray-700\">\r\n            {{ t('delegations.preview-scope') }}\r\n          </div>\r\n          @if (isPreviewing()) {\r\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\r\n          }\r\n        </div>\r\n        @if (preview(); as p) {\r\n          @if (p.isValid) {\r\n            <div class=\"text-sm text-gray-900\">\r\n              {{ p.summary || t('delegations.scope-summary') }}\r\n            </div>\r\n          } @else {\r\n            <div class=\"text-sm text-red-700\">\r\n              {{ t('delegations.scope-preview-invalid') }}\r\n            </div>\r\n          }\r\n          @if (p.warnings.length > 0) {\r\n            <ul class=\"text-xs text-amber-700 list-disc list-inside\">\r\n              @for (w of p.warnings; track w.code) {\r\n                <li>{{ w.message }}</li>\r\n              }\r\n            </ul>\r\n          }\r\n          @if (p.deniedItems.length > 0) {\r\n            <ul class=\"text-xs text-red-700 list-disc list-inside\">\r\n              @for (d of p.deniedItems; track d.permissionCommand) {\r\n                <li>{{ d.message }}</li>\r\n              }\r\n            </ul>\r\n          }\r\n        } @else {\r\n          <div class=\"text-xs text-gray-500\">\r\n            {{ t('delegations.no-operations-selected') }}\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block}.mt-scope-picker input[type=checkbox]{accent-color:var(--p-primary-color, currentColor)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ScopePicker, isStandalone: true, selector: "mt-scope-picker", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"mt-scope-picker flex flex-col gap-4\">\n    @if (isLoadingOptions() && !options()) {\n      <p-skeleton height=\"2rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n    } @else if (options()) {\n      <!-- Targets + actions -->\n      <section class=\"flex flex-col gap-2\">\n        <h4 class=\"text-sm font-medium text-gray-800\">\n          {{ t(\"delegations.scope.permissionsTitle\") }}\n        </h4>\n\n        @if (groups().length === 0) {\n          <p class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noGrantableOptions\") }}\n          </p>\n        }\n\n        @for (group of groups(); track group.key) {\n          <div class=\"border border-gray-200 rounded-md overflow-hidden\">\n            <button\n              type=\"button\"\n              class=\"flex items-center justify-between w-full px-3 py-2 hover:bg-surface-50 cursor-pointer\"\n              (click)=\"toggleAccordion(group)\"\n            >\n              <div class=\"flex items-center gap-2 min-w-0\">\n                <mt-icon\n                  [icon]=\"\n                    isExpanded(group)\n                      ? 'arrow.chevron-down'\n                      : 'arrow.chevron-right'\n                  \"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n                <span class=\"text-sm text-gray-900 truncate\">\n                  {{ group.target.displayName || group.target.targetKey }}\n                </span>\n                <span class=\"text-xs text-gray-400\">\n                  {{ group.target.targetType }}\n                </span>\n              </div>\n              @if (selectedCount(group); as count) {\n                @if (count > 0) {\n                  <span\n                    class=\"text-xs text-primary font-medium px-2 py-0.5 rounded-full bg-primary-50\"\n                  >\n                    {{ count }}\n                  </span>\n                }\n              }\n            </button>\n\n            @if (isExpanded(group)) {\n              <div class=\"flex flex-col gap-1 px-3 py-2 bg-surface-50/40\">\n                @for (grant of group.grants; track grant.action.operationKey) {\n                  <label\n                    class=\"flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer hover:bg-surface-100\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelected(grant)\"\n                      [disabled]=\"readonly()\"\n                      (change)=\"toggleGrant(grant)\"\n                    />\n                    <span class=\"text-sm\">\n                      {{ grant.action.operationKey }}\n                    </span>\n                    @if (grant.action.isHighRisk) {\n                      <mt-icon\n                        icon=\"alert.alert-triangle\"\n                        styleClass=\"text-sm text-amber-500\"\n                        [pTooltip]=\"t('delegations.scope.highRisk')\"\n                        tooltipPosition=\"top\"\n                      ></mt-icon>\n                    }\n                  </label>\n                }\n              </div>\n            }\n          </div>\n        }\n      </section>\n\n      <!-- Preview -->\n      <section\n        class=\"flex flex-col gap-1 px-3 py-2 rounded-md border border-dashed border-gray-300 bg-surface-50\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-xs font-medium text-gray-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm text-gray-900\">\n              {{ p.summary || t(\"delegations.column.scopeSummary\") }}\n            </div>\n          } @else {\n            <div class=\"text-sm text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"text-xs text-amber-700 list-disc list-inside\">\n              @for (w of p.warnings; track w.message) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"text-xs text-red-700 list-disc list-inside\">\n              @for (d of p.deniedItems; track d.operationKey) {\n                <li>\n                  {{ d.targetKey }} / {{ d.operationKey }} \u2014\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block}.mt-scope-picker input[type=checkbox]{accent-color:var(--p-primary-color, currentColor)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, decorators: [{
             type: Component,
@@ -1287,24 +1051,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SkeletonModule,
                         TooltipModule,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"mt-scope-picker flex flex-col gap-4\">\r\n    <!-- Loading skeleton -->\r\n    @if (isLoadingOptions() && !options()) {\r\n      <p-skeleton height=\"2rem\"></p-skeleton>\r\n      <p-skeleton height=\"6rem\"></p-skeleton>\r\n      <p-skeleton height=\"6rem\"></p-skeleton>\r\n    } @else if (options(); as opts) {\r\n      <!-- ============================================================ -->\r\n      <!--   Read policy                                                  -->\r\n      <!-- ============================================================ -->\r\n      <section class=\"flex flex-col gap-2\">\r\n        <h4 class=\"text-sm font-medium text-gray-800\">\r\n          {{ t('delegations.read-policy') }}\r\n        </h4>\r\n        <div class=\"flex flex-wrap gap-2\">\r\n          @for (rp of readPolicies(); track rp.key) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"px-3 py-1.5 rounded-full text-xs border transition-colors cursor-pointer\"\r\n              [class.border-primary]=\"scope().readPolicy === rp.key\"\r\n              [class.bg-primary-50]=\"scope().readPolicy === rp.key\"\r\n              [class.text-primary]=\"scope().readPolicy === rp.key\"\r\n              [class.border-gray-300]=\"scope().readPolicy !== rp.key\"\r\n              [class.text-gray-700]=\"scope().readPolicy !== rp.key\"\r\n              [disabled]=\"readonly()\"\r\n              (click)=\"setReadPolicy(rp.key)\">\r\n              {{ t('delegations.' + (rp.key === 'ImplicitReadForSelectedActions'\r\n                  ? 'implicit-read'\r\n                  : rp.key === 'ExplicitReadOnly'\r\n                    ? 'explicit-read-only'\r\n                    : 'no-read-unless-own-permission')) }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </section>\r\n\r\n      <!-- ============================================================ -->\r\n      <!--   Accessibilities                                              -->\r\n      <!-- ============================================================ -->\r\n      @if (accessibilityGroups().length > 0) {\r\n        <section class=\"flex flex-col gap-2\">\r\n          <h4 class=\"text-sm font-medium text-gray-800\">\r\n            {{ t('delegations.scope') }} \u2014\r\n            {{ t('delegations.delegated-to') }}\r\n          </h4>\r\n          <div class=\"flex flex-wrap gap-2\">\r\n            @for (g of accessibilityGroups(); track g.accessibilityGroupId) {\r\n              <button\r\n                type=\"button\"\r\n                class=\"flex items-center gap-2 px-3 py-1.5 rounded-md text-xs border transition-colors cursor-pointer\"\r\n                [class.border-primary]=\"isAccessibilitySelected(g)\"\r\n                [class.bg-primary-50]=\"isAccessibilitySelected(g)\"\r\n                [class.text-primary]=\"isAccessibilitySelected(g)\"\r\n                [class.border-gray-300]=\"!isAccessibilitySelected(g)\"\r\n                [class.text-gray-700]=\"!isAccessibilitySelected(g)\"\r\n                [disabled]=\"readonly()\"\r\n                (click)=\"toggleAccessibility(g)\">\r\n                @if (isAccessibilitySelected(g)) {\r\n                  <mt-icon icon=\"general.check\" styleClass=\"text-sm\"></mt-icon>\r\n                }\r\n                <span>{{ g.moduleName }} / {{ g.groupName }}</span>\r\n              </button>\r\n            }\r\n          </div>\r\n        </section>\r\n      }\r\n\r\n      <!-- ============================================================ -->\r\n      <!--   Targets + operations                                         -->\r\n      <!-- ============================================================ -->\r\n      <section class=\"flex flex-col gap-2\">\r\n        <h4 class=\"text-sm font-medium text-gray-800\">\r\n          {{ t('delegations.target-type') }} /\r\n          {{ t('delegations.operations') }}\r\n        </h4>\r\n\r\n        @if (groupedTargets().length === 0) {\r\n          <p class=\"text-xs text-gray-500\">\r\n            {{ t('delegations.no-targets-selected') }}\r\n          </p>\r\n        }\r\n\r\n        @for (group of groupedTargets(); track group.type) {\r\n          <div class=\"flex flex-col gap-1\">\r\n            <div class=\"text-xs uppercase text-gray-500 tracking-wide px-2\">\r\n              {{ group.type }}\r\n            </div>\r\n            @for (target of group.items; track target.displayName) {\r\n              <div class=\"border border-gray-200 rounded-md overflow-hidden\">\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex items-center justify-between w-full px-3 py-2 hover:bg-surface-50 cursor-pointer\"\r\n                  (click)=\"toggleAccordion(target)\">\r\n                  <div class=\"flex items-center gap-2 min-w-0\">\r\n                    <mt-icon\r\n                      [icon]=\"\r\n                        isExpanded(target)\r\n                          ? 'arrow.chevron-down'\r\n                          : 'arrow.chevron-right'\r\n                      \"\r\n                      styleClass=\"text-base text-gray-400\"></mt-icon>\r\n                    <span class=\"text-sm text-gray-900 truncate\">\r\n                      {{ target.displayName }}\r\n                    </span>\r\n                  </div>\r\n                  @if (selectedOpsCount(target); as count) {\r\n                    @if (count > 0) {\r\n                      <span\r\n                        class=\"text-xs text-primary font-medium px-2 py-0.5 rounded-full bg-primary-50\">\r\n                        {{ count }}\r\n                      </span>\r\n                    }\r\n                  }\r\n                </button>\r\n\r\n                @if (isExpanded(target)) {\r\n                  <div class=\"flex flex-col gap-1 px-3 py-2 bg-surface-50/40\">\r\n                    @for (op of target.operations; track op.permissionCommand) {\r\n                      <label\r\n                        class=\"flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer\"\r\n                        [class.opacity-60]=\"!op.isDelegable\"\r\n                        [class.cursor-not-allowed]=\"!op.isDelegable\"\r\n                        [class.hover:bg-surface-100]=\"op.isDelegable\"\r\n                        [pTooltip]=\"!op.isDelegable ? reasonLabel(op) : null\"\r\n                        tooltipPosition=\"top\">\r\n                        <input\r\n                          type=\"checkbox\"\r\n                          [checked]=\"isOperationSelected(target, op)\"\r\n                          [disabled]=\"!op.isDelegable || readonly()\"\r\n                          (change)=\"toggleOperation(target, op)\" />\r\n                        <span class=\"text-sm\">{{ op.displayName }}</span>\r\n                        @if (op.isHighRisk) {\r\n                          <mt-icon\r\n                            icon=\"alert.alert-triangle\"\r\n                            styleClass=\"text-sm text-amber-500\"\r\n                            [pTooltip]=\"t('delegations.high-risk-action')\"\r\n                            tooltipPosition=\"top\"></mt-icon>\r\n                        }\r\n                        @if (!op.isDelegable) {\r\n                          <span class=\"text-xs text-gray-400 ms-auto\">\r\n                            {{ reasonLabel(op) }}\r\n                          </span>\r\n                        }\r\n                      </label>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            }\r\n          </div>\r\n        }\r\n      </section>\r\n\r\n      <!-- ============================================================ -->\r\n      <!--   Preview                                                      -->\r\n      <!-- ============================================================ -->\r\n      <section\r\n        class=\"flex flex-col gap-1 px-3 py-2 rounded-md border border-dashed border-gray-300 bg-surface-50\">\r\n        <div class=\"flex items-center justify-between gap-2\">\r\n          <div class=\"text-xs font-medium text-gray-700\">\r\n            {{ t('delegations.preview-scope') }}\r\n          </div>\r\n          @if (isPreviewing()) {\r\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\r\n          }\r\n        </div>\r\n        @if (preview(); as p) {\r\n          @if (p.isValid) {\r\n            <div class=\"text-sm text-gray-900\">\r\n              {{ p.summary || t('delegations.scope-summary') }}\r\n            </div>\r\n          } @else {\r\n            <div class=\"text-sm text-red-700\">\r\n              {{ t('delegations.scope-preview-invalid') }}\r\n            </div>\r\n          }\r\n          @if (p.warnings.length > 0) {\r\n            <ul class=\"text-xs text-amber-700 list-disc list-inside\">\r\n              @for (w of p.warnings; track w.code) {\r\n                <li>{{ w.message }}</li>\r\n              }\r\n            </ul>\r\n          }\r\n          @if (p.deniedItems.length > 0) {\r\n            <ul class=\"text-xs text-red-700 list-disc list-inside\">\r\n              @for (d of p.deniedItems; track d.permissionCommand) {\r\n                <li>{{ d.message }}</li>\r\n              }\r\n            </ul>\r\n          }\r\n        } @else {\r\n          <div class=\"text-xs text-gray-500\">\r\n            {{ t('delegations.no-operations-selected') }}\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block}.mt-scope-picker input[type=checkbox]{accent-color:var(--p-primary-color, currentColor)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"mt-scope-picker flex flex-col gap-4\">\n    @if (isLoadingOptions() && !options()) {\n      <p-skeleton height=\"2rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n    } @else if (options()) {\n      <!-- Targets + actions -->\n      <section class=\"flex flex-col gap-2\">\n        <h4 class=\"text-sm font-medium text-gray-800\">\n          {{ t(\"delegations.scope.permissionsTitle\") }}\n        </h4>\n\n        @if (groups().length === 0) {\n          <p class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noGrantableOptions\") }}\n          </p>\n        }\n\n        @for (group of groups(); track group.key) {\n          <div class=\"border border-gray-200 rounded-md overflow-hidden\">\n            <button\n              type=\"button\"\n              class=\"flex items-center justify-between w-full px-3 py-2 hover:bg-surface-50 cursor-pointer\"\n              (click)=\"toggleAccordion(group)\"\n            >\n              <div class=\"flex items-center gap-2 min-w-0\">\n                <mt-icon\n                  [icon]=\"\n                    isExpanded(group)\n                      ? 'arrow.chevron-down'\n                      : 'arrow.chevron-right'\n                  \"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n                <span class=\"text-sm text-gray-900 truncate\">\n                  {{ group.target.displayName || group.target.targetKey }}\n                </span>\n                <span class=\"text-xs text-gray-400\">\n                  {{ group.target.targetType }}\n                </span>\n              </div>\n              @if (selectedCount(group); as count) {\n                @if (count > 0) {\n                  <span\n                    class=\"text-xs text-primary font-medium px-2 py-0.5 rounded-full bg-primary-50\"\n                  >\n                    {{ count }}\n                  </span>\n                }\n              }\n            </button>\n\n            @if (isExpanded(group)) {\n              <div class=\"flex flex-col gap-1 px-3 py-2 bg-surface-50/40\">\n                @for (grant of group.grants; track grant.action.operationKey) {\n                  <label\n                    class=\"flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer hover:bg-surface-100\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelected(grant)\"\n                      [disabled]=\"readonly()\"\n                      (change)=\"toggleGrant(grant)\"\n                    />\n                    <span class=\"text-sm\">\n                      {{ grant.action.operationKey }}\n                    </span>\n                    @if (grant.action.isHighRisk) {\n                      <mt-icon\n                        icon=\"alert.alert-triangle\"\n                        styleClass=\"text-sm text-amber-500\"\n                        [pTooltip]=\"t('delegations.scope.highRisk')\"\n                        tooltipPosition=\"top\"\n                      ></mt-icon>\n                    }\n                  </label>\n                }\n              </div>\n            }\n          </div>\n        }\n      </section>\n\n      <!-- Preview -->\n      <section\n        class=\"flex flex-col gap-1 px-3 py-2 rounded-md border border-dashed border-gray-300 bg-surface-50\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-xs font-medium text-gray-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm text-gray-900\">\n              {{ p.summary || t(\"delegations.column.scopeSummary\") }}\n            </div>\n          } @else {\n            <div class=\"text-sm text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"text-xs text-amber-700 list-disc list-inside\">\n              @for (w of p.warnings; track w.message) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"text-xs text-red-700 list-disc list-inside\">\n              @for (d of p.deniedItems; track d.operationKey) {\n                <li>\n                  {{ d.targetKey }} / {{ d.operationKey }} \u2014\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block}.mt-scope-picker input[type=checkbox]{accent-color:var(--p-primary-color, currentColor)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }, { type: i0.Output, args: ["scopeChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], delegatorUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegatorUserId", required: false }] }] } });
 
-const EMPTY_SCOPE = {
-    mode: 'Explicit',
-    readPolicy: 'ImplicitReadForSelectedActions',
-    accessibilityGroupIds: [],
-    targets: [],
-};
+const EMPTY_SCOPE = { grants: [], metadata: {} };
 /**
- * Delegation create/edit form, target-shape compliant.
+ * Delegation create/edit form (doc 04). Uses the v2 explicit-scope endpoints so
+ * the persisted `DelegationScopeSelection` matches what scope/preview validated.
  *
- * - Delegator is server-derived from the authenticated principal — not collected
- *   here (admin "create on behalf of" lives behind a separate flag).
- * - `isActive` no longer exists; status is server-calculated.
- * - Scope is collected by `<mt-scope-picker>` (loaded from `/scope/options`)
- *   and validated via `/scope/preview` on every change. Edit mode rehydrates
- *   the scope from the loaded delegation.
+ * - Delegator is server-derived; only the delegated user is collected.
+ * - On edit, scope grants + rowVersion come from the loaded detail.
+ * - Times are sent in UTC ISO; wrappers set timeZoneId = UTC.
  */
 class DelegationForm {
     delegationForEdit = input(null, ...(ngDevMode ? [{ debugName: "delegationForEdit" }] : /* istanbul ignore next */ []));
@@ -1315,64 +1072,54 @@ class DelegationForm {
     ref = inject(ModalRef);
     transloco = inject(TranslocoService);
     facade = inject(DelegationsFacade);
-    // Reactive form
     delegationFormControl = new FormControl();
     formValue = toSignal(this.delegationFormControl.valueChanges);
-    selected = this.facade.selected;
+    detail = this.facade.detail;
     isDetailLoading = this.facade.isLoadingDetail;
-    isSaving = computed(() => this.facade.isCreating() || this.facade.isUpdating(), ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
+    isSaving = this.facade.isSaving;
     context = new HttpContext().set(REQUEST_CONTEXT, { useBaseUrl: false });
-    isDelegatingToSelf = computed(() => {
-        const v = this.formValue();
-        if (!v)
-            return false;
-        const toId = (v.delegatedUser?.id ?? v.delegatedUser);
-        const meId = (this.selected()?.delegator?.id ?? '');
-        return !!toId && !!meId && toId === meId;
-    }, ...(ngDevMode ? [{ debugName: "isDelegatingToSelf" }] : /* istanbul ignore next */ []));
-    // The current scope draft (built outside the form for MVP; placeholder UI).
     scope = signal(EMPTY_SCOPE, ...(ngDevMode ? [{ debugName: "scope" }] : /* istanbul ignore next */ []));
     specificDaysOptions = signal([
-        { label: this.transloco.translate('delegations.sunday'), value: 0 },
-        { label: this.transloco.translate('delegations.monday'), value: 1 },
-        { label: this.transloco.translate('delegations.tuesday'), value: 2 },
-        { label: this.transloco.translate('delegations.wednesday'), value: 3 },
-        { label: this.transloco.translate('delegations.thursday'), value: 4 },
-        { label: this.transloco.translate('delegations.friday'), value: 5 },
-        { label: this.transloco.translate('delegations.saturday'), value: 6 },
+        { label: this.transloco.translate('delegations.days.sunday'), value: 0 },
+        { label: this.transloco.translate('delegations.days.monday'), value: 1 },
+        { label: this.transloco.translate('delegations.days.tuesday'), value: 2 },
+        { label: this.transloco.translate('delegations.days.wednesday'), value: 3 },
+        { label: this.transloco.translate('delegations.days.thursday'), value: 4 },
+        { label: this.transloco.translate('delegations.days.friday'), value: 5 },
+        { label: this.transloco.translate('delegations.days.saturday'), value: 6 },
     ], ...(ngDevMode ? [{ debugName: "specificDaysOptions" }] : /* istanbul ignore next */ []));
-    delegationFormConfig = computed(() => ({
+    formConfig = computed(() => ({
         sections: [
             {
-                key: 'delegationFormConfig',
+                key: 'delegationForm',
                 type: 'header',
                 bodyClass: 'grid grid-cols-1 gap-4 items-start lg:grid-cols-12',
                 order: 1,
                 fields: [
                     new UserSearchFieldConfig({
-                        key: 'delegatedUser',
-                        label: this.transloco.translate('delegations.delegated-to'),
+                        key: 'delegateTo',
+                        label: this.transloco.translate('delegations.column.delegatedTo'),
                         apiUrl: 'Identity/users',
                         context: this.context,
                         validators: [ValidatorConfig.required()],
                         cssClass: this.halfWidth,
                         colSpan: 6,
                         order: 1,
-                        disabled: this.readonly() || !!this.delegationForEdit()?.id,
+                        disabled: this.readonly() || !!this.delegationForEdit(),
                     }),
                     new TextareaFieldConfig({
                         key: 'description',
-                        label: this.transloco.translate('delegations.description'),
-                        placeholder: this.transloco.translate('delegations.description'),
+                        label: this.transloco.translate('delegations.form.description'),
+                        placeholder: this.transloco.translate('delegations.form.description'),
                         cssClass: this.fullWidth,
                         colSpan: 12,
                         order: 2,
                         disabled: this.readonly(),
                     }),
                     new DateFieldConfig({
-                        key: 'startDateUtc',
-                        label: this.transloco.translate('delegations.delegation-date-from'),
-                        placeholder: this.transloco.translate('delegations.delegation-date-from'),
+                        key: 'delegateFromDateTime',
+                        label: this.transloco.translate('delegations.column.startDate'),
+                        placeholder: this.transloco.translate('delegations.column.startDate'),
                         validators: [ValidatorConfig.required()],
                         showTime: true,
                         cssClass: this.halfWidth,
@@ -1381,9 +1128,9 @@ class DelegationForm {
                         disabled: this.readonly(),
                     }),
                     new DateFieldConfig({
-                        key: 'endDateUtc',
-                        label: this.transloco.translate('delegations.delegation-date-to'),
-                        placeholder: this.transloco.translate('delegations.delegation-date-to'),
+                        key: 'delegateToDateTime',
+                        label: this.transloco.translate('delegations.column.endDate'),
+                        placeholder: this.transloco.translate('delegations.column.endDate'),
                         validators: [ValidatorConfig.required()],
                         showTime: true,
                         cssClass: this.halfWidth,
@@ -1392,15 +1139,15 @@ class DelegationForm {
                         disabled: this.readonly(),
                     }),
                     new RadioButtonFieldConfig({
-                        key: 'dayRulesType',
-                        label: this.transloco.translate('delegations.delegation-days-apply'),
+                        key: 'delegationDaysType',
+                        label: this.transloco.translate('delegations.form.daysApply'),
                         options: [
                             {
-                                label: this.transloco.translate('delegations.full-range'),
+                                label: this.transloco.translate('delegations.form.fullRange'),
                                 value: 'FullRange',
                             },
                             {
-                                label: this.transloco.translate('delegations.specific-days'),
+                                label: this.transloco.translate('delegations.form.specificDays'),
                                 value: 'SpecificDays',
                             },
                         ],
@@ -1414,13 +1161,17 @@ class DelegationForm {
                     }),
                     new MultiSelectFieldConfig({
                         key: 'specificDays',
-                        label: this.transloco.translate('delegations.specific-days'),
+                        label: this.transloco.translate('delegations.form.specificDays'),
                         options: this.specificDaysOptions(),
                         optionLabel: 'label',
                         optionValue: 'value',
                         maxSelectedLabels: 7,
                         relations: [
-                            { key: 'dayRulesType', value: 'SpecificDays', action: 'show' },
+                            {
+                                key: 'delegationDaysType',
+                                value: 'SpecificDays',
+                                action: 'show',
+                            },
                         ],
                         cssClass: this.fullWidth,
                         colSpan: 12,
@@ -1429,7 +1180,7 @@ class DelegationForm {
                     }),
                     new ToggleFieldConfig({
                         key: 'requiresApproval',
-                        label: this.transloco.translate('delegations.requires-approval'),
+                        label: this.transloco.translate('delegations.form.requiresApproval'),
                         cssClass: `${this.fullWidth} mt-2`,
                         order: 7,
                         disabled: this.readonly(),
@@ -1437,47 +1188,29 @@ class DelegationForm {
                 ],
             },
         ],
-    }), ...(ngDevMode ? [{ debugName: "delegationFormConfig" }] : /* istanbul ignore next */ []));
+    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
-            const id = this.delegationForEdit()?.id;
-            const d = this.selected();
-            if (id && d) {
+            const editing = this.delegationForEdit();
+            const d = this.detail();
+            if (editing && d && d.row.delegationId === editing.delegationId) {
                 this.delegationFormControl.patchValue({
-                    delegatedUser: d.delegatedUser,
-                    description: d.description,
-                    startDateUtc: d.startDateUtc,
-                    endDateUtc: d.endDateUtc,
-                    dayRulesType: d.dayRules?.type ?? 'FullRange',
-                    specificDays: d.dayRules?.specificDays ?? [],
-                    requiresApproval: d.requiresApproval ?? true,
+                    delegateTo: d.row.delegatedUser,
+                    description: '',
+                    delegateFromDateTime: d.row.startsAtUtc,
+                    delegateToDateTime: d.row.endsAtUtc,
+                    delegationDaysType: d.row.dayRuleMode,
+                    specificDays: d.row.specificDays ?? [],
+                    requiresApproval: d.row.approval?.requiresApproval ?? false,
+                });
+                this.scope.set({
+                    grants: d.scope?.grants ?? [],
+                    metadata: d.scope?.metadata ?? {},
                 });
-                // Snapshot existing scope so we round-trip it on save until the picker ships.
-                if (d.scope) {
-                    this.scope.set({
-                        mode: 'Explicit',
-                        readPolicy: d.scope.readPolicy,
-                        accessibilityGroupIds: d.scope.accessibilities.map((a) => a.accessibilityGroupId),
-                        targets: d.scope.targets.map((t) => ({
-                            targetType: t.targetType,
-                            targetId: t.targetId,
-                            levelId: t.levelId,
-                            levelModuleId: t.levelModuleId,
-                            domainModuleId: t.domainModuleId,
-                            moduleKey: t.moduleKey,
-                            permissionModuleType: t.permissionModuleType,
-                            permissionTargetId: t.permissionTargetId,
-                            operations: t.operations.map((op) => ({
-                                operationKey: op.operationKey,
-                                permissionCommand: op.permissionCommand,
-                            })),
-                        })),
-                    });
-                }
             }
-            else if (!id) {
+            else if (!editing) {
                 this.delegationFormControl.reset({
-                    dayRulesType: 'FullRange',
+                    delegationDaysType: 'FullRange',
                     requiresApproval: true,
                 });
                 this.scope.set(EMPTY_SCOPE);
@@ -1485,51 +1218,47 @@ class DelegationForm {
         });
     }
     ngOnInit() {
-        const id = this.delegationForEdit()?.id;
-        if (id) {
-            this.facade.getOne(id, true);
+        const editing = this.delegationForEdit();
+        if (editing) {
+            this.facade.getDetail(editing.delegationId);
         }
     }
+    canSubmit = computed(() => !this.readonly() && this.scope().grants.length > 0, ...(ngDevMode ? [{ debugName: "canSubmit" }] : /* istanbul ignore next */ []));
     onSubmit() {
         if (this.readonly() || !this.delegationFormControl.valid)
             return;
+        if (this.scope().grants.length === 0)
+            return;
         const v = this.delegationFormControl.value;
-        const tz = Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
-        const editing = this.delegationForEdit();
         const base = {
+            delegateTo: v?.delegateTo?.userId ?? v?.delegateTo?.id ?? v?.delegateTo,
             description: v?.description,
-            startDateUtc: v?.startDateUtc,
-            endDateUtc: v?.endDateUtc,
-            timeZoneId: tz,
-            dayRules: {
-                type: (v?.dayRulesType ?? 'FullRange'),
-                specificDays: v?.dayRulesType === 'SpecificDays' ? (v?.specificDays ?? []) : [],
-            },
+            delegateFromDateTime: v?.delegateFromDateTime,
+            delegateToDateTime: v?.delegateToDateTime,
+            delegationDaysType: (v?.delegationDaysType ?? 'FullRange'),
+            specificDays: v?.delegationDaysType === 'SpecificDays' ? (v?.specificDays ?? []) : [],
+            requiresApproval: !!v?.requiresApproval,
             scope: this.scope(),
         };
-        if (editing?.id) {
+        const editing = this.delegationForEdit();
+        if (editing) {
             const req = {
                 ...base,
                 rowVersion: editing.rowVersion,
-                requiresApproval: v?.requiresApproval,
             };
-            this.facade.update(editing.id, req).subscribe({
+            this.facade.updateV2(editing.delegationId, req).subscribe({
                 next: () => this.ref.close(true),
             });
         }
         else {
-            const req = {
-                ...base,
-                delegatedUserId: v?.delegatedUser?.id ?? v?.delegatedUser,
-                requiresApproval: !!v?.requiresApproval,
-            };
-            this.facade.create(req).subscribe({
+            const req = base;
+            this.facade.createV2(req).subscribe({
                 next: () => this.ref.close(true),
             });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationForm, isStandalone: true, selector: "mt-delegation-form", inputs: { delegationForEdit: { classPropertyName: "delegationForEdit", publicName: "delegationForEdit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'delegations'\">\r\n  <div\r\n    [class]=\"\r\n      'delegation-form-content flex min-w-0 flex-col gap-3 overflow-x-hidden p-4 max-[640px]:p-3 ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    <mt-dynamic-form\r\n      [formConfig]=\"delegationFormConfig()\"\r\n      [formControl]=\"delegationFormControl\"\r\n    />\r\n\r\n    <div class=\"mt-2 border-t border-gray-200 pt-3 flex flex-col gap-2\">\r\n      <h3 class=\"text-sm font-semibold text-gray-800\">\r\n        {{ t(\"scope\") }}\r\n      </h3>\r\n      <mt-scope-picker\r\n        [(scope)]=\"scope\"\r\n        [readonly]=\"readonly()\"\r\n      ></mt-scope-picker>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    [class]=\"\r\n      'delegation-form-footer ' +\r\n      modal.footerClass +\r\n      ' flex-col gap-2 sm:flex-row sm:items-center sm:justify-end'\r\n    \"\r\n  >\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      (click)=\"ref.close()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n    />\r\n    @if (!readonly()) {\r\n      <mt-button\r\n        [label]=\"delegationForEdit() ? t('update') : t('create')\"\r\n        [loading]=\"isSaving()\"\r\n        [disabled]=\"!delegationFormControl.valid || isDelegatingToSelf()\"\r\n        (click)=\"onSubmit()\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n      />\r\n    }\r\n  </div>\r\n</ng-container>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScopePicker, selector: "mt-scope-picker", inputs: ["scope", "readonly", "delegatorUserId"], outputs: ["scopeChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationForm, isStandalone: true, selector: "mt-delegation-form", inputs: { delegationForEdit: { classPropertyName: "delegationForEdit", publicName: "delegationForEdit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      'delegation-form-content flex min-w-0 flex-col gap-3 overflow-x-hidden p-4 max-[640px]:p-3 ' +\n      modal.contentClass\n    \"\n  >\n    <mt-dynamic-form\n      [formConfig]=\"formConfig()\"\n      [formControl]=\"delegationFormControl\"\n    />\n\n    <div class=\"mt-2 border-t border-gray-200 pt-3 flex flex-col gap-2\">\n      <h3 class=\"text-sm font-semibold text-gray-800\">\n        {{ t(\"delegations.scope.permissionsTitle\") }}\n      </h3>\n      <mt-scope-picker\n        [(scope)]=\"scope\"\n        [readonly]=\"readonly()\"\n      ></mt-scope-picker>\n    </div>\n  </div>\n\n  <div\n    [class]=\"\n      'delegation-form-footer ' +\n      modal.footerClass +\n      ' flex-col gap-2 sm:flex-row sm:items-center sm:justify-end'\n    \"\n  >\n    <mt-button\n      [label]=\"t('delegations.common.cancel')\"\n      variant=\"outlined\"\n      (click)=\"ref.close()\"\n      styleClass=\"w-full sm:w-auto\"\n    />\n    @if (!readonly()) {\n      <mt-button\n        [label]=\"\n          delegationForEdit()\n            ? t('delegations.common.update')\n            : t('delegations.common.create')\n        \"\n        [loading]=\"isSaving()\"\n        [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\n        (click)=\"onSubmit()\"\n        styleClass=\"w-full sm:w-auto\"\n      />\n    }\n  </div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScopePicker, selector: "mt-scope-picker", inputs: ["scope", "readonly", "delegatorUserId"], outputs: ["scopeChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationForm, decorators: [{
             type: Component,
@@ -1540,40 +1269,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ReactiveFormsModule,
                         ScopePicker,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'delegations'\">\r\n  <div\r\n    [class]=\"\r\n      'delegation-form-content flex min-w-0 flex-col gap-3 overflow-x-hidden p-4 max-[640px]:p-3 ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    <mt-dynamic-form\r\n      [formConfig]=\"delegationFormConfig()\"\r\n      [formControl]=\"delegationFormControl\"\r\n    />\r\n\r\n    <div class=\"mt-2 border-t border-gray-200 pt-3 flex flex-col gap-2\">\r\n      <h3 class=\"text-sm font-semibold text-gray-800\">\r\n        {{ t(\"scope\") }}\r\n      </h3>\r\n      <mt-scope-picker\r\n        [(scope)]=\"scope\"\r\n        [readonly]=\"readonly()\"\r\n      ></mt-scope-picker>\r\n    </div>\r\n  </div>\r\n\r\n  <div\r\n    [class]=\"\r\n      'delegation-form-footer ' +\r\n      modal.footerClass +\r\n      ' flex-col gap-2 sm:flex-row sm:items-center sm:justify-end'\r\n    \"\r\n  >\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      (click)=\"ref.close()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n    />\r\n    @if (!readonly()) {\r\n      <mt-button\r\n        [label]=\"delegationForEdit() ? t('update') : t('create')\"\r\n        [loading]=\"isSaving()\"\r\n        [disabled]=\"!delegationFormControl.valid || isDelegatingToSelf()\"\r\n        (click)=\"onSubmit()\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n      />\r\n    }\r\n  </div>\r\n</ng-container>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      'delegation-form-content flex min-w-0 flex-col gap-3 overflow-x-hidden p-4 max-[640px]:p-3 ' +\n      modal.contentClass\n    \"\n  >\n    <mt-dynamic-form\n      [formConfig]=\"formConfig()\"\n      [formControl]=\"delegationFormControl\"\n    />\n\n    <div class=\"mt-2 border-t border-gray-200 pt-3 flex flex-col gap-2\">\n      <h3 class=\"text-sm font-semibold text-gray-800\">\n        {{ t(\"delegations.scope.permissionsTitle\") }}\n      </h3>\n      <mt-scope-picker\n        [(scope)]=\"scope\"\n        [readonly]=\"readonly()\"\n      ></mt-scope-picker>\n    </div>\n  </div>\n\n  <div\n    [class]=\"\n      'delegation-form-footer ' +\n      modal.footerClass +\n      ' flex-col gap-2 sm:flex-row sm:items-center sm:justify-end'\n    \"\n  >\n    <mt-button\n      [label]=\"t('delegations.common.cancel')\"\n      variant=\"outlined\"\n      (click)=\"ref.close()\"\n      styleClass=\"w-full sm:w-auto\"\n    />\n    @if (!readonly()) {\n      <mt-button\n        [label]=\"\n          delegationForEdit()\n            ? t('delegations.common.update')\n            : t('delegations.common.create')\n        \"\n        [loading]=\"isSaving()\"\n        [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\n        (click)=\"onSubmit()\"\n        styleClass=\"w-full sm:w-auto\"\n      />\n    }\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { delegationForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegationForEdit", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
 /**
- * Read-only drawer that shows the full server DTO of a delegation, including
- * its status history. Triggered from the row's "View details" action.
+ * Read-only drawer that shows the full `DelegationDetail` ({ row, scope, status }).
  */
 class DelegationDetailDrawer {
-    /** Delegation id passed in via the modal's inputValues. */
     delegationId = input.required(...(ngDevMode ? [{ debugName: "delegationId" }] : /* istanbul ignore next */ []));
     facade = inject(DelegationsFacade);
     transloco = inject(TranslocoService);
     ref = inject(ModalRef);
     tabs = [
-        { key: 'overview', i18n: 'delegations.view-details' },
-        { key: 'scope', i18n: 'delegations.scope' },
-        { key: 'history', i18n: 'delegations.status-history' },
+        { key: 'overview', i18n: 'delegations.action.view' },
+        { key: 'scope', i18n: 'delegations.column.scopeSummary' },
     ];
     activeTab = signal('overview', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     isLoading = this.facade.isLoadingDetail;
-    detail = this.facade.selected;
-    statusHistory = computed(() => this.detail()?.statusHistory ?? [], ...(ngDevMode ? [{ debugName: "statusHistory" }] : /* istanbul ignore next */ []));
+    detail = this.facade.detail;
+    row = computed(() => this.detail()?.row ?? null, ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
     ngOnInit() {
-        this.facade.getOne(this.delegationId(), true);
+        this.facade.getDetail(this.delegationId());
     }
     setTab(tab) {
         this.activeTab.set(tab);
     }
     approvalLabel() {
-        const s = this.detail()?.approval?.status ?? 'NotRequired';
-        return this.transloco.translate(`delegations.approval-${s.toLowerCase()}`);
+        const s = this.row()?.approval?.approvalStatus ?? 'NotRequired';
+        return this.transloco.translate(`delegations.approvalStatus.${s}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col h-full\">\r\n    <!-- Tabs -->\r\n    <div class=\"flex border-b border-gray-200 px-4\">\r\n      @for (tab of tabs; track tab.key) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\r\n          [class.border-primary]=\"activeTab() === tab.key\"\r\n          [class.text-primary]=\"activeTab() === tab.key\"\r\n          [class.border-transparent]=\"activeTab() !== tab.key\"\r\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\r\n          (click)=\"setTab(tab.key)\"\r\n        >\r\n          {{ t(tab.i18n) }}\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Body -->\r\n    <div class=\"flex-1 overflow-y-auto p-4\">\r\n      @if (isLoading() && !detail()) {\r\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\"></p-skeleton>\r\n      } @else if (detail(); as d) {\r\n        @switch (activeTab()) {\r\n          @case ('overview') {\r\n            <div class=\"flex flex-col gap-4\">\r\n              <div class=\"flex items-center justify-between gap-3\">\r\n                <div class=\"flex items-center gap-3 min-w-0\">\r\n                  <mt-avatar\r\n                    [image]=\"d.delegator.photo || ''\"\r\n                    icon=\"user.user-01\"\r\n                    styleClass=\"w-12! h-12! text-lg!\"\r\n                  ></mt-avatar>\r\n                  <div class=\"flex flex-col min-w-0\">\r\n                    <div class=\"text-xs text-gray-500\">\r\n                      {{ t(\"delegations.delegator-name\") }}\r\n                    </div>\r\n                    <div class=\"text-base font-medium text-gray-900 truncate\">\r\n                      {{ d.delegator.displayName }}\r\n                    </div>\r\n                    @if (d.delegator.email) {\r\n                      <div class=\"text-xs text-gray-500 truncate\">\r\n                        {{ d.delegator.email }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <mt-delegation-status-chip\r\n                  [status]=\"d.status\"\r\n                ></mt-delegation-status-chip>\r\n              </div>\r\n\r\n              <div class=\"grid grid-cols-2 gap-4\">\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.delegated-to\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    {{ d.delegatedUser.displayName }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.approval\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    {{ approvalLabel() }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.start-date\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    {{ d.startDateUtc | date: \"medium\" }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.end-date\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    {{ d.endDateUtc | date: \"medium\" }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.time-zone\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    {{ d.timeZoneId }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.days\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    @if (d.dayRules.type === \"FullRange\") {\r\n                      {{ t(\"delegations.all-days\") }}\r\n                    } @else if (d.dayRules.specificDayLabels?.length) {\r\n                      {{ d.dayRules.specificDayLabels?.join(\", \") }}\r\n                    } @else {\r\n                      {{ d.dayRules.specificDays.join(\", \") }}\r\n                    }\r\n                  </span>\r\n                </div>\r\n              </div>\r\n\r\n              @if (d.description) {\r\n                <div class=\"flex flex-col gap-1\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.description\") }}\r\n                  </span>\r\n                  <p class=\"text-sm text-gray-900 whitespace-pre-line\">\r\n                    {{ d.description }}\r\n                  </p>\r\n                </div>\r\n              }\r\n\r\n              @if (d.approval.rejectionReason) {\r\n                <div\r\n                  class=\"rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800\"\r\n                >\r\n                  <div class=\"font-medium\">\r\n                    {{ t(\"delegations.rejection-reason\") }}\r\n                  </div>\r\n                  <div>{{ d.approval.rejectionReason }}</div>\r\n                </div>\r\n              }\r\n\r\n              @if (d.cancellation.cancellationReason) {\r\n                <div\r\n                  class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\r\n                >\r\n                  <div class=\"font-medium\">\r\n                    {{ t(\"delegations.cancel-reason\") }}\r\n                  </div>\r\n                  <div>{{ d.cancellation.cancellationReason }}</div>\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @case ('scope') {\r\n            <div class=\"flex flex-col gap-3\">\r\n              <div class=\"text-sm text-gray-900\">\r\n                {{ d.scope.summary || t(\"delegations.scope-summary\") }}\r\n              </div>\r\n\r\n              @if (d.scope.accessibilities.length > 0) {\r\n                <div class=\"flex flex-col gap-1\">\r\n                  <div class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.delegated-to\") }}\r\n                  </div>\r\n                  <div class=\"flex flex-wrap gap-1.5\">\r\n                    @for (a of d.scope.accessibilities; track a.accessibilityGroupId) {\r\n                      <span\r\n                        class=\"text-xs px-2 py-0.5 rounded-md bg-surface-100 text-gray-700\"\r\n                      >\r\n                        {{ a.moduleName }} / {{ a.groupName }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              <div class=\"flex flex-col gap-2\">\r\n                @for (target of d.scope.targets; track target.displayName) {\r\n                  <div\r\n                    class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\r\n                  >\r\n                    <div class=\"flex items-center justify-between gap-2\">\r\n                      <span class=\"text-sm font-medium text-gray-900\">\r\n                        {{ target.displayName }}\r\n                      </span>\r\n                      <span class=\"text-xs text-gray-500\">\r\n                        {{ target.targetType }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"flex flex-wrap gap-1.5\">\r\n                      @for (op of target.operations; track op.permissionCommand) {\r\n                        <span\r\n                          class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary\"\r\n                        >\r\n                          {{ op.displayName }}\r\n                          @if (op.isHighRisk) {\r\n                            <mt-icon\r\n                              icon=\"alert.alert-triangle\"\r\n                              styleClass=\"text-xs text-amber-500\"\r\n                            ></mt-icon>\r\n                          }\r\n                        </span>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                @if (d.scope.targets.length === 0) {\r\n                  <p class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.no-targets-selected\") }}\r\n                  </p>\r\n                }\r\n              </div>\r\n\r\n              @if (d.scope.warnings.length > 0) {\r\n                <ul class=\"text-xs text-amber-700 list-disc list-inside\">\r\n                  @for (w of d.scope.warnings; track w.code) {\r\n                    <li>{{ w.message }}</li>\r\n                  }\r\n                </ul>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @case ('history') {\r\n            <ol class=\"flex flex-col gap-2\">\r\n              @for (entry of statusHistory(); track entry.id) {\r\n                <li\r\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\r\n                >\r\n                  <div class=\"flex items-center justify-between gap-2\">\r\n                    <span class=\"text-sm font-medium text-gray-900\">\r\n                      {{ entry.action }}\r\n                    </span>\r\n                    <span class=\"text-xs text-gray-500\">\r\n                      {{ entry.createdAtUtc | date: \"short\" }}\r\n                    </span>\r\n                  </div>\r\n                  <div class=\"flex items-center gap-2 text-xs text-gray-600\">\r\n                    @if (entry.fromStatus) {\r\n                      <span>{{ entry.fromStatus }}</span>\r\n                      <mt-icon\r\n                        icon=\"arrow.arrow-right\"\r\n                        styleClass=\"text-xs text-gray-400\"\r\n                      ></mt-icon>\r\n                    }\r\n                    <span>{{ entry.toStatus }}</span>\r\n                  </div>\r\n                  <div class=\"text-xs text-gray-700\">\r\n                    {{ t(\"delegations.delegator-name\") }}:\r\n                    {{ entry.actor.displayName }}\r\n                  </div>\r\n                  @if (entry.reason) {\r\n                    <div class=\"text-xs text-gray-600\">\r\n                      {{ t(\"delegations.reason\") }}: {{ entry.reason }}\r\n                    </div>\r\n                  }\r\n                </li>\r\n              }\r\n              @if (statusHistory().length === 0) {\r\n                <li class=\"text-xs text-gray-500\">\r\n                  {{ t(\"delegations.status-history\") }} \u2014\r\n                  {{ t(\"delegations.no-operations-selected\") }}\r\n                </li>\r\n              }\r\n            </ol>\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\r\n    >\r\n      <mt-button\r\n        [label]=\"t('cancel')\"\r\n        variant=\"outlined\"\r\n        (click)=\"ref.close()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track tab.key) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-avatar\n                  icon=\"user.user-01\"\n                  styleClass=\"w-12! h-12! text-lg!\"\n                ></mt-avatar>\n                <div class=\"flex flex-col min-w-0\">\n                  <div class=\"text-xs text-gray-500\">\n                    {{ t(\"delegations.column.delegatorName\") }}\n                  </div>\n                  <div class=\"text-base font-medium text-gray-900 truncate\">\n                    {{ d.row.delegator.displayName }}\n                  </div>\n                  @if (d.row.delegator.email) {\n                    <div class=\"text-xs text-gray-500 truncate\">\n                      {{ d.row.delegator.email }}\n                    </div>\n                  }\n                </div>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.delegatedTo\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.delegatedUser.displayName }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{ d.row.scopeSummary || t(\"delegations.column.scopeSummary\") }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ grant.target.displayName || grant.target.targetKey }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ grant.action.operationKey }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, decorators: [{
             type: Component,
@@ -1581,29 +1307,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         CommonModule,
                         Avatar,
                         Button,
-                        Icon,
                         SkeletonModule,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col h-full\">\r\n    <!-- Tabs -->\r\n    <div class=\"flex border-b border-gray-200 px-4\">\r\n      @for (tab of tabs; track tab.key) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\r\n          [class.border-primary]=\"activeTab() === tab.key\"\r\n          [class.text-primary]=\"activeTab() === tab.key\"\r\n          [class.border-transparent]=\"activeTab() !== tab.key\"\r\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\r\n          (click)=\"setTab(tab.key)\"\r\n        >\r\n          {{ t(tab.i18n) }}\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <!-- Body -->\r\n    <div class=\"flex-1 overflow-y-auto p-4\">\r\n      @if (isLoading() && !detail()) {\r\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\"></p-skeleton>\r\n      } @else if (detail(); as d) {\r\n        @switch (activeTab()) {\r\n          @case ('overview') {\r\n            <div class=\"flex flex-col gap-4\">\r\n              <div class=\"flex items-center justify-between gap-3\">\r\n                <div class=\"flex items-center gap-3 min-w-0\">\r\n                  <mt-avatar\r\n                    [image]=\"d.delegator.photo || ''\"\r\n                    icon=\"user.user-01\"\r\n                    styleClass=\"w-12! h-12! text-lg!\"\r\n                  ></mt-avatar>\r\n                  <div class=\"flex flex-col min-w-0\">\r\n                    <div class=\"text-xs text-gray-500\">\r\n                      {{ t(\"delegations.delegator-name\") }}\r\n                    </div>\r\n                    <div class=\"text-base font-medium text-gray-900 truncate\">\r\n                      {{ d.delegator.displayName }}\r\n                    </div>\r\n                    @if (d.delegator.email) {\r\n                      <div class=\"text-xs text-gray-500 truncate\">\r\n                        {{ d.delegator.email }}\r\n                      </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n                <mt-delegation-status-chip\r\n                  [status]=\"d.status\"\r\n                ></mt-delegation-status-chip>\r\n              </div>\r\n\r\n              <div class=\"grid grid-cols-2 gap-4\">\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.delegated-to\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    {{ d.delegatedUser.displayName }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.approval\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    {{ approvalLabel() }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.start-date\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    {{ d.startDateUtc | date: \"medium\" }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.end-date\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    {{ d.endDateUtc | date: \"medium\" }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.time-zone\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    {{ d.timeZoneId }}\r\n                  </span>\r\n                </div>\r\n                <div class=\"flex flex-col\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.days\") }}\r\n                  </span>\r\n                  <span class=\"text-sm text-gray-900\">\r\n                    @if (d.dayRules.type === \"FullRange\") {\r\n                      {{ t(\"delegations.all-days\") }}\r\n                    } @else if (d.dayRules.specificDayLabels?.length) {\r\n                      {{ d.dayRules.specificDayLabels?.join(\", \") }}\r\n                    } @else {\r\n                      {{ d.dayRules.specificDays.join(\", \") }}\r\n                    }\r\n                  </span>\r\n                </div>\r\n              </div>\r\n\r\n              @if (d.description) {\r\n                <div class=\"flex flex-col gap-1\">\r\n                  <span class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.description\") }}\r\n                  </span>\r\n                  <p class=\"text-sm text-gray-900 whitespace-pre-line\">\r\n                    {{ d.description }}\r\n                  </p>\r\n                </div>\r\n              }\r\n\r\n              @if (d.approval.rejectionReason) {\r\n                <div\r\n                  class=\"rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800\"\r\n                >\r\n                  <div class=\"font-medium\">\r\n                    {{ t(\"delegations.rejection-reason\") }}\r\n                  </div>\r\n                  <div>{{ d.approval.rejectionReason }}</div>\r\n                </div>\r\n              }\r\n\r\n              @if (d.cancellation.cancellationReason) {\r\n                <div\r\n                  class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\r\n                >\r\n                  <div class=\"font-medium\">\r\n                    {{ t(\"delegations.cancel-reason\") }}\r\n                  </div>\r\n                  <div>{{ d.cancellation.cancellationReason }}</div>\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @case ('scope') {\r\n            <div class=\"flex flex-col gap-3\">\r\n              <div class=\"text-sm text-gray-900\">\r\n                {{ d.scope.summary || t(\"delegations.scope-summary\") }}\r\n              </div>\r\n\r\n              @if (d.scope.accessibilities.length > 0) {\r\n                <div class=\"flex flex-col gap-1\">\r\n                  <div class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.delegated-to\") }}\r\n                  </div>\r\n                  <div class=\"flex flex-wrap gap-1.5\">\r\n                    @for (a of d.scope.accessibilities; track a.accessibilityGroupId) {\r\n                      <span\r\n                        class=\"text-xs px-2 py-0.5 rounded-md bg-surface-100 text-gray-700\"\r\n                      >\r\n                        {{ a.moduleName }} / {{ a.groupName }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                </div>\r\n              }\r\n\r\n              <div class=\"flex flex-col gap-2\">\r\n                @for (target of d.scope.targets; track target.displayName) {\r\n                  <div\r\n                    class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\r\n                  >\r\n                    <div class=\"flex items-center justify-between gap-2\">\r\n                      <span class=\"text-sm font-medium text-gray-900\">\r\n                        {{ target.displayName }}\r\n                      </span>\r\n                      <span class=\"text-xs text-gray-500\">\r\n                        {{ target.targetType }}\r\n                      </span>\r\n                    </div>\r\n                    <div class=\"flex flex-wrap gap-1.5\">\r\n                      @for (op of target.operations; track op.permissionCommand) {\r\n                        <span\r\n                          class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary\"\r\n                        >\r\n                          {{ op.displayName }}\r\n                          @if (op.isHighRisk) {\r\n                            <mt-icon\r\n                              icon=\"alert.alert-triangle\"\r\n                              styleClass=\"text-xs text-amber-500\"\r\n                            ></mt-icon>\r\n                          }\r\n                        </span>\r\n                      }\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                @if (d.scope.targets.length === 0) {\r\n                  <p class=\"text-xs text-gray-500\">\r\n                    {{ t(\"delegations.no-targets-selected\") }}\r\n                  </p>\r\n                }\r\n              </div>\r\n\r\n              @if (d.scope.warnings.length > 0) {\r\n                <ul class=\"text-xs text-amber-700 list-disc list-inside\">\r\n                  @for (w of d.scope.warnings; track w.code) {\r\n                    <li>{{ w.message }}</li>\r\n                  }\r\n                </ul>\r\n              }\r\n            </div>\r\n          }\r\n\r\n          @case ('history') {\r\n            <ol class=\"flex flex-col gap-2\">\r\n              @for (entry of statusHistory(); track entry.id) {\r\n                <li\r\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\r\n                >\r\n                  <div class=\"flex items-center justify-between gap-2\">\r\n                    <span class=\"text-sm font-medium text-gray-900\">\r\n                      {{ entry.action }}\r\n                    </span>\r\n                    <span class=\"text-xs text-gray-500\">\r\n                      {{ entry.createdAtUtc | date: \"short\" }}\r\n                    </span>\r\n                  </div>\r\n                  <div class=\"flex items-center gap-2 text-xs text-gray-600\">\r\n                    @if (entry.fromStatus) {\r\n                      <span>{{ entry.fromStatus }}</span>\r\n                      <mt-icon\r\n                        icon=\"arrow.arrow-right\"\r\n                        styleClass=\"text-xs text-gray-400\"\r\n                      ></mt-icon>\r\n                    }\r\n                    <span>{{ entry.toStatus }}</span>\r\n                  </div>\r\n                  <div class=\"text-xs text-gray-700\">\r\n                    {{ t(\"delegations.delegator-name\") }}:\r\n                    {{ entry.actor.displayName }}\r\n                  </div>\r\n                  @if (entry.reason) {\r\n                    <div class=\"text-xs text-gray-600\">\r\n                      {{ t(\"delegations.reason\") }}: {{ entry.reason }}\r\n                    </div>\r\n                  }\r\n                </li>\r\n              }\r\n              @if (statusHistory().length === 0) {\r\n                <li class=\"text-xs text-gray-500\">\r\n                  {{ t(\"delegations.status-history\") }} \u2014\r\n                  {{ t(\"delegations.no-operations-selected\") }}\r\n                </li>\r\n              }\r\n            </ol>\r\n          }\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\r\n    >\r\n      <mt-button\r\n        [label]=\"t('cancel')\"\r\n        variant=\"outlined\"\r\n        (click)=\"ref.close()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track tab.key) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-avatar\n                  icon=\"user.user-01\"\n                  styleClass=\"w-12! h-12! text-lg!\"\n                ></mt-avatar>\n                <div class=\"flex flex-col min-w-0\">\n                  <div class=\"text-xs text-gray-500\">\n                    {{ t(\"delegations.column.delegatorName\") }}\n                  </div>\n                  <div class=\"text-base font-medium text-gray-900 truncate\">\n                    {{ d.row.delegator.displayName }}\n                  </div>\n                  @if (d.row.delegator.email) {\n                    <div class=\"text-xs text-gray-500 truncate\">\n                      {{ d.row.delegator.email }}\n                    </div>\n                  }\n                </div>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.delegatedTo\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.delegatedUser.displayName }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{ d.row.scopeSummary || t(\"delegations.column.scopeSummary\") }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ grant.target.displayName || grant.target.targetKey }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ grant.action.operationKey }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"] }]
         }], propDecorators: { delegationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegationId", required: true }] }] } });
 
 /**
- * DelegationsPage — replaces the legacy single-list CRUD view with the target
- * two-list portal contract: "My Delegations" (I am delegator) and "Delegated To Me".
- *
- * - Rows render the BE-returned `allowedActions` only (never inferred).
- * - Lifecycle actions (Approve/Reject/Cancel/Edit/StartSession) dispatch through
- *   the facade and the row is replaced in place from the response.
- * - Scope/detail drawer and full scope-picker form are still incremental work;
- *   the form drawer here covers Edit/Create with the core fields.
+ * Delegations portal page (doc 02, 09): two lists — My Delegations (current user
+ * is delegator) and Delegated To Me (current user is delegate). Rows render only
+ * the BE-returned `allowedActions`; status comes from `effectiveStatus`.
  */
 class DelegationsList {
     facade = inject(DelegationsFacade);
-    session = inject(DelegationSessionFacade);
     modal = inject(ModalService);
     transloco = inject(TranslocoService);
-    // ---- Page header (unchanged from legacy admin breadcrumbs) ----
     breadcrumbItems = linkedSignal(() => [
         {
             label: '',
@@ -1615,47 +1333,42 @@ class DelegationsList {
             routerLink: '/control-panel/product-settings',
         },
         {
-            label: this.transloco.translate('delegations.delegations'),
+            label: this.transloco.translate('delegations.title'),
         },
     ], ...(ngDevMode ? [{ debugName: "breadcrumbItems" }] : /* istanbul ignore next */ []));
-    // ---- Tabs ----
     activeTab = signal('my', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     tabs = signal([
         {
             value: 'my',
-            label: this.transloco.translate('delegations.my-delegations'),
+            label: this.transloco.translate('delegations.myDelegations'),
         },
         {
             value: 'assigned',
-            label: this.transloco.translate('delegations.delegated-to-me'),
+            label: this.transloco.translate('delegations.delegatedToMe'),
         },
     ], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
-    // ---- Loading / data ----
     isLoading = computed(() => this.activeTab() === 'my'
         ? this.facade.isLoadingMy()
         : this.facade.isLoadingAssigned(), ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
     rows = computed(() => this.activeTab() === 'my'
         ? this.facade.myItems()
         : this.facade.assignedItems(), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
-    // ---- Column templates ----
     statusCol = viewChild.required('statusCol');
     userCol = viewChild.required('userCol');
     scopeCol = viewChild.required('scopeCol');
     daysCol = viewChild.required('daysCol');
-    // ---- Table actions (header) ----
     tableActions = signal([
         {
             icon: 'general.plus',
-            label: this.transloco.translate('delegations.add-delegation'),
+            label: this.transloco.translate('delegations.action.create'),
             color: 'primary',
             action: () => this.openForm(null),
         },
     ], ...(ngDevMode ? [{ debugName: "tableActions" }] : /* istanbul ignore next */ []));
-    // ---- Per-row action: read ONLY allowedActions from BE ----
     rowActions = signal([
         {
             icon: 'general.eye',
-            tooltip: this.transloco.translate('delegations.view-details'),
+            tooltip: this.transloco.translate('delegations.action.view'),
             color: 'primary',
             variant: 'outlined',
             action: (row) => this.viewDetails(row),
@@ -1663,46 +1376,43 @@ class DelegationsList {
         },
         {
             icon: 'custom.pencil',
-            tooltip: this.transloco.translate('edit'),
+            tooltip: this.transloco.translate('delegations.action.edit'),
             color: 'primary',
             action: (row) => this.openForm(row),
             hidden: (row) => !this.has(row, 'Edit'),
         },
         {
             icon: 'general.check',
-            tooltip: this.transloco.translate('delegations.approve'),
+            tooltip: this.transloco.translate('delegations.action.approve'),
             color: 'primary',
             action: (row) => this.approve(row),
             hidden: (row) => !this.has(row, 'Approve'),
-            loading: (row) => this.busyIds().includes(`approve:${row.id}`),
+            loading: (row) => this.busyIds().includes(`approve:${row.delegationId}`),
             confirmation: { type: 'popup' },
         },
         {
             icon: 'general.x-close',
-            tooltip: this.transloco.translate('delegations.reject'),
+            tooltip: this.transloco.translate('delegations.action.reject'),
             color: 'danger',
             variant: 'outlined',
             action: (row) => this.reject(row),
             hidden: (row) => !this.has(row, 'Reject'),
-            loading: (row) => this.busyIds().includes(`reject:${row.id}`),
+            loading: (row) => this.busyIds().includes(`reject:${row.delegationId}`),
             confirmation: { type: 'popup' },
         },
         {
-            icon: 'general.x-close',
-            tooltip: this.transloco.translate('delegations.cancel-delegation'),
+            icon: 'general.trash-01',
+            tooltip: this.transloco.translate('delegations.action.cancel'),
             color: 'danger',
             variant: 'outlined',
             action: (row) => this.cancel(row),
-            hidden: (row) => !this.has(row, 'Cancel') ||
-                // If row also has Approve/Reject, the cancel for a delegate is "withdraw";
-                // the assertion stays — both can render and BE decides outcome.
-                false,
-            loading: (row) => this.busyIds().includes(`cancel:${row.id}`),
-            confirmation: { type: 'popup' },
+            hidden: (row) => !this.has(row, 'Cancel'),
+            loading: (row) => this.busyIds().includes(`cancel:${row.delegationId}`),
+            confirmation: { type: 'popup', confirmationType: 'delete' },
         },
         {
             icon: 'arrow.arrow-right',
-            tooltip: this.transloco.translate('delegations.start-session'),
+            tooltip: this.transloco.translate('delegations.action.startSession'),
             color: 'primary',
             action: (row) => this.startSession(row),
             hidden: (row) => !this.has(row, 'StartSession'),
@@ -1710,43 +1420,47 @@ class DelegationsList {
     ], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
     tableColumns = linkedSignal(() => [
         {
-            key: 'status',
-            label: this.transloco.translate('delegations.status'),
+            key: 'effectiveStatus',
+            label: this.transloco.translate('delegations.column.status'),
             type: 'custom',
             customCellTpl: this.statusCol(),
         },
         {
             key: this.activeTab() === 'my' ? 'delegatedUser' : 'delegator',
             label: this.transloco.translate(this.activeTab() === 'my'
-                ? 'delegations.delegated-to'
-                : 'delegations.delegator-name'),
+                ? 'delegations.column.delegatedTo'
+                : 'delegations.column.delegatorName'),
             type: 'custom',
             customCellTpl: this.userCol(),
         },
         {
-            key: 'scope',
-            label: this.transloco.translate('delegations.scope'),
+            key: 'scopeSummary',
+            label: this.transloco.translate('delegations.column.scopeSummary'),
             type: 'custom',
             customCellTpl: this.scopeCol(),
         },
         {
-            key: 'startDateUtc',
-            label: this.transloco.translate('delegations.start-date'),
+            key: 'startsAtUtc',
+            label: this.transloco.translate('delegations.column.startDate'),
             type: 'dateTime',
         },
         {
-            key: 'endDateUtc',
-            label: this.transloco.translate('delegations.end-date'),
+            key: 'endsAtUtc',
+            label: this.transloco.translate('delegations.column.endDate'),
             type: 'dateTime',
         },
         {
-            key: 'dayRules',
-            label: this.transloco.translate('delegations.days'),
+            key: 'createdAtUtc',
+            label: this.transloco.translate('delegations.column.createdDate'),
+            type: 'dateTime',
+        },
+        {
+            key: 'dayRuleMode',
+            label: this.transloco.translate('delegations.column.days'),
             type: 'custom',
             customCellTpl: this.daysCol(),
         },
     ], ...(ngDevMode ? [{ debugName: "tableColumns" }] : /* istanbul ignore next */ []));
-    // ---- per-row "busy" tracking (no row-version conflict UX yet — toast suffices) ----
     busyIds = signal([], ...(ngDevMode ? [{ debugName: "busyIds" }] : /* istanbul ignore next */ []));
     weekdayKeys = [
         'sunday',
@@ -1757,9 +1471,6 @@ class DelegationsList {
         'friday',
         'saturday',
     ];
-    // ---------------------------------------------------------------------------
-    // Init / tab change
-    // ---------------------------------------------------------------------------
     ngOnInit() {
         this.loadCurrentTab();
     }
@@ -1767,7 +1478,7 @@ class DelegationsList {
         this.activeTab.set(tab);
         this.loadCurrentTab();
     }
-    loadCurrentTab(query = { page: 1, pageSize: 20 }) {
+    loadCurrentTab(query = { page: 1, pageSize: 25 }) {
         if (this.activeTab() === 'my') {
             this.facade.getMy(query);
         }
@@ -1775,106 +1486,87 @@ class DelegationsList {
             this.facade.getAssigned(query);
         }
     }
-    // ---------------------------------------------------------------------------
-    // Helpers
-    // ---------------------------------------------------------------------------
+    reloadCurrentTab() {
+        this.loadCurrentTab();
+    }
     has(row, action) {
         return row.allowedActions?.includes(action) ?? false;
     }
     formatDays(row) {
-        if (row.dayRules?.type === 'SpecificDays' &&
-            row.dayRules.specificDays?.length) {
-            return row.dayRules.specificDays
+        if (row.dayRuleMode === 'SpecificDays' && row.specificDays?.length) {
+            return row.specificDays
                 .filter((d) => d >= 0 && d < this.weekdayKeys.length)
-                .map((d) => this.transloco.translate(`delegations.${this.weekdayKeys[d]}`))
+                .map((d) => this.transloco.translate(`delegations.days.${this.weekdayKeys[d]}`))
                 .join(', ');
         }
-        return this.transloco.translate('delegations.all-days');
+        return this.transloco.translate('delegations.form.fullRange');
     }
-    // ---------------------------------------------------------------------------
-    // Lifecycle actions
-    // ---------------------------------------------------------------------------
     viewDetails(row) {
         this.modal.openModal(DelegationDetailDrawer, 'drawer', {
-            header: this.transloco.translate('delegations.view-details'),
+            header: this.transloco.translate('delegations.action.view'),
             styleClass: '!absolute !shadow-none !w-full !max-w-full sm:!w-[42rem] xl:!w-[50rem]',
             position: 'end',
             appendTo: 'page-content',
             dismissableMask: true,
             dismissible: true,
-            inputValues: { delegationId: row.id },
+            inputValues: { delegationId: row.delegationId },
         });
     }
-    openForm(row, readonly = false) {
-        const isDrawer = row ? 'drawer' : 'dialog';
-        this.modal.openModal(DelegationForm, isDrawer, {
-            header: this.transloco.translate(row ? 'delegations.edit-delegation' : 'delegations.create-delegation'),
-            styleClass: isDrawer === 'drawer'
+    openForm(row) {
+        const ref = this.modal.openModal(DelegationForm, row ? 'drawer' : 'dialog', {
+            header: this.transloco.translate(row ? 'delegations.action.edit' : 'delegations.action.create'),
+            styleClass: row
                 ? '!absolute !shadow-none !w-full !max-w-full sm:!w-[42rem] xl:!w-[50rem]'
                 : '!w-[min(96vw,50rem)] !max-w-[96vw] !h-[min(90vh,40rem)] !max-h-[90vh]',
-            position: isDrawer === 'drawer' ? 'end' : '',
-            appendTo: isDrawer === 'drawer' ? 'page-content' : 'body',
+            position: row ? 'end' : '',
+            appendTo: row ? 'page-content' : 'body',
             dismissableMask: true,
             dismissible: true,
-            inputValues: {
-                delegationForEdit: row,
-                readonly,
-            },
+            inputValues: { delegationForEdit: row, readonly: false },
+        });
+        ref.onClose.subscribe((saved) => {
+            if (saved)
+                this.reloadCurrentTab();
         });
     }
     approve(row) {
-        this.mark(`approve:${row.id}`, true);
+        this.mark(`approve:${row.delegationId}`, true);
         this.facade
-            .approve(row.id, { rowVersion: row.rowVersion })
-            .pipe(finalize(() => this.mark(`approve:${row.id}`, false)))
-            .subscribe();
+            .approve(row.delegationId, { rowVersion: row.rowVersion })
+            .pipe(finalize(() => this.mark(`approve:${row.delegationId}`, false)))
+            .subscribe({ next: () => this.reloadCurrentTab() });
     }
     reject(row) {
-        this.mark(`reject:${row.id}`, true);
+        this.mark(`reject:${row.delegationId}`, true);
         this.facade
-            .reject(row.id, {
+            .reject(row.delegationId, {
             rowVersion: row.rowVersion,
-            reason: this.transloco.translate('delegations.reject'),
+            reason: this.transloco.translate('delegations.action.reject'),
         })
-            .pipe(finalize(() => this.mark(`reject:${row.id}`, false)))
-            .subscribe();
+            .pipe(finalize(() => this.mark(`reject:${row.delegationId}`, false)))
+            .subscribe({ next: () => this.reloadCurrentTab() });
     }
     cancel(row) {
-        this.mark(`cancel:${row.id}`, true);
+        this.mark(`cancel:${row.delegationId}`, true);
         this.facade
-            .cancel(row.id, {
-            rowVersion: row.rowVersion,
-            reason: this.transloco.translate('delegations.cancel-delegation'),
-        })
-            .pipe(finalize(() => this.mark(`cancel:${row.id}`, false)))
-            .subscribe();
+            .cancel(row.delegationId, row.rowVersion)
+            .pipe(finalize(() => this.mark(`cancel:${row.delegationId}`, false)))
+            .subscribe({ next: () => this.reloadCurrentTab() });
     }
     startSession(row) {
         this.modal.openModal(StartSessionDialog, 'dialog', {
-            header: this.transloco.translate('delegations.start-session'),
+            header: this.transloco.translate('delegations.action.startSession'),
             styleClass: '!w-[min(96vw,28rem)] !max-w-[96vw]',
             dismissableMask: true,
             dismissible: true,
-            inputValues: {
-                candidate: {
-                    id: row.id,
-                    delegator: row.delegator,
-                    delegatedUser: row.delegatedUser,
-                    status: row.status,
-                    allowedActions: row.allowedActions,
-                    startDateUtc: row.startDateUtc,
-                    endDateUtc: row.endDateUtc,
-                    scopeSummary: row.scope?.summary,
-                },
-                intent: 'start',
-            },
+            inputValues: { delegation: row, intent: 'start' },
         });
     }
     mark(key, on) {
         this.busyIds.update((ids) => on ? [...ids, key] : ids.filter((id) => id !== key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", viewQueries: [{ propertyName: "statusCol", first: true, predicate: ["statusCol"], descendants: true, isSignal: true }, { propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }, { propertyName: "scopeCol", first: true, predicate: ["scopeCol"], descendants: true, isSignal: true }, { propertyName: "daysCol", first: true, predicate: ["daysCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col h-full gap-2 p-4\">\r\n    <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\r\n\r\n    <div class=\"flex items-center gap-2 border-b border-gray-200\">\r\n      @for (tab of tabs(); track tab.value) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\r\n          [class.border-primary]=\"activeTab() === tab.value\"\r\n          [class.text-primary]=\"activeTab() === tab.value\"\r\n          [class.border-transparent]=\"activeTab() !== tab.value\"\r\n          [class.text-gray-500]=\"activeTab() !== tab.value\"\r\n          (click)=\"switchTab(tab.value)\"\r\n        >\r\n          {{ tab.label }}\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [loading]=\"isLoading()\"\r\n    >\r\n      <ng-template #statusCol let-row>\r\n        <mt-delegation-status-chip\r\n          [status]=\"row.status\"\r\n        ></mt-delegation-status-chip>\r\n      </ng-template>\r\n\r\n      <ng-template #userCol let-row>\r\n        @let user = activeTab() === \"my\" ? row.delegatedUser : row.delegator;\r\n        <div class=\"flex items-center gap-2\">\r\n          <mt-avatar\r\n            [image]=\"user?.photo || ''\"\r\n            icon=\"user.user-01\"\r\n            styleClass=\"w-8! h-8!\"\r\n          ></mt-avatar>\r\n          <div class=\"flex flex-col min-w-0\">\r\n            <span class=\"text-sm text-gray-900 truncate\">\r\n              {{ user?.displayName }}\r\n            </span>\r\n            @if (user?.email) {\r\n              <span class=\"text-xs text-gray-500 truncate\">\r\n                {{ user.email }}\r\n              </span>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template #scopeCol let-row>\r\n        <span class=\"text-sm text-gray-700\" [title]=\"row.scope?.summary\">\r\n          {{ row.scope?.summary || \"\u2014\" }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <ng-template #daysCol let-row>\r\n        <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\r\n      </ng-template>\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", viewQueries: [{ propertyName: "statusCol", first: true, predicate: ["statusCol"], descendants: true, isSignal: true }, { propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }, { propertyName: "scopeCol", first: true, predicate: ["scopeCol"], descendants: true, isSignal: true }, { propertyName: "daysCol", first: true, predicate: ["daysCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full gap-2 p-4\">\n    <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\n\n    <div class=\"flex items-center gap-2 border-b border-gray-200\">\n      @for (tab of tabs(); track tab.value) {\n        <button\n          type=\"button\"\n          class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.value\"\n          [class.text-primary]=\"activeTab() === tab.value\"\n          [class.border-transparent]=\"activeTab() !== tab.value\"\n          [class.text-gray-500]=\"activeTab() !== tab.value\"\n          (click)=\"switchTab(tab.value)\"\n        >\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"tableColumns()\"\n      [actions]=\"tableActions()\"\n      [rowActions]=\"rowActions()\"\n      [loading]=\"isLoading()\"\n    >\n      <ng-template #statusCol let-row>\n        <mt-delegation-status-chip\n          [status]=\"row.effectiveStatus\"\n        ></mt-delegation-status-chip>\n      </ng-template>\n\n      <ng-template #userCol let-row>\n        @let party = activeTab() === \"my\" ? row.delegatedUser : row.delegator;\n        <div class=\"flex items-center gap-2\">\n          <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n          <div class=\"flex flex-col min-w-0\">\n            <span class=\"text-sm text-gray-900 truncate\">\n              {{ party?.displayName }}\n            </span>\n            @if (party?.email) {\n              <span class=\"text-xs text-gray-500 truncate\">\n                {{ party.email }}\n              </span>\n            }\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template #scopeCol let-row>\n        <span class=\"text-sm text-gray-700\" [title]=\"row.scopeSummary\">\n          {{ row.scopeSummary || \"\u2014\" }}\n        </span>\n      </ng-template>\n\n      <ng-template #daysCol let-row>\n        <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\n      </ng-template>\n    </mt-table>\n  </div>\n</ng-container>\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, decorators: [{
             type: Component,
@@ -1885,33 +1577,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Table,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col h-full gap-2 p-4\">\r\n    <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\r\n\r\n    <div class=\"flex items-center gap-2 border-b border-gray-200\">\r\n      @for (tab of tabs(); track tab.value) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\r\n          [class.border-primary]=\"activeTab() === tab.value\"\r\n          [class.text-primary]=\"activeTab() === tab.value\"\r\n          [class.border-transparent]=\"activeTab() !== tab.value\"\r\n          [class.text-gray-500]=\"activeTab() !== tab.value\"\r\n          (click)=\"switchTab(tab.value)\"\r\n        >\r\n          {{ tab.label }}\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"tableColumns()\"\r\n      [actions]=\"tableActions()\"\r\n      [rowActions]=\"rowActions()\"\r\n      [loading]=\"isLoading()\"\r\n    >\r\n      <ng-template #statusCol let-row>\r\n        <mt-delegation-status-chip\r\n          [status]=\"row.status\"\r\n        ></mt-delegation-status-chip>\r\n      </ng-template>\r\n\r\n      <ng-template #userCol let-row>\r\n        @let user = activeTab() === \"my\" ? row.delegatedUser : row.delegator;\r\n        <div class=\"flex items-center gap-2\">\r\n          <mt-avatar\r\n            [image]=\"user?.photo || ''\"\r\n            icon=\"user.user-01\"\r\n            styleClass=\"w-8! h-8!\"\r\n          ></mt-avatar>\r\n          <div class=\"flex flex-col min-w-0\">\r\n            <span class=\"text-sm text-gray-900 truncate\">\r\n              {{ user?.displayName }}\r\n            </span>\r\n            @if (user?.email) {\r\n              <span class=\"text-xs text-gray-500 truncate\">\r\n                {{ user.email }}\r\n              </span>\r\n            }\r\n          </div>\r\n        </div>\r\n      </ng-template>\r\n\r\n      <ng-template #scopeCol let-row>\r\n        <span class=\"text-sm text-gray-700\" [title]=\"row.scope?.summary\">\r\n          {{ row.scope?.summary || \"\u2014\" }}\r\n        </span>\r\n      </ng-template>\r\n\r\n      <ng-template #daysCol let-row>\r\n        <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\r\n      </ng-template>\r\n    </mt-table>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full gap-2 p-4\">\n    <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\n\n    <div class=\"flex items-center gap-2 border-b border-gray-200\">\n      @for (tab of tabs(); track tab.value) {\n        <button\n          type=\"button\"\n          class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.value\"\n          [class.text-primary]=\"activeTab() === tab.value\"\n          [class.border-transparent]=\"activeTab() !== tab.value\"\n          [class.text-gray-500]=\"activeTab() !== tab.value\"\n          (click)=\"switchTab(tab.value)\"\n        >\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"tableColumns()\"\n      [actions]=\"tableActions()\"\n      [rowActions]=\"rowActions()\"\n      [loading]=\"isLoading()\"\n    >\n      <ng-template #statusCol let-row>\n        <mt-delegation-status-chip\n          [status]=\"row.effectiveStatus\"\n        ></mt-delegation-status-chip>\n      </ng-template>\n\n      <ng-template #userCol let-row>\n        @let party = activeTab() === \"my\" ? row.delegatedUser : row.delegator;\n        <div class=\"flex items-center gap-2\">\n          <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n          <div class=\"flex flex-col min-w-0\">\n            <span class=\"text-sm text-gray-900 truncate\">\n              {{ party?.displayName }}\n            </span>\n            @if (party?.email) {\n              <span class=\"text-xs text-gray-500 truncate\">\n                {{ party.email }}\n              </span>\n            }\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template #scopeCol let-row>\n        <span class=\"text-sm text-gray-700\" [title]=\"row.scopeSummary\">\n          {{ row.scopeSummary || \"\u2014\" }}\n        </span>\n      </ng-template>\n\n      <ng-template #daysCol let-row>\n        <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\n      </ng-template>\n    </mt-table>\n  </div>\n</ng-container>\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}\n"] }]
         }], propDecorators: { statusCol: [{ type: i0.ViewChild, args: ['statusCol', { isSignal: true }] }], userCol: [{ type: i0.ViewChild, args: ['userCol', { isSignal: true }] }], scopeCol: [{ type: i0.ViewChild, args: ['scopeCol', { isSignal: true }] }], daysCol: [{ type: i0.ViewChild, args: ['daysCol', { isSignal: true }] }] } });
 
 /**
- * Pattern for endpoints that should NEVER receive the `app-delegation` header.
- * Token issuance, refresh, end-session and session-read calls use only `Authorization`
- * (architecture doc §9.1).
+ * Endpoints that must NEVER carry the `app-delegation` header.
+ * Starting a delegated session uses only the normal `Authorization` token
+ * (doc 05). All other `identity/delegations` management calls are normal
+ * (non-delegated) actions too, so the whole namespace is excluded.
  */
-const EXCLUDE = /\bidentity\/delegations\/(?:[^/]+\/)?(?:token|session)(?:\/|$)/i;
+const EXCLUDE = /\bidentity\/delegations\b/i;
 /**
- * Adds `app-delegation: Bearer <token>` to outgoing requests when a delegation
- * session is active. Token-management endpoints are excluded.
- *
- * Register AFTER the gateway-auth interceptor (so `Authorization` is set first)
- * and BEFORE the message interceptor (so 403s still flow through toast handling).
+ * Adds `app-delegation: Bearer <token>` to outgoing requests while a delegated
+ * session is active. Register AFTER the gateway-auth interceptor (so the normal
+ * `Authorization` header is set first) and BEFORE the message interceptor.
  */
 const appDelegationInterceptor = (req, next) => {
     if (EXCLUDE.test(req.url)) {
         return next(req);
     }
-    const token = inject(DelegationSessionFacade).accessToken();
+    const token = inject(DelegationSessionFacade).token();
     if (!token) {
         return next(req);
     }
-    return next(req.clone({
-        setHeaders: { 'app-delegation': `Bearer ${token}` },
-    }));
+    return next(req.clone({ setHeaders: { 'app-delegation': `Bearer ${token}` } }));
 };
 
 // store/index.ts
@@ -1922,5 +1611,5 @@ const appDelegationInterceptor = (req, next) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ApproveDelegation, BootstrapDelegationSession, CancelDelegation, ClearScopePreview, ClearSelectedDelegation, CreateDelegation, DELEGATION_SESSION_STORAGE_KEY, DelegationDetailDrawer, DelegationForm, DelegationSessionActionKey, DelegationSessionFacade, DelegationSessionInvalidated, DelegationSessionState, DelegationStatusChip, Delegations, DelegationsActionKey, DelegationsFacade, DelegationsList, DelegationsState, EndDelegationSession, GetAssignedDelegations, GetDelegation, GetMyDelegations, GetScopeOptions, PreviewScope, RefreshDelegationSession, RejectDelegation, ScopePicker, SetDelegationCandidates, StartDelegationSession, StartSessionDialog, SwitchDelegationSession, TopbarDelegationMenu, UpdateDelegation, VerifyDelegationSession, appDelegationInterceptor, pickCandidates, toActiveSession };
+export { ApproveDelegation, CancelDelegation, ClearDelegationDetail, ClearScopePreview, CreateDelegationLegacy, CreateDelegationV2, DelegationDetailDrawer, DelegationForm, DelegationSessionActionKey, DelegationSessionFacade, DelegationSessionState, DelegationStatusChip, Delegations, DelegationsActionKey, DelegationsFacade, DelegationsList, DelegationsState, EndDelegationSession, GetActiveAssignedDelegations, GetAssignedDelegations, GetDelegationDetail, GetMyDelegations, GetScopeOptions, LoadDelegationCandidates, PreviewScope, RejectDelegation, ScopePicker, StartDelegationSession, StartSessionDialog, SwitchDelegationSession, TopbarDelegationMenu, UpdateDelegationLegacy, UpdateDelegationV2, appDelegationInterceptor };
 //# sourceMappingURL=masterteam-delegations.mjs.map