@masterteam/delegations 0.0.48 → 0.0.50

package/fesm2022/masterteam-delegations.mjs

@@ -1,16 +1,16 @@
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, InjectionToken, computed, input, ChangeDetectionStrategy, Component, output, viewChild, effect, signal, model, untracked, booleanAttribute, numberAttribute, linkedSignal } from '@angular/core';
+import { InjectionToken, makeEnvironmentProviders, inject, Injectable, signal, computed, input, ChangeDetectionStrategy, Component, output, viewChild, effect, model, DestroyRef, untracked, booleanAttribute, numberAttribute, linkedSignal } from '@angular/core';
 import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
 import { Avatar } from '@masterteam/components/avatar';
 import { ModalService } from '@masterteam/components/modal';
 import { Icon } from '@masterteam/icons';
 import { Popover } from 'primeng/popover';
 import { Actions, Store, ofActionSuccessful, ofActionDispatched, Action, Selector, State, select } from '@ngxs/store';
-import { EMPTY, switchMap, tap, filter, finalize, catchError, throwError } from 'rxjs';
-import { HttpClient, HttpHeaders, HttpParams, HttpContext, HttpErrorResponse } from '@angular/common/http';
-import { handleApiRequest, REQUEST_CONTEXT, UserSearchFieldConfig, TextareaFieldConfig, DateFieldConfig, RadioButtonFieldConfig, MultiSelectFieldConfig, ToggleFieldConfig, ValidatorConfig } from '@masterteam/components';
+import { switchMap, from, EMPTY, finalize, shareReplay, filter, catchError, throwError } from 'rxjs';
+import { HttpContextToken, HttpContext, HttpClient, HttpParams, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { handleApiRequest, REQUEST_CONTEXT, UserSearchFieldConfig, TextareaFieldConfig, DateFieldConfig, RadioButtonFieldConfig, MultiSelectFieldConfig, TextFieldConfig, ToggleFieldConfig, ValidatorConfig } from '@masterteam/components';
 import { Button } from '@masterteam/components/button';
 import { ModalRef } from '@masterteam/components/dialog';
 import { EntityPreview } from '@masterteam/components/entities';
@@ -32,9 +32,116 @@ import { TextField } from '@masterteam/components/text-field';
 import * as i4 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 
+const DEFAULT_CONFIG = {
+    resolveApplicationApiBaseUrl: () => '',
+    resolvePromptNamespace: () => ({
+        userId: 'anonymous',
+        applicationKey: 'default',
+        tenantKey: 'default',
+    }),
+    resolveDefaultTimeZone: () => Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
+    onContextChanged: () => undefined,
+};
+const DELEGATION_RUNTIME_CONFIG = new InjectionToken('DELEGATION_RUNTIME_CONFIG', {
+    factory: () => DEFAULT_CONFIG,
+});
+function provideDelegationRuntime(config) {
+    return makeEnvironmentProviders([
+        {
+            provide: DELEGATION_RUNTIME_CONFIG,
+            useFactory: () => (typeof config === 'function' ? config() : config),
+        },
+    ]);
+}
+/** Opt-in marker for a trusted first-party business-runtime request. */
+const DELEGATED_RUNTIME_REQUEST = new HttpContextToken(() => false);
+function withDelegatedRuntime(context = new HttpContext()) {
+    return context.set(DELEGATED_RUNTIME_REQUEST, true);
+}
+
+const STORAGE_KEY = 'mt.delegation.prompt-receipts.v1';
+const MAX_RECEIPTS = 100;
+class DelegationPromptReceiptService {
+    document = inject(DOCUMENT);
+    config = inject(DELEGATION_RUNTIME_CONFIG);
+    claimed = new Set();
+    /** Atomically claims only candidates that have not already produced a prompt. */
+    async claimUnseen(candidates) {
+        const pairs = await Promise.all(candidates.map(async (candidate) => ({
+            candidate,
+            receipt: await this.receiptFor(candidate),
+        })));
+        const stored = this.read();
+        const unseen = pairs.filter(({ receipt }) => !stored.includes(receipt) && !this.claimed.has(receipt));
+        if (!unseen.length) {
+            return [];
+        }
+        unseen.forEach(({ receipt }) => this.claimed.add(receipt));
+        this.write([...stored, ...unseen.map(({ receipt }) => receipt)]);
+        return unseen.map(({ candidate }) => candidate);
+    }
+    async receiptFor(candidate) {
+        const namespace = this.config.resolvePromptNamespace();
+        const input = [
+            namespace.userId,
+            namespace.applicationKey,
+            namespace.tenantKey ?? '',
+            candidate.delegationId,
+            candidate.rowVersion,
+        ].join('|');
+        const crypto = this.document.defaultView?.crypto ?? globalThis.crypto;
+        if (crypto?.subtle) {
+            const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(input));
+            return Array.from(new Uint8Array(digest), (value) => value.toString(16).padStart(2, '0')).join('');
+        }
+        // Deterministic non-reversible fallback for test/non-secure browser contexts.
+        let hash = 2166136261;
+        for (const char of input) {
+            hash ^= char.charCodeAt(0);
+            hash = Math.imul(hash, 16777619);
+        }
+        return `f${(hash >>> 0).toString(16).padStart(8, '0')}`;
+    }
+    read() {
+        try {
+            const raw = this.document.defaultView?.localStorage.getItem(STORAGE_KEY);
+            const parsed = raw ? JSON.parse(raw) : [];
+            return Array.isArray(parsed)
+                ? parsed.filter((item) => typeof item === 'string')
+                : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    write(receipts) {
+        try {
+            const bounded = [...new Set(receipts)].slice(-MAX_RECEIPTS);
+            this.document.defaultView?.localStorage.setItem(STORAGE_KEY, JSON.stringify(bounded));
+        }
+        catch {
+            // Storage can be unavailable; the in-memory claim still coalesces dialogs.
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationPromptReceiptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationPromptReceiptService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationPromptReceiptService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 /** Fetch the active delegations the current user may start (user/activedelegations). */
 class LoadDelegationCandidates {
+    page;
+    pageSize;
+    append;
     static type = '[DelegationSession] Load Candidates';
+    constructor(page = 1, pageSize = 25, append = false) {
+        this.page = page;
+        this.pageSize = pageSize;
+        this.append = append;
+    }
 }
 /** Start a delegated session for the given assignment row. */
 class StartDelegationSession {
@@ -60,14 +167,6 @@ class SwitchDelegationSession {
         this.delegation = delegation;
     }
 }
-/** Set whether the post-login candidates prompt has been shown for this login. */
-class MarkDelegationPrompted {
-    prompted;
-    static type = '[DelegationSession] Mark Prompted';
-    constructor(prompted = true) {
-        this.prompted = prompted;
-    }
-}
 
 var DelegationSessionActionKey;
 (function (DelegationSessionActionKey) {
@@ -75,6 +174,24 @@ var DelegationSessionActionKey;
     DelegationSessionActionKey["StartSession"] = "startSession";
 })(DelegationSessionActionKey || (DelegationSessionActionKey = {}));
 
+/** Package-private: raw delegated credentials never enter NGXS or public models. */
+class DelegationTokenVault {
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    token = this.value.asReadonly();
+    set(token) {
+        this.value.set(token);
+    }
+    clear() {
+        this.value.set(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationTokenVault, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationTokenVault, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationTokenVault, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -90,12 +207,18 @@ class GatewayLoginSuccessShell {
 class GatewayLogoutShell {
     static type = '[Auth] Logout';
 }
+class GatewayLoginFailureShell {
+    static type = '[Auth] Login Failure';
+}
 class GatewayLaunchApplicationShell {
     static type = '[Auth] Launch Application';
 }
 class GatewaySetAppSessionShell {
     static type = '[Auth] Set App Session';
 }
+class GatewayRestoreBrowserHandoffShell {
+    static type = '[Auth] Restore Browser Handoff';
+}
 class GatewayClearAppSessionShell {
     static type = '[Auth] Clear App Session';
 }
@@ -119,6 +242,9 @@ let DelegationSessionState = class DelegationSessionState {
     http = inject(HttpClient);
     actions$ = inject(Actions);
     store = inject(Store);
+    vault = inject(DelegationTokenVault);
+    runtime = inject(DELEGATION_RUNTIME_CONFIG);
+    expiryTimer = null;
     constructor() {
         this.actions$
             .pipe(ofActionSuccessful(GatewayLoginSuccessShell))
@@ -130,13 +256,13 @@ let DelegationSessionState = class DelegationSessionState {
         // so the prompt fires once per real login.
         this.store.dispatch(new LoadDelegationCandidates()));
         this.actions$
-            .pipe(ofActionDispatched(GatewayLogoutShell))
+            .pipe(ofActionDispatched(GatewayLogoutShell, GatewayLoginFailureShell))
             .subscribe(() => this.store.dispatch(new EndDelegationSession('Logout')));
         this.actions$
-            .pipe(ofActionDispatched(GatewayLaunchApplicationShell, GatewaySetAppSessionShell, GatewayClearAppSessionShell, GatewayClearAllAppSessionsShell))
+            .pipe(ofActionDispatched(GatewayLaunchApplicationShell, GatewaySetAppSessionShell, GatewayRestoreBrowserHandoffShell, GatewayClearAppSessionShell, GatewayClearAllAppSessionsShell))
             .subscribe(() => this.store.dispatch(new EndDelegationSession('AppSwitch')));
         this.actions$
-            .pipe(ofActionSuccessful(GatewayLaunchApplicationShell, GatewaySetAppSessionShell))
+            .pipe(ofActionSuccessful(GatewayLaunchApplicationShell, GatewaySetAppSessionShell, GatewayRestoreBrowserHandoffShell))
             .subscribe(() => this.store.dispatch(new LoadDelegationCandidates()));
     }
     // ---------------------------------------------------------------------------
@@ -148,8 +274,8 @@ let DelegationSessionState = class DelegationSessionState {
     static getCandidates(state) {
         return state.candidates;
     }
-    static getPrompted(state) {
-        return state.prompted;
+    static getCandidatesTotalCount(state) {
+        return state.candidatesTotalCount;
     }
     static isDelegated(state) {
         return !!state.active;
@@ -163,48 +289,94 @@ let DelegationSessionState = class DelegationSessionState {
     // ---------------------------------------------------------------------------
     // Actions
     // ---------------------------------------------------------------------------
-    loadCandidates(ctx) {
-        const req$ = this.http.get(`${BASE$1}/user/activedelegations`);
+    loadCandidates(ctx, { page, pageSize, append }) {
+        const req$ = this.http.get(`${BASE$1}/user/activedelegations`, {
+            params: new HttpParams().set('page', page).set('pageSize', pageSize),
+        });
         return handleApiRequest({
             ctx,
             key: DelegationSessionActionKey.LoadCandidates,
             request$: req$,
-            onSuccess: (response) => ({
-                candidates: (response.data?.items ?? []).filter(canStart),
-            }),
+            onSuccess: (response) => {
+                const next = (response.data?.items ?? []).filter(canStart);
+                const current = append ? ctx.getState().candidates : [];
+                const candidates = [...current, ...next].filter((row, index, rows) => rows.findIndex((candidate) => candidate.delegationId === row.delegationId) === index);
+                const active = ctx.getState().active;
+                if (active &&
+                    page === 1 &&
+                    !candidates.some((row) => row.delegationId === active.delegation.delegationId) &&
+                    (response.data?.totalCount ?? 0) <= pageSize) {
+                    queueMicrotask(() => this.store.dispatch(new EndDelegationSession('ScopeChanged')));
+                }
+                return {
+                    candidates,
+                    candidatesPage: response.data?.page ?? page,
+                    candidatesPageSize: response.data?.pageSize ?? pageSize,
+                    candidatesTotalCount: response.data?.totalCount ?? candidates.length,
+                };
+            },
         });
     }
     start(ctx, { delegation }) {
-        const req$ = this.http.post(`${BASE$1}/delegationToken/${delegation.delegationId}`, {}, {
+        const previous = ctx.getState().active;
+        return this.startSession(ctx, delegation, previous, 'StartSession');
+    }
+    startSession(ctx, delegation, previous, reason) {
+        const req$ = this.http.post(`${BASE$1}/${delegation.delegationId}/session`, {}, {
             headers: new HttpHeaders({ noMessage: 'true' }),
         });
         return handleApiRequest({
             ctx,
             key: DelegationSessionActionKey.StartSession,
             request$: req$,
-            onSuccess: (response) => ({
-                active: { token: response.data, delegation },
-            }),
-        });
+            onSuccess: (response) => {
+                this.vault.set(response.data.accessToken);
+                const active = {
+                    delegation,
+                    expiresAtUtc: response.data.expiresAtUtc,
+                    delegationVersion: response.data.delegationVersion,
+                };
+                this.scheduleExpiry(active);
+                return { active };
+            },
+        }).pipe(switchMap(() => from(Promise.resolve(this.runtime.onContextChanged({
+            previous,
+            current: ctx.getState().active,
+            reason,
+        })))));
     }
     end(ctx, { reason }) {
         // Client-local only — there is no server end-session endpoint (doc 05).
+        const previous = ctx.getState().active;
+        if (!previous && !this.vault.token()) {
+            return EMPTY;
+        }
+        this.clearExpiry();
+        this.vault.clear();
         ctx.patchState({
             active: null,
             ...(shouldClearCandidates(reason)
-                ? { candidates: [], prompted: false }
+                ? { candidates: [], candidatesTotalCount: 0, candidatesPage: 1 }
                 : {}),
         });
-        return EMPTY;
-    }
-    markPrompted(ctx, { prompted }) {
-        ctx.patchState({ prompted });
-        return EMPTY;
+        return from(Promise.resolve(this.runtime.onContextChanged({ previous, current: null, reason }))).pipe(switchMap(() => shouldClearCandidates(reason)
+            ? EMPTY
+            : this.store.dispatch(new LoadDelegationCandidates())));
     }
     switch(ctx, { delegation }) {
-        return this.store
-            .dispatch(new EndDelegationSession('Manual'))
-            .pipe(switchMap(() => this.store.dispatch(new StartDelegationSession(delegation))));
+        const previous = ctx.getState().active;
+        return this.startSession(ctx, delegation, previous, 'SwitchSession');
+    }
+    scheduleExpiry(active) {
+        this.clearExpiry();
+        const delay = Math.max(0, Date.parse(active.expiresAtUtc) - Date.now());
+        this.expiryTimer = setTimeout(() => this.store.dispatch(new EndDelegationSession('Expired')), delay);
+    }
+    clearExpiry() {
+        if (this.expiryTimer !== null) {
+            clearTimeout(this.expiryTimer);
+            this.expiryTimer = null;
+        }
     }
     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 });
@@ -218,9 +390,6 @@ __decorate$1([
 __decorate$1([
     Action(EndDelegationSession)
 ], DelegationSessionState.prototype, "end", null);
-__decorate$1([
-    Action(MarkDelegationPrompted)
-], DelegationSessionState.prototype, "markPrompted", null);
 __decorate$1([
     Action(SwitchDelegationSession)
 ], DelegationSessionState.prototype, "switch", null);
@@ -232,7 +401,7 @@ __decorate$1([
 ], DelegationSessionState, "getCandidates", null);
 __decorate$1([
     Selector()
-], DelegationSessionState, "getPrompted", null);
+], DelegationSessionState, "getCandidatesTotalCount", null);
 __decorate$1([
     Selector()
 ], DelegationSessionState, "isDelegated", null);
@@ -248,7 +417,9 @@ DelegationSessionState = __decorate$1([
         defaults: {
             active: null,
             candidates: [],
-            prompted: false,
+            candidatesPage: 1,
+            candidatesPageSize: 25,
+            candidatesTotalCount: 0,
             loadingActive: [],
             errors: {},
         },
@@ -256,77 +427,62 @@ DelegationSessionState = __decorate$1([
 ], DelegationSessionState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationSessionState, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [], propDecorators: { loadCandidates: [], start: [], end: [], markPrompted: [], switch: [] } });
+        }], ctorParameters: () => [], propDecorators: { loadCandidates: [], start: [], end: [], switch: [] } });
 
-/**
- * When true (default), the app reloads after a delegated session starts /
- * switches / ends so every subsequent request is re-fetched under the new
- * delegation context (the SPA otherwise keeps the previous actor's loaded data).
- * Consumers that drive their own refresh can provide `false` to opt out.
- */
-const DELEGATION_RELOAD_ON_SESSION_CHANGE = new InjectionToken('DELEGATION_RELOAD_ON_SESSION_CHANGE', { factory: () => true });
 class DelegationSessionFacade {
     store = inject(Store);
-    document = inject(DOCUMENT);
-    reloadOnSessionChange = inject(DELEGATION_RELOAD_ON_SESSION_CHANGE);
+    promptReceipts = inject(DelegationPromptReceiptService);
+    endInFlight = null;
     // ---------------------------------------------------------------------------
     // Data slices
     // ---------------------------------------------------------------------------
     active = select(DelegationSessionState.getActive);
     candidates = select(DelegationSessionState.getCandidates);
+    candidatesTotalCount = select(DelegationSessionState.getCandidatesTotalCount);
     isDelegated = select(DelegationSessionState.isDelegated);
-    /** Whether the post-login candidates prompt was already shown this login. */
-    prompted = select(DelegationSessionState.getPrompted);
     loadingActive = select(DelegationSessionState.getLoadingActive);
     // ---------------------------------------------------------------------------
     // Derived (interceptor + topbar)
     // ---------------------------------------------------------------------------
-    /** 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 */ []));
+    hasMoreCandidates = computed(() => this.candidates().length < this.candidatesTotalCount(), ...(ngDevMode ? [{ debugName: "hasMoreCandidates" }] : /* 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
     // ---------------------------------------------------------------------------
-    loadCandidates() {
-        return this.store.dispatch(new LoadDelegationCandidates());
+    loadCandidates(page = 1, pageSize = 25, append = false) {
+        return this.store.dispatch(new LoadDelegationCandidates(page, pageSize, append));
+    }
+    loadMoreCandidates() {
+        const state = this.store.selectSnapshot((snapshot) => snapshot.delegationSession);
+        if (!state || state.candidates.length >= state.candidatesTotalCount) {
+            return this.store.dispatch([]);
+        }
+        return this.loadCandidates(state.candidatesPage + 1, state.candidatesPageSize, true);
     }
-    markPrompted(prompted = true) {
-        return this.store.dispatch(new MarkDelegationPrompted(prompted));
+    claimPromptCandidates(candidates) {
+        return this.promptReceipts.claimUnseen(candidates);
     }
     startSession(delegation) {
-        return this.store
-            .dispatch(new StartDelegationSession(delegation))
-            .pipe(tap(() => this.reloadAfterSessionChange()));
+        return this.store.dispatch(new StartDelegationSession(delegation));
     }
     switchSession(delegation) {
-        return this.store
-            .dispatch(new SwitchDelegationSession(delegation))
-            .pipe(tap(() => this.reloadAfterSessionChange()));
+        return this.store.dispatch(new SwitchDelegationSession(delegation));
     }
     endSession(reason = 'Manual') {
-        return this.store
-            .dispatch(new EndDelegationSession(reason))
-            .pipe(tap(() => this.reloadAfterSessionChange()));
-    }
-    /**
-     * Reload so all data refetches under the new delegation context. The session
-     * slice is persisted, so the (new/cleared) session restores after reload.
-     * Deferred a tick to let NGXS storage flush first.
-     */
-    reloadAfterSessionChange() {
-        if (!this.reloadOnSessionChange) {
-            return;
-        }
-        const win = this.document.defaultView;
-        if (win) {
-            win.setTimeout(() => win.location.reload(), 0);
+        if (this.endInFlight) {
+            return this.endInFlight;
         }
+        const operation = this.store
+            .dispatch(new EndDelegationSession(reason))
+            .pipe(finalize(() => (this.endInFlight = null)), shareReplay({ bufferSize: 1, refCount: false }));
+        this.endInFlight = operation;
+        return operation;
     }
     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' });
@@ -401,11 +557,11 @@ 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.1.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\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <div class=\"flex items-start gap-3\">\r\n      <div class=\"flex flex-col min-w-0\">\r\n        <mt-entity-preview\r\n          [data]=\"userEntity(delegation().delegator)\"\r\n        ></mt-entity-preview>\r\n      </div>\r\n    </div>\r\n\r\n    <p class=\"text-sm text-surface-600 leading-relaxed\">\r\n      {{ t(bodyKey()) }}\r\n    </p>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.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]=\"t(confirmLabelKey())\"\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: 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: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.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      <div class=\"flex flex-col min-w-0\">\n        <mt-entity-preview\n          [data]=\"userEntity(delegation().delegator)\"\n        ></mt-entity-preview>\n      </div>\n    </div>\n\n    <p class=\"text-sm text-surface-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-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(confirmLabelKey())\"\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: 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: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { 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', imports: [CommonModule, Button, EntityPreview, 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      <div class=\"flex flex-col min-w-0\">\r\n        <mt-entity-preview\r\n          [data]=\"userEntity(delegation().delegator)\"\r\n        ></mt-entity-preview>\r\n      </div>\r\n    </div>\r\n\r\n    <p class=\"text-sm text-surface-600 leading-relaxed\">\r\n      {{ t(bodyKey()) }}\r\n    </p>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.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]=\"t(confirmLabelKey())\"\r\n        [loading]=\"isBusy()\"\r\n        (click)=\"confirm()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'mt-start-session-dialog', imports: [CommonModule, Button, EntityPreview, 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      <div class=\"flex flex-col min-w-0\">\n        <mt-entity-preview\n          [data]=\"userEntity(delegation().delegator)\"\n        ></mt-entity-preview>\n      </div>\n    </div>\n\n    <p class=\"text-sm text-surface-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-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(confirmLabelKey())\"\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 }] }] } });
 
 /**
@@ -425,11 +581,11 @@ class DelegationCandidatesPromptDialog {
         this.ref.close(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationCandidatesPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationCandidatesPromptDialog, isStandalone: true, selector: "mt-delegation-candidates-prompt-dialog", inputs: { candidates: { classPropertyName: "candidates", publicName: "candidates", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <p class=\"text-sm leading-relaxed text-surface-600\">\r\n      {{ t(\"delegations.session.promptBody\") }}\r\n    </p>\r\n\r\n    <div class=\"flex max-h-80 flex-col gap-2 overflow-y-auto pr-1\">\r\n      @for (cand of candidates(); track $index) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"flex w-full cursor-pointer items-center justify-between gap-3 rounded-2xl border border-solid border-surface-200 bg-surface-0 px-3 py-3 text-start transition-colors hover:border-primary-300 hover:bg-primary-50/50 focus-visible:border-primary-400 focus-visible:outline-none\"\r\n          [attr.aria-label]=\"\r\n            t('delegations.session.promptStartAria', {\r\n              delegatorName: cand.delegator.displayName,\r\n            })\r\n          \"\r\n          (click)=\"select(cand)\"\r\n        >\r\n          <span class=\"flex min-w-0 items-center gap-3\">\r\n            <mt-entity-preview\r\n              [data]=\"userEntity(cand.delegator)\"\r\n            ></mt-entity-preview>\r\n          </span>\r\n          <span\r\n            class=\"inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-primary\"\r\n          >\r\n            <span class=\"hidden sm:inline\">\r\n              {{ t(\"delegations.action.startSession\") }}\r\n            </span>\r\n            <mt-icon icon=\"arrow.arrow-right\" class=\"text-base\"></mt-icon>\r\n          </span>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex justify-end border-t border-surface-200 pt-3\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.close')\"\r\n        (click)=\"close()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", 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: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { 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: DelegationCandidatesPromptDialog, isStandalone: true, selector: "mt-delegation-candidates-prompt-dialog", inputs: { candidates: { classPropertyName: "candidates", publicName: "candidates", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <p class=\"text-sm leading-relaxed text-surface-600\">\r\n      {{ t(\"delegations.session.promptBody\") }}\r\n    </p>\r\n\r\n    <div class=\"flex max-h-80 flex-col gap-2 overflow-y-auto pr-1\">\r\n      @for (cand of candidates(); track cand.delegationId) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"flex w-full cursor-pointer items-center justify-between gap-3 rounded-2xl border border-solid border-surface-200 bg-surface-0 px-3 py-3 text-start transition-colors hover:border-primary-300 hover:bg-primary-50/50 focus-visible:border-primary-400 focus-visible:outline-none\"\r\n          [attr.aria-label]=\"\r\n            t('delegations.session.promptStartAria', {\r\n              delegatorName: cand.delegator.displayName,\r\n            })\r\n          \"\r\n          (click)=\"select(cand)\"\r\n        >\r\n          <span class=\"flex min-w-0 items-center gap-3\">\r\n            <mt-entity-preview\r\n              [data]=\"userEntity(cand.delegator)\"\r\n            ></mt-entity-preview>\r\n          </span>\r\n          <span\r\n            class=\"inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-primary\"\r\n          >\r\n            <span class=\"hidden sm:inline\">\r\n              {{ t(\"delegations.action.startSession\") }}\r\n            </span>\r\n            <mt-icon icon=\"arrow.arrow-right\" class=\"text-base\"></mt-icon>\r\n          </span>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex justify-end border-t border-surface-200 pt-3\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.close')\"\r\n        (click)=\"close()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", 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: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { 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: DelegationCandidatesPromptDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-delegation-candidates-prompt-dialog', imports: [CommonModule, Button, EntityPreview, Icon, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <p class=\"text-sm leading-relaxed text-surface-600\">\r\n      {{ t(\"delegations.session.promptBody\") }}\r\n    </p>\r\n\r\n    <div class=\"flex max-h-80 flex-col gap-2 overflow-y-auto pr-1\">\r\n      @for (cand of candidates(); track $index) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"flex w-full cursor-pointer items-center justify-between gap-3 rounded-2xl border border-solid border-surface-200 bg-surface-0 px-3 py-3 text-start transition-colors hover:border-primary-300 hover:bg-primary-50/50 focus-visible:border-primary-400 focus-visible:outline-none\"\r\n          [attr.aria-label]=\"\r\n            t('delegations.session.promptStartAria', {\r\n              delegatorName: cand.delegator.displayName,\r\n            })\r\n          \"\r\n          (click)=\"select(cand)\"\r\n        >\r\n          <span class=\"flex min-w-0 items-center gap-3\">\r\n            <mt-entity-preview\r\n              [data]=\"userEntity(cand.delegator)\"\r\n            ></mt-entity-preview>\r\n          </span>\r\n          <span\r\n            class=\"inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-primary\"\r\n          >\r\n            <span class=\"hidden sm:inline\">\r\n              {{ t(\"delegations.action.startSession\") }}\r\n            </span>\r\n            <mt-icon icon=\"arrow.arrow-right\" class=\"text-base\"></mt-icon>\r\n          </span>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex justify-end border-t border-surface-200 pt-3\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.close')\"\r\n        (click)=\"close()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'mt-delegation-candidates-prompt-dialog', imports: [CommonModule, Button, EntityPreview, Icon, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <p class=\"text-sm leading-relaxed text-surface-600\">\r\n      {{ t(\"delegations.session.promptBody\") }}\r\n    </p>\r\n\r\n    <div class=\"flex max-h-80 flex-col gap-2 overflow-y-auto pr-1\">\r\n      @for (cand of candidates(); track cand.delegationId) {\r\n        <button\r\n          type=\"button\"\r\n          class=\"flex w-full cursor-pointer items-center justify-between gap-3 rounded-2xl border border-solid border-surface-200 bg-surface-0 px-3 py-3 text-start transition-colors hover:border-primary-300 hover:bg-primary-50/50 focus-visible:border-primary-400 focus-visible:outline-none\"\r\n          [attr.aria-label]=\"\r\n            t('delegations.session.promptStartAria', {\r\n              delegatorName: cand.delegator.displayName,\r\n            })\r\n          \"\r\n          (click)=\"select(cand)\"\r\n        >\r\n          <span class=\"flex min-w-0 items-center gap-3\">\r\n            <mt-entity-preview\r\n              [data]=\"userEntity(cand.delegator)\"\r\n            ></mt-entity-preview>\r\n          </span>\r\n          <span\r\n            class=\"inline-flex shrink-0 items-center gap-1.5 text-sm font-medium text-primary\"\r\n          >\r\n            <span class=\"hidden sm:inline\">\r\n              {{ t(\"delegations.action.startSession\") }}\r\n            </span>\r\n            <mt-icon icon=\"arrow.arrow-right\" class=\"text-base\"></mt-icon>\r\n          </span>\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex justify-end border-t border-surface-200 pt-3\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.close')\"\r\n        (click)=\"close()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
         }], propDecorators: { candidates: [{ type: i0.Input, args: [{ isSignal: true, alias: "candidates", required: true }] }] } });
 
 const STATUS_VISUAL = {
@@ -464,9 +620,12 @@ const STATUS_VISUAL = {
 };
 class DelegationStatusChip {
     status = input.required(...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-    visual = computed(() => STATUS_VISUAL[this.status()] ?? STATUS_VISUAL.Scheduled, ...(ngDevMode ? [{ debugName: "visual" }] : /* istanbul ignore next */ []));
+    reasonCode = input(null, ...(ngDevMode ? [{ debugName: "reasonCode" }] : /* istanbul ignore next */ []));
+    visual = computed(() => STATUS_VISUAL[this.status() === 'Scheduled' && this.reasonCode() === 'InactiveToday'
+        ? 'InactiveToday'
+        : 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: `
+    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 }, reasonCode: { classPropertyName: "reasonCode", publicName: "reasonCode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <ng-container *transloco="let t">
       @let v = visual();
       <mt-chip [label]="t(v.i18nKey)" [styleClass]="v.styleClass"></mt-chip>
@@ -481,7 +640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
       <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 }] }] } });
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], reasonCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "reasonCode", required: false }] }] } });
 
 /**
  * Embeddable delegation menu content (doc 05, 09): renders the candidate /
@@ -504,6 +663,8 @@ class DelegationMenuPanel {
     active = this.facade.active;
     candidates = this.facade.candidates;
     hasCandidates = this.facade.hasCandidates;
+    hasMoreCandidates = this.facade.hasMoreCandidates;
+    isLoadingCandidates = this.facade.isLoadingCandidates;
     onBehalfOf = this.facade.onBehalfOf;
     executedBy = this.facade.executedBy;
     mode = computed(() => {
@@ -542,6 +703,10 @@ class DelegationMenuPanel {
     onManage() {
         this.closeRequested.emit();
     }
+    loadMore(event) {
+        event.stopPropagation();
+        this.facade.loadMoreCandidates().subscribe();
+    }
     openConfirm(row, intent) {
         this.modal.openModal(StartSessionDialog, 'dialog', {
             header: this.transloco.translate(intent === 'switch'
@@ -554,7 +719,7 @@ class DelegationMenuPanel {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationMenuPanel, isStandalone: true, selector: "mt-delegation-menu-panel", inputs: { managePath: { classPropertyName: "managePath", publicName: "managePath", isSignal: true, isRequired: false, transformFunction: null }, showManageLink: { classPropertyName: "showManageLink", publicName: "showManageLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  @if (mode() !== \"hidden\") {\r\n    <div class=\"flex w-full flex-col\">\r\n      @if (mode() === \"active\" && active(); as session) {\r\n        <!-- Active session -->\r\n        <div class=\"flex items-center gap-3 border-b border-surface px-4 py-3\">\r\n          <mt-avatar\r\n            [label]=\"initials(onBehalfOf())\"\r\n            shape=\"circle\"\r\n            styleClass=\"!size-9 !text-sm !bg-primary-100 !text-primary-700\"\r\n          ></mt-avatar>\r\n          <div class=\"flex min-w-0 flex-1 flex-col\">\r\n            <span\r\n              class=\"text-[0.625rem] font-medium uppercase text-surface-500\"\r\n            >\r\n              {{ t(\"delegations.session.actingOnBehalfOf\") }}\r\n            </span>\r\n            <span class=\"truncate text-sm font-semibold text-surface-900\">\r\n              {{ onBehalfOf()?.displayName }}\r\n            </span>\r\n            <span class=\"truncate text-xs text-surface-500\">\r\n              {{\r\n                t(\"delegations.session.executedBy\", {\r\n                  actualUserName: executedBy()?.displayName,\r\n                })\r\n              }}\r\n            </span>\r\n          </div>\r\n          <mt-delegation-status-chip\r\n            status=\"Active\"\r\n          ></mt-delegation-status-chip>\r\n        </div>\r\n\r\n        <div class=\"flex flex-col p-1.5\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-100\"\r\n            (click)=\"endSession($event)\"\r\n          >\r\n            <mt-icon icon=\"arrow.arrow-left\" styleClass=\"text-base\"></mt-icon>\r\n            <span>{{ t(\"delegations.action.endSession\") }}</span>\r\n          </button>\r\n        </div>\r\n\r\n        @if (candidates().length > 1) {\r\n          <div class=\"border-t border-surface p-1.5\">\r\n            <div\r\n              class=\"px-2 pb-1 text-[0.625rem] font-medium uppercase text-surface-400\"\r\n            >\r\n              {{ t(\"delegations.session.switchToAnother\") }}\r\n            </div>\r\n            @for (cand of candidates(); track $index) {\r\n              @if (cand.delegationId !== session.delegation.delegationId) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\r\n                  [attr.aria-label]=\"\r\n                    t('delegations.action.switchSession') +\r\n                    ': ' +\r\n                    cand.delegator.displayName\r\n                  \"\r\n                  (click)=\"switchTo(cand, $event)\"\r\n                >\r\n                  <mt-avatar\r\n                    [label]=\"initials(cand.delegator)\"\r\n                    shape=\"circle\"\r\n                    styleClass=\"!size-8 !text-xs !bg-surface-100 !text-surface-600\"\r\n                  ></mt-avatar>\r\n                  <span\r\n                    class=\"min-w-0 flex-1 truncate text-sm font-medium text-surface-800\"\r\n                  >\r\n                    {{ cand.delegator.displayName }}\r\n                  </span>\r\n                  <mt-icon\r\n                    icon=\"arrow.switch-horizontal-01\"\r\n                    styleClass=\"text-base text-surface-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        <!-- Candidates available -->\r\n        <div class=\"border-b border-surface px-4 py-3\">\r\n          <div class=\"text-sm font-semibold text-surface-900\">\r\n            {{ t(\"delegations.session.youCanActAs\") }}\r\n          </div>\r\n          <div class=\"mt-0.5 text-xs text-surface-500\">\r\n            {{ t(\"delegations.session.chooseDelegatorHint\") }}\r\n          </div>\r\n        </div>\r\n        <div class=\"flex max-h-72 flex-col overflow-y-auto p-1.5\">\r\n          @for (cand of candidates(); track $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\r\n              [attr.aria-label]=\"\r\n                t('delegations.action.startSession') +\r\n                ': ' +\r\n                cand.delegator.displayName\r\n              \"\r\n              (click)=\"start(cand, $event)\"\r\n            >\r\n              <mt-avatar\r\n                [label]=\"initials(cand.delegator)\"\r\n                shape=\"circle\"\r\n                styleClass=\"!size-8 !text-xs !bg-primary-100 !text-primary-700\"\r\n              ></mt-avatar>\r\n              <span class=\"flex min-w-0 flex-1 flex-col\">\r\n                <span class=\"truncate text-sm font-medium text-surface-800\">\r\n                  {{ cand.delegator.displayName }}\r\n                </span>\r\n                @if (cand.delegator.email) {\r\n                  <span class=\"truncate text-xs text-surface-500\">\r\n                    {{ cand.delegator.email }}\r\n                  </span>\r\n                }\r\n              </span>\r\n              <mt-icon\r\n                icon=\"arrow.arrow-right\"\r\n                styleClass=\"text-base text-surface-400\"\r\n              ></mt-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (showManageLink()) {\r\n        <div class=\"border-t border-surface p-1.5\">\r\n          <a\r\n            [routerLink]=\"managePath()\"\r\n            (click)=\"onManage()\"\r\n            class=\"flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm text-surface-700 hover:bg-surface-100\"\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.session.manage\") }}</span>\r\n          </a>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\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: Icon, selector: "mt-icon", inputs: ["icon"] }, { 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationMenuPanel, isStandalone: true, selector: "mt-delegation-menu-panel", inputs: { managePath: { classPropertyName: "managePath", publicName: "managePath", isSignal: true, isRequired: false, transformFunction: null }, showManageLink: { classPropertyName: "showManageLink", publicName: "showManageLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  @if (mode() !== \"hidden\") {\r\n    <div class=\"flex w-full flex-col\">\r\n      @if (mode() === \"active\" && active(); as session) {\r\n        <!-- Active session -->\r\n        <div class=\"flex items-center gap-3 border-b border-surface px-4 py-3\">\r\n          <mt-avatar\r\n            [label]=\"initials(onBehalfOf())\"\r\n            shape=\"circle\"\r\n            styleClass=\"!size-9 !text-sm !bg-primary-100 !text-primary-700\"\r\n          ></mt-avatar>\r\n          <div class=\"flex min-w-0 flex-1 flex-col\">\r\n            <span\r\n              class=\"text-[0.625rem] font-medium uppercase text-surface-500\"\r\n            >\r\n              {{ t(\"delegations.session.actingOnBehalfOf\") }}\r\n            </span>\r\n            <span class=\"truncate text-sm font-semibold text-surface-900\">\r\n              {{ onBehalfOf()?.displayName }}\r\n            </span>\r\n            <span class=\"truncate text-xs text-surface-500\">\r\n              {{\r\n                t(\"delegations.session.executedBy\", {\r\n                  actualUserName: executedBy()?.displayName,\r\n                })\r\n              }}\r\n            </span>\r\n          </div>\r\n          <mt-delegation-status-chip\r\n            status=\"Active\"\r\n          ></mt-delegation-status-chip>\r\n        </div>\r\n\r\n        <div class=\"flex flex-col p-1.5\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-100\"\r\n            (click)=\"endSession($event)\"\r\n          >\r\n            <mt-icon icon=\"arrow.arrow-left\" styleClass=\"text-base\"></mt-icon>\r\n            <span>{{ t(\"delegations.action.endSession\") }}</span>\r\n          </button>\r\n        </div>\r\n\r\n        @if (candidates().length > 1) {\r\n          <div class=\"border-t border-surface p-1.5\">\r\n            <div\r\n              class=\"px-2 pb-1 text-[0.625rem] font-medium uppercase text-surface-400\"\r\n            >\r\n              {{ t(\"delegations.session.switchToAnother\") }}\r\n            </div>\r\n            @for (cand of candidates(); track cand.delegationId) {\r\n              @if (cand.delegationId !== session.delegation.delegationId) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\r\n                  [attr.aria-label]=\"\r\n                    t('delegations.action.switchSession') +\r\n                    ': ' +\r\n                    cand.delegator.displayName\r\n                  \"\r\n                  (click)=\"switchTo(cand, $event)\"\r\n                >\r\n                  <mt-avatar\r\n                    [label]=\"initials(cand.delegator)\"\r\n                    shape=\"circle\"\r\n                    styleClass=\"!size-8 !text-xs !bg-surface-100 !text-surface-600\"\r\n                  ></mt-avatar>\r\n                  <span\r\n                    class=\"min-w-0 flex-1 truncate text-sm font-medium text-surface-800\"\r\n                  >\r\n                    {{ cand.delegator.displayName }}\r\n                  </span>\r\n                  <mt-icon\r\n                    icon=\"arrow.switch-horizontal-01\"\r\n                    styleClass=\"text-base text-surface-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        <!-- Candidates available -->\r\n        <div class=\"border-b border-surface px-4 py-3\">\r\n          <div class=\"text-sm font-semibold text-surface-900\">\r\n            {{ t(\"delegations.session.youCanActAs\") }}\r\n          </div>\r\n          <div class=\"mt-0.5 text-xs text-surface-500\">\r\n            {{ t(\"delegations.session.chooseDelegatorHint\") }}\r\n          </div>\r\n        </div>\r\n        <div class=\"flex max-h-72 flex-col overflow-y-auto p-1.5\">\r\n          @for (cand of candidates(); track cand.delegationId) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\r\n              [attr.aria-label]=\"\r\n                t('delegations.action.startSession') +\r\n                ': ' +\r\n                cand.delegator.displayName\r\n              \"\r\n              (click)=\"start(cand, $event)\"\r\n            >\r\n              <mt-avatar\r\n                [label]=\"initials(cand.delegator)\"\r\n                shape=\"circle\"\r\n                styleClass=\"!size-8 !text-xs !bg-primary-100 !text-primary-700\"\r\n              ></mt-avatar>\r\n              <span class=\"flex min-w-0 flex-1 flex-col\">\r\n                <span class=\"truncate text-sm font-medium text-surface-800\">\r\n                  {{ cand.delegator.displayName }}\r\n                </span>\r\n                @if (cand.delegator.email) {\r\n                  <span class=\"truncate text-xs text-surface-500\">\r\n                    {{ cand.delegator.email }}\r\n                  </span>\r\n                }\r\n              </span>\r\n              <mt-icon\r\n                icon=\"arrow.arrow-right\"\r\n                styleClass=\"text-base text-surface-400\"\r\n              ></mt-icon>\r\n            </button>\r\n          }\r\n          @if (hasMoreCandidates()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"mx-2 my-1 rounded-lg px-3 py-2 text-sm font-medium text-primary hover:bg-primary-50 disabled:opacity-60\"\r\n              [disabled]=\"isLoadingCandidates()\"\r\n              (click)=\"loadMore($event)\"\r\n            >\r\n              {{ t(\"delegations.session.loadMore\") }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (showManageLink()) {\r\n        <div class=\"border-t border-surface p-1.5\">\r\n          <a\r\n            [routerLink]=\"managePath()\"\r\n            (click)=\"onManage()\"\r\n            class=\"flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm text-surface-700 hover:bg-surface-100\"\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.session.manage\") }}</span>\r\n          </a>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\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: Icon, selector: "mt-icon", inputs: ["icon"] }, { 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", "reasonCode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationMenuPanel, decorators: [{
             type: Component,
@@ -565,7 +730,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=\"flex w-full flex-col\">\r\n      @if (mode() === \"active\" && active(); as session) {\r\n        <!-- Active session -->\r\n        <div class=\"flex items-center gap-3 border-b border-surface px-4 py-3\">\r\n          <mt-avatar\r\n            [label]=\"initials(onBehalfOf())\"\r\n            shape=\"circle\"\r\n            styleClass=\"!size-9 !text-sm !bg-primary-100 !text-primary-700\"\r\n          ></mt-avatar>\r\n          <div class=\"flex min-w-0 flex-1 flex-col\">\r\n            <span\r\n              class=\"text-[0.625rem] font-medium uppercase text-surface-500\"\r\n            >\r\n              {{ t(\"delegations.session.actingOnBehalfOf\") }}\r\n            </span>\r\n            <span class=\"truncate text-sm font-semibold text-surface-900\">\r\n              {{ onBehalfOf()?.displayName }}\r\n            </span>\r\n            <span class=\"truncate text-xs text-surface-500\">\r\n              {{\r\n                t(\"delegations.session.executedBy\", {\r\n                  actualUserName: executedBy()?.displayName,\r\n                })\r\n              }}\r\n            </span>\r\n          </div>\r\n          <mt-delegation-status-chip\r\n            status=\"Active\"\r\n          ></mt-delegation-status-chip>\r\n        </div>\r\n\r\n        <div class=\"flex flex-col p-1.5\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-100\"\r\n            (click)=\"endSession($event)\"\r\n          >\r\n            <mt-icon icon=\"arrow.arrow-left\" styleClass=\"text-base\"></mt-icon>\r\n            <span>{{ t(\"delegations.action.endSession\") }}</span>\r\n          </button>\r\n        </div>\r\n\r\n        @if (candidates().length > 1) {\r\n          <div class=\"border-t border-surface p-1.5\">\r\n            <div\r\n              class=\"px-2 pb-1 text-[0.625rem] font-medium uppercase text-surface-400\"\r\n            >\r\n              {{ t(\"delegations.session.switchToAnother\") }}\r\n            </div>\r\n            @for (cand of candidates(); track $index) {\r\n              @if (cand.delegationId !== session.delegation.delegationId) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\r\n                  [attr.aria-label]=\"\r\n                    t('delegations.action.switchSession') +\r\n                    ': ' +\r\n                    cand.delegator.displayName\r\n                  \"\r\n                  (click)=\"switchTo(cand, $event)\"\r\n                >\r\n                  <mt-avatar\r\n                    [label]=\"initials(cand.delegator)\"\r\n                    shape=\"circle\"\r\n                    styleClass=\"!size-8 !text-xs !bg-surface-100 !text-surface-600\"\r\n                  ></mt-avatar>\r\n                  <span\r\n                    class=\"min-w-0 flex-1 truncate text-sm font-medium text-surface-800\"\r\n                  >\r\n                    {{ cand.delegator.displayName }}\r\n                  </span>\r\n                  <mt-icon\r\n                    icon=\"arrow.switch-horizontal-01\"\r\n                    styleClass=\"text-base text-surface-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        <!-- Candidates available -->\r\n        <div class=\"border-b border-surface px-4 py-3\">\r\n          <div class=\"text-sm font-semibold text-surface-900\">\r\n            {{ t(\"delegations.session.youCanActAs\") }}\r\n          </div>\r\n          <div class=\"mt-0.5 text-xs text-surface-500\">\r\n            {{ t(\"delegations.session.chooseDelegatorHint\") }}\r\n          </div>\r\n        </div>\r\n        <div class=\"flex max-h-72 flex-col overflow-y-auto p-1.5\">\r\n          @for (cand of candidates(); track $index) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\r\n              [attr.aria-label]=\"\r\n                t('delegations.action.startSession') +\r\n                ': ' +\r\n                cand.delegator.displayName\r\n              \"\r\n              (click)=\"start(cand, $event)\"\r\n            >\r\n              <mt-avatar\r\n                [label]=\"initials(cand.delegator)\"\r\n                shape=\"circle\"\r\n                styleClass=\"!size-8 !text-xs !bg-primary-100 !text-primary-700\"\r\n              ></mt-avatar>\r\n              <span class=\"flex min-w-0 flex-1 flex-col\">\r\n                <span class=\"truncate text-sm font-medium text-surface-800\">\r\n                  {{ cand.delegator.displayName }}\r\n                </span>\r\n                @if (cand.delegator.email) {\r\n                  <span class=\"truncate text-xs text-surface-500\">\r\n                    {{ cand.delegator.email }}\r\n                  </span>\r\n                }\r\n              </span>\r\n              <mt-icon\r\n                icon=\"arrow.arrow-right\"\r\n                styleClass=\"text-base text-surface-400\"\r\n              ></mt-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (showManageLink()) {\r\n        <div class=\"border-t border-surface p-1.5\">\r\n          <a\r\n            [routerLink]=\"managePath()\"\r\n            (click)=\"onManage()\"\r\n            class=\"flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm text-surface-700 hover:bg-surface-100\"\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.session.manage\") }}</span>\r\n          </a>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</ng-container>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  @if (mode() !== \"hidden\") {\r\n    <div class=\"flex w-full flex-col\">\r\n      @if (mode() === \"active\" && active(); as session) {\r\n        <!-- Active session -->\r\n        <div class=\"flex items-center gap-3 border-b border-surface px-4 py-3\">\r\n          <mt-avatar\r\n            [label]=\"initials(onBehalfOf())\"\r\n            shape=\"circle\"\r\n            styleClass=\"!size-9 !text-sm !bg-primary-100 !text-primary-700\"\r\n          ></mt-avatar>\r\n          <div class=\"flex min-w-0 flex-1 flex-col\">\r\n            <span\r\n              class=\"text-[0.625rem] font-medium uppercase text-surface-500\"\r\n            >\r\n              {{ t(\"delegations.session.actingOnBehalfOf\") }}\r\n            </span>\r\n            <span class=\"truncate text-sm font-semibold text-surface-900\">\r\n              {{ onBehalfOf()?.displayName }}\r\n            </span>\r\n            <span class=\"truncate text-xs text-surface-500\">\r\n              {{\r\n                t(\"delegations.session.executedBy\", {\r\n                  actualUserName: executedBy()?.displayName,\r\n                })\r\n              }}\r\n            </span>\r\n          </div>\r\n          <mt-delegation-status-chip\r\n            status=\"Active\"\r\n          ></mt-delegation-status-chip>\r\n        </div>\r\n\r\n        <div class=\"flex flex-col p-1.5\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-100\"\r\n            (click)=\"endSession($event)\"\r\n          >\r\n            <mt-icon icon=\"arrow.arrow-left\" styleClass=\"text-base\"></mt-icon>\r\n            <span>{{ t(\"delegations.action.endSession\") }}</span>\r\n          </button>\r\n        </div>\r\n\r\n        @if (candidates().length > 1) {\r\n          <div class=\"border-t border-surface p-1.5\">\r\n            <div\r\n              class=\"px-2 pb-1 text-[0.625rem] font-medium uppercase text-surface-400\"\r\n            >\r\n              {{ t(\"delegations.session.switchToAnother\") }}\r\n            </div>\r\n            @for (cand of candidates(); track cand.delegationId) {\r\n              @if (cand.delegationId !== session.delegation.delegationId) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\r\n                  [attr.aria-label]=\"\r\n                    t('delegations.action.switchSession') +\r\n                    ': ' +\r\n                    cand.delegator.displayName\r\n                  \"\r\n                  (click)=\"switchTo(cand, $event)\"\r\n                >\r\n                  <mt-avatar\r\n                    [label]=\"initials(cand.delegator)\"\r\n                    shape=\"circle\"\r\n                    styleClass=\"!size-8 !text-xs !bg-surface-100 !text-surface-600\"\r\n                  ></mt-avatar>\r\n                  <span\r\n                    class=\"min-w-0 flex-1 truncate text-sm font-medium text-surface-800\"\r\n                  >\r\n                    {{ cand.delegator.displayName }}\r\n                  </span>\r\n                  <mt-icon\r\n                    icon=\"arrow.switch-horizontal-01\"\r\n                    styleClass=\"text-base text-surface-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        <!-- Candidates available -->\r\n        <div class=\"border-b border-surface px-4 py-3\">\r\n          <div class=\"text-sm font-semibold text-surface-900\">\r\n            {{ t(\"delegations.session.youCanActAs\") }}\r\n          </div>\r\n          <div class=\"mt-0.5 text-xs text-surface-500\">\r\n            {{ t(\"delegations.session.chooseDelegatorHint\") }}\r\n          </div>\r\n        </div>\r\n        <div class=\"flex max-h-72 flex-col overflow-y-auto p-1.5\">\r\n          @for (cand of candidates(); track cand.delegationId) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\r\n              [attr.aria-label]=\"\r\n                t('delegations.action.startSession') +\r\n                ': ' +\r\n                cand.delegator.displayName\r\n              \"\r\n              (click)=\"start(cand, $event)\"\r\n            >\r\n              <mt-avatar\r\n                [label]=\"initials(cand.delegator)\"\r\n                shape=\"circle\"\r\n                styleClass=\"!size-8 !text-xs !bg-primary-100 !text-primary-700\"\r\n              ></mt-avatar>\r\n              <span class=\"flex min-w-0 flex-1 flex-col\">\r\n                <span class=\"truncate text-sm font-medium text-surface-800\">\r\n                  {{ cand.delegator.displayName }}\r\n                </span>\r\n                @if (cand.delegator.email) {\r\n                  <span class=\"truncate text-xs text-surface-500\">\r\n                    {{ cand.delegator.email }}\r\n                  </span>\r\n                }\r\n              </span>\r\n              <mt-icon\r\n                icon=\"arrow.arrow-right\"\r\n                styleClass=\"text-base text-surface-400\"\r\n              ></mt-icon>\r\n            </button>\r\n          }\r\n          @if (hasMoreCandidates()) {\r\n            <button\r\n              type=\"button\"\r\n              class=\"mx-2 my-1 rounded-lg px-3 py-2 text-sm font-medium text-primary hover:bg-primary-50 disabled:opacity-60\"\r\n              [disabled]=\"isLoadingCandidates()\"\r\n              (click)=\"loadMore($event)\"\r\n            >\r\n              {{ t(\"delegations.session.loadMore\") }}\r\n            </button>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @if (showManageLink()) {\r\n        <div class=\"border-t border-surface p-1.5\">\r\n          <a\r\n            [routerLink]=\"managePath()\"\r\n            (click)=\"onManage()\"\r\n            class=\"flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm text-surface-700 hover:bg-surface-100\"\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.session.manage\") }}</span>\r\n          </a>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</ng-container>\r\n" }]
         }], propDecorators: { managePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "managePath", required: false }] }], showManageLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "showManageLink", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
 
 /**
@@ -603,8 +768,10 @@ class TopbarDelegationMenu {
     hasCandidates = this.facade.hasCandidates;
     onBehalfOf = this.facade.onBehalfOf;
     executedBy = this.facade.executedBy;
-    /** Per-instance guard; the persisted `facade.prompted()` guards across refresh. */
-    localPrompted = false;
+    popoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "popoverOpen" }] : /* istanbul ignore next */ []));
+    promptPending = false;
+    promptRefreshQueued = false;
+    promptFlowOpen = false;
     mode = computed(() => {
         if (this.active())
             return 'active';
@@ -613,22 +780,15 @@ class TopbarDelegationMenu {
         return 'hidden';
     }, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
     constructor() {
-        // Show the "delegations available" prompt once per login (not on every
-        // refresh): `facade.prompted()` is reset on login and persisted thereafter.
+        // The receipt service atomically persists opaque delegation/version hashes
+        // before opening, so recreation, refresh, and concurrent loads cannot
+        // reopen the same prompt.
         effect(() => {
             const candidates = this.candidates();
-            if (!this.promptOnCandidates() ||
-                this.active() ||
-                this.facade.prompted() ||
-                this.localPrompted ||
-                candidates.length === 0) {
+            if (!this.promptOnCandidates() || this.active() || !candidates.length) {
                 return;
             }
-            this.localPrompted = true;
-            queueMicrotask(() => {
-                this.facade.markPrompted();
-                this.openCandidatesPrompt(candidates);
-            });
+            this.checkPromptCandidates(candidates);
         });
     }
     ngOnInit() {
@@ -651,8 +811,32 @@ class TopbarDelegationMenu {
     closePopover() {
         this.popover()?.hide();
     }
+    checkPromptCandidates(candidates) {
+        if (this.promptPending || this.promptFlowOpen) {
+            this.promptRefreshQueued = true;
+            return;
+        }
+        this.promptPending = true;
+        void this.facade
+            .claimPromptCandidates(candidates)
+            .then((unseen) => {
+            if (unseen.length && !this.active()) {
+                this.openCandidatesPrompt(unseen);
+            }
+        })
+            .finally(() => {
+            this.promptPending = false;
+            if (this.promptRefreshQueued) {
+                this.promptRefreshQueued = false;
+                const latest = this.candidates();
+                if (this.promptOnCandidates() && !this.active() && latest.length) {
+                    this.checkPromptCandidates(latest);
+                }
+            }
+        });
+    }
     openConfirm(row, intent) {
-        this.modal.openModal(StartSessionDialog, 'dialog', {
+        return this.modal.openModal(StartSessionDialog, 'dialog', {
             header: this.transloco.translate(intent === 'switch'
                 ? 'delegations.action.switchSession'
                 : 'delegations.action.startSession'),
@@ -663,6 +847,7 @@ class TopbarDelegationMenu {
         });
     }
     openCandidatesPrompt(candidates) {
+        this.promptFlowOpen = true;
         const ref = this.modal.openModal(DelegationCandidatesPromptDialog, 'dialog', {
             header: this.transloco.translate('delegations.session.availableTitle'),
             styleClass: '!w-[min(96vw,34rem)] !max-w-[96vw]',
@@ -672,12 +857,25 @@ class TopbarDelegationMenu {
         });
         ref.onClose.subscribe((row) => {
             if (row) {
-                this.openConfirm(row, 'start');
+                this.openConfirm(row, 'start').onClose.subscribe(() => this.finishPromptFlow());
+            }
+            else {
+                this.finishPromptFlow();
             }
         });
     }
+    finishPromptFlow() {
+        this.promptFlowOpen = false;
+        if (!this.promptRefreshQueued)
+            return;
+        this.promptRefreshQueued = false;
+        const latest = this.candidates();
+        if (this.promptOnCandidates() && !this.active() && latest.length) {
+            this.checkPromptCandidates(latest);
+        }
+    }
     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 }, showManageLink: { classPropertyName: "showManageLink", publicName: "showManageLink", isSignal: true, isRequired: false, transformFunction: null }, promptOnCandidates: { classPropertyName: "promptOnCandidates", publicName: "promptOnCandidates", isSignal: true, isRequired: false, transformFunction: null }, headless: { classPropertyName: "headless", publicName: "headless", 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  <!-- Headless = controller only (no topbar UI); the menu is surfaced in the\r\n       host user dropdown via <mt-delegation-menu-panel>. -->\r\n  @if (!headless() && mode() !== \"hidden\") {\r\n    @if (mode() === \"active\") {\r\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\r\n        {{\r\n          t(\"delegations.session.banner\", {\r\n            delegatorName: onBehalfOf()?.displayName,\r\n          })\r\n        }}.\r\n        {{\r\n          t(\"delegations.session.executedBy\", {\r\n            actualUserName: executedBy()?.displayName,\r\n          })\r\n        }}\r\n      </span>\r\n    }\r\n\r\n    <div class=\"mt-delegation-trigger flex items-center\">\r\n      @if (mode() === \"active\") {\r\n        <!-- Active: show the delegator like a user identity, with a switcher caret -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"mt-delegation-trigger__button mt-delegation-trigger__button--active flex min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-full p-1 pe-2 text-current\"\r\n          [attr.aria-label]=\"\r\n            t('delegations.session.banner', {\r\n              delegatorName: onBehalfOf()?.displayName,\r\n            }) +\r\n            '. ' +\r\n            t('delegations.session.executedBy', {\r\n              actualUserName: executedBy()?.displayName,\r\n            })\r\n          \"\r\n          (click)=\"togglePopover($event)\"\r\n        >\r\n          <span class=\"relative shrink-0\">\r\n            <mt-avatar\r\n              [label]=\"initials(onBehalfOf())\"\r\n              shape=\"circle\"\r\n              styleClass=\"!size-7 !text-[0.7rem] !bg-primary-100 !text-primary-700\"\r\n            ></mt-avatar>\r\n            <span\r\n              class=\"absolute -bottom-0.5 -end-0.5 flex size-3.5 items-center justify-center rounded-full bg-emerald-500 ring-2 ring-white\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <mt-icon\r\n                icon=\"user.users-check\"\r\n                styleClass=\"text-[0.55rem] text-white\"\r\n              ></mt-icon>\r\n            </span>\r\n          </span>\r\n          @if (!compact()) {\r\n            <span\r\n              class=\"mt-delegation-trigger__label hidden min-w-0 flex-col text-start leading-tight md:flex\"\r\n            >\r\n              <span class=\"text-[0.625rem] font-medium uppercase opacity-60\">\r\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\r\n              </span>\r\n              <span class=\"truncate text-sm font-semibold\">\r\n                {{ onBehalfOf()?.displayName }}\r\n              </span>\r\n            </span>\r\n          }\r\n          <mt-icon\r\n            icon=\"arrow.chevron-down\"\r\n            styleClass=\"text-sm opacity-70\"\r\n          ></mt-icon>\r\n        </button>\r\n      } @else {\r\n        <!-- Candidates: plain icon button matching the other topbar icons -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"mt-delegation-trigger__icon relative flex size-9 cursor-pointer items-center justify-center rounded-full text-current\"\r\n          [attr.aria-label]=\"t('delegations.session.availableTitle')\"\r\n          (click)=\"togglePopover($event)\"\r\n        >\r\n          <mt-icon icon=\"user.users-plus\" styleClass=\"text-xl\"></mt-icon>\r\n          @if (candidates().length > 0) {\r\n            <span\r\n              class=\"absolute -top-0.5 -end-0.5 inline-flex min-w-[1.05rem] items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-bold leading-4 text-white ring-2 ring-white\"\r\n            >\r\n              {{ candidates().length }}\r\n            </span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\r\n      <div class=\"w-72 max-w-[88vw]\">\r\n        <mt-delegation-menu-panel\r\n          [managePath]=\"managePath()\"\r\n          [showManageLink]=\"showManageLink()\"\r\n          (closeRequested)=\"closePopover()\"\r\n        ></mt-delegation-menu-panel>\r\n      </div>\r\n    </p-popover>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.mt-delegation-trigger{min-width:0;max-width:100%}.mt-delegation-trigger__button,.mt-delegation-trigger__icon{transition:background-color .15s ease-out;border:1px solid transparent}.mt-delegation-trigger__button:hover,.mt-delegation-trigger__icon:hover{background-color:var(--p-surface-100, rgba(0, 0, 0, .05))}.mt-delegation-trigger__button--active{background-color:var(--p-surface-100, rgba(0, 0, 0, .05));border-color:var(--p-surface-200, rgba(0, 0, 0, .08))}.mt-delegation-trigger__button--active:hover{background-color:var(--p-surface-200, rgba(0, 0, 0, .08))}.mt-delegation-trigger__label{max-width:min(12rem,20vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1280px){.mt-delegation-trigger__label{max-width:8rem}}\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: 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: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationMenuPanel, selector: "mt-delegation-menu-panel", inputs: ["managePath", "showManageLink"], outputs: ["closeRequested"] }], 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 }, showManageLink: { classPropertyName: "showManageLink", publicName: "showManageLink", isSignal: true, isRequired: false, transformFunction: null }, promptOnCandidates: { classPropertyName: "promptOnCandidates", publicName: "promptOnCandidates", isSignal: true, isRequired: false, transformFunction: null }, headless: { classPropertyName: "headless", publicName: "headless", 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  <!-- Headless = controller only (no topbar UI); the menu is surfaced in the\r\n       host user dropdown via <mt-delegation-menu-panel>. -->\r\n  @if (!headless() && mode() !== \"hidden\") {\r\n    @if (mode() === \"active\") {\r\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\r\n        {{\r\n          t(\"delegations.session.banner\", {\r\n            delegatorName: onBehalfOf()?.displayName,\r\n          })\r\n        }}.\r\n        {{\r\n          t(\"delegations.session.executedBy\", {\r\n            actualUserName: executedBy()?.displayName,\r\n          })\r\n        }}\r\n      </span>\r\n    }\r\n\r\n    <div class=\"mt-delegation-trigger flex items-center\">\r\n      @if (mode() === \"active\") {\r\n        <!-- Active: show the delegator like a user identity, with a switcher caret -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"mt-delegation-trigger__button mt-delegation-trigger__button--active flex min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-full p-1 pe-2 text-current\"\r\n          [attr.aria-label]=\"\r\n            t('delegations.session.banner', {\r\n              delegatorName: onBehalfOf()?.displayName,\r\n            }) +\r\n            '. ' +\r\n            t('delegations.session.executedBy', {\r\n              actualUserName: executedBy()?.displayName,\r\n            })\r\n          \"\r\n          [attr.aria-expanded]=\"popoverOpen()\"\r\n          aria-haspopup=\"dialog\"\r\n          (click)=\"togglePopover($event)\"\r\n        >\r\n          <span class=\"relative shrink-0\">\r\n            <mt-avatar\r\n              [label]=\"initials(onBehalfOf())\"\r\n              shape=\"circle\"\r\n              styleClass=\"!size-7 !text-[0.7rem] !bg-primary-100 !text-primary-700\"\r\n            ></mt-avatar>\r\n            <span\r\n              class=\"absolute -bottom-0.5 -end-0.5 flex size-3.5 items-center justify-center rounded-full bg-emerald-500 ring-2 ring-white\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <mt-icon\r\n                icon=\"user.users-check\"\r\n                styleClass=\"text-[0.55rem] text-white\"\r\n              ></mt-icon>\r\n            </span>\r\n          </span>\r\n          @if (!compact()) {\r\n            <span\r\n              class=\"mt-delegation-trigger__label hidden min-w-0 flex-col text-start leading-tight md:flex\"\r\n            >\r\n              <span class=\"text-[0.625rem] font-medium uppercase opacity-60\">\r\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\r\n              </span>\r\n              <span class=\"truncate text-sm font-semibold\">\r\n                {{ onBehalfOf()?.displayName }}\r\n              </span>\r\n            </span>\r\n          }\r\n          <mt-icon\r\n            icon=\"arrow.chevron-down\"\r\n            styleClass=\"text-sm opacity-70\"\r\n          ></mt-icon>\r\n        </button>\r\n      } @else {\r\n        <!-- Candidates: plain icon button matching the other topbar icons -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"mt-delegation-trigger__icon relative flex size-9 cursor-pointer items-center justify-center rounded-full text-current\"\r\n          [attr.aria-label]=\"t('delegations.session.availableTitle')\"\r\n          [attr.aria-expanded]=\"popoverOpen()\"\r\n          aria-haspopup=\"dialog\"\r\n          (click)=\"togglePopover($event)\"\r\n        >\r\n          <mt-icon icon=\"user.users-plus\" styleClass=\"text-xl\"></mt-icon>\r\n          @if (candidates().length > 0) {\r\n            <span\r\n              class=\"absolute -top-0.5 -end-0.5 inline-flex min-w-[1.05rem] items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-bold leading-4 text-white ring-2 ring-white\"\r\n            >\r\n              {{ candidates().length }}\r\n            </span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <p-popover\r\n      #popover\r\n      [pt]=\"{ content: { class: 'p-0!' } }\"\r\n      (onShow)=\"popoverOpen.set(true)\"\r\n      (onHide)=\"popoverOpen.set(false)\"\r\n    >\r\n      <div class=\"w-72 max-w-[88vw]\">\r\n        <mt-delegation-menu-panel\r\n          [managePath]=\"managePath()\"\r\n          [showManageLink]=\"showManageLink()\"\r\n          (closeRequested)=\"closePopover()\"\r\n        ></mt-delegation-menu-panel>\r\n      </div>\r\n    </p-popover>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.mt-delegation-trigger{min-width:0;max-width:100%}.mt-delegation-trigger__button,.mt-delegation-trigger__icon{transition:background-color .15s ease-out;border:1px solid transparent}.mt-delegation-trigger__button:hover,.mt-delegation-trigger__icon:hover{background-color:var(--p-surface-100, rgba(0, 0, 0, .05))}.mt-delegation-trigger__button--active{background-color:var(--p-surface-100, rgba(0, 0, 0, .05));border-color:var(--p-surface-200, rgba(0, 0, 0, .08))}.mt-delegation-trigger__button--active:hover{background-color:var(--p-surface-200, rgba(0, 0, 0, .08))}.mt-delegation-trigger__label{max-width:min(12rem,20vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1280px){.mt-delegation-trigger__label{max-width:8rem}}\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: 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: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationMenuPanel, selector: "mt-delegation-menu-panel", inputs: ["managePath", "showManageLink"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TopbarDelegationMenu, decorators: [{
             type: Component,
@@ -688,7 +886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Popover,
                         TranslocoDirective,
                         DelegationMenuPanel,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <!-- Headless = controller only (no topbar UI); the menu is surfaced in the\r\n       host user dropdown via <mt-delegation-menu-panel>. -->\r\n  @if (!headless() && mode() !== \"hidden\") {\r\n    @if (mode() === \"active\") {\r\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\r\n        {{\r\n          t(\"delegations.session.banner\", {\r\n            delegatorName: onBehalfOf()?.displayName,\r\n          })\r\n        }}.\r\n        {{\r\n          t(\"delegations.session.executedBy\", {\r\n            actualUserName: executedBy()?.displayName,\r\n          })\r\n        }}\r\n      </span>\r\n    }\r\n\r\n    <div class=\"mt-delegation-trigger flex items-center\">\r\n      @if (mode() === \"active\") {\r\n        <!-- Active: show the delegator like a user identity, with a switcher caret -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"mt-delegation-trigger__button mt-delegation-trigger__button--active flex min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-full p-1 pe-2 text-current\"\r\n          [attr.aria-label]=\"\r\n            t('delegations.session.banner', {\r\n              delegatorName: onBehalfOf()?.displayName,\r\n            }) +\r\n            '. ' +\r\n            t('delegations.session.executedBy', {\r\n              actualUserName: executedBy()?.displayName,\r\n            })\r\n          \"\r\n          (click)=\"togglePopover($event)\"\r\n        >\r\n          <span class=\"relative shrink-0\">\r\n            <mt-avatar\r\n              [label]=\"initials(onBehalfOf())\"\r\n              shape=\"circle\"\r\n              styleClass=\"!size-7 !text-[0.7rem] !bg-primary-100 !text-primary-700\"\r\n            ></mt-avatar>\r\n            <span\r\n              class=\"absolute -bottom-0.5 -end-0.5 flex size-3.5 items-center justify-center rounded-full bg-emerald-500 ring-2 ring-white\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <mt-icon\r\n                icon=\"user.users-check\"\r\n                styleClass=\"text-[0.55rem] text-white\"\r\n              ></mt-icon>\r\n            </span>\r\n          </span>\r\n          @if (!compact()) {\r\n            <span\r\n              class=\"mt-delegation-trigger__label hidden min-w-0 flex-col text-start leading-tight md:flex\"\r\n            >\r\n              <span class=\"text-[0.625rem] font-medium uppercase opacity-60\">\r\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\r\n              </span>\r\n              <span class=\"truncate text-sm font-semibold\">\r\n                {{ onBehalfOf()?.displayName }}\r\n              </span>\r\n            </span>\r\n          }\r\n          <mt-icon\r\n            icon=\"arrow.chevron-down\"\r\n            styleClass=\"text-sm opacity-70\"\r\n          ></mt-icon>\r\n        </button>\r\n      } @else {\r\n        <!-- Candidates: plain icon button matching the other topbar icons -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"mt-delegation-trigger__icon relative flex size-9 cursor-pointer items-center justify-center rounded-full text-current\"\r\n          [attr.aria-label]=\"t('delegations.session.availableTitle')\"\r\n          (click)=\"togglePopover($event)\"\r\n        >\r\n          <mt-icon icon=\"user.users-plus\" styleClass=\"text-xl\"></mt-icon>\r\n          @if (candidates().length > 0) {\r\n            <span\r\n              class=\"absolute -top-0.5 -end-0.5 inline-flex min-w-[1.05rem] items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-bold leading-4 text-white ring-2 ring-white\"\r\n            >\r\n              {{ candidates().length }}\r\n            </span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\r\n      <div class=\"w-72 max-w-[88vw]\">\r\n        <mt-delegation-menu-panel\r\n          [managePath]=\"managePath()\"\r\n          [showManageLink]=\"showManageLink()\"\r\n          (closeRequested)=\"closePopover()\"\r\n        ></mt-delegation-menu-panel>\r\n      </div>\r\n    </p-popover>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.mt-delegation-trigger{min-width:0;max-width:100%}.mt-delegation-trigger__button,.mt-delegation-trigger__icon{transition:background-color .15s ease-out;border:1px solid transparent}.mt-delegation-trigger__button:hover,.mt-delegation-trigger__icon:hover{background-color:var(--p-surface-100, rgba(0, 0, 0, .05))}.mt-delegation-trigger__button--active{background-color:var(--p-surface-100, rgba(0, 0, 0, .05));border-color:var(--p-surface-200, rgba(0, 0, 0, .08))}.mt-delegation-trigger__button--active:hover{background-color:var(--p-surface-200, rgba(0, 0, 0, .08))}.mt-delegation-trigger__label{max-width:min(12rem,20vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1280px){.mt-delegation-trigger__label{max-width:8rem}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <!-- Headless = controller only (no topbar UI); the menu is surfaced in the\r\n       host user dropdown via <mt-delegation-menu-panel>. -->\r\n  @if (!headless() && mode() !== \"hidden\") {\r\n    @if (mode() === \"active\") {\r\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\r\n        {{\r\n          t(\"delegations.session.banner\", {\r\n            delegatorName: onBehalfOf()?.displayName,\r\n          })\r\n        }}.\r\n        {{\r\n          t(\"delegations.session.executedBy\", {\r\n            actualUserName: executedBy()?.displayName,\r\n          })\r\n        }}\r\n      </span>\r\n    }\r\n\r\n    <div class=\"mt-delegation-trigger flex items-center\">\r\n      @if (mode() === \"active\") {\r\n        <!-- Active: show the delegator like a user identity, with a switcher caret -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"mt-delegation-trigger__button mt-delegation-trigger__button--active flex min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-full p-1 pe-2 text-current\"\r\n          [attr.aria-label]=\"\r\n            t('delegations.session.banner', {\r\n              delegatorName: onBehalfOf()?.displayName,\r\n            }) +\r\n            '. ' +\r\n            t('delegations.session.executedBy', {\r\n              actualUserName: executedBy()?.displayName,\r\n            })\r\n          \"\r\n          [attr.aria-expanded]=\"popoverOpen()\"\r\n          aria-haspopup=\"dialog\"\r\n          (click)=\"togglePopover($event)\"\r\n        >\r\n          <span class=\"relative shrink-0\">\r\n            <mt-avatar\r\n              [label]=\"initials(onBehalfOf())\"\r\n              shape=\"circle\"\r\n              styleClass=\"!size-7 !text-[0.7rem] !bg-primary-100 !text-primary-700\"\r\n            ></mt-avatar>\r\n            <span\r\n              class=\"absolute -bottom-0.5 -end-0.5 flex size-3.5 items-center justify-center rounded-full bg-emerald-500 ring-2 ring-white\"\r\n              aria-hidden=\"true\"\r\n            >\r\n              <mt-icon\r\n                icon=\"user.users-check\"\r\n                styleClass=\"text-[0.55rem] text-white\"\r\n              ></mt-icon>\r\n            </span>\r\n          </span>\r\n          @if (!compact()) {\r\n            <span\r\n              class=\"mt-delegation-trigger__label hidden min-w-0 flex-col text-start leading-tight md:flex\"\r\n            >\r\n              <span class=\"text-[0.625rem] font-medium uppercase opacity-60\">\r\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\r\n              </span>\r\n              <span class=\"truncate text-sm font-semibold\">\r\n                {{ onBehalfOf()?.displayName }}\r\n              </span>\r\n            </span>\r\n          }\r\n          <mt-icon\r\n            icon=\"arrow.chevron-down\"\r\n            styleClass=\"text-sm opacity-70\"\r\n          ></mt-icon>\r\n        </button>\r\n      } @else {\r\n        <!-- Candidates: plain icon button matching the other topbar icons -->\r\n        <button\r\n          type=\"button\"\r\n          class=\"mt-delegation-trigger__icon relative flex size-9 cursor-pointer items-center justify-center rounded-full text-current\"\r\n          [attr.aria-label]=\"t('delegations.session.availableTitle')\"\r\n          [attr.aria-expanded]=\"popoverOpen()\"\r\n          aria-haspopup=\"dialog\"\r\n          (click)=\"togglePopover($event)\"\r\n        >\r\n          <mt-icon icon=\"user.users-plus\" styleClass=\"text-xl\"></mt-icon>\r\n          @if (candidates().length > 0) {\r\n            <span\r\n              class=\"absolute -top-0.5 -end-0.5 inline-flex min-w-[1.05rem] items-center justify-center rounded-full bg-primary px-1 text-[0.625rem] font-bold leading-4 text-white ring-2 ring-white\"\r\n            >\r\n              {{ candidates().length }}\r\n            </span>\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n\r\n    <p-popover\r\n      #popover\r\n      [pt]=\"{ content: { class: 'p-0!' } }\"\r\n      (onShow)=\"popoverOpen.set(true)\"\r\n      (onHide)=\"popoverOpen.set(false)\"\r\n    >\r\n      <div class=\"w-72 max-w-[88vw]\">\r\n        <mt-delegation-menu-panel\r\n          [managePath]=\"managePath()\"\r\n          [showManageLink]=\"showManageLink()\"\r\n          (closeRequested)=\"closePopover()\"\r\n        ></mt-delegation-menu-panel>\r\n      </div>\r\n    </p-popover>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.mt-delegation-trigger{min-width:0;max-width:100%}.mt-delegation-trigger__button,.mt-delegation-trigger__icon{transition:background-color .15s ease-out;border:1px solid transparent}.mt-delegation-trigger__button:hover,.mt-delegation-trigger__icon:hover{background-color:var(--p-surface-100, rgba(0, 0, 0, .05))}.mt-delegation-trigger__button--active{background-color:var(--p-surface-100, rgba(0, 0, 0, .05));border-color:var(--p-surface-200, rgba(0, 0, 0, .08))}.mt-delegation-trigger__button--active:hover{background-color:var(--p-surface-200, rgba(0, 0, 0, .08))}.mt-delegation-trigger__label{max-width:min(12rem,20vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1280px){.mt-delegation-trigger__label{max-width:8rem}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { managePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "managePath", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], showManageLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "showManageLink", required: false }] }], promptOnCandidates: [{ type: i0.Input, args: [{ isSignal: true, alias: "promptOnCandidates", required: false }] }], headless: [{ type: i0.Input, args: [{ isSignal: true, alias: "headless", required: false }] }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
 
 // ---------------------------------------------------------------------------
@@ -857,6 +1055,28 @@ var DelegationsActionKey;
     DelegationsActionKey["Cancel"] = "cancel";
 })(DelegationsActionKey || (DelegationsActionKey = {}));
 
+/** Stable request identity used to reject stale scope-preview responses. */
+function delegationScopeFingerprint(scope) {
+    const grants = (scope.grants ?? [])
+        .map((grant) => ({
+        applicationKey: grant.applicationKey,
+        targetType: grant.target?.targetType,
+        targetKey: grant.target?.targetKey,
+        operationKey: grant.action?.operationKey,
+        accessibilities: (grant.accessibilities ?? [])
+            .map((item) => item.key ?? item.code ?? item.id ?? '')
+            .sort(),
+        dataFilters: (grant.dataFilters ?? [])
+            .map((item) => item.key ?? item.code ?? item.id ?? '')
+            .sort(),
+        constraints: (grant.constraints ?? [])
+            .map((item) => item.key ?? item.code ?? item.id ?? '')
+            .sort(),
+    }))
+        .sort((left, right) => JSON.stringify(left).localeCompare(JSON.stringify(right)));
+    return JSON.stringify(grants);
+}
+
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -890,6 +1110,21 @@ function buildListParams(query) {
 }
 let DelegationsState = class DelegationsState {
     http = inject(HttpClient);
+    actions$ = inject(Actions);
+    store = inject(Store);
+    constructor() {
+        this.actions$
+            .pipe(ofActionSuccessful(CreateDelegationLegacy, CreateDelegationV2, UpdateDelegationLegacy, UpdateDelegationV2, ApproveDelegation, RejectDelegation, CancelDelegation))
+            .subscribe((action) => {
+            const active = this.store.snapshot().delegationSession?.active;
+            if (action instanceof CancelDelegation &&
+                active?.delegation.delegationId === action.id) {
+                this.store.dispatch(new EndDelegationSession('ScopeChanged'));
+                return;
+            }
+            this.store.dispatch(new LoadDelegationCandidates());
+        });
+    }
     // ============================================================================
     // Selectors
     // ============================================================================
@@ -911,6 +1146,9 @@ let DelegationsState = class DelegationsState {
     static getDetail(state) {
         return state.detail;
     }
+    static getScopePreviewFingerprint(state) {
+        return state.scopePreviewFingerprint;
+    }
     static getScopeOptions(state) {
         return state.scopeOptions;
     }
@@ -974,23 +1212,32 @@ let DelegationsState = class DelegationsState {
         });
     }
     getDetail(ctx, { id, asAdmin }) {
+        ctx.patchState({ detail: null, detailRequestedId: id });
         const path = asAdmin ? `${BASE}/Admin/${id}` : `${BASE}/${id}`;
         const req$ = this.http.get(path);
         return handleApiRequest({
             ctx,
             key: DelegationsActionKey.GetDetail,
             request$: req$,
-            onSuccess: (response) => ({ detail: response.data ?? null }),
+            onSuccess: (response) => ({
+                detail: ctx.getState().detailRequestedId === id
+                    ? (response.data ?? null)
+                    : null,
+            }),
         });
     }
     clearDetail(ctx) {
-        ctx.patchState({ detail: null });
+        ctx.patchState({ detail: null, detailRequestedId: null });
     }
     // ============================================================================
     // Scope
     // ============================================================================
     getScopeOptions(ctx, { delegatorUserId, asAdmin }) {
-        ctx.patchState({ scopeOptions: null, scopePreview: null });
+        ctx.patchState({
+            scopeOptions: null,
+            scopePreview: null,
+            scopePreviewFingerprint: null,
+        });
         let params = new HttpParams();
         if (delegatorUserId)
             params = params.set('delegatorUserId', delegatorUserId);
@@ -1008,6 +1255,8 @@ let DelegationsState = class DelegationsState {
         });
     }
     previewScope(ctx, { request, asAdmin }) {
+        const fingerprint = delegationScopeFingerprint(request.scope);
+        ctx.patchState({ scopePreview: null, scopePreviewFingerprint: null });
         const path = asAdmin
             ? `${BASE}/Admin/scope/preview`
             : `${BASE}/scope/preview`;
@@ -1016,11 +1265,14 @@ let DelegationsState = class DelegationsState {
             ctx,
             key: DelegationsActionKey.PreviewScope,
             request$: req$,
-            onSuccess: (response) => ({ scopePreview: response.data ?? null }),
+            onSuccess: (response) => ({
+                scopePreview: response.data ?? null,
+                scopePreviewFingerprint: fingerprint,
+            }),
         });
     }
     clearScopePreview(ctx) {
-        ctx.patchState({ scopePreview: null });
+        ctx.patchState({ scopePreview: null, scopePreviewFingerprint: null });
     }
     // ============================================================================
     // Create / edit  (response is legacy DelegationDto — clients reload list/detail)
@@ -1136,7 +1388,7 @@ __decorate([
     Action(GetActiveAssignedDelegations)
 ], DelegationsState.prototype, "getActive", null);
 __decorate([
-    Action(GetDelegationDetail)
+    Action(GetDelegationDetail, { cancelUncompleted: true })
 ], DelegationsState.prototype, "getDetail", null);
 __decorate([
     Action(ClearDelegationDetail)
@@ -1145,7 +1397,7 @@ __decorate([
     Action(GetScopeOptions)
 ], DelegationsState.prototype, "getScopeOptions", null);
 __decorate([
-    Action(PreviewScope)
+    Action(PreviewScope, { cancelUncompleted: true })
 ], DelegationsState.prototype, "previewScope", null);
 __decorate([
     Action(ClearScopePreview)
@@ -1189,6 +1441,9 @@ __decorate([
 __decorate([
     Selector()
 ], DelegationsState, "getDetail", null);
+__decorate([
+    Selector()
+], DelegationsState, "getScopePreviewFingerprint", null);
 __decorate([
     Selector()
 ], DelegationsState, "getScopeOptions", null);
@@ -1211,8 +1466,10 @@ DelegationsState = __decorate([
             admin: null,
             active: null,
             detail: null,
+            detailRequestedId: null,
             scopeOptions: null,
             scopePreview: null,
+            scopePreviewFingerprint: null,
             loadingActive: [],
             errors: {},
         },
@@ -1220,7 +1477,7 @@ DelegationsState = __decorate([
 ], DelegationsState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsState, decorators: [{
             type: Injectable
-        }], propDecorators: { getMy: [], getAssigned: [], getApprovals: [], getAdmin: [], getActive: [], getDetail: [], clearDetail: [], getScopeOptions: [], previewScope: [], clearScopePreview: [], createLegacy: [], createV2: [], updateLegacy: [], updateV2: [], approve: [], reject: [], cancel: [] } });
+        }], ctorParameters: () => [], propDecorators: { getMy: [], getAssigned: [], getApprovals: [], getAdmin: [], getActive: [], getDetail: [], clearDetail: [], getScopeOptions: [], previewScope: [], clearScopePreview: [], createLegacy: [], createV2: [], updateLegacy: [], updateV2: [], approve: [], reject: [], cancel: [] } });
 
 class DelegationsFacade {
     store = inject(Store);
@@ -1235,6 +1492,7 @@ class DelegationsFacade {
     detail = select(DelegationsState.getDetail);
     scopeOptions = select(DelegationsState.getScopeOptions);
     scopePreview = select(DelegationsState.getScopePreview);
+    scopePreviewFingerprint = select(DelegationsState.getScopePreviewFingerprint);
     loadingActive = select(DelegationsState.getLoadingActive);
     errors = select(DelegationsState.getErrors);
     // ---------------------------------------------------------------------------
@@ -1380,11 +1638,11 @@ class RejectDelegationDialog {
         this.ref.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RejectDelegationDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: RejectDelegationDialog, isStandalone: true, selector: "mt-reject-delegation-dialog", inputs: { delegation: { classPropertyName: "delegation", publicName: "delegation", isSignal: true, isRequired: true, 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 flex-col gap-1\">\r\n      <div class=\"text-sm text-surface-700\">\r\n        {{ t(\"delegations.confirm.reject\") }}\r\n      </div>\r\n      <mt-entity-preview\r\n        [data]=\"userEntity(delegation().delegator)\"\r\n      ></mt-entity-preview>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-1\">\r\n      <label\r\n        class=\"text-sm font-medium text-surface-800\"\r\n        for=\"mt-reject-reason\"\r\n      >\r\n        {{ t(\"delegations.form.rejectionReason\") }}\r\n        <span class=\"text-red-600\">*</span>\r\n      </label>\r\n      <textarea\r\n        id=\"mt-reject-reason\"\r\n        rows=\"3\"\r\n        class=\"w-full rounded-md border border-surface-300 px-3 py-2 text-sm focus:border-primary focus:outline-none\"\r\n        [class.border-red-400]=\"submitted() && !isValid()\"\r\n        [value]=\"reason()\"\r\n        (input)=\"onReasonInput($event)\"\r\n        [attr.aria-invalid]=\"submitted() && !isValid()\"\r\n        [placeholder]=\"t('delegations.form.rejectionReason')\"\r\n      ></textarea>\r\n      @if (submitted() && !isValid()) {\r\n        <span class=\"text-xs text-red-600\">\r\n          {{ t(\"delegations.form.rejectReasonRequired\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        [disabled]=\"isBusy()\"\r\n        (click)=\"cancel()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        color=\"danger\"\r\n        icon=\"general.x-close\"\r\n        [label]=\"t('delegations.action.reject')\"\r\n        [loading]=\"isBusy()\"\r\n        [disabled]=\"!isValid()\"\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: 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: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { 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: RejectDelegationDialog, isStandalone: true, selector: "mt-reject-delegation-dialog", inputs: { delegation: { classPropertyName: "delegation", publicName: "delegation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex flex-col gap-1\">\n      <div class=\"text-sm text-surface-700\">\n        {{ t(\"delegations.confirm.reject\") }}\n      </div>\n      <mt-entity-preview\n        [data]=\"userEntity(delegation().delegator)\"\n      ></mt-entity-preview>\n    </div>\n\n    <div class=\"flex flex-col gap-1\">\n      <label\n        class=\"text-sm font-medium text-surface-800\"\n        for=\"mt-reject-reason\"\n      >\n        {{ t(\"delegations.form.rejectionReason\") }}\n        <span class=\"text-red-600\">*</span>\n      </label>\n      <textarea\n        id=\"mt-reject-reason\"\n        rows=\"3\"\n        class=\"w-full rounded-md border border-surface-300 px-3 py-2 text-sm focus:border-primary focus:outline-none\"\n        [class.border-red-400]=\"submitted() && !isValid()\"\n        [value]=\"reason()\"\n        (input)=\"onReasonInput($event)\"\n        [attr.aria-invalid]=\"submitted() && !isValid()\"\n        [placeholder]=\"t('delegations.form.rejectionReason')\"\n      ></textarea>\n      @if (submitted() && !isValid()) {\n        <span class=\"text-xs text-red-600\">\n          {{ t(\"delegations.form.rejectReasonRequired\") }}\n        </span>\n      }\n    </div>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-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=\"danger\"\n        icon=\"general.x-close\"\n        [label]=\"t('delegations.action.reject')\"\n        [loading]=\"isBusy()\"\n        [disabled]=\"!isValid()\"\n        (click)=\"confirm()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", 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: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { 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: RejectDelegationDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-reject-delegation-dialog', imports: [CommonModule, Button, EntityPreview, 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 flex-col gap-1\">\r\n      <div class=\"text-sm text-surface-700\">\r\n        {{ t(\"delegations.confirm.reject\") }}\r\n      </div>\r\n      <mt-entity-preview\r\n        [data]=\"userEntity(delegation().delegator)\"\r\n      ></mt-entity-preview>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-1\">\r\n      <label\r\n        class=\"text-sm font-medium text-surface-800\"\r\n        for=\"mt-reject-reason\"\r\n      >\r\n        {{ t(\"delegations.form.rejectionReason\") }}\r\n        <span class=\"text-red-600\">*</span>\r\n      </label>\r\n      <textarea\r\n        id=\"mt-reject-reason\"\r\n        rows=\"3\"\r\n        class=\"w-full rounded-md border border-surface-300 px-3 py-2 text-sm focus:border-primary focus:outline-none\"\r\n        [class.border-red-400]=\"submitted() && !isValid()\"\r\n        [value]=\"reason()\"\r\n        (input)=\"onReasonInput($event)\"\r\n        [attr.aria-invalid]=\"submitted() && !isValid()\"\r\n        [placeholder]=\"t('delegations.form.rejectionReason')\"\r\n      ></textarea>\r\n      @if (submitted() && !isValid()) {\r\n        <span class=\"text-xs text-red-600\">\r\n          {{ t(\"delegations.form.rejectReasonRequired\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        [disabled]=\"isBusy()\"\r\n        (click)=\"cancel()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        color=\"danger\"\r\n        icon=\"general.x-close\"\r\n        [label]=\"t('delegations.action.reject')\"\r\n        [loading]=\"isBusy()\"\r\n        [disabled]=\"!isValid()\"\r\n        (click)=\"confirm()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'mt-reject-delegation-dialog', imports: [CommonModule, Button, EntityPreview, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex flex-col gap-1\">\n      <div class=\"text-sm text-surface-700\">\n        {{ t(\"delegations.confirm.reject\") }}\n      </div>\n      <mt-entity-preview\n        [data]=\"userEntity(delegation().delegator)\"\n      ></mt-entity-preview>\n    </div>\n\n    <div class=\"flex flex-col gap-1\">\n      <label\n        class=\"text-sm font-medium text-surface-800\"\n        for=\"mt-reject-reason\"\n      >\n        {{ t(\"delegations.form.rejectionReason\") }}\n        <span class=\"text-red-600\">*</span>\n      </label>\n      <textarea\n        id=\"mt-reject-reason\"\n        rows=\"3\"\n        class=\"w-full rounded-md border border-surface-300 px-3 py-2 text-sm focus:border-primary focus:outline-none\"\n        [class.border-red-400]=\"submitted() && !isValid()\"\n        [value]=\"reason()\"\n        (input)=\"onReasonInput($event)\"\n        [attr.aria-invalid]=\"submitted() && !isValid()\"\n        [placeholder]=\"t('delegations.form.rejectionReason')\"\n      ></textarea>\n      @if (submitted() && !isValid()) {\n        <span class=\"text-xs text-red-600\">\n          {{ t(\"delegations.form.rejectReasonRequired\") }}\n        </span>\n      }\n    </div>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-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=\"danger\"\n        icon=\"general.x-close\"\n        [label]=\"t('delegations.action.reject')\"\n        [loading]=\"isBusy()\"\n        [disabled]=\"!isValid()\"\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 }] }] } });
 
 class Delegations {
@@ -1433,11 +1691,11 @@ class Delegations {
         });
     }
     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\">\r\n  <mt-page\r\n    [title]=\"t('delegations.title')\"\r\n    [avatarIcon]=\"'custom.hierarchy-structure'\"\r\n    [tabs]=\"tabs()\"\r\n    [activeTab]=\"activeTab()\"\r\n    [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-indigo-50)',\r\n      '--p-avatar-color': 'var(--p-indigo-700)',\r\n    }\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <router-outlet />\r\n  </mt-page>\r\n</ng-container>\r\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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    [tabs]=\"tabs()\"\n    [activeTab]=\"activeTab()\"\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    (tabChange)=\"onTabChange($event)\"\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 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], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <mt-page\r\n    [title]=\"t('delegations.title')\"\r\n    [avatarIcon]=\"'custom.hierarchy-structure'\"\r\n    [tabs]=\"tabs()\"\r\n    [activeTab]=\"activeTab()\"\r\n    [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-indigo-50)',\r\n      '--p-avatar-color': 'var(--p-indigo-700)',\r\n    }\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n    (backButtonClick)=\"goBack()\"\r\n    backButton\r\n  >\r\n    <router-outlet />\r\n  </mt-page>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'mt-delegations', imports: [Page, RouterOutlet, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <mt-page\n    [title]=\"t('delegations.title')\"\n    [avatarIcon]=\"'custom.hierarchy-structure'\"\n    [tabs]=\"tabs()\"\n    [activeTab]=\"activeTab()\"\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    (tabChange)=\"onTabChange($event)\"\n    (backButtonClick)=\"goBack()\"\n    backButton\n  >\n    <router-outlet />\n  </mt-page>\n</ng-container>\n" }]
         }], ctorParameters: () => [] });
 
 function isRecord$1(value) {
@@ -2035,6 +2293,7 @@ class ScopePicker {
     delegatorUserId = input(undefined, ...(ngDevMode ? [{ debugName: "delegatorUserId" }] : /* istanbul ignore next */ []));
     facade = inject(DelegationsFacade);
     transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
     options = this.facade.scopeOptions;
     preview = this.facade.scopePreview;
     isLoadingOptions = this.facade.isLoadingScopeOptions;
@@ -2186,21 +2445,32 @@ class ScopePicker {
         });
         // Debounced scope preview.
         let timer = null;
+        this.destroyRef.onDestroy(() => {
+            if (timer)
+                clearTimeout(timer);
+        });
         effect(() => {
             const s = this.scope();
             const delegator = this.delegatorUserId();
             const asAdmin = this.adminMode();
             untracked(() => {
                 if (!s.grants.length) {
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = null;
+                    }
                     this.facade.clearScopePreview();
                     return;
                 }
                 if (timer)
                     clearTimeout(timer);
-                timer = setTimeout(() => this.facade.previewScope(s, {
-                    delegatorUserId: delegator,
-                    asAdmin,
-                }), 300);
+                timer = setTimeout(() => {
+                    timer = null;
+                    return this.facade.previewScope(s, {
+                        delegatorUserId: delegator,
+                        asAdmin,
+                    });
+                }, 300);
             });
         });
         // Initialize selected accessibilities once from the bound scope (edit).
@@ -2408,7 +2678,7 @@ class ScopePicker {
         return this.activeLang() ?? this.transloco.getActiveLang();
     }
     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 }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", 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  <!-- Reusable tri-state checkbox box -->\r\n  <ng-template #checkbox let-state=\"state\">\r\n    <span\r\n      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\r\n      [class.border-primary-500]=\"state !== 'unchecked'\"\r\n      [class.bg-primary-500]=\"state !== 'unchecked'\"\r\n      [class.text-white]=\"state !== 'unchecked'\"\r\n      [class.border-surface-300]=\"state === 'unchecked'\"\r\n      [class.bg-surface-0]=\"state === 'unchecked'\"\r\n    >\r\n      @if (state === \"checked\") {\r\n        <svg\r\n          viewBox=\"0 0 16 16\"\r\n          class=\"size-3\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <path\r\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      } @else if (state === \"indeterminate\") {\r\n        <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\r\n      }\r\n    </span>\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-3\">\r\n    @if (isLoadingOptions()) {\r\n      <mt-card [paddingless]=\"true\">\r\n        <div class=\"flex flex-col gap-3 p-4\">\r\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\r\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\r\n            <p-skeleton height=\"2rem\"></p-skeleton>\r\n          }\r\n        </div>\r\n      </mt-card>\r\n    } @else {\r\n      @if (errorOptions(); as errorMessage) {\r\n        <div\r\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n        >\r\n          {{ errorMessage }}\r\n        </div>\r\n      }\r\n\r\n      @if (!hasOptions() && !errorOptions()) {\r\n        <mt-card [paddingless]=\"true\">\r\n          <div\r\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-9\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"12\"\r\n                  width=\"44\"\r\n                  height=\"38\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 27H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 35H37\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"space-y-1\">\r\n              <p class=\"text-base font-medium text-surface-900\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </p>\r\n              <p class=\"text-sm text-surface-500\">\r\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </mt-card>\r\n      }\r\n\r\n      @if (hasOptions()) {\r\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\r\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\r\n          @if (hasAccessibility()) {\r\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\r\n              <mt-tabs\r\n                mode=\"underline\"\r\n                [(active)]=\"activeScopeTab\"\r\n                [options]=\"[\r\n                  {\r\n                    value: 'permissions',\r\n                    label: t('delegations.scope.permissionsTab'),\r\n                    badge: selectedCount() || null,\r\n                  },\r\n                  {\r\n                    value: 'accessibility',\r\n                    label: t('delegations.scope.accessibilityTitle'),\r\n                    badge: selectedAccessibilityCount() || null,\r\n                  },\r\n                ]\"\r\n                fluid\r\n              ></mt-tabs>\r\n            </div>\r\n          }\r\n\r\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\r\n            <!-- Toolbar: table-style search + clear -->\r\n            <div\r\n              class=\"flex items-center gap-2 border-b border-surface px-3 py-2\"\r\n            >\r\n              <div class=\"min-w-0 flex-1\">\r\n                <mt-text-field\r\n                  [ngModel]=\"searchTerm()\"\r\n                  (ngModelChange)=\"searchTerm.set($event)\"\r\n                  icon=\"general.search-lg\"\r\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\r\n                ></mt-text-field>\r\n              </div>\r\n              @if (selectedCount() > 0) {\r\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\r\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\r\n                </span>\r\n                <mt-button\r\n                  variant=\"text\"\r\n                  size=\"small\"\r\n                  [label]=\"t('delegations.scope.clear')\"\r\n                  [disabled]=\"readonly()\"\r\n                  (click)=\"clearSelection()\"\r\n                ></mt-button>\r\n              }\r\n            </div>\r\n\r\n            <!-- Select-all header -->\r\n            <button\r\n              type=\"button\"\r\n              class=\"flex w-full cursor-pointer items-center gap-2 border-b border-surface px-3 py-2 text-start hover:bg-surface-50\"\r\n              role=\"checkbox\"\r\n              [attr.aria-checked]=\"\r\n                selectAllState() === 'indeterminate'\r\n                  ? 'mixed'\r\n                  : selectAllState() === 'checked'\r\n              \"\r\n              [disabled]=\"readonly()\"\r\n              (click)=\"toggleAll()\"\r\n            >\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  checkbox;\r\n                  context: { state: selectAllState() }\r\n                \"\r\n              ></ng-container>\r\n              <span\r\n                class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\"\r\n              >\r\n                {{ t(\"delegations.scope.selectAll\") }}\r\n              </span>\r\n            </button>\r\n\r\n            <!-- Virtualized permission tree -->\r\n            @if (visibleNodes().length > 0) {\r\n              <cdk-virtual-scroll-viewport\r\n                itemSize=\"40\"\r\n                class=\"block h-[20rem]\"\r\n              >\r\n                <div\r\n                  *cdkVirtualFor=\"\r\n                    let item of visibleNodes();\r\n                    trackBy: trackVisible\r\n                  \"\r\n                  class=\"group flex h-10 items-center gap-2 pe-2 transition-colors hover:bg-surface-50\"\r\n                  [style.padding-inline-start.rem]=\"0.5 + item.depth * 1.25\"\r\n                >\r\n                  @if (hasChildren(item.node)) {\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\r\n                      [attr.aria-expanded]=\"isExpanded(item.node)\"\r\n                      [attr.aria-label]=\"nodeLabel(item.node)\"\r\n                      (click)=\"\r\n                        toggleExpand(item.node); $event.stopPropagation()\r\n                      \"\r\n                    >\r\n                      <mt-icon\r\n                        [icon]=\"\r\n                          isExpanded(item.node)\r\n                            ? 'arrow.chevron-down'\r\n                            : 'arrow.chevron-right'\r\n                        \"\r\n                        styleClass=\"text-base\"\r\n                      ></mt-icon>\r\n                    </button>\r\n                  } @else {\r\n                    <span class=\"size-6 shrink-0\"></span>\r\n                  }\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    role=\"checkbox\"\r\n                    [attr.aria-checked]=\"\r\n                      nodeState(item.node) === 'indeterminate'\r\n                        ? 'mixed'\r\n                        : nodeState(item.node) === 'checked'\r\n                    \"\r\n                    [attr.aria-label]=\"nodeLabel(item.node)\"\r\n                    class=\"shrink-0\"\r\n                    [class.cursor-pointer]=\"!readonly()\"\r\n                    [disabled]=\"readonly()\"\r\n                    (click)=\"toggle(item.node); $event.stopPropagation()\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        checkbox;\r\n                        context: { state: nodeState(item.node) }\r\n                      \"\r\n                    ></ng-container>\r\n                  </button>\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\r\n                    (click)=\"onRowClick(item.node)\"\r\n                  >\r\n                    <span\r\n                      class=\"truncate text-sm\"\r\n                      [class.font-semibold]=\"item.node.kind === 'template'\"\r\n                      [class.text-surface-900]=\"item.node.kind === 'template'\"\r\n                      [class.font-medium]=\"\r\n                        item.node.kind === 'level' ||\r\n                        item.node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-800]=\"\r\n                        item.node.kind === 'level' ||\r\n                        item.node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\r\n                    >\r\n                      {{ nodeLabel(item.node) }}\r\n                    </span>\r\n                    @if (\r\n                      item.node.kind === \"operation\" && item.node.isHighRisk\r\n                    ) {\r\n                      <span\r\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\r\n                      >\r\n                        {{ t(\"delegations.scope.highRisk\") }}\r\n                      </span>\r\n                    }\r\n                  </button>\r\n                </div>\r\n              </cdk-virtual-scroll-viewport>\r\n            } @else {\r\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\r\n                {{ t(\"components.table.no-data-found\") }}\r\n              </p>\r\n            }\r\n          } @else {\r\n            <!-- App accessibility -->\r\n            <div class=\"flex flex-col gap-3 p-4\">\r\n              <p class=\"text-xs text-surface-500\">\r\n                {{ t(\"delegations.scope.accessibilityHint\") }}\r\n              </p>\r\n              <div class=\"flex flex-wrap gap-2\">\r\n                @for (\r\n                  item of appAccessibilities();\r\n                  track item.accessibilityKey\r\n                ) {\r\n                  @let selected =\r\n                    isAccessibilitySelected(item.accessibilityKey);\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\r\n                    [class.border-primary-400]=\"selected\"\r\n                    [class.bg-primary-50]=\"selected\"\r\n                    [class.text-primary-700]=\"selected\"\r\n                    [class.border-surface-200]=\"!selected\"\r\n                    [class.text-surface-600]=\"!selected\"\r\n                    [class.hover:border-primary-300]=\"!readonly()\"\r\n                    [disabled]=\"readonly()\"\r\n                    [attr.aria-pressed]=\"selected\"\r\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\r\n                  >\r\n                    <span\r\n                      class=\"inline-flex size-1.5 rounded-full\"\r\n                      [class.bg-primary-500]=\"selected\"\r\n                      [class.bg-surface-300]=\"!selected\"\r\n                    ></span>\r\n                    {{ accessibilityLabel(item) }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </mt-card>\r\n      }\r\n\r\n      <!-- Compact live scope preview -->\r\n      <div\r\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\r\n      >\r\n        <div class=\"flex items-center gap-2 text-xs\">\r\n          <span class=\"shrink-0 font-semibold text-surface-700\">\r\n            {{ t(\"delegations.scope.previewTitle\") }}:\r\n          </span>\r\n          @if (isPreviewing()) {\r\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\r\n          } @else if (preview(); as p) {\r\n            @if (p.isValid) {\r\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\r\n                {{\r\n                  getPreviewSummary(p.summary) ||\r\n                    t(\"delegations.column.scopeSummary\")\r\n                }}\r\n              </span>\r\n            } @else {\r\n              <span class=\"font-medium text-red-700\">\r\n                {{ t(\"delegations.scope.previewInvalid\") }}\r\n              </span>\r\n            }\r\n          } @else {\r\n            <span class=\"text-surface-500\">\r\n              {{ t(\"delegations.scope.noSelection\") }}\r\n            </span>\r\n          }\r\n        </div>\r\n        @if (preview(); as p) {\r\n          @if (p.warnings.length > 0) {\r\n            <ul\r\n              class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\"\r\n            >\r\n              @for (w of p.warnings; track $index) {\r\n                <li>{{ w.message }}</li>\r\n              }\r\n            </ul>\r\n          }\r\n          @if (p.deniedItems.length > 0) {\r\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\r\n              @for (d of p.deniedItems; track $index) {\r\n                <li>\r\n                  {{ formatDeniedTarget(d.targetKey) }} /\r\n                  {{ formatDeniedOperation(d.operationKey) }} -\r\n                  {{ d.reasonCode }}\r\n                </li>\r\n              }\r\n            </ul>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { 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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.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"] }], 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 }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", 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  <!-- Reusable tri-state checkbox box -->\n  <ng-template #checkbox let-state=\"state\">\n    <span\n      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n      [class.border-primary-500]=\"state !== 'unchecked'\"\n      [class.bg-primary-500]=\"state !== 'unchecked'\"\n      [class.text-white]=\"state !== 'unchecked'\"\n      [class.border-surface-300]=\"state === 'unchecked'\"\n      [class.bg-surface-0]=\"state === 'unchecked'\"\n    >\n      @if (state === \"checked\") {\n        <svg\n          viewBox=\"0 0 16 16\"\n          class=\"size-3\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      } @else if (state === \"indeterminate\") {\n        <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\n      }\n    </span>\n  </ng-template>\n\n  <div class=\"flex flex-col gap-3\">\n    @if (isLoadingOptions()) {\n      <mt-card [paddingless]=\"true\">\n        <div class=\"flex flex-col gap-3 p-4\">\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\n            <p-skeleton height=\"2rem\"></p-skeleton>\n          }\n        </div>\n      </mt-card>\n    } @else {\n      @if (errorOptions(); as errorMessage) {\n        <div\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        >\n          {{ errorMessage }}\n        </div>\n      }\n\n      @if (!hasOptions() && !errorOptions()) {\n        <mt-card [paddingless]=\"true\">\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        </mt-card>\n      }\n\n      @if (hasOptions()) {\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\n          @if (hasAccessibility()) {\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\n              <mt-tabs\n                mode=\"underline\"\n                [(active)]=\"activeScopeTab\"\n                [options]=\"[\n                  {\n                    value: 'permissions',\n                    label: t('delegations.scope.permissionsTab'),\n                    badge: selectedCount() || null,\n                  },\n                  {\n                    value: 'accessibility',\n                    label: t('delegations.scope.accessibilityTitle'),\n                    badge: selectedAccessibilityCount() || null,\n                  },\n                ]\"\n                fluid\n              ></mt-tabs>\n            </div>\n          }\n\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\n            <!-- Toolbar: table-style search + clear -->\n            <div\n              class=\"flex items-center gap-2 border-b border-surface px-3 py-2\"\n            >\n              <div class=\"min-w-0 flex-1\">\n                <mt-text-field\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\"\n                  icon=\"general.search-lg\"\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\n                ></mt-text-field>\n              </div>\n              @if (selectedCount() > 0) {\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\n                </span>\n                <mt-button\n                  variant=\"text\"\n                  size=\"small\"\n                  [label]=\"t('delegations.scope.clear')\"\n                  [disabled]=\"readonly()\"\n                  (click)=\"clearSelection()\"\n                ></mt-button>\n              }\n            </div>\n\n            <!-- Select-all header -->\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-2 border-b border-surface px-3 py-2 text-start hover:bg-surface-50\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                selectAllState() === 'indeterminate'\n                  ? 'mixed'\n                  : selectAllState() === 'checked'\n              \"\n              [disabled]=\"readonly()\"\n              (click)=\"toggleAll()\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  checkbox;\n                  context: { state: selectAllState() }\n                \"\n              ></ng-container>\n              <span\n                class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\"\n              >\n                {{ t(\"delegations.scope.selectAll\") }}\n              </span>\n            </button>\n\n            <!-- Virtualized permission tree -->\n            @if (visibleNodes().length > 0) {\n              <cdk-virtual-scroll-viewport\n                itemSize=\"40\"\n                class=\"block h-[20rem]\"\n              >\n                <div\n                  *cdkVirtualFor=\"\n                    let item of visibleNodes();\n                    trackBy: trackVisible\n                  \"\n                  class=\"group flex h-10 items-center gap-2 pe-2 transition-colors hover:bg-surface-50\"\n                  [style.padding-inline-start.rem]=\"0.5 + item.depth * 1.25\"\n                >\n                  @if (hasChildren(item.node)) {\n                    <button\n                      type=\"button\"\n                      class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\n                      [attr.aria-expanded]=\"isExpanded(item.node)\"\n                      [attr.aria-label]=\"nodeLabel(item.node)\"\n                      (click)=\"\n                        toggleExpand(item.node); $event.stopPropagation()\n                      \"\n                    >\n                      <mt-icon\n                        [icon]=\"\n                          isExpanded(item.node)\n                            ? 'arrow.chevron-down'\n                            : 'arrow.chevron-right'\n                        \"\n                        styleClass=\"text-base\"\n                      ></mt-icon>\n                    </button>\n                  } @else {\n                    <span class=\"size-6 shrink-0\"></span>\n                  }\n\n                  <button\n                    type=\"button\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"\n                      nodeState(item.node) === 'indeterminate'\n                        ? 'mixed'\n                        : nodeState(item.node) === 'checked'\n                    \"\n                    [attr.aria-label]=\"nodeLabel(item.node)\"\n                    class=\"shrink-0\"\n                    [class.cursor-pointer]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    (click)=\"toggle(item.node); $event.stopPropagation()\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        checkbox;\n                        context: { state: nodeState(item.node) }\n                      \"\n                    ></ng-container>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\n                    (click)=\"onRowClick(item.node)\"\n                  >\n                    <span\n                      class=\"truncate text-sm\"\n                      [class.font-semibold]=\"item.node.kind === 'template'\"\n                      [class.text-surface-900]=\"item.node.kind === 'template'\"\n                      [class.font-medium]=\"\n                        item.node.kind === 'level' ||\n                        item.node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        item.node.kind === 'level' ||\n                        item.node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\n                    >\n                      {{ nodeLabel(item.node) }}\n                    </span>\n                    @if (\n                      item.node.kind === \"operation\" && item.node.isHighRisk\n                    ) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n                      >\n                        {{ t(\"delegations.scope.highRisk\") }}\n                      </span>\n                    }\n                  </button>\n                </div>\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                {{ t(\"components.table.no-data-found\") }}\n              </p>\n            }\n          } @else {\n            <!-- App accessibility -->\n            <div class=\"flex flex-col gap-3 p-4\">\n              <p class=\"text-xs text-surface-500\">\n                {{ t(\"delegations.scope.accessibilityHint\") }}\n              </p>\n              <div class=\"flex flex-wrap gap-2\">\n                @for (\n                  item of appAccessibilities();\n                  track item.accessibilityKey\n                ) {\n                  @let selected =\n                    isAccessibilitySelected(item.accessibilityKey);\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\n                    [class.border-primary-400]=\"selected\"\n                    [class.bg-primary-50]=\"selected\"\n                    [class.text-primary-700]=\"selected\"\n                    [class.border-surface-200]=\"!selected\"\n                    [class.text-surface-600]=\"!selected\"\n                    [class.hover:border-primary-300]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    [attr.aria-pressed]=\"selected\"\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\n                  >\n                    <span\n                      class=\"inline-flex size-1.5 rounded-full\"\n                      [class.bg-primary-500]=\"selected\"\n                      [class.bg-surface-300]=\"!selected\"\n                    ></span>\n                    {{ accessibilityLabel(item) }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </mt-card>\n      }\n\n      <!-- Compact live scope preview -->\n      <div\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center gap-2 text-xs\">\n          <span class=\"shrink-0 font-semibold text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}:\n          </span>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\n          } @else if (preview(); as p) {\n            @if (p.isValid) {\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\n                {{\n                  getPreviewSummary(p.summary) ||\n                    t(\"delegations.column.scopeSummary\")\n                }}\n              </span>\n            } @else {\n              <span class=\"font-medium text-red-700\">\n                {{ t(\"delegations.scope.previewInvalid\") }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </span>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.warnings.length > 0) {\n            <ul\n              class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\"\n            >\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { 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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, decorators: [{
             type: Component,
@@ -2423,7 +2693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         TextField,
                         SkeletonModule,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <!-- Reusable tri-state checkbox box -->\r\n  <ng-template #checkbox let-state=\"state\">\r\n    <span\r\n      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\r\n      [class.border-primary-500]=\"state !== 'unchecked'\"\r\n      [class.bg-primary-500]=\"state !== 'unchecked'\"\r\n      [class.text-white]=\"state !== 'unchecked'\"\r\n      [class.border-surface-300]=\"state === 'unchecked'\"\r\n      [class.bg-surface-0]=\"state === 'unchecked'\"\r\n    >\r\n      @if (state === \"checked\") {\r\n        <svg\r\n          viewBox=\"0 0 16 16\"\r\n          class=\"size-3\"\r\n          fill=\"none\"\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          aria-hidden=\"true\"\r\n        >\r\n          <path\r\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\r\n            stroke=\"currentColor\"\r\n            stroke-width=\"2\"\r\n            stroke-linecap=\"round\"\r\n            stroke-linejoin=\"round\"\r\n          />\r\n        </svg>\r\n      } @else if (state === \"indeterminate\") {\r\n        <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\r\n      }\r\n    </span>\r\n  </ng-template>\r\n\r\n  <div class=\"flex flex-col gap-3\">\r\n    @if (isLoadingOptions()) {\r\n      <mt-card [paddingless]=\"true\">\r\n        <div class=\"flex flex-col gap-3 p-4\">\r\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\r\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\r\n            <p-skeleton height=\"2rem\"></p-skeleton>\r\n          }\r\n        </div>\r\n      </mt-card>\r\n    } @else {\r\n      @if (errorOptions(); as errorMessage) {\r\n        <div\r\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n        >\r\n          {{ errorMessage }}\r\n        </div>\r\n      }\r\n\r\n      @if (!hasOptions() && !errorOptions()) {\r\n        <mt-card [paddingless]=\"true\">\r\n          <div\r\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-9\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"12\"\r\n                  width=\"44\"\r\n                  height=\"38\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 27H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 35H37\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"space-y-1\">\r\n              <p class=\"text-base font-medium text-surface-900\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </p>\r\n              <p class=\"text-sm text-surface-500\">\r\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        </mt-card>\r\n      }\r\n\r\n      @if (hasOptions()) {\r\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\r\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\r\n          @if (hasAccessibility()) {\r\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\r\n              <mt-tabs\r\n                mode=\"underline\"\r\n                [(active)]=\"activeScopeTab\"\r\n                [options]=\"[\r\n                  {\r\n                    value: 'permissions',\r\n                    label: t('delegations.scope.permissionsTab'),\r\n                    badge: selectedCount() || null,\r\n                  },\r\n                  {\r\n                    value: 'accessibility',\r\n                    label: t('delegations.scope.accessibilityTitle'),\r\n                    badge: selectedAccessibilityCount() || null,\r\n                  },\r\n                ]\"\r\n                fluid\r\n              ></mt-tabs>\r\n            </div>\r\n          }\r\n\r\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\r\n            <!-- Toolbar: table-style search + clear -->\r\n            <div\r\n              class=\"flex items-center gap-2 border-b border-surface px-3 py-2\"\r\n            >\r\n              <div class=\"min-w-0 flex-1\">\r\n                <mt-text-field\r\n                  [ngModel]=\"searchTerm()\"\r\n                  (ngModelChange)=\"searchTerm.set($event)\"\r\n                  icon=\"general.search-lg\"\r\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\r\n                ></mt-text-field>\r\n              </div>\r\n              @if (selectedCount() > 0) {\r\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\r\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\r\n                </span>\r\n                <mt-button\r\n                  variant=\"text\"\r\n                  size=\"small\"\r\n                  [label]=\"t('delegations.scope.clear')\"\r\n                  [disabled]=\"readonly()\"\r\n                  (click)=\"clearSelection()\"\r\n                ></mt-button>\r\n              }\r\n            </div>\r\n\r\n            <!-- Select-all header -->\r\n            <button\r\n              type=\"button\"\r\n              class=\"flex w-full cursor-pointer items-center gap-2 border-b border-surface px-3 py-2 text-start hover:bg-surface-50\"\r\n              role=\"checkbox\"\r\n              [attr.aria-checked]=\"\r\n                selectAllState() === 'indeterminate'\r\n                  ? 'mixed'\r\n                  : selectAllState() === 'checked'\r\n              \"\r\n              [disabled]=\"readonly()\"\r\n              (click)=\"toggleAll()\"\r\n            >\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  checkbox;\r\n                  context: { state: selectAllState() }\r\n                \"\r\n              ></ng-container>\r\n              <span\r\n                class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\"\r\n              >\r\n                {{ t(\"delegations.scope.selectAll\") }}\r\n              </span>\r\n            </button>\r\n\r\n            <!-- Virtualized permission tree -->\r\n            @if (visibleNodes().length > 0) {\r\n              <cdk-virtual-scroll-viewport\r\n                itemSize=\"40\"\r\n                class=\"block h-[20rem]\"\r\n              >\r\n                <div\r\n                  *cdkVirtualFor=\"\r\n                    let item of visibleNodes();\r\n                    trackBy: trackVisible\r\n                  \"\r\n                  class=\"group flex h-10 items-center gap-2 pe-2 transition-colors hover:bg-surface-50\"\r\n                  [style.padding-inline-start.rem]=\"0.5 + item.depth * 1.25\"\r\n                >\r\n                  @if (hasChildren(item.node)) {\r\n                    <button\r\n                      type=\"button\"\r\n                      class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\r\n                      [attr.aria-expanded]=\"isExpanded(item.node)\"\r\n                      [attr.aria-label]=\"nodeLabel(item.node)\"\r\n                      (click)=\"\r\n                        toggleExpand(item.node); $event.stopPropagation()\r\n                      \"\r\n                    >\r\n                      <mt-icon\r\n                        [icon]=\"\r\n                          isExpanded(item.node)\r\n                            ? 'arrow.chevron-down'\r\n                            : 'arrow.chevron-right'\r\n                        \"\r\n                        styleClass=\"text-base\"\r\n                      ></mt-icon>\r\n                    </button>\r\n                  } @else {\r\n                    <span class=\"size-6 shrink-0\"></span>\r\n                  }\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    role=\"checkbox\"\r\n                    [attr.aria-checked]=\"\r\n                      nodeState(item.node) === 'indeterminate'\r\n                        ? 'mixed'\r\n                        : nodeState(item.node) === 'checked'\r\n                    \"\r\n                    [attr.aria-label]=\"nodeLabel(item.node)\"\r\n                    class=\"shrink-0\"\r\n                    [class.cursor-pointer]=\"!readonly()\"\r\n                    [disabled]=\"readonly()\"\r\n                    (click)=\"toggle(item.node); $event.stopPropagation()\"\r\n                  >\r\n                    <ng-container\r\n                      *ngTemplateOutlet=\"\r\n                        checkbox;\r\n                        context: { state: nodeState(item.node) }\r\n                      \"\r\n                    ></ng-container>\r\n                  </button>\r\n\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\r\n                    (click)=\"onRowClick(item.node)\"\r\n                  >\r\n                    <span\r\n                      class=\"truncate text-sm\"\r\n                      [class.font-semibold]=\"item.node.kind === 'template'\"\r\n                      [class.text-surface-900]=\"item.node.kind === 'template'\"\r\n                      [class.font-medium]=\"\r\n                        item.node.kind === 'level' ||\r\n                        item.node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-800]=\"\r\n                        item.node.kind === 'level' ||\r\n                        item.node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\r\n                    >\r\n                      {{ nodeLabel(item.node) }}\r\n                    </span>\r\n                    @if (\r\n                      item.node.kind === \"operation\" && item.node.isHighRisk\r\n                    ) {\r\n                      <span\r\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\r\n                      >\r\n                        {{ t(\"delegations.scope.highRisk\") }}\r\n                      </span>\r\n                    }\r\n                  </button>\r\n                </div>\r\n              </cdk-virtual-scroll-viewport>\r\n            } @else {\r\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\r\n                {{ t(\"components.table.no-data-found\") }}\r\n              </p>\r\n            }\r\n          } @else {\r\n            <!-- App accessibility -->\r\n            <div class=\"flex flex-col gap-3 p-4\">\r\n              <p class=\"text-xs text-surface-500\">\r\n                {{ t(\"delegations.scope.accessibilityHint\") }}\r\n              </p>\r\n              <div class=\"flex flex-wrap gap-2\">\r\n                @for (\r\n                  item of appAccessibilities();\r\n                  track item.accessibilityKey\r\n                ) {\r\n                  @let selected =\r\n                    isAccessibilitySelected(item.accessibilityKey);\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\r\n                    [class.border-primary-400]=\"selected\"\r\n                    [class.bg-primary-50]=\"selected\"\r\n                    [class.text-primary-700]=\"selected\"\r\n                    [class.border-surface-200]=\"!selected\"\r\n                    [class.text-surface-600]=\"!selected\"\r\n                    [class.hover:border-primary-300]=\"!readonly()\"\r\n                    [disabled]=\"readonly()\"\r\n                    [attr.aria-pressed]=\"selected\"\r\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\r\n                  >\r\n                    <span\r\n                      class=\"inline-flex size-1.5 rounded-full\"\r\n                      [class.bg-primary-500]=\"selected\"\r\n                      [class.bg-surface-300]=\"!selected\"\r\n                    ></span>\r\n                    {{ accessibilityLabel(item) }}\r\n                  </button>\r\n                }\r\n              </div>\r\n            </div>\r\n          }\r\n        </mt-card>\r\n      }\r\n\r\n      <!-- Compact live scope preview -->\r\n      <div\r\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\r\n      >\r\n        <div class=\"flex items-center gap-2 text-xs\">\r\n          <span class=\"shrink-0 font-semibold text-surface-700\">\r\n            {{ t(\"delegations.scope.previewTitle\") }}:\r\n          </span>\r\n          @if (isPreviewing()) {\r\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\r\n          } @else if (preview(); as p) {\r\n            @if (p.isValid) {\r\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\r\n                {{\r\n                  getPreviewSummary(p.summary) ||\r\n                    t(\"delegations.column.scopeSummary\")\r\n                }}\r\n              </span>\r\n            } @else {\r\n              <span class=\"font-medium text-red-700\">\r\n                {{ t(\"delegations.scope.previewInvalid\") }}\r\n              </span>\r\n            }\r\n          } @else {\r\n            <span class=\"text-surface-500\">\r\n              {{ t(\"delegations.scope.noSelection\") }}\r\n            </span>\r\n          }\r\n        </div>\r\n        @if (preview(); as p) {\r\n          @if (p.warnings.length > 0) {\r\n            <ul\r\n              class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\"\r\n            >\r\n              @for (w of p.warnings; track $index) {\r\n                <li>{{ w.message }}</li>\r\n              }\r\n            </ul>\r\n          }\r\n          @if (p.deniedItems.length > 0) {\r\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\r\n              @for (d of p.deniedItems; track $index) {\r\n                <li>\r\n                  {{ formatDeniedTarget(d.targetKey) }} /\r\n                  {{ formatDeniedOperation(d.operationKey) }} -\r\n                  {{ d.reasonCode }}\r\n                </li>\r\n              }\r\n            </ul>\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n</ng-container>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <!-- Reusable tri-state checkbox box -->\n  <ng-template #checkbox let-state=\"state\">\n    <span\n      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n      [class.border-primary-500]=\"state !== 'unchecked'\"\n      [class.bg-primary-500]=\"state !== 'unchecked'\"\n      [class.text-white]=\"state !== 'unchecked'\"\n      [class.border-surface-300]=\"state === 'unchecked'\"\n      [class.bg-surface-0]=\"state === 'unchecked'\"\n    >\n      @if (state === \"checked\") {\n        <svg\n          viewBox=\"0 0 16 16\"\n          class=\"size-3\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      } @else if (state === \"indeterminate\") {\n        <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\n      }\n    </span>\n  </ng-template>\n\n  <div class=\"flex flex-col gap-3\">\n    @if (isLoadingOptions()) {\n      <mt-card [paddingless]=\"true\">\n        <div class=\"flex flex-col gap-3 p-4\">\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\n            <p-skeleton height=\"2rem\"></p-skeleton>\n          }\n        </div>\n      </mt-card>\n    } @else {\n      @if (errorOptions(); as errorMessage) {\n        <div\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        >\n          {{ errorMessage }}\n        </div>\n      }\n\n      @if (!hasOptions() && !errorOptions()) {\n        <mt-card [paddingless]=\"true\">\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        </mt-card>\n      }\n\n      @if (hasOptions()) {\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\n          @if (hasAccessibility()) {\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\n              <mt-tabs\n                mode=\"underline\"\n                [(active)]=\"activeScopeTab\"\n                [options]=\"[\n                  {\n                    value: 'permissions',\n                    label: t('delegations.scope.permissionsTab'),\n                    badge: selectedCount() || null,\n                  },\n                  {\n                    value: 'accessibility',\n                    label: t('delegations.scope.accessibilityTitle'),\n                    badge: selectedAccessibilityCount() || null,\n                  },\n                ]\"\n                fluid\n              ></mt-tabs>\n            </div>\n          }\n\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\n            <!-- Toolbar: table-style search + clear -->\n            <div\n              class=\"flex items-center gap-2 border-b border-surface px-3 py-2\"\n            >\n              <div class=\"min-w-0 flex-1\">\n                <mt-text-field\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\"\n                  icon=\"general.search-lg\"\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\n                ></mt-text-field>\n              </div>\n              @if (selectedCount() > 0) {\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\n                </span>\n                <mt-button\n                  variant=\"text\"\n                  size=\"small\"\n                  [label]=\"t('delegations.scope.clear')\"\n                  [disabled]=\"readonly()\"\n                  (click)=\"clearSelection()\"\n                ></mt-button>\n              }\n            </div>\n\n            <!-- Select-all header -->\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-2 border-b border-surface px-3 py-2 text-start hover:bg-surface-50\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                selectAllState() === 'indeterminate'\n                  ? 'mixed'\n                  : selectAllState() === 'checked'\n              \"\n              [disabled]=\"readonly()\"\n              (click)=\"toggleAll()\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  checkbox;\n                  context: { state: selectAllState() }\n                \"\n              ></ng-container>\n              <span\n                class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\"\n              >\n                {{ t(\"delegations.scope.selectAll\") }}\n              </span>\n            </button>\n\n            <!-- Virtualized permission tree -->\n            @if (visibleNodes().length > 0) {\n              <cdk-virtual-scroll-viewport\n                itemSize=\"40\"\n                class=\"block h-[20rem]\"\n              >\n                <div\n                  *cdkVirtualFor=\"\n                    let item of visibleNodes();\n                    trackBy: trackVisible\n                  \"\n                  class=\"group flex h-10 items-center gap-2 pe-2 transition-colors hover:bg-surface-50\"\n                  [style.padding-inline-start.rem]=\"0.5 + item.depth * 1.25\"\n                >\n                  @if (hasChildren(item.node)) {\n                    <button\n                      type=\"button\"\n                      class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\n                      [attr.aria-expanded]=\"isExpanded(item.node)\"\n                      [attr.aria-label]=\"nodeLabel(item.node)\"\n                      (click)=\"\n                        toggleExpand(item.node); $event.stopPropagation()\n                      \"\n                    >\n                      <mt-icon\n                        [icon]=\"\n                          isExpanded(item.node)\n                            ? 'arrow.chevron-down'\n                            : 'arrow.chevron-right'\n                        \"\n                        styleClass=\"text-base\"\n                      ></mt-icon>\n                    </button>\n                  } @else {\n                    <span class=\"size-6 shrink-0\"></span>\n                  }\n\n                  <button\n                    type=\"button\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"\n                      nodeState(item.node) === 'indeterminate'\n                        ? 'mixed'\n                        : nodeState(item.node) === 'checked'\n                    \"\n                    [attr.aria-label]=\"nodeLabel(item.node)\"\n                    class=\"shrink-0\"\n                    [class.cursor-pointer]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    (click)=\"toggle(item.node); $event.stopPropagation()\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        checkbox;\n                        context: { state: nodeState(item.node) }\n                      \"\n                    ></ng-container>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\n                    (click)=\"onRowClick(item.node)\"\n                  >\n                    <span\n                      class=\"truncate text-sm\"\n                      [class.font-semibold]=\"item.node.kind === 'template'\"\n                      [class.text-surface-900]=\"item.node.kind === 'template'\"\n                      [class.font-medium]=\"\n                        item.node.kind === 'level' ||\n                        item.node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        item.node.kind === 'level' ||\n                        item.node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\n                    >\n                      {{ nodeLabel(item.node) }}\n                    </span>\n                    @if (\n                      item.node.kind === \"operation\" && item.node.isHighRisk\n                    ) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n                      >\n                        {{ t(\"delegations.scope.highRisk\") }}\n                      </span>\n                    }\n                  </button>\n                </div>\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                {{ t(\"components.table.no-data-found\") }}\n              </p>\n            }\n          } @else {\n            <!-- App accessibility -->\n            <div class=\"flex flex-col gap-3 p-4\">\n              <p class=\"text-xs text-surface-500\">\n                {{ t(\"delegations.scope.accessibilityHint\") }}\n              </p>\n              <div class=\"flex flex-wrap gap-2\">\n                @for (\n                  item of appAccessibilities();\n                  track item.accessibilityKey\n                ) {\n                  @let selected =\n                    isAccessibilitySelected(item.accessibilityKey);\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\n                    [class.border-primary-400]=\"selected\"\n                    [class.bg-primary-50]=\"selected\"\n                    [class.text-primary-700]=\"selected\"\n                    [class.border-surface-200]=\"!selected\"\n                    [class.text-surface-600]=\"!selected\"\n                    [class.hover:border-primary-300]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    [attr.aria-pressed]=\"selected\"\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\n                  >\n                    <span\n                      class=\"inline-flex size-1.5 rounded-full\"\n                      [class.bg-primary-500]=\"selected\"\n                      [class.bg-surface-300]=\"!selected\"\n                    ></span>\n                    {{ accessibilityLabel(item) }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </mt-card>\n      }\n\n      <!-- Compact live scope preview -->\n      <div\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center gap-2 text-xs\">\n          <span class=\"shrink-0 font-semibold text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}:\n          </span>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\n          } @else if (preview(); as p) {\n            @if (p.isValid) {\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\n                {{\n                  getPreviewSummary(p.summary) ||\n                    t(\"delegations.column.scopeSummary\")\n                }}\n              </span>\n            } @else {\n              <span class=\"font-medium text-red-700\">\n                {{ t(\"delegations.scope.previewInvalid\") }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </span>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.warnings.length > 0) {\n            <ul\n              class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\"\n            >\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-container>\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 }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], delegatorUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegatorUserId", required: false }] }] } });
 
 const EMPTY_SCOPE = { grants: [], metadata: {} };
@@ -2509,7 +2779,7 @@ function extractUserId(value) {
  *
  * - 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.
+ * - Times are sent in UTC ISO alongside the browser/user IANA time zone.
  */
 class DelegationForm {
     delegationForEdit = input(null, ...(ngDevMode ? [{ debugName: "delegationForEdit" }] : /* istanbul ignore next */ []));
@@ -2526,6 +2796,7 @@ class DelegationForm {
     ref = inject(ModalRef);
     transloco = inject(TranslocoService);
     facade = inject(DelegationsFacade);
+    runtime = inject(DELEGATION_RUNTIME_CONFIG);
     delegationFormControl = new FormControl();
     formValue = toSignal(this.delegationFormControl.valueChanges);
     detail = this.facade.detail;
@@ -2592,13 +2863,18 @@ class DelegationForm {
                     new UserSearchFieldConfig({
                         key: 'delegateTo',
                         label: this.transloco.translate('delegations.column.delegatedTo'),
-                        apiUrl: 'Identity/users',
+                        apiUrl: this.adminMode()
+                            ? `Identity/delegations/Admin/delegate-candidates?delegatorUserId=${encodeURIComponent(this.selectedDelegatorId() ?? '')}`
+                            : 'Identity/delegations/delegate-candidates',
+                        dataKey: 'data.items',
+                        paramName: 'search',
+                        minLength: 2,
                         context: this.context,
                         validators: [ValidatorConfig.required()],
                         cssClass: this.halfWidth,
                         colSpan: 6,
                         order: 1,
-                        disabled: this.readonly() || !!this.delegationForEdit(),
+                        disabled: this.readonly(),
                     }),
                     new TextareaFieldConfig({
                         key: 'description',
@@ -2675,11 +2951,20 @@ class DelegationForm {
                         order: 6,
                         disabled: this.readonly(),
                     }),
+                    new TextFieldConfig({
+                        key: 'timeZoneId',
+                        label: 'Time zone',
+                        validators: [ValidatorConfig.required()],
+                        cssClass: this.fullWidth,
+                        colSpan: 12,
+                        order: 7,
+                        disabled: this.readonly(),
+                    }),
                     new ToggleFieldConfig({
                         key: 'requiresApproval',
                         label: this.transloco.translate('delegations.form.requiresApproval'),
                         cssClass: `${this.fullWidth} mt-2`,
-                        order: 7,
+                        order: 8,
                         disabled: this.readonly(),
                     }),
                 ],
@@ -2703,11 +2988,12 @@ class DelegationForm {
                     this.delegationFormControl.patchValue({
                         delegateFrom: this.mapPartyToUserValue(d.row.delegator),
                         delegateTo: d.row.delegatedUser,
-                        description: '',
+                        description: d.description ?? '',
                         delegateFromDateTime: d.row.startsAtUtc,
                         delegateToDateTime: d.row.endsAtUtc,
                         delegationDaysType: d.row.dayRuleMode,
                         specificDays: d.row.specificDays ?? [],
+                        timeZoneId: d.row.timeZoneId,
                         requiresApproval: d.row.approval?.requiresApproval ?? false,
                     });
                     this.scope.set({
@@ -2722,6 +3008,8 @@ class DelegationForm {
                     this.delegationFormControl.reset({
                         delegateFrom: null,
                         delegationDaysType: 'FullRange',
+                        specificDays: [],
+                        timeZoneId: this.runtime.resolveDefaultTimeZone(),
                         requiresApproval: true,
                     });
                     this.scope.set(EMPTY_SCOPE);
@@ -2748,11 +3036,27 @@ class DelegationForm {
             this.facade.getDetail(editing.delegationId, this.adminMode());
         }
     }
-    canSubmit = computed(() => !this.readonly() &&
-        this.scope().grants.length > 0 &&
-        !!this.scopePreview() &&
-        this.scopePreview().isValid &&
-        !this.isPreviewingScope(), ...(ngDevMode ? [{ debugName: "canSubmit" }] : /* istanbul ignore next */ []));
+    canSubmit = computed(() => {
+        const value = this.formValue();
+        const start = Date.parse(toUtcIso(value?.delegateFromDateTime) ?? '');
+        const end = Date.parse(toUtcIso(value?.delegateToDateTime) ?? '');
+        const specificDaysValid = value?.delegationDaysType !== 'SpecificDays' ||
+            (Array.isArray(value?.specificDays) && value.specificDays.length > 0);
+        const usersDiffer = extractUserId(value?.delegateFrom) !== extractUserId(value?.delegateTo);
+        const currentScope = this.scope();
+        return (!this.readonly() &&
+            Number.isFinite(start) &&
+            Number.isFinite(end) &&
+            start < end &&
+            end > Date.now() &&
+            specificDaysValid &&
+            usersDiffer &&
+            currentScope.grants.length > 0 &&
+            !!this.scopePreview()?.isValid &&
+            this.facade.scopePreviewFingerprint() ===
+                delegationScopeFingerprint(currentScope) &&
+            !this.isPreviewingScope());
+    }, ...(ngDevMode ? [{ debugName: "canSubmit" }] : /* istanbul ignore next */ []));
     onSubmit() {
         if (this.readonly() || !this.delegationFormControl.valid)
             return;
@@ -2766,6 +3070,8 @@ class DelegationForm {
         const delegateFromDateTime = toUtcIso(value?.delegateFromDateTime) ?? '';
         const delegateToDateTime = toUtcIso(value?.delegateToDateTime) ?? '';
         const requiresApproval = !!value?.requiresApproval;
+        const timeZoneId = (typeof value?.timeZoneId === 'string' && value.timeZoneId.trim()) ||
+            this.runtime.resolveDefaultTimeZone();
         const delegatedUserId = extractUserId(value?.delegateTo) ?? '';
         const selectedDelegatorId = this.selectedDelegatorId();
         const editing = this.delegationForEdit();
@@ -2781,6 +3087,7 @@ class DelegationForm {
                 delegateToDateTime,
                 delegationDaysType,
                 specificDays,
+                timeZoneId,
                 requiresApproval,
                 scope,
             };
@@ -2808,6 +3115,7 @@ class DelegationForm {
             delegateToDateTime,
             delegationDaysType,
             specificDays,
+            timeZoneId,
             requiresApproval,
             scope,
         };
@@ -2842,7 +3150,7 @@ class DelegationForm {
         };
     }
     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 }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div\r\n    [class]=\"\r\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    <div\r\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-2 lg:items-start\"\r\n    >\r\n      <section\r\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\r\n      >\r\n        <mt-dynamic-form\r\n          [formConfig]=\"formConfig()\"\r\n          [formControl]=\"delegationFormControl\"\r\n        />\r\n      </section>\r\n\r\n      <section class=\"flex min-h-0 flex-col gap-3\">\r\n        <div class=\"flex flex-col gap-1\">\r\n          <h3 class=\"text-xl font-semibold text-surface-900\">\r\n            {{ t(\"delegations.scope.permissionsTitle\") }}\r\n          </h3>\r\n          <p class=\"text-sm text-surface-500\">\r\n            {{\r\n              adminMode() && !showScopePicker()\r\n                ? t(\"delegations.form.selectDelegatorFirst\")\r\n                : t(\"delegations.scope.permissionsSubtitle\")\r\n            }}\r\n          </p>\r\n        </div>\r\n\r\n        @if (showScopePicker()) {\r\n          <mt-scope-picker\r\n            [(scope)]=\"scope\"\r\n            [readonly]=\"readonly()\"\r\n            [adminMode]=\"adminMode()\"\r\n            [delegatorUserId]=\"selectedDelegatorId()\"\r\n          ></mt-scope-picker>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-10\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"12\"\r\n                  width=\"44\"\r\n                  height=\"40\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M22 28H42\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M22 36H34\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <circle\r\n                  cx=\"45\"\r\n                  cy=\"20\"\r\n                  r=\"7\"\r\n                  class=\"fill-surface-0 stroke-primary\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M45 17V23\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M42 20H48\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"space-y-1\">\r\n              <p class=\"text-base font-medium text-surface-900\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </p>\r\n              <p class=\"text-sm text-surface-500\">\r\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n      </section>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('delegations.common.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]=\"\r\n          delegationForEdit()\r\n            ? t('delegations.common.update')\r\n            : t('delegations.common.create')\r\n        \"\r\n        [loading]=\"isSaving()\"\r\n        [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\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", 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", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScopePicker, selector: "mt-scope-picker", inputs: ["scope", "readonly", "adminMode", "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 }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\n      modal.contentClass\n    \"\n  >\n    <div\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-2 lg:items-start\"\n    >\n      <section\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\n      >\n        <mt-dynamic-form\n          [formConfig]=\"formConfig()\"\n          [formControl]=\"delegationFormControl\"\n        />\n      </section>\n\n      <section class=\"flex min-h-0 flex-col gap-3\">\n        <div class=\"flex flex-col gap-1\">\n          <h3 class=\"text-xl font-semibold text-surface-900\">\n            {{ t(\"delegations.scope.permissionsTitle\") }}\n          </h3>\n          <p class=\"text-sm text-surface-500\">\n            {{\n              adminMode() && !showScopePicker()\n                ? t(\"delegations.form.selectDelegatorFirst\")\n                : t(\"delegations.scope.permissionsSubtitle\")\n            }}\n          </p>\n        </div>\n\n        @if (showScopePicker()) {\n          <mt-scope-picker\n            [(scope)]=\"scope\"\n            [readonly]=\"readonly()\"\n            [adminMode]=\"adminMode()\"\n            [delegatorUserId]=\"selectedDelegatorId()\"\n          ></mt-scope-picker>\n        } @else {\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-10\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"40\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M22 28H42\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M22 36H34\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <circle\n                  cx=\"45\"\n                  cy=\"20\"\n                  r=\"7\"\n                  class=\"fill-surface-0 stroke-primary\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M45 17V23\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M42 20H48\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\n              </p>\n            </div>\n          </div>\n        }\n      </section>\n    </div>\n  </div>\n  <div [class]=\"modal.footerClass\">\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", 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", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScopePicker, selector: "mt-scope-picker", inputs: ["scope", "readonly", "adminMode", "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,
@@ -2853,7 +3161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ReactiveFormsModule,
                         ScopePicker,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div\r\n    [class]=\"\r\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    <div\r\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-2 lg:items-start\"\r\n    >\r\n      <section\r\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\r\n      >\r\n        <mt-dynamic-form\r\n          [formConfig]=\"formConfig()\"\r\n          [formControl]=\"delegationFormControl\"\r\n        />\r\n      </section>\r\n\r\n      <section class=\"flex min-h-0 flex-col gap-3\">\r\n        <div class=\"flex flex-col gap-1\">\r\n          <h3 class=\"text-xl font-semibold text-surface-900\">\r\n            {{ t(\"delegations.scope.permissionsTitle\") }}\r\n          </h3>\r\n          <p class=\"text-sm text-surface-500\">\r\n            {{\r\n              adminMode() && !showScopePicker()\r\n                ? t(\"delegations.form.selectDelegatorFirst\")\r\n                : t(\"delegations.scope.permissionsSubtitle\")\r\n            }}\r\n          </p>\r\n        </div>\r\n\r\n        @if (showScopePicker()) {\r\n          <mt-scope-picker\r\n            [(scope)]=\"scope\"\r\n            [readonly]=\"readonly()\"\r\n            [adminMode]=\"adminMode()\"\r\n            [delegatorUserId]=\"selectedDelegatorId()\"\r\n          ></mt-scope-picker>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-10\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"12\"\r\n                  width=\"44\"\r\n                  height=\"40\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M22 28H42\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M22 36H34\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <circle\r\n                  cx=\"45\"\r\n                  cy=\"20\"\r\n                  r=\"7\"\r\n                  class=\"fill-surface-0 stroke-primary\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M45 17V23\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M42 20H48\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"space-y-1\">\r\n              <p class=\"text-base font-medium text-surface-900\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </p>\r\n              <p class=\"text-sm text-surface-500\">\r\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n      </section>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('delegations.common.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]=\"\r\n          delegationForEdit()\r\n            ? t('delegations.common.update')\r\n            : t('delegations.common.create')\r\n        \"\r\n        [loading]=\"isSaving()\"\r\n        [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\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      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\n      modal.contentClass\n    \"\n  >\n    <div\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-2 lg:items-start\"\n    >\n      <section\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\n      >\n        <mt-dynamic-form\n          [formConfig]=\"formConfig()\"\n          [formControl]=\"delegationFormControl\"\n        />\n      </section>\n\n      <section class=\"flex min-h-0 flex-col gap-3\">\n        <div class=\"flex flex-col gap-1\">\n          <h3 class=\"text-xl font-semibold text-surface-900\">\n            {{ t(\"delegations.scope.permissionsTitle\") }}\n          </h3>\n          <p class=\"text-sm text-surface-500\">\n            {{\n              adminMode() && !showScopePicker()\n                ? t(\"delegations.form.selectDelegatorFirst\")\n                : t(\"delegations.scope.permissionsSubtitle\")\n            }}\n          </p>\n        </div>\n\n        @if (showScopePicker()) {\n          <mt-scope-picker\n            [(scope)]=\"scope\"\n            [readonly]=\"readonly()\"\n            [adminMode]=\"adminMode()\"\n            [delegatorUserId]=\"selectedDelegatorId()\"\n          ></mt-scope-picker>\n        } @else {\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-10\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"40\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M22 28H42\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M22 36H34\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <circle\n                  cx=\"45\"\n                  cy=\"20\"\n                  r=\"7\"\n                  class=\"fill-surface-0 stroke-primary\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M45 17V23\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M42 20H48\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\n              </p>\n            </div>\n          </div>\n        }\n      </section>\n    </div>\n  </div>\n  <div [class]=\"modal.footerClass\">\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 }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }] } });
 
 /**
@@ -3007,7 +3315,7 @@ class DelegationDetailDrawer {
         return 'children' in node && node.children.length > 0;
     }
     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 }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, 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=\"border-b border-surface-200 px-4 pt-2\">\r\n      <mt-tabs\r\n        mode=\"underline\"\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        fluid\r\n      ></mt-tabs>\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        @if (activeTab() === \"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-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegator,\r\n                      t('delegations.column.delegatorName')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <mt-delegation-status-chip\r\n                [status]=\"d.status.effectiveStatus\"\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                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegatedUser,\r\n                      t('delegations.column.delegatedTo')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.approval\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  approvalLabel()\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.startDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.endDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.form.timeZone\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  d.row.timeZoneId\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.days\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  @if (d.row.dayRuleMode === \"FullRange\") {\r\n                    {{ t(\"delegations.form.fullRange\") }}\r\n                  } @else {\r\n                    {{ formatSpecificDays(d.row.specificDays) }}\r\n                  }\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            @if (d.row.cancellation?.cancellationReason) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3 text-sm text-surface-800\"\r\n              >\r\n                <div class=\"font-medium\">\r\n                  {{ t(\"delegations.form.cancellationReason\") }}\r\n                </div>\r\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <!-- Scope tab -->\r\n          <div\r\n            class=\"flex flex-col overflow-hidden rounded-lg border border-surface\"\r\n          >\r\n            <div\r\n              class=\"flex items-center justify-between gap-2 border-b border-surface bg-surface-50 px-3 py-2\"\r\n            >\r\n              <span class=\"text-xs font-semibold uppercase text-surface-500\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </span>\r\n              @if (selectedOperationCount() > 0) {\r\n                <span class=\"text-xs font-medium text-surface-500\">\r\n                  {{ selectedOperationCount() }}\r\n                  {{ t(\"delegations.scope.selected\") }}\r\n                </span>\r\n              }\r\n            </div>\r\n\r\n            @if (scopeVisibleNodes().length > 0) {\r\n              <div class=\"flex max-h-[34rem] flex-col overflow-y-auto\">\r\n                @for (\r\n                  node of scopeVisibleNodes();\r\n                  track trackScopeNode($index, node)\r\n                ) {\r\n                  <div\r\n                    class=\"group flex min-h-10 items-center gap-2 pe-3 transition-colors hover:bg-surface-50\"\r\n                    [style.padding-inline-start.rem]=\"0.75 + node.depth * 1.25\"\r\n                  >\r\n                    @if (hasChildren(node)) {\r\n                      <span\r\n                        class=\"flex size-6 shrink-0 items-center justify-center rounded-md text-surface-400\"\r\n                        aria-hidden=\"true\"\r\n                      >\r\n                        <svg\r\n                          viewBox=\"0 0 20 20\"\r\n                          class=\"size-4\"\r\n                          fill=\"none\"\r\n                          xmlns=\"http://www.w3.org/2000/svg\"\r\n                        >\r\n                          <path\r\n                            d=\"M5 7L10 12L15 7\"\r\n                            stroke=\"currentColor\"\r\n                            stroke-width=\"1.8\"\r\n                            stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\"\r\n                          />\r\n                        </svg>\r\n                      </span>\r\n                    } @else {\r\n                      <span class=\"size-6 shrink-0\"></span>\r\n                    }\r\n\r\n                    <span\r\n                      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-primary-500 bg-primary-500 text-white\"\r\n                      aria-hidden=\"true\"\r\n                    >\r\n                      <svg\r\n                        viewBox=\"0 0 16 16\"\r\n                        class=\"size-3\"\r\n                        fill=\"none\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                      >\r\n                        <path\r\n                          d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\r\n                          stroke=\"currentColor\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    </span>\r\n\r\n                    <span\r\n                      class=\"min-w-0 flex-1 truncate text-sm\"\r\n                      [class.font-semibold]=\"node.kind === 'template'\"\r\n                      [class.text-surface-900]=\"node.kind === 'template'\"\r\n                      [class.font-medium]=\"\r\n                        node.kind === 'level' || node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-800]=\"\r\n                        node.kind === 'level' || node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-600]=\"node.kind === 'operation'\"\r\n                    >\r\n                      {{ node.label }}\r\n                    </span>\r\n\r\n                    @if (node.kind === \"operation\" && node.isHighRisk) {\r\n                      <span\r\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\r\n                      >\r\n                        {{ t(\"delegations.scope.highRisk\") }}\r\n                      </span>\r\n                    }\r\n\r\n                    @if (!node.isAvailable) {\r\n                      <span\r\n                        class=\"shrink-0 rounded-full bg-surface-100 px-2 py-0.5 text-[0.625rem] font-medium text-surface-500\"\r\n                      >\r\n                        {{ t(\"delegations.scope.unavailable\") }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\r\n                {{ t(\"delegations.scope.noSelection\") }}\r\n              </p>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"border-t border-surface-200 px-4 py-3 flex items-center justify-end\"\r\n    >\r\n      <mt-button\r\n        [label]=\"t('delegations.common.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: 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: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { 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 }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, 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=\"border-b border-surface-200 px-4 pt-2\">\r\n      <mt-tabs\r\n        mode=\"underline\"\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        fluid\r\n      ></mt-tabs>\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        @if (activeTab() === \"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-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegator,\r\n                      t('delegations.column.delegatorName')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <mt-delegation-status-chip\r\n                [status]=\"d.status.effectiveStatus\"\r\n                [reasonCode]=\"d.status.reasonCode\"\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                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegatedUser,\r\n                      t('delegations.column.delegatedTo')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.approval\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  approvalLabel()\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.startDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.endDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.form.timeZone\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  d.row.timeZoneId\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.days\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  @if (d.row.dayRuleMode === \"FullRange\") {\r\n                    {{ t(\"delegations.form.fullRange\") }}\r\n                  } @else {\r\n                    {{ formatSpecificDays(d.row.specificDays) }}\r\n                  }\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            @if (d.row.cancellation?.cancellationReason) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3 text-sm text-surface-800\"\r\n              >\r\n                <div class=\"font-medium\">\r\n                  {{ t(\"delegations.form.cancellationReason\") }}\r\n                </div>\r\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <!-- Scope tab -->\r\n          <div\r\n            class=\"flex flex-col overflow-hidden rounded-lg border border-surface\"\r\n          >\r\n            <div\r\n              class=\"flex items-center justify-between gap-2 border-b border-surface bg-surface-50 px-3 py-2\"\r\n            >\r\n              <span class=\"text-xs font-semibold uppercase text-surface-500\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </span>\r\n              @if (selectedOperationCount() > 0) {\r\n                <span class=\"text-xs font-medium text-surface-500\">\r\n                  {{ selectedOperationCount() }}\r\n                  {{ t(\"delegations.scope.selected\") }}\r\n                </span>\r\n              }\r\n            </div>\r\n\r\n            @if (scopeVisibleNodes().length > 0) {\r\n              <div class=\"flex max-h-[34rem] flex-col overflow-y-auto\">\r\n                @for (\r\n                  node of scopeVisibleNodes();\r\n                  track trackScopeNode($index, node)\r\n                ) {\r\n                  <div\r\n                    class=\"group flex min-h-10 items-center gap-2 pe-3 transition-colors hover:bg-surface-50\"\r\n                    [style.padding-inline-start.rem]=\"0.75 + node.depth * 1.25\"\r\n                  >\r\n                    @if (hasChildren(node)) {\r\n                      <span\r\n                        class=\"flex size-6 shrink-0 items-center justify-center rounded-md text-surface-400\"\r\n                        aria-hidden=\"true\"\r\n                      >\r\n                        <svg\r\n                          viewBox=\"0 0 20 20\"\r\n                          class=\"size-4\"\r\n                          fill=\"none\"\r\n                          xmlns=\"http://www.w3.org/2000/svg\"\r\n                        >\r\n                          <path\r\n                            d=\"M5 7L10 12L15 7\"\r\n                            stroke=\"currentColor\"\r\n                            stroke-width=\"1.8\"\r\n                            stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\"\r\n                          />\r\n                        </svg>\r\n                      </span>\r\n                    } @else {\r\n                      <span class=\"size-6 shrink-0\"></span>\r\n                    }\r\n\r\n                    <span\r\n                      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-primary-500 bg-primary-500 text-white\"\r\n                      aria-hidden=\"true\"\r\n                    >\r\n                      <svg\r\n                        viewBox=\"0 0 16 16\"\r\n                        class=\"size-3\"\r\n                        fill=\"none\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                      >\r\n                        <path\r\n                          d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\r\n                          stroke=\"currentColor\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    </span>\r\n\r\n                    <span\r\n                      class=\"min-w-0 flex-1 truncate text-sm\"\r\n                      [class.font-semibold]=\"node.kind === 'template'\"\r\n                      [class.text-surface-900]=\"node.kind === 'template'\"\r\n                      [class.font-medium]=\"\r\n                        node.kind === 'level' || node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-800]=\"\r\n                        node.kind === 'level' || node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-600]=\"node.kind === 'operation'\"\r\n                    >\r\n                      {{ node.label }}\r\n                    </span>\r\n\r\n                    @if (node.kind === \"operation\" && node.isHighRisk) {\r\n                      <span\r\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\r\n                      >\r\n                        {{ t(\"delegations.scope.highRisk\") }}\r\n                      </span>\r\n                    }\r\n\r\n                    @if (!node.isAvailable) {\r\n                      <span\r\n                        class=\"shrink-0 rounded-full bg-surface-100 px-2 py-0.5 text-[0.625rem] font-medium text-surface-500\"\r\n                      >\r\n                        {{ t(\"delegations.scope.unavailable\") }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\r\n                {{ t(\"delegations.scope.noSelection\") }}\r\n              </p>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"border-t border-surface-200 px-4 py-3 flex items-center justify-end\"\r\n    >\r\n      <mt-button\r\n        [label]=\"t('delegations.common.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: 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: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { 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", "reasonCode"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, decorators: [{
             type: Component,
@@ -3019,7 +3327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Tabs,
                         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=\"border-b border-surface-200 px-4 pt-2\">\r\n      <mt-tabs\r\n        mode=\"underline\"\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        fluid\r\n      ></mt-tabs>\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        @if (activeTab() === \"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-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegator,\r\n                      t('delegations.column.delegatorName')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <mt-delegation-status-chip\r\n                [status]=\"d.status.effectiveStatus\"\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                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegatedUser,\r\n                      t('delegations.column.delegatedTo')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.approval\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  approvalLabel()\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.startDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.endDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.form.timeZone\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  d.row.timeZoneId\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.days\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  @if (d.row.dayRuleMode === \"FullRange\") {\r\n                    {{ t(\"delegations.form.fullRange\") }}\r\n                  } @else {\r\n                    {{ formatSpecificDays(d.row.specificDays) }}\r\n                  }\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            @if (d.row.cancellation?.cancellationReason) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3 text-sm text-surface-800\"\r\n              >\r\n                <div class=\"font-medium\">\r\n                  {{ t(\"delegations.form.cancellationReason\") }}\r\n                </div>\r\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <!-- Scope tab -->\r\n          <div\r\n            class=\"flex flex-col overflow-hidden rounded-lg border border-surface\"\r\n          >\r\n            <div\r\n              class=\"flex items-center justify-between gap-2 border-b border-surface bg-surface-50 px-3 py-2\"\r\n            >\r\n              <span class=\"text-xs font-semibold uppercase text-surface-500\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </span>\r\n              @if (selectedOperationCount() > 0) {\r\n                <span class=\"text-xs font-medium text-surface-500\">\r\n                  {{ selectedOperationCount() }}\r\n                  {{ t(\"delegations.scope.selected\") }}\r\n                </span>\r\n              }\r\n            </div>\r\n\r\n            @if (scopeVisibleNodes().length > 0) {\r\n              <div class=\"flex max-h-[34rem] flex-col overflow-y-auto\">\r\n                @for (\r\n                  node of scopeVisibleNodes();\r\n                  track trackScopeNode($index, node)\r\n                ) {\r\n                  <div\r\n                    class=\"group flex min-h-10 items-center gap-2 pe-3 transition-colors hover:bg-surface-50\"\r\n                    [style.padding-inline-start.rem]=\"0.75 + node.depth * 1.25\"\r\n                  >\r\n                    @if (hasChildren(node)) {\r\n                      <span\r\n                        class=\"flex size-6 shrink-0 items-center justify-center rounded-md text-surface-400\"\r\n                        aria-hidden=\"true\"\r\n                      >\r\n                        <svg\r\n                          viewBox=\"0 0 20 20\"\r\n                          class=\"size-4\"\r\n                          fill=\"none\"\r\n                          xmlns=\"http://www.w3.org/2000/svg\"\r\n                        >\r\n                          <path\r\n                            d=\"M5 7L10 12L15 7\"\r\n                            stroke=\"currentColor\"\r\n                            stroke-width=\"1.8\"\r\n                            stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\"\r\n                          />\r\n                        </svg>\r\n                      </span>\r\n                    } @else {\r\n                      <span class=\"size-6 shrink-0\"></span>\r\n                    }\r\n\r\n                    <span\r\n                      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-primary-500 bg-primary-500 text-white\"\r\n                      aria-hidden=\"true\"\r\n                    >\r\n                      <svg\r\n                        viewBox=\"0 0 16 16\"\r\n                        class=\"size-3\"\r\n                        fill=\"none\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                      >\r\n                        <path\r\n                          d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\r\n                          stroke=\"currentColor\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    </span>\r\n\r\n                    <span\r\n                      class=\"min-w-0 flex-1 truncate text-sm\"\r\n                      [class.font-semibold]=\"node.kind === 'template'\"\r\n                      [class.text-surface-900]=\"node.kind === 'template'\"\r\n                      [class.font-medium]=\"\r\n                        node.kind === 'level' || node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-800]=\"\r\n                        node.kind === 'level' || node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-600]=\"node.kind === 'operation'\"\r\n                    >\r\n                      {{ node.label }}\r\n                    </span>\r\n\r\n                    @if (node.kind === \"operation\" && node.isHighRisk) {\r\n                      <span\r\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\r\n                      >\r\n                        {{ t(\"delegations.scope.highRisk\") }}\r\n                      </span>\r\n                    }\r\n\r\n                    @if (!node.isAvailable) {\r\n                      <span\r\n                        class=\"shrink-0 rounded-full bg-surface-100 px-2 py-0.5 text-[0.625rem] font-medium text-surface-500\"\r\n                      >\r\n                        {{ t(\"delegations.scope.unavailable\") }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\r\n                {{ t(\"delegations.scope.noSelection\") }}\r\n              </p>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"border-t border-surface-200 px-4 py-3 flex items-center justify-end\"\r\n    >\r\n      <mt-button\r\n        [label]=\"t('delegations.common.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\">\r\n  <div class=\"flex flex-col h-full\">\r\n    <!-- Tabs -->\r\n    <div class=\"border-b border-surface-200 px-4 pt-2\">\r\n      <mt-tabs\r\n        mode=\"underline\"\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        fluid\r\n      ></mt-tabs>\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        @if (activeTab() === \"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-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegator,\r\n                      t('delegations.column.delegatorName')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <mt-delegation-status-chip\r\n                [status]=\"d.status.effectiveStatus\"\r\n                [reasonCode]=\"d.status.reasonCode\"\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                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegatedUser,\r\n                      t('delegations.column.delegatedTo')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.approval\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  approvalLabel()\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.startDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.endDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.form.timeZone\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  d.row.timeZoneId\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.days\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  @if (d.row.dayRuleMode === \"FullRange\") {\r\n                    {{ t(\"delegations.form.fullRange\") }}\r\n                  } @else {\r\n                    {{ formatSpecificDays(d.row.specificDays) }}\r\n                  }\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            @if (d.row.cancellation?.cancellationReason) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3 text-sm text-surface-800\"\r\n              >\r\n                <div class=\"font-medium\">\r\n                  {{ t(\"delegations.form.cancellationReason\") }}\r\n                </div>\r\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <!-- Scope tab -->\r\n          <div\r\n            class=\"flex flex-col overflow-hidden rounded-lg border border-surface\"\r\n          >\r\n            <div\r\n              class=\"flex items-center justify-between gap-2 border-b border-surface bg-surface-50 px-3 py-2\"\r\n            >\r\n              <span class=\"text-xs font-semibold uppercase text-surface-500\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </span>\r\n              @if (selectedOperationCount() > 0) {\r\n                <span class=\"text-xs font-medium text-surface-500\">\r\n                  {{ selectedOperationCount() }}\r\n                  {{ t(\"delegations.scope.selected\") }}\r\n                </span>\r\n              }\r\n            </div>\r\n\r\n            @if (scopeVisibleNodes().length > 0) {\r\n              <div class=\"flex max-h-[34rem] flex-col overflow-y-auto\">\r\n                @for (\r\n                  node of scopeVisibleNodes();\r\n                  track trackScopeNode($index, node)\r\n                ) {\r\n                  <div\r\n                    class=\"group flex min-h-10 items-center gap-2 pe-3 transition-colors hover:bg-surface-50\"\r\n                    [style.padding-inline-start.rem]=\"0.75 + node.depth * 1.25\"\r\n                  >\r\n                    @if (hasChildren(node)) {\r\n                      <span\r\n                        class=\"flex size-6 shrink-0 items-center justify-center rounded-md text-surface-400\"\r\n                        aria-hidden=\"true\"\r\n                      >\r\n                        <svg\r\n                          viewBox=\"0 0 20 20\"\r\n                          class=\"size-4\"\r\n                          fill=\"none\"\r\n                          xmlns=\"http://www.w3.org/2000/svg\"\r\n                        >\r\n                          <path\r\n                            d=\"M5 7L10 12L15 7\"\r\n                            stroke=\"currentColor\"\r\n                            stroke-width=\"1.8\"\r\n                            stroke-linecap=\"round\"\r\n                            stroke-linejoin=\"round\"\r\n                          />\r\n                        </svg>\r\n                      </span>\r\n                    } @else {\r\n                      <span class=\"size-6 shrink-0\"></span>\r\n                    }\r\n\r\n                    <span\r\n                      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-primary-500 bg-primary-500 text-white\"\r\n                      aria-hidden=\"true\"\r\n                    >\r\n                      <svg\r\n                        viewBox=\"0 0 16 16\"\r\n                        class=\"size-3\"\r\n                        fill=\"none\"\r\n                        xmlns=\"http://www.w3.org/2000/svg\"\r\n                      >\r\n                        <path\r\n                          d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\r\n                          stroke=\"currentColor\"\r\n                          stroke-width=\"2\"\r\n                          stroke-linecap=\"round\"\r\n                          stroke-linejoin=\"round\"\r\n                        />\r\n                      </svg>\r\n                    </span>\r\n\r\n                    <span\r\n                      class=\"min-w-0 flex-1 truncate text-sm\"\r\n                      [class.font-semibold]=\"node.kind === 'template'\"\r\n                      [class.text-surface-900]=\"node.kind === 'template'\"\r\n                      [class.font-medium]=\"\r\n                        node.kind === 'level' || node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-800]=\"\r\n                        node.kind === 'level' || node.kind === 'module'\r\n                      \"\r\n                      [class.text-surface-600]=\"node.kind === 'operation'\"\r\n                    >\r\n                      {{ node.label }}\r\n                    </span>\r\n\r\n                    @if (node.kind === \"operation\" && node.isHighRisk) {\r\n                      <span\r\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\r\n                      >\r\n                        {{ t(\"delegations.scope.highRisk\") }}\r\n                      </span>\r\n                    }\r\n\r\n                    @if (!node.isAvailable) {\r\n                      <span\r\n                        class=\"shrink-0 rounded-full bg-surface-100 px-2 py-0.5 text-[0.625rem] font-medium text-surface-500\"\r\n                      >\r\n                        {{ t(\"delegations.scope.unavailable\") }}\r\n                      </span>\r\n                    }\r\n                  </div>\r\n                }\r\n              </div>\r\n            } @else {\r\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\r\n                {{ t(\"delegations.scope.noSelection\") }}\r\n              </p>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"border-t border-surface-200 px-4 py-3 flex items-center justify-end\"\r\n    >\r\n      <mt-button\r\n        [label]=\"t('delegations.common.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"] }]
         }], propDecorators: { delegationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegationId", required: true }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }] } });
 
 function defaultTrueBooleanAttribute(value) {
@@ -3136,8 +3444,23 @@ class DelegationsList {
             : this.activeTab() === 'approvals'
                 ? this.facade.approvalItems()
                 : this.facade.assignedItems(), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    currentPage = computed(() => this.adminMode()
+        ? this.facade.adminPage()
+        : this.activeTab() === 'my'
+            ? this.facade.myPage()
+            : this.activeTab() === 'approvals'
+                ? this.facade.approvalsPage()
+                : this.facade.assignedPage(), ...(ngDevMode ? [{ debugName: "currentPage" }] : /* istanbul ignore next */ []));
+    currentQuery = signal({
+        page: 1,
+        pageSize: 25,
+    }, ...(ngDevMode ? [{ debugName: "currentQuery" }] : /* istanbul ignore next */ []));
     tableRows = computed(() => this.rows().map((row) => ({
         ...row,
+        displayStatus: row.effectiveStatus === 'Scheduled' &&
+            row.statusReasonCode === 'InactiveToday'
+            ? 'InactiveToday'
+            : row.effectiveStatus,
         listedUser: toDelegationUserValue(this.getListedParty(row)),
         delegatorUser: toDelegationUserValue(row.delegator),
         delegatedToUser: toDelegationUserValue(row.delegatedUser),
@@ -3270,7 +3593,7 @@ class DelegationsList {
     tableColumns = linkedSignal(() => {
         const baseColumns = [
             {
-                key: 'effectiveStatus',
+                key: 'displayStatus',
                 label: this.transloco.translate('delegations.column.status'),
                 type: 'status',
                 statusMap: this.statusMap(),
@@ -3397,6 +3720,7 @@ class DelegationsList {
         this.location.back();
     }
     loadCurrentTab(query = { page: 1, pageSize: 25 }) {
+        this.currentQuery.set(query);
         if (this.adminMode()) {
             this.facade.getAdmin(query);
             return;
@@ -3418,7 +3742,14 @@ class DelegationsList {
         }
     }
     reloadCurrentTab() {
-        this.loadCurrentTab();
+        this.loadCurrentTab(this.currentQuery());
+    }
+    onLazyLoad(event) {
+        this.loadCurrentTab({
+            ...this.currentQuery(),
+            page: event.currentPage ?? 1,
+            pageSize: event.pageSize ?? this.currentPage()?.pageSize ?? 25,
+        });
     }
     has(row, action) {
         return row.allowedActions?.includes(action) ?? false;
@@ -3627,7 +3958,7 @@ class DelegationsList {
         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", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, showPageShell: { classPropertyName: "showPageShell", publicName: "showPageShell", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, surfaceTitleKey: { classPropertyName: "surfaceTitleKey", publicName: "surfaceTitleKey", isSignal: true, isRequired: false, transformFunction: null }, assignedTabLabelKey: { classPropertyName: "assignedTabLabelKey", publicName: "assignedTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, assignedDecisionTab: { classPropertyName: "assignedDecisionTab", publicName: "assignedDecisionTab", isSignal: true, isRequired: false, transformFunction: null }, assignedEmptyStateKey: { classPropertyName: "assignedEmptyStateKey", publicName: "assignedEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, assignedStatus: { classPropertyName: "assignedStatus", publicName: "assignedStatus", isSignal: true, isRequired: false, transformFunction: null }, showApprovalTab: { classPropertyName: "showApprovalTab", publicName: "showApprovalTab", isSignal: true, isRequired: false, transformFunction: null }, approvalTabLabelKey: { classPropertyName: "approvalTabLabelKey", publicName: "approvalTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, approvalEmptyStateKey: { classPropertyName: "approvalEmptyStateKey", publicName: "approvalEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, approvalStatus: { classPropertyName: "approvalStatus", publicName: "approvalStatus", isSignal: true, isRequired: false, transformFunction: null }, routed: { classPropertyName: "routed", publicName: "routed", isSignal: true, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, itemSelected: { classPropertyName: "itemSelected", publicName: "itemSelected", isSignal: true, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: false, transformFunction: null }, delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <ng-template #tableContent>\r\n    <div class=\"flex flex-col gap-4\">\r\n      @if (!adminMode()) {\r\n        @let assignedLabel =\r\n          assignedDecisionTab()\r\n            ? t(\"delegations.action.approve\") +\r\n              \" / \" +\r\n              t(\"delegations.action.reject\")\r\n            : t(assignedTabLabelKey());\r\n\r\n        <mt-tabs\r\n          mode=\"underline\"\r\n          [active]=\"activeTab()\"\r\n          [options]=\"\r\n            showApprovalTab()\r\n              ? [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                  { value: 'approvals', label: t(approvalTabLabelKey()) },\r\n                ]\r\n              : [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                ]\r\n          \"\r\n          fluid\r\n          (onChange)=\"switchTab($event)\"\r\n        ></mt-tabs>\r\n      }\r\n\r\n      <mt-table\r\n        [data]=\"tableRows()\"\r\n        [columns]=\"tableColumns()\"\r\n        [actions]=\"tableActions()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"isLoading()\"\r\n        [noCard]=\"true\"\r\n      >\r\n        <ng-template #empty>\r\n          <div\r\n            class=\"flex min-h-64 flex-col items-center justify-center gap-4 px-6 py-10 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-9\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"14\"\r\n                  width=\"44\"\r\n                  height=\"36\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 28H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 36H35\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <p class=\"max-w-sm text-sm text-surface-500\">\r\n              {{ t(emptyStateKey()) }}\r\n            </p>\r\n          </div>\r\n        </ng-template>\r\n      </mt-table>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #adminContent>\r\n    <div class=\"flex min-h-full flex-col gap-4\">\r\n      @if (showBreadcrumb()) {\r\n        <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\r\n      }\r\n      <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  @if (adminMode()) {\r\n    @if (showPageShell()) {\r\n      <mt-page\r\n        [title]=\"surfaceTitle()\"\r\n        [avatarIcon]=\"'custom.hierarchy-structure'\"\r\n        [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\r\n        [avatarStyle]=\"{\r\n          '--p-avatar-background': 'var(--p-indigo-50)',\r\n          '--p-avatar-color': 'var(--p-indigo-700)',\r\n        }\"\r\n        (backButtonClick)=\"goBack()\"\r\n        backButton\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n      </mt-page>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"flex h-full flex-col gap-4 ps-4 pt-4\">\r\n      <mt-card class=\"rounded-e-none!\" [title]=\"surfaceTitle()\">\r\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n      </mt-card>\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table td.mt-actions-column>div{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { 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", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "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: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { 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: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, showPageShell: { classPropertyName: "showPageShell", publicName: "showPageShell", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, surfaceTitleKey: { classPropertyName: "surfaceTitleKey", publicName: "surfaceTitleKey", isSignal: true, isRequired: false, transformFunction: null }, assignedTabLabelKey: { classPropertyName: "assignedTabLabelKey", publicName: "assignedTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, assignedDecisionTab: { classPropertyName: "assignedDecisionTab", publicName: "assignedDecisionTab", isSignal: true, isRequired: false, transformFunction: null }, assignedEmptyStateKey: { classPropertyName: "assignedEmptyStateKey", publicName: "assignedEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, assignedStatus: { classPropertyName: "assignedStatus", publicName: "assignedStatus", isSignal: true, isRequired: false, transformFunction: null }, showApprovalTab: { classPropertyName: "showApprovalTab", publicName: "showApprovalTab", isSignal: true, isRequired: false, transformFunction: null }, approvalTabLabelKey: { classPropertyName: "approvalTabLabelKey", publicName: "approvalTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, approvalEmptyStateKey: { classPropertyName: "approvalEmptyStateKey", publicName: "approvalEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, approvalStatus: { classPropertyName: "approvalStatus", publicName: "approvalStatus", isSignal: true, isRequired: false, transformFunction: null }, routed: { classPropertyName: "routed", publicName: "routed", isSignal: true, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, itemSelected: { classPropertyName: "itemSelected", publicName: "itemSelected", isSignal: true, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: false, transformFunction: null }, delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <ng-template #tableContent>\r\n    <div class=\"flex flex-col gap-4\">\r\n      @if (!adminMode()) {\r\n        @let assignedLabel =\r\n          assignedDecisionTab()\r\n            ? t(\"delegations.action.approve\") +\r\n              \" / \" +\r\n              t(\"delegations.action.reject\")\r\n            : t(assignedTabLabelKey());\r\n\r\n        <mt-tabs\r\n          mode=\"underline\"\r\n          [active]=\"activeTab()\"\r\n          [options]=\"\r\n            showApprovalTab()\r\n              ? [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                  { value: 'approvals', label: t(approvalTabLabelKey()) },\r\n                ]\r\n              : [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                ]\r\n          \"\r\n          fluid\r\n          (onChange)=\"switchTab($event)\"\r\n        ></mt-tabs>\r\n      }\r\n\r\n      <mt-table\r\n        [data]=\"tableRows()\"\r\n        [columns]=\"tableColumns()\"\r\n        [actions]=\"tableActions()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"isLoading()\"\r\n        [lazy]=\"true\"\r\n        [lazyTotalRecords]=\"currentPage()?.totalCount ?? 0\"\r\n        dataKey=\"delegationId\"\r\n        [noCard]=\"true\"\r\n        (lazyLoad)=\"onLazyLoad($event)\"\r\n      >\r\n        <ng-template #empty>\r\n          <div\r\n            class=\"flex min-h-64 flex-col items-center justify-center gap-4 px-6 py-10 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-9\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"14\"\r\n                  width=\"44\"\r\n                  height=\"36\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 28H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 36H35\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <p class=\"max-w-sm text-sm text-surface-500\">\r\n              {{ t(emptyStateKey()) }}\r\n            </p>\r\n          </div>\r\n        </ng-template>\r\n      </mt-table>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #adminContent>\r\n    <div class=\"flex min-h-full flex-col gap-4\">\r\n      @if (showBreadcrumb()) {\r\n        <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\r\n      }\r\n      <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  @if (adminMode()) {\r\n    @if (showPageShell()) {\r\n      <mt-page\r\n        [title]=\"surfaceTitle()\"\r\n        [avatarIcon]=\"'custom.hierarchy-structure'\"\r\n        [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\r\n        [avatarStyle]=\"{\r\n          '--p-avatar-background': 'var(--p-indigo-50)',\r\n          '--p-avatar-color': 'var(--p-indigo-700)',\r\n        }\"\r\n        (backButtonClick)=\"goBack()\"\r\n        backButton\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n      </mt-page>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"flex h-full flex-col gap-4 ps-4 pt-4\">\r\n      <mt-card class=\"rounded-e-none!\" [title]=\"surfaceTitle()\">\r\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n      </mt-card>\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table td.mt-actions-column>div{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { 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", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { 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: DelegationsList, decorators: [{
             type: Component,
@@ -3639,108 +3970,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Table,
                         Tabs,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <ng-template #tableContent>\r\n    <div class=\"flex flex-col gap-4\">\r\n      @if (!adminMode()) {\r\n        @let assignedLabel =\r\n          assignedDecisionTab()\r\n            ? t(\"delegations.action.approve\") +\r\n              \" / \" +\r\n              t(\"delegations.action.reject\")\r\n            : t(assignedTabLabelKey());\r\n\r\n        <mt-tabs\r\n          mode=\"underline\"\r\n          [active]=\"activeTab()\"\r\n          [options]=\"\r\n            showApprovalTab()\r\n              ? [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                  { value: 'approvals', label: t(approvalTabLabelKey()) },\r\n                ]\r\n              : [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                ]\r\n          \"\r\n          fluid\r\n          (onChange)=\"switchTab($event)\"\r\n        ></mt-tabs>\r\n      }\r\n\r\n      <mt-table\r\n        [data]=\"tableRows()\"\r\n        [columns]=\"tableColumns()\"\r\n        [actions]=\"tableActions()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"isLoading()\"\r\n        [noCard]=\"true\"\r\n      >\r\n        <ng-template #empty>\r\n          <div\r\n            class=\"flex min-h-64 flex-col items-center justify-center gap-4 px-6 py-10 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-9\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"14\"\r\n                  width=\"44\"\r\n                  height=\"36\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 28H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 36H35\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <p class=\"max-w-sm text-sm text-surface-500\">\r\n              {{ t(emptyStateKey()) }}\r\n            </p>\r\n          </div>\r\n        </ng-template>\r\n      </mt-table>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #adminContent>\r\n    <div class=\"flex min-h-full flex-col gap-4\">\r\n      @if (showBreadcrumb()) {\r\n        <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\r\n      }\r\n      <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  @if (adminMode()) {\r\n    @if (showPageShell()) {\r\n      <mt-page\r\n        [title]=\"surfaceTitle()\"\r\n        [avatarIcon]=\"'custom.hierarchy-structure'\"\r\n        [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\r\n        [avatarStyle]=\"{\r\n          '--p-avatar-background': 'var(--p-indigo-50)',\r\n          '--p-avatar-color': 'var(--p-indigo-700)',\r\n        }\"\r\n        (backButtonClick)=\"goBack()\"\r\n        backButton\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n      </mt-page>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"flex h-full flex-col gap-4 ps-4 pt-4\">\r\n      <mt-card class=\"rounded-e-none!\" [title]=\"surfaceTitle()\">\r\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n      </mt-card>\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table td.mt-actions-column>div{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <ng-template #tableContent>\r\n    <div class=\"flex flex-col gap-4\">\r\n      @if (!adminMode()) {\r\n        @let assignedLabel =\r\n          assignedDecisionTab()\r\n            ? t(\"delegations.action.approve\") +\r\n              \" / \" +\r\n              t(\"delegations.action.reject\")\r\n            : t(assignedTabLabelKey());\r\n\r\n        <mt-tabs\r\n          mode=\"underline\"\r\n          [active]=\"activeTab()\"\r\n          [options]=\"\r\n            showApprovalTab()\r\n              ? [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                  { value: 'approvals', label: t(approvalTabLabelKey()) },\r\n                ]\r\n              : [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                ]\r\n          \"\r\n          fluid\r\n          (onChange)=\"switchTab($event)\"\r\n        ></mt-tabs>\r\n      }\r\n\r\n      <mt-table\r\n        [data]=\"tableRows()\"\r\n        [columns]=\"tableColumns()\"\r\n        [actions]=\"tableActions()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"isLoading()\"\r\n        [lazy]=\"true\"\r\n        [lazyTotalRecords]=\"currentPage()?.totalCount ?? 0\"\r\n        dataKey=\"delegationId\"\r\n        [noCard]=\"true\"\r\n        (lazyLoad)=\"onLazyLoad($event)\"\r\n      >\r\n        <ng-template #empty>\r\n          <div\r\n            class=\"flex min-h-64 flex-col items-center justify-center gap-4 px-6 py-10 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-9\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"14\"\r\n                  width=\"44\"\r\n                  height=\"36\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 28H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 36H35\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <p class=\"max-w-sm text-sm text-surface-500\">\r\n              {{ t(emptyStateKey()) }}\r\n            </p>\r\n          </div>\r\n        </ng-template>\r\n      </mt-table>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #adminContent>\r\n    <div class=\"flex min-h-full flex-col gap-4\">\r\n      @if (showBreadcrumb()) {\r\n        <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\r\n      }\r\n      <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  @if (adminMode()) {\r\n    @if (showPageShell()) {\r\n      <mt-page\r\n        [title]=\"surfaceTitle()\"\r\n        [avatarIcon]=\"'custom.hierarchy-structure'\"\r\n        [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\r\n        [avatarStyle]=\"{\r\n          '--p-avatar-background': 'var(--p-indigo-50)',\r\n          '--p-avatar-color': 'var(--p-indigo-700)',\r\n        }\"\r\n        (backButtonClick)=\"goBack()\"\r\n        backButton\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n      </mt-page>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"flex h-full flex-col gap-4 ps-4 pt-4\">\r\n      <mt-card class=\"rounded-e-none!\" [title]=\"surfaceTitle()\">\r\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n      </mt-card>\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table td.mt-actions-column>div{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumb", required: false }] }], showPageShell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageShell", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], surfaceTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceTitleKey", required: false }] }], assignedTabLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedTabLabelKey", required: false }] }], assignedDecisionTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedDecisionTab", required: false }] }], assignedEmptyStateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedEmptyStateKey", required: false }] }], assignedStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedStatus", required: false }] }], showApprovalTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApprovalTab", required: false }] }], approvalTabLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalTabLabelKey", required: false }] }], approvalEmptyStateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalEmptyStateKey", required: false }] }], approvalStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalStatus", required: false }] }], routed: [{ type: i0.Input, args: [{ isSignal: true, alias: "routed", required: false }] }], tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], itemSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSelected", required: false }] }], selectedItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemId", required: false }] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }], itemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemId", required: false }] }], delegationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegationId", required: false }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }] } });
 
-/**
- * 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\b/i;
-const SESSION_RELATED_MARKERS = [
-    'Delegation.Token.',
-    'Delegation.Session.ActorRequired',
-    'Delegation.Session.AuthSessionRequired',
-    'Delegation.Authorization.SessionMismatch',
+const FORBIDDEN_PATHS = [
+    /\/(?:identity\/)?(?:auth|login|logout|token)(?:\/|$)/i,
+    /\/identity\/delegations(?:\/|$)/i,
+    /\/(?:settings|assets|public)(?:\/|$)/i,
 ];
+const INVALIDATION_REASONS = {
+    scopechanged: 'ScopeChanged',
+    versionchanged: 'VersionChanged',
+    sessionmismatch: 'SessionMismatch',
+    actormismatch: 'ActorMismatch',
+    applicationmismatch: 'ApplicationMismatch',
+    tenantmismatch: 'TenantMismatch',
+    expired: 'Expired',
+    tokenexpired: 'Expired',
+    invalid: 'TokenInvalid',
+    tokeninvalid: 'TokenInvalid',
+};
 function isRecord(value) {
     return typeof value === 'object' && value !== null;
 }
-function getStringField(value, field) {
-    if (!isRecord(value)) {
-        return null;
-    }
-    const fieldValue = value[field];
-    return typeof fieldValue === 'string' ? fieldValue : null;
-}
-function getField(value, field) {
-    return isRecord(value) ? value[field] : null;
+function field(value, key) {
+    return isRecord(value) ? value[key] : undefined;
 }
-function readDelegationErrorText(error) {
+function delegationReasonCode(error) {
     const body = error.error;
-    const errors = getField(body, 'errors');
-    return [
-        getStringField(body, 'message'),
-        getStringField(body, 'code'),
-        getStringField(body, 'error'),
-        getStringField(errors, 'code'),
-        getStringField(errors, 'message'),
-        typeof body === 'string' ? body : null,
-        error.message,
-    ]
-        .filter((value) => !!value)
-        .join(' ');
-}
-function isSessionInvalidationText(errorText) {
-    if (SESSION_RELATED_MARKERS.some((marker) => errorText.includes(marker))) {
-        return true;
-    }
-    const normalized = errorText.toLowerCase();
-    if (!normalized.includes('delegated session') &&
-        !normalized.includes('delegation scope changed') &&
-        !normalized.includes('delegation changed')) {
-        return false;
-    }
-    return [
-        'not valid',
-        'could not be verified',
-        'does not match',
-        'scope changed',
-        'changed after the session started',
-        'start the delegated session again',
-        'restart the delegation session',
-    ].some((marker) => normalized.includes(marker));
-}
-function resolveInvalidationReason(error) {
-    const errorText = readDelegationErrorText(error);
-    if (!isSessionInvalidationText(errorText)) {
+    const errors = field(body, 'errors');
+    const directDetails = field(body, 'errorDetails');
+    const nestedDetails = field(errors, 'details');
+    const value = field(directDetails, 'delegationReasonCode') ??
+        field(nestedDetails, 'delegationReasonCode');
+    return typeof value === 'string' ? value : null;
+}
+function invalidationReason(error) {
+    const code = delegationReasonCode(error);
+    if (!code)
         return null;
+    const normalized = (code.split('.').pop() ?? code)
+        .replace(/[^a-z]/gi, '')
+        .toLowerCase();
+    return INVALIDATION_REASONS[normalized] ?? null;
+}
+function isTrustedRuntimeUrl(requestUrl, configuredBase, document) {
+    if (!configuredBase ||
+        FORBIDDEN_PATHS.some((rule) => rule.test(requestUrl))) {
+        return false;
     }
-    const normalized = errorText.toLowerCase();
-    if (errorText.includes('SessionMismatch') ||
-        normalized.includes('does not match')) {
-        return 'SessionMismatch';
+    try {
+        const pageBase = document.baseURI;
+        const request = new URL(requestUrl, pageBase);
+        const api = new URL(configuredBase, pageBase);
+        const apiPath = api.pathname.endsWith('/')
+            ? api.pathname
+            : `${api.pathname}/`;
+        return (request.origin === api.origin &&
+            (request.pathname === api.pathname ||
+                request.pathname.startsWith(apiPath)));
     }
-    if (errorText.includes('ScopeChanged') ||
-        errorText.includes('VersionChanged') ||
-        normalized.includes('scope changed') ||
-        normalized.includes('changed after the session started')) {
-        return 'ScopeChanged';
+    catch {
+        return false;
     }
-    return 'TokenInvalid';
 }
 /**
- * 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.
+ * Adds delegated authority only to explicitly marked, trusted business-runtime
+ * requests. Register after the normal authorization interceptor.
  */
 const appDelegationInterceptor = (req, next) => {
-    if (EXCLUDE.test(req.url)) {
+    if (!req.context.get(DELEGATED_RUNTIME_REQUEST)) {
         return next(req);
     }
-    const facade = inject(DelegationSessionFacade);
-    const token = facade.token();
+    const config = inject(DELEGATION_RUNTIME_CONFIG);
+    const document = inject(DOCUMENT);
+    if (!isTrustedRuntimeUrl(req.url, config.resolveApplicationApiBaseUrl(), document)) {
+        return next(req);
+    }
+    const token = inject(DelegationTokenVault).token();
     if (!token) {
         return next(req);
     }
+    const facade = inject(DelegationSessionFacade);
     return next(req.clone({ setHeaders: { 'app-delegation': `Bearer ${token}` } })).pipe(catchError((error) => {
         if (error instanceof HttpErrorResponse && error.status === 403) {
-            const reason = resolveInvalidationReason(error);
+            const reason = invalidationReason(error);
             if (reason) {
-                facade.endSession(reason);
-                facade.loadCandidates();
+                facade.endSession(reason).subscribe();
             }
         }
         return throwError(() => error);
@@ -3755,5 +4071,5 @@ const appDelegationInterceptor = (req, next) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ApproveDelegation, CancelDelegation, ClearDelegationDetail, ClearScopePreview, CreateDelegationLegacy, CreateDelegationV2, DELEGATION_RELOAD_ON_SESSION_CHANGE, DelegationDetailDrawer, DelegationForm, DelegationMenuPanel, DelegationSessionActionKey, DelegationSessionFacade, DelegationSessionState, DelegationStatusChip, Delegations, DelegationsActionKey, DelegationsFacade, DelegationsList, DelegationsState, EndDelegationSession, GetActiveAssignedDelegations, GetAdminDelegations, GetApprovalDelegations, GetAssignedDelegations, GetDelegationDetail, GetMyDelegations, GetScopeOptions, LoadDelegationCandidates, MarkDelegationPrompted, PreviewScope, RejectDelegation, RejectDelegationDialog, ScopePicker, StartDelegationSession, StartSessionDialog, SwitchDelegationSession, TopbarDelegationMenu, UpdateDelegationLegacy, UpdateDelegationV2, appDelegationInterceptor };
+export { ApproveDelegation, CancelDelegation, ClearDelegationDetail, ClearScopePreview, CreateDelegationLegacy, CreateDelegationV2, DELEGATED_RUNTIME_REQUEST, DELEGATION_RUNTIME_CONFIG, DelegationDetailDrawer, DelegationForm, DelegationMenuPanel, DelegationSessionActionKey, DelegationSessionFacade, DelegationSessionState, DelegationStatusChip, Delegations, DelegationsActionKey, DelegationsFacade, DelegationsList, DelegationsState, EndDelegationSession, GetActiveAssignedDelegations, GetAdminDelegations, GetApprovalDelegations, GetAssignedDelegations, GetDelegationDetail, GetMyDelegations, GetScopeOptions, LoadDelegationCandidates, PreviewScope, RejectDelegation, RejectDelegationDialog, ScopePicker, StartDelegationSession, StartSessionDialog, SwitchDelegationSession, TopbarDelegationMenu, UpdateDelegationLegacy, UpdateDelegationV2, appDelegationInterceptor, provideDelegationRuntime, withDelegatedRuntime };
 //# sourceMappingURL=masterteam-delegations.mjs.map