@masterteam/delegations 0.0.26 → 0.0.27

package/fesm2022/masterteam-delegations.mjs

@@ -1,7 +1,7 @@
 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 { input, computed, Component, inject, Injectable, ChangeDetectionStrategy, viewChild, signal, effect, model, untracked, linkedSignal } from '@angular/core';
 import { RouterLink, ActivatedRoute, Router, NavigationEnd, RouterOutlet } from '@angular/router';
 import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { Avatar } from '@masterteam/components/avatar';
@@ -484,6 +484,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{ selector: 'mt-start-session-dialog', standalone: true, imports: [CommonModule, Avatar, Button, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <div class=\"flex items-start gap-3\">\n      <mt-avatar\n        icon=\"user.user-01\"\n        styleClass=\"w-12! h-12! text-lg! bg-surface-200!\"\n      ></mt-avatar>\n      <div class=\"flex flex-col min-w-0\">\n        <div class=\"text-base font-medium text-gray-900 truncate\">\n          {{ delegation().delegator.displayName }}\n        </div>\n        @if (delegation().scopeSummary) {\n          <div class=\"text-xs text-gray-500 mt-1\">\n            {{ t(\"delegations.column.scopeSummary\") }}:\n            {{ formatScopeSummary(delegation().scopeSummary) }}\n          </div>\n        }\n      </div>\n    </div>\n\n    <p class=\"text-sm text-gray-600 leading-relaxed\">\n      {{ t(bodyKey()) }}\n    </p>\n\n    <div class=\"flex justify-end gap-2 pt-2 border-t border-gray-200\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.cancel')\"\n        [disabled]=\"isBusy()\"\n        (click)=\"cancel()\"\n      ></mt-button>\n      <mt-button\n        color=\"primary\"\n        icon=\"user.users-check\"\n        [label]=\"t(confirmLabelKey())\"\n        [loading]=\"isBusy()\"\n        (click)=\"confirm()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n" }]
         }], propDecorators: { delegation: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegation", required: true }] }], intent: [{ type: i0.Input, args: [{ isSignal: true, alias: "intent", required: false }] }] } });
 
+/**
+ * Post-login candidate prompt. It intentionally only lets the user choose a
+ * delegation; the existing StartSessionDialog still performs explicit consent.
+ */
+class DelegationCandidatesPromptDialog {
+    candidates = input.required(...(ngDevMode ? [{ debugName: "candidates" }] : /* istanbul ignore next */ []));
+    ref = inject(ModalRef);
+    transloco = inject(TranslocoService);
+    formatScopeSummary(summary) {
+        return formatDelegationScopeSummary(summary, this.transloco.getActiveLang());
+    }
+    select(row) {
+        this.ref.close(row);
+    }
+    close() {
+        this.ref.close(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationCandidatesPromptDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationCandidatesPromptDialog, isStandalone: true, selector: "mt-delegation-candidates-prompt-dialog", inputs: { candidates: { classPropertyName: "candidates", publicName: "candidates", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <p class=\"text-sm leading-relaxed text-gray-600\">\n      {{ t(\"delegations.session.promptBody\") }}\n    </p>\n\n    <div class=\"flex max-h-80 flex-col gap-2 overflow-y-auto pr-1\">\n      @for (cand of candidates(); track cand.delegationId) {\n        <button\n          type=\"button\"\n          class=\"flex w-full cursor-pointer items-center justify-between gap-3 rounded-2xl border border-surface-200 bg-surface-0 px-3 py-3 text-start transition-colors hover:border-primary-200 hover:bg-primary-50/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n          [attr.aria-label]=\"\n            t('delegations.session.promptStartAria', {\n              delegatorName: cand.delegator.displayName,\n            })\n          \"\n          (click)=\"select(cand)\"\n        >\n          <span class=\"flex min-w-0 items-center gap-3\">\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-10! h-10! text-base! bg-surface-200!\"\n            ></mt-avatar>\n            <span class=\"flex min-w-0 flex-col\">\n              <span class=\"truncate text-sm font-medium text-gray-900\">\n                {{ cand.delegator.displayName }}\n              </span>\n              @if (cand.scopeSummary) {\n                @let summary = formatScopeSummary(cand.scopeSummary);\n                <span\n                  class=\"truncate text-xs text-gray-500\"\n                  [title]=\"summary\"\n                >\n                  {{ summary }}\n                </span>\n              }\n            </span>\n          </span>\n          <span class=\"inline-flex items-center gap-2 text-sm text-primary\">\n            {{ t(\"delegations.action.startSession\") }}\n            <mt-icon icon=\"arrow.arrow-right\" class=\"text-base\"></mt-icon>\n          </span>\n        </button>\n      }\n    </div>\n\n    <div class=\"flex justify-end border-t border-gray-200 pt-3\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.close')\"\n        (click)=\"close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { 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: DelegationCandidatesPromptDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-delegation-candidates-prompt-dialog', imports: [CommonModule, Avatar, Button, Icon, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4 p-2\">\n    <p class=\"text-sm leading-relaxed text-gray-600\">\n      {{ t(\"delegations.session.promptBody\") }}\n    </p>\n\n    <div class=\"flex max-h-80 flex-col gap-2 overflow-y-auto pr-1\">\n      @for (cand of candidates(); track cand.delegationId) {\n        <button\n          type=\"button\"\n          class=\"flex w-full cursor-pointer items-center justify-between gap-3 rounded-2xl border border-surface-200 bg-surface-0 px-3 py-3 text-start transition-colors hover:border-primary-200 hover:bg-primary-50/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary\"\n          [attr.aria-label]=\"\n            t('delegations.session.promptStartAria', {\n              delegatorName: cand.delegator.displayName,\n            })\n          \"\n          (click)=\"select(cand)\"\n        >\n          <span class=\"flex min-w-0 items-center gap-3\">\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-10! h-10! text-base! bg-surface-200!\"\n            ></mt-avatar>\n            <span class=\"flex min-w-0 flex-col\">\n              <span class=\"truncate text-sm font-medium text-gray-900\">\n                {{ cand.delegator.displayName }}\n              </span>\n              @if (cand.scopeSummary) {\n                @let summary = formatScopeSummary(cand.scopeSummary);\n                <span\n                  class=\"truncate text-xs text-gray-500\"\n                  [title]=\"summary\"\n                >\n                  {{ summary }}\n                </span>\n              }\n            </span>\n          </span>\n          <span class=\"inline-flex items-center gap-2 text-sm text-primary\">\n            {{ t(\"delegations.action.startSession\") }}\n            <mt-icon icon=\"arrow.arrow-right\" class=\"text-base\"></mt-icon>\n          </span>\n        </button>\n      }\n    </div>\n\n    <div class=\"flex justify-end border-t border-gray-200 pt-3\">\n      <mt-button\n        variant=\"outlined\"\n        color=\"secondary\"\n        [label]=\"t('delegations.common.close')\"\n        (click)=\"close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n" }]
+        }], propDecorators: { candidates: [{ type: i0.Input, args: [{ isSignal: true, alias: "candidates", required: true }] }] } });
+
 /**
  * Topbar surface for the delegation runtime (doc 05, 09).
  *
@@ -497,6 +522,7 @@ class TopbarDelegationMenu {
     managePath = input('/delegations', ...(ngDevMode ? [{ debugName: "managePath" }] : /* istanbul ignore next */ []));
     compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : /* istanbul ignore next */ []));
     showManageLink = input(true, ...(ngDevMode ? [{ debugName: "showManageLink" }] : /* istanbul ignore next */ []));
+    promptOnCandidates = input(true, ...(ngDevMode ? [{ debugName: "promptOnCandidates" }] : /* istanbul ignore next */ []));
     facade = inject(DelegationSessionFacade);
     modal = inject(ModalService);
     transloco = inject(TranslocoService);
@@ -506,6 +532,7 @@ class TopbarDelegationMenu {
     hasCandidates = this.facade.hasCandidates;
     onBehalfOf = this.facade.onBehalfOf;
     executedBy = this.facade.executedBy;
+    promptShown = signal(false, ...(ngDevMode ? [{ debugName: "promptShown" }] : /* istanbul ignore next */ []));
     mode = computed(() => {
         if (this.active())
             return 'active';
@@ -513,6 +540,20 @@ class TopbarDelegationMenu {
             return 'candidates';
         return 'hidden';
     }, ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const candidates = this.candidates();
+            const shouldPrompt = this.promptOnCandidates() &&
+                !this.promptShown() &&
+                !this.active() &&
+                candidates.length > 0;
+            if (!shouldPrompt) {
+                return;
+            }
+            this.promptShown.set(true);
+            queueMicrotask(() => this.openCandidatesPrompt(candidates));
+        });
+    }
     ngOnInit() {
         this.facade.loadCandidates();
     }
@@ -548,8 +589,22 @@ class TopbarDelegationMenu {
             inputValues: { delegation: row, intent },
         });
     }
+    openCandidatesPrompt(candidates) {
+        const ref = this.modal.openModal(DelegationCandidatesPromptDialog, 'dialog', {
+            header: this.transloco.translate('delegations.session.availableTitle'),
+            styleClass: '!w-[min(96vw,34rem)] !max-w-[96vw]',
+            dismissableMask: true,
+            dismissible: true,
+            inputValues: { candidates },
+        });
+        ref.onClose.subscribe((row) => {
+            if (row) {
+                this.openConfirm(row, 'start');
+            }
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TopbarDelegationMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TopbarDelegationMenu, isStandalone: true, selector: "mt-topbar-delegation-menu", inputs: { managePath: { classPropertyName: "managePath", publicName: "managePath", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, showManageLink: { classPropertyName: "showManageLink", publicName: "showManageLink", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    @if (mode() === \"active\") {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {{\n          t(\"delegations.session.banner\", {\n            delegatorName: onBehalfOf()?.displayName,\n          })\n        }}.\n        {{\n          t(\"delegations.session.executedBy\", {\n            actualUserName: executedBy()?.displayName,\n          })\n        }}\n      </span>\n    }\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"mt-delegation-trigger__button flex min-w-0 max-w-full items-center gap-2 rounded-full px-2 py-1 hover:bg-surface-100 cursor-pointer\"\n        [class.mt-delegation-trigger__button--active]=\"mode() === 'active'\"\n        [attr.aria-label]=\"\n          mode() === 'active'\n            ? t('delegations.session.banner', {\n                delegatorName: onBehalfOf()?.displayName,\n              }) +\n              '. ' +\n              t('delegations.session.executedBy', {\n                actualUserName: executedBy()?.displayName,\n              })\n            : t('delegations.session.availableTitle')\n        \"\n        [attr.title]=\"\n          mode() === 'active'\n            ? t('delegations.session.banner', {\n                delegatorName: onBehalfOf()?.displayName,\n              })\n            : null\n        \"\n        (click)=\"togglePopover($event)\"\n      >\n        @if (mode() === \"active\") {\n          <mt-icon\n            icon=\"user.users-check\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span\n              class=\"mt-delegation-trigger__label flex min-w-0 flex-col text-start leading-tight\"\n            >\n              <span class=\"truncate text-sm font-medium\">\n                {{\n                  t(\"delegations.session.banner\", {\n                    delegatorName: onBehalfOf()?.displayName,\n                  })\n                }}\n              </span>\n              <span class=\"truncate text-[0.6875rem] font-normal text-gray-500\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </span>\n            </span>\n          }\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        } @else {\n          <mt-icon\n            icon=\"user.users-plus\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{ t(\"delegations.session.availableTitle\") }}\n            </span>\n          }\n        }\n      </button>\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\n        @if (mode() === \"active\" && active(); as session) {\n          <!-- STATE C \u2014 active session -->\n          <div\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\n          >\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\n            ></mt-avatar>\n            <div class=\"flex flex-col min-w-0 flex-1\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\n                {{ onBehalfOf()?.displayName }}\n              </div>\n              <div class=\"text-xs text-gray-500 mt-1\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </div>\n              @if (session.delegation.scopeSummary) {\n                @let summary =\n                  formatScopeSummary(session.delegation.scopeSummary);\n                <div\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\n                  [title]=\"summary\"\n                >\n                  {{ t(\"delegations.column.scopeSummary\") }}:\n                  {{ summary }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\n            <mt-button\n              variant=\"text\"\n              icon=\"arrow.arrow-left\"\n              [label]=\"t('delegations.action.endSession')\"\n              styleClass=\"w-full justify-start\"\n              (click)=\"endSession($event)\"\n            ></mt-button>\n          </div>\n\n          @if (candidates().length > 1) {\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\n                {{ t(\"delegations.session.switchToAnother\") }}\n              </div>\n              @for (cand of candidates(); track cand.delegationId) {\n                @if (cand.delegationId !== session.delegation.delegationId) {\n                  <button\n                    type=\"button\"\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\n                    [attr.aria-label]=\"\n                      t('delegations.action.switchSession') +\n                      ': ' +\n                      cand.delegator.displayName\n                    \"\n                    (click)=\"switchTo(cand, $event)\"\n                  >\n                    <div class=\"flex items-center gap-2 min-w-0\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\n                      ></mt-avatar>\n                      <span class=\"text-sm text-gray-900 truncate\">\n                        {{ cand.delegator.displayName }}\n                      </span>\n                    </div>\n                    <mt-icon\n                      icon=\"arrow.switch-horizontal-01\"\n                      styleClass=\"text-base text-gray-400\"\n                    ></mt-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        } @else if (mode() === \"candidates\") {\n          <!-- STATE B \u2014 candidates available -->\n          <div class=\"border-b border-gray-200 px-4 py-3\">\n            <div class=\"text-sm font-medium text-gray-900\">\n              {{ t(\"delegations.session.youCanActAs\") }}\n            </div>\n            <div class=\"text-xs text-gray-500 mt-1\">\n              {{ t(\"delegations.session.chooseDelegatorHint\") }}\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\n            @for (cand of candidates(); track cand.delegationId) {\n              <button\n                type=\"button\"\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\n                [attr.aria-label]=\"\n                  t('delegations.action.startSession') +\n                  ': ' +\n                  cand.delegator.displayName\n                \"\n                (click)=\"start(cand, $event)\"\n              >\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n                  <mt-avatar\n                    icon=\"user.user-01\"\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\n                  ></mt-avatar>\n                  <div class=\"flex flex-col min-w-0\">\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\n                      {{ cand.delegator.displayName }}\n                    </span>\n                    @if (cand.scopeSummary) {\n                      @let summary = formatScopeSummary(cand.scopeSummary);\n                      <span\n                        class=\"text-xs text-gray-500 truncate\"\n                        [title]=\"summary\"\n                      >\n                        {{ summary }}\n                      </span>\n                    }\n                  </div>\n                </div>\n                <mt-icon\n                  icon=\"arrow.arrow-right\"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Footer -->\n        @if (showManageLink()) {\n          <div class=\"border-t border-gray-200 px-2 py-2\">\n            <a\n              [routerLink]=\"managePath()\"\n              (click)=\"popover().hide()\"\n              class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\n            >\n              <mt-icon\n                icon=\"general.settings-02\"\n                styleClass=\"text-base\"\n              ></mt-icon>\n              <span>{{ t(\"delegations.session.manage\") }}</span>\n            </a>\n          </div>\n        }\n      </div>\n    </p-popover>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.mt-delegation-trigger{min-width:0;max-width:100%}.mt-delegation-trigger__button{transition:background-color .2s ease-out;min-width:0;max-width:100%;border:1px solid transparent}.mt-delegation-trigger__button--active{border-color:color-mix(in srgb,var(--p-primary-color, #2aaec0) 34%,transparent);background-color:color-mix(in srgb,var(--p-primary-color, #2aaec0) 10%,transparent);box-shadow:0 8px 18px #0f172a14}.mt-delegation-trigger__label{max-width:min(16rem,28vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1200px){.mt-delegation-trigger__label{max-width:10rem}}@media(max-width:1024px){.mt-delegation-trigger__button{gap:.375rem;padding-inline:.375rem}.mt-delegation-trigger__label{display:none}}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TopbarDelegationMenu, isStandalone: true, selector: "mt-topbar-delegation-menu", inputs: { managePath: { classPropertyName: "managePath", publicName: "managePath", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, showManageLink: { classPropertyName: "showManageLink", publicName: "showManageLink", isSignal: true, isRequired: false, transformFunction: null }, promptOnCandidates: { classPropertyName: "promptOnCandidates", publicName: "promptOnCandidates", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    @if (mode() === \"active\") {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {{\n          t(\"delegations.session.banner\", {\n            delegatorName: onBehalfOf()?.displayName,\n          })\n        }}.\n        {{\n          t(\"delegations.session.executedBy\", {\n            actualUserName: executedBy()?.displayName,\n          })\n        }}\n      </span>\n    }\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"mt-delegation-trigger__button flex min-w-0 max-w-full items-center gap-2 rounded-full px-2 py-1 hover:bg-surface-100 cursor-pointer\"\n        [class.mt-delegation-trigger__button--active]=\"mode() === 'active'\"\n        [attr.aria-label]=\"\n          mode() === 'active'\n            ? t('delegations.session.banner', {\n                delegatorName: onBehalfOf()?.displayName,\n              }) +\n              '. ' +\n              t('delegations.session.executedBy', {\n                actualUserName: executedBy()?.displayName,\n              })\n            : t('delegations.session.availableTitle')\n        \"\n        [attr.title]=\"\n          mode() === 'active'\n            ? t('delegations.session.banner', {\n                delegatorName: onBehalfOf()?.displayName,\n              })\n            : null\n        \"\n        (click)=\"togglePopover($event)\"\n      >\n        @if (mode() === \"active\") {\n          <mt-icon\n            icon=\"user.users-check\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span\n              class=\"mt-delegation-trigger__label flex min-w-0 flex-col text-start leading-tight\"\n            >\n              <span class=\"truncate text-sm font-medium\">\n                {{\n                  t(\"delegations.session.banner\", {\n                    delegatorName: onBehalfOf()?.displayName,\n                  })\n                }}\n              </span>\n              <span class=\"truncate text-[0.6875rem] font-normal text-gray-500\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </span>\n            </span>\n          }\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        } @else {\n          <mt-icon\n            icon=\"user.users-plus\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{ t(\"delegations.session.availableTitle\") }}\n            </span>\n          }\n        }\n      </button>\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\n        @if (mode() === \"active\" && active(); as session) {\n          <!-- STATE C \u2014 active session -->\n          <div\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\n          >\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\n            ></mt-avatar>\n            <div class=\"flex flex-col min-w-0 flex-1\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\n                {{ onBehalfOf()?.displayName }}\n              </div>\n              <div class=\"text-xs text-gray-500 mt-1\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </div>\n              @if (session.delegation.scopeSummary) {\n                @let summary =\n                  formatScopeSummary(session.delegation.scopeSummary);\n                <div\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\n                  [title]=\"summary\"\n                >\n                  {{ t(\"delegations.column.scopeSummary\") }}:\n                  {{ summary }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\n            <mt-button\n              variant=\"text\"\n              icon=\"arrow.arrow-left\"\n              [label]=\"t('delegations.action.endSession')\"\n              styleClass=\"w-full justify-start\"\n              (click)=\"endSession($event)\"\n            ></mt-button>\n          </div>\n\n          @if (candidates().length > 1) {\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\n                {{ t(\"delegations.session.switchToAnother\") }}\n              </div>\n              @for (cand of candidates(); track cand.delegationId) {\n                @if (cand.delegationId !== session.delegation.delegationId) {\n                  <button\n                    type=\"button\"\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\n                    [attr.aria-label]=\"\n                      t('delegations.action.switchSession') +\n                      ': ' +\n                      cand.delegator.displayName\n                    \"\n                    (click)=\"switchTo(cand, $event)\"\n                  >\n                    <div class=\"flex items-center gap-2 min-w-0\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\n                      ></mt-avatar>\n                      <span class=\"text-sm text-gray-900 truncate\">\n                        {{ cand.delegator.displayName }}\n                      </span>\n                    </div>\n                    <mt-icon\n                      icon=\"arrow.switch-horizontal-01\"\n                      styleClass=\"text-base text-gray-400\"\n                    ></mt-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        } @else if (mode() === \"candidates\") {\n          <!-- STATE B \u2014 candidates available -->\n          <div class=\"border-b border-gray-200 px-4 py-3\">\n            <div class=\"text-sm font-medium text-gray-900\">\n              {{ t(\"delegations.session.youCanActAs\") }}\n            </div>\n            <div class=\"text-xs text-gray-500 mt-1\">\n              {{ t(\"delegations.session.chooseDelegatorHint\") }}\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\n            @for (cand of candidates(); track cand.delegationId) {\n              <button\n                type=\"button\"\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\n                [attr.aria-label]=\"\n                  t('delegations.action.startSession') +\n                  ': ' +\n                  cand.delegator.displayName\n                \"\n                (click)=\"start(cand, $event)\"\n              >\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n                  <mt-avatar\n                    icon=\"user.user-01\"\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\n                  ></mt-avatar>\n                  <div class=\"flex flex-col min-w-0\">\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\n                      {{ cand.delegator.displayName }}\n                    </span>\n                    @if (cand.scopeSummary) {\n                      @let summary = formatScopeSummary(cand.scopeSummary);\n                      <span\n                        class=\"text-xs text-gray-500 truncate\"\n                        [title]=\"summary\"\n                      >\n                        {{ summary }}\n                      </span>\n                    }\n                  </div>\n                </div>\n                <mt-icon\n                  icon=\"arrow.arrow-right\"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Footer -->\n        @if (showManageLink()) {\n          <div class=\"border-t border-gray-200 px-2 py-2\">\n            <a\n              [routerLink]=\"managePath()\"\n              (click)=\"popover().hide()\"\n              class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\n            >\n              <mt-icon\n                icon=\"general.settings-02\"\n                styleClass=\"text-base\"\n              ></mt-icon>\n              <span>{{ t(\"delegations.session.manage\") }}</span>\n            </a>\n          </div>\n        }\n      </div>\n    </p-popover>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.mt-delegation-trigger{min-width:0;max-width:100%}.mt-delegation-trigger__button{transition:background-color .2s ease-out;min-width:0;max-width:100%;border:1px solid transparent}.mt-delegation-trigger__button--active{border-color:color-mix(in srgb,var(--p-primary-color, #2aaec0) 34%,transparent);background-color:color-mix(in srgb,var(--p-primary-color, #2aaec0) 10%,transparent);box-shadow:0 8px 18px #0f172a14}.mt-delegation-trigger__label{max-width:min(16rem,28vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1200px){.mt-delegation-trigger__label{max-width:10rem}}@media(max-width:1024px){.mt-delegation-trigger__button{gap:.375rem;padding-inline:.375rem}.mt-delegation-trigger__label{display:none}}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions", "motionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TopbarDelegationMenu, decorators: [{
             type: Component,
@@ -563,7 +618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         TranslocoDirective,
                         DelegationStatusChip,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    @if (mode() === \"active\") {\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {{\n          t(\"delegations.session.banner\", {\n            delegatorName: onBehalfOf()?.displayName,\n          })\n        }}.\n        {{\n          t(\"delegations.session.executedBy\", {\n            actualUserName: executedBy()?.displayName,\n          })\n        }}\n      </span>\n    }\n    <div class=\"mt-delegation-trigger flex items-center gap-2\">\n      <button\n        type=\"button\"\n        class=\"mt-delegation-trigger__button flex min-w-0 max-w-full items-center gap-2 rounded-full px-2 py-1 hover:bg-surface-100 cursor-pointer\"\n        [class.mt-delegation-trigger__button--active]=\"mode() === 'active'\"\n        [attr.aria-label]=\"\n          mode() === 'active'\n            ? t('delegations.session.banner', {\n                delegatorName: onBehalfOf()?.displayName,\n              }) +\n              '. ' +\n              t('delegations.session.executedBy', {\n                actualUserName: executedBy()?.displayName,\n              })\n            : t('delegations.session.availableTitle')\n        \"\n        [attr.title]=\"\n          mode() === 'active'\n            ? t('delegations.session.banner', {\n                delegatorName: onBehalfOf()?.displayName,\n              })\n            : null\n        \"\n        (click)=\"togglePopover($event)\"\n      >\n        @if (mode() === \"active\") {\n          <mt-icon\n            icon=\"user.users-check\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span\n              class=\"mt-delegation-trigger__label flex min-w-0 flex-col text-start leading-tight\"\n            >\n              <span class=\"truncate text-sm font-medium\">\n                {{\n                  t(\"delegations.session.banner\", {\n                    delegatorName: onBehalfOf()?.displayName,\n                  })\n                }}\n              </span>\n              <span class=\"truncate text-[0.6875rem] font-normal text-gray-500\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </span>\n            </span>\n          }\n          <mt-delegation-status-chip\n            status=\"Active\"\n          ></mt-delegation-status-chip>\n        } @else {\n          <mt-icon\n            icon=\"user.users-plus\"\n            styleClass=\"text-lg text-primary\"\n          ></mt-icon>\n          @if (!compact()) {\n            <span class=\"mt-delegation-trigger__label text-sm font-medium\">\n              {{ t(\"delegations.session.availableTitle\") }}\n            </span>\n          }\n        }\n      </button>\n    </div>\n\n    <p-popover #popover [pt]=\"{ content: { class: 'p-0!' } }\">\n      <div class=\"flex flex-col min-w-80 max-w-96 p-0\">\n        @if (mode() === \"active\" && active(); as session) {\n          <!-- STATE C \u2014 active session -->\n          <div\n            class=\"flex items-start gap-3 border-b border-gray-200 px-4 py-4\"\n          >\n            <mt-avatar\n              icon=\"user.user-01\"\n              styleClass=\"w-11! h-11! text-xl! text-gray-600! bg-surface-300!\"\n            ></mt-avatar>\n            <div class=\"flex flex-col min-w-0 flex-1\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <div class=\"text-sm font-medium text-gray-900 truncate\">\n                {{ onBehalfOf()?.displayName }}\n              </div>\n              <div class=\"text-xs text-gray-500 mt-1\">\n                {{\n                  t(\"delegations.session.executedBy\", {\n                    actualUserName: executedBy()?.displayName,\n                  })\n                }}\n              </div>\n              @if (session.delegation.scopeSummary) {\n                @let summary =\n                  formatScopeSummary(session.delegation.scopeSummary);\n                <div\n                  class=\"text-xs text-gray-500 mt-1 truncate\"\n                  [title]=\"summary\"\n                >\n                  {{ t(\"delegations.column.scopeSummary\") }}:\n                  {{ summary }}\n                </div>\n              }\n            </div>\n          </div>\n\n          <div class=\"flex flex-col gap-1 px-2 py-2\">\n            <mt-button\n              variant=\"text\"\n              icon=\"arrow.arrow-left\"\n              [label]=\"t('delegations.action.endSession')\"\n              styleClass=\"w-full justify-start\"\n              (click)=\"endSession($event)\"\n            ></mt-button>\n          </div>\n\n          @if (candidates().length > 1) {\n            <div class=\"border-t border-gray-200 pt-2 px-2 pb-2\">\n              <div class=\"text-xs text-gray-500 px-2 pb-1\">\n                {{ t(\"delegations.session.switchToAnother\") }}\n              </div>\n              @for (cand of candidates(); track cand.delegationId) {\n                @if (cand.delegationId !== session.delegation.delegationId) {\n                  <button\n                    type=\"button\"\n                    class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer\"\n                    [attr.aria-label]=\"\n                      t('delegations.action.switchSession') +\n                      ': ' +\n                      cand.delegator.displayName\n                    \"\n                    (click)=\"switchTo(cand, $event)\"\n                  >\n                    <div class=\"flex items-center gap-2 min-w-0\">\n                      <mt-avatar\n                        icon=\"user.user-01\"\n                        styleClass=\"w-7! h-7! text-sm! bg-surface-200!\"\n                      ></mt-avatar>\n                      <span class=\"text-sm text-gray-900 truncate\">\n                        {{ cand.delegator.displayName }}\n                      </span>\n                    </div>\n                    <mt-icon\n                      icon=\"arrow.switch-horizontal-01\"\n                      styleClass=\"text-base text-gray-400\"\n                    ></mt-icon>\n                  </button>\n                }\n              }\n            </div>\n          }\n        } @else if (mode() === \"candidates\") {\n          <!-- STATE B \u2014 candidates available -->\n          <div class=\"border-b border-gray-200 px-4 py-3\">\n            <div class=\"text-sm font-medium text-gray-900\">\n              {{ t(\"delegations.session.youCanActAs\") }}\n            </div>\n            <div class=\"text-xs text-gray-500 mt-1\">\n              {{ t(\"delegations.session.chooseDelegatorHint\") }}\n            </div>\n          </div>\n          <div class=\"flex flex-col gap-1 px-2 py-2 max-h-72 overflow-y-auto\">\n            @for (cand of candidates(); track cand.delegationId) {\n              <button\n                type=\"button\"\n                class=\"flex items-center justify-between gap-2 w-full px-2 py-2 rounded-md hover:bg-surface-100 cursor-pointer text-start\"\n                [attr.aria-label]=\"\n                  t('delegations.action.startSession') +\n                  ': ' +\n                  cand.delegator.displayName\n                \"\n                (click)=\"start(cand, $event)\"\n              >\n                <div class=\"flex items-center gap-2 min-w-0 flex-1\">\n                  <mt-avatar\n                    icon=\"user.user-01\"\n                    styleClass=\"w-9! h-9! text-base! bg-surface-200!\"\n                  ></mt-avatar>\n                  <div class=\"flex flex-col min-w-0\">\n                    <span class=\"text-sm font-medium text-gray-900 truncate\">\n                      {{ cand.delegator.displayName }}\n                    </span>\n                    @if (cand.scopeSummary) {\n                      @let summary = formatScopeSummary(cand.scopeSummary);\n                      <span\n                        class=\"text-xs text-gray-500 truncate\"\n                        [title]=\"summary\"\n                      >\n                        {{ summary }}\n                      </span>\n                    }\n                  </div>\n                </div>\n                <mt-icon\n                  icon=\"arrow.arrow-right\"\n                  styleClass=\"text-base text-gray-400\"\n                ></mt-icon>\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Footer -->\n        @if (showManageLink()) {\n          <div class=\"border-t border-gray-200 px-2 py-2\">\n            <a\n              [routerLink]=\"managePath()\"\n              (click)=\"popover().hide()\"\n              class=\"flex items-center gap-2 px-3 py-2 rounded-md text-gray-700 hover:bg-surface-100 text-sm cursor-pointer\"\n            >\n              <mt-icon\n                icon=\"general.settings-02\"\n                styleClass=\"text-base\"\n              ></mt-icon>\n              <span>{{ t(\"delegations.session.manage\") }}</span>\n            </a>\n          </div>\n        }\n      </div>\n    </p-popover>\n  }\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:center;min-width:0;max-width:100%}.mt-delegation-trigger{min-width:0;max-width:100%}.mt-delegation-trigger__button{transition:background-color .2s ease-out;min-width:0;max-width:100%;border:1px solid transparent}.mt-delegation-trigger__button--active{border-color:color-mix(in srgb,var(--p-primary-color, #2aaec0) 34%,transparent);background-color:color-mix(in srgb,var(--p-primary-color, #2aaec0) 10%,transparent);box-shadow:0 8px 18px #0f172a14}.mt-delegation-trigger__label{max-width:min(16rem,28vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:1200px){.mt-delegation-trigger__label{max-width:10rem}}@media(max-width:1024px){.mt-delegation-trigger__button{gap:.375rem;padding-inline:.375rem}.mt-delegation-trigger__label{display:none}}:host-context(.dark) .mt-delegation-trigger__button:hover{background-color:#94a3b826}\n"] }]
-        }], propDecorators: { managePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "managePath", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], showManageLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "showManageLink", required: false }] }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { managePath: [{ type: i0.Input, args: [{ isSignal: true, alias: "managePath", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], showManageLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "showManageLink", required: false }] }], promptOnCandidates: [{ type: i0.Input, args: [{ isSignal: true, alias: "promptOnCandidates", required: false }] }], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
 
 // ---------------------------------------------------------------------------
 // Lists / detail
@@ -2259,6 +2314,10 @@ class DelegationsList {
     assignedDecisionTab = input(false, ...(ngDevMode ? [{ debugName: "assignedDecisionTab" }] : /* istanbul ignore next */ []));
     assignedEmptyStateKey = input('delegations.empty.assigned', ...(ngDevMode ? [{ debugName: "assignedEmptyStateKey" }] : /* istanbul ignore next */ []));
     assignedStatus = input(null, ...(ngDevMode ? [{ debugName: "assignedStatus" }] : /* istanbul ignore next */ []));
+    showApprovalTab = input(true, ...(ngDevMode ? [{ debugName: "showApprovalTab" }] : /* istanbul ignore next */ []));
+    approvalTabLabelKey = input('delegations.tabs.approvals', ...(ngDevMode ? [{ debugName: "approvalTabLabelKey" }] : /* istanbul ignore next */ []));
+    approvalEmptyStateKey = input('delegations.empty.pending', ...(ngDevMode ? [{ debugName: "approvalEmptyStateKey" }] : /* istanbul ignore next */ []));
+    approvalStatus = input('PendingApproval', ...(ngDevMode ? [{ debugName: "approvalStatus" }] : /* istanbul ignore next */ []));
     facade = inject(DelegationsFacade);
     location = inject(Location);
     modal = inject(ModalService);
@@ -2279,25 +2338,32 @@ class DelegationsList {
     ], ...(ngDevMode ? [{ debugName: "breadcrumbItems" }] : /* istanbul ignore next */ []));
     activeTab = signal('my', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     surfaceTitle = computed(() => this.transloco.translate(this.surfaceTitleKey()), ...(ngDevMode ? [{ debugName: "surfaceTitle" }] : /* istanbul ignore next */ []));
-    tabs = computed(() => [
-        {
-            value: 'my',
-            label: this.transloco.translate('delegations.myDelegations'),
-        },
-        {
-            value: 'assigned',
-            label: this.assignedDecisionTab()
-                ? `${this.transloco.translate('delegations.action.approve')} / ${this.transloco.translate('delegations.action.reject')}`
-                : this.transloco.translate(this.assignedTabLabelKey()),
-        },
-    ], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    tabs = computed(() => {
+        const tabs = [
+            {
+                value: 'my',
+                label: this.transloco.translate('delegations.myDelegations'),
+            },
+            {
+                value: 'assigned',
+                label: this.assignedDecisionTab()
+                    ? `${this.transloco.translate('delegations.action.approve')} / ${this.transloco.translate('delegations.action.reject')}`
+                    : this.transloco.translate(this.assignedTabLabelKey()),
+            },
+        ];
+        if (this.showApprovalTab()) {
+            tabs.push({
+                value: 'approvals',
+                label: this.transloco.translate(this.approvalTabLabelKey()),
+            });
+        }
+        return tabs;
+    }, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     isLoading = computed(() => this.adminMode()
         ? this.facade.isLoadingAdmin()
         : 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()
         : this.activeTab() === 'my'
@@ -2307,30 +2373,22 @@ class DelegationsList {
         ? 'components.table.no-data-found'
         : this.activeTab() === 'my'
             ? 'delegations.empty.my'
-            : this.assignedEmptyStateKey(), ...(ngDevMode ? [{ debugName: "emptyStateKey" }] : /* istanbul ignore next */ []));
+            : this.activeTab() === 'approvals'
+                ? this.approvalEmptyStateKey()
+                : this.assignedEmptyStateKey(), ...(ngDevMode ? [{ debugName: "emptyStateKey" }] : /* istanbul ignore next */ []));
     statusCol = viewChild.required('statusCol');
     userCol = viewChild.required('userCol');
     delegatorCol = viewChild.required('delegatorCol');
     delegatedUserCol = viewChild.required('delegatedUserCol');
-    scopeCol = viewChild.required('scopeCol');
     daysCol = viewChild.required('daysCol');
-    canCreate = computed(() => {
-        if (this.adminMode())
-            return true;
-        if (this.isLoadingScopeOptions())
-            return false;
-        return hasDelegationGrantableScope(this.scopeOptions());
-    }, ...(ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []));
-    tableActions = computed(() => this.canCreate()
-        ? [
-            {
-                icon: 'general.plus',
-                label: this.transloco.translate('delegations.action.create'),
-                color: 'primary',
-                action: () => this.openForm(null),
-            },
-        ]
-        : [], ...(ngDevMode ? [{ debugName: "tableActions" }] : /* istanbul ignore next */ []));
+    tableActions = computed(() => [
+        {
+            icon: 'general.plus',
+            label: this.transloco.translate('delegations.action.create'),
+            color: 'primary',
+            action: () => this.openForm(null),
+        },
+    ], ...(ngDevMode ? [{ debugName: "tableActions" }] : /* istanbul ignore next */ []));
     rowActions = signal([
         {
             icon: 'general.eye',
@@ -2392,13 +2450,6 @@ class DelegationsList {
                 customCellTpl: this.statusCol(),
                 width: '10rem',
             },
-            {
-                key: 'scopeSummary',
-                label: this.transloco.translate('delegations.column.scopeSummary'),
-                type: 'custom',
-                customCellTpl: this.scopeCol(),
-                width: '18rem',
-            },
             {
                 key: 'startsAtUtc',
                 label: this.transloco.translate('delegations.column.startDate'),
@@ -2468,9 +2519,6 @@ class DelegationsList {
         'saturday',
     ];
     ngOnInit() {
-        if (!this.adminMode()) {
-            this.facade.loadScopeOptions();
-        }
         this.loadCurrentTab();
     }
     switchTab(tab) {
@@ -2488,6 +2536,12 @@ class DelegationsList {
         if (this.activeTab() === 'my') {
             this.facade.getMy(query);
         }
+        else if (this.activeTab() === 'approvals') {
+            this.facade.getAssigned({
+                ...query,
+                status: query.status ?? this.approvalStatus(),
+            });
+        }
         else {
             this.facade.getAssigned({
                 ...query,
@@ -2510,9 +2564,6 @@ class DelegationsList {
         }
         return this.transloco.translate('delegations.form.fullRange');
     }
-    formatScopeSummary(value) {
-        return formatDelegationScopeSummary(value, this.transloco.getActiveLang());
-    }
     getListedParty(row) {
         return this.activeTab() === 'my' ? row.delegatedUser : row.delegator;
     }
@@ -2595,7 +2646,7 @@ class DelegationsList {
         this.busyIds.update((ids) => on ? [...ids, key] : ids.filter((id) => id !== key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, showPageShell: { classPropertyName: "showPageShell", publicName: "showPageShell", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, surfaceTitleKey: { classPropertyName: "surfaceTitleKey", publicName: "surfaceTitleKey", isSignal: true, isRequired: false, transformFunction: null }, assignedTabLabelKey: { classPropertyName: "assignedTabLabelKey", publicName: "assignedTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, assignedDecisionTab: { classPropertyName: "assignedDecisionTab", publicName: "assignedDecisionTab", isSignal: true, isRequired: false, transformFunction: null }, assignedEmptyStateKey: { classPropertyName: "assignedEmptyStateKey", publicName: "assignedEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, assignedStatus: { classPropertyName: "assignedStatus", publicName: "assignedStatus", isSignal: true, isRequired: false, transformFunction: null } }, 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  <ng-template #adminContent>\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  </ng-template>\n\n  @if (adminMode()) {\n    @if (showPageShell()) {\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        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\n      </mt-page>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\n    }\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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, showPageShell: { classPropertyName: "showPageShell", publicName: "showPageShell", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, surfaceTitleKey: { classPropertyName: "surfaceTitleKey", publicName: "surfaceTitleKey", isSignal: true, isRequired: false, transformFunction: null }, assignedTabLabelKey: { classPropertyName: "assignedTabLabelKey", publicName: "assignedTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, assignedDecisionTab: { classPropertyName: "assignedDecisionTab", publicName: "assignedDecisionTab", isSignal: true, isRequired: false, transformFunction: null }, assignedEmptyStateKey: { classPropertyName: "assignedEmptyStateKey", publicName: "assignedEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, assignedStatus: { classPropertyName: "assignedStatus", publicName: "assignedStatus", isSignal: true, isRequired: false, transformFunction: null }, showApprovalTab: { classPropertyName: "showApprovalTab", publicName: "showApprovalTab", isSignal: true, isRequired: false, transformFunction: null }, approvalTabLabelKey: { classPropertyName: "approvalTabLabelKey", publicName: "approvalTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, approvalEmptyStateKey: { classPropertyName: "approvalEmptyStateKey", publicName: "approvalEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, approvalStatus: { classPropertyName: "approvalStatus", publicName: "approvalStatus", isSignal: true, isRequired: false, transformFunction: null } }, 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: "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        [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 #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  <ng-template #adminContent>\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  </ng-template>\n\n  @if (adminMode()) {\n    @if (showPageShell()) {\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        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\n      </mt-page>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\n    }\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 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}}\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,
@@ -2608,8 +2659,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Table,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], 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  <ng-template #adminContent>\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  </ng-template>\n\n  @if (adminMode()) {\n    @if (showPageShell()) {\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        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\n      </mt-page>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\n    }\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 }] }], showPageShell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageShell", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], surfaceTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceTitleKey", required: false }] }], assignedTabLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedTabLabelKey", required: false }] }], assignedDecisionTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedDecisionTab", required: false }] }], assignedEmptyStateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedEmptyStateKey", required: false }] }], assignedStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedStatus", required: false }] }], 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 }] }] } });
+                    ], 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        [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 #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  <ng-template #adminContent>\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  </ng-template>\n\n  @if (adminMode()) {\n    @if (showPageShell()) {\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        <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\n      </mt-page>\n    } @else {\n      <ng-container *ngTemplateOutlet=\"adminContent\"></ng-container>\n    }\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 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}}\n"] }]
+        }], propDecorators: { showBreadcrumb: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBreadcrumb", required: false }] }], showPageShell: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageShell", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], surfaceTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceTitleKey", required: false }] }], assignedTabLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedTabLabelKey", required: false }] }], assignedDecisionTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedDecisionTab", required: false }] }], assignedEmptyStateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedEmptyStateKey", required: false }] }], assignedStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignedStatus", required: false }] }], showApprovalTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApprovalTab", required: false }] }], approvalTabLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalTabLabelKey", required: false }] }], approvalEmptyStateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalEmptyStateKey", required: false }] }], approvalStatus: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalStatus", required: false }] }], 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 }] }], daysCol: [{ type: i0.ViewChild, args: ['daysCol', { isSignal: true }] }] } });
 
 /**
  * Endpoints that must NEVER carry the `app-delegation` header.