@masterteam/delegations 0.0.22 → 0.0.23

package/fesm2022/masterteam-delegations.mjs

@@ -1,5 +1,5 @@
-import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, computed, Component, inject, Injectable, ChangeDetectionStrategy, viewChild, signal, model, effect, untracked, linkedSignal } from '@angular/core';
 import { RouterLink, ActivatedRoute, Router, NavigationEnd, RouterOutlet } from '@angular/router';
@@ -24,10 +24,9 @@ import { Table } from '@masterteam/components/table';
 import * as i1$1 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
+import { Tree } from '@masterteam/components/tree';
 import * as i1 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
-import * as i2 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
 
 const STATUS_VISUAL = {
     Active: {
@@ -1529,6 +1528,16 @@ function normalizeGrant(g) {
         constraints: g.constraints ?? [],
     };
 }
+function sameSelectionKeys(left, right) {
+    const leftKeys = (left ?? [])
+        .map((node) => node.key)
+        .filter((key) => !!key);
+    if (leftKeys.length !== right.length) {
+        return false;
+    }
+    const rightSet = new Set(right);
+    return leftKeys.every((key) => rightSet.has(key));
+}
 /**
  * Hierarchy-based scope picker (doc 03). Driven entirely by `scope/options`:
  * - renders backend-owned Level -> Level Module -> operations hierarchy,
@@ -1556,9 +1565,24 @@ class ScopePicker {
     isPreviewing = this.facade.isPreviewingScope;
     errorOptions = this.facade.errorScopeOptions;
     groups = computed(() => getDelegationGrantableGroups(this.options()), ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    activeLang = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
     /** Selected grant keys for O(1) checkbox state. */
     selectedKeys = computed(() => new Set(this.scope().grants.map(grantKey)), ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
-    expanded = signal(new Set(), ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    treeSelection = signal([], ...(ngDevMode ? [{ debugName: "treeSelection" }] : /* istanbul ignore next */ []));
+    treeNodes = computed(() => this.buildTreeNodes(this.groups()), ...(ngDevMode ? [{ debugName: "treeNodes" }] : /* istanbul ignore next */ []));
+    grantIndex = computed(() => {
+        const index = new Map();
+        for (const group of this.groups()) {
+            for (const targetGroup of group.targets) {
+                for (const grant of targetGroup.grants) {
+                    index.set(grantKey(grant), normalizeGrant(grant));
+                }
+            }
+        }
+        return index;
+    }, ...(ngDevMode ? [{ debugName: "grantIndex" }] : /* istanbul ignore next */ []));
     constructor() {
         // Load (and reload) grantable options whenever the delegator changes.
         let initialized = false;
@@ -1574,7 +1598,7 @@ class ScopePicker {
             if (lastDelegatorUserId !== delegator) {
                 lastDelegatorUserId = delegator;
                 this.scope.set(EMPTY_SCOPE$1);
-                this.expanded.set(new Set());
+                this.treeSelection.set([]);
                 this.facade.clearScopePreview();
             }
         });
@@ -1591,48 +1615,29 @@ class ScopePicker {
                 timer = setTimeout(() => this.facade.previewScope(s), 300);
             });
         });
-        let lastGroupKeys = '';
         effect(() => {
-            const groups = this.groups();
-            const nextGroupKeys = groups.map((group) => group.key).join('|');
-            if (!nextGroupKeys) {
-                lastGroupKeys = '';
-                this.expanded.set(new Set());
-                return;
-            }
-            if (nextGroupKeys === lastGroupKeys) {
+            const selectedKeys = Array.from(this.selectedKeys());
+            const selection = this.treeSelection();
+            if (sameSelectionKeys(selection, selectedKeys)) {
                 return;
             }
-            lastGroupKeys = nextGroupKeys;
-            this.expanded.set(new Set(groups.map((group) => group.key)));
+            this.treeSelection.set(selectedKeys.map((key) => ({
+                key,
+            })));
         });
     }
-    isExpanded(group) {
-        return this.expanded().has(group.key);
-    }
-    toggleAccordion(group) {
-        const next = new Set(this.expanded());
-        if (next.has(group.key))
-            next.delete(group.key);
-        else
-            next.add(group.key);
-        this.expanded.set(next);
-    }
-    isSelected(grant) {
-        return this.selectedKeys().has(grantKey(grant));
-    }
-    getGroupLabel(group) {
-        return (formatDelegationDisplayValue(group.displayName, this.currentLanguage()) ||
-            humanizeDelegationKey(group.groupType));
-    }
-    getTargetLabel(target) {
-        return formatDelegationTargetLabel(target, this.currentLanguage());
-    }
-    getActionLabel(grant) {
-        return formatDelegationActionLabel(grant.action, this.currentLanguage());
-    }
-    getTargetActions(targetGroup) {
-        return targetGroup.grants;
+    onTreeAction(event) {
+        if (event.action !== 'selectionChange' || this.readonly()) {
+            return;
+        }
+        const index = this.grantIndex();
+        const grants = (this.treeSelection() ?? [])
+            .map((node) => (node.key ? index.get(node.key) : undefined))
+            .filter((grant) => !!grant);
+        this.scope.update((scope) => ({
+            ...scope,
+            grants,
+        }));
     }
     getPreviewSummary(summary) {
         return formatDelegationScopeSummary(summary, this.currentLanguage());
@@ -1643,44 +1648,53 @@ class ScopePicker {
     formatDeniedTarget(value) {
         return humanizeDelegationKey(value);
     }
-    toggleGrant(grant) {
-        if (this.readonly())
-            return;
-        const key = grantKey(grant);
-        this.scope.update((s) => {
-            const exists = s.grants.some((g) => grantKey(g) === key);
-            const grants = exists
-                ? s.grants.filter((g) => grantKey(g) !== key)
-                : [...s.grants, normalizeGrant(grant)];
-            return { ...s, grants };
-        });
+    buildTreeNodes(groups) {
+        return groups.map((group) => ({
+            key: `group:${group.key}`,
+            label: this.getGroupLabel(group),
+            selectable: false,
+            expanded: true,
+            children: group.targets.map((targetGroup) => this.buildTargetNode(targetGroup)),
+        }));
     }
-    selectedCount(group) {
-        const keys = this.selectedKeys();
-        return group.targets.reduce((count, targetGroup) => count +
-            targetGroup.grants.filter((grant) => keys.has(grantKey(grant))).length, 0);
+    buildTargetNode(targetGroup) {
+        return {
+            key: `target:${targetGroup.key}`,
+            label: this.getTargetLabel(targetGroup),
+            selectable: false,
+            expanded: true,
+            children: targetGroup.grants.map((grant) => ({
+                key: grantKey(grant),
+                label: this.getActionLabel(grant),
+                selectable: !this.readonly(),
+            })),
+        };
     }
-    selectedTargetCount(targetGroup) {
-        const keys = this.selectedKeys();
-        return targetGroup.grants.filter((grant) => keys.has(grantKey(grant)))
-            .length;
+    getGroupLabel(group) {
+        return group.displayName
+            ? humanizeDelegationDisplay(group.displayName, this.currentLanguage())
+            : humanizeDelegationKey(group.groupType);
+    }
+    getTargetLabel(targetGroup) {
+        return formatDelegationTargetLabel(targetGroup.target, this.currentLanguage());
+    }
+    getActionLabel(grant) {
+        return formatDelegationActionLabel(grant.action, this.currentLanguage());
     }
     currentLanguage() {
-        return this.transloco.getActiveLang();
+        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 }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"mt-scope-picker flex flex-col gap-4\">\n    @if (isLoadingOptions()) {\n      <p-skeleton height=\"2rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n    } @else {\n      <section class=\"flex flex-col gap-2\">\n        @if (errorOptions(); as errorMessage) {\n          <div\n            class=\"rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700\"\n          >\n            {{ errorMessage }}\n          </div>\n        }\n\n        @if (groups().length === 0 && !errorOptions()) {\n          <p class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noGrantableOptions\") }}\n          </p>\n        }\n\n        @for (group of groups(); track group.key) {\n          <div class=\"overflow-hidden rounded-md border border-gray-200\">\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center justify-between px-3 py-2 hover:bg-surface-50\"\n              (click)=\"toggleAccordion(group)\"\n            >\n              <div class=\"flex min-w-0 items-center gap-2\">\n                <mt-icon\n                  [icon]=\"\n                    isExpanded(group)\n                      ? 'arrow.chevron-down'\n                      : 'arrow.chevron-right'\n                  \"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n                <span class=\"truncate text-sm text-gray-900\">\n                  {{ getGroupLabel(group) }}\n                </span>\n              </div>\n              @if (selectedCount(group); as selectedGrantCount) {\n                @if (selectedGrantCount > 0) {\n                  <span\n                    class=\"rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary\"\n                  >\n                    {{ selectedGrantCount }}\n                  </span>\n                }\n              }\n            </button>\n\n            @if (isExpanded(group)) {\n              <div\n                class=\"mt-scope-picker__group flex flex-col gap-3 bg-surface-50/40 px-3 py-3\"\n              >\n                @for (targetGroup of group.targets; track targetGroup.key) {\n                  <section\n                    class=\"rounded-md border border-surface-200 bg-white px-3 py-3\"\n                  >\n                    <div\n                      class=\"flex flex-wrap items-center justify-between gap-2\"\n                    >\n                      <div class=\"min-w-0\">\n                        <div class=\"truncate text-sm font-medium text-gray-900\">\n                          {{ getTargetLabel(targetGroup.target) }}\n                        </div>\n                      </div>\n                      @if (\n                        selectedTargetCount(targetGroup);\n                        as selectedTargetGrantCount\n                      ) {\n                        @if (selectedTargetGrantCount > 0) {\n                          <span\n                            class=\"rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary\"\n                          >\n                            {{ selectedTargetGrantCount }}\n                          </span>\n                        }\n                      }\n                    </div>\n\n                    <div\n                      class=\"mt-scope-picker__actions mt-3 flex flex-col gap-1\"\n                    >\n                      @for (\n                        grant of getTargetActions(targetGroup);\n                        track $index\n                      ) {\n                        <label\n                          class=\"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-surface-100\"\n                        >\n                          <input\n                            type=\"checkbox\"\n                            [checked]=\"isSelected(grant)\"\n                            [disabled]=\"readonly()\"\n                            (change)=\"toggleGrant(grant)\"\n                          />\n                          <span class=\"text-sm\">\n                            {{ getActionLabel(grant) }}\n                          </span>\n                          @if (grant.action.isHighRisk) {\n                            <mt-icon\n                              icon=\"alert.alert-triangle\"\n                              styleClass=\"text-sm text-amber-500\"\n                              [pTooltip]=\"t('delegations.scope.highRisk')\"\n                              tooltipPosition=\"top\"\n                            ></mt-icon>\n                          }\n                        </label>\n                      }\n                    </div>\n                  </section>\n                } @empty {\n                  <div class=\"text-xs text-gray-500\">\n                    {{ t(\"delegations.scope.noGrantableOptions\") }}\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </section>\n\n      <section\n        class=\"flex flex-col gap-1 rounded-md border border-dashed border-gray-300 bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-xs font-medium text-gray-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm text-gray-900\">\n              {{\n                getPreviewSummary(p.summary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n          } @else {\n            <div class=\"text-sm text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-amber-700\">\n              @for (w of p.warnings; track w.message) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-red-700\">\n              @for (d of p.deniedItems; track d.operationKey) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ScopePicker, isStandalone: true, selector: "mt-scope-picker", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4\">\n    @if (isLoadingOptions()) {\n      <p-skeleton height=\"2rem\"></p-skeleton>\n      <p-skeleton height=\"8rem\"></p-skeleton>\n      <p-skeleton height=\"8rem\"></p-skeleton>\n    } @else {\n      <section class=\"flex flex-col gap-3\">\n        @if (errorOptions(); as errorMessage) {\n          <div\n            class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700\"\n          >\n            {{ errorMessage }}\n          </div>\n        }\n\n        @if (groups().length === 0 && !errorOptions()) {\n          <div\n            class=\"rounded-xl border border-dashed border-surface-300 bg-surface-50 px-4 py-3 text-sm text-surface-500\"\n          >\n            {{ t(\"delegations.scope.noGrantableOptions\") }}\n          </div>\n        }\n\n        @if (groups().length > 0) {\n          <div class=\"rounded-2xl border border-surface-200 bg-surface-0 p-2\">\n            <mt-tree\n              [value]=\"treeNodes()\"\n              [(selection)]=\"treeSelection\"\n              selectionMode=\"checkbox\"\n              [loading]=\"isLoadingOptions()\"\n              [checkAllChildren]=\"!readonly()\"\n              (action)=\"onTreeAction($event)\"\n              [filter]=\"true\"\n              filterMode=\"lenient\"\n              scrollHeight=\"22rem\"\n              [virtualScroll]=\"true\"\n              [virtualScrollItemSize]=\"68\"\n            />\n          </div>\n        }\n      </section>\n\n      <section\n        class=\"flex flex-col gap-2 rounded-2xl border border-dashed border-surface-300 bg-surface-50 px-4 py-3\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-sm font-medium text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm text-surface-900\">\n              {{\n                getPreviewSummary(p.summary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n          } @else {\n            <div class=\"text-sm text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-amber-700\">\n              @for (w of p.warnings; track w.message) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-red-700\">\n              @for (d of p.deniedItems; track d.operationKey) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-surface-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tree, selector: "mt-tree", inputs: ["value", "selection", "selectionMode", "nodeIcon", "propagateSelectionUp", "propagateSelectionDown", "checkAllChildren", "loading", "emptyMessage", "checkAllLabel", "filterPlaceholder", "dataKey", "filter", "filterMode", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "styleClass", "style", "pInputs", "nodeActions", "nodeContextmenuActions", "contextMenuSelection"], outputs: ["selectionChange", "contextMenuSelectionChange", "action"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-scope-picker', standalone: true, imports: [
-                        CommonModule,
-                        Icon,
-                        SkeletonModule,
-                        TooltipModule,
-                        TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"mt-scope-picker flex flex-col gap-4\">\n    @if (isLoadingOptions()) {\n      <p-skeleton height=\"2rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n      <p-skeleton height=\"6rem\"></p-skeleton>\n    } @else {\n      <section class=\"flex flex-col gap-2\">\n        @if (errorOptions(); as errorMessage) {\n          <div\n            class=\"rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700\"\n          >\n            {{ errorMessage }}\n          </div>\n        }\n\n        @if (groups().length === 0 && !errorOptions()) {\n          <p class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noGrantableOptions\") }}\n          </p>\n        }\n\n        @for (group of groups(); track group.key) {\n          <div class=\"overflow-hidden rounded-md border border-gray-200\">\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center justify-between px-3 py-2 hover:bg-surface-50\"\n              (click)=\"toggleAccordion(group)\"\n            >\n              <div class=\"flex min-w-0 items-center gap-2\">\n                <mt-icon\n                  [icon]=\"\n                    isExpanded(group)\n                      ? 'arrow.chevron-down'\n                      : 'arrow.chevron-right'\n                  \"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n                <span class=\"truncate text-sm text-gray-900\">\n                  {{ getGroupLabel(group) }}\n                </span>\n              </div>\n              @if (selectedCount(group); as selectedGrantCount) {\n                @if (selectedGrantCount > 0) {\n                  <span\n                    class=\"rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary\"\n                  >\n                    {{ selectedGrantCount }}\n                  </span>\n                }\n              }\n            </button>\n\n            @if (isExpanded(group)) {\n              <div\n                class=\"mt-scope-picker__group flex flex-col gap-3 bg-surface-50/40 px-3 py-3\"\n              >\n                @for (targetGroup of group.targets; track targetGroup.key) {\n                  <section\n                    class=\"rounded-md border border-surface-200 bg-white px-3 py-3\"\n                  >\n                    <div\n                      class=\"flex flex-wrap items-center justify-between gap-2\"\n                    >\n                      <div class=\"min-w-0\">\n                        <div class=\"truncate text-sm font-medium text-gray-900\">\n                          {{ getTargetLabel(targetGroup.target) }}\n                        </div>\n                      </div>\n                      @if (\n                        selectedTargetCount(targetGroup);\n                        as selectedTargetGrantCount\n                      ) {\n                        @if (selectedTargetGrantCount > 0) {\n                          <span\n                            class=\"rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary\"\n                          >\n                            {{ selectedTargetGrantCount }}\n                          </span>\n                        }\n                      }\n                    </div>\n\n                    <div\n                      class=\"mt-scope-picker__actions mt-3 flex flex-col gap-1\"\n                    >\n                      @for (\n                        grant of getTargetActions(targetGroup);\n                        track $index\n                      ) {\n                        <label\n                          class=\"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-surface-100\"\n                        >\n                          <input\n                            type=\"checkbox\"\n                            [checked]=\"isSelected(grant)\"\n                            [disabled]=\"readonly()\"\n                            (change)=\"toggleGrant(grant)\"\n                          />\n                          <span class=\"text-sm\">\n                            {{ getActionLabel(grant) }}\n                          </span>\n                          @if (grant.action.isHighRisk) {\n                            <mt-icon\n                              icon=\"alert.alert-triangle\"\n                              styleClass=\"text-sm text-amber-500\"\n                              [pTooltip]=\"t('delegations.scope.highRisk')\"\n                              tooltipPosition=\"top\"\n                            ></mt-icon>\n                          }\n                        </label>\n                      }\n                    </div>\n                  </section>\n                } @empty {\n                  <div class=\"text-xs text-gray-500\">\n                    {{ t(\"delegations.scope.noGrantableOptions\") }}\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n      </section>\n\n      <section\n        class=\"flex flex-col gap-1 rounded-md border border-dashed border-gray-300 bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-xs font-medium text-gray-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm text-gray-900\">\n              {{\n                getPreviewSummary(p.summary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n          } @else {\n            <div class=\"text-sm text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-amber-700\">\n              @for (w of p.warnings; track w.message) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-red-700\">\n              @for (d of p.deniedItems; track d.operationKey) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-gray-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'mt-scope-picker', imports: [CommonModule, Tree, SkeletonModule, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4\">\n    @if (isLoadingOptions()) {\n      <p-skeleton height=\"2rem\"></p-skeleton>\n      <p-skeleton height=\"8rem\"></p-skeleton>\n      <p-skeleton height=\"8rem\"></p-skeleton>\n    } @else {\n      <section class=\"flex flex-col gap-3\">\n        @if (errorOptions(); as errorMessage) {\n          <div\n            class=\"rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700\"\n          >\n            {{ errorMessage }}\n          </div>\n        }\n\n        @if (groups().length === 0 && !errorOptions()) {\n          <div\n            class=\"rounded-xl border border-dashed border-surface-300 bg-surface-50 px-4 py-3 text-sm text-surface-500\"\n          >\n            {{ t(\"delegations.scope.noGrantableOptions\") }}\n          </div>\n        }\n\n        @if (groups().length > 0) {\n          <div class=\"rounded-2xl border border-surface-200 bg-surface-0 p-2\">\n            <mt-tree\n              [value]=\"treeNodes()\"\n              [(selection)]=\"treeSelection\"\n              selectionMode=\"checkbox\"\n              [loading]=\"isLoadingOptions()\"\n              [checkAllChildren]=\"!readonly()\"\n              (action)=\"onTreeAction($event)\"\n              [filter]=\"true\"\n              filterMode=\"lenient\"\n              scrollHeight=\"22rem\"\n              [virtualScroll]=\"true\"\n              [virtualScrollItemSize]=\"68\"\n            />\n          </div>\n        }\n      </section>\n\n      <section\n        class=\"flex flex-col gap-2 rounded-2xl border border-dashed border-surface-300 bg-surface-50 px-4 py-3\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-sm font-medium text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm text-surface-900\">\n              {{\n                getPreviewSummary(p.summary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n          } @else {\n            <div class=\"text-sm text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-amber-700\">\n              @for (w of p.warnings; track w.message) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc text-xs text-red-700\">\n              @for (d of p.deniedItems; track d.operationKey) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-surface-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\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 }] }], delegatorUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegatorUserId", required: false }] }] } });
+function humanizeDelegationDisplay(value, language) {
+    return (formatDelegationScopeSummary(value, language) ||
+        humanizeDelegationKey(typeof value === 'string' ? value : null));
+}
 
 const EMPTY_SCOPE = { grants: [], metadata: {} };
 function getCurrentDelegatorFromLocalStorage() {
@@ -2014,7 +2028,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      'delegation-form-content flex min-w-0 flex-col gap-4 overflow-x-hidden p-4 max-[640px]:p-3 ' +\n      modal.contentClass\n    \"\n  >\n    <section class=\"delegation-form-section\">\n      <mt-dynamic-form\n        [formConfig]=\"formConfig()\"\n        [formControl]=\"delegationFormControl\"\n      />\n    </section>\n\n    <section class=\"delegation-form-section delegation-form-section--scope\">\n      <header class=\"delegation-form-section__header\">\n        <h3 class=\"delegation-form-section__title\">\n          {{ t(\"delegations.scope.permissionsTitle\") }}\n        </h3>\n        @if (adminMode() && !showScopePicker()) {\n          <p class=\"delegation-form-section__subtitle\">\n            {{ t(\"delegations.form.selectDelegatorFirst\") }}\n          </p>\n        }\n      </header>\n\n      @if (showScopePicker()) {\n        <mt-scope-picker\n          [(scope)]=\"scope\"\n          [readonly]=\"readonly()\"\n          [delegatorUserId]=\"selectedDelegatorId()\"\n        ></mt-scope-picker>\n      } @else {\n        <div class=\"delegation-form-section__empty\">\n          {{ t(\"delegations.form.selectDelegatorFirst\") }}\n        </div>\n      }\n    </section>\n  </div>\n\n  <div\n    [class]=\"\n      'delegation-form-footer ' +\n      modal.footerClass +\n      ' flex-col gap-2 sm:flex-row sm:items-center sm:justify-end'\n    \"\n  >\n    <mt-button\n      [label]=\"t('delegations.common.cancel')\"\n      variant=\"outlined\"\n      (click)=\"ref.close()\"\n      styleClass=\"w-full sm:w-auto\"\n    />\n    @if (!readonly()) {\n      <mt-button\n        [label]=\"\n          delegationForEdit()\n            ? t('delegations.common.update')\n            : t('delegations.common.create')\n        \"\n        [loading]=\"isSaving()\"\n        [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\n        (click)=\"onSubmit()\"\n        styleClass=\"w-full sm:w-auto\"\n      />\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block}.delegation-form-section{display:flex;flex-direction:column;gap:1rem;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:1rem;background:color-mix(in srgb,var(--p-surface-0, #ffffff) 92%,var(--p-primary-50, #eff6ff));padding:1rem}.delegation-form-section--scope{gap:.75rem}.delegation-form-section__header{display:flex;flex-direction:column;gap:.25rem}.delegation-form-section__title{margin:0;font-size:.95rem;font-weight:600;color:var(--p-surface-900, #111827)}.delegation-form-section__subtitle{margin:0;font-size:.8rem;color:var(--p-surface-500, #6b7280)}.delegation-form-section__empty{border:1px dashed var(--p-surface-300, #d1d5db);border-radius:.875rem;background:var(--p-surface-50, #f8fafc);padding:.875rem 1rem;font-size:.85rem;color:var(--p-surface-500, #6b7280)}@media(max-width:640px){.delegation-form-section{border-radius:.875rem;padding:.875rem}}\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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScopePicker, selector: "mt-scope-picker", inputs: ["scope", "readonly", "delegatorUserId"], outputs: ["scopeChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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=\"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 max-[640px]:p-3\"\n    >\n      <section\n        class=\"flex flex-col gap-4 rounded-2xl border border-surface-200 bg-surface-0 p-4\"\n      >\n        <mt-dynamic-form\n          [formConfig]=\"formConfig()\"\n          [formControl]=\"delegationFormControl\"\n        />\n      </section>\n\n      <section\n        class=\"flex flex-col gap-4 rounded-2xl border border-surface-200 bg-surface-0 p-4\"\n      >\n        <div class=\"flex flex-col gap-1\">\n          <h3 class=\"text-sm font-semibold text-surface-900\">\n            {{ t(\"delegations.scope.permissionsTitle\") }}\n          </h3>\n          @if (adminMode() && !showScopePicker()) {\n            <p class=\"text-xs text-surface-500\">\n              {{ t(\"delegations.form.selectDelegatorFirst\") }}\n            </p>\n          }\n        </div>\n\n        @if (showScopePicker()) {\n          <mt-scope-picker\n            [(scope)]=\"scope\"\n            [readonly]=\"readonly()\"\n            [delegatorUserId]=\"selectedDelegatorId()\"\n          ></mt-scope-picker>\n        } @else {\n          <div\n            class=\"rounded-xl border border-dashed border-surface-300 bg-surface-50 px-4 py-3 text-sm text-surface-500\"\n          >\n            {{ t(\"delegations.form.selectDelegatorFirst\") }}\n          </div>\n        }\n      </section>\n    </div>\n\n    <div\n      [class]=\"\n        'flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-end ' +\n        modal.footerClass\n      \"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n        styleClass=\"w-full sm:w-auto\"\n      />\n      @if (!readonly()) {\n        <mt-button\n          [label]=\"\n            delegationForEdit()\n              ? t('delegations.common.update')\n              : t('delegations.common.create')\n          \"\n          [loading]=\"isSaving()\"\n          [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\n          (click)=\"onSubmit()\"\n          styleClass=\"w-full sm:w-auto\"\n        />\n      }\n    </div>\n  </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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScopePicker, selector: "mt-scope-picker", inputs: ["scope", "readonly", "delegatorUserId"], outputs: ["scopeChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationForm, decorators: [{
             type: Component,
@@ -2025,7 +2039,7 @@ 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      'delegation-form-content flex min-w-0 flex-col gap-4 overflow-x-hidden p-4 max-[640px]:p-3 ' +\n      modal.contentClass\n    \"\n  >\n    <section class=\"delegation-form-section\">\n      <mt-dynamic-form\n        [formConfig]=\"formConfig()\"\n        [formControl]=\"delegationFormControl\"\n      />\n    </section>\n\n    <section class=\"delegation-form-section delegation-form-section--scope\">\n      <header class=\"delegation-form-section__header\">\n        <h3 class=\"delegation-form-section__title\">\n          {{ t(\"delegations.scope.permissionsTitle\") }}\n        </h3>\n        @if (adminMode() && !showScopePicker()) {\n          <p class=\"delegation-form-section__subtitle\">\n            {{ t(\"delegations.form.selectDelegatorFirst\") }}\n          </p>\n        }\n      </header>\n\n      @if (showScopePicker()) {\n        <mt-scope-picker\n          [(scope)]=\"scope\"\n          [readonly]=\"readonly()\"\n          [delegatorUserId]=\"selectedDelegatorId()\"\n        ></mt-scope-picker>\n      } @else {\n        <div class=\"delegation-form-section__empty\">\n          {{ t(\"delegations.form.selectDelegatorFirst\") }}\n        </div>\n      }\n    </section>\n  </div>\n\n  <div\n    [class]=\"\n      'delegation-form-footer ' +\n      modal.footerClass +\n      ' flex-col gap-2 sm:flex-row sm:items-center sm:justify-end'\n    \"\n  >\n    <mt-button\n      [label]=\"t('delegations.common.cancel')\"\n      variant=\"outlined\"\n      (click)=\"ref.close()\"\n      styleClass=\"w-full sm:w-auto\"\n    />\n    @if (!readonly()) {\n      <mt-button\n        [label]=\"\n          delegationForEdit()\n            ? t('delegations.common.update')\n            : t('delegations.common.create')\n        \"\n        [loading]=\"isSaving()\"\n        [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\n        (click)=\"onSubmit()\"\n        styleClass=\"w-full sm:w-auto\"\n      />\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block}.delegation-form-section{display:flex;flex-direction:column;gap:1rem;border:1px solid var(--p-surface-200, #e5e7eb);border-radius:1rem;background:color-mix(in srgb,var(--p-surface-0, #ffffff) 92%,var(--p-primary-50, #eff6ff));padding:1rem}.delegation-form-section--scope{gap:.75rem}.delegation-form-section__header{display:flex;flex-direction:column;gap:.25rem}.delegation-form-section__title{margin:0;font-size:.95rem;font-weight:600;color:var(--p-surface-900, #111827)}.delegation-form-section__subtitle{margin:0;font-size:.8rem;color:var(--p-surface-500, #6b7280)}.delegation-form-section__empty{border:1px dashed var(--p-surface-300, #d1d5db);border-radius:.875rem;background:var(--p-surface-50, #f8fafc);padding:.875rem 1rem;font-size:.85rem;color:var(--p-surface-500, #6b7280)}@media(max-width:640px){.delegation-form-section{border-radius:.875rem;padding:.875rem}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\n      modal.contentClass\n    \"\n  >\n    <div\n      class=\"flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4 max-[640px]:p-3\"\n    >\n      <section\n        class=\"flex flex-col gap-4 rounded-2xl border border-surface-200 bg-surface-0 p-4\"\n      >\n        <mt-dynamic-form\n          [formConfig]=\"formConfig()\"\n          [formControl]=\"delegationFormControl\"\n        />\n      </section>\n\n      <section\n        class=\"flex flex-col gap-4 rounded-2xl border border-surface-200 bg-surface-0 p-4\"\n      >\n        <div class=\"flex flex-col gap-1\">\n          <h3 class=\"text-sm font-semibold text-surface-900\">\n            {{ t(\"delegations.scope.permissionsTitle\") }}\n          </h3>\n          @if (adminMode() && !showScopePicker()) {\n            <p class=\"text-xs text-surface-500\">\n              {{ t(\"delegations.form.selectDelegatorFirst\") }}\n            </p>\n          }\n        </div>\n\n        @if (showScopePicker()) {\n          <mt-scope-picker\n            [(scope)]=\"scope\"\n            [readonly]=\"readonly()\"\n            [delegatorUserId]=\"selectedDelegatorId()\"\n          ></mt-scope-picker>\n        } @else {\n          <div\n            class=\"rounded-xl border border-dashed border-surface-300 bg-surface-50 px-4 py-3 text-sm text-surface-500\"\n          >\n            {{ t(\"delegations.form.selectDelegatorFirst\") }}\n          </div>\n        }\n      </section>\n    </div>\n\n    <div\n      [class]=\"\n        'flex shrink-0 flex-col gap-2 sm:flex-row sm:items-center sm:justify-end ' +\n        modal.footerClass\n      \"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n        styleClass=\"w-full sm:w-auto\"\n      />\n      @if (!readonly()) {\n        <mt-button\n          [label]=\"\n            delegationForEdit()\n              ? t('delegations.common.update')\n              : t('delegations.common.create')\n          \"\n          [loading]=\"isSaving()\"\n          [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\n          (click)=\"onSubmit()\"\n          styleClass=\"w-full sm:w-auto\"\n        />\n      }\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { delegationForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegationForEdit", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }] } });
 
 /**
@@ -2064,7 +2078,7 @@ class DelegationDetailDrawer {
         return formatDelegationScopeSummary(summary, this.transloco.getActiveLang());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track tab.key) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-avatar\n                  icon=\"user.user-01\"\n                  styleClass=\"w-12! h-12! text-lg!\"\n                ></mt-avatar>\n                <div class=\"flex flex-col min-w-0\">\n                  <div class=\"text-xs text-gray-500\">\n                    {{ t(\"delegations.column.delegatorName\") }}\n                  </div>\n                  <div class=\"text-base font-medium text-gray-900 truncate\">\n                    {{ d.row.delegator.displayName }}\n                  </div>\n                  @if (d.row.delegator.email) {\n                    <div class=\"text-xs text-gray-500 truncate\">\n                      {{ d.row.delegator.email }}\n                    </div>\n                  }\n                </div>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.delegatedTo\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.delegatedUser.displayName }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{\n                formatScopeSummary(d.row.scopeSummary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ getScopeTargetLabel(grant.target) }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ getScopeActionLabel(grant.action) }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track tab.key) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-avatar\n                  icon=\"user.user-01\"\n                  styleClass=\"w-12! h-12! text-lg!\"\n                ></mt-avatar>\n                <div class=\"flex flex-col min-w-0\">\n                  <div class=\"text-xs text-gray-500\">\n                    {{ t(\"delegations.column.delegatorName\") }}\n                  </div>\n                  <div class=\"text-base font-medium text-gray-900 truncate\">\n                    {{ d.row.delegator.displayName }}\n                  </div>\n                  @if (d.row.delegator.email) {\n                    <div class=\"text-xs text-gray-500 truncate\">\n                      {{ d.row.delegator.email }}\n                    </div>\n                  }\n                </div>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.delegatedTo\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.delegatedUser.displayName }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{\n                formatScopeSummary(d.row.scopeSummary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ getScopeTargetLabel(grant.target) }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ getScopeActionLabel(grant.action) }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, decorators: [{
             type: Component,
@@ -2104,6 +2118,7 @@ class DelegationsList {
     assignedEmptyStateKey = input('delegations.empty.assigned', ...(ngDevMode ? [{ debugName: "assignedEmptyStateKey" }] : /* istanbul ignore next */ []));
     assignedStatus = input(null, ...(ngDevMode ? [{ debugName: "assignedStatus" }] : /* istanbul ignore next */ []));
     facade = inject(DelegationsFacade);
+    location = inject(Location);
     modal = inject(ModalService);
     transloco = inject(TranslocoService);
     breadcrumbItems = linkedSignal(() => [
@@ -2139,6 +2154,7 @@ class DelegationsList {
         : this.activeTab() === 'my'
             ? this.facade.isLoadingMy()
             : this.facade.isLoadingAssigned(), ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    isLoadingScopeOptions = this.facade.isLoadingScopeOptions;
     scopeOptions = this.facade.scopeOptions;
     rows = computed(() => this.adminMode()
         ? this.facade.adminItems()
@@ -2159,6 +2175,8 @@ class DelegationsList {
     canCreate = computed(() => {
         if (this.adminMode())
             return true;
+        if (this.isLoadingScopeOptions())
+            return true;
         return hasDelegationGrantableScope(this.scopeOptions());
     }, ...(ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []));
     tableActions = computed(() => this.canCreate()
@@ -2317,6 +2335,9 @@ class DelegationsList {
         this.activeTab.set(tab);
         this.loadCurrentTab();
     }
+    goBack() {
+        this.location.back();
+    }
     loadCurrentTab(query = { page: 1, pageSize: 25 }) {
         if (this.adminMode()) {
             this.facade.getAdmin(query);
@@ -2369,7 +2390,7 @@ class DelegationsList {
             header: this.transloco.translate(row ? 'delegations.action.edit' : 'delegations.action.create'),
             styleClass: row
                 ? '!absolute !shadow-none !w-full !max-w-full sm:!w-[42rem] xl:!w-[50rem]'
-                : '!w-[min(96vw,50rem)] !max-w-[96vw] !h-[min(90vh,40rem)] !max-h-[90vh]',
+                : '!w-[min(96vw,52rem)] !max-w-[96vw] !h-[min(92vh,46rem)] !max-h-[92vh] !overflow-hidden',
             position: row ? 'end' : '',
             appendTo: row ? 'page-content' : 'body',
             dismissableMask: true,
@@ -2429,7 +2450,7 @@ class DelegationsList {
         this.busyIds.update((ids) => on ? [...ids, key] : ids.filter((id) => id !== key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, 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 } }, viewQueries: [{ propertyName: "statusCol", first: true, predicate: ["statusCol"], descendants: true, isSignal: true }, { propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }, { propertyName: "delegatorCol", first: true, predicate: ["delegatorCol"], descendants: true, isSignal: true }, { propertyName: "delegatedUserCol", first: true, predicate: ["delegatedUserCol"], descendants: true, isSignal: true }, { propertyName: "scopeCol", first: true, predicate: ["scopeCol"], descendants: true, isSignal: true }, { propertyName: "daysCol", first: true, predicate: ["daysCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex h-full flex-col gap-4 p-4\">\n    @if (showBreadcrumb()) {\n      <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\n    }\n\n    <mt-card [title]=\"surfaceTitle()\">\n      <div class=\"flex flex-col gap-4\">\n        @if (!adminMode()) {\n          <div class=\"flex items-center gap-2 border-b border-gray-200\">\n            @for (tab of tabs(); track tab.value) {\n              <button\n                type=\"button\"\n                class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n                [class.border-primary]=\"activeTab() === tab.value\"\n                [class.text-primary]=\"activeTab() === tab.value\"\n                [class.border-transparent]=\"activeTab() !== tab.value\"\n                [class.text-gray-500]=\"activeTab() !== tab.value\"\n                (click)=\"switchTab(tab.value)\"\n              >\n                {{ tab.label }}\n              </button>\n            }\n          </div>\n        }\n\n        <mt-table\n          [data]=\"rows()\"\n          [columns]=\"tableColumns()\"\n          [actions]=\"tableActions()\"\n          [rowActions]=\"rowActions()\"\n          [freezeActions]=\"true\"\n          [loading]=\"isLoading()\"\n          [noCard]=\"true\"\n        >\n          <ng-template #statusCol let-row>\n            <mt-delegation-status-chip\n              [status]=\"row.effectiveStatus\"\n            ></mt-delegation-status-chip>\n          </ng-template>\n\n          <ng-template #userCol let-row>\n            @let party = getListedParty(row);\n            <div class=\"flex items-center gap-2\">\n              <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n              <div class=\"flex min-w-0 flex-col\">\n                <span class=\"truncate text-sm text-gray-900\">\n                  {{ party?.displayName }}\n                </span>\n                @if (party?.email) {\n                  <span class=\"truncate text-xs text-gray-500\">\n                    {{ party.email }}\n                  </span>\n                }\n              </div>\n            </div>\n          </ng-template>\n\n          <ng-template #delegatorCol let-row>\n            <div class=\"flex items-center gap-2\">\n              <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n              <div class=\"flex min-w-0 flex-col\">\n                <span class=\"truncate text-sm text-gray-900\">\n                  {{ row.delegator?.displayName }}\n                </span>\n                @if (row.delegator?.email) {\n                  <span class=\"truncate text-xs text-gray-500\">\n                    {{ row.delegator.email }}\n                  </span>\n                }\n              </div>\n            </div>\n          </ng-template>\n\n          <ng-template #delegatedUserCol let-row>\n            <div class=\"flex items-center gap-2\">\n              <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n              <div class=\"flex min-w-0 flex-col\">\n                <span class=\"truncate text-sm text-gray-900\">\n                  {{ row.delegatedUser?.displayName }}\n                </span>\n                @if (row.delegatedUser?.email) {\n                  <span class=\"truncate text-xs text-gray-500\">\n                    {{ row.delegatedUser.email }}\n                  </span>\n                }\n              </div>\n            </div>\n          </ng-template>\n\n          <ng-template #scopeCol let-row>\n            @let summary = formatScopeSummary(row.scopeSummary);\n            <span class=\"text-sm text-gray-700\" [title]=\"summary\">\n              {{ summary || \"--\" }}\n            </span>\n          </ng-template>\n\n          <ng-template #daysCol let-row>\n            <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\n          </ng-template>\n\n          <ng-template #empty>\n            <p class=\"text-sm text-surface-500\">\n              {{ t(emptyStateKey()) }}\n            </p>\n          </ng-template>\n        </mt-table>\n      </div>\n    </mt-card>\n  </div>\n</ng-container>\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-table{min-width:72rem}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}@media(max-width:768px){:host ::ng-deep mt-table .p-datatable-table{min-width:64rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, 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 } }, viewQueries: [{ propertyName: "statusCol", first: true, predicate: ["statusCol"], descendants: true, isSignal: true }, { propertyName: "userCol", first: true, predicate: ["userCol"], descendants: true, isSignal: true }, { propertyName: "delegatorCol", first: true, predicate: ["delegatorCol"], descendants: true, isSignal: true }, { propertyName: "delegatedUserCol", first: true, predicate: ["delegatedUserCol"], descendants: true, isSignal: true }, { propertyName: "scopeCol", first: true, predicate: ["scopeCol"], descendants: true, isSignal: true }, { propertyName: "daysCol", first: true, predicate: ["daysCol"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <ng-template #tableContent>\n    <div class=\"flex flex-col gap-4\">\n      @if (!adminMode()) {\n        <div class=\"flex items-center gap-2 border-b border-gray-200\">\n          @for (tab of tabs(); track tab.value) {\n            <button\n              type=\"button\"\n              class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n              [class.border-primary]=\"activeTab() === tab.value\"\n              [class.text-primary]=\"activeTab() === tab.value\"\n              [class.border-transparent]=\"activeTab() !== tab.value\"\n              [class.text-gray-500]=\"activeTab() !== tab.value\"\n              (click)=\"switchTab(tab.value)\"\n            >\n              {{ tab.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <mt-table\n        [data]=\"rows()\"\n        [columns]=\"tableColumns()\"\n        [actions]=\"tableActions()\"\n        [rowActions]=\"rowActions()\"\n        [freezeActions]=\"true\"\n        [loading]=\"isLoading()\"\n        [noCard]=\"true\"\n      >\n        <ng-template #statusCol let-row>\n          <mt-delegation-status-chip\n            [status]=\"row.effectiveStatus\"\n          ></mt-delegation-status-chip>\n        </ng-template>\n\n        <ng-template #userCol let-row>\n          @let party = getListedParty(row);\n          <div class=\"flex items-center gap-2\">\n            <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n            <div class=\"flex min-w-0 flex-col\">\n              <span class=\"truncate text-sm text-gray-900\">\n                {{ party?.displayName }}\n              </span>\n              @if (party?.email) {\n                <span class=\"truncate text-xs text-gray-500\">\n                  {{ party.email }}\n                </span>\n              }\n            </div>\n          </div>\n        </ng-template>\n\n        <ng-template #delegatorCol let-row>\n          <div class=\"flex items-center gap-2\">\n            <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n            <div class=\"flex min-w-0 flex-col\">\n              <span class=\"truncate text-sm text-gray-900\">\n                {{ row.delegator?.displayName }}\n              </span>\n              @if (row.delegator?.email) {\n                <span class=\"truncate text-xs text-gray-500\">\n                  {{ row.delegator.email }}\n                </span>\n              }\n            </div>\n          </div>\n        </ng-template>\n\n        <ng-template #delegatedUserCol let-row>\n          <div class=\"flex items-center gap-2\">\n            <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n            <div class=\"flex min-w-0 flex-col\">\n              <span class=\"truncate text-sm text-gray-900\">\n                {{ row.delegatedUser?.displayName }}\n              </span>\n              @if (row.delegatedUser?.email) {\n                <span class=\"truncate text-xs text-gray-500\">\n                  {{ row.delegatedUser.email }}\n                </span>\n              }\n            </div>\n          </div>\n        </ng-template>\n\n        <ng-template #scopeCol let-row>\n          @let summary = formatScopeSummary(row.scopeSummary);\n          <span class=\"text-sm text-gray-700\" [title]=\"summary\">\n            {{ summary || \"--\" }}\n          </span>\n        </ng-template>\n\n        <ng-template #daysCol let-row>\n          <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\n        </ng-template>\n\n        <ng-template #empty>\n          <p class=\"text-sm text-surface-500\">\n            {{ t(emptyStateKey()) }}\n          </p>\n        </ng-template>\n      </mt-table>\n    </div>\n  </ng-template>\n\n  @if (adminMode()) {\n    <mt-page\n      [title]=\"surfaceTitle()\"\n      [avatarIcon]=\"'custom.hierarchy-structure'\"\n      [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\n      [avatarStyle]=\"{\n        '--p-avatar-background': 'var(--p-indigo-50)',\n        '--p-avatar-color': 'var(--p-indigo-700)',\n      }\"\n      (backButtonClick)=\"goBack()\"\n      backButton\n    >\n      <div class=\"flex min-h-full flex-col gap-4\">\n        @if (showBreadcrumb()) {\n          <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\n        }\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n      </div>\n    </mt-page>\n  } @else {\n    <div class=\"flex h-full flex-col gap-4 p-4\">\n      <mt-card [title]=\"surfaceTitle()\">\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n      </mt-card>\n    </div>\n  }\n</ng-container>\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-table{min-width:72rem}:host ::ng-deep mt-table .mt-actions-column{min-width:14rem}:host ::ng-deep mt-table td.mt-actions-column>div{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}@media(max-width:768px){:host ::ng-deep mt-table .p-datatable-table{min-width:64rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: 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: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, decorators: [{
             type: Component,
@@ -2438,10 +2459,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Avatar,
                         Breadcrumb,
                         Card,
+                        Page,
                         Table,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex h-full flex-col gap-4 p-4\">\n    @if (showBreadcrumb()) {\n      <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\n    }\n\n    <mt-card [title]=\"surfaceTitle()\">\n      <div class=\"flex flex-col gap-4\">\n        @if (!adminMode()) {\n          <div class=\"flex items-center gap-2 border-b border-gray-200\">\n            @for (tab of tabs(); track tab.value) {\n              <button\n                type=\"button\"\n                class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n                [class.border-primary]=\"activeTab() === tab.value\"\n                [class.text-primary]=\"activeTab() === tab.value\"\n                [class.border-transparent]=\"activeTab() !== tab.value\"\n                [class.text-gray-500]=\"activeTab() !== tab.value\"\n                (click)=\"switchTab(tab.value)\"\n              >\n                {{ tab.label }}\n              </button>\n            }\n          </div>\n        }\n\n        <mt-table\n          [data]=\"rows()\"\n          [columns]=\"tableColumns()\"\n          [actions]=\"tableActions()\"\n          [rowActions]=\"rowActions()\"\n          [freezeActions]=\"true\"\n          [loading]=\"isLoading()\"\n          [noCard]=\"true\"\n        >\n          <ng-template #statusCol let-row>\n            <mt-delegation-status-chip\n              [status]=\"row.effectiveStatus\"\n            ></mt-delegation-status-chip>\n          </ng-template>\n\n          <ng-template #userCol let-row>\n            @let party = getListedParty(row);\n            <div class=\"flex items-center gap-2\">\n              <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n              <div class=\"flex min-w-0 flex-col\">\n                <span class=\"truncate text-sm text-gray-900\">\n                  {{ party?.displayName }}\n                </span>\n                @if (party?.email) {\n                  <span class=\"truncate text-xs text-gray-500\">\n                    {{ party.email }}\n                  </span>\n                }\n              </div>\n            </div>\n          </ng-template>\n\n          <ng-template #delegatorCol let-row>\n            <div class=\"flex items-center gap-2\">\n              <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n              <div class=\"flex min-w-0 flex-col\">\n                <span class=\"truncate text-sm text-gray-900\">\n                  {{ row.delegator?.displayName }}\n                </span>\n                @if (row.delegator?.email) {\n                  <span class=\"truncate text-xs text-gray-500\">\n                    {{ row.delegator.email }}\n                  </span>\n                }\n              </div>\n            </div>\n          </ng-template>\n\n          <ng-template #delegatedUserCol let-row>\n            <div class=\"flex items-center gap-2\">\n              <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n              <div class=\"flex min-w-0 flex-col\">\n                <span class=\"truncate text-sm text-gray-900\">\n                  {{ row.delegatedUser?.displayName }}\n                </span>\n                @if (row.delegatedUser?.email) {\n                  <span class=\"truncate text-xs text-gray-500\">\n                    {{ row.delegatedUser.email }}\n                  </span>\n                }\n              </div>\n            </div>\n          </ng-template>\n\n          <ng-template #scopeCol let-row>\n            @let summary = formatScopeSummary(row.scopeSummary);\n            <span class=\"text-sm text-gray-700\" [title]=\"summary\">\n              {{ summary || \"--\" }}\n            </span>\n          </ng-template>\n\n          <ng-template #daysCol let-row>\n            <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\n          </ng-template>\n\n          <ng-template #empty>\n            <p class=\"text-sm text-surface-500\">\n              {{ t(emptyStateKey()) }}\n            </p>\n          </ng-template>\n        </mt-table>\n      </div>\n    </mt-card>\n  </div>\n</ng-container>\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-table{min-width:72rem}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}@media(max-width:768px){:host ::ng-deep mt-table .p-datatable-table{min-width:64rem}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <ng-template #tableContent>\n    <div class=\"flex flex-col gap-4\">\n      @if (!adminMode()) {\n        <div class=\"flex items-center gap-2 border-b border-gray-200\">\n          @for (tab of tabs(); track tab.value) {\n            <button\n              type=\"button\"\n              class=\"px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n              [class.border-primary]=\"activeTab() === tab.value\"\n              [class.text-primary]=\"activeTab() === tab.value\"\n              [class.border-transparent]=\"activeTab() !== tab.value\"\n              [class.text-gray-500]=\"activeTab() !== tab.value\"\n              (click)=\"switchTab(tab.value)\"\n            >\n              {{ tab.label }}\n            </button>\n          }\n        </div>\n      }\n\n      <mt-table\n        [data]=\"rows()\"\n        [columns]=\"tableColumns()\"\n        [actions]=\"tableActions()\"\n        [rowActions]=\"rowActions()\"\n        [freezeActions]=\"true\"\n        [loading]=\"isLoading()\"\n        [noCard]=\"true\"\n      >\n        <ng-template #statusCol let-row>\n          <mt-delegation-status-chip\n            [status]=\"row.effectiveStatus\"\n          ></mt-delegation-status-chip>\n        </ng-template>\n\n        <ng-template #userCol let-row>\n          @let party = getListedParty(row);\n          <div class=\"flex items-center gap-2\">\n            <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n            <div class=\"flex min-w-0 flex-col\">\n              <span class=\"truncate text-sm text-gray-900\">\n                {{ party?.displayName }}\n              </span>\n              @if (party?.email) {\n                <span class=\"truncate text-xs text-gray-500\">\n                  {{ party.email }}\n                </span>\n              }\n            </div>\n          </div>\n        </ng-template>\n\n        <ng-template #delegatorCol let-row>\n          <div class=\"flex items-center gap-2\">\n            <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n            <div class=\"flex min-w-0 flex-col\">\n              <span class=\"truncate text-sm text-gray-900\">\n                {{ row.delegator?.displayName }}\n              </span>\n              @if (row.delegator?.email) {\n                <span class=\"truncate text-xs text-gray-500\">\n                  {{ row.delegator.email }}\n                </span>\n              }\n            </div>\n          </div>\n        </ng-template>\n\n        <ng-template #delegatedUserCol let-row>\n          <div class=\"flex items-center gap-2\">\n            <mt-avatar icon=\"user.user-01\" styleClass=\"w-8! h-8!\"></mt-avatar>\n            <div class=\"flex min-w-0 flex-col\">\n              <span class=\"truncate text-sm text-gray-900\">\n                {{ row.delegatedUser?.displayName }}\n              </span>\n              @if (row.delegatedUser?.email) {\n                <span class=\"truncate text-xs text-gray-500\">\n                  {{ row.delegatedUser.email }}\n                </span>\n              }\n            </div>\n          </div>\n        </ng-template>\n\n        <ng-template #scopeCol let-row>\n          @let summary = formatScopeSummary(row.scopeSummary);\n          <span class=\"text-sm text-gray-700\" [title]=\"summary\">\n            {{ summary || \"--\" }}\n          </span>\n        </ng-template>\n\n        <ng-template #daysCol let-row>\n          <span class=\"text-sm text-gray-700\">{{ formatDays(row) }}</span>\n        </ng-template>\n\n        <ng-template #empty>\n          <p class=\"text-sm text-surface-500\">\n            {{ t(emptyStateKey()) }}\n          </p>\n        </ng-template>\n      </mt-table>\n    </div>\n  </ng-template>\n\n  @if (adminMode()) {\n    <mt-page\n      [title]=\"surfaceTitle()\"\n      [avatarIcon]=\"'custom.hierarchy-structure'\"\n      [contentClass]=\"'max-[1025px]:p-4 max-[640px]:p-3'\"\n      [avatarStyle]=\"{\n        '--p-avatar-background': 'var(--p-indigo-50)',\n        '--p-avatar-color': 'var(--p-indigo-700)',\n      }\"\n      (backButtonClick)=\"goBack()\"\n      backButton\n    >\n      <div class=\"flex min-h-full flex-col gap-4\">\n        @if (showBreadcrumb()) {\n          <mt-breadcrumb [items]=\"breadcrumbItems()\"></mt-breadcrumb>\n        }\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n      </div>\n    </mt-page>\n  } @else {\n    <div class=\"flex h-full flex-col gap-4 p-4\">\n      <mt-card [title]=\"surfaceTitle()\">\n        <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n      </mt-card>\n    </div>\n  }\n</ng-container>\n", styles: [":host{display:block;min-width:0}:host ::ng-deep mt-table .p-datatable-table{min-width:72rem}:host ::ng-deep mt-table .mt-actions-column{min-width:14rem}:host ::ng-deep mt-table td.mt-actions-column>div{flex-wrap:nowrap;justify-content:flex-end;white-space:nowrap}:host ::ng-deep mt-table .p-datatable-header>div,:host ::ng-deep mt-table .p-datatable-header>div>div{gap:.75rem;min-width:0;flex-wrap:wrap}:host ::ng-deep mt-table .p-datatable-header mt-tabs{display:block;max-width:100%;overflow-x:auto;padding-bottom:.25rem}:host ::ng-deep mt-table .p-datatable-header mt-text-field{display:block;flex:1 1 16rem;min-width:min(100%,16rem)}:host ::ng-deep mt-table .p-datatable-header .p-inputtext,:host ::ng-deep mt-table .p-datatable-header .p-inputwrapper,:host ::ng-deep mt-table .p-datatable-header .p-selectbutton{width:100%;max-width:100%}@media(max-width:1024px){:host ::ng-deep mt-table .p-datatable-header>div{flex-direction:column;align-items:stretch}:host ::ng-deep mt-table .p-datatable-header>div>div{width:100%;justify-content:flex-start}:host ::ng-deep mt-table .p-datatable-header mt-text-field{flex-basis:100%;min-width:0}}@media(max-width:768px){:host ::ng-deep mt-table .p-datatable-table{min-width:64rem}}\n"] }]
         }], propDecorators: { showBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumb", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], 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 }] }], statusCol: [{ type: i0.ViewChild, args: ['statusCol', { isSignal: true }] }], userCol: [{ type: i0.ViewChild, args: ['userCol', { isSignal: true }] }], delegatorCol: [{ type: i0.ViewChild, args: ['delegatorCol', { isSignal: true }] }], delegatedUserCol: [{ type: i0.ViewChild, args: ['delegatedUserCol', { isSignal: true }] }], scopeCol: [{ type: i0.ViewChild, args: ['scopeCol', { isSignal: true }] }], daysCol: [{ type: i0.ViewChild, args: ['daysCol', { isSignal: true }] }] } });
 
 /**