@masterteam/delegations 0.0.37 → 0.0.38

package/fesm2022/masterteam-delegations.mjs

@@ -26,8 +26,10 @@ import { Table } from '@masterteam/components/table';
 import * as i2 from '@angular/forms';
 import { FormsModule, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { DynamicForm } from '@masterteam/forms/dynamic-form';
+import * as i3 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { TextField } from '@masterteam/components/text-field';
-import * as i3 from 'primeng/skeleton';
+import * as i4 from 'primeng/skeleton';
 import { SkeletonModule } from 'primeng/skeleton';
 
 /** Fetch the active delegations the current user may start (user/activedelegations). */
@@ -1997,6 +1999,22 @@ class ScopePicker {
     /** Stable operation-node keys for the current scope grants. */
     selectedKeys = computed(() => new Set(this.scope().grants.map(delegationOperationNodeKey)), ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
     selectedCount = computed(() => this.selectedKeys().size, ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
+    /** Every selectable operation key (for the "select all" master toggle). */
+    allLeafKeys = computed(() => Array.from(this.grantIndex().keys()), ...(ngDevMode ? [{ debugName: "allLeafKeys" }] : /* istanbul ignore next */ []));
+    selectAllState = computed(() => {
+        const all = this.allLeafKeys();
+        if (!all.length)
+            return 'unchecked';
+        const selected = this.selectedKeys();
+        let count = 0;
+        for (const key of all) {
+            if (selected.has(key))
+                count++;
+        }
+        if (count === 0)
+            return 'unchecked';
+        return count === all.length ? 'checked' : 'indeterminate';
+    }, ...(ngDevMode ? [{ debugName: "selectAllState" }] : /* istanbul ignore next */ []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     expandedKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
     filteredTree = computed(() => {
@@ -2021,6 +2039,28 @@ class ScopePicker {
             .map(prune)
             .filter((node) => !!node);
     }, ...(ngDevMode ? [{ debugName: "filteredTree" }] : /* istanbul ignore next */ []));
+    /**
+     * Flattened list of currently-visible rows (respecting expand state + search)
+     * for CDK virtual scrolling — only the on-screen rows render, so large
+     * permission catalogs stay fast. Recomputes on tree/expand/search changes,
+     * NOT on selection toggles.
+     */
+    visibleNodes = computed(() => {
+        const out = [];
+        const searching = !!this.searchTerm().trim();
+        const expanded = this.expandedKeys();
+        const walk = (nodes, depth) => {
+            for (const node of nodes) {
+                out.push({ node, depth });
+                const open = searching || expanded.has(node.key);
+                if (open && node.children?.length) {
+                    walk(node.children, depth + 1);
+                }
+            }
+        };
+        walk(this.filteredTree(), 0);
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "visibleNodes" }] : /* istanbul ignore next */ []));
     // --- App accessibility ----------------------------------------------------
     appAccessibilities = computed(() => this.options()?.appAccessibility ?? [], ...(ngDevMode ? [{ debugName: "appAccessibilities" }] : /* istanbul ignore next */ []));
     selectedAccessibilityKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedAccessibilityKeys" }] : /* istanbul ignore next */ []));
@@ -2042,25 +2082,33 @@ class ScopePicker {
                 return;
             }
             if (lastDelegatorUserId !== delegator) {
+                // Only reset when the user actually switches between two real
+                // delegators. The initial population (undefined -> id, e.g. edit
+                // prefill or self-service current user arriving) must NOT wipe the
+                // freshly-bound scope.
+                const switchedDelegator = !!lastDelegatorUserId && !!delegator;
                 lastDelegatorUserId = delegator;
-                this.scope.set(EMPTY_SCOPE$1);
-                this.selectedAccessibilityKeys.set(new Set());
-                this.searchTerm.set('');
-                this.activeScopeTab.set('permissions');
-                this.facade.clearScopePreview();
+                if (switchedDelegator) {
+                    untracked(() => {
+                        this.scope.set(EMPTY_SCOPE$1);
+                        this.selectedAccessibilityKeys.set(new Set());
+                        this.searchTerm.set('');
+                        this.activeScopeTab.set('permissions');
+                        this.facade.clearScopePreview();
+                    });
+                }
             }
         });
-        // Default-expand Template + Level nodes whenever options (re)load.
+        // Default-expand Template nodes whenever options (re)load (levels collapse
+        // so large catalogs open compact; search auto-expands matches).
         effect(() => {
             const model = this.treeModel();
             const keys = new Set();
-            const walk = (node) => {
-                if (node.kind === 'template' || node.kind === 'level') {
+            for (const node of model) {
+                if (node.kind === 'template') {
                     keys.add(node.key);
                 }
-                (node.children ?? []).forEach(walk);
-            };
-            model.forEach(walk);
+            }
             untracked(() => this.expandedKeys.set(keys));
         });
         // Debounced scope preview.
@@ -2190,6 +2238,21 @@ class ScopePicker {
         }
         this.scope.update((scope) => ({ ...scope, grants: [] }));
     }
+    /** Master "select all" toggle in the tree header. */
+    toggleAll() {
+        if (this.readonly()) {
+            return;
+        }
+        if (this.selectAllState() === 'checked') {
+            this.clearSelection();
+        }
+        else {
+            this.applySelection(new Set(this.allLeafKeys()));
+        }
+    }
+    trackVisible(_index, item) {
+        return item.node.key;
+    }
     // --- App accessibility ----------------------------------------------------
     toggleAccessibility(key) {
         if (this.readonly()) {
@@ -2248,13 +2311,14 @@ class ScopePicker {
         return this.activeLang() ?? this.transloco.getActiveLang();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ScopePicker, isStandalone: true, selector: "mt-scope-picker", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <!-- Recursive node template -->\n  <ng-template #nodeTpl let-node let-depth=\"depth\">\n    @let state = nodeState(node);\n    @let branch = hasChildren(node);\n    <div\n      class=\"group flex items-center gap-2 rounded-lg py-1.5 pe-2 transition-colors hover:bg-surface-50\"\n      [style.padding-inline-start.rem]=\"0.25 + depth * 1.25\"\n    >\n      @if (branch) {\n        <button\n          type=\"button\"\n          class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\n          [attr.aria-expanded]=\"isExpanded(node)\"\n          [attr.aria-label]=\"nodeLabel(node)\"\n          (click)=\"toggleExpand(node); $event.stopPropagation()\"\n        >\n          <mt-icon\n            [icon]=\"isExpanded(node) ? 'arrow.chevron-down' : 'arrow.chevron-right'\"\n            styleClass=\"text-base\"\n          ></mt-icon>\n        </button>\n      } @else {\n        <span class=\"size-6 shrink-0\"></span>\n      }\n\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        [attr.aria-checked]=\"\n          state === 'indeterminate' ? 'mixed' : state === 'checked'\n        \"\n        [attr.aria-label]=\"nodeLabel(node)\"\n        class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n        [class.cursor-pointer]=\"!readonly()\"\n        [class.border-primary-500]=\"state !== 'unchecked'\"\n        [class.bg-primary-500]=\"state !== 'unchecked'\"\n        [class.text-white]=\"state !== 'unchecked'\"\n        [class.border-surface-300]=\"state === 'unchecked'\"\n        [class.bg-surface-0]=\"state === 'unchecked'\"\n        [disabled]=\"readonly()\"\n        (click)=\"toggle(node); $event.stopPropagation()\"\n      >\n        @if (state === \"checked\") {\n          <svg\n            viewBox=\"0 0 16 16\"\n            class=\"size-3\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else if (state === \"indeterminate\") {\n          <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\n        }\n      </button>\n\n      <button\n        type=\"button\"\n        class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\n        (click)=\"onRowClick(node)\"\n      >\n        <span\n          class=\"truncate text-sm\"\n          [class.font-semibold]=\"node.kind === 'template'\"\n          [class.text-surface-900]=\"node.kind === 'template'\"\n          [class.font-medium]=\"node.kind === 'level' || node.kind === 'module'\"\n          [class.text-surface-800]=\"node.kind === 'level' || node.kind === 'module'\"\n          [class.text-surface-600]=\"node.kind === 'operation'\"\n        >\n          {{ nodeLabel(node) }}\n        </span>\n        @if (node.kind === \"operation\" && node.isHighRisk) {\n          <span\n            class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n          >\n            {{ t(\"delegations.scope.highRisk\") }}\n          </span>\n        }\n      </button>\n    </div>\n\n    @if (branch && isExpanded(node)) {\n      @for (child of node.children; track trackNode($index, child)) {\n        <ng-container\n          *ngTemplateOutlet=\"nodeTpl; context: { $implicit: child, depth: depth + 1 }\"\n        ></ng-container>\n      }\n    }\n  </ng-template>\n\n  <div class=\"flex flex-col gap-3\">\n    @if (isLoadingOptions()) {\n      <mt-card [paddingless]=\"true\">\n        <div class=\"flex flex-col gap-3 p-4\">\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\n            <p-skeleton height=\"2rem\"></p-skeleton>\n          }\n        </div>\n      </mt-card>\n    } @else {\n      @if (errorOptions(); as errorMessage) {\n        <div\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        >\n          {{ errorMessage }}\n        </div>\n      }\n\n      @if (!hasOptions() && !errorOptions()) {\n        <mt-card [paddingless]=\"true\">\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        </mt-card>\n      }\n\n      @if (hasOptions()) {\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\n          @if (hasAccessibility()) {\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\n              <mt-tabs\n                mode=\"underline\"\n                [(active)]=\"activeScopeTab\"\n                [options]=\"[\n                  {\n                    value: 'permissions',\n                    label: t('delegations.scope.permissionsTab'),\n                    badge: selectedCount() || null,\n                  },\n                  {\n                    value: 'accessibility',\n                    label: t('delegations.scope.accessibilityTitle'),\n                    badge: selectedAccessibilityCount() || null,\n                  },\n                ]\"\n                fluid\n              ></mt-tabs>\n            </div>\n          }\n\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\n            <!-- Toolbar: table-style search + clear -->\n            <div class=\"flex items-center gap-2 border-b border-surface px-3 py-2\">\n              <div class=\"min-w-0 flex-1\">\n                <mt-text-field\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\"\n                  icon=\"general.search-lg\"\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\n                ></mt-text-field>\n              </div>\n              @if (selectedCount() > 0) {\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\n                </span>\n                <mt-button\n                  variant=\"text\"\n                  size=\"small\"\n                  [label]=\"t('delegations.scope.clear')\"\n                  [disabled]=\"readonly()\"\n                  (click)=\"clearSelection()\"\n                ></mt-button>\n              }\n            </div>\n\n            <!-- Permission tree -->\n            <div class=\"max-h-[22rem] overflow-y-auto p-1.5\">\n              @for (node of filteredTree(); track trackNode($index, node)) {\n                <ng-container\n                  *ngTemplateOutlet=\"nodeTpl; context: { $implicit: node, depth: 0 }\"\n                ></ng-container>\n              } @empty {\n                <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                  {{ t(\"components.table.no-data-found\") }}\n                </p>\n              }\n            </div>\n          } @else {\n            <!-- App accessibility -->\n            <div class=\"flex flex-col gap-3 p-4\">\n              <p class=\"text-xs text-surface-500\">\n                {{ t(\"delegations.scope.accessibilityHint\") }}\n              </p>\n              <div class=\"flex flex-wrap gap-2\">\n                @for (item of appAccessibilities(); track item.accessibilityKey) {\n                  @let selected = isAccessibilitySelected(item.accessibilityKey);\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\n                    [class.border-primary-400]=\"selected\"\n                    [class.bg-primary-50]=\"selected\"\n                    [class.text-primary-700]=\"selected\"\n                    [class.border-surface-200]=\"!selected\"\n                    [class.text-surface-600]=\"!selected\"\n                    [class.hover:border-primary-300]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    [attr.aria-pressed]=\"selected\"\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\n                  >\n                    <span\n                      class=\"inline-flex size-1.5 rounded-full\"\n                      [class.bg-primary-500]=\"selected\"\n                      [class.bg-surface-300]=\"!selected\"\n                    ></span>\n                    {{ accessibilityLabel(item) }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </mt-card>\n      }\n\n      <!-- Compact live scope preview -->\n      <div\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center gap-2 text-xs\">\n          <span class=\"shrink-0 font-semibold text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}:\n          </span>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\n          } @else if (preview(); as p) {\n            @if (p.isValid) {\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\n                {{\n                  getPreviewSummary(p.summary) ||\n                    t(\"delegations.column.scopeSummary\")\n                }}\n              </span>\n            } @else {\n              <span class=\"font-medium text-red-700\">\n                {{ t(\"delegations.scope.previewInvalid\") }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </span>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\">\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ScopePicker, isStandalone: true, selector: "mt-scope-picker", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <!-- Reusable tri-state checkbox box -->\n  <ng-template #checkbox let-state=\"state\">\n    <span\n      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n      [class.border-primary-500]=\"state !== 'unchecked'\"\n      [class.bg-primary-500]=\"state !== 'unchecked'\"\n      [class.text-white]=\"state !== 'unchecked'\"\n      [class.border-surface-300]=\"state === 'unchecked'\"\n      [class.bg-surface-0]=\"state === 'unchecked'\"\n    >\n      @if (state === \"checked\") {\n        <svg\n          viewBox=\"0 0 16 16\"\n          class=\"size-3\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      } @else if (state === \"indeterminate\") {\n        <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\n      }\n    </span>\n  </ng-template>\n\n  <div class=\"flex flex-col gap-3\">\n    @if (isLoadingOptions()) {\n      <mt-card [paddingless]=\"true\">\n        <div class=\"flex flex-col gap-3 p-4\">\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\n            <p-skeleton height=\"2rem\"></p-skeleton>\n          }\n        </div>\n      </mt-card>\n    } @else {\n      @if (errorOptions(); as errorMessage) {\n        <div\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        >\n          {{ errorMessage }}\n        </div>\n      }\n\n      @if (!hasOptions() && !errorOptions()) {\n        <mt-card [paddingless]=\"true\">\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        </mt-card>\n      }\n\n      @if (hasOptions()) {\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\n          @if (hasAccessibility()) {\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\n              <mt-tabs\n                mode=\"underline\"\n                [(active)]=\"activeScopeTab\"\n                [options]=\"[\n                  {\n                    value: 'permissions',\n                    label: t('delegations.scope.permissionsTab'),\n                    badge: selectedCount() || null,\n                  },\n                  {\n                    value: 'accessibility',\n                    label: t('delegations.scope.accessibilityTitle'),\n                    badge: selectedAccessibilityCount() || null,\n                  },\n                ]\"\n                fluid\n              ></mt-tabs>\n            </div>\n          }\n\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\n            <!-- Toolbar: table-style search + clear -->\n            <div class=\"flex items-center gap-2 border-b border-surface px-3 py-2\">\n              <div class=\"min-w-0 flex-1\">\n                <mt-text-field\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\"\n                  icon=\"general.search-lg\"\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\n                ></mt-text-field>\n              </div>\n              @if (selectedCount() > 0) {\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\n                </span>\n                <mt-button\n                  variant=\"text\"\n                  size=\"small\"\n                  [label]=\"t('delegations.scope.clear')\"\n                  [disabled]=\"readonly()\"\n                  (click)=\"clearSelection()\"\n                ></mt-button>\n              }\n            </div>\n\n            <!-- Select-all header -->\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-2 border-b border-surface px-3 py-2 text-start hover:bg-surface-50\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                selectAllState() === 'indeterminate'\n                  ? 'mixed'\n                  : selectAllState() === 'checked'\n              \"\n              [disabled]=\"readonly()\"\n              (click)=\"toggleAll()\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"checkbox; context: { state: selectAllState() }\"\n              ></ng-container>\n              <span class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\">\n                {{ t(\"delegations.scope.selectAll\") }}\n              </span>\n            </button>\n\n            <!-- Virtualized permission tree -->\n            @if (visibleNodes().length > 0) {\n              <cdk-virtual-scroll-viewport\n                itemSize=\"40\"\n                class=\"block h-[20rem]\"\n              >\n                <div\n                  *cdkVirtualFor=\"\n                    let item of visibleNodes();\n                    trackBy: trackVisible\n                  \"\n                  class=\"group flex h-10 items-center gap-2 pe-2 transition-colors hover:bg-surface-50\"\n                  [style.padding-inline-start.rem]=\"0.5 + item.depth * 1.25\"\n                >\n                  @if (hasChildren(item.node)) {\n                    <button\n                      type=\"button\"\n                      class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\n                      [attr.aria-expanded]=\"isExpanded(item.node)\"\n                      [attr.aria-label]=\"nodeLabel(item.node)\"\n                      (click)=\"toggleExpand(item.node); $event.stopPropagation()\"\n                    >\n                      <mt-icon\n                        [icon]=\"\n                          isExpanded(item.node)\n                            ? 'arrow.chevron-down'\n                            : 'arrow.chevron-right'\n                        \"\n                        styleClass=\"text-base\"\n                      ></mt-icon>\n                    </button>\n                  } @else {\n                    <span class=\"size-6 shrink-0\"></span>\n                  }\n\n                  <button\n                    type=\"button\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"\n                      nodeState(item.node) === 'indeterminate'\n                        ? 'mixed'\n                        : nodeState(item.node) === 'checked'\n                    \"\n                    [attr.aria-label]=\"nodeLabel(item.node)\"\n                    class=\"shrink-0\"\n                    [class.cursor-pointer]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    (click)=\"toggle(item.node); $event.stopPropagation()\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        checkbox;\n                        context: { state: nodeState(item.node) }\n                      \"\n                    ></ng-container>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\n                    (click)=\"onRowClick(item.node)\"\n                  >\n                    <span\n                      class=\"truncate text-sm\"\n                      [class.font-semibold]=\"item.node.kind === 'template'\"\n                      [class.text-surface-900]=\"item.node.kind === 'template'\"\n                      [class.font-medium]=\"\n                        item.node.kind === 'level' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        item.node.kind === 'level' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\n                    >\n                      {{ nodeLabel(item.node) }}\n                    </span>\n                    @if (item.node.kind === \"operation\" && item.node.isHighRisk) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n                      >\n                        {{ t(\"delegations.scope.highRisk\") }}\n                      </span>\n                    }\n                  </button>\n                </div>\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                {{ t(\"components.table.no-data-found\") }}\n              </p>\n            }\n          } @else {\n            <!-- App accessibility -->\n            <div class=\"flex flex-col gap-3 p-4\">\n              <p class=\"text-xs text-surface-500\">\n                {{ t(\"delegations.scope.accessibilityHint\") }}\n              </p>\n              <div class=\"flex flex-wrap gap-2\">\n                @for (item of appAccessibilities(); track item.accessibilityKey) {\n                  @let selected = isAccessibilitySelected(item.accessibilityKey);\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\n                    [class.border-primary-400]=\"selected\"\n                    [class.bg-primary-50]=\"selected\"\n                    [class.text-primary-700]=\"selected\"\n                    [class.border-surface-200]=\"!selected\"\n                    [class.text-surface-600]=\"!selected\"\n                    [class.hover:border-primary-300]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    [attr.aria-pressed]=\"selected\"\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\n                  >\n                    <span\n                      class=\"inline-flex size-1.5 rounded-full\"\n                      [class.bg-primary-500]=\"selected\"\n                      [class.bg-surface-300]=\"!selected\"\n                    ></span>\n                    {{ accessibilityLabel(item) }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </mt-card>\n      }\n\n      <!-- Compact live scope preview -->\n      <div\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center gap-2 text-xs\">\n          <span class=\"shrink-0 font-semibold text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}:\n          </span>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\n          } @else if (preview(); as p) {\n            @if (p.isValid) {\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\n                {{\n                  getPreviewSummary(p.summary) ||\n                    t(\"delegations.column.scopeSummary\")\n                }}\n              </span>\n            } @else {\n              <span class=\"font-medium text-red-700\">\n                {{ t(\"delegations.scope.previewInvalid\") }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </span>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\">\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, decorators: [{
             type: Component,
             args: [{ selector: 'mt-scope-picker', imports: [
                         CommonModule,
                         FormsModule,
+                        ScrollingModule,
                         Button,
                         Card,
                         Icon,
@@ -2262,7 +2326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         TextField,
                         SkeletonModule,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <!-- Recursive node template -->\n  <ng-template #nodeTpl let-node let-depth=\"depth\">\n    @let state = nodeState(node);\n    @let branch = hasChildren(node);\n    <div\n      class=\"group flex items-center gap-2 rounded-lg py-1.5 pe-2 transition-colors hover:bg-surface-50\"\n      [style.padding-inline-start.rem]=\"0.25 + depth * 1.25\"\n    >\n      @if (branch) {\n        <button\n          type=\"button\"\n          class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\n          [attr.aria-expanded]=\"isExpanded(node)\"\n          [attr.aria-label]=\"nodeLabel(node)\"\n          (click)=\"toggleExpand(node); $event.stopPropagation()\"\n        >\n          <mt-icon\n            [icon]=\"isExpanded(node) ? 'arrow.chevron-down' : 'arrow.chevron-right'\"\n            styleClass=\"text-base\"\n          ></mt-icon>\n        </button>\n      } @else {\n        <span class=\"size-6 shrink-0\"></span>\n      }\n\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        [attr.aria-checked]=\"\n          state === 'indeterminate' ? 'mixed' : state === 'checked'\n        \"\n        [attr.aria-label]=\"nodeLabel(node)\"\n        class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n        [class.cursor-pointer]=\"!readonly()\"\n        [class.border-primary-500]=\"state !== 'unchecked'\"\n        [class.bg-primary-500]=\"state !== 'unchecked'\"\n        [class.text-white]=\"state !== 'unchecked'\"\n        [class.border-surface-300]=\"state === 'unchecked'\"\n        [class.bg-surface-0]=\"state === 'unchecked'\"\n        [disabled]=\"readonly()\"\n        (click)=\"toggle(node); $event.stopPropagation()\"\n      >\n        @if (state === \"checked\") {\n          <svg\n            viewBox=\"0 0 16 16\"\n            class=\"size-3\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            aria-hidden=\"true\"\n          >\n            <path\n              d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        } @else if (state === \"indeterminate\") {\n          <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\n        }\n      </button>\n\n      <button\n        type=\"button\"\n        class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\n        (click)=\"onRowClick(node)\"\n      >\n        <span\n          class=\"truncate text-sm\"\n          [class.font-semibold]=\"node.kind === 'template'\"\n          [class.text-surface-900]=\"node.kind === 'template'\"\n          [class.font-medium]=\"node.kind === 'level' || node.kind === 'module'\"\n          [class.text-surface-800]=\"node.kind === 'level' || node.kind === 'module'\"\n          [class.text-surface-600]=\"node.kind === 'operation'\"\n        >\n          {{ nodeLabel(node) }}\n        </span>\n        @if (node.kind === \"operation\" && node.isHighRisk) {\n          <span\n            class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n          >\n            {{ t(\"delegations.scope.highRisk\") }}\n          </span>\n        }\n      </button>\n    </div>\n\n    @if (branch && isExpanded(node)) {\n      @for (child of node.children; track trackNode($index, child)) {\n        <ng-container\n          *ngTemplateOutlet=\"nodeTpl; context: { $implicit: child, depth: depth + 1 }\"\n        ></ng-container>\n      }\n    }\n  </ng-template>\n\n  <div class=\"flex flex-col gap-3\">\n    @if (isLoadingOptions()) {\n      <mt-card [paddingless]=\"true\">\n        <div class=\"flex flex-col gap-3 p-4\">\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\n            <p-skeleton height=\"2rem\"></p-skeleton>\n          }\n        </div>\n      </mt-card>\n    } @else {\n      @if (errorOptions(); as errorMessage) {\n        <div\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        >\n          {{ errorMessage }}\n        </div>\n      }\n\n      @if (!hasOptions() && !errorOptions()) {\n        <mt-card [paddingless]=\"true\">\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        </mt-card>\n      }\n\n      @if (hasOptions()) {\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\n          @if (hasAccessibility()) {\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\n              <mt-tabs\n                mode=\"underline\"\n                [(active)]=\"activeScopeTab\"\n                [options]=\"[\n                  {\n                    value: 'permissions',\n                    label: t('delegations.scope.permissionsTab'),\n                    badge: selectedCount() || null,\n                  },\n                  {\n                    value: 'accessibility',\n                    label: t('delegations.scope.accessibilityTitle'),\n                    badge: selectedAccessibilityCount() || null,\n                  },\n                ]\"\n                fluid\n              ></mt-tabs>\n            </div>\n          }\n\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\n            <!-- Toolbar: table-style search + clear -->\n            <div class=\"flex items-center gap-2 border-b border-surface px-3 py-2\">\n              <div class=\"min-w-0 flex-1\">\n                <mt-text-field\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\"\n                  icon=\"general.search-lg\"\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\n                ></mt-text-field>\n              </div>\n              @if (selectedCount() > 0) {\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\n                </span>\n                <mt-button\n                  variant=\"text\"\n                  size=\"small\"\n                  [label]=\"t('delegations.scope.clear')\"\n                  [disabled]=\"readonly()\"\n                  (click)=\"clearSelection()\"\n                ></mt-button>\n              }\n            </div>\n\n            <!-- Permission tree -->\n            <div class=\"max-h-[22rem] overflow-y-auto p-1.5\">\n              @for (node of filteredTree(); track trackNode($index, node)) {\n                <ng-container\n                  *ngTemplateOutlet=\"nodeTpl; context: { $implicit: node, depth: 0 }\"\n                ></ng-container>\n              } @empty {\n                <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                  {{ t(\"components.table.no-data-found\") }}\n                </p>\n              }\n            </div>\n          } @else {\n            <!-- App accessibility -->\n            <div class=\"flex flex-col gap-3 p-4\">\n              <p class=\"text-xs text-surface-500\">\n                {{ t(\"delegations.scope.accessibilityHint\") }}\n              </p>\n              <div class=\"flex flex-wrap gap-2\">\n                @for (item of appAccessibilities(); track item.accessibilityKey) {\n                  @let selected = isAccessibilitySelected(item.accessibilityKey);\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\n                    [class.border-primary-400]=\"selected\"\n                    [class.bg-primary-50]=\"selected\"\n                    [class.text-primary-700]=\"selected\"\n                    [class.border-surface-200]=\"!selected\"\n                    [class.text-surface-600]=\"!selected\"\n                    [class.hover:border-primary-300]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    [attr.aria-pressed]=\"selected\"\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\n                  >\n                    <span\n                      class=\"inline-flex size-1.5 rounded-full\"\n                      [class.bg-primary-500]=\"selected\"\n                      [class.bg-surface-300]=\"!selected\"\n                    ></span>\n                    {{ accessibilityLabel(item) }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </mt-card>\n      }\n\n      <!-- Compact live scope preview -->\n      <div\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center gap-2 text-xs\">\n          <span class=\"shrink-0 font-semibold text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}:\n          </span>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\n          } @else if (preview(); as p) {\n            @if (p.isValid) {\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\n                {{\n                  getPreviewSummary(p.summary) ||\n                    t(\"delegations.column.scopeSummary\")\n                }}\n              </span>\n            } @else {\n              <span class=\"font-medium text-red-700\">\n                {{ t(\"delegations.scope.previewInvalid\") }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </span>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\">\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <!-- Reusable tri-state checkbox box -->\n  <ng-template #checkbox let-state=\"state\">\n    <span\n      class=\"flex size-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors\"\n      [class.border-primary-500]=\"state !== 'unchecked'\"\n      [class.bg-primary-500]=\"state !== 'unchecked'\"\n      [class.text-white]=\"state !== 'unchecked'\"\n      [class.border-surface-300]=\"state === 'unchecked'\"\n      [class.bg-surface-0]=\"state === 'unchecked'\"\n    >\n      @if (state === \"checked\") {\n        <svg\n          viewBox=\"0 0 16 16\"\n          class=\"size-3\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      } @else if (state === \"indeterminate\") {\n        <span class=\"h-[2px] w-2.5 rounded-full bg-white\"></span>\n      }\n    </span>\n  </ng-template>\n\n  <div class=\"flex flex-col gap-3\">\n    @if (isLoadingOptions()) {\n      <mt-card [paddingless]=\"true\">\n        <div class=\"flex flex-col gap-3 p-4\">\n          <p-skeleton height=\"2.5rem\"></p-skeleton>\n          @for (item of [0, 1, 2, 3, 4, 5]; track $index) {\n            <p-skeleton height=\"2rem\"></p-skeleton>\n          }\n        </div>\n      </mt-card>\n    } @else {\n      @if (errorOptions(); as errorMessage) {\n        <div\n          class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        >\n          {{ errorMessage }}\n        </div>\n      }\n\n      @if (!hasOptions() && !errorOptions()) {\n        <mt-card [paddingless]=\"true\">\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-16 items-center justify-center rounded-3xl bg-surface-50 text-primary\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-9\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        </mt-card>\n      }\n\n      @if (hasOptions()) {\n        <mt-card [paddingless]=\"true\" class=\"overflow-hidden\">\n          <!-- Inner view switch: Permissions / Pages & accessibility -->\n          @if (hasAccessibility()) {\n            <div class=\"border-b border-surface px-3 pt-2.5 pb-0\">\n              <mt-tabs\n                mode=\"underline\"\n                [(active)]=\"activeScopeTab\"\n                [options]=\"[\n                  {\n                    value: 'permissions',\n                    label: t('delegations.scope.permissionsTab'),\n                    badge: selectedCount() || null,\n                  },\n                  {\n                    value: 'accessibility',\n                    label: t('delegations.scope.accessibilityTitle'),\n                    badge: selectedAccessibilityCount() || null,\n                  },\n                ]\"\n                fluid\n              ></mt-tabs>\n            </div>\n          }\n\n          @if (activeScopeTab() === \"permissions\" || !hasAccessibility()) {\n            <!-- Toolbar: table-style search + clear -->\n            <div class=\"flex items-center gap-2 border-b border-surface px-3 py-2\">\n              <div class=\"min-w-0 flex-1\">\n                <mt-text-field\n                  [ngModel]=\"searchTerm()\"\n                  (ngModelChange)=\"searchTerm.set($event)\"\n                  icon=\"general.search-lg\"\n                  [placeholder]=\"t('delegations.scope.searchPlaceholder')\"\n                ></mt-text-field>\n              </div>\n              @if (selectedCount() > 0) {\n                <span class=\"shrink-0 text-xs font-medium text-surface-500\">\n                  {{ selectedCount() }} {{ t(\"delegations.scope.selected\") }}\n                </span>\n                <mt-button\n                  variant=\"text\"\n                  size=\"small\"\n                  [label]=\"t('delegations.scope.clear')\"\n                  [disabled]=\"readonly()\"\n                  (click)=\"clearSelection()\"\n                ></mt-button>\n              }\n            </div>\n\n            <!-- Select-all header -->\n            <button\n              type=\"button\"\n              class=\"flex w-full cursor-pointer items-center gap-2 border-b border-surface px-3 py-2 text-start hover:bg-surface-50\"\n              role=\"checkbox\"\n              [attr.aria-checked]=\"\n                selectAllState() === 'indeterminate'\n                  ? 'mixed'\n                  : selectAllState() === 'checked'\n              \"\n              [disabled]=\"readonly()\"\n              (click)=\"toggleAll()\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"checkbox; context: { state: selectAllState() }\"\n              ></ng-container>\n              <span class=\"text-xs font-semibold uppercase tracking-wide text-surface-500\">\n                {{ t(\"delegations.scope.selectAll\") }}\n              </span>\n            </button>\n\n            <!-- Virtualized permission tree -->\n            @if (visibleNodes().length > 0) {\n              <cdk-virtual-scroll-viewport\n                itemSize=\"40\"\n                class=\"block h-[20rem]\"\n              >\n                <div\n                  *cdkVirtualFor=\"\n                    let item of visibleNodes();\n                    trackBy: trackVisible\n                  \"\n                  class=\"group flex h-10 items-center gap-2 pe-2 transition-colors hover:bg-surface-50\"\n                  [style.padding-inline-start.rem]=\"0.5 + item.depth * 1.25\"\n                >\n                  @if (hasChildren(item.node)) {\n                    <button\n                      type=\"button\"\n                      class=\"flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-surface-400 hover:bg-surface-100 hover:text-surface-600\"\n                      [attr.aria-expanded]=\"isExpanded(item.node)\"\n                      [attr.aria-label]=\"nodeLabel(item.node)\"\n                      (click)=\"toggleExpand(item.node); $event.stopPropagation()\"\n                    >\n                      <mt-icon\n                        [icon]=\"\n                          isExpanded(item.node)\n                            ? 'arrow.chevron-down'\n                            : 'arrow.chevron-right'\n                        \"\n                        styleClass=\"text-base\"\n                      ></mt-icon>\n                    </button>\n                  } @else {\n                    <span class=\"size-6 shrink-0\"></span>\n                  }\n\n                  <button\n                    type=\"button\"\n                    role=\"checkbox\"\n                    [attr.aria-checked]=\"\n                      nodeState(item.node) === 'indeterminate'\n                        ? 'mixed'\n                        : nodeState(item.node) === 'checked'\n                    \"\n                    [attr.aria-label]=\"nodeLabel(item.node)\"\n                    class=\"shrink-0\"\n                    [class.cursor-pointer]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    (click)=\"toggle(item.node); $event.stopPropagation()\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        checkbox;\n                        context: { state: nodeState(item.node) }\n                      \"\n                    ></ng-container>\n                  </button>\n\n                  <button\n                    type=\"button\"\n                    class=\"flex min-w-0 flex-1 cursor-pointer items-center gap-2 text-start\"\n                    (click)=\"onRowClick(item.node)\"\n                  >\n                    <span\n                      class=\"truncate text-sm\"\n                      [class.font-semibold]=\"item.node.kind === 'template'\"\n                      [class.text-surface-900]=\"item.node.kind === 'template'\"\n                      [class.font-medium]=\"\n                        item.node.kind === 'level' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-800]=\"\n                        item.node.kind === 'level' || item.node.kind === 'module'\n                      \"\n                      [class.text-surface-600]=\"item.node.kind === 'operation'\"\n                    >\n                      {{ nodeLabel(item.node) }}\n                    </span>\n                    @if (item.node.kind === \"operation\" && item.node.isHighRisk) {\n                      <span\n                        class=\"shrink-0 rounded-full bg-amber-100 px-2 py-0.5 text-[0.625rem] font-medium text-amber-700\"\n                      >\n                        {{ t(\"delegations.scope.highRisk\") }}\n                      </span>\n                    }\n                  </button>\n                </div>\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              <p class=\"px-3 py-8 text-center text-sm text-surface-500\">\n                {{ t(\"components.table.no-data-found\") }}\n              </p>\n            }\n          } @else {\n            <!-- App accessibility -->\n            <div class=\"flex flex-col gap-3 p-4\">\n              <p class=\"text-xs text-surface-500\">\n                {{ t(\"delegations.scope.accessibilityHint\") }}\n              </p>\n              <div class=\"flex flex-wrap gap-2\">\n                @for (item of appAccessibilities(); track item.accessibilityKey) {\n                  @let selected = isAccessibilitySelected(item.accessibilityKey);\n                  <button\n                    type=\"button\"\n                    class=\"inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium transition-colors\"\n                    [class.border-primary-400]=\"selected\"\n                    [class.bg-primary-50]=\"selected\"\n                    [class.text-primary-700]=\"selected\"\n                    [class.border-surface-200]=\"!selected\"\n                    [class.text-surface-600]=\"!selected\"\n                    [class.hover:border-primary-300]=\"!readonly()\"\n                    [disabled]=\"readonly()\"\n                    [attr.aria-pressed]=\"selected\"\n                    (click)=\"toggleAccessibility(item.accessibilityKey)\"\n                  >\n                    <span\n                      class=\"inline-flex size-1.5 rounded-full\"\n                      [class.bg-primary-500]=\"selected\"\n                      [class.bg-surface-300]=\"!selected\"\n                    ></span>\n                    {{ accessibilityLabel(item) }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </mt-card>\n      }\n\n      <!-- Compact live scope preview -->\n      <div\n        class=\"flex flex-col gap-1.5 rounded-lg border border-surface bg-surface-50 px-3 py-2\"\n      >\n        <div class=\"flex items-center gap-2 text-xs\">\n          <span class=\"shrink-0 font-semibold text-surface-700\">\n            {{ t(\"delegations.scope.previewTitle\") }}:\n          </span>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"8rem\" height=\"0.7rem\"></p-skeleton>\n          } @else if (preview(); as p) {\n            @if (p.isValid) {\n              <span class=\"min-w-0 flex-1 truncate text-surface-900\">\n                {{\n                  getPreviewSummary(p.summary) ||\n                    t(\"delegations.column.scopeSummary\")\n                }}\n              </span>\n            } @else {\n              <span class=\"font-medium text-red-700\">\n                {{ t(\"delegations.scope.previewInvalid\") }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </span>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-amber-700\">\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-0.5 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }, { type: i0.Output, args: ["scopeChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], delegatorUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegatorUserId", required: false }] }] } });
 
 const EMPTY_SCOPE = { grants: [], metadata: {} };
@@ -2309,6 +2373,23 @@ function getCurrentDelegatorFromLocalStorage() {
         return null;
     }
 }
+/**
+ * Backend requires ISO 8601 **UTC** timestamps ending with `Z`
+ * (Masterteam.Shared `ISO8601DateTimeConverter`). The date field can emit a
+ * `Date` or an offset string like `2026-06-01T13:47:00+00:00`; normalize both
+ * to the same instant rendered with `Z` (otherwise the command fails to bind →
+ * "command field is required").
+ */
+function toUtcIso(value) {
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime()) ? undefined : value.toISOString();
+    }
+    if (typeof value === 'string' && value.trim()) {
+        const parsed = new Date(value);
+        return Number.isNaN(parsed.getTime()) ? value : parsed.toISOString();
+    }
+    return undefined;
+}
 function extractUserId(value) {
     if (typeof value === 'string') {
         return value.trim() || undefined;
@@ -2490,34 +2571,47 @@ class DelegationForm {
             },
         ],
     }), ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
+    // Prefill (edit) and default-init (create) must each happen exactly once, so
+    // later signal changes (detail re-emits, field edits) never wipe the user's
+    // in-progress scope selection or field values.
+    editPrefilled = false;
+    createInitialized = false;
     constructor() {
         effect(() => {
             const editing = this.delegationForEdit();
             const d = this.detail();
-            if (editing && d && d.row.delegationId === editing.delegationId) {
-                this.delegationFormControl.patchValue({
-                    delegateFrom: this.mapPartyToUserValue(d.row.delegator),
-                    delegateTo: d.row.delegatedUser,
-                    description: '',
-                    delegateFromDateTime: d.row.startsAtUtc,
-                    delegateToDateTime: d.row.endsAtUtc,
-                    delegationDaysType: d.row.dayRuleMode,
-                    specificDays: d.row.specificDays ?? [],
-                    requiresApproval: d.row.approval?.requiresApproval ?? false,
-                });
-                this.scope.set({
-                    grants: d.scope?.grants ?? [],
-                    metadata: d.scope?.metadata ?? {},
-                });
-            }
-            else if (!editing) {
-                this.delegationFormControl.reset({
-                    delegateFrom: null,
-                    delegationDaysType: 'FullRange',
-                    requiresApproval: true,
-                });
-                this.scope.set(EMPTY_SCOPE);
-            }
+            untracked(() => {
+                if (editing && d && d.row.delegationId === editing.delegationId) {
+                    if (this.editPrefilled)
+                        return;
+                    this.editPrefilled = true;
+                    this.delegationFormControl.patchValue({
+                        delegateFrom: this.mapPartyToUserValue(d.row.delegator),
+                        delegateTo: d.row.delegatedUser,
+                        description: '',
+                        delegateFromDateTime: d.row.startsAtUtc,
+                        delegateToDateTime: d.row.endsAtUtc,
+                        delegationDaysType: d.row.dayRuleMode,
+                        specificDays: d.row.specificDays ?? [],
+                        requiresApproval: d.row.approval?.requiresApproval ?? false,
+                    });
+                    this.scope.set({
+                        grants: d.scope?.grants ?? [],
+                        metadata: d.scope?.metadata ?? {},
+                    });
+                }
+                else if (!editing) {
+                    if (this.createInitialized)
+                        return;
+                    this.createInitialized = true;
+                    this.delegationFormControl.reset({
+                        delegateFrom: null,
+                        delegationDaysType: 'FullRange',
+                        requiresApproval: true,
+                    });
+                    this.scope.set(EMPTY_SCOPE);
+                }
+            });
         });
         effect(() => {
             const currentDelegator = this.currentDelegator();
@@ -2554,8 +2648,8 @@ class DelegationForm {
         const delegationDaysType = (value?.delegationDaysType ?? 'FullRange');
         const specificDays = delegationDaysType === 'SpecificDays' ? (value?.specificDays ?? []) : [];
         const description = value?.description;
-        const delegateFromDateTime = value?.delegateFromDateTime;
-        const delegateToDateTime = value?.delegateToDateTime;
+        const delegateFromDateTime = toUtcIso(value?.delegateFromDateTime) ?? '';
+        const delegateToDateTime = toUtcIso(value?.delegateToDateTime) ?? '';
         const requiresApproval = !!value?.requiresApproval;
         const delegatedUserId = extractUserId(value?.delegateTo) ?? '';
         const selectedDelegatorId = this.selectedDelegatorId();
@@ -2708,7 +2802,7 @@ class DelegationDetailDrawer {
         return toDelegationUserEntity(party, { label });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col h-full\">\r\n    <!-- Tabs -->\r\n    <div class=\"border-b border-surface-200 px-4 pt-2\">\r\n      <mt-tabs\r\n        mode=\"underline\"\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        fluid\r\n      ></mt-tabs>\r\n    </div>\r\n\r\n    <!-- Body -->\r\n    <div class=\"flex-1 overflow-y-auto p-4\">\r\n      @if (isLoading() && !detail()) {\r\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\"></p-skeleton>\r\n      } @else if (detail(); as d) {\r\n        @if (activeTab() === \"overview\") {\r\n          <div class=\"flex flex-col gap-4\">\r\n            <div class=\"flex items-center justify-between gap-3\">\r\n              <div class=\"flex items-center gap-3 min-w-0\">\r\n                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegator,\r\n                      t('delegations.column.delegatorName')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <mt-delegation-status-chip\r\n                [status]=\"d.status.effectiveStatus\"\r\n              ></mt-delegation-status-chip>\r\n            </div>\r\n\r\n            <div class=\"grid grid-cols-2 gap-4\">\r\n              <div class=\"flex flex-col\">\r\n                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegatedUser,\r\n                      t('delegations.column.delegatedTo')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.approval\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{ approvalLabel() }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.startDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.endDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.form.timeZone\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  d.row.timeZoneId\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.days\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  @if (d.row.dayRuleMode === \"FullRange\") {\r\n                    {{ t(\"delegations.form.fullRange\") }}\r\n                  } @else {\r\n                    {{ formatSpecificDays(d.row.specificDays) }}\r\n                  }\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            @if (d.row.cancellation?.cancellationReason) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3 text-sm text-surface-800\"\r\n              >\r\n                <div class=\"font-medium\">\r\n                  {{ t(\"delegations.form.cancellationReason\") }}\r\n                </div>\r\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <!-- Scope tab -->\r\n          <div class=\"flex flex-col gap-3\">\r\n            <div class=\"text-sm text-surface-900\">\r\n              {{\r\n                formatScopeSummary(d.row.scopeSummary) ||\r\n                  t(\"delegations.column.scopeSummary\")\r\n              }}\r\n            </div>\r\n            <div class=\"flex flex-col gap-2\">\r\n              @for (grant of d.scope.grants; track $index) {\r\n                <div\r\n                  class=\"border border-surface-200 rounded-md px-3 py-2 flex flex-col gap-1\"\r\n                >\r\n                  <div class=\"flex items-center justify-between gap-2\">\r\n                    <span class=\"text-sm font-medium text-surface-900\">\r\n                      {{ getScopeTargetLabel(grant.target) }}\r\n                    </span>\r\n                    <span class=\"text-xs text-surface-500\">\r\n                      {{ grant.target.targetType }}\r\n                    </span>\r\n                  </div>\r\n                  <span\r\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\r\n                  >\r\n                    {{ getScopeActionLabel(grant.action) }}\r\n                  </span>\r\n                </div>\r\n              }\r\n              @if (d.scope.grants.length === 0) {\r\n                <p class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.scope.noSelection\") }}\r\n                </p>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"border-t border-surface-200 px-4 py-3 flex items-center justify-end\"\r\n    >\r\n      <mt-button\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        variant=\"outlined\"\r\n        (click)=\"ref.close()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i3.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col h-full\">\r\n    <!-- Tabs -->\r\n    <div class=\"border-b border-surface-200 px-4 pt-2\">\r\n      <mt-tabs\r\n        mode=\"underline\"\r\n        [(active)]=\"activeTab\"\r\n        [options]=\"tabOptions()\"\r\n        fluid\r\n      ></mt-tabs>\r\n    </div>\r\n\r\n    <!-- Body -->\r\n    <div class=\"flex-1 overflow-y-auto p-4\">\r\n      @if (isLoading() && !detail()) {\r\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\r\n        <p-skeleton height=\"6rem\"></p-skeleton>\r\n      } @else if (detail(); as d) {\r\n        @if (activeTab() === \"overview\") {\r\n          <div class=\"flex flex-col gap-4\">\r\n            <div class=\"flex items-center justify-between gap-3\">\r\n              <div class=\"flex items-center gap-3 min-w-0\">\r\n                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegator,\r\n                      t('delegations.column.delegatorName')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <mt-delegation-status-chip\r\n                [status]=\"d.status.effectiveStatus\"\r\n              ></mt-delegation-status-chip>\r\n            </div>\r\n\r\n            <div class=\"grid grid-cols-2 gap-4\">\r\n              <div class=\"flex flex-col\">\r\n                <mt-entity-preview\r\n                  [data]=\"\r\n                    userEntity(\r\n                      d.row.delegatedUser,\r\n                      t('delegations.column.delegatedTo')\r\n                    )\r\n                  \"\r\n                ></mt-entity-preview>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.approval\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{ approvalLabel() }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.startDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.endDate\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\r\n                </span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.form.timeZone\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">{{\r\n                  d.row.timeZoneId\r\n                }}</span>\r\n              </div>\r\n              <div class=\"flex flex-col\">\r\n                <span class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.column.days\") }}\r\n                </span>\r\n                <span class=\"text-sm text-surface-900\">\r\n                  @if (d.row.dayRuleMode === \"FullRange\") {\r\n                    {{ t(\"delegations.form.fullRange\") }}\r\n                  } @else {\r\n                    {{ formatSpecificDays(d.row.specificDays) }}\r\n                  }\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            @if (d.row.cancellation?.cancellationReason) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3 text-sm text-surface-800\"\r\n              >\r\n                <div class=\"font-medium\">\r\n                  {{ t(\"delegations.form.cancellationReason\") }}\r\n                </div>\r\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\r\n              </div>\r\n            }\r\n          </div>\r\n        } @else {\r\n          <!-- Scope tab -->\r\n          <div class=\"flex flex-col gap-3\">\r\n            <div class=\"text-sm text-surface-900\">\r\n              {{\r\n                formatScopeSummary(d.row.scopeSummary) ||\r\n                  t(\"delegations.column.scopeSummary\")\r\n              }}\r\n            </div>\r\n            <div class=\"flex flex-col gap-2\">\r\n              @for (grant of d.scope.grants; track $index) {\r\n                <div\r\n                  class=\"border border-surface-200 rounded-md px-3 py-2 flex flex-col gap-1\"\r\n                >\r\n                  <div class=\"flex items-center justify-between gap-2\">\r\n                    <span class=\"text-sm font-medium text-surface-900\">\r\n                      {{ getScopeTargetLabel(grant.target) }}\r\n                    </span>\r\n                    <span class=\"text-xs text-surface-500\">\r\n                      {{ grant.target.targetType }}\r\n                    </span>\r\n                  </div>\r\n                  <span\r\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\r\n                  >\r\n                    {{ getScopeActionLabel(grant.action) }}\r\n                  </span>\r\n                </div>\r\n              }\r\n              @if (d.scope.grants.length === 0) {\r\n                <p class=\"text-xs text-surface-500\">\r\n                  {{ t(\"delegations.scope.noSelection\") }}\r\n                </p>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      }\r\n    </div>\r\n\r\n    <!-- Footer -->\r\n    <div\r\n      class=\"border-t border-surface-200 px-4 py-3 flex items-center justify-end\"\r\n    >\r\n      <mt-button\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        variant=\"outlined\"\r\n        (click)=\"ref.close()\"\r\n      ></mt-button>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i4.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, decorators: [{
             type: Component,