@masterteam/delegations 0.0.41 → 0.0.43

package/fesm2022/masterteam-delegations.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, InjectionToken, computed, input, ChangeDetectionStrategy, Component, output, viewChild, effect, signal, model, untracked, booleanAttribute, linkedSignal } from '@angular/core';
+import { inject, Injectable, InjectionToken, computed, input, ChangeDetectionStrategy, Component, output, viewChild, effect, signal, model, untracked, booleanAttribute, numberAttribute, linkedSignal } from '@angular/core';
 import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
 import { Avatar } from '@masterteam/components/avatar';
 import { ModalService } from '@masterteam/components/modal';
@@ -336,121 +336,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-function isRecord$1(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$1(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$1(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 formatDelegationDisplayValue(value, preferredLanguage = 'en') {
-    return resolveDisplayValue(value, preferredLanguage) ?? '';
-}
-function formatDelegationTargetLabel(target, preferredLanguage = 'en') {
-    return resolveDisplayOrHumanizedKey(target, ['name', 'displayName', 'displayLabel', 'label'], target.targetKey, preferredLanguage);
-}
-function formatDelegationActionLabel(action, preferredLanguage = 'en') {
-    return resolveDisplayOrHumanizedKey(action, [
-        'name',
-        'displayName',
-        'displayLabel',
-        'operationDisplayName',
-        'operationLabel',
-        'label',
-    ], action.operationKey, preferredLanguage);
-}
-function formatDelegationScopeSummary(value, preferredLanguage = 'en') {
-    return formatDelegationDisplayValue(value, preferredLanguage);
-}
-
 function toDelegationUserValue(party) {
     const displayName = party?.displayName?.trim() || party?.email?.trim() || '';
     return {
@@ -494,9 +379,6 @@ class StartSessionDialog {
     successMessageKey = computed(() => this.intent() === 'switch'
         ? 'delegations.session.switched'
         : 'delegations.session.started', ...(ngDevMode ? [{ debugName: "successMessageKey" }] : /* istanbul ignore next */ []));
-    formatScopeSummary(summary) {
-        return formatDelegationScopeSummary(summary, this.transloco.getActiveLang());
-    }
     userEntity(party) {
         return toDelegationUserEntity(party, { showEmail: false });
     }
@@ -519,11 +401,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\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <div class=\"flex items-start gap-3\">\r\n      <div class=\"flex flex-col min-w-0\">\r\n        <mt-entity-preview\r\n          [data]=\"userEntity(delegation().delegator)\"\r\n        ></mt-entity-preview>\r\n        @if (delegation().scopeSummary) {\r\n          <div class=\"text-xs text-surface-500 mt-1\">\r\n            {{ t(\"delegations.column.scopeSummary\") }}:\r\n            {{ formatScopeSummary(delegation().scopeSummary) }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <p class=\"text-sm text-surface-600 leading-relaxed\">\r\n      {{ t(bodyKey()) }}\r\n    </p>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        [disabled]=\"isBusy()\"\r\n        (click)=\"cancel()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        color=\"primary\"\r\n        icon=\"user.users-check\"\r\n        [label]=\"t(confirmLabelKey())\"\r\n        [loading]=\"isBusy()\"\r\n        (click)=\"confirm()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: StartSessionDialog, isStandalone: true, selector: "mt-start-session-dialog", inputs: { delegation: { classPropertyName: "delegation", publicName: "delegation", isSignal: true, isRequired: true, transformFunction: null }, intent: { classPropertyName: "intent", publicName: "intent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex items-start gap-3\">\n      <div class=\"flex flex-col min-w-0\">\n        <mt-entity-preview\n          [data]=\"userEntity(delegation().delegator)\"\n        ></mt-entity-preview>\n      </div>\n    </div>\n\n    <p class=\"text-sm text-surface-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.cancel')\"\n        [disabled]=\"isBusy()\"\n        (click)=\"cancel()\"\n      ></mt-button>\n      <mt-button\n        color=\"primary\"\n        icon=\"user.users-check\"\n        [label]=\"t(confirmLabelKey())\"\n        [loading]=\"isBusy()\"\n        (click)=\"confirm()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: StartSessionDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-start-session-dialog', imports: [CommonModule, Button, EntityPreview, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <div class=\"flex items-start gap-3\">\r\n      <div class=\"flex flex-col min-w-0\">\r\n        <mt-entity-preview\r\n          [data]=\"userEntity(delegation().delegator)\"\r\n        ></mt-entity-preview>\r\n        @if (delegation().scopeSummary) {\r\n          <div class=\"text-xs text-surface-500 mt-1\">\r\n            {{ t(\"delegations.column.scopeSummary\") }}:\r\n            {{ formatScopeSummary(delegation().scopeSummary) }}\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <p class=\"text-sm text-surface-600 leading-relaxed\">\r\n      {{ t(bodyKey()) }}\r\n    </p>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        [disabled]=\"isBusy()\"\r\n        (click)=\"cancel()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        color=\"primary\"\r\n        icon=\"user.users-check\"\r\n        [label]=\"t(confirmLabelKey())\"\r\n        [loading]=\"isBusy()\"\r\n        (click)=\"confirm()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'mt-start-session-dialog', imports: [CommonModule, Button, EntityPreview, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex items-start gap-3\">\n      <div class=\"flex flex-col min-w-0\">\n        <mt-entity-preview\n          [data]=\"userEntity(delegation().delegator)\"\n        ></mt-entity-preview>\n      </div>\n    </div>\n\n    <p class=\"text-sm text-surface-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.cancel')\"\n        [disabled]=\"isBusy()\"\n        (click)=\"cancel()\"\n      ></mt-button>\n      <mt-button\n        color=\"primary\"\n        icon=\"user.users-check\"\n        [label]=\"t(confirmLabelKey())\"\n        [loading]=\"isBusy()\"\n        (click)=\"confirm()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], propDecorators: { delegation: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegation", required: true }] }], intent: [{ type: i0.Input, args: [{ isSignal: true, alias: "intent", required: false }] }] } });
 
 /**
@@ -672,7 +554,7 @@ class DelegationMenuPanel {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationMenuPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationMenuPanel, isStandalone: true, selector: "mt-delegation-menu-panel", inputs: { managePath: { classPropertyName: "managePath", publicName: "managePath", isSignal: true, isRequired: false, transformFunction: null }, showManageLink: { classPropertyName: "showManageLink", publicName: "showManageLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    <div class=\"flex w-full flex-col\">\n      @if (mode() === \"active\" && active(); as session) {\n        <!-- Active session -->\n        <div class=\"flex items-center gap-3 border-b border-surface px-4 py-3\">\n          <mt-avatar\n            [label]=\"initials(onBehalfOf())\"\n            shape=\"circle\"\n            styleClass=\"!size-9 !text-sm !bg-primary-100 !text-primary-700\"\n          ></mt-avatar>\n          <div class=\"flex min-w-0 flex-1 flex-col\">\n            <span class=\"text-[0.625rem] font-medium uppercase text-surface-500\">\n              {{ t(\"delegations.session.actingOnBehalfOf\") }}\n            </span>\n            <span class=\"truncate text-sm font-semibold text-surface-900\">\n              {{ onBehalfOf()?.displayName }}\n            </span>\n            <span class=\"truncate text-xs text-surface-500\">\n              {{\n                t(\"delegations.session.executedBy\", {\n                  actualUserName: executedBy()?.displayName,\n                })\n              }}\n            </span>\n          </div>\n          <mt-delegation-status-chip status=\"Active\"></mt-delegation-status-chip>\n        </div>\n\n        <div class=\"flex flex-col p-1.5\">\n          <button\n            type=\"button\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-100\"\n            (click)=\"endSession($event)\"\n          >\n            <mt-icon icon=\"arrow.arrow-left\" styleClass=\"text-base\"></mt-icon>\n            <span>{{ t(\"delegations.action.endSession\") }}</span>\n          </button>\n        </div>\n\n        @if (candidates().length > 1) {\n          <div class=\"border-t border-surface p-1.5\">\n            <div\n              class=\"px-2 pb-1 text-[0.625rem] font-medium uppercase text-surface-400\"\n            >\n              {{ t(\"delegations.session.switchToAnother\") }}\n            </div>\n            @for (cand of candidates(); track $index) {\n              @if (cand.delegationId !== session.delegation.delegationId) {\n                <button\n                  type=\"button\"\n                  class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\n                  [attr.aria-label]=\"\n                    t('delegations.action.switchSession') +\n                    ': ' +\n                    cand.delegator.displayName\n                  \"\n                  (click)=\"switchTo(cand, $event)\"\n                >\n                  <mt-avatar\n                    [label]=\"initials(cand.delegator)\"\n                    shape=\"circle\"\n                    styleClass=\"!size-8 !text-xs !bg-surface-100 !text-surface-600\"\n                  ></mt-avatar>\n                  <span\n                    class=\"min-w-0 flex-1 truncate text-sm font-medium text-surface-800\"\n                  >\n                    {{ cand.delegator.displayName }}\n                  </span>\n                  <mt-icon\n                    icon=\"arrow.switch-horizontal-01\"\n                    styleClass=\"text-base text-surface-400\"\n                  ></mt-icon>\n                </button>\n              }\n            }\n          </div>\n        }\n      } @else if (mode() === \"candidates\") {\n        <!-- Candidates available -->\n        <div class=\"border-b border-surface px-4 py-3\">\n          <div class=\"text-sm font-semibold text-surface-900\">\n            {{ t(\"delegations.session.youCanActAs\") }}\n          </div>\n          <div class=\"mt-0.5 text-xs text-surface-500\">\n            {{ t(\"delegations.session.chooseDelegatorHint\") }}\n          </div>\n        </div>\n        <div class=\"flex max-h-72 flex-col overflow-y-auto p-1.5\">\n          @for (cand of candidates(); track $index) {\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\n              [attr.aria-label]=\"\n                t('delegations.action.startSession') +\n                ': ' +\n                cand.delegator.displayName\n              \"\n              (click)=\"start(cand, $event)\"\n            >\n              <mt-avatar\n                [label]=\"initials(cand.delegator)\"\n                shape=\"circle\"\n                styleClass=\"!size-8 !text-xs !bg-primary-100 !text-primary-700\"\n              ></mt-avatar>\n              <span class=\"flex min-w-0 flex-1 flex-col\">\n                <span class=\"truncate text-sm font-medium text-surface-800\">\n                  {{ cand.delegator.displayName }}\n                </span>\n                @if (cand.delegator.email) {\n                  <span class=\"truncate text-xs text-surface-500\">\n                    {{ cand.delegator.email }}\n                  </span>\n                }\n              </span>\n              <mt-icon\n                icon=\"arrow.arrow-right\"\n                styleClass=\"text-base text-surface-400\"\n              ></mt-icon>\n            </button>\n          }\n        </div>\n      }\n\n      @if (showManageLink()) {\n        <div class=\"border-t border-surface p-1.5\">\n          <a\n            [routerLink]=\"managePath()\"\n            (click)=\"onManage()\"\n            class=\"flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm text-surface-700 hover:bg-surface-100\"\n          >\n            <mt-icon icon=\"general.settings-02\" styleClass=\"text-base\"></mt-icon>\n            <span>{{ t(\"delegations.session.manage\") }}</span>\n          </a>\n        </div>\n      }\n    </div>\n  }\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: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationMenuPanel, isStandalone: true, selector: "mt-delegation-menu-panel", inputs: { managePath: { classPropertyName: "managePath", publicName: "managePath", isSignal: true, isRequired: false, transformFunction: null }, showManageLink: { classPropertyName: "showManageLink", publicName: "showManageLink", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    <div class=\"flex w-full flex-col\">\n      @if (mode() === \"active\" && active(); as session) {\n        <!-- Active session -->\n        <div class=\"flex items-center gap-3 border-b border-surface px-4 py-3\">\n          <mt-avatar\n            [label]=\"initials(onBehalfOf())\"\n            shape=\"circle\"\n            styleClass=\"!size-9 !text-sm !bg-primary-100 !text-primary-700\"\n          ></mt-avatar>\n          <div class=\"flex min-w-0 flex-1 flex-col\">\n            <span\n              class=\"text-[0.625rem] font-medium uppercase text-surface-500\"\n            >\n              {{ t(\"delegations.session.actingOnBehalfOf\") }}\n            </span>\n            <span class=\"truncate text-sm font-semibold text-surface-900\">\n              {{ onBehalfOf()?.displayName }}\n            </span>\n            <span class=\"truncate text-xs text-surface-500\">\n              {{\n                t(\"delegations.session.executedBy\", {\n                  actualUserName: executedBy()?.displayName,\n                })\n              }}\n            </span>\n          </div>\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        </div>\n\n        <div class=\"flex flex-col p-1.5\">\n          <button\n            type=\"button\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-100\"\n            (click)=\"endSession($event)\"\n          >\n            <mt-icon icon=\"arrow.arrow-left\" styleClass=\"text-base\"></mt-icon>\n            <span>{{ t(\"delegations.action.endSession\") }}</span>\n          </button>\n        </div>\n\n        @if (candidates().length > 1) {\n          <div class=\"border-t border-surface p-1.5\">\n            <div\n              class=\"px-2 pb-1 text-[0.625rem] font-medium uppercase text-surface-400\"\n            >\n              {{ t(\"delegations.session.switchToAnother\") }}\n            </div>\n            @for (cand of candidates(); track $index) {\n              @if (cand.delegationId !== session.delegation.delegationId) {\n                <button\n                  type=\"button\"\n                  class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\n                  [attr.aria-label]=\"\n                    t('delegations.action.switchSession') +\n                    ': ' +\n                    cand.delegator.displayName\n                  \"\n                  (click)=\"switchTo(cand, $event)\"\n                >\n                  <mt-avatar\n                    [label]=\"initials(cand.delegator)\"\n                    shape=\"circle\"\n                    styleClass=\"!size-8 !text-xs !bg-surface-100 !text-surface-600\"\n                  ></mt-avatar>\n                  <span\n                    class=\"min-w-0 flex-1 truncate text-sm font-medium text-surface-800\"\n                  >\n                    {{ cand.delegator.displayName }}\n                  </span>\n                  <mt-icon\n                    icon=\"arrow.switch-horizontal-01\"\n                    styleClass=\"text-base text-surface-400\"\n                  ></mt-icon>\n                </button>\n              }\n            }\n          </div>\n        }\n      } @else if (mode() === \"candidates\") {\n        <!-- Candidates available -->\n        <div class=\"border-b border-surface px-4 py-3\">\n          <div class=\"text-sm font-semibold text-surface-900\">\n            {{ t(\"delegations.session.youCanActAs\") }}\n          </div>\n          <div class=\"mt-0.5 text-xs text-surface-500\">\n            {{ t(\"delegations.session.chooseDelegatorHint\") }}\n          </div>\n        </div>\n        <div class=\"flex max-h-72 flex-col overflow-y-auto p-1.5\">\n          @for (cand of candidates(); track $index) {\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\n              [attr.aria-label]=\"\n                t('delegations.action.startSession') +\n                ': ' +\n                cand.delegator.displayName\n              \"\n              (click)=\"start(cand, $event)\"\n            >\n              <mt-avatar\n                [label]=\"initials(cand.delegator)\"\n                shape=\"circle\"\n                styleClass=\"!size-8 !text-xs !bg-primary-100 !text-primary-700\"\n              ></mt-avatar>\n              <span class=\"flex min-w-0 flex-1 flex-col\">\n                <span class=\"truncate text-sm font-medium text-surface-800\">\n                  {{ cand.delegator.displayName }}\n                </span>\n                @if (cand.delegator.email) {\n                  <span class=\"truncate text-xs text-surface-500\">\n                    {{ cand.delegator.email }}\n                  </span>\n                }\n              </span>\n              <mt-icon\n                icon=\"arrow.arrow-right\"\n                styleClass=\"text-base text-surface-400\"\n              ></mt-icon>\n            </button>\n          }\n        </div>\n      }\n\n      @if (showManageLink()) {\n        <div class=\"border-t border-surface p-1.5\">\n          <a\n            [routerLink]=\"managePath()\"\n            (click)=\"onManage()\"\n            class=\"flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm text-surface-700 hover:bg-surface-100\"\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      }\n    </div>\n  }\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: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationMenuPanel, decorators: [{
             type: Component,
@@ -683,7 +565,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=\"flex w-full flex-col\">\n      @if (mode() === \"active\" && active(); as session) {\n        <!-- Active session -->\n        <div class=\"flex items-center gap-3 border-b border-surface px-4 py-3\">\n          <mt-avatar\n            [label]=\"initials(onBehalfOf())\"\n            shape=\"circle\"\n            styleClass=\"!size-9 !text-sm !bg-primary-100 !text-primary-700\"\n          ></mt-avatar>\n          <div class=\"flex min-w-0 flex-1 flex-col\">\n            <span class=\"text-[0.625rem] font-medium uppercase text-surface-500\">\n              {{ t(\"delegations.session.actingOnBehalfOf\") }}\n            </span>\n            <span class=\"truncate text-sm font-semibold text-surface-900\">\n              {{ onBehalfOf()?.displayName }}\n            </span>\n            <span class=\"truncate text-xs text-surface-500\">\n              {{\n                t(\"delegations.session.executedBy\", {\n                  actualUserName: executedBy()?.displayName,\n                })\n              }}\n            </span>\n          </div>\n          <mt-delegation-status-chip status=\"Active\"></mt-delegation-status-chip>\n        </div>\n\n        <div class=\"flex flex-col p-1.5\">\n          <button\n            type=\"button\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-100\"\n            (click)=\"endSession($event)\"\n          >\n            <mt-icon icon=\"arrow.arrow-left\" styleClass=\"text-base\"></mt-icon>\n            <span>{{ t(\"delegations.action.endSession\") }}</span>\n          </button>\n        </div>\n\n        @if (candidates().length > 1) {\n          <div class=\"border-t border-surface p-1.5\">\n            <div\n              class=\"px-2 pb-1 text-[0.625rem] font-medium uppercase text-surface-400\"\n            >\n              {{ t(\"delegations.session.switchToAnother\") }}\n            </div>\n            @for (cand of candidates(); track $index) {\n              @if (cand.delegationId !== session.delegation.delegationId) {\n                <button\n                  type=\"button\"\n                  class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\n                  [attr.aria-label]=\"\n                    t('delegations.action.switchSession') +\n                    ': ' +\n                    cand.delegator.displayName\n                  \"\n                  (click)=\"switchTo(cand, $event)\"\n                >\n                  <mt-avatar\n                    [label]=\"initials(cand.delegator)\"\n                    shape=\"circle\"\n                    styleClass=\"!size-8 !text-xs !bg-surface-100 !text-surface-600\"\n                  ></mt-avatar>\n                  <span\n                    class=\"min-w-0 flex-1 truncate text-sm font-medium text-surface-800\"\n                  >\n                    {{ cand.delegator.displayName }}\n                  </span>\n                  <mt-icon\n                    icon=\"arrow.switch-horizontal-01\"\n                    styleClass=\"text-base text-surface-400\"\n                  ></mt-icon>\n                </button>\n              }\n            }\n          </div>\n        }\n      } @else if (mode() === \"candidates\") {\n        <!-- Candidates available -->\n        <div class=\"border-b border-surface px-4 py-3\">\n          <div class=\"text-sm font-semibold text-surface-900\">\n            {{ t(\"delegations.session.youCanActAs\") }}\n          </div>\n          <div class=\"mt-0.5 text-xs text-surface-500\">\n            {{ t(\"delegations.session.chooseDelegatorHint\") }}\n          </div>\n        </div>\n        <div class=\"flex max-h-72 flex-col overflow-y-auto p-1.5\">\n          @for (cand of candidates(); track $index) {\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\n              [attr.aria-label]=\"\n                t('delegations.action.startSession') +\n                ': ' +\n                cand.delegator.displayName\n              \"\n              (click)=\"start(cand, $event)\"\n            >\n              <mt-avatar\n                [label]=\"initials(cand.delegator)\"\n                shape=\"circle\"\n                styleClass=\"!size-8 !text-xs !bg-primary-100 !text-primary-700\"\n              ></mt-avatar>\n              <span class=\"flex min-w-0 flex-1 flex-col\">\n                <span class=\"truncate text-sm font-medium text-surface-800\">\n                  {{ cand.delegator.displayName }}\n                </span>\n                @if (cand.delegator.email) {\n                  <span class=\"truncate text-xs text-surface-500\">\n                    {{ cand.delegator.email }}\n                  </span>\n                }\n              </span>\n              <mt-icon\n                icon=\"arrow.arrow-right\"\n                styleClass=\"text-base text-surface-400\"\n              ></mt-icon>\n            </button>\n          }\n        </div>\n      }\n\n      @if (showManageLink()) {\n        <div class=\"border-t border-surface p-1.5\">\n          <a\n            [routerLink]=\"managePath()\"\n            (click)=\"onManage()\"\n            class=\"flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm text-surface-700 hover:bg-surface-100\"\n          >\n            <mt-icon icon=\"general.settings-02\" styleClass=\"text-base\"></mt-icon>\n            <span>{{ t(\"delegations.session.manage\") }}</span>\n          </a>\n        </div>\n      }\n    </div>\n  }\n</ng-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    <div class=\"flex w-full flex-col\">\n      @if (mode() === \"active\" && active(); as session) {\n        <!-- Active session -->\n        <div class=\"flex items-center gap-3 border-b border-surface px-4 py-3\">\n          <mt-avatar\n            [label]=\"initials(onBehalfOf())\"\n            shape=\"circle\"\n            styleClass=\"!size-9 !text-sm !bg-primary-100 !text-primary-700\"\n          ></mt-avatar>\n          <div class=\"flex min-w-0 flex-1 flex-col\">\n            <span\n              class=\"text-[0.625rem] font-medium uppercase text-surface-500\"\n            >\n              {{ t(\"delegations.session.actingOnBehalfOf\") }}\n            </span>\n            <span class=\"truncate text-sm font-semibold text-surface-900\">\n              {{ onBehalfOf()?.displayName }}\n            </span>\n            <span class=\"truncate text-xs text-surface-500\">\n              {{\n                t(\"delegations.session.executedBy\", {\n                  actualUserName: executedBy()?.displayName,\n                })\n              }}\n            </span>\n          </div>\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        </div>\n\n        <div class=\"flex flex-col p-1.5\">\n          <button\n            type=\"button\"\n            class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-100\"\n            (click)=\"endSession($event)\"\n          >\n            <mt-icon icon=\"arrow.arrow-left\" styleClass=\"text-base\"></mt-icon>\n            <span>{{ t(\"delegations.action.endSession\") }}</span>\n          </button>\n        </div>\n\n        @if (candidates().length > 1) {\n          <div class=\"border-t border-surface p-1.5\">\n            <div\n              class=\"px-2 pb-1 text-[0.625rem] font-medium uppercase text-surface-400\"\n            >\n              {{ t(\"delegations.session.switchToAnother\") }}\n            </div>\n            @for (cand of candidates(); track $index) {\n              @if (cand.delegationId !== session.delegation.delegationId) {\n                <button\n                  type=\"button\"\n                  class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\n                  [attr.aria-label]=\"\n                    t('delegations.action.switchSession') +\n                    ': ' +\n                    cand.delegator.displayName\n                  \"\n                  (click)=\"switchTo(cand, $event)\"\n                >\n                  <mt-avatar\n                    [label]=\"initials(cand.delegator)\"\n                    shape=\"circle\"\n                    styleClass=\"!size-8 !text-xs !bg-surface-100 !text-surface-600\"\n                  ></mt-avatar>\n                  <span\n                    class=\"min-w-0 flex-1 truncate text-sm font-medium text-surface-800\"\n                  >\n                    {{ cand.delegator.displayName }}\n                  </span>\n                  <mt-icon\n                    icon=\"arrow.switch-horizontal-01\"\n                    styleClass=\"text-base text-surface-400\"\n                  ></mt-icon>\n                </button>\n              }\n            }\n          </div>\n        }\n      } @else if (mode() === \"candidates\") {\n        <!-- Candidates available -->\n        <div class=\"border-b border-surface px-4 py-3\">\n          <div class=\"text-sm font-semibold text-surface-900\">\n            {{ t(\"delegations.session.youCanActAs\") }}\n          </div>\n          <div class=\"mt-0.5 text-xs text-surface-500\">\n            {{ t(\"delegations.session.chooseDelegatorHint\") }}\n          </div>\n        </div>\n        <div class=\"flex max-h-72 flex-col overflow-y-auto p-1.5\">\n          @for (cand of candidates(); track $index) {\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-3 rounded-lg px-2 py-2 text-start hover:bg-surface-100\"\n              [attr.aria-label]=\"\n                t('delegations.action.startSession') +\n                ': ' +\n                cand.delegator.displayName\n              \"\n              (click)=\"start(cand, $event)\"\n            >\n              <mt-avatar\n                [label]=\"initials(cand.delegator)\"\n                shape=\"circle\"\n                styleClass=\"!size-8 !text-xs !bg-primary-100 !text-primary-700\"\n              ></mt-avatar>\n              <span class=\"flex min-w-0 flex-1 flex-col\">\n                <span class=\"truncate text-sm font-medium text-surface-800\">\n                  {{ cand.delegator.displayName }}\n                </span>\n                @if (cand.delegator.email) {\n                  <span class=\"truncate text-xs text-surface-500\">\n                    {{ cand.delegator.email }}\n                  </span>\n                }\n              </span>\n              <mt-icon\n                icon=\"arrow.arrow-right\"\n                styleClass=\"text-base text-surface-400\"\n              ></mt-icon>\n            </button>\n          }\n        </div>\n      }\n\n      @if (showManageLink()) {\n        <div class=\"border-t border-surface p-1.5\">\n          <a\n            [routerLink]=\"managePath()\"\n            (click)=\"onManage()\"\n            class=\"flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm text-surface-700 hover:bg-surface-100\"\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      }\n    </div>\n  }\n</ng-container>\n" }]
         }], propDecorators: { managePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "managePath", required: false }] }], showManageLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "showManageLink", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
 
 /**
@@ -1498,11 +1380,11 @@ class RejectDelegationDialog {
         this.ref.close(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RejectDelegationDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: RejectDelegationDialog, isStandalone: true, selector: "mt-reject-delegation-dialog", inputs: { delegation: { classPropertyName: "delegation", publicName: "delegation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <div class=\"flex flex-col gap-1\">\r\n      <div class=\"text-sm text-surface-700\">\r\n        {{ t(\"delegations.confirm.reject\") }}\r\n      </div>\r\n      <mt-entity-preview\r\n        [data]=\"userEntity(delegation().delegator)\"\r\n      ></mt-entity-preview>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-1\">\r\n      <label class=\"text-sm font-medium text-surface-800\" for=\"mt-reject-reason\">\r\n        {{ t(\"delegations.form.rejectionReason\") }}\r\n        <span class=\"text-red-600\">*</span>\r\n      </label>\r\n      <textarea\r\n        id=\"mt-reject-reason\"\r\n        rows=\"3\"\r\n        class=\"w-full rounded-md border border-surface-300 px-3 py-2 text-sm focus:border-primary focus:outline-none\"\r\n        [class.border-red-400]=\"submitted() && !isValid()\"\r\n        [value]=\"reason()\"\r\n        (input)=\"onReasonInput($event)\"\r\n        [attr.aria-invalid]=\"submitted() && !isValid()\"\r\n        [placeholder]=\"t('delegations.form.rejectionReason')\"\r\n      ></textarea>\r\n      @if (submitted() && !isValid()) {\r\n        <span class=\"text-xs text-red-600\">\r\n          {{ t(\"delegations.form.rejectReasonRequired\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        [disabled]=\"isBusy()\"\r\n        (click)=\"cancel()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        color=\"danger\"\r\n        icon=\"general.x-close\"\r\n        [label]=\"t('delegations.action.reject')\"\r\n        [loading]=\"isBusy()\"\r\n        [disabled]=\"!isValid()\"\r\n        (click)=\"confirm()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: RejectDelegationDialog, isStandalone: true, selector: "mt-reject-delegation-dialog", inputs: { delegation: { classPropertyName: "delegation", publicName: "delegation", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <div class=\"flex flex-col gap-1\">\r\n      <div class=\"text-sm text-surface-700\">\r\n        {{ t(\"delegations.confirm.reject\") }}\r\n      </div>\r\n      <mt-entity-preview\r\n        [data]=\"userEntity(delegation().delegator)\"\r\n      ></mt-entity-preview>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-1\">\r\n      <label\r\n        class=\"text-sm font-medium text-surface-800\"\r\n        for=\"mt-reject-reason\"\r\n      >\r\n        {{ t(\"delegations.form.rejectionReason\") }}\r\n        <span class=\"text-red-600\">*</span>\r\n      </label>\r\n      <textarea\r\n        id=\"mt-reject-reason\"\r\n        rows=\"3\"\r\n        class=\"w-full rounded-md border border-surface-300 px-3 py-2 text-sm focus:border-primary focus:outline-none\"\r\n        [class.border-red-400]=\"submitted() && !isValid()\"\r\n        [value]=\"reason()\"\r\n        (input)=\"onReasonInput($event)\"\r\n        [attr.aria-invalid]=\"submitted() && !isValid()\"\r\n        [placeholder]=\"t('delegations.form.rejectionReason')\"\r\n      ></textarea>\r\n      @if (submitted() && !isValid()) {\r\n        <span class=\"text-xs text-red-600\">\r\n          {{ t(\"delegations.form.rejectReasonRequired\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        [disabled]=\"isBusy()\"\r\n        (click)=\"cancel()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        color=\"danger\"\r\n        icon=\"general.x-close\"\r\n        [label]=\"t('delegations.action.reject')\"\r\n        [loading]=\"isBusy()\"\r\n        [disabled]=\"!isValid()\"\r\n        (click)=\"confirm()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: RejectDelegationDialog, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-reject-delegation-dialog', imports: [CommonModule, Button, EntityPreview, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <div class=\"flex flex-col gap-1\">\r\n      <div class=\"text-sm text-surface-700\">\r\n        {{ t(\"delegations.confirm.reject\") }}\r\n      </div>\r\n      <mt-entity-preview\r\n        [data]=\"userEntity(delegation().delegator)\"\r\n      ></mt-entity-preview>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-1\">\r\n      <label class=\"text-sm font-medium text-surface-800\" for=\"mt-reject-reason\">\r\n        {{ t(\"delegations.form.rejectionReason\") }}\r\n        <span class=\"text-red-600\">*</span>\r\n      </label>\r\n      <textarea\r\n        id=\"mt-reject-reason\"\r\n        rows=\"3\"\r\n        class=\"w-full rounded-md border border-surface-300 px-3 py-2 text-sm focus:border-primary focus:outline-none\"\r\n        [class.border-red-400]=\"submitted() && !isValid()\"\r\n        [value]=\"reason()\"\r\n        (input)=\"onReasonInput($event)\"\r\n        [attr.aria-invalid]=\"submitted() && !isValid()\"\r\n        [placeholder]=\"t('delegations.form.rejectionReason')\"\r\n      ></textarea>\r\n      @if (submitted() && !isValid()) {\r\n        <span class=\"text-xs text-red-600\">\r\n          {{ t(\"delegations.form.rejectReasonRequired\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        [disabled]=\"isBusy()\"\r\n        (click)=\"cancel()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        color=\"danger\"\r\n        icon=\"general.x-close\"\r\n        [label]=\"t('delegations.action.reject')\"\r\n        [loading]=\"isBusy()\"\r\n        [disabled]=\"!isValid()\"\r\n        (click)=\"confirm()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'mt-reject-delegation-dialog', imports: [CommonModule, Button, EntityPreview, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4 p-2\">\r\n    <div class=\"flex flex-col gap-1\">\r\n      <div class=\"text-sm text-surface-700\">\r\n        {{ t(\"delegations.confirm.reject\") }}\r\n      </div>\r\n      <mt-entity-preview\r\n        [data]=\"userEntity(delegation().delegator)\"\r\n      ></mt-entity-preview>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-1\">\r\n      <label\r\n        class=\"text-sm font-medium text-surface-800\"\r\n        for=\"mt-reject-reason\"\r\n      >\r\n        {{ t(\"delegations.form.rejectionReason\") }}\r\n        <span class=\"text-red-600\">*</span>\r\n      </label>\r\n      <textarea\r\n        id=\"mt-reject-reason\"\r\n        rows=\"3\"\r\n        class=\"w-full rounded-md border border-surface-300 px-3 py-2 text-sm focus:border-primary focus:outline-none\"\r\n        [class.border-red-400]=\"submitted() && !isValid()\"\r\n        [value]=\"reason()\"\r\n        (input)=\"onReasonInput($event)\"\r\n        [attr.aria-invalid]=\"submitted() && !isValid()\"\r\n        [placeholder]=\"t('delegations.form.rejectionReason')\"\r\n      ></textarea>\r\n      @if (submitted() && !isValid()) {\r\n        <span class=\"text-xs text-red-600\">\r\n          {{ t(\"delegations.form.rejectReasonRequired\") }}\r\n        </span>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-surface-200\">\r\n      <mt-button\r\n        variant=\"outlined\"\r\n        color=\"secondary\"\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        [disabled]=\"isBusy()\"\r\n        (click)=\"cancel()\"\r\n      ></mt-button>\r\n      <mt-button\r\n        color=\"danger\"\r\n        icon=\"general.x-close\"\r\n        [label]=\"t('delegations.action.reject')\"\r\n        [loading]=\"isBusy()\"\r\n        [disabled]=\"!isValid()\"\r\n        (click)=\"confirm()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
         }], propDecorators: { delegation: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegation", required: true }] }] } });
 
 class Delegations {
@@ -1558,6 +1440,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{ selector: 'mt-delegations', imports: [Page, RouterOutlet, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <mt-page\n    [title]=\"t('delegations.title')\"\n    [avatarIcon]=\"'custom.hierarchy-structure'\"\n    [tabs]=\"tabs()\"\n    [activeTab]=\"activeTab()\"\n    [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-indigo-50)',\n      '--p-avatar-color': 'var(--p-indigo-700)',\n    }\"\n    (tabChange)=\"onTabChange($event)\"\n    (backButtonClick)=\"goBack()\"\n    backButton\n  >\n    <router-outlet />\n  </mt-page>\n</ng-container>\n" }]
         }], ctorParameters: () => [] });
 
+function isRecord$1(value) {
+    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$1(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$1(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 formatDelegationDisplayValue(value, preferredLanguage = 'en') {
+    return resolveDisplayValue(value, preferredLanguage) ?? '';
+}
+function formatDelegationTargetLabel(target, preferredLanguage = 'en') {
+    return resolveDisplayOrHumanizedKey(target, ['name', 'displayName', 'displayLabel', 'label'], target.targetKey, preferredLanguage);
+}
+function formatDelegationActionLabel(action, preferredLanguage = 'en') {
+    return resolveDisplayOrHumanizedKey(action, [
+        'name',
+        'displayName',
+        'displayLabel',
+        'operationDisplayName',
+        'operationLabel',
+        'label',
+    ], action.operationKey, preferredLanguage);
+}
+function formatDelegationScopeSummary(value, preferredLanguage = 'en') {
+    return formatDelegationDisplayValue(value, preferredLanguage);
+}
+
 const DEFAULT_SORT_ORDER = Number.MAX_SAFE_INTEGER;
 function toArray(value) {
     return Array.isArray(value) ? value : [];
@@ -1852,7 +1849,7 @@ function hasDelegationGrantableScope(options) {
     return (getDelegationPermissionTree(options).length > 0 ||
         getDelegationGrantableGroups(options).length > 0);
 }
-/** Stable selection key for an operation leaf — independent of accessibilities. */
+/** Stable selection key for an operation leaf, independent of accessibilities. */
 function delegationOperationNodeKey(grant) {
     return `op:${targetIdentity(grant.target)}::${grant.action.operationKey}`;
 }
@@ -2233,9 +2230,7 @@ class ScopePicker {
     }
     // --- Expansion ------------------------------------------------------------
     isExpanded(node) {
-        return this.searchTerm().trim()
-            ? true
-            : this.expandedKeys().has(node.key);
+        return this.searchTerm().trim() ? true : this.expandedKeys().has(node.key);
     }
     toggleExpand(node) {
         if (!node.children?.length) {
@@ -2413,7 +2408,7 @@ class ScopePicker {
         return this.activeLang() ?? this.transloco.getActiveLang();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ScopePicker, isStandalone: true, selector: "mt-scope-picker", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <!-- Reusable tri-state checkbox box -->\n  <ng-template #checkbox let-state=\"state\">\n    <span\n      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n      [class.border-primary-500]=\"state !== 'unchecked'\"\n      [class.bg-primary-500]=\"state !== 'unchecked'\"\n      [class.text-white]=\"state !== 'unchecked'\"\n      [class.border-surface-300]=\"state === 'unchecked'\"\n      [class.bg-surface-0]=\"state === 'unchecked'\"\n    >\n      @if (state === \"checked\") {\n        <svg\n          viewBox=\"0 0 16 16\"\n          class=\"size-3\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      } @else if (state === \"indeterminate\") {\n        <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\n      }\n    </span>\n  </ng-template>\n\n  <div class=\"flex flex-col gap-3\">\n    @if (isLoadingOptions()) {\n      <mt-card [paddingless]=\"true\">\n        <div class=\"flex flex-col gap-3 p-4\">\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\n            <p-skeleton height=\"2rem\"></p-skeleton>\n          }\n        </div>\n      </mt-card>\n    } @else {\n      @if (errorOptions(); as errorMessage) {\n        <div\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        >\n          {{ errorMessage }}\n        </div>\n      }\n\n      @if (!hasOptions() && !errorOptions()) {\n        <mt-card [paddingless]=\"true\">\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        </mt-card>\n      }\n\n      @if (hasOptions()) {\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\n          @if (hasAccessibility()) {\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\n              <mt-tabs\n                mode=\"underline\"\n                [(active)]=\"activeScopeTab\"\n                [options]=\"[\n                  {\n                    value: 'permissions',\n                    label: t('delegations.scope.permissionsTab'),\n                    badge: selectedCount() || null,\n                  },\n                  {\n                    value: 'accessibility',\n                    label: t('delegations.scope.accessibilityTitle'),\n                    badge: selectedAccessibilityCount() || null,\n                  },\n                ]\"\n                fluid\n              ></mt-tabs>\n            </div>\n          }\n\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\n            <!-- Toolbar: table-style search + clear -->\n            <div class=\"flex items-center gap-2 border-b border-surface px-3 py-2\">\n              <div class=\"min-w-0 flex-1\">\n                <mt-text-field\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\"\n                  icon=\"general.search-lg\"\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\n                ></mt-text-field>\n              </div>\n              @if (selectedCount() > 0) {\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\n                </span>\n                <mt-button\n                  variant=\"text\"\n                  size=\"small\"\n                  [label]=\"t('delegations.scope.clear')\"\n                  [disabled]=\"readonly()\"\n                  (click)=\"clearSelection()\"\n                ></mt-button>\n              }\n            </div>\n\n            <!-- Select-all header -->\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-2 border-b border-surface px-3 py-2 text-start hover:bg-surface-50\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                selectAllState() === 'indeterminate'\n                  ? 'mixed'\n                  : selectAllState() === 'checked'\n              \"\n              [disabled]=\"readonly()\"\n              (click)=\"toggleAll()\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"checkbox; context: { state: selectAllState() }\"\n              ></ng-container>\n              <span class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\">\n                {{ t(\"delegations.scope.selectAll\") }}\n              </span>\n            </button>\n\n            <!-- Virtualized permission tree -->\n            @if (visibleNodes().length > 0) {\n              <cdk-virtual-scroll-viewport\n                itemSize=\"40\"\n                class=\"block h-[20rem]\"\n              >\n                <div\n                  *cdkVirtualFor=\"\n                    let item of visibleNodes();\n                    trackBy: trackVisible\n                  \"\n                  class=\"group flex h-10 items-center gap-2 pe-2 transition-colors hover:bg-surface-50\"\n                  [style.padding-inline-start.rem]=\"0.5 + item.depth * 1.25\"\n                >\n                  @if (hasChildren(item.node)) {\n                    <button\n                      type=\"button\"\n                      class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\n                      [attr.aria-expanded]=\"isExpanded(item.node)\"\n                      [attr.aria-label]=\"nodeLabel(item.node)\"\n                      (click)=\"toggleExpand(item.node); $event.stopPropagation()\"\n                    >\n                      <mt-icon\n                        [icon]=\"\n                          isExpanded(item.node)\n                            ? 'arrow.chevron-down'\n                            : 'arrow.chevron-right'\n                        \"\n                        styleClass=\"text-base\"\n                      ></mt-icon>\n                    </button>\n                  } @else {\n                    <span class=\"size-6 shrink-0\"></span>\n                  }\n\n                  <button\n                    type=\"button\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"\n                      nodeState(item.node) === 'indeterminate'\n                        ? 'mixed'\n                        : nodeState(item.node) === 'checked'\n                    \"\n                    [attr.aria-label]=\"nodeLabel(item.node)\"\n                    class=\"shrink-0\"\n                    [class.cursor-pointer]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    (click)=\"toggle(item.node); $event.stopPropagation()\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        checkbox;\n                        context: { state: nodeState(item.node) }\n                      \"\n                    ></ng-container>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\n                    (click)=\"onRowClick(item.node)\"\n                  >\n                    <span\n                      class=\"truncate text-sm\"\n                      [class.font-semibold]=\"item.node.kind === 'template'\"\n                      [class.text-surface-900]=\"item.node.kind === 'template'\"\n                      [class.font-medium]=\"\n                        item.node.kind === 'level' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        item.node.kind === 'level' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\n                    >\n                      {{ nodeLabel(item.node) }}\n                    </span>\n                    @if (item.node.kind === \"operation\" && item.node.isHighRisk) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n                      >\n                        {{ t(\"delegations.scope.highRisk\") }}\n                      </span>\n                    }\n                  </button>\n                </div>\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                {{ t(\"components.table.no-data-found\") }}\n              </p>\n            }\n          } @else {\n            <!-- App accessibility -->\n            <div class=\"flex flex-col gap-3 p-4\">\n              <p class=\"text-xs text-surface-500\">\n                {{ t(\"delegations.scope.accessibilityHint\") }}\n              </p>\n              <div class=\"flex flex-wrap gap-2\">\n                @for (item of appAccessibilities(); track item.accessibilityKey) {\n                  @let selected = isAccessibilitySelected(item.accessibilityKey);\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\n                    [class.border-primary-400]=\"selected\"\n                    [class.bg-primary-50]=\"selected\"\n                    [class.text-primary-700]=\"selected\"\n                    [class.border-surface-200]=\"!selected\"\n                    [class.text-surface-600]=\"!selected\"\n                    [class.hover:border-primary-300]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    [attr.aria-pressed]=\"selected\"\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\n                  >\n                    <span\n                      class=\"inline-flex size-1.5 rounded-full\"\n                      [class.bg-primary-500]=\"selected\"\n                      [class.bg-surface-300]=\"!selected\"\n                    ></span>\n                    {{ accessibilityLabel(item) }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </mt-card>\n      }\n\n      <!-- Compact live scope preview -->\n      <div\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center gap-2 text-xs\">\n          <span class=\"shrink-0 font-semibold text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}:\n          </span>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\n          } @else if (preview(); as p) {\n            @if (p.isValid) {\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\n                {{\n                  getPreviewSummary(p.summary) ||\n                    t(\"delegations.column.scopeSummary\")\n                }}\n              </span>\n            } @else {\n              <span class=\"font-medium text-red-700\">\n                {{ t(\"delegations.scope.previewInvalid\") }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </span>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\">\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ScopePicker, isStandalone: true, selector: "mt-scope-picker", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <!-- Reusable tri-state checkbox box -->\n  <ng-template #checkbox let-state=\"state\">\n    <span\n      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n      [class.border-primary-500]=\"state !== 'unchecked'\"\n      [class.bg-primary-500]=\"state !== 'unchecked'\"\n      [class.text-white]=\"state !== 'unchecked'\"\n      [class.border-surface-300]=\"state === 'unchecked'\"\n      [class.bg-surface-0]=\"state === 'unchecked'\"\n    >\n      @if (state === \"checked\") {\n        <svg\n          viewBox=\"0 0 16 16\"\n          class=\"size-3\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      } @else if (state === \"indeterminate\") {\n        <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\n      }\n    </span>\n  </ng-template>\n\n  <div class=\"flex flex-col gap-3\">\n    @if (isLoadingOptions()) {\n      <mt-card [paddingless]=\"true\">\n        <div class=\"flex flex-col gap-3 p-4\">\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\n            <p-skeleton height=\"2rem\"></p-skeleton>\n          }\n        </div>\n      </mt-card>\n    } @else {\n      @if (errorOptions(); as errorMessage) {\n        <div\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        >\n          {{ errorMessage }}\n        </div>\n      }\n\n      @if (!hasOptions() && !errorOptions()) {\n        <mt-card [paddingless]=\"true\">\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        </mt-card>\n      }\n\n      @if (hasOptions()) {\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\n          @if (hasAccessibility()) {\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\n              <mt-tabs\n                mode=\"underline\"\n                [(active)]=\"activeScopeTab\"\n                [options]=\"[\n                  {\n                    value: 'permissions',\n                    label: t('delegations.scope.permissionsTab'),\n                    badge: selectedCount() || null,\n                  },\n                  {\n                    value: 'accessibility',\n                    label: t('delegations.scope.accessibilityTitle'),\n                    badge: selectedAccessibilityCount() || null,\n                  },\n                ]\"\n                fluid\n              ></mt-tabs>\n            </div>\n          }\n\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\n            <!-- Toolbar: table-style search + clear -->\n            <div\n              class=\"flex items-center gap-2 border-b border-surface px-3 py-2\"\n            >\n              <div class=\"min-w-0 flex-1\">\n                <mt-text-field\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\"\n                  icon=\"general.search-lg\"\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\n                ></mt-text-field>\n              </div>\n              @if (selectedCount() > 0) {\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\n                </span>\n                <mt-button\n                  variant=\"text\"\n                  size=\"small\"\n                  [label]=\"t('delegations.scope.clear')\"\n                  [disabled]=\"readonly()\"\n                  (click)=\"clearSelection()\"\n                ></mt-button>\n              }\n            </div>\n\n            <!-- Select-all header -->\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-2 border-b border-surface px-3 py-2 text-start hover:bg-surface-50\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                selectAllState() === 'indeterminate'\n                  ? 'mixed'\n                  : selectAllState() === 'checked'\n              \"\n              [disabled]=\"readonly()\"\n              (click)=\"toggleAll()\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  checkbox;\n                  context: { state: selectAllState() }\n                \"\n              ></ng-container>\n              <span\n                class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\"\n              >\n                {{ t(\"delegations.scope.selectAll\") }}\n              </span>\n            </button>\n\n            <!-- Virtualized permission tree -->\n            @if (visibleNodes().length > 0) {\n              <cdk-virtual-scroll-viewport\n                itemSize=\"40\"\n                class=\"block h-[20rem]\"\n              >\n                <div\n                  *cdkVirtualFor=\"\n                    let item of visibleNodes();\n                    trackBy: trackVisible\n                  \"\n                  class=\"group flex h-10 items-center gap-2 pe-2 transition-colors hover:bg-surface-50\"\n                  [style.padding-inline-start.rem]=\"0.5 + item.depth * 1.25\"\n                >\n                  @if (hasChildren(item.node)) {\n                    <button\n                      type=\"button\"\n                      class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\n                      [attr.aria-expanded]=\"isExpanded(item.node)\"\n                      [attr.aria-label]=\"nodeLabel(item.node)\"\n                      (click)=\"\n                        toggleExpand(item.node); $event.stopPropagation()\n                      \"\n                    >\n                      <mt-icon\n                        [icon]=\"\n                          isExpanded(item.node)\n                            ? 'arrow.chevron-down'\n                            : 'arrow.chevron-right'\n                        \"\n                        styleClass=\"text-base\"\n                      ></mt-icon>\n                    </button>\n                  } @else {\n                    <span class=\"size-6 shrink-0\"></span>\n                  }\n\n                  <button\n                    type=\"button\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"\n                      nodeState(item.node) === 'indeterminate'\n                        ? 'mixed'\n                        : nodeState(item.node) === 'checked'\n                    \"\n                    [attr.aria-label]=\"nodeLabel(item.node)\"\n                    class=\"shrink-0\"\n                    [class.cursor-pointer]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    (click)=\"toggle(item.node); $event.stopPropagation()\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        checkbox;\n                        context: { state: nodeState(item.node) }\n                      \"\n                    ></ng-container>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\n                    (click)=\"onRowClick(item.node)\"\n                  >\n                    <span\n                      class=\"truncate text-sm\"\n                      [class.font-semibold]=\"item.node.kind === 'template'\"\n                      [class.text-surface-900]=\"item.node.kind === 'template'\"\n                      [class.font-medium]=\"\n                        item.node.kind === 'level' ||\n                        item.node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        item.node.kind === 'level' ||\n                        item.node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\n                    >\n                      {{ nodeLabel(item.node) }}\n                    </span>\n                    @if (\n                      item.node.kind === \"operation\" && item.node.isHighRisk\n                    ) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n                      >\n                        {{ t(\"delegations.scope.highRisk\") }}\n                      </span>\n                    }\n                  </button>\n                </div>\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                {{ t(\"components.table.no-data-found\") }}\n              </p>\n            }\n          } @else {\n            <!-- App accessibility -->\n            <div class=\"flex flex-col gap-3 p-4\">\n              <p class=\"text-xs text-surface-500\">\n                {{ t(\"delegations.scope.accessibilityHint\") }}\n              </p>\n              <div class=\"flex flex-wrap gap-2\">\n                @for (\n                  item of appAccessibilities();\n                  track item.accessibilityKey\n                ) {\n                  @let selected =\n                    isAccessibilitySelected(item.accessibilityKey);\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\n                    [class.border-primary-400]=\"selected\"\n                    [class.bg-primary-50]=\"selected\"\n                    [class.text-primary-700]=\"selected\"\n                    [class.border-surface-200]=\"!selected\"\n                    [class.text-surface-600]=\"!selected\"\n                    [class.hover:border-primary-300]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    [attr.aria-pressed]=\"selected\"\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\n                  >\n                    <span\n                      class=\"inline-flex size-1.5 rounded-full\"\n                      [class.bg-primary-500]=\"selected\"\n                      [class.bg-surface-300]=\"!selected\"\n                    ></span>\n                    {{ accessibilityLabel(item) }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </mt-card>\n      }\n\n      <!-- Compact live scope preview -->\n      <div\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center gap-2 text-xs\">\n          <span class=\"shrink-0 font-semibold text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}:\n          </span>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\n          } @else if (preview(); as p) {\n            @if (p.isValid) {\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\n                {{\n                  getPreviewSummary(p.summary) ||\n                    t(\"delegations.column.scopeSummary\")\n                }}\n              </span>\n            } @else {\n              <span class=\"font-medium text-red-700\">\n                {{ t(\"delegations.scope.previewInvalid\") }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </span>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.warnings.length > 0) {\n            <ul\n              class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\"\n            >\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, decorators: [{
             type: Component,
@@ -2428,7 +2423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         TextField,
                         SkeletonModule,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <!-- Reusable tri-state checkbox box -->\n  <ng-template #checkbox let-state=\"state\">\n    <span\n      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n      [class.border-primary-500]=\"state !== 'unchecked'\"\n      [class.bg-primary-500]=\"state !== 'unchecked'\"\n      [class.text-white]=\"state !== 'unchecked'\"\n      [class.border-surface-300]=\"state === 'unchecked'\"\n      [class.bg-surface-0]=\"state === 'unchecked'\"\n    >\n      @if (state === \"checked\") {\n        <svg\n          viewBox=\"0 0 16 16\"\n          class=\"size-3\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      } @else if (state === \"indeterminate\") {\n        <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\n      }\n    </span>\n  </ng-template>\n\n  <div class=\"flex flex-col gap-3\">\n    @if (isLoadingOptions()) {\n      <mt-card [paddingless]=\"true\">\n        <div class=\"flex flex-col gap-3 p-4\">\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\n            <p-skeleton height=\"2rem\"></p-skeleton>\n          }\n        </div>\n      </mt-card>\n    } @else {\n      @if (errorOptions(); as errorMessage) {\n        <div\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        >\n          {{ errorMessage }}\n        </div>\n      }\n\n      @if (!hasOptions() && !errorOptions()) {\n        <mt-card [paddingless]=\"true\">\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        </mt-card>\n      }\n\n      @if (hasOptions()) {\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\n          @if (hasAccessibility()) {\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\n              <mt-tabs\n                mode=\"underline\"\n                [(active)]=\"activeScopeTab\"\n                [options]=\"[\n                  {\n                    value: 'permissions',\n                    label: t('delegations.scope.permissionsTab'),\n                    badge: selectedCount() || null,\n                  },\n                  {\n                    value: 'accessibility',\n                    label: t('delegations.scope.accessibilityTitle'),\n                    badge: selectedAccessibilityCount() || null,\n                  },\n                ]\"\n                fluid\n              ></mt-tabs>\n            </div>\n          }\n\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\n            <!-- Toolbar: table-style search + clear -->\n            <div class=\"flex items-center gap-2 border-b border-surface px-3 py-2\">\n              <div class=\"min-w-0 flex-1\">\n                <mt-text-field\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\"\n                  icon=\"general.search-lg\"\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\n                ></mt-text-field>\n              </div>\n              @if (selectedCount() > 0) {\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\n                </span>\n                <mt-button\n                  variant=\"text\"\n                  size=\"small\"\n                  [label]=\"t('delegations.scope.clear')\"\n                  [disabled]=\"readonly()\"\n                  (click)=\"clearSelection()\"\n                ></mt-button>\n              }\n            </div>\n\n            <!-- Select-all header -->\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-2 border-b border-surface px-3 py-2 text-start hover:bg-surface-50\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                selectAllState() === 'indeterminate'\n                  ? 'mixed'\n                  : selectAllState() === 'checked'\n              \"\n              [disabled]=\"readonly()\"\n              (click)=\"toggleAll()\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"checkbox; context: { state: selectAllState() }\"\n              ></ng-container>\n              <span class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\">\n                {{ t(\"delegations.scope.selectAll\") }}\n              </span>\n            </button>\n\n            <!-- Virtualized permission tree -->\n            @if (visibleNodes().length > 0) {\n              <cdk-virtual-scroll-viewport\n                itemSize=\"40\"\n                class=\"block h-[20rem]\"\n              >\n                <div\n                  *cdkVirtualFor=\"\n                    let item of visibleNodes();\n                    trackBy: trackVisible\n                  \"\n                  class=\"group flex h-10 items-center gap-2 pe-2 transition-colors hover:bg-surface-50\"\n                  [style.padding-inline-start.rem]=\"0.5 + item.depth * 1.25\"\n                >\n                  @if (hasChildren(item.node)) {\n                    <button\n                      type=\"button\"\n                      class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\n                      [attr.aria-expanded]=\"isExpanded(item.node)\"\n                      [attr.aria-label]=\"nodeLabel(item.node)\"\n                      (click)=\"toggleExpand(item.node); $event.stopPropagation()\"\n                    >\n                      <mt-icon\n                        [icon]=\"\n                          isExpanded(item.node)\n                            ? 'arrow.chevron-down'\n                            : 'arrow.chevron-right'\n                        \"\n                        styleClass=\"text-base\"\n                      ></mt-icon>\n                    </button>\n                  } @else {\n                    <span class=\"size-6 shrink-0\"></span>\n                  }\n\n                  <button\n                    type=\"button\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"\n                      nodeState(item.node) === 'indeterminate'\n                        ? 'mixed'\n                        : nodeState(item.node) === 'checked'\n                    \"\n                    [attr.aria-label]=\"nodeLabel(item.node)\"\n                    class=\"shrink-0\"\n                    [class.cursor-pointer]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    (click)=\"toggle(item.node); $event.stopPropagation()\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        checkbox;\n                        context: { state: nodeState(item.node) }\n                      \"\n                    ></ng-container>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\n                    (click)=\"onRowClick(item.node)\"\n                  >\n                    <span\n                      class=\"truncate text-sm\"\n                      [class.font-semibold]=\"item.node.kind === 'template'\"\n                      [class.text-surface-900]=\"item.node.kind === 'template'\"\n                      [class.font-medium]=\"\n                        item.node.kind === 'level' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        item.node.kind === 'level' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\n                    >\n                      {{ nodeLabel(item.node) }}\n                    </span>\n                    @if (item.node.kind === \"operation\" && item.node.isHighRisk) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n                      >\n                        {{ t(\"delegations.scope.highRisk\") }}\n                      </span>\n                    }\n                  </button>\n                </div>\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                {{ t(\"components.table.no-data-found\") }}\n              </p>\n            }\n          } @else {\n            <!-- App accessibility -->\n            <div class=\"flex flex-col gap-3 p-4\">\n              <p class=\"text-xs text-surface-500\">\n                {{ t(\"delegations.scope.accessibilityHint\") }}\n              </p>\n              <div class=\"flex flex-wrap gap-2\">\n                @for (item of appAccessibilities(); track item.accessibilityKey) {\n                  @let selected = isAccessibilitySelected(item.accessibilityKey);\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\n                    [class.border-primary-400]=\"selected\"\n                    [class.bg-primary-50]=\"selected\"\n                    [class.text-primary-700]=\"selected\"\n                    [class.border-surface-200]=\"!selected\"\n                    [class.text-surface-600]=\"!selected\"\n                    [class.hover:border-primary-300]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    [attr.aria-pressed]=\"selected\"\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\n                  >\n                    <span\n                      class=\"inline-flex size-1.5 rounded-full\"\n                      [class.bg-primary-500]=\"selected\"\n                      [class.bg-surface-300]=\"!selected\"\n                    ></span>\n                    {{ accessibilityLabel(item) }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </mt-card>\n      }\n\n      <!-- Compact live scope preview -->\n      <div\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center gap-2 text-xs\">\n          <span class=\"shrink-0 font-semibold text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}:\n          </span>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\n          } @else if (preview(); as p) {\n            @if (p.isValid) {\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\n                {{\n                  getPreviewSummary(p.summary) ||\n                    t(\"delegations.column.scopeSummary\")\n                }}\n              </span>\n            } @else {\n              <span class=\"font-medium text-red-700\">\n                {{ t(\"delegations.scope.previewInvalid\") }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </span>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\">\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <!-- Reusable tri-state checkbox box -->\n  <ng-template #checkbox let-state=\"state\">\n    <span\n      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n      [class.border-primary-500]=\"state !== 'unchecked'\"\n      [class.bg-primary-500]=\"state !== 'unchecked'\"\n      [class.text-white]=\"state !== 'unchecked'\"\n      [class.border-surface-300]=\"state === 'unchecked'\"\n      [class.bg-surface-0]=\"state === 'unchecked'\"\n    >\n      @if (state === \"checked\") {\n        <svg\n          viewBox=\"0 0 16 16\"\n          class=\"size-3\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      } @else if (state === \"indeterminate\") {\n        <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\n      }\n    </span>\n  </ng-template>\n\n  <div class=\"flex flex-col gap-3\">\n    @if (isLoadingOptions()) {\n      <mt-card [paddingless]=\"true\">\n        <div class=\"flex flex-col gap-3 p-4\">\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\n            <p-skeleton height=\"2rem\"></p-skeleton>\n          }\n        </div>\n      </mt-card>\n    } @else {\n      @if (errorOptions(); as errorMessage) {\n        <div\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        >\n          {{ errorMessage }}\n        </div>\n      }\n\n      @if (!hasOptions() && !errorOptions()) {\n        <mt-card [paddingless]=\"true\">\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        </mt-card>\n      }\n\n      @if (hasOptions()) {\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\n          @if (hasAccessibility()) {\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\n              <mt-tabs\n                mode=\"underline\"\n                [(active)]=\"activeScopeTab\"\n                [options]=\"[\n                  {\n                    value: 'permissions',\n                    label: t('delegations.scope.permissionsTab'),\n                    badge: selectedCount() || null,\n                  },\n                  {\n                    value: 'accessibility',\n                    label: t('delegations.scope.accessibilityTitle'),\n                    badge: selectedAccessibilityCount() || null,\n                  },\n                ]\"\n                fluid\n              ></mt-tabs>\n            </div>\n          }\n\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\n            <!-- Toolbar: table-style search + clear -->\n            <div\n              class=\"flex items-center gap-2 border-b border-surface px-3 py-2\"\n            >\n              <div class=\"min-w-0 flex-1\">\n                <mt-text-field\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\"\n                  icon=\"general.search-lg\"\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\n                ></mt-text-field>\n              </div>\n              @if (selectedCount() > 0) {\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\n                </span>\n                <mt-button\n                  variant=\"text\"\n                  size=\"small\"\n                  [label]=\"t('delegations.scope.clear')\"\n                  [disabled]=\"readonly()\"\n                  (click)=\"clearSelection()\"\n                ></mt-button>\n              }\n            </div>\n\n            <!-- Select-all header -->\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-2 border-b border-surface px-3 py-2 text-start hover:bg-surface-50\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                selectAllState() === 'indeterminate'\n                  ? 'mixed'\n                  : selectAllState() === 'checked'\n              \"\n              [disabled]=\"readonly()\"\n              (click)=\"toggleAll()\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  checkbox;\n                  context: { state: selectAllState() }\n                \"\n              ></ng-container>\n              <span\n                class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\"\n              >\n                {{ t(\"delegations.scope.selectAll\") }}\n              </span>\n            </button>\n\n            <!-- Virtualized permission tree -->\n            @if (visibleNodes().length > 0) {\n              <cdk-virtual-scroll-viewport\n                itemSize=\"40\"\n                class=\"block h-[20rem]\"\n              >\n                <div\n                  *cdkVirtualFor=\"\n                    let item of visibleNodes();\n                    trackBy: trackVisible\n                  \"\n                  class=\"group flex h-10 items-center gap-2 pe-2 transition-colors hover:bg-surface-50\"\n                  [style.padding-inline-start.rem]=\"0.5 + item.depth * 1.25\"\n                >\n                  @if (hasChildren(item.node)) {\n                    <button\n                      type=\"button\"\n                      class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\n                      [attr.aria-expanded]=\"isExpanded(item.node)\"\n                      [attr.aria-label]=\"nodeLabel(item.node)\"\n                      (click)=\"\n                        toggleExpand(item.node); $event.stopPropagation()\n                      \"\n                    >\n                      <mt-icon\n                        [icon]=\"\n                          isExpanded(item.node)\n                            ? 'arrow.chevron-down'\n                            : 'arrow.chevron-right'\n                        \"\n                        styleClass=\"text-base\"\n                      ></mt-icon>\n                    </button>\n                  } @else {\n                    <span class=\"size-6 shrink-0\"></span>\n                  }\n\n                  <button\n                    type=\"button\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"\n                      nodeState(item.node) === 'indeterminate'\n                        ? 'mixed'\n                        : nodeState(item.node) === 'checked'\n                    \"\n                    [attr.aria-label]=\"nodeLabel(item.node)\"\n                    class=\"shrink-0\"\n                    [class.cursor-pointer]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    (click)=\"toggle(item.node); $event.stopPropagation()\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        checkbox;\n                        context: { state: nodeState(item.node) }\n                      \"\n                    ></ng-container>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\n                    (click)=\"onRowClick(item.node)\"\n                  >\n                    <span\n                      class=\"truncate text-sm\"\n                      [class.font-semibold]=\"item.node.kind === 'template'\"\n                      [class.text-surface-900]=\"item.node.kind === 'template'\"\n                      [class.font-medium]=\"\n                        item.node.kind === 'level' ||\n                        item.node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        item.node.kind === 'level' ||\n                        item.node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\n                    >\n                      {{ nodeLabel(item.node) }}\n                    </span>\n                    @if (\n                      item.node.kind === \"operation\" && item.node.isHighRisk\n                    ) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n                      >\n                        {{ t(\"delegations.scope.highRisk\") }}\n                      </span>\n                    }\n                  </button>\n                </div>\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                {{ t(\"components.table.no-data-found\") }}\n              </p>\n            }\n          } @else {\n            <!-- App accessibility -->\n            <div class=\"flex flex-col gap-3 p-4\">\n              <p class=\"text-xs text-surface-500\">\n                {{ t(\"delegations.scope.accessibilityHint\") }}\n              </p>\n              <div class=\"flex flex-wrap gap-2\">\n                @for (\n                  item of appAccessibilities();\n                  track item.accessibilityKey\n                ) {\n                  @let selected =\n                    isAccessibilitySelected(item.accessibilityKey);\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\n                    [class.border-primary-400]=\"selected\"\n                    [class.bg-primary-50]=\"selected\"\n                    [class.text-primary-700]=\"selected\"\n                    [class.border-surface-200]=\"!selected\"\n                    [class.text-surface-600]=\"!selected\"\n                    [class.hover:border-primary-300]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    [attr.aria-pressed]=\"selected\"\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\n                  >\n                    <span\n                      class=\"inline-flex size-1.5 rounded-full\"\n                      [class.bg-primary-500]=\"selected\"\n                      [class.bg-surface-300]=\"!selected\"\n                    ></span>\n                    {{ accessibilityLabel(item) }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </mt-card>\n      }\n\n      <!-- Compact live scope preview -->\n      <div\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center gap-2 text-xs\">\n          <span class=\"shrink-0 font-semibold text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}:\n          </span>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\n          } @else if (preview(); as p) {\n            @if (p.isValid) {\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\n                {{\n                  getPreviewSummary(p.summary) ||\n                    t(\"delegations.column.scopeSummary\")\n                }}\n              </span>\n            } @else {\n              <span class=\"font-medium text-red-700\">\n                {{ t(\"delegations.scope.previewInvalid\") }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </span>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.warnings.length > 0) {\n            <ul\n              class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\"\n            >\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }, { type: i0.Output, args: ["scopeChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], delegatorUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegatorUserId", required: false }] }] } });
 
 const EMPTY_SCOPE = { grants: [], metadata: {} };
@@ -2829,7 +2824,7 @@ class DelegationForm {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationForm, isStandalone: true, selector: "mt-delegation-form", inputs: { delegationForEdit: { classPropertyName: "delegationForEdit", publicName: "delegationForEdit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\n      modal.contentClass\n    \"\n  >\n    <div\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-[minmax(0,28rem)_minmax(0,1fr)] lg:items-start\"\n    >\n      <section\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\n      >\n        <mt-dynamic-form\n          [formConfig]=\"formConfig()\"\n          [formControl]=\"delegationFormControl\"\n        />\n      </section>\n\n      <section class=\"flex min-h-0 flex-col gap-3\">\n        <div class=\"flex flex-col gap-1\">\n          <h3 class=\"text-xl font-semibold text-surface-900\">\n            {{ t(\"delegations.scope.permissionsTitle\") }}\n          </h3>\n          <p class=\"text-sm text-surface-500\">\n            {{\n              adminMode() && !showScopePicker()\n                ? t(\"delegations.form.selectDelegatorFirst\")\n                : t(\"delegations.scope.permissionsSubtitle\")\n            }}\n          </p>\n        </div>\n\n        @if (showScopePicker()) {\n          <mt-scope-picker\n            [(scope)]=\"scope\"\n            [readonly]=\"readonly()\"\n            [adminMode]=\"adminMode()\"\n            [delegatorUserId]=\"selectedDelegatorId()\"\n          ></mt-scope-picker>\n        } @else {\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-10\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"40\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M22 28H42\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M22 36H34\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <circle\n                  cx=\"45\"\n                  cy=\"20\"\n                  r=\"7\"\n                  class=\"fill-surface-0 stroke-primary\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M45 17V23\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M42 20H48\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\n              </p>\n            </div>\n          </div>\n        }\n      </section>\n    </div>\n\n    <div [class]=\"modal.footerClass\">\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n        styleClass=\"w-full sm:w-auto\"\n      />\n      @if (!readonly()) {\n        <mt-button\n          [label]=\"\n            delegationForEdit()\n              ? t('delegations.common.update')\n              : t('delegations.common.create')\n          \"\n          [loading]=\"isSaving()\"\n          [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\n          (click)=\"onSubmit()\"\n          styleClass=\"w-full sm:w-auto\"\n        />\n      }\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScopePicker, selector: "mt-scope-picker", inputs: ["scope", "readonly", "adminMode", "delegatorUserId"], outputs: ["scopeChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationForm, isStandalone: true, selector: "mt-delegation-form", inputs: { delegationForEdit: { classPropertyName: "delegationForEdit", publicName: "delegationForEdit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div\r\n    [class]=\"\r\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    <div\r\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-2 lg:items-start\"\r\n    >\r\n      <section\r\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\r\n      >\r\n        <mt-dynamic-form\r\n          [formConfig]=\"formConfig()\"\r\n          [formControl]=\"delegationFormControl\"\r\n        />\r\n      </section>\r\n\r\n      <section class=\"flex min-h-0 flex-col gap-3\">\r\n        <div class=\"flex flex-col gap-1\">\r\n          <h3 class=\"text-xl font-semibold text-surface-900\">\r\n            {{ t(\"delegations.scope.permissionsTitle\") }}\r\n          </h3>\r\n          <p class=\"text-sm text-surface-500\">\r\n            {{\r\n              adminMode() && !showScopePicker()\r\n                ? t(\"delegations.form.selectDelegatorFirst\")\r\n                : t(\"delegations.scope.permissionsSubtitle\")\r\n            }}\r\n          </p>\r\n        </div>\r\n\r\n        @if (showScopePicker()) {\r\n          <mt-scope-picker\r\n            [(scope)]=\"scope\"\r\n            [readonly]=\"readonly()\"\r\n            [adminMode]=\"adminMode()\"\r\n            [delegatorUserId]=\"selectedDelegatorId()\"\r\n          ></mt-scope-picker>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-10\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"12\"\r\n                  width=\"44\"\r\n                  height=\"40\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M22 28H42\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M22 36H34\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <circle\r\n                  cx=\"45\"\r\n                  cy=\"20\"\r\n                  r=\"7\"\r\n                  class=\"fill-surface-0 stroke-primary\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M45 17V23\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M42 20H48\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"space-y-1\">\r\n              <p class=\"text-base font-medium text-surface-900\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </p>\r\n              <p class=\"text-sm text-surface-500\">\r\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n      </section>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('delegations.common.cancel')\"\r\n      variant=\"outlined\"\r\n      (click)=\"ref.close()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n    />\r\n    @if (!readonly()) {\r\n      <mt-button\r\n        [label]=\"\r\n          delegationForEdit()\r\n            ? t('delegations.common.update')\r\n            : t('delegations.common.create')\r\n        \"\r\n        [loading]=\"isSaving()\"\r\n        [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\r\n        (click)=\"onSubmit()\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n      />\r\n    }\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScopePicker, selector: "mt-scope-picker", inputs: ["scope", "readonly", "adminMode", "delegatorUserId"], outputs: ["scopeChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationForm, decorators: [{
             type: Component,
@@ -2840,11 +2835,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ReactiveFormsModule,
                         ScopePicker,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\n      modal.contentClass\n    \"\n  >\n    <div\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-[minmax(0,28rem)_minmax(0,1fr)] lg:items-start\"\n    >\n      <section\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\n      >\n        <mt-dynamic-form\n          [formConfig]=\"formConfig()\"\n          [formControl]=\"delegationFormControl\"\n        />\n      </section>\n\n      <section class=\"flex min-h-0 flex-col gap-3\">\n        <div class=\"flex flex-col gap-1\">\n          <h3 class=\"text-xl font-semibold text-surface-900\">\n            {{ t(\"delegations.scope.permissionsTitle\") }}\n          </h3>\n          <p class=\"text-sm text-surface-500\">\n            {{\n              adminMode() && !showScopePicker()\n                ? t(\"delegations.form.selectDelegatorFirst\")\n                : t(\"delegations.scope.permissionsSubtitle\")\n            }}\n          </p>\n        </div>\n\n        @if (showScopePicker()) {\n          <mt-scope-picker\n            [(scope)]=\"scope\"\n            [readonly]=\"readonly()\"\n            [adminMode]=\"adminMode()\"\n            [delegatorUserId]=\"selectedDelegatorId()\"\n          ></mt-scope-picker>\n        } @else {\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-10\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"40\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M22 28H42\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M22 36H34\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <circle\n                  cx=\"45\"\n                  cy=\"20\"\n                  r=\"7\"\n                  class=\"fill-surface-0 stroke-primary\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M45 17V23\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M42 20H48\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\n              </p>\n            </div>\n          </div>\n        }\n      </section>\n    </div>\n\n    <div [class]=\"modal.footerClass\">\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n        styleClass=\"w-full sm:w-auto\"\n      />\n      @if (!readonly()) {\n        <mt-button\n          [label]=\"\n            delegationForEdit()\n              ? t('delegations.common.update')\n              : t('delegations.common.create')\n          \"\n          [loading]=\"isSaving()\"\n          [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\n          (click)=\"onSubmit()\"\n          styleClass=\"w-full sm:w-auto\"\n        />\n      }\n    </div>\n  </div>\n</ng-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div\r\n    [class]=\"\r\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    <div\r\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-2 lg:items-start\"\r\n    >\r\n      <section\r\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\r\n      >\r\n        <mt-dynamic-form\r\n          [formConfig]=\"formConfig()\"\r\n          [formControl]=\"delegationFormControl\"\r\n        />\r\n      </section>\r\n\r\n      <section class=\"flex min-h-0 flex-col gap-3\">\r\n        <div class=\"flex flex-col gap-1\">\r\n          <h3 class=\"text-xl font-semibold text-surface-900\">\r\n            {{ t(\"delegations.scope.permissionsTitle\") }}\r\n          </h3>\r\n          <p class=\"text-sm text-surface-500\">\r\n            {{\r\n              adminMode() && !showScopePicker()\r\n                ? t(\"delegations.form.selectDelegatorFirst\")\r\n                : t(\"delegations.scope.permissionsSubtitle\")\r\n            }}\r\n          </p>\r\n        </div>\r\n\r\n        @if (showScopePicker()) {\r\n          <mt-scope-picker\r\n            [(scope)]=\"scope\"\r\n            [readonly]=\"readonly()\"\r\n            [adminMode]=\"adminMode()\"\r\n            [delegatorUserId]=\"selectedDelegatorId()\"\r\n          ></mt-scope-picker>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-10\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"12\"\r\n                  width=\"44\"\r\n                  height=\"40\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M22 28H42\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M22 36H34\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <circle\r\n                  cx=\"45\"\r\n                  cy=\"20\"\r\n                  r=\"7\"\r\n                  class=\"fill-surface-0 stroke-primary\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M45 17V23\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M42 20H48\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"space-y-1\">\r\n              <p class=\"text-base font-medium text-surface-900\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </p>\r\n              <p class=\"text-sm text-surface-500\">\r\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n      </section>\r\n    </div>\r\n  </div>\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('delegations.common.cancel')\"\r\n      variant=\"outlined\"\r\n      (click)=\"ref.close()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n    />\r\n    @if (!readonly()) {\r\n      <mt-button\r\n        [label]=\"\r\n          delegationForEdit()\r\n            ? t('delegations.common.update')\r\n            : t('delegations.common.create')\r\n        \"\r\n        [loading]=\"isSaving()\"\r\n        [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\r\n        (click)=\"onSubmit()\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n      />\r\n    }\r\n  </div>\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { delegationForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegationForEdit", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }] } });
 
 /**
- * Read-only drawer that shows the full `DelegationDetail` ({ row, scope, status }).
+ * Read-only drawer that shows `DelegationDetail` row/status plus saved scope
+ * from `scopeView`. The persisted `scope.grants` shape is not parsed for
+ * display; it remains a backend validation/persistence shape.
  */
 class DelegationDetailDrawer {
     delegationId = input.required(...(ngDevMode ? [{ debugName: "delegationId" }] : /* istanbul ignore next */ []));
@@ -2875,6 +2872,10 @@ class DelegationDetailDrawer {
     isLoading = this.facade.isLoadingDetail;
     detail = this.facade.detail;
     row = computed(() => this.detail()?.row ?? null, ...(ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []));
+    scopeNodes = computed(() => this.buildScopeViewTree(this.detail()?.scopeView?.templates), ...(ngDevMode ? [{ debugName: "scopeNodes" }] : /* istanbul ignore next */ []));
+    scopeVisibleNodes = computed(() => this.flattenScopeNodes(this.scopeNodes()), ...(ngDevMode ? [{ debugName: "scopeVisibleNodes" }] : /* istanbul ignore next */ []));
+    selectedOperationCount = computed(() => this.scopeVisibleNodes().filter((node) => node.kind === 'operation')
+        .length, ...(ngDevMode ? [{ debugName: "selectedOperationCount" }] : /* istanbul ignore next */ []));
     ngOnInit() {
         this.facade.getDetail(this.delegationId(), this.adminMode());
     }
@@ -2891,20 +2892,104 @@ class DelegationDetailDrawer {
         const s = this.row()?.approval?.approvalStatus ?? 'NotRequired';
         return this.transloco.translate(`delegations.approvalStatus.${s}`);
     }
-    getScopeTargetLabel(target) {
-        return formatDelegationTargetLabel(target, this.transloco.getActiveLang());
+    userEntity(party, label) {
+        return toDelegationUserEntity(party, { label });
     }
-    getScopeActionLabel(action) {
-        return formatDelegationActionLabel(action, this.transloco.getActiveLang());
+    hasChildren(node) {
+        return 'children' in node && node.children.length > 0;
     }
-    formatScopeSummary(summary) {
-        return formatDelegationScopeSummary(summary, this.transloco.getActiveLang());
+    trackScopeNode(_index, node) {
+        return node.key;
     }
-    userEntity(party, label) {
-        return toDelegationUserEntity(party, { label });
+    buildScopeViewTree(templates) {
+        return this.toArray(templates)
+            .map((template) => this.toTemplateNode(template))
+            .filter((node) => this.hasScopeChildren(node));
+    }
+    flattenScopeNodes(nodes) {
+        const out = [];
+        const walk = (items) => {
+            for (const node of items) {
+                out.push(node);
+                if ('children' in node) {
+                    walk(node.children);
+                }
+            }
+        };
+        walk(nodes);
+        return out;
+    }
+    toTemplateNode(template) {
+        const key = `tpl:${template.groupKey}`;
+        return {
+            kind: 'template',
+            key,
+            label: this.displayLabel(template.name, template.groupKey),
+            fallbackKey: template.groupKey,
+            isAvailable: template.isAvailable !== false,
+            depth: 0,
+            children: this.toArray(template.levels).flatMap((level) => this.toLevelNodes(level)),
+        };
+    }
+    toLevelNodes(level) {
+        const operationNodes = this.toArray(level.operations)
+            .filter((operation) => operation.selected !== false)
+            .map((operation) => this.toOperationNode(operation, level.targetKey, 2));
+        const moduleNodes = this.toArray(level.modules)
+            .map((module) => this.toModuleNode(module))
+            .filter((node) => this.hasScopeChildren(node));
+        const children = [...operationNodes, ...moduleNodes];
+        if (children.length === 0) {
+            return [];
+        }
+        return [
+            {
+                kind: 'level',
+                key: `lvl:${level.applicationKey}:${level.targetKey}`,
+                label: this.displayLabel(level.name, level.targetKey),
+                fallbackKey: level.targetKey,
+                isAvailable: level.isAvailable !== false,
+                depth: 1,
+                children,
+            },
+        ];
+    }
+    toModuleNode(module) {
+        return {
+            kind: 'module',
+            key: `mod:${module.applicationKey}:${module.targetKey}`,
+            label: this.displayLabel(module.name, module.targetKey),
+            fallbackKey: module.targetKey,
+            isAvailable: module.isAvailable !== false,
+            depth: 2,
+            children: this.toArray(module.operations)
+                .filter((operation) => operation.selected !== false)
+                .map((operation) => this.toOperationNode(operation, module.targetKey, 3)),
+        };
+    }
+    toOperationNode(operation, parentKey, depth) {
+        return {
+            kind: 'operation',
+            key: `op:${parentKey}:${operation.operationKey}`,
+            label: this.displayLabel(operation.name ?? operation.displayName, operation.operationKey),
+            fallbackKey: operation.operationKey,
+            isAvailable: operation.isAvailable !== false,
+            isHighRisk: operation.isHighRisk ?? false,
+            depth,
+        };
+    }
+    displayLabel(value, fallbackKey) {
+        return (formatDelegationDisplayValue(value, this.transloco.getActiveLang()) ||
+            humanizeDelegationKey(fallbackKey));
+    }
+    toArray(value) {
+        return Array.isArray(value) ? value : [];
+    }
+    hasScopeChildren(node) {
+        return 'children' in node && node.children.length > 0;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col h-full\">\r\n    <!-- Tabs -->\r\n    <div class=\"border-b border-surface-200 px-4 pt-2\">\r\n      <mt-tabs\r\n        mode=\"underline\"\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        fluid\r\n      ></mt-tabs>\r\n    </div>\r\n\r\n    <!-- Body -->\r\n    <div class=\"flex-1 overflow-y-auto p-4\">\r\n      @if (isLoading() && !detail()) {\r\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\"></p-skeleton>\r\n      } @else if (detail(); as d) {\r\n        @if (activeTab() === \"overview\") {\r\n          <div class=\"flex flex-col gap-4\">\r\n            <div class=\"flex items-center justify-between gap-3\">\r\n              <div class=\"flex items-center gap-3 min-w-0\">\r\n                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegator,\r\n                      t('delegations.column.delegatorName')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <mt-delegation-status-chip\r\n                [status]=\"d.status.effectiveStatus\"\r\n              ></mt-delegation-status-chip>\r\n            </div>\r\n\r\n            <div class=\"grid grid-cols-2 gap-4\">\r\n              <div class=\"flex flex-col\">\r\n                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegatedUser,\r\n                      t('delegations.column.delegatedTo')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.approval\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{ approvalLabel() }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.startDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.endDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.form.timeZone\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  d.row.timeZoneId\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.days\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  @if (d.row.dayRuleMode === \"FullRange\") {\r\n                    {{ t(\"delegations.form.fullRange\") }}\r\n                  } @else {\r\n                    {{ formatSpecificDays(d.row.specificDays) }}\r\n                  }\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            @if (d.row.cancellation?.cancellationReason) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3 text-sm text-surface-800\"\r\n              >\r\n                <div class=\"font-medium\">\r\n                  {{ t(\"delegations.form.cancellationReason\") }}\r\n                </div>\r\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <!-- Scope tab -->\r\n          <div class=\"flex flex-col gap-3\">\r\n            <div class=\"text-sm text-surface-900\">\r\n              {{\r\n                formatScopeSummary(d.row.scopeSummary) ||\r\n                  t(\"delegations.column.scopeSummary\")\r\n              }}\r\n            </div>\r\n            <div class=\"flex flex-col gap-2\">\r\n              @for (grant of d.scope.grants; track $index) {\r\n                <div\r\n                  class=\"border border-surface-200 rounded-md px-3 py-2 flex flex-col gap-1\"\r\n                >\r\n                  <div class=\"flex items-center justify-between gap-2\">\r\n                    <span class=\"text-sm font-medium text-surface-900\">\r\n                      {{ getScopeTargetLabel(grant.target) }}\r\n                    </span>\r\n                    <span class=\"text-xs text-surface-500\">\r\n                      {{ grant.target.targetType }}\r\n                    </span>\r\n                  </div>\r\n                  <span\r\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\r\n                  >\r\n                    {{ getScopeActionLabel(grant.action) }}\r\n                  </span>\r\n                </div>\r\n              }\r\n              @if (d.scope.grants.length === 0) {\r\n                <p class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.scope.noSelection\") }}\r\n                </p>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"border-t border-surface-200 px-4 py-3 flex items-center justify-end\"\r\n    >\r\n      <mt-button\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        variant=\"outlined\"\r\n        (click)=\"ref.close()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"border-b border-surface-200 px-4 pt-2\">\n      <mt-tabs\n        mode=\"underline\"\n        [(active)]=\"activeTab\"\n        [options]=\"tabOptions()\"\n        fluid\n      ></mt-tabs>\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-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegator,\n                      t('delegations.column.delegatorName')\n                    )\n                  \"\n                ></mt-entity-preview>\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                <mt-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegatedUser,\n                      t('delegations.column.delegatedTo')\n                    )\n                  \"\n                ></mt-entity-preview>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-surface-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-surface-900\">{{\n                  approvalLabel()\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-surface-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-surface-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-surface-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-surface-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-surface-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-surface-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-surface-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-surface-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ formatSpecificDays(d.row.specificDays) }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3 text-sm text-surface-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\n            class=\"flex flex-col overflow-hidden rounded-lg border border-surface\"\n          >\n            <div\n              class=\"flex items-center justify-between gap-2 border-b border-surface bg-surface-50 px-3 py-2\"\n            >\n              <span class=\"text-xs font-semibold uppercase text-surface-500\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </span>\n              @if (selectedOperationCount() > 0) {\n                <span class=\"text-xs font-medium text-surface-500\">\n                  {{ selectedOperationCount() }}\n                  {{ t(\"delegations.scope.selected\") }}\n                </span>\n              }\n            </div>\n\n            @if (scopeVisibleNodes().length > 0) {\n              <div class=\"flex max-h-[34rem] flex-col overflow-y-auto\">\n                @for (\n                  node of scopeVisibleNodes();\n                  track trackScopeNode($index, node)\n                ) {\n                  <div\n                    class=\"group flex min-h-10 items-center gap-2 pe-3 transition-colors hover:bg-surface-50\"\n                    [style.padding-inline-start.rem]=\"0.75 + node.depth * 1.25\"\n                  >\n                    @if (hasChildren(node)) {\n                      <span\n                        class=\"flex size-6 shrink-0 items-center justify-center rounded-md text-surface-400\"\n                        aria-hidden=\"true\"\n                      >\n                        <svg\n                          viewBox=\"0 0 20 20\"\n                          class=\"size-4\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                          <path\n                            d=\"M5 7L10 12L15 7\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.8\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                          />\n                        </svg>\n                      </span>\n                    } @else {\n                      <span class=\"size-6 shrink-0\"></span>\n                    }\n\n                    <span\n                      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-primary-500 bg-primary-500 text-white\"\n                      aria-hidden=\"true\"\n                    >\n                      <svg\n                        viewBox=\"0 0 16 16\"\n                        class=\"size-3\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <path\n                          d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"2\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                        />\n                      </svg>\n                    </span>\n\n                    <span\n                      class=\"min-w-0 flex-1 truncate text-sm\"\n                      [class.font-semibold]=\"node.kind === 'template'\"\n                      [class.text-surface-900]=\"node.kind === 'template'\"\n                      [class.font-medium]=\"\n                        node.kind === 'level' || node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        node.kind === 'level' || node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"node.kind === 'operation'\"\n                    >\n                      {{ node.label }}\n                    </span>\n\n                    @if (node.kind === \"operation\" && node.isHighRisk) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n                      >\n                        {{ t(\"delegations.scope.highRisk\") }}\n                      </span>\n                    }\n\n                    @if (!node.isAvailable) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-surface-100 px-2 py-0.5 text-[0.625rem] font-medium text-surface-500\"\n                      >\n                        {{ t(\"delegations.scope.unavailable\") }}\n                      </span>\n                    }\n                  </div>\n                }\n              </div>\n            } @else {\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noSelection\") }}\n              </p>\n            }\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-surface-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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, decorators: [{
             type: Component,
@@ -2916,7 +3001,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Tabs,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col h-full\">\r\n    <!-- Tabs -->\r\n    <div class=\"border-b border-surface-200 px-4 pt-2\">\r\n      <mt-tabs\r\n        mode=\"underline\"\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        fluid\r\n      ></mt-tabs>\r\n    </div>\r\n\r\n    <!-- Body -->\r\n    <div class=\"flex-1 overflow-y-auto p-4\">\r\n      @if (isLoading() && !detail()) {\r\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\"></p-skeleton>\r\n      } @else if (detail(); as d) {\r\n        @if (activeTab() === \"overview\") {\r\n          <div class=\"flex flex-col gap-4\">\r\n            <div class=\"flex items-center justify-between gap-3\">\r\n              <div class=\"flex items-center gap-3 min-w-0\">\r\n                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegator,\r\n                      t('delegations.column.delegatorName')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <mt-delegation-status-chip\r\n                [status]=\"d.status.effectiveStatus\"\r\n              ></mt-delegation-status-chip>\r\n            </div>\r\n\r\n            <div class=\"grid grid-cols-2 gap-4\">\r\n              <div class=\"flex flex-col\">\r\n                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegatedUser,\r\n                      t('delegations.column.delegatedTo')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.approval\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{ approvalLabel() }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.startDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.endDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.form.timeZone\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  d.row.timeZoneId\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.days\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  @if (d.row.dayRuleMode === \"FullRange\") {\r\n                    {{ t(\"delegations.form.fullRange\") }}\r\n                  } @else {\r\n                    {{ formatSpecificDays(d.row.specificDays) }}\r\n                  }\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            @if (d.row.cancellation?.cancellationReason) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3 text-sm text-surface-800\"\r\n              >\r\n                <div class=\"font-medium\">\r\n                  {{ t(\"delegations.form.cancellationReason\") }}\r\n                </div>\r\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <!-- Scope tab -->\r\n          <div class=\"flex flex-col gap-3\">\r\n            <div class=\"text-sm text-surface-900\">\r\n              {{\r\n                formatScopeSummary(d.row.scopeSummary) ||\r\n                  t(\"delegations.column.scopeSummary\")\r\n              }}\r\n            </div>\r\n            <div class=\"flex flex-col gap-2\">\r\n              @for (grant of d.scope.grants; track $index) {\r\n                <div\r\n                  class=\"border border-surface-200 rounded-md px-3 py-2 flex flex-col gap-1\"\r\n                >\r\n                  <div class=\"flex items-center justify-between gap-2\">\r\n                    <span class=\"text-sm font-medium text-surface-900\">\r\n                      {{ getScopeTargetLabel(grant.target) }}\r\n                    </span>\r\n                    <span class=\"text-xs text-surface-500\">\r\n                      {{ grant.target.targetType }}\r\n                    </span>\r\n                  </div>\r\n                  <span\r\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\r\n                  >\r\n                    {{ getScopeActionLabel(grant.action) }}\r\n                  </span>\r\n                </div>\r\n              }\r\n              @if (d.scope.grants.length === 0) {\r\n                <p class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.scope.noSelection\") }}\r\n                </p>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"border-t border-surface-200 px-4 py-3 flex items-center justify-end\"\r\n    >\r\n      <mt-button\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        variant=\"outlined\"\r\n        (click)=\"ref.close()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"border-b border-surface-200 px-4 pt-2\">\n      <mt-tabs\n        mode=\"underline\"\n        [(active)]=\"activeTab\"\n        [options]=\"tabOptions()\"\n        fluid\n      ></mt-tabs>\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-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegator,\n                      t('delegations.column.delegatorName')\n                    )\n                  \"\n                ></mt-entity-preview>\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                <mt-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegatedUser,\n                      t('delegations.column.delegatedTo')\n                    )\n                  \"\n                ></mt-entity-preview>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-surface-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-surface-900\">{{\n                  approvalLabel()\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-surface-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-surface-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-surface-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-surface-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-surface-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-surface-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-surface-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-surface-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ formatSpecificDays(d.row.specificDays) }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3 text-sm text-surface-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\n            class=\"flex flex-col overflow-hidden rounded-lg border border-surface\"\n          >\n            <div\n              class=\"flex items-center justify-between gap-2 border-b border-surface bg-surface-50 px-3 py-2\"\n            >\n              <span class=\"text-xs font-semibold uppercase text-surface-500\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </span>\n              @if (selectedOperationCount() > 0) {\n                <span class=\"text-xs font-medium text-surface-500\">\n                  {{ selectedOperationCount() }}\n                  {{ t(\"delegations.scope.selected\") }}\n                </span>\n              }\n            </div>\n\n            @if (scopeVisibleNodes().length > 0) {\n              <div class=\"flex max-h-[34rem] flex-col overflow-y-auto\">\n                @for (\n                  node of scopeVisibleNodes();\n                  track trackScopeNode($index, node)\n                ) {\n                  <div\n                    class=\"group flex min-h-10 items-center gap-2 pe-3 transition-colors hover:bg-surface-50\"\n                    [style.padding-inline-start.rem]=\"0.75 + node.depth * 1.25\"\n                  >\n                    @if (hasChildren(node)) {\n                      <span\n                        class=\"flex size-6 shrink-0 items-center justify-center rounded-md text-surface-400\"\n                        aria-hidden=\"true\"\n                      >\n                        <svg\n                          viewBox=\"0 0 20 20\"\n                          class=\"size-4\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                          <path\n                            d=\"M5 7L10 12L15 7\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.8\"\n                            stroke-linecap=\"round\"\n                            stroke-linejoin=\"round\"\n                          />\n                        </svg>\n                      </span>\n                    } @else {\n                      <span class=\"size-6 shrink-0\"></span>\n                    }\n\n                    <span\n                      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border border-primary-500 bg-primary-500 text-white\"\n                      aria-hidden=\"true\"\n                    >\n                      <svg\n                        viewBox=\"0 0 16 16\"\n                        class=\"size-3\"\n                        fill=\"none\"\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                      >\n                        <path\n                          d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"2\"\n                          stroke-linecap=\"round\"\n                          stroke-linejoin=\"round\"\n                        />\n                      </svg>\n                    </span>\n\n                    <span\n                      class=\"min-w-0 flex-1 truncate text-sm\"\n                      [class.font-semibold]=\"node.kind === 'template'\"\n                      [class.text-surface-900]=\"node.kind === 'template'\"\n                      [class.font-medium]=\"\n                        node.kind === 'level' || node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        node.kind === 'level' || node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"node.kind === 'operation'\"\n                    >\n                      {{ node.label }}\n                    </span>\n\n                    @if (node.kind === \"operation\" && node.isHighRisk) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n                      >\n                        {{ t(\"delegations.scope.highRisk\") }}\n                      </span>\n                    }\n\n                    @if (!node.isAvailable) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-surface-100 px-2 py-0.5 text-[0.625rem] font-medium text-surface-500\"\n                      >\n                        {{ t(\"delegations.scope.unavailable\") }}\n                      </span>\n                    }\n                  </div>\n                }\n              </div>\n            } @else {\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noSelection\") }}\n              </p>\n            }\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-surface-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 }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }] } });
 
 function defaultTrueBooleanAttribute(value) {
@@ -2925,6 +3010,24 @@ function defaultTrueBooleanAttribute(value) {
 function defaultRouteInput(fallback) {
     return (value) => value === undefined || value === null ? fallback : value;
 }
+const DELEGATION_TABS = [
+    'my',
+    'assigned',
+    'approvals',
+];
+/** Route param → a valid tab, or null when absent/unknown (host redirects to default). */
+function normalizeTab(value) {
+    return DELEGATION_TABS.includes(value)
+        ? value
+        : null;
+}
+/** Query param (string) → number, or null when absent/non-numeric. */
+function toNullableNumber(value) {
+    if (value === undefined || value === null || value === '')
+        return null;
+    const n = numberAttribute(value, NaN);
+    return Number.isNaN(n) ? null : n;
+}
 /**
  * Delegations portal page (doc 02, 09): two lists — My Delegations (current user
  * is delegator) and Delegated To Me (current user is delegate). Rows render only
@@ -2959,10 +3062,32 @@ class DelegationsList {
     approvalTabLabelKey = input('delegations.tabs.approvals', { ...(ngDevMode ? { debugName: "approvalTabLabelKey" } : /* istanbul ignore next */ {}), transform: defaultRouteInput('delegations.tabs.approvals') });
     approvalEmptyStateKey = input('delegations.empty.pending', { ...(ngDevMode ? { debugName: "approvalEmptyStateKey" } : /* istanbul ignore next */ {}), transform: defaultRouteInput('delegations.empty.pending') });
     approvalStatus = input('PendingApproval', { ...(ngDevMode ? { debugName: "approvalStatus" } : /* istanbul ignore next */ {}), transform: defaultRouteInput('PendingApproval') });
+    /**
+     * Route-driven mode (client self-service): the active tab is the `:tab` route
+     * segment and the open drawer is a `?view=`/`?edit=` query param, so tabs and
+     * drawers are deep-linkable + back-button aware. When false (admin/default),
+     * tabs and drawers are managed internally exactly as before.
+     */
+    routed = input(false, { ...(ngDevMode ? { debugName: "routed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Bound from the `:tab` route param via `withComponentInputBinding()`. */
+    tab = input(null, { ...(ngDevMode ? { debugName: "tab" } : /* istanbul ignore next */ {}), transform: normalizeTab });
+    /** Bound from the `?view=<id>` query param (detail drawer). */
+    view = input(null, { ...(ngDevMode ? { debugName: "view" } : /* istanbul ignore next */ {}), transform: toNullableNumber });
+    /** Back-compatible notification deep-link aliases for opening details. */
+    selected = input(null, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: toNullableNumber });
+    itemSelected = input(null, { ...(ngDevMode ? { debugName: "itemSelected" } : /* istanbul ignore next */ {}), transform: toNullableNumber });
+    selectedItemId = input(null, { ...(ngDevMode ? { debugName: "selectedItemId" } : /* istanbul ignore next */ {}), transform: toNullableNumber });
+    selectedItem = input(null, { ...(ngDevMode ? { debugName: "selectedItem" } : /* istanbul ignore next */ {}), transform: toNullableNumber });
+    itemId = input(null, { ...(ngDevMode ? { debugName: "itemId" } : /* istanbul ignore next */ {}), transform: toNullableNumber });
+    delegationId = input(null, { ...(ngDevMode ? { debugName: "delegationId" } : /* istanbul ignore next */ {}), transform: toNullableNumber });
+    /** Bound from the `?edit=<id>` query param (edit drawer). */
+    edit = input(null, { ...(ngDevMode ? { debugName: "edit" } : /* istanbul ignore next */ {}), transform: toNullableNumber });
     facade = inject(DelegationsFacade);
     location = inject(Location);
     modal = inject(ModalService);
     transloco = inject(TranslocoService);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
     breadcrumbItems = linkedSignal(() => [
         {
             label: '',
@@ -3007,6 +3132,13 @@ class DelegationsList {
             : this.activeTab() === 'approvals'
                 ? this.approvalEmptyStateKey()
                 : this.assignedEmptyStateKey(), ...(ngDevMode ? [{ debugName: "emptyStateKey" }] : /* istanbul ignore next */ []));
+    detailQueryId = computed(() => this.view() ??
+        this.selected() ??
+        this.itemSelected() ??
+        this.selectedItemId() ??
+        this.selectedItem() ??
+        this.itemId() ??
+        this.delegationId(), ...(ngDevMode ? [{ debugName: "detailQueryId" }] : /* istanbul ignore next */ []));
     tableActions = computed(() => [
         {
             icon: 'general.plus',
@@ -3021,14 +3153,14 @@ class DelegationsList {
             tooltip: this.transloco.translate('delegations.action.view'),
             color: 'primary',
             variant: 'outlined',
-            action: (row) => this.viewDetails(row),
+            action: (row) => this.onView(row),
             hidden: (row) => !this.has(row, 'View'),
         },
         {
             icon: 'custom.pencil',
             tooltip: this.transloco.translate('delegations.action.edit'),
             color: 'primary',
-            action: (row) => this.openForm(row),
+            action: (row) => this.onEdit(row),
             hidden: (row) => !this.has(row, 'Edit'),
         },
         {
@@ -3176,10 +3308,59 @@ class DelegationsList {
         'friday',
         'saturday',
     ];
+    // Route-driven drawer refs (only used when `routed()`). The active id is
+    // captured per-subscription so an async `onClose` can tell a user-dismiss
+    // (route still points at the id) from a route-driven / superseded close.
+    detailRef = null;
+    detailOpenId = null;
+    editRef = null;
+    editOpenId = null;
+    constructor() {
+        // Tab → route sync. `ngOnInit` performs the first load; this effect only
+        // reacts to later route changes (tab switches, Back/Forward).
+        effect(() => {
+            if (!this.routed())
+                return;
+            const t = this.tab() ?? 'my';
+            untracked(() => {
+                if (t !== this.activeTab()) {
+                    this.activeTab.set(t);
+                    this.loadCurrentTab();
+                }
+            });
+        });
+        // Detail (`?view=`) drawer ↔ route.
+        effect(() => {
+            if (!this.routed())
+                return;
+            const id = this.detailQueryId();
+            untracked(() => this.syncDetailDrawer(id));
+        });
+        // Edit (`?edit=`) drawer ↔ route. `view` takes precedence: while a view is
+        // open, the edit drawer is suppressed (and reopens if `view` later clears).
+        effect(() => {
+            if (!this.routed())
+                return;
+            const id = this.edit();
+            const hasView = this.detailQueryId() != null;
+            untracked(() => this.syncEditDrawer(hasView ? null : id));
+        });
+    }
     ngOnInit() {
+        if (this.routed()) {
+            this.activeTab.set(this.tab() ?? 'my');
+        }
         this.loadCurrentTab();
     }
     switchTab(tab) {
+        if (this.routed()) {
+            // Sibling tab segment; drop any open drawer query params.
+            void this.router.navigate(['..', tab], {
+                relativeTo: this.route,
+                queryParams: {},
+            });
+            return;
+        }
         this.activeTab.set(tab);
         this.loadCurrentTab();
     }
@@ -3225,16 +3406,40 @@ class DelegationsList {
     getListedParty(row) {
         return this.activeTab() === 'my' ? row.delegatedUser : row.delegator;
     }
-    viewDetails(row) {
-        this.modal.openModal(DelegationDetailDrawer, 'drawer', {
+    // View/Edit entry points: in routed mode flip the URL (the sync effects open
+    // the drawer); otherwise open imperatively as before.
+    onView(row) {
+        if (this.routed()) {
+            void this.router.navigate([], {
+                relativeTo: this.route,
+                queryParams: { view: row.delegationId, edit: null },
+                queryParamsHandling: 'merge',
+            });
+            return;
+        }
+        this.openDetailById(row.delegationId);
+    }
+    onEdit(row) {
+        if (this.routed()) {
+            void this.router.navigate([], {
+                relativeTo: this.route,
+                queryParams: { edit: row.delegationId, view: null },
+                queryParamsHandling: 'merge',
+            });
+            return;
+        }
+        this.openForm(row);
+    }
+    openDetailById(delegationId) {
+        return this.modal.openModal(DelegationDetailDrawer, 'drawer', {
             header: this.transloco.translate('delegations.action.view'),
-            styleClass: '!absolute !shadow-none !w-full !max-w-full sm:!w-[42rem] xl:!w-[50rem]',
+            styleClass: '!absolute !shadow-none !w-full !max-w-full sm:!w-[52rem] xl:!w-[64rem]',
             position: 'end',
             appendTo: 'page-content',
             dismissableMask: true,
             dismissible: true,
             inputValues: {
-                delegationId: row.delegationId,
+                delegationId,
                 adminMode: this.adminMode(),
             },
         });
@@ -3243,7 +3448,7 @@ class DelegationsList {
         const ref = this.modal.openModal(DelegationForm, row ? 'drawer' : 'dialog', {
             header: this.transloco.translate(row ? 'delegations.action.edit' : 'delegations.action.create'),
             styleClass: row
-                ? '!absolute !shadow-none !w-full !max-w-full sm:!w-[56rem] xl:!w-[68rem]'
+                ? '!absolute !shadow-none !w-full !max-w-full sm:!w-[68rem] xl:!w-[84rem]'
                 : '!w-[min(98vw,88rem)] !max-w-[98vw] !h-[min(94vh,56rem)] !max-h-[94vh] !overflow-hidden',
             position: row ? 'end' : '',
             appendTo: row ? 'page-content' : 'body',
@@ -3255,9 +3460,98 @@ class DelegationsList {
                 adminMode: this.adminMode(),
             },
         });
-        ref.onClose.subscribe((saved) => {
-            if (saved)
-                this.reloadCurrentTab();
+        // Routed edit reload/clear is handled by `syncEditDrawer`; create and
+        // non-routed edit self-manage their reload here.
+        if (!this.routed() || row == null) {
+            ref.onClose.subscribe((saved) => {
+                if (saved)
+                    this.reloadCurrentTab();
+            });
+        }
+        return ref;
+    }
+    syncDetailDrawer(id) {
+        if (id != null && this.detailOpenId !== id) {
+            const openingId = id;
+            this.closeDetail();
+            this.detailOpenId = openingId;
+            this.detailRef = this.openDetailById(openingId);
+            this.detailRef.onClose.subscribe(() => {
+                if (this.detailOpenId !== openingId)
+                    return; // superseded by a switch
+                this.detailRef = null;
+                this.detailOpenId = null;
+                // Route still points here ⇒ the user dismissed the drawer; clear it.
+                if (this.detailQueryId() === openingId)
+                    this.clearDetailQuery();
+            });
+        }
+        else if (id == null) {
+            this.closeDetail();
+        }
+    }
+    syncEditDrawer(id) {
+        if (id != null && this.editOpenId !== id) {
+            const openingId = id;
+            this.closeEdit();
+            this.editOpenId = openingId;
+            // The detail drawer loads its own data, but the form prefills from the
+            // list row when present; fall back to an id-only stub on a cold deep-link
+            // (the form then sources rowVersion from the detail it loads).
+            const row = this.rows().find((r) => r.delegationId === openingId) ??
+                { delegationId: openingId };
+            this.editRef = this.openForm(row);
+            this.editRef.onClose.subscribe((saved) => {
+                if (this.editOpenId !== openingId)
+                    return; // superseded
+                this.editRef = null;
+                this.editOpenId = null;
+                if (saved)
+                    this.reloadCurrentTab();
+                if (this.edit() === openingId)
+                    this.clearQuery('edit');
+            });
+        }
+        else if (id == null) {
+            this.closeEdit();
+        }
+    }
+    closeDetail() {
+        if (this.detailRef) {
+            this.detailOpenId = null; // mark superseded so the pending onClose no-ops
+            const ref = this.detailRef;
+            this.detailRef = null;
+            ref.close();
+        }
+    }
+    closeEdit() {
+        if (this.editRef) {
+            this.editOpenId = null;
+            const ref = this.editRef;
+            this.editRef = null;
+            ref.close();
+        }
+    }
+    clearQuery(param) {
+        void this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: { [param]: null },
+            queryParamsHandling: 'merge',
+        });
+    }
+    clearDetailQuery() {
+        void this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: {
+                view: null,
+                selected: null,
+                itemSelected: null,
+                selectedItemId: null,
+                selectedItem: null,
+                itemId: null,
+                delegationId: null,
+            },
+            queryParamsHandling: 'merge',
         });
     }
     approve(row) {
@@ -3304,7 +3598,7 @@ class DelegationsList {
         this.busyIds.update((ids) => on ? [...ids, key] : ids.filter((id) => id !== key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, showPageShell: { classPropertyName: "showPageShell", publicName: "showPageShell", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, surfaceTitleKey: { classPropertyName: "surfaceTitleKey", publicName: "surfaceTitleKey", isSignal: true, isRequired: false, transformFunction: null }, assignedTabLabelKey: { classPropertyName: "assignedTabLabelKey", publicName: "assignedTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, assignedDecisionTab: { classPropertyName: "assignedDecisionTab", publicName: "assignedDecisionTab", isSignal: true, isRequired: false, transformFunction: null }, assignedEmptyStateKey: { classPropertyName: "assignedEmptyStateKey", publicName: "assignedEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, assignedStatus: { classPropertyName: "assignedStatus", publicName: "assignedStatus", isSignal: true, isRequired: false, transformFunction: null }, showApprovalTab: { classPropertyName: "showApprovalTab", publicName: "showApprovalTab", isSignal: true, isRequired: false, transformFunction: null }, approvalTabLabelKey: { classPropertyName: "approvalTabLabelKey", publicName: "approvalTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, approvalEmptyStateKey: { classPropertyName: "approvalEmptyStateKey", publicName: "approvalEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, approvalStatus: { classPropertyName: "approvalStatus", publicName: "approvalStatus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <ng-template #tableContent>\r\n    <div class=\"flex flex-col gap-4\">\r\n      @if (!adminMode()) {\r\n        @let assignedLabel =\r\n          assignedDecisionTab()\r\n            ? t(\"delegations.action.approve\") +\r\n              \" / \" +\r\n              t(\"delegations.action.reject\")\r\n            : t(assignedTabLabelKey());\r\n\r\n        <mt-tabs\r\n          mode=\"underline\"\r\n          [(active)]=\"activeTab\"\r\n          [options]=\"\r\n            showApprovalTab()\r\n              ? [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                  { value: 'approvals', label: t(approvalTabLabelKey()) },\r\n                ]\r\n              : [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                ]\r\n          \"\r\n          fluid\r\n          (onChange)=\"switchTab($event)\"\r\n        ></mt-tabs>\r\n      }\r\n\r\n      <mt-table\r\n        [data]=\"tableRows()\"\r\n        [columns]=\"tableColumns()\"\r\n        [actions]=\"tableActions()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"isLoading()\"\r\n        [noCard]=\"true\"\r\n      >\r\n        <ng-template #empty>\r\n          <div\r\n            class=\"flex min-h-64 flex-col items-center justify-center gap-4 px-6 py-10 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-9\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"14\"\r\n                  width=\"44\"\r\n                  height=\"36\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 28H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 36H35\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <p class=\"max-w-sm text-sm text-surface-500\">\r\n              {{ t(emptyStateKey()) }}\r\n            </p>\r\n          </div>\r\n        </ng-template>\r\n      </mt-table>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #adminContent>\r\n    <div class=\"flex min-h-full flex-col gap-4\">\r\n      @if (showBreadcrumb()) {\r\n        <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\r\n      }\r\n      <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  @if (adminMode()) {\r\n    @if (showPageShell()) {\r\n      <mt-page\r\n        [title]=\"surfaceTitle()\"\r\n        [avatarIcon]=\"'custom.hierarchy-structure'\"\r\n        [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\r\n        [avatarStyle]=\"{\r\n          '--p-avatar-background': 'var(--p-indigo-50)',\r\n          '--p-avatar-color': 'var(--p-indigo-700)',\r\n        }\"\r\n        (backButtonClick)=\"goBack()\"\r\n        backButton\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n      </mt-page>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"flex h-full flex-col gap-4 p-4\">\r\n      <mt-card [title]=\"surfaceTitle()\">\r\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n      </mt-card>\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table td.mt-actions-column>div{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "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: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, showPageShell: { classPropertyName: "showPageShell", publicName: "showPageShell", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, surfaceTitleKey: { classPropertyName: "surfaceTitleKey", publicName: "surfaceTitleKey", isSignal: true, isRequired: false, transformFunction: null }, assignedTabLabelKey: { classPropertyName: "assignedTabLabelKey", publicName: "assignedTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, assignedDecisionTab: { classPropertyName: "assignedDecisionTab", publicName: "assignedDecisionTab", isSignal: true, isRequired: false, transformFunction: null }, assignedEmptyStateKey: { classPropertyName: "assignedEmptyStateKey", publicName: "assignedEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, assignedStatus: { classPropertyName: "assignedStatus", publicName: "assignedStatus", isSignal: true, isRequired: false, transformFunction: null }, showApprovalTab: { classPropertyName: "showApprovalTab", publicName: "showApprovalTab", isSignal: true, isRequired: false, transformFunction: null }, approvalTabLabelKey: { classPropertyName: "approvalTabLabelKey", publicName: "approvalTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, approvalEmptyStateKey: { classPropertyName: "approvalEmptyStateKey", publicName: "approvalEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, approvalStatus: { classPropertyName: "approvalStatus", publicName: "approvalStatus", isSignal: true, isRequired: false, transformFunction: null }, routed: { classPropertyName: "routed", publicName: "routed", isSignal: true, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, itemSelected: { classPropertyName: "itemSelected", publicName: "itemSelected", isSignal: true, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null }, itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: false, transformFunction: null }, delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: false, transformFunction: null }, edit: { classPropertyName: "edit", publicName: "edit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <ng-template #tableContent>\r\n    <div class=\"flex flex-col gap-4\">\r\n      @if (!adminMode()) {\r\n        @let assignedLabel =\r\n          assignedDecisionTab()\r\n            ? t(\"delegations.action.approve\") +\r\n              \" / \" +\r\n              t(\"delegations.action.reject\")\r\n            : t(assignedTabLabelKey());\r\n\r\n        <mt-tabs\r\n          mode=\"underline\"\r\n          [active]=\"activeTab()\"\r\n          [options]=\"\r\n            showApprovalTab()\r\n              ? [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                  { value: 'approvals', label: t(approvalTabLabelKey()) },\r\n                ]\r\n              : [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                ]\r\n          \"\r\n          fluid\r\n          (onChange)=\"switchTab($event)\"\r\n        ></mt-tabs>\r\n      }\r\n\r\n      <mt-table\r\n        [data]=\"tableRows()\"\r\n        [columns]=\"tableColumns()\"\r\n        [actions]=\"tableActions()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"isLoading()\"\r\n        [noCard]=\"true\"\r\n      >\r\n        <ng-template #empty>\r\n          <div\r\n            class=\"flex min-h-64 flex-col items-center justify-center gap-4 px-6 py-10 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-9\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"14\"\r\n                  width=\"44\"\r\n                  height=\"36\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 28H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 36H35\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <p class=\"max-w-sm text-sm text-surface-500\">\r\n              {{ t(emptyStateKey()) }}\r\n            </p>\r\n          </div>\r\n        </ng-template>\r\n      </mt-table>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #adminContent>\r\n    <div class=\"flex min-h-full flex-col gap-4\">\r\n      @if (showBreadcrumb()) {\r\n        <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\r\n      }\r\n      <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  @if (adminMode()) {\r\n    @if (showPageShell()) {\r\n      <mt-page\r\n        [title]=\"surfaceTitle()\"\r\n        [avatarIcon]=\"'custom.hierarchy-structure'\"\r\n        [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\r\n        [avatarStyle]=\"{\r\n          '--p-avatar-background': 'var(--p-indigo-50)',\r\n          '--p-avatar-color': 'var(--p-indigo-700)',\r\n        }\"\r\n        (backButtonClick)=\"goBack()\"\r\n        backButton\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n      </mt-page>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"flex h-full flex-col gap-4 p-4\">\r\n      <mt-card [title]=\"surfaceTitle()\">\r\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n      </mt-card>\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table td.mt-actions-column>div{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "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: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, decorators: [{
             type: Component,
@@ -3316,8 +3610,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Table,
                         Tabs,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <ng-template #tableContent>\r\n    <div class=\"flex flex-col gap-4\">\r\n      @if (!adminMode()) {\r\n        @let assignedLabel =\r\n          assignedDecisionTab()\r\n            ? t(\"delegations.action.approve\") +\r\n              \" / \" +\r\n              t(\"delegations.action.reject\")\r\n            : t(assignedTabLabelKey());\r\n\r\n        <mt-tabs\r\n          mode=\"underline\"\r\n          [(active)]=\"activeTab\"\r\n          [options]=\"\r\n            showApprovalTab()\r\n              ? [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                  { value: 'approvals', label: t(approvalTabLabelKey()) },\r\n                ]\r\n              : [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                ]\r\n          \"\r\n          fluid\r\n          (onChange)=\"switchTab($event)\"\r\n        ></mt-tabs>\r\n      }\r\n\r\n      <mt-table\r\n        [data]=\"tableRows()\"\r\n        [columns]=\"tableColumns()\"\r\n        [actions]=\"tableActions()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"isLoading()\"\r\n        [noCard]=\"true\"\r\n      >\r\n        <ng-template #empty>\r\n          <div\r\n            class=\"flex min-h-64 flex-col items-center justify-center gap-4 px-6 py-10 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-9\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"14\"\r\n                  width=\"44\"\r\n                  height=\"36\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 28H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 36H35\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <p class=\"max-w-sm text-sm text-surface-500\">\r\n              {{ t(emptyStateKey()) }}\r\n            </p>\r\n          </div>\r\n        </ng-template>\r\n      </mt-table>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #adminContent>\r\n    <div class=\"flex min-h-full flex-col gap-4\">\r\n      @if (showBreadcrumb()) {\r\n        <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\r\n      }\r\n      <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  @if (adminMode()) {\r\n    @if (showPageShell()) {\r\n      <mt-page\r\n        [title]=\"surfaceTitle()\"\r\n        [avatarIcon]=\"'custom.hierarchy-structure'\"\r\n        [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\r\n        [avatarStyle]=\"{\r\n          '--p-avatar-background': 'var(--p-indigo-50)',\r\n          '--p-avatar-color': 'var(--p-indigo-700)',\r\n        }\"\r\n        (backButtonClick)=\"goBack()\"\r\n        backButton\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n      </mt-page>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"flex h-full flex-col gap-4 p-4\">\r\n      <mt-card [title]=\"surfaceTitle()\">\r\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n      </mt-card>\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table td.mt-actions-column>div{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}\n"] }]
-        }], propDecorators: { showBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumb", required: false }] }], showPageShell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageShell", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], surfaceTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceTitleKey", required: false }] }], assignedTabLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedTabLabelKey", required: false }] }], assignedDecisionTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedDecisionTab", required: false }] }], assignedEmptyStateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedEmptyStateKey", required: false }] }], assignedStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedStatus", required: false }] }], showApprovalTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApprovalTab", required: false }] }], approvalTabLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalTabLabelKey", required: false }] }], approvalEmptyStateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalEmptyStateKey", required: false }] }], approvalStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalStatus", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <ng-template #tableContent>\r\n    <div class=\"flex flex-col gap-4\">\r\n      @if (!adminMode()) {\r\n        @let assignedLabel =\r\n          assignedDecisionTab()\r\n            ? t(\"delegations.action.approve\") +\r\n              \" / \" +\r\n              t(\"delegations.action.reject\")\r\n            : t(assignedTabLabelKey());\r\n\r\n        <mt-tabs\r\n          mode=\"underline\"\r\n          [active]=\"activeTab()\"\r\n          [options]=\"\r\n            showApprovalTab()\r\n              ? [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                  { value: 'approvals', label: t(approvalTabLabelKey()) },\r\n                ]\r\n              : [\r\n                  { value: 'my', label: t('delegations.myDelegations') },\r\n                  { value: 'assigned', label: assignedLabel },\r\n                ]\r\n          \"\r\n          fluid\r\n          (onChange)=\"switchTab($event)\"\r\n        ></mt-tabs>\r\n      }\r\n\r\n      <mt-table\r\n        [data]=\"tableRows()\"\r\n        [columns]=\"tableColumns()\"\r\n        [actions]=\"tableActions()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"isLoading()\"\r\n        [noCard]=\"true\"\r\n      >\r\n        <ng-template #empty>\r\n          <div\r\n            class=\"flex min-h-64 flex-col items-center justify-center gap-4 px-6 py-10 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-9\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"14\"\r\n                  width=\"44\"\r\n                  height=\"36\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 28H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 36H35\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <p class=\"max-w-sm text-sm text-surface-500\">\r\n              {{ t(emptyStateKey()) }}\r\n            </p>\r\n          </div>\r\n        </ng-template>\r\n      </mt-table>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <ng-template #adminContent>\r\n    <div class=\"flex min-h-full flex-col gap-4\">\r\n      @if (showBreadcrumb()) {\r\n        <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\r\n      }\r\n      <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n  @if (adminMode()) {\r\n    @if (showPageShell()) {\r\n      <mt-page\r\n        [title]=\"surfaceTitle()\"\r\n        [avatarIcon]=\"'custom.hierarchy-structure'\"\r\n        [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\r\n        [avatarStyle]=\"{\r\n          '--p-avatar-background': 'var(--p-indigo-50)',\r\n          '--p-avatar-color': 'var(--p-indigo-700)',\r\n        }\"\r\n        (backButtonClick)=\"goBack()\"\r\n        backButton\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n      </mt-page>\r\n    } @else {\r\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\r\n    }\r\n  } @else {\r\n    <div class=\"flex h-full flex-col gap-4 p-4\">\r\n      <mt-card [title]=\"surfaceTitle()\">\r\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\r\n      </mt-card>\r\n    </div>\r\n  }\r\n</ng-container>\r\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table td.mt-actions-column>div{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumb", required: false }] }], showPageShell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageShell", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], surfaceTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceTitleKey", required: false }] }], assignedTabLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedTabLabelKey", required: false }] }], assignedDecisionTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedDecisionTab", required: false }] }], assignedEmptyStateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedEmptyStateKey", required: false }] }], assignedStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedStatus", required: false }] }], showApprovalTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApprovalTab", required: false }] }], approvalTabLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalTabLabelKey", required: false }] }], approvalEmptyStateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalEmptyStateKey", required: false }] }], approvalStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalStatus", required: false }] }], routed: [{ type: i0.Input, args: [{ isSignal: true, alias: "routed", required: false }] }], tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], itemSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSelected", required: false }] }], selectedItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemId", required: false }] }], selectedItem: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItem", required: false }] }], itemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemId", required: false }] }], delegationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegationId", required: false }] }], edit: [{ type: i0.Input, args: [{ isSignal: true, alias: "edit", required: false }] }] } });
 
 /**
  * Endpoints that must NEVER carry the `app-delegation` header.