@masterteam/delegations 0.0.17 → 0.0.19

package/fesm2022/masterteam-delegations.mjs

@@ -11,10 +11,11 @@ import { Icon } from '@masterteam/icons';
 import { Popover } from 'primeng/popover';
 import { Chip } from '@masterteam/components/chip';
 import { Actions, Store, ofActionSuccessful, ofActionDispatched, Action, Selector, State, select } from '@ngxs/store';
-import { HttpClient, HttpParams, HttpContext } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams, HttpContext } from '@angular/common/http';
 import { handleApiRequest, REQUEST_CONTEXT, UserSearchFieldConfig, TextareaFieldConfig, DateFieldConfig, RadioButtonFieldConfig, MultiSelectFieldConfig, ToggleFieldConfig, ValidatorConfig } from '@masterteam/components';
 import { EMPTY, switchMap, finalize } from 'rxjs';
 import { ModalRef } from '@masterteam/components/dialog';
+import { ToastService } from '@masterteam/components/toast';
 import { Page } from '@masterteam/components/page';
 import { Breadcrumb } from '@masterteam/components/breadcrumb';
 import { Table } from '@masterteam/components/table';
@@ -177,7 +178,9 @@ let DelegationSessionState = class DelegationSessionState {
         });
     }
     start(ctx, { delegation }) {
-        const req$ = this.http.post(`${BASE$1}/delegationToken/${delegation.delegationId}`, {});
+        const req$ = this.http.post(`${BASE$1}/delegationToken/${delegation.delegationId}`, {}, {
+            headers: new HttpHeaders({ noMessage: 'true' }),
+        });
         return handleApiRequest({
             ctx,
             key: DelegationSessionActionKey.StartSession,
@@ -286,6 +289,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+function isRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+function readLocalizedValue(source, preferredLanguage) {
+    const normalizedLanguage = preferredLanguage.toLowerCase();
+    const baseLanguage = normalizedLanguage.split('-')[0];
+    const preferredKeys = normalizedLanguage.startsWith('ar')
+        ? ['defaultAr', 'ar', normalizedLanguage, baseLanguage, 'defaultEn', 'en']
+        : ['defaultEn', 'en', normalizedLanguage, baseLanguage, 'defaultAr', 'ar'];
+    for (const key of preferredKeys) {
+        const value = source[key];
+        if (typeof value === 'string' && value.trim()) {
+            return value.trim();
+        }
+    }
+    for (const key of ['en', 'ar', 'defaultEn', 'defaultAr']) {
+        const value = source[key];
+        if (typeof value === 'string' && value.trim()) {
+            return value.trim();
+        }
+    }
+    return null;
+}
+function parseJsonRecord(value) {
+    const trimmed = value.trim();
+    if (!trimmed.startsWith('{') || !trimmed.endsWith('}')) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(trimmed);
+        return isRecord(parsed) ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+function resolveDisplayValue(value, preferredLanguage) {
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return null;
+        }
+        const parsed = parseJsonRecord(trimmed);
+        if (parsed) {
+            return (readLocalizedValue(parsed, preferredLanguage) ??
+                readDisplayValue(parsed, ['displayName', 'displayLabel', 'label'], preferredLanguage) ??
+                trimmed);
+        }
+        return trimmed;
+    }
+    if (!isRecord(value)) {
+        return null;
+    }
+    return (readLocalizedValue(value, preferredLanguage) ??
+        readDisplayValue(value, [
+            'displayName',
+            'displayLabel',
+            'operationDisplayName',
+            'operationLabel',
+            'label',
+            'name',
+            'value',
+        ], preferredLanguage));
+}
+function readDisplayValue(source, keys, preferredLanguage) {
+    for (const key of keys) {
+        const value = resolveDisplayValue(source[key], preferredLanguage);
+        if (value) {
+            return value;
+        }
+    }
+    return null;
+}
+function resolveDisplayOrHumanizedKey(source, displayKeys, fallbackKey, preferredLanguage = 'en') {
+    const displayValue = readDisplayValue(source, displayKeys, preferredLanguage);
+    if (displayValue) {
+        return displayValue;
+    }
+    return humanizeDelegationKey(fallbackKey);
+}
+function humanizeDelegationKey(value) {
+    if (!value) {
+        return '';
+    }
+    const normalized = value
+        .replace(/([a-z\d])([A-Z])/g, '$1 $2')
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
+        .replace(/[._-]+/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim();
+    if (!normalized) {
+        return '';
+    }
+    return normalized.replace(/\b\w/g, (char) => char.toUpperCase());
+}
+function formatDelegationTargetLabel(target, preferredLanguage = 'en') {
+    return resolveDisplayOrHumanizedKey(target, ['displayName', 'displayLabel', 'label'], target.targetKey, preferredLanguage);
+}
+function formatDelegationActionLabel(action, preferredLanguage = 'en') {
+    return resolveDisplayOrHumanizedKey(action, [
+        'displayName',
+        'displayLabel',
+        'operationDisplayName',
+        'operationLabel',
+        'label',
+    ], action.operationKey, preferredLanguage);
+}
+function formatDelegationScopeSummary(value, preferredLanguage = 'en') {
+    return resolveDisplayValue(value, preferredLanguage) ?? '';
+}
+
 /**
  * Confirmation dialog before starting (or switching to) a delegated session.
  * Calls the facade, which POSTs to `delegationToken/{id}` and stores the raw
@@ -296,17 +410,25 @@ class StartSessionDialog {
     intent = input('start', ...(ngDevMode ? [{ debugName: "intent" }] : /* istanbul ignore next */ []));
     ref = inject(ModalRef);
     facade = inject(DelegationSessionFacade);
+    toast = inject(ToastService);
+    transloco = inject(TranslocoService);
     isBusy = this.facade.isStarting;
     bodyKey = computed(() => this.intent() === 'switch'
         ? 'delegations.session.switchConfirmBody'
         : 'delegations.session.startConfirmBody', ...(ngDevMode ? [{ debugName: "bodyKey" }] : /* istanbul ignore next */ []));
+    formatScopeSummary(summary) {
+        return formatDelegationScopeSummary(summary, this.transloco.getActiveLang());
+    }
     confirm() {
         const row = this.delegation();
         const op$ = this.intent() === 'switch'
             ? this.facade.switchSession(row)
             : this.facade.startSession(row);
         op$.subscribe({
-            next: () => this.ref.close(true),
+            next: () => {
+                this.toast.success(this.transloco.translate('delegations.session.started'));
+                this.ref.close(true);
+            },
             error: () => {
                 /* error surfaced via shared toast pipeline; keep dialog open */
             },
@@ -316,11 +438,11 @@ class StartSessionDialog {
         this.ref.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StartSessionDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: StartSessionDialog, isStandalone: true, selector: "mt-start-session-dialog", inputs: { delegation: { classPropertyName: "delegation", publicName: "delegation", isSignal: true, isRequired: true, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex items-start gap-3\">\n      <mt-avatar\n        icon=\"user.user-01\"\n        styleClass=\"w-12! h-12! text-lg! bg-surface-200!\"\n      ></mt-avatar>\n      <div class=\"flex flex-col min-w-0\">\n        <div class=\"text-base font-medium text-gray-900 truncate\">\n          {{ delegation().delegator.displayName }}\n        </div>\n        @if (delegation().delegator.email) {\n          <div class=\"text-xs text-gray-500 truncate\">\n            {{ delegation().delegator.email }}\n          </div>\n        }\n        @if (delegation().scopeSummary) {\n          <div class=\"text-xs text-gray-500 mt-1\">\n            {{ t(\"delegations.column.scopeSummary\") }}:\n            {{ delegation().scopeSummary }}\n          </div>\n        }\n      </div>\n    </div>\n\n    <p class=\"text-sm text-gray-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-gray-200\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.cancel')\"\n        [disabled]=\"isBusy()\"\n        (click)=\"cancel()\"\n      ></mt-button>\n      <mt-button\n        color=\"primary\"\n        icon=\"user.users-check\"\n        [label]=\"t('delegations.action.startSession')\"\n        [loading]=\"isBusy()\"\n        (click)=\"confirm()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: StartSessionDialog, isStandalone: true, selector: "mt-start-session-dialog", inputs: { delegation: { classPropertyName: "delegation", publicName: "delegation", isSignal: true, isRequired: true, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex items-start gap-3\">\n      <mt-avatar\n        icon=\"user.user-01\"\n        styleClass=\"w-12! h-12! text-lg! bg-surface-200!\"\n      ></mt-avatar>\n      <div class=\"flex flex-col min-w-0\">\n        <div class=\"text-base font-medium text-gray-900 truncate\">\n          {{ delegation().delegator.displayName }}\n        </div>\n        @if (delegation().delegator.email) {\n          <div class=\"text-xs text-gray-500 truncate\">\n            {{ delegation().delegator.email }}\n          </div>\n        }\n        @if (delegation().scopeSummary) {\n          <div class=\"text-xs text-gray-500 mt-1\">\n            {{ t(\"delegations.column.scopeSummary\") }}:\n            {{ formatScopeSummary(delegation().scopeSummary) }}\n          </div>\n        }\n      </div>\n    </div>\n\n    <p class=\"text-sm text-gray-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-gray-200\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.cancel')\"\n        [disabled]=\"isBusy()\"\n        (click)=\"cancel()\"\n      ></mt-button>\n      <mt-button\n        color=\"primary\"\n        icon=\"user.users-check\"\n        [label]=\"t('delegations.action.startSession')\"\n        [loading]=\"isBusy()\"\n        (click)=\"confirm()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StartSessionDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-start-session-dialog', standalone: true, imports: [CommonModule, Avatar, Button, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex items-start gap-3\">\n      <mt-avatar\n        icon=\"user.user-01\"\n        styleClass=\"w-12! h-12! text-lg! bg-surface-200!\"\n      ></mt-avatar>\n      <div class=\"flex flex-col min-w-0\">\n        <div class=\"text-base font-medium text-gray-900 truncate\">\n          {{ delegation().delegator.displayName }}\n        </div>\n        @if (delegation().delegator.email) {\n          <div class=\"text-xs text-gray-500 truncate\">\n            {{ delegation().delegator.email }}\n          </div>\n        }\n        @if (delegation().scopeSummary) {\n          <div class=\"text-xs text-gray-500 mt-1\">\n            {{ t(\"delegations.column.scopeSummary\") }}:\n            {{ delegation().scopeSummary }}\n          </div>\n        }\n      </div>\n    </div>\n\n    <p class=\"text-sm text-gray-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-gray-200\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.cancel')\"\n        [disabled]=\"isBusy()\"\n        (click)=\"cancel()\"\n      ></mt-button>\n      <mt-button\n        color=\"primary\"\n        icon=\"user.users-check\"\n        [label]=\"t('delegations.action.startSession')\"\n        [loading]=\"isBusy()\"\n        (click)=\"confirm()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n" }]
+            args: [{ selector: 'mt-start-session-dialog', standalone: true, imports: [CommonModule, Avatar, Button, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex items-start gap-3\">\n      <mt-avatar\n        icon=\"user.user-01\"\n        styleClass=\"w-12! h-12! text-lg! bg-surface-200!\"\n      ></mt-avatar>\n      <div class=\"flex flex-col min-w-0\">\n        <div class=\"text-base font-medium text-gray-900 truncate\">\n          {{ delegation().delegator.displayName }}\n        </div>\n        @if (delegation().delegator.email) {\n          <div class=\"text-xs text-gray-500 truncate\">\n            {{ delegation().delegator.email }}\n          </div>\n        }\n        @if (delegation().scopeSummary) {\n          <div class=\"text-xs text-gray-500 mt-1\">\n            {{ t(\"delegations.column.scopeSummary\") }}:\n            {{ formatScopeSummary(delegation().scopeSummary) }}\n          </div>\n        }\n      </div>\n    </div>\n\n    <p class=\"text-sm text-gray-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-gray-200\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.cancel')\"\n        [disabled]=\"isBusy()\"\n        (click)=\"cancel()\"\n      ></mt-button>\n      <mt-button\n        color=\"primary\"\n        icon=\"user.users-check\"\n        [label]=\"t('delegations.action.startSession')\"\n        [loading]=\"isBusy()\"\n        (click)=\"confirm()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], propDecorators: { delegation: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegation", required: true }] }], intent: [{ type: i0.Input, args: [{ isSignal: true, alias: "intent", required: false }] }] } });
 
 /**
@@ -351,6 +473,9 @@ class TopbarDelegationMenu {
             return 'candidates';
         return 'hidden';
     }, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    formatScopeSummary(summary) {
+        return formatDelegationScopeSummary(summary, this.transloco.getActiveLang());
+    }
     togglePopover(event) {
         this.popover().toggle(event);
     }
@@ -379,7 +504,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 } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"mt-delegation-trigger__button flex items-center gap-2 px-2 py-1 rounded-full cursor-pointer hover:bg-surface-100\"\n        [attr.aria-label]=\"t('delegations.title')\"\n        (click)=\"togglePopover($event)\"\n      >\n        @if (mode() === \"active\") {\n          <mt-icon\n            icon=\"user.users-check\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{\n                t(\"delegations.session.banner\", {\n                  delegatorName: onBehalfOf()?.displayName,\n                })\n              }}\n            </span>\n          }\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        } @else {\n          <mt-icon\n            icon=\"user.users-plus\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{ t(\"delegations.session.availableTitle\") }}\n            </span>\n          }\n        }\n      </button>\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\n        @if (mode() === \"active\" && active(); as session) {\n          <!-- STATE C \u2014 active session -->\n          <div\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\n          >\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\n            ></mt-avatar>\n            <div class=\"flex flex-col min-w-0 flex-1\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\n                {{ onBehalfOf()?.displayName }}\n              </div>\n              <div class=\"text-xs text-gray-500 mt-1\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </div>\n              @if (session.delegation.scopeSummary) {\n                <div\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\n                  [title]=\"session.delegation.scopeSummary\"\n                >\n                  {{ t(\"delegations.column.scopeSummary\") }}:\n                  {{ session.delegation.scopeSummary }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\n            <mt-button\n              variant=\"text\"\n              icon=\"arrow.arrow-left\"\n              [label]=\"t('delegations.action.endSession')\"\n              styleClass=\"w-full justify-start\"\n              (click)=\"endSession($event)\"\n            ></mt-button>\n          </div>\n\n          @if (candidates().length > 1) {\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\n                {{ t(\"delegations.session.switchToAnother\") }}\n              </div>\n              @for (cand of candidates(); track cand.delegationId) {\n                @if (cand.delegationId !== session.delegation.delegationId) {\n                  <button\n                    type=\"button\"\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\n                    (click)=\"switchTo(cand, $event)\"\n                  >\n                    <div class=\"flex items-center gap-2 min-w-0\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\n                      ></mt-avatar>\n                      <span class=\"text-sm text-gray-900 truncate\">\n                        {{ cand.delegator.displayName }}\n                      </span>\n                    </div>\n                    <mt-icon\n                      icon=\"arrow.switch-horizontal-01\"\n                      styleClass=\"text-base text-gray-400\"\n                    ></mt-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        } @else if (mode() === \"candidates\") {\n          <!-- STATE B \u2014 candidates available -->\n          <div class=\"border-b border-gray-200 px-4 py-3\">\n            <div class=\"text-sm font-medium text-gray-900\">\n              {{ t(\"delegations.session.youCanActAs\") }}\n            </div>\n            <div class=\"text-xs text-gray-500 mt-1\">\n              {{ t(\"delegations.session.chooseDelegatorHint\") }}\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\n            @for (cand of candidates(); track cand.delegationId) {\n              <button\n                type=\"button\"\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\n                (click)=\"start(cand, $event)\"\n              >\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n                  <mt-avatar\n                    icon=\"user.user-01\"\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\n                  ></mt-avatar>\n                  <div class=\"flex flex-col min-w-0\">\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\n                      {{ cand.delegator.displayName }}\n                    </span>\n                    @if (cand.scopeSummary) {\n                      <span\n                        class=\"text-xs text-gray-500 truncate\"\n                        [title]=\"cand.scopeSummary\"\n                      >\n                        {{ cand.scopeSummary }}\n                      </span>\n                    }\n                  </div>\n                </div>\n                <mt-icon\n                  icon=\"arrow.arrow-right\"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Footer -->\n        <div class=\"border-t border-gray-200 px-2 py-2\">\n          <a\n            [routerLink]=\"managePath()\"\n            (click)=\"popover().hide()\"\n            class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\n          >\n            <mt-icon\n              icon=\"general.settings-02\"\n              styleClass=\"text-base\"\n            ></mt-icon>\n            <span>{{ t(\"delegations.session.manage\") }}</span>\n          </a>\n        </div>\n      </div>\n    </p-popover>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center}.mt-delegation-trigger__button{transition:background-color .2s ease-out}.mt-delegation-trigger__label{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TopbarDelegationMenu, isStandalone: true, selector: "mt-topbar-delegation-menu", inputs: { managePath: { classPropertyName: "managePath", publicName: "managePath", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"mt-delegation-trigger__button flex min-w-0 max-w-full items-center gap-2 rounded-full px-2 py-1 hover:bg-surface-100 cursor-pointer\"\n        [attr.aria-label]=\"t('delegations.title')\"\n        [attr.title]=\"\n          mode() === 'active'\n            ? t('delegations.session.banner', {\n                delegatorName: onBehalfOf()?.displayName,\n              })\n            : null\n        \"\n        (click)=\"togglePopover($event)\"\n      >\n        @if (mode() === \"active\") {\n          <mt-icon\n            icon=\"user.users-check\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{\n                t(\"delegations.session.banner\", {\n                  delegatorName: onBehalfOf()?.displayName,\n                })\n              }}\n            </span>\n          }\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        } @else {\n          <mt-icon\n            icon=\"user.users-plus\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{ t(\"delegations.session.availableTitle\") }}\n            </span>\n          }\n        }\n      </button>\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\n        @if (mode() === \"active\" && active(); as session) {\n          <!-- STATE C \u2014 active session -->\n          <div\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\n          >\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\n            ></mt-avatar>\n            <div class=\"flex flex-col min-w-0 flex-1\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\n                {{ onBehalfOf()?.displayName }}\n              </div>\n              <div class=\"text-xs text-gray-500 mt-1\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </div>\n              @if (session.delegation.scopeSummary) {\n                @let summary =\n                  formatScopeSummary(session.delegation.scopeSummary);\n                <div\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\n                  [title]=\"summary\"\n                >\n                  {{ t(\"delegations.column.scopeSummary\") }}:\n                  {{ summary }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\n            <mt-button\n              variant=\"text\"\n              icon=\"arrow.arrow-left\"\n              [label]=\"t('delegations.action.endSession')\"\n              styleClass=\"w-full justify-start\"\n              (click)=\"endSession($event)\"\n            ></mt-button>\n          </div>\n\n          @if (candidates().length > 1) {\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\n                {{ t(\"delegations.session.switchToAnother\") }}\n              </div>\n              @for (cand of candidates(); track cand.delegationId) {\n                @if (cand.delegationId !== session.delegation.delegationId) {\n                  <button\n                    type=\"button\"\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\n                    (click)=\"switchTo(cand, $event)\"\n                  >\n                    <div class=\"flex items-center gap-2 min-w-0\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\n                      ></mt-avatar>\n                      <span class=\"text-sm text-gray-900 truncate\">\n                        {{ cand.delegator.displayName }}\n                      </span>\n                    </div>\n                    <mt-icon\n                      icon=\"arrow.switch-horizontal-01\"\n                      styleClass=\"text-base text-gray-400\"\n                    ></mt-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        } @else if (mode() === \"candidates\") {\n          <!-- STATE B \u2014 candidates available -->\n          <div class=\"border-b border-gray-200 px-4 py-3\">\n            <div class=\"text-sm font-medium text-gray-900\">\n              {{ t(\"delegations.session.youCanActAs\") }}\n            </div>\n            <div class=\"text-xs text-gray-500 mt-1\">\n              {{ t(\"delegations.session.chooseDelegatorHint\") }}\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\n            @for (cand of candidates(); track cand.delegationId) {\n              <button\n                type=\"button\"\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\n                (click)=\"start(cand, $event)\"\n              >\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n                  <mt-avatar\n                    icon=\"user.user-01\"\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\n                  ></mt-avatar>\n                  <div class=\"flex flex-col min-w-0\">\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\n                      {{ cand.delegator.displayName }}\n                    </span>\n                    @if (cand.scopeSummary) {\n                      @let summary = formatScopeSummary(cand.scopeSummary);\n                      <span\n                        class=\"text-xs text-gray-500 truncate\"\n                        [title]=\"summary\"\n                      >\n                        {{ summary }}\n                      </span>\n                    }\n                  </div>\n                </div>\n                <mt-icon\n                  icon=\"arrow.arrow-right\"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Footer -->\n        <div class=\"border-t border-gray-200 px-2 py-2\">\n          <a\n            [routerLink]=\"managePath()\"\n            (click)=\"popover().hide()\"\n            class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\n          >\n            <mt-icon\n              icon=\"general.settings-02\"\n              styleClass=\"text-base\"\n            ></mt-icon>\n            <span>{{ t(\"delegations.session.manage\") }}</span>\n          </a>\n        </div>\n      </div>\n    </p-popover>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.mt-delegation-trigger{min-width:0;max-width:100%}.mt-delegation-trigger__button{transition:background-color .2s ease-out;min-width:0;max-width:100%}.mt-delegation-trigger__label{max-width:min(16rem,28vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1200px){.mt-delegation-trigger__label{max-width:10rem}}@media(max-width:1024px){.mt-delegation-trigger__button{gap:.375rem;padding-inline:.375rem}.mt-delegation-trigger__label{display:none}}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TopbarDelegationMenu, decorators: [{
             type: Component,
@@ -392,7 +517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         RouterLink,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"mt-delegation-trigger__button flex items-center gap-2 px-2 py-1 rounded-full cursor-pointer hover:bg-surface-100\"\n        [attr.aria-label]=\"t('delegations.title')\"\n        (click)=\"togglePopover($event)\"\n      >\n        @if (mode() === \"active\") {\n          <mt-icon\n            icon=\"user.users-check\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{\n                t(\"delegations.session.banner\", {\n                  delegatorName: onBehalfOf()?.displayName,\n                })\n              }}\n            </span>\n          }\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        } @else {\n          <mt-icon\n            icon=\"user.users-plus\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{ t(\"delegations.session.availableTitle\") }}\n            </span>\n          }\n        }\n      </button>\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\n        @if (mode() === \"active\" && active(); as session) {\n          <!-- STATE C \u2014 active session -->\n          <div\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\n          >\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\n            ></mt-avatar>\n            <div class=\"flex flex-col min-w-0 flex-1\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\n                {{ onBehalfOf()?.displayName }}\n              </div>\n              <div class=\"text-xs text-gray-500 mt-1\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </div>\n              @if (session.delegation.scopeSummary) {\n                <div\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\n                  [title]=\"session.delegation.scopeSummary\"\n                >\n                  {{ t(\"delegations.column.scopeSummary\") }}:\n                  {{ session.delegation.scopeSummary }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\n            <mt-button\n              variant=\"text\"\n              icon=\"arrow.arrow-left\"\n              [label]=\"t('delegations.action.endSession')\"\n              styleClass=\"w-full justify-start\"\n              (click)=\"endSession($event)\"\n            ></mt-button>\n          </div>\n\n          @if (candidates().length > 1) {\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\n                {{ t(\"delegations.session.switchToAnother\") }}\n              </div>\n              @for (cand of candidates(); track cand.delegationId) {\n                @if (cand.delegationId !== session.delegation.delegationId) {\n                  <button\n                    type=\"button\"\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\n                    (click)=\"switchTo(cand, $event)\"\n                  >\n                    <div class=\"flex items-center gap-2 min-w-0\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\n                      ></mt-avatar>\n                      <span class=\"text-sm text-gray-900 truncate\">\n                        {{ cand.delegator.displayName }}\n                      </span>\n                    </div>\n                    <mt-icon\n                      icon=\"arrow.switch-horizontal-01\"\n                      styleClass=\"text-base text-gray-400\"\n                    ></mt-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        } @else if (mode() === \"candidates\") {\n          <!-- STATE B \u2014 candidates available -->\n          <div class=\"border-b border-gray-200 px-4 py-3\">\n            <div class=\"text-sm font-medium text-gray-900\">\n              {{ t(\"delegations.session.youCanActAs\") }}\n            </div>\n            <div class=\"text-xs text-gray-500 mt-1\">\n              {{ t(\"delegations.session.chooseDelegatorHint\") }}\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\n            @for (cand of candidates(); track cand.delegationId) {\n              <button\n                type=\"button\"\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\n                (click)=\"start(cand, $event)\"\n              >\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n                  <mt-avatar\n                    icon=\"user.user-01\"\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\n                  ></mt-avatar>\n                  <div class=\"flex flex-col min-w-0\">\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\n                      {{ cand.delegator.displayName }}\n                    </span>\n                    @if (cand.scopeSummary) {\n                      <span\n                        class=\"text-xs text-gray-500 truncate\"\n                        [title]=\"cand.scopeSummary\"\n                      >\n                        {{ cand.scopeSummary }}\n                      </span>\n                    }\n                  </div>\n                </div>\n                <mt-icon\n                  icon=\"arrow.arrow-right\"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Footer -->\n        <div class=\"border-t border-gray-200 px-2 py-2\">\n          <a\n            [routerLink]=\"managePath()\"\n            (click)=\"popover().hide()\"\n            class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\n          >\n            <mt-icon\n              icon=\"general.settings-02\"\n              styleClass=\"text-base\"\n            ></mt-icon>\n            <span>{{ t(\"delegations.session.manage\") }}</span>\n          </a>\n        </div>\n      </div>\n    </p-popover>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center}.mt-delegation-trigger__button{transition:background-color .2s ease-out}.mt-delegation-trigger__label{max-width:16rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"mt-delegation-trigger__button flex min-w-0 max-w-full items-center gap-2 rounded-full px-2 py-1 hover:bg-surface-100 cursor-pointer\"\n        [attr.aria-label]=\"t('delegations.title')\"\n        [attr.title]=\"\n          mode() === 'active'\n            ? t('delegations.session.banner', {\n                delegatorName: onBehalfOf()?.displayName,\n              })\n            : null\n        \"\n        (click)=\"togglePopover($event)\"\n      >\n        @if (mode() === \"active\") {\n          <mt-icon\n            icon=\"user.users-check\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{\n                t(\"delegations.session.banner\", {\n                  delegatorName: onBehalfOf()?.displayName,\n                })\n              }}\n            </span>\n          }\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        } @else {\n          <mt-icon\n            icon=\"user.users-plus\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{ t(\"delegations.session.availableTitle\") }}\n            </span>\n          }\n        }\n      </button>\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\n        @if (mode() === \"active\" && active(); as session) {\n          <!-- STATE C \u2014 active session -->\n          <div\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\n          >\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\n            ></mt-avatar>\n            <div class=\"flex flex-col min-w-0 flex-1\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\n                {{ onBehalfOf()?.displayName }}\n              </div>\n              <div class=\"text-xs text-gray-500 mt-1\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </div>\n              @if (session.delegation.scopeSummary) {\n                @let summary =\n                  formatScopeSummary(session.delegation.scopeSummary);\n                <div\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\n                  [title]=\"summary\"\n                >\n                  {{ t(\"delegations.column.scopeSummary\") }}:\n                  {{ summary }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\n            <mt-button\n              variant=\"text\"\n              icon=\"arrow.arrow-left\"\n              [label]=\"t('delegations.action.endSession')\"\n              styleClass=\"w-full justify-start\"\n              (click)=\"endSession($event)\"\n            ></mt-button>\n          </div>\n\n          @if (candidates().length > 1) {\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\n                {{ t(\"delegations.session.switchToAnother\") }}\n              </div>\n              @for (cand of candidates(); track cand.delegationId) {\n                @if (cand.delegationId !== session.delegation.delegationId) {\n                  <button\n                    type=\"button\"\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\n                    (click)=\"switchTo(cand, $event)\"\n                  >\n                    <div class=\"flex items-center gap-2 min-w-0\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\n                      ></mt-avatar>\n                      <span class=\"text-sm text-gray-900 truncate\">\n                        {{ cand.delegator.displayName }}\n                      </span>\n                    </div>\n                    <mt-icon\n                      icon=\"arrow.switch-horizontal-01\"\n                      styleClass=\"text-base text-gray-400\"\n                    ></mt-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        } @else if (mode() === \"candidates\") {\n          <!-- STATE B \u2014 candidates available -->\n          <div class=\"border-b border-gray-200 px-4 py-3\">\n            <div class=\"text-sm font-medium text-gray-900\">\n              {{ t(\"delegations.session.youCanActAs\") }}\n            </div>\n            <div class=\"text-xs text-gray-500 mt-1\">\n              {{ t(\"delegations.session.chooseDelegatorHint\") }}\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\n            @for (cand of candidates(); track cand.delegationId) {\n              <button\n                type=\"button\"\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\n                (click)=\"start(cand, $event)\"\n              >\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n                  <mt-avatar\n                    icon=\"user.user-01\"\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\n                  ></mt-avatar>\n                  <div class=\"flex flex-col min-w-0\">\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\n                      {{ cand.delegator.displayName }}\n                    </span>\n                    @if (cand.scopeSummary) {\n                      @let summary = formatScopeSummary(cand.scopeSummary);\n                      <span\n                        class=\"text-xs text-gray-500 truncate\"\n                        [title]=\"summary\"\n                      >\n                        {{ summary }}\n                      </span>\n                    }\n                  </div>\n                </div>\n                <mt-icon\n                  icon=\"arrow.arrow-right\"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Footer -->\n        <div class=\"border-t border-gray-200 px-2 py-2\">\n          <a\n            [routerLink]=\"managePath()\"\n            (click)=\"popover().hide()\"\n            class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\n          >\n            <mt-icon\n              icon=\"general.settings-02\"\n              styleClass=\"text-base\"\n            ></mt-icon>\n            <span>{{ t(\"delegations.session.manage\") }}</span>\n          </a>\n        </div>\n      </div>\n    </p-popover>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.mt-delegation-trigger{min-width:0;max-width:100%}.mt-delegation-trigger__button{transition:background-color .2s ease-out;min-width:0;max-width:100%}.mt-delegation-trigger__label{max-width:min(16rem,28vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1200px){.mt-delegation-trigger__label{max-width:10rem}}@media(max-width:1024px){.mt-delegation-trigger__button{gap:.375rem;padding-inline:.375rem}.mt-delegation-trigger__label{display:none}}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"] }]
         }], propDecorators: { managePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "managePath", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
 
 // ---------------------------------------------------------------------------
@@ -643,6 +768,7 @@ let DelegationsState = class DelegationsState {
     // Scope
     // ============================================================================
     getScopeOptions(ctx, { delegatorUserId }) {
+        ctx.patchState({ scopeOptions: null, scopePreview: null });
         let params = new HttpParams();
         if (delegatorUserId)
             params = params.set('delegatorUserId', delegatorUserId);
@@ -868,6 +994,7 @@ class DelegationsFacade {
     errorMy = computed(() => this.errors()[DelegationsActionKey.GetMy] ?? null, ...(ngDevMode ? [{ debugName: "errorMy" }] : /* istanbul ignore next */ []));
     errorAssigned = computed(() => this.errors()[DelegationsActionKey.GetAssigned] ?? null, ...(ngDevMode ? [{ debugName: "errorAssigned" }] : /* istanbul ignore next */ []));
     errorDetail = computed(() => this.errors()[DelegationsActionKey.GetDetail] ?? null, ...(ngDevMode ? [{ debugName: "errorDetail" }] : /* istanbul ignore next */ []));
+    errorScopeOptions = computed(() => this.errors()[DelegationsActionKey.GetScopeOptions] ?? null, ...(ngDevMode ? [{ debugName: "errorScopeOptions" }] : /* istanbul ignore next */ []));
     errorSave = computed(() => this.errors()[DelegationsActionKey.Create] ??
         this.errors()[DelegationsActionKey.Update] ??
         null, ...(ngDevMode ? [{ debugName: "errorSave" }] : /* istanbul ignore next */ []));
@@ -985,6 +1112,179 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{ selector: 'mt-delegations', imports: [Page, RouterOutlet, TranslocoDirective], template: "<ng-container *transloco=\"let t\">\n  <mt-page\n    [title]=\"t('delegations.title')\"\n    [avatarIcon]=\"'custom.hierarchy-structure'\"\n    [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-indigo-50)',\n      '--p-avatar-color': 'var(--p-indigo-700)',\n    }\"\n    (backButtonClick)=\"goBack()\"\n    backButton\n  >\n    <router-outlet />\n  </mt-page>\n</ng-container>\n" }]
         }] });
 
+function toArray(value) {
+    return Array.isArray(value) ? value : [];
+}
+function normalizeGrant$1(grant) {
+    return {
+        ...grant,
+        accessibilities: toArray(grant.accessibilities),
+        dataFilters: toArray(grant.dataFilters),
+        constraints: toArray(grant.constraints),
+    };
+}
+function normalizeKey(value) {
+    if (typeof value === 'string') {
+        const trimmed = value.trim();
+        return trimmed || null;
+    }
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return String(value);
+    }
+    return null;
+}
+function matchesTarget(target, rule) {
+    return (target.targetType === rule.targetType &&
+        target.targetKey === rule.targetKey &&
+        (!rule.applicationKey ||
+            !target.applicationKey ||
+            target.applicationKey === rule.applicationKey));
+}
+function matchesAction(action, rule, applicationKey) {
+    return (action.operationKey === rule.operationKey &&
+        (!rule.applicationKey ||
+            !action.applicationKey ||
+            action.applicationKey === rule.applicationKey) &&
+        (!applicationKey ||
+            !action.applicationKey ||
+            action.applicationKey === applicationKey));
+}
+function factLookupKeys(fact) {
+    const candidates = [
+        fact.key,
+        fact.code,
+        fact.id,
+        fact['accessibilityKey'],
+        fact['dataFilterKey'],
+        fact['constraintKey'],
+        fact['permissionKey'],
+        fact['pageKey'],
+        fact['value'],
+    ];
+    return candidates
+        .map(normalizeKey)
+        .filter((value) => !!value);
+}
+function buildFactIndex(facts) {
+    const index = new Map();
+    for (const fact of facts) {
+        for (const key of factLookupKeys(fact)) {
+            if (!index.has(key)) {
+                index.set(key, fact);
+            }
+        }
+    }
+    return index;
+}
+function lookupFacts(keys, index) {
+    if (!Array.isArray(keys) || keys.length === 0) {
+        return [];
+    }
+    const resolved = [];
+    const seen = new Set();
+    for (const rawKey of keys) {
+        const key = normalizeKey(rawKey);
+        if (!key || seen.has(key)) {
+            continue;
+        }
+        const match = index.get(key);
+        if (!match) {
+            continue;
+        }
+        seen.add(key);
+        resolved.push(match);
+    }
+    return resolved;
+}
+function ruleKeys(rule, preferredKeys) {
+    for (const preferredKey of preferredKeys) {
+        const value = rule[preferredKey];
+        if (Array.isArray(value)) {
+            return value.map((item) => String(item));
+        }
+    }
+    return null;
+}
+function grantIdentity(grant) {
+    return JSON.stringify({
+        app: grant.applicationKey,
+        target: [
+            grant.target.applicationKey,
+            grant.target.targetType,
+            grant.target.targetKey,
+            grant.target.moduleKey ?? null,
+            grant.target.permissionModuleType ?? null,
+            grant.target.permissionTargetId ?? null,
+        ],
+        action: [
+            grant.action.applicationKey,
+            grant.action.operationKey,
+            grant.action.operationKind,
+            grant.action.permissionCommand ?? null,
+            grant.action.businessActionCode ?? null,
+        ],
+        accessibilities: grant.accessibilities.map(factLookupKeys),
+        dataFilters: grant.dataFilters.map(factLookupKeys),
+        constraints: grant.constraints.map(factLookupKeys),
+    });
+}
+function getDelegationGrantableGrants(options) {
+    if (!options) {
+        return [];
+    }
+    const legacyGrants = toArray(options.grants).map(normalizeGrant$1);
+    if (legacyGrants.length > 0) {
+        return legacyGrants;
+    }
+    const targets = toArray(options.targets);
+    const operations = toArray(options.operations);
+    const combinationRules = toArray(options.combinationRules);
+    if (targets.length === 0 ||
+        operations.length === 0 ||
+        combinationRules.length === 0) {
+        return [];
+    }
+    const accessibilityIndex = buildFactIndex(toArray(options.accessibilities));
+    const dataFilterIndex = buildFactIndex(toArray(options.dataFilters));
+    const constraintIndex = buildFactIndex(toArray(options.constraints));
+    const grants = [];
+    const seen = new Set();
+    for (const rule of combinationRules) {
+        const target = targets.find((item) => matchesTarget(item, rule));
+        if (!target) {
+            continue;
+        }
+        const applicationKey = normalizeKey(rule.applicationKey) ??
+            normalizeKey(target.applicationKey) ??
+            null;
+        const action = operations.find((item) => matchesAction(item, rule, applicationKey ?? undefined));
+        if (!action) {
+            continue;
+        }
+        const grant = normalizeGrant$1({
+            applicationKey: applicationKey ??
+                normalizeKey(action.applicationKey) ??
+                normalizeKey(target.applicationKey) ??
+                '',
+            target,
+            action,
+            accessibilities: lookupFacts(ruleKeys(rule, ['accessibilityKeys', 'accessibilities']), accessibilityIndex),
+            dataFilters: lookupFacts(ruleKeys(rule, ['dataFilterKeys', 'dataFilters', 'filterKeys']), dataFilterIndex),
+            constraints: lookupFacts(ruleKeys(rule, ['constraintKeys', 'constraints']), constraintIndex),
+        });
+        const identity = grantIdentity(grant);
+        if (seen.has(identity)) {
+            continue;
+        }
+        seen.add(identity);
+        grants.push(grant);
+    }
+    return grants;
+}
+function hasDelegationGrantableScope(options) {
+    return getDelegationGrantableGrants(options).length > 0;
+}
+
 const EMPTY_SCOPE$1 = { grants: [], metadata: {} };
 function targetKey(t) {
     return `${t.applicationKey}::${t.targetType}::${t.targetKey}`;
@@ -1051,13 +1351,15 @@ class ScopePicker {
      */
     delegatorUserId = input(undefined, ...(ngDevMode ? [{ debugName: "delegatorUserId" }] : /* istanbul ignore next */ []));
     facade = inject(DelegationsFacade);
+    transloco = inject(TranslocoService);
     options = this.facade.scopeOptions;
     preview = this.facade.scopePreview;
     isLoadingOptions = this.facade.isLoadingScopeOptions;
     isPreviewing = this.facade.isPreviewingScope;
+    errorOptions = this.facade.errorScopeOptions;
     /** Grantable options grouped by target. */
     groups = computed(() => {
-        const grants = this.options()?.grants ?? [];
+        const grants = getDelegationGrantableGrants(this.options());
         const map = new Map();
         for (const g of grants) {
             const key = targetKey(g.target);
@@ -1076,9 +1378,22 @@ class ScopePicker {
     expanded = signal(new Set(), ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
     constructor() {
         // Load (and reload) grantable options whenever the delegator changes.
+        let initialized = false;
+        let lastDelegatorUserId;
         effect(() => {
             const delegator = this.delegatorUserId();
             untracked(() => this.facade.loadScopeOptions(delegator));
+            if (!initialized) {
+                initialized = true;
+                lastDelegatorUserId = delegator;
+                return;
+            }
+            if (lastDelegatorUserId !== delegator) {
+                lastDelegatorUserId = delegator;
+                this.scope.set(EMPTY_SCOPE$1);
+                this.expanded.set(new Set());
+                this.facade.clearScopePreview();
+            }
         });
         let timer = null;
         effect(() => {
@@ -1108,6 +1423,21 @@ class ScopePicker {
     isSelected(grant) {
         return this.selectedKeys().has(grantKey(grant));
     }
+    getTargetLabel(target) {
+        return formatDelegationTargetLabel(target, this.currentLanguage());
+    }
+    getActionLabel(grant) {
+        return formatDelegationActionLabel(grant.action, this.currentLanguage());
+    }
+    getPreviewSummary(summary) {
+        return formatDelegationScopeSummary(summary, this.currentLanguage());
+    }
+    formatDeniedOperation(value) {
+        return humanizeDelegationKey(value);
+    }
+    formatDeniedTarget(value) {
+        return humanizeDelegationKey(value);
+    }
     toggleGrant(grant) {
         if (this.readonly())
             return;
@@ -1124,8 +1454,11 @@ class ScopePicker {
         const keys = this.selectedKeys();
         return group.grants.filter((g) => keys.has(grantKey(g))).length;
     }
+    currentLanguage() {
+        return 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 }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"mt-scope-picker flex flex-col gap-4\">\n    @if (isLoadingOptions() && !options()) {\n      <p-skeleton height=\"2rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n    } @else if (options()) {\n      <!-- Targets + actions -->\n      <section class=\"flex flex-col gap-2\">\n        <h4 class=\"text-sm font-medium text-gray-800\">\n          {{ t(\"delegations.scope.permissionsTitle\") }}\n        </h4>\n\n        @if (groups().length === 0) {\n          <p class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noGrantableOptions\") }}\n          </p>\n        }\n\n        @for (group of groups(); track group.key) {\n          <div class=\"border border-gray-200 rounded-md overflow-hidden\">\n            <button\n              type=\"button\"\n              class=\"flex items-center justify-between w-full px-3 py-2 hover:bg-surface-50 cursor-pointer\"\n              (click)=\"toggleAccordion(group)\"\n            >\n              <div class=\"flex items-center gap-2 min-w-0\">\n                <mt-icon\n                  [icon]=\"\n                    isExpanded(group)\n                      ? 'arrow.chevron-down'\n                      : 'arrow.chevron-right'\n                  \"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n                <span class=\"text-sm text-gray-900 truncate\">\n                  {{ group.target.displayName || group.target.targetKey }}\n                </span>\n                <span class=\"text-xs text-gray-400\">\n                  {{ group.target.targetType }}\n                </span>\n              </div>\n              @if (selectedCount(group); as count) {\n                @if (count > 0) {\n                  <span\n                    class=\"text-xs text-primary font-medium px-2 py-0.5 rounded-full bg-primary-50\"\n                  >\n                    {{ count }}\n                  </span>\n                }\n              }\n            </button>\n\n            @if (isExpanded(group)) {\n              <div class=\"flex flex-col gap-1 px-3 py-2 bg-surface-50/40\">\n                @for (grant of group.grants; track $index) {\n                  <label\n                    class=\"flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer hover:bg-surface-100\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelected(grant)\"\n                      [disabled]=\"readonly()\"\n                      (change)=\"toggleGrant(grant)\"\n                    />\n                    <span class=\"text-sm\">\n                      {{ grant.action.operationKey }}\n                    </span>\n                    @if (grant.action.isHighRisk) {\n                      <mt-icon\n                        icon=\"alert.alert-triangle\"\n                        styleClass=\"text-sm text-amber-500\"\n                        [pTooltip]=\"t('delegations.scope.highRisk')\"\n                        tooltipPosition=\"top\"\n                      ></mt-icon>\n                    }\n                  </label>\n                }\n              </div>\n            }\n          </div>\n        }\n      </section>\n\n      <!-- Preview -->\n      <section\n        class=\"flex flex-col gap-1 px-3 py-2 rounded-md border border-dashed border-gray-300 bg-surface-50\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-xs font-medium text-gray-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm text-gray-900\">\n              {{ p.summary || t(\"delegations.column.scopeSummary\") }}\n            </div>\n          } @else {\n            <div class=\"text-sm text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"text-xs text-amber-700 list-disc list-inside\">\n              @for (w of p.warnings; track w.message) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"text-xs text-red-700 list-disc list-inside\">\n              @for (d of p.deniedItems; track d.operationKey) {\n                <li>\n                  {{ d.targetKey }} / {{ d.operationKey }} \u2014\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block}.mt-scope-picker input[type=checkbox]{accent-color:var(--p-primary-color, currentColor)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ScopePicker, isStandalone: true, selector: "mt-scope-picker", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"mt-scope-picker flex flex-col gap-4\">\n    @if (isLoadingOptions()) {\n      <p-skeleton height=\"2rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n    } @else {\n      <section class=\"flex flex-col gap-2\">\n        <h4 class=\"text-sm font-medium text-gray-800\">\n          {{ t(\"delegations.scope.permissionsTitle\") }}\n        </h4>\n\n        @if (errorOptions(); as errorMessage) {\n          <div\n            class=\"rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700\"\n          >\n            {{ errorMessage }}\n          </div>\n        }\n\n        @if (groups().length === 0 && !errorOptions()) {\n          <p class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noGrantableOptions\") }}\n          </p>\n        }\n\n        @for (group of groups(); track group.key) {\n          <div class=\"overflow-hidden rounded-md border border-gray-200\">\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center justify-between px-3 py-2 hover:bg-surface-50\"\n              (click)=\"toggleAccordion(group)\"\n            >\n              <div class=\"flex min-w-0 items-center gap-2\">\n                <mt-icon\n                  [icon]=\"\n                    isExpanded(group)\n                      ? 'arrow.chevron-down'\n                      : 'arrow.chevron-right'\n                  \"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n                <span class=\"truncate text-sm text-gray-900\">\n                  {{ getTargetLabel(group.target) }}\n                </span>\n                <span class=\"text-xs text-gray-400\">\n                  {{ group.target.targetType }}\n                </span>\n              </div>\n              @if (selectedCount(group); as count) {\n                @if (count > 0) {\n                  <span\n                    class=\"rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary\"\n                  >\n                    {{ count }}\n                  </span>\n                }\n              }\n            </button>\n\n            @if (isExpanded(group)) {\n              <div class=\"flex flex-col gap-1 bg-surface-50/40 px-3 py-2\">\n                @for (grant of group.grants; track $index) {\n                  <label\n                    class=\"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-surface-100\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelected(grant)\"\n                      [disabled]=\"readonly()\"\n                      (change)=\"toggleGrant(grant)\"\n                    />\n                    <span class=\"text-sm\">\n                      {{ getActionLabel(grant) }}\n                    </span>\n                    @if (grant.action.isHighRisk) {\n                      <mt-icon\n                        icon=\"alert.alert-triangle\"\n                        styleClass=\"text-sm text-amber-500\"\n                        [pTooltip]=\"t('delegations.scope.highRisk')\"\n                        tooltipPosition=\"top\"\n                      ></mt-icon>\n                    }\n                  </label>\n                }\n              </div>\n            }\n          </div>\n        }\n      </section>\n\n      <section\n        class=\"flex flex-col gap-1 rounded-md border border-dashed border-gray-300 bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-xs font-medium text-gray-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm text-gray-900\">\n              {{\n                getPreviewSummary(p.summary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n          } @else {\n            <div class=\"text-sm text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-amber-700\">\n              @for (w of p.warnings; track w.message) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-red-700\">\n              @for (d of p.deniedItems; track d.operationKey) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block}.mt-scope-picker input[type=checkbox]{accent-color:var(--p-primary-color, currentColor)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, decorators: [{
             type: Component,
@@ -1135,10 +1468,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SkeletonModule,
                         TooltipModule,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"mt-scope-picker flex flex-col gap-4\">\n    @if (isLoadingOptions() && !options()) {\n      <p-skeleton height=\"2rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n    } @else if (options()) {\n      <!-- Targets + actions -->\n      <section class=\"flex flex-col gap-2\">\n        <h4 class=\"text-sm font-medium text-gray-800\">\n          {{ t(\"delegations.scope.permissionsTitle\") }}\n        </h4>\n\n        @if (groups().length === 0) {\n          <p class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noGrantableOptions\") }}\n          </p>\n        }\n\n        @for (group of groups(); track group.key) {\n          <div class=\"border border-gray-200 rounded-md overflow-hidden\">\n            <button\n              type=\"button\"\n              class=\"flex items-center justify-between w-full px-3 py-2 hover:bg-surface-50 cursor-pointer\"\n              (click)=\"toggleAccordion(group)\"\n            >\n              <div class=\"flex items-center gap-2 min-w-0\">\n                <mt-icon\n                  [icon]=\"\n                    isExpanded(group)\n                      ? 'arrow.chevron-down'\n                      : 'arrow.chevron-right'\n                  \"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n                <span class=\"text-sm text-gray-900 truncate\">\n                  {{ group.target.displayName || group.target.targetKey }}\n                </span>\n                <span class=\"text-xs text-gray-400\">\n                  {{ group.target.targetType }}\n                </span>\n              </div>\n              @if (selectedCount(group); as count) {\n                @if (count > 0) {\n                  <span\n                    class=\"text-xs text-primary font-medium px-2 py-0.5 rounded-full bg-primary-50\"\n                  >\n                    {{ count }}\n                  </span>\n                }\n              }\n            </button>\n\n            @if (isExpanded(group)) {\n              <div class=\"flex flex-col gap-1 px-3 py-2 bg-surface-50/40\">\n                @for (grant of group.grants; track $index) {\n                  <label\n                    class=\"flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer hover:bg-surface-100\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelected(grant)\"\n                      [disabled]=\"readonly()\"\n                      (change)=\"toggleGrant(grant)\"\n                    />\n                    <span class=\"text-sm\">\n                      {{ grant.action.operationKey }}\n                    </span>\n                    @if (grant.action.isHighRisk) {\n                      <mt-icon\n                        icon=\"alert.alert-triangle\"\n                        styleClass=\"text-sm text-amber-500\"\n                        [pTooltip]=\"t('delegations.scope.highRisk')\"\n                        tooltipPosition=\"top\"\n                      ></mt-icon>\n                    }\n                  </label>\n                }\n              </div>\n            }\n          </div>\n        }\n      </section>\n\n      <!-- Preview -->\n      <section\n        class=\"flex flex-col gap-1 px-3 py-2 rounded-md border border-dashed border-gray-300 bg-surface-50\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-xs font-medium text-gray-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm text-gray-900\">\n              {{ p.summary || t(\"delegations.column.scopeSummary\") }}\n            </div>\n          } @else {\n            <div class=\"text-sm text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"text-xs text-amber-700 list-disc list-inside\">\n              @for (w of p.warnings; track w.message) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"text-xs text-red-700 list-disc list-inside\">\n              @for (d of p.deniedItems; track d.operationKey) {\n                <li>\n                  {{ d.targetKey }} / {{ d.operationKey }} \u2014\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block}.mt-scope-picker input[type=checkbox]{accent-color:var(--p-primary-color, currentColor)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"mt-scope-picker flex flex-col gap-4\">\n    @if (isLoadingOptions()) {\n      <p-skeleton height=\"2rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n    } @else {\n      <section class=\"flex flex-col gap-2\">\n        <h4 class=\"text-sm font-medium text-gray-800\">\n          {{ t(\"delegations.scope.permissionsTitle\") }}\n        </h4>\n\n        @if (errorOptions(); as errorMessage) {\n          <div\n            class=\"rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700\"\n          >\n            {{ errorMessage }}\n          </div>\n        }\n\n        @if (groups().length === 0 && !errorOptions()) {\n          <p class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noGrantableOptions\") }}\n          </p>\n        }\n\n        @for (group of groups(); track group.key) {\n          <div class=\"overflow-hidden rounded-md border border-gray-200\">\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center justify-between px-3 py-2 hover:bg-surface-50\"\n              (click)=\"toggleAccordion(group)\"\n            >\n              <div class=\"flex min-w-0 items-center gap-2\">\n                <mt-icon\n                  [icon]=\"\n                    isExpanded(group)\n                      ? 'arrow.chevron-down'\n                      : 'arrow.chevron-right'\n                  \"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n                <span class=\"truncate text-sm text-gray-900\">\n                  {{ getTargetLabel(group.target) }}\n                </span>\n                <span class=\"text-xs text-gray-400\">\n                  {{ group.target.targetType }}\n                </span>\n              </div>\n              @if (selectedCount(group); as count) {\n                @if (count > 0) {\n                  <span\n                    class=\"rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary\"\n                  >\n                    {{ count }}\n                  </span>\n                }\n              }\n            </button>\n\n            @if (isExpanded(group)) {\n              <div class=\"flex flex-col gap-1 bg-surface-50/40 px-3 py-2\">\n                @for (grant of group.grants; track $index) {\n                  <label\n                    class=\"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-surface-100\"\n                  >\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelected(grant)\"\n                      [disabled]=\"readonly()\"\n                      (change)=\"toggleGrant(grant)\"\n                    />\n                    <span class=\"text-sm\">\n                      {{ getActionLabel(grant) }}\n                    </span>\n                    @if (grant.action.isHighRisk) {\n                      <mt-icon\n                        icon=\"alert.alert-triangle\"\n                        styleClass=\"text-sm text-amber-500\"\n                        [pTooltip]=\"t('delegations.scope.highRisk')\"\n                        tooltipPosition=\"top\"\n                      ></mt-icon>\n                    }\n                  </label>\n                }\n              </div>\n            }\n          </div>\n        }\n      </section>\n\n      <section\n        class=\"flex flex-col gap-1 rounded-md border border-dashed border-gray-300 bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-xs font-medium text-gray-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm text-gray-900\">\n              {{\n                getPreviewSummary(p.summary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n          } @else {\n            <div class=\"text-sm text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-amber-700\">\n              @for (w of p.warnings; track w.message) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-red-700\">\n              @for (d of p.deniedItems; track d.operationKey) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block}.mt-scope-picker input[type=checkbox]{accent-color:var(--p-primary-color, currentColor)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }, { type: i0.Output, args: ["scopeChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], delegatorUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegatorUserId", required: false }] }] } });
 
 const EMPTY_SCOPE = { grants: [], metadata: {} };
+function extractUserId(value) {
+    if (typeof value === 'string') {
+        return value.trim() || undefined;
+    }
+    if (!value || typeof value !== 'object') {
+        return undefined;
+    }
+    const record = value;
+    for (const key of ['userId', 'id']) {
+        const candidate = record[key];
+        if (typeof candidate === 'string' && candidate.trim()) {
+            return candidate.trim();
+        }
+    }
+    return undefined;
+}
 /**
  * Delegation create/edit form (doc 04). Uses the v2 explicit-scope endpoints so
  * the persisted `DelegationScopeSelection` matches what scope/preview validated.
@@ -1175,11 +1524,7 @@ class DelegationForm {
     selectedDelegatorId = computed(() => {
         if (!this.adminMode())
             return undefined;
-        const v = this.formValue();
-        return (v?.delegateFrom?.userId ??
-            v?.delegateFrom?.id ??
-            v?.delegateFrom ??
-            undefined);
+        return extractUserId(this.formValue()?.delegateFrom);
     }, ...(ngDevMode ? [{ debugName: "selectedDelegatorId" }] : /* istanbul ignore next */ []));
     /** In admin mode the scope picker only loads once a delegator is chosen. */
     showScopePicker = computed(() => !this.adminMode() || !!this.selectedDelegatorId(), ...(ngDevMode ? [{ debugName: "showScopePicker" }] : /* istanbul ignore next */ []));
@@ -1359,7 +1704,7 @@ class DelegationForm {
             delegateFrom: this.adminMode()
                 ? (this.selectedDelegatorId() ?? null)
                 : null,
-            delegateTo: v?.delegateTo?.userId ?? v?.delegateTo?.id ?? v?.delegateTo,
+            delegateTo: extractUserId(v?.delegateTo) ?? '',
             description: v?.description,
             delegateFromDateTime: v?.delegateFromDateTime,
             delegateToDateTime: v?.delegateToDateTime,
@@ -1429,8 +1774,17 @@ class DelegationDetailDrawer {
         const s = this.row()?.approval?.approvalStatus ?? 'NotRequired';
         return this.transloco.translate(`delegations.approvalStatus.${s}`);
     }
+    getScopeTargetLabel(target) {
+        return formatDelegationTargetLabel(target, this.transloco.getActiveLang());
+    }
+    getScopeActionLabel(action) {
+        return formatDelegationActionLabel(action, this.transloco.getActiveLang());
+    }
+    formatScopeSummary(summary) {
+        return formatDelegationScopeSummary(summary, this.transloco.getActiveLang());
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track tab.key) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-avatar\n                  icon=\"user.user-01\"\n                  styleClass=\"w-12! h-12! text-lg!\"\n                ></mt-avatar>\n                <div class=\"flex flex-col min-w-0\">\n                  <div class=\"text-xs text-gray-500\">\n                    {{ t(\"delegations.column.delegatorName\") }}\n                  </div>\n                  <div class=\"text-base font-medium text-gray-900 truncate\">\n                    {{ d.row.delegator.displayName }}\n                  </div>\n                  @if (d.row.delegator.email) {\n                    <div class=\"text-xs text-gray-500 truncate\">\n                      {{ d.row.delegator.email }}\n                    </div>\n                  }\n                </div>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.delegatedTo\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.delegatedUser.displayName }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{ d.row.scopeSummary || t(\"delegations.column.scopeSummary\") }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ grant.target.displayName || grant.target.targetKey }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ grant.action.operationKey }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track tab.key) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-avatar\n                  icon=\"user.user-01\"\n                  styleClass=\"w-12! h-12! text-lg!\"\n                ></mt-avatar>\n                <div class=\"flex flex-col min-w-0\">\n                  <div class=\"text-xs text-gray-500\">\n                    {{ t(\"delegations.column.delegatorName\") }}\n                  </div>\n                  <div class=\"text-base font-medium text-gray-900 truncate\">\n                    {{ d.row.delegator.displayName }}\n                  </div>\n                  @if (d.row.delegator.email) {\n                    <div class=\"text-xs text-gray-500 truncate\">\n                      {{ d.row.delegator.email }}\n                    </div>\n                  }\n                </div>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.delegatedTo\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.delegatedUser.displayName }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{\n                formatScopeSummary(d.row.scopeSummary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ getScopeTargetLabel(grant.target) }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ getScopeActionLabel(grant.action) }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, decorators: [{
             type: Component,
@@ -1441,7 +1795,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SkeletonModule,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track tab.key) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-avatar\n                  icon=\"user.user-01\"\n                  styleClass=\"w-12! h-12! text-lg!\"\n                ></mt-avatar>\n                <div class=\"flex flex-col min-w-0\">\n                  <div class=\"text-xs text-gray-500\">\n                    {{ t(\"delegations.column.delegatorName\") }}\n                  </div>\n                  <div class=\"text-base font-medium text-gray-900 truncate\">\n                    {{ d.row.delegator.displayName }}\n                  </div>\n                  @if (d.row.delegator.email) {\n                    <div class=\"text-xs text-gray-500 truncate\">\n                      {{ d.row.delegator.email }}\n                    </div>\n                  }\n                </div>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.delegatedTo\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.delegatedUser.displayName }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{ d.row.scopeSummary || t(\"delegations.column.scopeSummary\") }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ grant.target.displayName || grant.target.targetKey }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ grant.action.operationKey }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track tab.key) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-avatar\n                  icon=\"user.user-01\"\n                  styleClass=\"w-12! h-12! text-lg!\"\n                ></mt-avatar>\n                <div class=\"flex flex-col min-w-0\">\n                  <div class=\"text-xs text-gray-500\">\n                    {{ t(\"delegations.column.delegatorName\") }}\n                  </div>\n                  <div class=\"text-base font-medium text-gray-900 truncate\">\n                    {{ d.row.delegator.displayName }}\n                  </div>\n                  @if (d.row.delegator.email) {\n                    <div class=\"text-xs text-gray-500 truncate\">\n                      {{ d.row.delegator.email }}\n                    </div>\n                  }\n                </div>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.delegatedTo\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.delegatedUser.displayName }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{\n                formatScopeSummary(d.row.scopeSummary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ getScopeTargetLabel(grant.target) }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ getScopeActionLabel(grant.action) }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"] }]
         }], propDecorators: { delegationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegationId", required: true }] }] } });
 
 /**
@@ -1506,7 +1860,7 @@ class DelegationsList {
     canCreate = computed(() => {
         if (this.adminMode())
             return true;
-        return (this.scopeOptions()?.grants?.length ?? 0) > 0;
+        return hasDelegationGrantableScope(this.scopeOptions());
     }, ...(ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []));
     tableActions = computed(() => this.canCreate()
         ? [
@@ -1663,6 +2017,9 @@ class DelegationsList {
         }
         return this.transloco.translate('delegations.form.fullRange');
     }
+    formatScopeSummary(value) {
+        return formatDelegationScopeSummary(value, this.transloco.getActiveLang());
+    }
     viewDetails(row) {
         this.modal.openModal(DelegationDetailDrawer, 'drawer', {
             header: this.transloco.translate('delegations.action.view'),
@@ -1739,7 +2096,7 @@ class DelegationsList {
         this.busyIds.update((ids) => on ? [...ids, key] : ids.filter((id) => id !== key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "statusCol", first: true, predicate: ["statusCol"], descendants: true, isSignal: true }, { propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }, { propertyName: "scopeCol", first: true, predicate: ["scopeCol"], descendants: true, isSignal: true }, { propertyName: "daysCol", first: true, predicate: ["daysCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full gap-2 p-4\">\n    @if (showBreadcrumb()) {\n      <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\n    }\n\n    <div class=\"flex items-center gap-2 border-b border-gray-200\">\n      @for (tab of tabs(); track tab.value) {\n        <button\n          type=\"button\"\n          class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.value\"\n          [class.text-primary]=\"activeTab() === tab.value\"\n          [class.border-transparent]=\"activeTab() !== tab.value\"\n          [class.text-gray-500]=\"activeTab() !== tab.value\"\n          (click)=\"switchTab(tab.value)\"\n        >\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"tableColumns()\"\n      [actions]=\"tableActions()\"\n      [rowActions]=\"rowActions()\"\n      [freezeActions]=\"true\"\n      [loading]=\"isLoading()\"\n    >\n      <ng-template #statusCol let-row>\n        <mt-delegation-status-chip\n          [status]=\"row.effectiveStatus\"\n        ></mt-delegation-status-chip>\n      </ng-template>\n\n      <ng-template #userCol let-row>\n        @let party = activeTab() === \"my\" ? row.delegatedUser : row.delegator;\n        <div class=\"flex items-center gap-2\">\n          <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n          <div class=\"flex flex-col min-w-0\">\n            <span class=\"text-sm text-gray-900 truncate\">\n              {{ party?.displayName }}\n            </span>\n            @if (party?.email) {\n              <span class=\"text-xs text-gray-500 truncate\">\n                {{ party.email }}\n              </span>\n            }\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template #scopeCol let-row>\n        <span class=\"text-sm text-gray-700\" [title]=\"row.scopeSummary\">\n          {{ row.scopeSummary || \"\u2014\" }}\n        </span>\n      </ng-template>\n\n      <ng-template #daysCol let-row>\n        <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\n      </ng-template>\n    </mt-table>\n  </div>\n</ng-container>\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-table{min-width:72rem}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}@media(max-width:768px){:host ::ng-deep mt-table .p-datatable-table{min-width:64rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "statusCol", first: true, predicate: ["statusCol"], descendants: true, isSignal: true }, { propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }, { propertyName: "scopeCol", first: true, predicate: ["scopeCol"], descendants: true, isSignal: true }, { propertyName: "daysCol", first: true, predicate: ["daysCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full gap-2 p-4\">\n    @if (showBreadcrumb()) {\n      <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\n    }\n\n    <div class=\"flex items-center gap-2 border-b border-gray-200\">\n      @for (tab of tabs(); track tab.value) {\n        <button\n          type=\"button\"\n          class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.value\"\n          [class.text-primary]=\"activeTab() === tab.value\"\n          [class.border-transparent]=\"activeTab() !== tab.value\"\n          [class.text-gray-500]=\"activeTab() !== tab.value\"\n          (click)=\"switchTab(tab.value)\"\n        >\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"tableColumns()\"\n      [actions]=\"tableActions()\"\n      [rowActions]=\"rowActions()\"\n      [freezeActions]=\"true\"\n      [loading]=\"isLoading()\"\n    >\n      <ng-template #statusCol let-row>\n        <mt-delegation-status-chip\n          [status]=\"row.effectiveStatus\"\n        ></mt-delegation-status-chip>\n      </ng-template>\n\n      <ng-template #userCol let-row>\n        @let party = activeTab() === \"my\" ? row.delegatedUser : row.delegator;\n        <div class=\"flex items-center gap-2\">\n          <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n          <div class=\"flex flex-col min-w-0\">\n            <span class=\"text-sm text-gray-900 truncate\">\n              {{ party?.displayName }}\n            </span>\n            @if (party?.email) {\n              <span class=\"text-xs text-gray-500 truncate\">\n                {{ party.email }}\n              </span>\n            }\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template #scopeCol let-row>\n        @let summary = formatScopeSummary(row.scopeSummary);\n        <span class=\"text-sm text-gray-700\" [title]=\"summary\">\n          {{ summary || \"\u2014\" }}\n        </span>\n      </ng-template>\n\n      <ng-template #daysCol let-row>\n        <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\n      </ng-template>\n    </mt-table>\n  </div>\n</ng-container>\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-table{min-width:72rem}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}@media(max-width:768px){:host ::ng-deep mt-table .p-datatable-table{min-width:64rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, decorators: [{
             type: Component,
@@ -1750,7 +2107,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Table,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full gap-2 p-4\">\n    @if (showBreadcrumb()) {\n      <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\n    }\n\n    <div class=\"flex items-center gap-2 border-b border-gray-200\">\n      @for (tab of tabs(); track tab.value) {\n        <button\n          type=\"button\"\n          class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.value\"\n          [class.text-primary]=\"activeTab() === tab.value\"\n          [class.border-transparent]=\"activeTab() !== tab.value\"\n          [class.text-gray-500]=\"activeTab() !== tab.value\"\n          (click)=\"switchTab(tab.value)\"\n        >\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"tableColumns()\"\n      [actions]=\"tableActions()\"\n      [rowActions]=\"rowActions()\"\n      [freezeActions]=\"true\"\n      [loading]=\"isLoading()\"\n    >\n      <ng-template #statusCol let-row>\n        <mt-delegation-status-chip\n          [status]=\"row.effectiveStatus\"\n        ></mt-delegation-status-chip>\n      </ng-template>\n\n      <ng-template #userCol let-row>\n        @let party = activeTab() === \"my\" ? row.delegatedUser : row.delegator;\n        <div class=\"flex items-center gap-2\">\n          <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n          <div class=\"flex flex-col min-w-0\">\n            <span class=\"text-sm text-gray-900 truncate\">\n              {{ party?.displayName }}\n            </span>\n            @if (party?.email) {\n              <span class=\"text-xs text-gray-500 truncate\">\n                {{ party.email }}\n              </span>\n            }\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template #scopeCol let-row>\n        <span class=\"text-sm text-gray-700\" [title]=\"row.scopeSummary\">\n          {{ row.scopeSummary || \"\u2014\" }}\n        </span>\n      </ng-template>\n\n      <ng-template #daysCol let-row>\n        <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\n      </ng-template>\n    </mt-table>\n  </div>\n</ng-container>\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-table{min-width:72rem}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}@media(max-width:768px){:host ::ng-deep mt-table .p-datatable-table{min-width:64rem}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full gap-2 p-4\">\n    @if (showBreadcrumb()) {\n      <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\n    }\n\n    <div class=\"flex items-center gap-2 border-b border-gray-200\">\n      @for (tab of tabs(); track tab.value) {\n        <button\n          type=\"button\"\n          class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.value\"\n          [class.text-primary]=\"activeTab() === tab.value\"\n          [class.border-transparent]=\"activeTab() !== tab.value\"\n          [class.text-gray-500]=\"activeTab() !== tab.value\"\n          (click)=\"switchTab(tab.value)\"\n        >\n          {{ tab.label }}\n        </button>\n      }\n    </div>\n\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"tableColumns()\"\n      [actions]=\"tableActions()\"\n      [rowActions]=\"rowActions()\"\n      [freezeActions]=\"true\"\n      [loading]=\"isLoading()\"\n    >\n      <ng-template #statusCol let-row>\n        <mt-delegation-status-chip\n          [status]=\"row.effectiveStatus\"\n        ></mt-delegation-status-chip>\n      </ng-template>\n\n      <ng-template #userCol let-row>\n        @let party = activeTab() === \"my\" ? row.delegatedUser : row.delegator;\n        <div class=\"flex items-center gap-2\">\n          <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n          <div class=\"flex flex-col min-w-0\">\n            <span class=\"text-sm text-gray-900 truncate\">\n              {{ party?.displayName }}\n            </span>\n            @if (party?.email) {\n              <span class=\"text-xs text-gray-500 truncate\">\n                {{ party.email }}\n              </span>\n            }\n          </div>\n        </div>\n      </ng-template>\n\n      <ng-template #scopeCol let-row>\n        @let summary = formatScopeSummary(row.scopeSummary);\n        <span class=\"text-sm text-gray-700\" [title]=\"summary\">\n          {{ summary || \"\u2014\" }}\n        </span>\n      </ng-template>\n\n      <ng-template #daysCol let-row>\n        <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\n      </ng-template>\n    </mt-table>\n  </div>\n</ng-container>\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-table{min-width:72rem}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}@media(max-width:768px){:host ::ng-deep mt-table .p-datatable-table{min-width:64rem}}\n"] }]
         }], propDecorators: { showBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumb", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], statusCol: [{ type: i0.ViewChild, args: ['statusCol', { isSignal: true }] }], userCol: [{ type: i0.ViewChild, args: ['userCol', { isSignal: true }] }], scopeCol: [{ type: i0.ViewChild, args: ['scopeCol', { isSignal: true }] }], daysCol: [{ type: i0.ViewChild, args: ['daysCol', { isSignal: true }] }] } });
 
 /**