@masterteam/delegations 0.0.37 → 0.0.39

package/fesm2022/masterteam-delegations.mjs

@@ -1,16 +1,16 @@
 import * as i1 from '@angular/common';
-import { CommonModule, Location } from '@angular/common';
+import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, computed, input, ChangeDetectionStrategy, Component, output, viewChild, signal, effect, model, untracked, booleanAttribute, linkedSignal } from '@angular/core';
+import { inject, Injectable, InjectionToken, computed, input, ChangeDetectionStrategy, Component, output, viewChild, effect, signal, model, untracked, booleanAttribute, 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 { EMPTY, switchMap, filter, finalize, catchError, throwError } from 'rxjs';
 import { Button } from '@masterteam/components/button';
 import { ModalRef } from '@masterteam/components/dialog';
 import { EntityPreview } from '@masterteam/components/entities';
@@ -26,8 +26,10 @@ import { Table } from '@masterteam/components/table';
 import * as i2 from '@angular/forms';
 import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
+import * as i3 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { TextField } from '@masterteam/components/text-field';
-import * as i3 from 'primeng/skeleton';
+import * as i4 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 
 /** Fetch the active delegations the current user may start (user/activedelegations). */
@@ -58,6 +60,14 @@ 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) {
@@ -112,7 +122,12 @@ let DelegationSessionState = class DelegationSessionState {
     constructor() {
         this.actions$
             .pipe(ofActionSuccessful(GatewayLoginSuccessShell))
-            .subscribe(() => this.store.dispatch(new LoadDelegationCandidates()));
+            .subscribe(() => this.store.dispatch([
+            // Reset the prompt flag for the new login, then (re)load candidates so
+            // the "delegations available" prompt fires exactly once after login.
+            new MarkDelegationPrompted(false),
+            new LoadDelegationCandidates(),
+        ]));
         this.actions$
             .pipe(ofActionDispatched(GatewayLogoutShell))
             .subscribe(() => this.store.dispatch(new EndDelegationSession('Logout')));
@@ -132,6 +147,9 @@ let DelegationSessionState = class DelegationSessionState {
     static getCandidates(state) {
         return state.candidates;
     }
+    static getPrompted(state) {
+        return state.prompted;
+    }
     static isDelegated(state) {
         return !!state.active;
     }
@@ -172,10 +190,16 @@ let DelegationSessionState = class DelegationSessionState {
         // Client-local only — there is no server end-session endpoint (doc 05).
         ctx.patchState({
             active: null,
-            ...(shouldClearCandidates(reason) ? { candidates: [] } : {}),
+            ...(shouldClearCandidates(reason)
+                ? { candidates: [], prompted: false }
+                : {}),
         });
         return EMPTY;
     }
+    markPrompted(ctx, { prompted }) {
+        ctx.patchState({ prompted });
+        return EMPTY;
+    }
     switch(ctx, { delegation }) {
         return this.store
             .dispatch(new EndDelegationSession('Manual'))
@@ -193,6 +217,9 @@ __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);
@@ -202,6 +229,9 @@ __decorate$1([
 __decorate$1([
     Selector()
 ], DelegationSessionState, "getCandidates", null);
+__decorate$1([
+    Selector()
+], DelegationSessionState, "getPrompted", null);
 __decorate$1([
     Selector()
 ], DelegationSessionState, "isDelegated", null);
@@ -217,6 +247,7 @@ DelegationSessionState = __decorate$1([
         defaults: {
             active: null,
             candidates: [],
+            prompted: false,
             loadingActive: [],
             errors: {},
         },
@@ -224,16 +255,27 @@ 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: [], switch: [] } });
+        }], ctorParameters: () => [], propDecorators: { loadCandidates: [], start: [], end: [], markPrompted: [], 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);
     // ---------------------------------------------------------------------------
     // Data slices
     // ---------------------------------------------------------------------------
     active = select(DelegationSessionState.getActive);
     candidates = select(DelegationSessionState.getCandidates);
     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)
@@ -253,14 +295,37 @@ class DelegationSessionFacade {
     loadCandidates() {
         return this.store.dispatch(new LoadDelegationCandidates());
     }
+    markPrompted(prompted = true) {
+        return this.store.dispatch(new MarkDelegationPrompted(prompted));
+    }
     startSession(delegation) {
-        return this.store.dispatch(new StartDelegationSession(delegation));
+        return this.store
+            .dispatch(new StartDelegationSession(delegation))
+            .pipe(tap(() => this.reloadAfterSessionChange()));
     }
     switchSession(delegation) {
-        return this.store.dispatch(new SwitchDelegationSession(delegation));
+        return this.store
+            .dispatch(new SwitchDelegationSession(delegation))
+            .pipe(tap(() => this.reloadAfterSessionChange()));
     }
     endSession(reason = 'Manual') {
-        return this.store.dispatch(new EndDelegationSession(reason));
+        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);
+        }
     }
     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' });
@@ -641,10 +706,9 @@ class TopbarDelegationMenu {
     showManageLink = input(true, ...(ngDevMode ? [{ debugName: "showManageLink" }] : /* istanbul ignore next */ []));
     promptOnCandidates = input(true, ...(ngDevMode ? [{ debugName: "promptOnCandidates" }] : /* istanbul ignore next */ []));
     /**
-     * Suppress the *candidates* trigger (surface them elsewhere, e.g. the user
-     * dropdown via {@link DelegationMenuPanel}) while keeping candidate loading +
-     * the post-login prompt. The *active* "Acting on behalf of" pill stays visible
-     * even when headless — an active delegated session must always be obvious.
+     * Render no topbar UI at all (controller only) while keeping candidate
+     * loading + the post-login prompt. Use when the menu is surfaced elsewhere —
+     * e.g. embedded in the user-avatar dropdown via {@link DelegationMenuPanel}.
      */
     headless = input(false, ...(ngDevMode ? [{ debugName: "headless" }] : /* istanbul ignore next */ []));
     facade = inject(DelegationSessionFacade);
@@ -656,7 +720,8 @@ class TopbarDelegationMenu {
     hasCandidates = this.facade.hasCandidates;
     onBehalfOf = this.facade.onBehalfOf;
     executedBy = this.facade.executedBy;
-    promptShown = signal(false, ...(ngDevMode ? [{ debugName: "promptShown" }] : /* istanbul ignore next */ []));
+    /** Per-instance guard; the persisted `facade.prompted()` guards across refresh. */
+    localPrompted = false;
     mode = computed(() => {
         if (this.active())
             return 'active';
@@ -665,17 +730,22 @@ 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.
         effect(() => {
             const candidates = this.candidates();
-            const shouldPrompt = this.promptOnCandidates() &&
-                !this.promptShown() &&
-                !this.active() &&
-                candidates.length > 0;
-            if (!shouldPrompt) {
+            if (!this.promptOnCandidates() ||
+                this.active() ||
+                this.facade.prompted() ||
+                this.localPrompted ||
+                candidates.length === 0) {
                 return;
             }
-            this.promptShown.set(true);
-            queueMicrotask(() => this.openCandidatesPrompt(candidates));
+            this.localPrompted = true;
+            queueMicrotask(() => {
+                this.facade.markPrompted();
+                this.openCandidatesPrompt(candidates);
+            });
         });
     }
     ngOnInit() {
@@ -724,7 +794,7 @@ class TopbarDelegationMenu {
         });
     }
     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\">\n  <!-- The active \"Acting on behalf of\" pill stays visible even when headless\n       (candidates are surfaced elsewhere, e.g. the user dropdown); an active\n       delegated session must always be obvious (doc 09 session banner). -->\n  @if (mode() === \"active\" || (!headless() && mode() === \"candidates\")) {\n    @if (mode() === \"active\") {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {{\n          t(\"delegations.session.banner\", {\n            delegatorName: onBehalfOf()?.displayName,\n          })\n        }}.\n        {{\n          t(\"delegations.session.executedBy\", {\n            actualUserName: executedBy()?.displayName,\n          })\n        }}\n      </span>\n    }\n\n    <div class=\"mt-delegation-trigger flex items-center\">\n      @if (mode() === \"active\") {\n        <!-- Active: show the delegator like a user identity, with a switcher caret -->\n        <button\n          type=\"button\"\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\"\n          [attr.aria-label]=\"\n            t('delegations.session.banner', {\n              delegatorName: onBehalfOf()?.displayName,\n            }) +\n            '. ' +\n            t('delegations.session.executedBy', {\n              actualUserName: executedBy()?.displayName,\n            })\n          \"\n          (click)=\"togglePopover($event)\"\n        >\n          <span class=\"relative shrink-0\">\n            <mt-avatar\n              [label]=\"initials(onBehalfOf())\"\n              shape=\"circle\"\n              styleClass=\"!size-7 !text-[0.7rem] !bg-primary-100 !text-primary-700\"\n            ></mt-avatar>\n            <span\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\"\n              aria-hidden=\"true\"\n            >\n              <mt-icon\n                icon=\"user.users-check\"\n                styleClass=\"text-[0.55rem] text-white\"\n              ></mt-icon>\n            </span>\n          </span>\n          @if (!compact()) {\n            <span\n              class=\"mt-delegation-trigger__label hidden min-w-0 flex-col text-start leading-tight md:flex\"\n            >\n              <span class=\"text-[0.625rem] font-medium uppercase opacity-60\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </span>\n              <span class=\"truncate text-sm font-semibold\">\n                {{ onBehalfOf()?.displayName }}\n              </span>\n            </span>\n          }\n          <mt-icon\n            icon=\"arrow.chevron-down\"\n            styleClass=\"text-sm opacity-70\"\n          ></mt-icon>\n        </button>\n      } @else {\n        <!-- Candidates: plain icon button matching the other topbar icons -->\n        <button\n          type=\"button\"\n          class=\"mt-delegation-trigger__icon relative flex size-9 cursor-pointer items-center justify-center rounded-full text-current\"\n          [attr.aria-label]=\"t('delegations.session.availableTitle')\"\n          (click)=\"togglePopover($event)\"\n        >\n          <mt-icon icon=\"user.users-plus\" styleClass=\"text-xl\"></mt-icon>\n          @if (candidates().length > 0) {\n            <span\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\"\n            >\n              {{ candidates().length }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"w-72 max-w-[88vw]\">\n        <mt-delegation-menu-panel\n          [managePath]=\"managePath()\"\n          [showManageLink]=\"showManageLink()\"\n          (closeRequested)=\"closePopover()\"\n        ></mt-delegation-menu-panel>\n      </div>\n    </p-popover>\n  }\n</ng-container>\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\">\n  <!-- Headless = controller only (no topbar UI); the menu is surfaced in the\n       host user dropdown via <mt-delegation-menu-panel>. -->\n  @if (!headless() && mode() !== \"hidden\") {\n    @if (mode() === \"active\") {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {{\n          t(\"delegations.session.banner\", {\n            delegatorName: onBehalfOf()?.displayName,\n          })\n        }}.\n        {{\n          t(\"delegations.session.executedBy\", {\n            actualUserName: executedBy()?.displayName,\n          })\n        }}\n      </span>\n    }\n\n    <div class=\"mt-delegation-trigger flex items-center\">\n      @if (mode() === \"active\") {\n        <!-- Active: show the delegator like a user identity, with a switcher caret -->\n        <button\n          type=\"button\"\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\"\n          [attr.aria-label]=\"\n            t('delegations.session.banner', {\n              delegatorName: onBehalfOf()?.displayName,\n            }) +\n            '. ' +\n            t('delegations.session.executedBy', {\n              actualUserName: executedBy()?.displayName,\n            })\n          \"\n          (click)=\"togglePopover($event)\"\n        >\n          <span class=\"relative shrink-0\">\n            <mt-avatar\n              [label]=\"initials(onBehalfOf())\"\n              shape=\"circle\"\n              styleClass=\"!size-7 !text-[0.7rem] !bg-primary-100 !text-primary-700\"\n            ></mt-avatar>\n            <span\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\"\n              aria-hidden=\"true\"\n            >\n              <mt-icon\n                icon=\"user.users-check\"\n                styleClass=\"text-[0.55rem] text-white\"\n              ></mt-icon>\n            </span>\n          </span>\n          @if (!compact()) {\n            <span\n              class=\"mt-delegation-trigger__label hidden min-w-0 flex-col text-start leading-tight md:flex\"\n            >\n              <span class=\"text-[0.625rem] font-medium uppercase opacity-60\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </span>\n              <span class=\"truncate text-sm font-semibold\">\n                {{ onBehalfOf()?.displayName }}\n              </span>\n            </span>\n          }\n          <mt-icon\n            icon=\"arrow.chevron-down\"\n            styleClass=\"text-sm opacity-70\"\n          ></mt-icon>\n        </button>\n      } @else {\n        <!-- Candidates: plain icon button matching the other topbar icons -->\n        <button\n          type=\"button\"\n          class=\"mt-delegation-trigger__icon relative flex size-9 cursor-pointer items-center justify-center rounded-full text-current\"\n          [attr.aria-label]=\"t('delegations.session.availableTitle')\"\n          (click)=\"togglePopover($event)\"\n        >\n          <mt-icon icon=\"user.users-plus\" styleClass=\"text-xl\"></mt-icon>\n          @if (candidates().length > 0) {\n            <span\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\"\n            >\n              {{ candidates().length }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"w-72 max-w-[88vw]\">\n        <mt-delegation-menu-panel\n          [managePath]=\"managePath()\"\n          [showManageLink]=\"showManageLink()\"\n          (closeRequested)=\"closePopover()\"\n        ></mt-delegation-menu-panel>\n      </div>\n    </p-popover>\n  }\n</ng-container>\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,
@@ -735,7 +805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Popover,
                         TranslocoDirective,
                         DelegationMenuPanel,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <!-- The active \"Acting on behalf of\" pill stays visible even when headless\n       (candidates are surfaced elsewhere, e.g. the user dropdown); an active\n       delegated session must always be obvious (doc 09 session banner). -->\n  @if (mode() === \"active\" || (!headless() && mode() === \"candidates\")) {\n    @if (mode() === \"active\") {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {{\n          t(\"delegations.session.banner\", {\n            delegatorName: onBehalfOf()?.displayName,\n          })\n        }}.\n        {{\n          t(\"delegations.session.executedBy\", {\n            actualUserName: executedBy()?.displayName,\n          })\n        }}\n      </span>\n    }\n\n    <div class=\"mt-delegation-trigger flex items-center\">\n      @if (mode() === \"active\") {\n        <!-- Active: show the delegator like a user identity, with a switcher caret -->\n        <button\n          type=\"button\"\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\"\n          [attr.aria-label]=\"\n            t('delegations.session.banner', {\n              delegatorName: onBehalfOf()?.displayName,\n            }) +\n            '. ' +\n            t('delegations.session.executedBy', {\n              actualUserName: executedBy()?.displayName,\n            })\n          \"\n          (click)=\"togglePopover($event)\"\n        >\n          <span class=\"relative shrink-0\">\n            <mt-avatar\n              [label]=\"initials(onBehalfOf())\"\n              shape=\"circle\"\n              styleClass=\"!size-7 !text-[0.7rem] !bg-primary-100 !text-primary-700\"\n            ></mt-avatar>\n            <span\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\"\n              aria-hidden=\"true\"\n            >\n              <mt-icon\n                icon=\"user.users-check\"\n                styleClass=\"text-[0.55rem] text-white\"\n              ></mt-icon>\n            </span>\n          </span>\n          @if (!compact()) {\n            <span\n              class=\"mt-delegation-trigger__label hidden min-w-0 flex-col text-start leading-tight md:flex\"\n            >\n              <span class=\"text-[0.625rem] font-medium uppercase opacity-60\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </span>\n              <span class=\"truncate text-sm font-semibold\">\n                {{ onBehalfOf()?.displayName }}\n              </span>\n            </span>\n          }\n          <mt-icon\n            icon=\"arrow.chevron-down\"\n            styleClass=\"text-sm opacity-70\"\n          ></mt-icon>\n        </button>\n      } @else {\n        <!-- Candidates: plain icon button matching the other topbar icons -->\n        <button\n          type=\"button\"\n          class=\"mt-delegation-trigger__icon relative flex size-9 cursor-pointer items-center justify-center rounded-full text-current\"\n          [attr.aria-label]=\"t('delegations.session.availableTitle')\"\n          (click)=\"togglePopover($event)\"\n        >\n          <mt-icon icon=\"user.users-plus\" styleClass=\"text-xl\"></mt-icon>\n          @if (candidates().length > 0) {\n            <span\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\"\n            >\n              {{ candidates().length }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"w-72 max-w-[88vw]\">\n        <mt-delegation-menu-panel\n          [managePath]=\"managePath()\"\n          [showManageLink]=\"showManageLink()\"\n          (closeRequested)=\"closePopover()\"\n        ></mt-delegation-menu-panel>\n      </div>\n    </p-popover>\n  }\n</ng-container>\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\">\n  <!-- Headless = controller only (no topbar UI); the menu is surfaced in the\n       host user dropdown via <mt-delegation-menu-panel>. -->\n  @if (!headless() && mode() !== \"hidden\") {\n    @if (mode() === \"active\") {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {{\n          t(\"delegations.session.banner\", {\n            delegatorName: onBehalfOf()?.displayName,\n          })\n        }}.\n        {{\n          t(\"delegations.session.executedBy\", {\n            actualUserName: executedBy()?.displayName,\n          })\n        }}\n      </span>\n    }\n\n    <div class=\"mt-delegation-trigger flex items-center\">\n      @if (mode() === \"active\") {\n        <!-- Active: show the delegator like a user identity, with a switcher caret -->\n        <button\n          type=\"button\"\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\"\n          [attr.aria-label]=\"\n            t('delegations.session.banner', {\n              delegatorName: onBehalfOf()?.displayName,\n            }) +\n            '. ' +\n            t('delegations.session.executedBy', {\n              actualUserName: executedBy()?.displayName,\n            })\n          \"\n          (click)=\"togglePopover($event)\"\n        >\n          <span class=\"relative shrink-0\">\n            <mt-avatar\n              [label]=\"initials(onBehalfOf())\"\n              shape=\"circle\"\n              styleClass=\"!size-7 !text-[0.7rem] !bg-primary-100 !text-primary-700\"\n            ></mt-avatar>\n            <span\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\"\n              aria-hidden=\"true\"\n            >\n              <mt-icon\n                icon=\"user.users-check\"\n                styleClass=\"text-[0.55rem] text-white\"\n              ></mt-icon>\n            </span>\n          </span>\n          @if (!compact()) {\n            <span\n              class=\"mt-delegation-trigger__label hidden min-w-0 flex-col text-start leading-tight md:flex\"\n            >\n              <span class=\"text-[0.625rem] font-medium uppercase opacity-60\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </span>\n              <span class=\"truncate text-sm font-semibold\">\n                {{ onBehalfOf()?.displayName }}\n              </span>\n            </span>\n          }\n          <mt-icon\n            icon=\"arrow.chevron-down\"\n            styleClass=\"text-sm opacity-70\"\n          ></mt-icon>\n        </button>\n      } @else {\n        <!-- Candidates: plain icon button matching the other topbar icons -->\n        <button\n          type=\"button\"\n          class=\"mt-delegation-trigger__icon relative flex size-9 cursor-pointer items-center justify-center rounded-full text-current\"\n          [attr.aria-label]=\"t('delegations.session.availableTitle')\"\n          (click)=\"togglePopover($event)\"\n        >\n          <mt-icon icon=\"user.users-plus\" styleClass=\"text-xl\"></mt-icon>\n          @if (candidates().length > 0) {\n            <span\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\"\n            >\n              {{ candidates().length }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"w-72 max-w-[88vw]\">\n        <mt-delegation-menu-panel\n          [managePath]=\"managePath()\"\n          [showManageLink]=\"showManageLink()\"\n          (closeRequested)=\"closePopover()\"\n        ></mt-delegation-menu-panel>\n      </div>\n    </p-popover>\n  }\n</ng-container>\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 }] }] } });
 
 // ---------------------------------------------------------------------------
@@ -1997,6 +2067,22 @@ class ScopePicker {
     /** Stable operation-node keys for the current scope grants. */
     selectedKeys = computed(() => new Set(this.scope().grants.map(delegationOperationNodeKey)), ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
     selectedCount = computed(() => this.selectedKeys().size, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
+    /** Every selectable operation key (for the "select all" master toggle). */
+    allLeafKeys = computed(() => Array.from(this.grantIndex().keys()), ...(ngDevMode ? [{ debugName: "allLeafKeys" }] : /* istanbul ignore next */ []));
+    selectAllState = computed(() => {
+        const all = this.allLeafKeys();
+        if (!all.length)
+            return 'unchecked';
+        const selected = this.selectedKeys();
+        let count = 0;
+        for (const key of all) {
+            if (selected.has(key))
+                count++;
+        }
+        if (count === 0)
+            return 'unchecked';
+        return count === all.length ? 'checked' : 'indeterminate';
+    }, ...(ngDevMode ? [{ debugName: "selectAllState" }] : /* istanbul ignore next */ []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     expandedKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
     filteredTree = computed(() => {
@@ -2021,6 +2107,28 @@ class ScopePicker {
             .map(prune)
             .filter((node) => !!node);
     }, ...(ngDevMode ? [{ debugName: "filteredTree" }] : /* istanbul ignore next */ []));
+    /**
+     * Flattened list of currently-visible rows (respecting expand state + search)
+     * for CDK virtual scrolling — only the on-screen rows render, so large
+     * permission catalogs stay fast. Recomputes on tree/expand/search changes,
+     * NOT on selection toggles.
+     */
+    visibleNodes = computed(() => {
+        const out = [];
+        const searching = !!this.searchTerm().trim();
+        const expanded = this.expandedKeys();
+        const walk = (nodes, depth) => {
+            for (const node of nodes) {
+                out.push({ node, depth });
+                const open = searching || expanded.has(node.key);
+                if (open && node.children?.length) {
+                    walk(node.children, depth + 1);
+                }
+            }
+        };
+        walk(this.filteredTree(), 0);
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
     // --- App accessibility ----------------------------------------------------
     appAccessibilities = computed(() => this.options()?.appAccessibility ?? [], ...(ngDevMode ? [{ debugName: "appAccessibilities" }] : /* istanbul ignore next */ []));
     selectedAccessibilityKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedAccessibilityKeys" }] : /* istanbul ignore next */ []));
@@ -2042,25 +2150,33 @@ class ScopePicker {
                 return;
             }
             if (lastDelegatorUserId !== delegator) {
+                // Only reset when the user actually switches between two real
+                // delegators. The initial population (undefined -> id, e.g. edit
+                // prefill or self-service current user arriving) must NOT wipe the
+                // freshly-bound scope.
+                const switchedDelegator = !!lastDelegatorUserId && !!delegator;
                 lastDelegatorUserId = delegator;
-                this.scope.set(EMPTY_SCOPE$1);
-                this.selectedAccessibilityKeys.set(new Set());
-                this.searchTerm.set('');
-                this.activeScopeTab.set('permissions');
-                this.facade.clearScopePreview();
+                if (switchedDelegator) {
+                    untracked(() => {
+                        this.scope.set(EMPTY_SCOPE$1);
+                        this.selectedAccessibilityKeys.set(new Set());
+                        this.searchTerm.set('');
+                        this.activeScopeTab.set('permissions');
+                        this.facade.clearScopePreview();
+                    });
+                }
             }
         });
-        // Default-expand Template + Level nodes whenever options (re)load.
+        // Default-expand Template nodes whenever options (re)load (levels collapse
+        // so large catalogs open compact; search auto-expands matches).
         effect(() => {
             const model = this.treeModel();
             const keys = new Set();
-            const walk = (node) => {
-                if (node.kind === 'template' || node.kind === 'level') {
+            for (const node of model) {
+                if (node.kind === 'template') {
                     keys.add(node.key);
                 }
-                (node.children ?? []).forEach(walk);
-            };
-            model.forEach(walk);
+            }
             untracked(() => this.expandedKeys.set(keys));
         });
         // Debounced scope preview.
@@ -2190,6 +2306,21 @@ class ScopePicker {
         }
         this.scope.update((scope) => ({ ...scope, grants: [] }));
     }
+    /** Master "select all" toggle in the tree header. */
+    toggleAll() {
+        if (this.readonly()) {
+            return;
+        }
+        if (this.selectAllState() === 'checked') {
+            this.clearSelection();
+        }
+        else {
+            this.applySelection(new Set(this.allLeafKeys()));
+        }
+    }
+    trackVisible(_index, item) {
+        return item.node.key;
+    }
     // --- App accessibility ----------------------------------------------------
     toggleAccessibility(key) {
         if (this.readonly()) {
@@ -2248,13 +2379,14 @@ 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\">\n  <!-- Recursive node template -->\n  <ng-template #nodeTpl let-node let-depth=\"depth\">\n    @let state = nodeState(node);\n    @let branch = hasChildren(node);\n    <div\n      class=\"group flex items-center gap-2 rounded-lg py-1.5 pe-2 transition-colors hover:bg-surface-50\"\n      [style.padding-inline-start.rem]=\"0.25 + depth * 1.25\"\n    >\n      @if (branch) {\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(node)\"\n          [attr.aria-label]=\"nodeLabel(node)\"\n          (click)=\"toggleExpand(node); $event.stopPropagation()\"\n        >\n          <mt-icon\n            [icon]=\"isExpanded(node) ? 'arrow.chevron-down' : 'arrow.chevron-right'\"\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          state === 'indeterminate' ? 'mixed' : state === 'checked'\n        \"\n        [attr.aria-label]=\"nodeLabel(node)\"\n        class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n        [class.cursor-pointer]=\"!readonly()\"\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        [disabled]=\"readonly()\"\n        (click)=\"toggle(node); $event.stopPropagation()\"\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      </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(node)\"\n      >\n        <span\n          class=\"truncate text-sm\"\n          [class.font-semibold]=\"node.kind === 'template'\"\n          [class.text-surface-900]=\"node.kind === 'template'\"\n          [class.font-medium]=\"node.kind === 'level' || node.kind === 'module'\"\n          [class.text-surface-800]=\"node.kind === 'level' || node.kind === 'module'\"\n          [class.text-surface-600]=\"node.kind === 'operation'\"\n        >\n          {{ nodeLabel(node) }}\n        </span>\n        @if (node.kind === \"operation\" && node.isHighRisk) {\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\n    @if (branch && isExpanded(node)) {\n      @for (child of node.children; track trackNode($index, child)) {\n        <ng-container\n          *ngTemplateOutlet=\"nodeTpl; context: { $implicit: child, depth: depth + 1 }\"\n        ></ng-container>\n      }\n    }\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 class=\"flex items-center gap-2 border-b border-surface px-3 py-2\">\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            <!-- Permission tree -->\n            <div class=\"max-h-[22rem] overflow-y-auto p-1.5\">\n              @for (node of filteredTree(); track trackNode($index, node)) {\n                <ng-container\n                  *ngTemplateOutlet=\"nodeTpl; context: { $implicit: node, depth: 0 }\"\n                ></ng-container>\n              } @empty {\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            </div>\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 (item of appAccessibilities(); track item.accessibilityKey) {\n                  @let selected = 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 class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\">\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: "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: i3.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 class=\"flex items-center gap-2 border-b border-surface px-3 py-2\">\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=\"checkbox; context: { state: selectAllState() }\"\n              ></ng-container>\n              <span class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\">\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)=\"toggleExpand(item.node); $event.stopPropagation()\"\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' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        item.node.kind === 'level' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\n                    >\n                      {{ nodeLabel(item.node) }}\n                    </span>\n                    @if (item.node.kind === \"operation\" && item.node.isHighRisk) {\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 (item of appAccessibilities(); track item.accessibilityKey) {\n                  @let selected = 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 class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\">\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,
             args: [{ selector: 'mt-scope-picker', imports: [
                         CommonModule,
                         FormsModule,
+                        ScrollingModule,
                         Button,
                         Card,
                         Icon,
@@ -2262,7 +2394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         TextField,
                         SkeletonModule,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <!-- Recursive node template -->\n  <ng-template #nodeTpl let-node let-depth=\"depth\">\n    @let state = nodeState(node);\n    @let branch = hasChildren(node);\n    <div\n      class=\"group flex items-center gap-2 rounded-lg py-1.5 pe-2 transition-colors hover:bg-surface-50\"\n      [style.padding-inline-start.rem]=\"0.25 + depth * 1.25\"\n    >\n      @if (branch) {\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(node)\"\n          [attr.aria-label]=\"nodeLabel(node)\"\n          (click)=\"toggleExpand(node); $event.stopPropagation()\"\n        >\n          <mt-icon\n            [icon]=\"isExpanded(node) ? 'arrow.chevron-down' : 'arrow.chevron-right'\"\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          state === 'indeterminate' ? 'mixed' : state === 'checked'\n        \"\n        [attr.aria-label]=\"nodeLabel(node)\"\n        class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n        [class.cursor-pointer]=\"!readonly()\"\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        [disabled]=\"readonly()\"\n        (click)=\"toggle(node); $event.stopPropagation()\"\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      </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(node)\"\n      >\n        <span\n          class=\"truncate text-sm\"\n          [class.font-semibold]=\"node.kind === 'template'\"\n          [class.text-surface-900]=\"node.kind === 'template'\"\n          [class.font-medium]=\"node.kind === 'level' || node.kind === 'module'\"\n          [class.text-surface-800]=\"node.kind === 'level' || node.kind === 'module'\"\n          [class.text-surface-600]=\"node.kind === 'operation'\"\n        >\n          {{ nodeLabel(node) }}\n        </span>\n        @if (node.kind === \"operation\" && node.isHighRisk) {\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\n    @if (branch && isExpanded(node)) {\n      @for (child of node.children; track trackNode($index, child)) {\n        <ng-container\n          *ngTemplateOutlet=\"nodeTpl; context: { $implicit: child, depth: depth + 1 }\"\n        ></ng-container>\n      }\n    }\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 class=\"flex items-center gap-2 border-b border-surface px-3 py-2\">\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            <!-- Permission tree -->\n            <div class=\"max-h-[22rem] overflow-y-auto p-1.5\">\n              @for (node of filteredTree(); track trackNode($index, node)) {\n                <ng-container\n                  *ngTemplateOutlet=\"nodeTpl; context: { $implicit: node, depth: 0 }\"\n                ></ng-container>\n              } @empty {\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            </div>\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 (item of appAccessibilities(); track item.accessibilityKey) {\n                  @let selected = 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 class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\">\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" }]
+                    ], 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 class=\"flex items-center gap-2 border-b border-surface px-3 py-2\">\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=\"checkbox; context: { state: selectAllState() }\"\n              ></ng-container>\n              <span class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\">\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)=\"toggleExpand(item.node); $event.stopPropagation()\"\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' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        item.node.kind === 'level' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\n                    >\n                      {{ nodeLabel(item.node) }}\n                    </span>\n                    @if (item.node.kind === \"operation\" && item.node.isHighRisk) {\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 (item of appAccessibilities(); track item.accessibilityKey) {\n                  @let selected = 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 class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\">\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: {} };
@@ -2309,6 +2441,23 @@ function getCurrentDelegatorFromLocalStorage() {
         return null;
     }
 }
+/**
+ * Backend requires ISO 8601 **UTC** timestamps ending with `Z`
+ * (Masterteam.Shared `ISO8601DateTimeConverter`). The date field can emit a
+ * `Date` or an offset string like `2026-06-01T13:47:00+00:00`; normalize both
+ * to the same instant rendered with `Z` (otherwise the command fails to bind →
+ * "command field is required").
+ */
+function toUtcIso(value) {
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime()) ? undefined : value.toISOString();
+    }
+    if (typeof value === 'string' && value.trim()) {
+        const parsed = new Date(value);
+        return Number.isNaN(parsed.getTime()) ? value : parsed.toISOString();
+    }
+    return undefined;
+}
 function extractUserId(value) {
     if (typeof value === 'string') {
         return value.trim() || undefined;
@@ -2490,34 +2639,47 @@ class DelegationForm {
             },
         ],
     }), ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
+    // Prefill (edit) and default-init (create) must each happen exactly once, so
+    // later signal changes (detail re-emits, field edits) never wipe the user's
+    // in-progress scope selection or field values.
+    editPrefilled = false;
+    createInitialized = false;
     constructor() {
         effect(() => {
             const editing = this.delegationForEdit();
             const d = this.detail();
-            if (editing && d && d.row.delegationId === editing.delegationId) {
-                this.delegationFormControl.patchValue({
-                    delegateFrom: this.mapPartyToUserValue(d.row.delegator),
-                    delegateTo: d.row.delegatedUser,
-                    description: '',
-                    delegateFromDateTime: d.row.startsAtUtc,
-                    delegateToDateTime: d.row.endsAtUtc,
-                    delegationDaysType: d.row.dayRuleMode,
-                    specificDays: d.row.specificDays ?? [],
-                    requiresApproval: d.row.approval?.requiresApproval ?? false,
-                });
-                this.scope.set({
-                    grants: d.scope?.grants ?? [],
-                    metadata: d.scope?.metadata ?? {},
-                });
-            }
-            else if (!editing) {
-                this.delegationFormControl.reset({
-                    delegateFrom: null,
-                    delegationDaysType: 'FullRange',
-                    requiresApproval: true,
-                });
-                this.scope.set(EMPTY_SCOPE);
-            }
+            untracked(() => {
+                if (editing && d && d.row.delegationId === editing.delegationId) {
+                    if (this.editPrefilled)
+                        return;
+                    this.editPrefilled = true;
+                    this.delegationFormControl.patchValue({
+                        delegateFrom: this.mapPartyToUserValue(d.row.delegator),
+                        delegateTo: d.row.delegatedUser,
+                        description: '',
+                        delegateFromDateTime: d.row.startsAtUtc,
+                        delegateToDateTime: d.row.endsAtUtc,
+                        delegationDaysType: d.row.dayRuleMode,
+                        specificDays: d.row.specificDays ?? [],
+                        requiresApproval: d.row.approval?.requiresApproval ?? false,
+                    });
+                    this.scope.set({
+                        grants: d.scope?.grants ?? [],
+                        metadata: d.scope?.metadata ?? {},
+                    });
+                }
+                else if (!editing) {
+                    if (this.createInitialized)
+                        return;
+                    this.createInitialized = true;
+                    this.delegationFormControl.reset({
+                        delegateFrom: null,
+                        delegationDaysType: 'FullRange',
+                        requiresApproval: true,
+                    });
+                    this.scope.set(EMPTY_SCOPE);
+                }
+            });
         });
         effect(() => {
             const currentDelegator = this.currentDelegator();
@@ -2554,8 +2716,8 @@ class DelegationForm {
         const delegationDaysType = (value?.delegationDaysType ?? 'FullRange');
         const specificDays = delegationDaysType === 'SpecificDays' ? (value?.specificDays ?? []) : [];
         const description = value?.description;
-        const delegateFromDateTime = value?.delegateFromDateTime;
-        const delegateToDateTime = value?.delegateToDateTime;
+        const delegateFromDateTime = toUtcIso(value?.delegateFromDateTime) ?? '';
+        const delegateToDateTime = toUtcIso(value?.delegateToDateTime) ?? '';
         const requiresApproval = !!value?.requiresApproval;
         const delegatedUserId = extractUserId(value?.delegateTo) ?? '';
         const selectedDelegatorId = this.selectedDelegatorId();
@@ -2708,7 +2870,7 @@ class DelegationDetailDrawer {
         return toDelegationUserEntity(party, { label });
     }
     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\">{{ approvalLabel() }}</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 class=\"flex flex-col gap-3\">\r\n            <div class=\"text-sm text-surface-900\">\r\n              {{\r\n                formatScopeSummary(d.row.scopeSummary) ||\r\n                  t(\"delegations.column.scopeSummary\")\r\n              }}\r\n            </div>\r\n            <div class=\"flex flex-col gap-2\">\r\n              @for (grant of d.scope.grants; track $index) {\r\n                <div\r\n                  class=\"border border-surface-200 rounded-md px-3 py-2 flex flex-col gap-1\"\r\n                >\r\n                  <div class=\"flex items-center justify-between gap-2\">\r\n                    <span class=\"text-sm font-medium text-surface-900\">\r\n                      {{ getScopeTargetLabel(grant.target) }}\r\n                    </span>\r\n                    <span class=\"text-xs text-surface-500\">\r\n                      {{ grant.target.targetType }}\r\n                    </span>\r\n                  </div>\r\n                  <span\r\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\r\n                  >\r\n                    {{ getScopeActionLabel(grant.action) }}\r\n                  </span>\r\n                </div>\r\n              }\r\n              @if (d.scope.grants.length === 0) {\r\n                <p class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.scope.noSelection\") }}\r\n                </p>\r\n              }\r\n            </div>\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: i3.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              ></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\">{{ approvalLabel() }}</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 class=\"flex flex-col gap-3\">\r\n            <div class=\"text-sm text-surface-900\">\r\n              {{\r\n                formatScopeSummary(d.row.scopeSummary) ||\r\n                  t(\"delegations.column.scopeSummary\")\r\n              }}\r\n            </div>\r\n            <div class=\"flex flex-col gap-2\">\r\n              @for (grant of d.scope.grants; track $index) {\r\n                <div\r\n                  class=\"border border-surface-200 rounded-md px-3 py-2 flex flex-col gap-1\"\r\n                >\r\n                  <div class=\"flex items-center justify-between gap-2\">\r\n                    <span class=\"text-sm font-medium text-surface-900\">\r\n                      {{ getScopeTargetLabel(grant.target) }}\r\n                    </span>\r\n                    <span class=\"text-xs text-surface-500\">\r\n                      {{ grant.target.targetType }}\r\n                    </span>\r\n                  </div>\r\n                  <span\r\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\r\n                  >\r\n                    {{ getScopeActionLabel(grant.action) }}\r\n                  </span>\r\n                </div>\r\n              }\r\n              @if (d.scope.grants.length === 0) {\r\n                <p class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.scope.noSelection\") }}\r\n                </p>\r\n              }\r\n            </div>\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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, decorators: [{
             type: Component,
@@ -3236,5 +3398,5 @@ const appDelegationInterceptor = (req, next) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ApproveDelegation, CancelDelegation, ClearDelegationDetail, ClearScopePreview, CreateDelegationLegacy, CreateDelegationV2, 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 };
+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 };
 //# sourceMappingURL=masterteam-delegations.mjs.map