@masterteam/delegations 0.0.30 → 0.0.31

package/fesm2022/masterteam-delegations.mjs

@@ -530,11 +530,11 @@ class DelegationCandidatesPromptDialog {
         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-solid border-surface-200 bg-surface-0 px-3 py-3 text-start transition-colors hover:border-primary-300 hover:bg-primary-50/50 focus-visible:border-primary-400 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            <span class=\"flex min-w-0 flex-col\">\n              <mt-entity-preview\n                [data]=\"userEntity(cand.delegator)\"\n              ></mt-entity-preview>\n              @if (cand.scopeSummary) {\n                @let summary = formatScopeSummary(cand.scopeSummary);\n                <span class=\"truncate text-xs text-gray-500\" [title]=\"summary\">\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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "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 });
+    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 $index) {\n        <button\n          type=\"button\"\n          class=\"flex w-full cursor-pointer items-center justify-between gap-3 rounded-2xl border border-solid border-surface-200 bg-surface-0 px-3 py-3 text-start transition-colors hover:border-primary-300 hover:bg-primary-50/50 focus-visible:border-primary-400 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            <span class=\"flex min-w-0 flex-col\">\n              <mt-entity-preview\n                [data]=\"userEntity(cand.delegator)\"\n              ></mt-entity-preview>\n              @if (cand.scopeSummary) {\n                @let summary = formatScopeSummary(cand.scopeSummary);\n                <span class=\"truncate text-xs text-gray-500\" [title]=\"summary\">\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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "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, Button, EntityPreview, 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-solid border-surface-200 bg-surface-0 px-3 py-3 text-start transition-colors hover:border-primary-300 hover:bg-primary-50/50 focus-visible:border-primary-400 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            <span class=\"flex min-w-0 flex-col\">\n              <mt-entity-preview\n                [data]=\"userEntity(cand.delegator)\"\n              ></mt-entity-preview>\n              @if (cand.scopeSummary) {\n                @let summary = formatScopeSummary(cand.scopeSummary);\n                <span class=\"truncate text-xs text-gray-500\" [title]=\"summary\">\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" }]
+            args: [{ selector: 'mt-delegation-candidates-prompt-dialog', imports: [CommonModule, Button, EntityPreview, 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 $index) {\n        <button\n          type=\"button\"\n          class=\"flex w-full cursor-pointer items-center justify-between gap-3 rounded-2xl border border-solid border-surface-200 bg-surface-0 px-3 py-3 text-start transition-colors hover:border-primary-300 hover:bg-primary-50/50 focus-visible:border-primary-400 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            <span class=\"flex min-w-0 flex-col\">\n              <mt-entity-preview\n                [data]=\"userEntity(cand.delegator)\"\n              ></mt-entity-preview>\n              @if (cand.scopeSummary) {\n                @let summary = formatScopeSummary(cand.scopeSummary);\n                <span class=\"truncate text-xs text-gray-500\" [title]=\"summary\">\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 }] }] } });
 
 /**
@@ -635,7 +635,7 @@ class TopbarDelegationMenu {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TopbarDelegationMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TopbarDelegationMenu, isStandalone: true, selector: "mt-topbar-delegation-menu", inputs: { managePath: { classPropertyName: "managePath", publicName: "managePath", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, 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            <div class=\"flex min-w-0 flex-1 flex-col\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <mt-entity-preview\n                [data]=\"userEntity(onBehalfOf())\"\n              ></mt-entity-preview>\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=\"min-w-0 flex-1\">\n                      <mt-entity-preview\n                        [data]=\"userEntity(cand.delegator)\"\n                      ></mt-entity-preview>\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 min-w-0 flex-1 flex-col gap-1\">\n                  <mt-entity-preview\n                    [data]=\"userEntity(cand.delegator)\"\n                  ></mt-entity-preview>\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                <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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "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            <div class=\"flex min-w-0 flex-1 flex-col\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <mt-entity-preview\n                [data]=\"userEntity(onBehalfOf())\"\n              ></mt-entity-preview>\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 $index) {\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=\"min-w-0 flex-1\">\n                      <mt-entity-preview\n                        [data]=\"userEntity(cand.delegator)\"\n                      ></mt-entity-preview>\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 $index) {\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 min-w-0 flex-1 flex-col gap-1\">\n                  <mt-entity-preview\n                    [data]=\"userEntity(cand.delegator)\"\n                  ></mt-entity-preview>\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                <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: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "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,
@@ -648,7 +648,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         RouterLink,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  @if (mode() !== \"hidden\") {\n    @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            <div class=\"flex min-w-0 flex-1 flex-col\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <mt-entity-preview\n                [data]=\"userEntity(onBehalfOf())\"\n              ></mt-entity-preview>\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=\"min-w-0 flex-1\">\n                      <mt-entity-preview\n                        [data]=\"userEntity(cand.delegator)\"\n                      ></mt-entity-preview>\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 min-w-0 flex-1 flex-col gap-1\">\n                  <mt-entity-preview\n                    [data]=\"userEntity(cand.delegator)\"\n                  ></mt-entity-preview>\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                <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"] }]
+                    ], 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            <div class=\"flex min-w-0 flex-1 flex-col\">\n              <div class=\"text-xs text-gray-500\">\n                {{ t(\"delegations.session.actingOnBehalfOf\") }}\n              </div>\n              <mt-entity-preview\n                [data]=\"userEntity(onBehalfOf())\"\n              ></mt-entity-preview>\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 $index) {\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=\"min-w-0 flex-1\">\n                      <mt-entity-preview\n                        [data]=\"userEntity(cand.delegator)\"\n                      ></mt-entity-preview>\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 $index) {\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 min-w-0 flex-1 flex-col gap-1\">\n                  <mt-entity-preview\n                    [data]=\"userEntity(cand.delegator)\"\n                  ></mt-entity-preview>\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                <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"] }]
         }], 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 }] }] } });
 
 // ---------------------------------------------------------------------------
@@ -1874,11 +1874,11 @@ class ScopePicker {
         return this.activeLang() ?? this.transloco.getActiveLang();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ScopePicker, isStandalone: true, selector: "mt-scope-picker", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (isLoadingOptions()) {\r\n      <div class=\"grid gap-4 2xl:grid-cols-[minmax(0,1fr)_20rem]\">\r\n        <section\r\n          class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs\"\r\n        >\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"9rem\" height=\"1rem\"></p-skeleton>\r\n            <p-skeleton width=\"20rem\" height=\"0.9rem\"></p-skeleton>\r\n          </div>\r\n\r\n          <p-skeleton height=\"3rem\"></p-skeleton>\r\n\r\n          <div class=\"grid gap-3\">\r\n            @for (item of [0, 1, 2, 3]; track item) {\r\n              <div class=\"rounded-2xl border border-surface-200 p-4\">\r\n                <div class=\"flex items-center justify-between gap-3\">\r\n                  <p-skeleton width=\"12rem\" height=\"1rem\"></p-skeleton>\r\n                  <p-skeleton width=\"1.5rem\" height=\"1.5rem\"></p-skeleton>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        </section>\r\n\r\n        <section\r\n          class=\"flex flex-col gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"8rem\" height=\"1rem\"></p-skeleton>\r\n            <p-skeleton width=\"100%\" height=\"0.85rem\"></p-skeleton>\r\n          </div>\r\n\r\n          <div class=\"flex flex-col gap-3\">\r\n            @for (item of [0, 1, 2]; track item) {\r\n              <p-skeleton height=\"1rem\"></p-skeleton>\r\n            }\r\n          </div>\r\n        </section>\r\n      </div>\r\n    } @else {\r\n      <section class=\"flex flex-col gap-3\">\r\n        @if (errorOptions(); as errorMessage) {\r\n          <div\r\n            class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n          >\r\n            {{ errorMessage }}\r\n          </div>\r\n        }\r\n\r\n        @if (groups().length === 0 && !errorOptions()) {\r\n          <div\r\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-10\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"12\"\r\n                  width=\"44\"\r\n                  height=\"38\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 27H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 35H37\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <circle\r\n                  cx=\"46\"\r\n                  cy=\"19\"\r\n                  r=\"6\"\r\n                  class=\"fill-surface-0 stroke-primary\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M43 16L49 22\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M49 16L43 22\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n\r\n            <div class=\"space-y-1\">\r\n              <p class=\"text-base font-medium text-surface-900\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </p>\r\n              <p class=\"text-sm text-surface-500\">\r\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (groups().length > 0) {\r\n          <div\r\n            class=\"rounded-3xl border border-surface-200 bg-surface-0 p-3 shadow-xs\"\r\n          >\r\n            <mt-tree\r\n              [value]=\"treeNodes()\"\r\n              [(selection)]=\"treeSelection\"\r\n              selectionMode=\"checkbox\"\r\n              [loading]=\"isLoadingOptions()\"\r\n              [propagateSelectionDown]=\"true\"\r\n              [propagateSelectionUp]=\"true\"\r\n              (action)=\"onTreeAction($event)\"\r\n              [filter]=\"true\"\r\n              filterMode=\"lenient\"\r\n              scrollHeight=\"28rem\"\r\n              [virtualScroll]=\"true\"\r\n              [virtualScrollItemSize]=\"72\"\r\n            />\r\n          </div>\r\n        }\r\n      </section>\r\n\r\n      <section\r\n        class=\"flex flex-col gap-3 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-4 py-4\"\r\n      >\r\n        <div class=\"flex items-center justify-between gap-2\">\r\n          <div class=\"text-base font-medium text-surface-800\">\r\n            {{ t(\"delegations.scope.previewTitle\") }}\r\n          </div>\r\n          @if (isPreviewing()) {\r\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\r\n          }\r\n        </div>\r\n        @if (preview(); as p) {\r\n          @if (p.isValid) {\r\n            <div class=\"text-sm font-medium text-surface-900\">\r\n              {{\r\n                getPreviewSummary(p.summary) ||\r\n                  t(\"delegations.column.scopeSummary\")\r\n              }}\r\n            </div>\r\n          } @else {\r\n            <div class=\"text-sm font-medium text-red-700\">\r\n              {{ t(\"delegations.scope.previewInvalid\") }}\r\n            </div>\r\n          }\r\n          @if (p.warnings.length > 0) {\r\n            <ul class=\"list-inside list-disc space-y-1 text-xs text-amber-700\">\r\n              @for (w of p.warnings; track w.message) {\r\n                <li>{{ w.message }}</li>\r\n              }\r\n            </ul>\r\n          }\r\n          @if (p.deniedItems.length > 0) {\r\n            <ul class=\"list-inside list-disc space-y-1 text-xs text-red-700\">\r\n              @for (d of p.deniedItems; track d.operationKey) {\r\n                <li>\r\n                  {{ formatDeniedTarget(d.targetKey) }} /\r\n                  {{ formatDeniedOperation(d.operationKey) }} -\r\n                  {{ d.reasonCode }}\r\n                </li>\r\n              }\r\n            </ul>\r\n          }\r\n        } @else {\r\n          <div class=\"text-xs text-surface-500\">\r\n            {{ t(\"delegations.scope.noSelection\") }}\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tree, selector: "mt-tree", inputs: ["value", "selection", "selectionMode", "nodeIcon", "propagateSelectionUp", "propagateSelectionDown", "checkAllChildren", "loading", "emptyMessage", "checkAllLabel", "filterPlaceholder", "dataKey", "filter", "filterMode", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "styleClass", "style", "pInputs", "nodeActions", "nodeContextmenuActions", "contextMenuSelection"], outputs: ["selectionChange", "contextMenuSelectionChange", "action"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: ScopePicker, isStandalone: true, selector: "mt-scope-picker", inputs: { scope: { classPropertyName: "scope", publicName: "scope", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, delegatorUserId: { classPropertyName: "delegatorUserId", publicName: "delegatorUserId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scope: "scopeChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4\">\n    @if (isLoadingOptions()) {\n      <div class=\"grid gap-4 2xl:grid-cols-[minmax(0,1fr)_20rem]\">\n        <section\n          class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p-skeleton width=\"9rem\" height=\"1rem\"></p-skeleton>\n            <p-skeleton width=\"20rem\" height=\"0.9rem\"></p-skeleton>\n          </div>\n\n          <p-skeleton height=\"3rem\"></p-skeleton>\n\n          <div class=\"grid gap-3\">\n            @for (item of [0, 1, 2, 3]; track $index) {\n              <div class=\"rounded-2xl border border-surface-200 p-4\">\n                <div class=\"flex items-center justify-between gap-3\">\n                  <p-skeleton width=\"12rem\" height=\"1rem\"></p-skeleton>\n                  <p-skeleton width=\"1.5rem\" height=\"1.5rem\"></p-skeleton>\n                </div>\n              </div>\n            }\n          </div>\n        </section>\n\n        <section\n          class=\"flex flex-col gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 p-4\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p-skeleton width=\"8rem\" height=\"1rem\"></p-skeleton>\n            <p-skeleton width=\"100%\" height=\"0.85rem\"></p-skeleton>\n          </div>\n\n          <div class=\"flex flex-col gap-3\">\n            @for (item of [0, 1, 2]; track $index) {\n              <p-skeleton height=\"1rem\"></p-skeleton>\n            }\n          </div>\n        </section>\n      </div>\n    } @else {\n      <section class=\"flex flex-col gap-3\">\n        @if (errorOptions(); as errorMessage) {\n          <div\n            class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n          >\n            {{ errorMessage }}\n          </div>\n        }\n\n        @if (groups().length === 0 && !errorOptions()) {\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-10\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <circle\n                  cx=\"46\"\n                  cy=\"19\"\n                  r=\"6\"\n                  class=\"fill-surface-0 stroke-primary\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M43 16L49 22\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M49 16L43 22\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        }\n\n        @if (groups().length > 0) {\n          <div\n            class=\"rounded-3xl border border-surface-200 bg-surface-0 p-3 shadow-xs\"\n          >\n            <mt-tree\n              [value]=\"treeNodes()\"\n              [(selection)]=\"treeSelection\"\n              selectionMode=\"checkbox\"\n              [loading]=\"isLoadingOptions()\"\n              [propagateSelectionDown]=\"true\"\n              [propagateSelectionUp]=\"true\"\n              (action)=\"onTreeAction($event)\"\n              [filter]=\"true\"\n              filterMode=\"lenient\"\n              scrollHeight=\"28rem\"\n              [virtualScroll]=\"true\"\n              [virtualScrollItemSize]=\"72\"\n            />\n          </div>\n        }\n      </section>\n\n      <section\n        class=\"flex flex-col gap-3 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-4 py-4\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-base font-medium text-surface-800\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm font-medium text-surface-900\">\n              {{\n                getPreviewSummary(p.summary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n          } @else {\n            <div class=\"text-sm font-medium text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc space-y-1 text-xs text-amber-700\">\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-1 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-surface-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Tree, selector: "mt-tree", inputs: ["value", "selection", "selectionMode", "nodeIcon", "propagateSelectionUp", "propagateSelectionDown", "checkAllChildren", "loading", "emptyMessage", "checkAllLabel", "filterPlaceholder", "dataKey", "filter", "filterMode", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "styleClass", "style", "pInputs", "nodeActions", "nodeContextmenuActions", "contextMenuSelection"], outputs: ["selectionChange", "contextMenuSelectionChange", "action"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ScopePicker, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-scope-picker', imports: [CommonModule, Tree, SkeletonModule, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div class=\"flex flex-col gap-4\">\r\n    @if (isLoadingOptions()) {\r\n      <div class=\"grid gap-4 2xl:grid-cols-[minmax(0,1fr)_20rem]\">\r\n        <section\r\n          class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs\"\r\n        >\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"9rem\" height=\"1rem\"></p-skeleton>\r\n            <p-skeleton width=\"20rem\" height=\"0.9rem\"></p-skeleton>\r\n          </div>\r\n\r\n          <p-skeleton height=\"3rem\"></p-skeleton>\r\n\r\n          <div class=\"grid gap-3\">\r\n            @for (item of [0, 1, 2, 3]; track item) {\r\n              <div class=\"rounded-2xl border border-surface-200 p-4\">\r\n                <div class=\"flex items-center justify-between gap-3\">\r\n                  <p-skeleton width=\"12rem\" height=\"1rem\"></p-skeleton>\r\n                  <p-skeleton width=\"1.5rem\" height=\"1.5rem\"></p-skeleton>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n        </section>\r\n\r\n        <section\r\n          class=\"flex flex-col gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 p-4\"\r\n        >\r\n          <div class=\"flex flex-col gap-2\">\r\n            <p-skeleton width=\"8rem\" height=\"1rem\"></p-skeleton>\r\n            <p-skeleton width=\"100%\" height=\"0.85rem\"></p-skeleton>\r\n          </div>\r\n\r\n          <div class=\"flex flex-col gap-3\">\r\n            @for (item of [0, 1, 2]; track item) {\r\n              <p-skeleton height=\"1rem\"></p-skeleton>\r\n            }\r\n          </div>\r\n        </section>\r\n      </div>\r\n    } @else {\r\n      <section class=\"flex flex-col gap-3\">\r\n        @if (errorOptions(); as errorMessage) {\r\n          <div\r\n            class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\r\n          >\r\n            {{ errorMessage }}\r\n          </div>\r\n        }\r\n\r\n        @if (groups().length === 0 && !errorOptions()) {\r\n          <div\r\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-10\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"12\"\r\n                  width=\"44\"\r\n                  height=\"38\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M21 27H43\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M21 35H37\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <circle\r\n                  cx=\"46\"\r\n                  cy=\"19\"\r\n                  r=\"6\"\r\n                  class=\"fill-surface-0 stroke-primary\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M43 16L49 22\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M49 16L43 22\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n\r\n            <div class=\"space-y-1\">\r\n              <p class=\"text-base font-medium text-surface-900\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </p>\r\n              <p class=\"text-sm text-surface-500\">\r\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        @if (groups().length > 0) {\r\n          <div\r\n            class=\"rounded-3xl border border-surface-200 bg-surface-0 p-3 shadow-xs\"\r\n          >\r\n            <mt-tree\r\n              [value]=\"treeNodes()\"\r\n              [(selection)]=\"treeSelection\"\r\n              selectionMode=\"checkbox\"\r\n              [loading]=\"isLoadingOptions()\"\r\n              [propagateSelectionDown]=\"true\"\r\n              [propagateSelectionUp]=\"true\"\r\n              (action)=\"onTreeAction($event)\"\r\n              [filter]=\"true\"\r\n              filterMode=\"lenient\"\r\n              scrollHeight=\"28rem\"\r\n              [virtualScroll]=\"true\"\r\n              [virtualScrollItemSize]=\"72\"\r\n            />\r\n          </div>\r\n        }\r\n      </section>\r\n\r\n      <section\r\n        class=\"flex flex-col gap-3 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-4 py-4\"\r\n      >\r\n        <div class=\"flex items-center justify-between gap-2\">\r\n          <div class=\"text-base font-medium text-surface-800\">\r\n            {{ t(\"delegations.scope.previewTitle\") }}\r\n          </div>\r\n          @if (isPreviewing()) {\r\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\r\n          }\r\n        </div>\r\n        @if (preview(); as p) {\r\n          @if (p.isValid) {\r\n            <div class=\"text-sm font-medium text-surface-900\">\r\n              {{\r\n                getPreviewSummary(p.summary) ||\r\n                  t(\"delegations.column.scopeSummary\")\r\n              }}\r\n            </div>\r\n          } @else {\r\n            <div class=\"text-sm font-medium text-red-700\">\r\n              {{ t(\"delegations.scope.previewInvalid\") }}\r\n            </div>\r\n          }\r\n          @if (p.warnings.length > 0) {\r\n            <ul class=\"list-inside list-disc space-y-1 text-xs text-amber-700\">\r\n              @for (w of p.warnings; track w.message) {\r\n                <li>{{ w.message }}</li>\r\n              }\r\n            </ul>\r\n          }\r\n          @if (p.deniedItems.length > 0) {\r\n            <ul class=\"list-inside list-disc space-y-1 text-xs text-red-700\">\r\n              @for (d of p.deniedItems; track d.operationKey) {\r\n                <li>\r\n                  {{ formatDeniedTarget(d.targetKey) }} /\r\n                  {{ formatDeniedOperation(d.operationKey) }} -\r\n                  {{ d.reasonCode }}\r\n                </li>\r\n              }\r\n            </ul>\r\n          }\r\n        } @else {\r\n          <div class=\"text-xs text-surface-500\">\r\n            {{ t(\"delegations.scope.noSelection\") }}\r\n          </div>\r\n        }\r\n      </section>\r\n    }\r\n  </div>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'mt-scope-picker', imports: [CommonModule, Tree, SkeletonModule, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col gap-4\">\n    @if (isLoadingOptions()) {\n      <div class=\"grid gap-4 2xl:grid-cols-[minmax(0,1fr)_20rem]\">\n        <section\n          class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p-skeleton width=\"9rem\" height=\"1rem\"></p-skeleton>\n            <p-skeleton width=\"20rem\" height=\"0.9rem\"></p-skeleton>\n          </div>\n\n          <p-skeleton height=\"3rem\"></p-skeleton>\n\n          <div class=\"grid gap-3\">\n            @for (item of [0, 1, 2, 3]; track $index) {\n              <div class=\"rounded-2xl border border-surface-200 p-4\">\n                <div class=\"flex items-center justify-between gap-3\">\n                  <p-skeleton width=\"12rem\" height=\"1rem\"></p-skeleton>\n                  <p-skeleton width=\"1.5rem\" height=\"1.5rem\"></p-skeleton>\n                </div>\n              </div>\n            }\n          </div>\n        </section>\n\n        <section\n          class=\"flex flex-col gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 p-4\"\n        >\n          <div class=\"flex flex-col gap-2\">\n            <p-skeleton width=\"8rem\" height=\"1rem\"></p-skeleton>\n            <p-skeleton width=\"100%\" height=\"0.85rem\"></p-skeleton>\n          </div>\n\n          <div class=\"flex flex-col gap-3\">\n            @for (item of [0, 1, 2]; track $index) {\n              <p-skeleton height=\"1rem\"></p-skeleton>\n            }\n          </div>\n        </section>\n      </div>\n    } @else {\n      <section class=\"flex flex-col gap-3\">\n        @if (errorOptions(); as errorMessage) {\n          <div\n            class=\"rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n          >\n            {{ errorMessage }}\n          </div>\n        }\n\n        @if (groups().length === 0 && !errorOptions()) {\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-10\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"38\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M21 27H43\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M21 35H37\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <circle\n                  cx=\"46\"\n                  cy=\"19\"\n                  r=\"6\"\n                  class=\"fill-surface-0 stroke-primary\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M43 16L49 22\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M49 16L43 22\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.scope.noGrantableOptions\") }}\n              </p>\n            </div>\n          </div>\n        }\n\n        @if (groups().length > 0) {\n          <div\n            class=\"rounded-3xl border border-surface-200 bg-surface-0 p-3 shadow-xs\"\n          >\n            <mt-tree\n              [value]=\"treeNodes()\"\n              [(selection)]=\"treeSelection\"\n              selectionMode=\"checkbox\"\n              [loading]=\"isLoadingOptions()\"\n              [propagateSelectionDown]=\"true\"\n              [propagateSelectionUp]=\"true\"\n              (action)=\"onTreeAction($event)\"\n              [filter]=\"true\"\n              filterMode=\"lenient\"\n              scrollHeight=\"28rem\"\n              [virtualScroll]=\"true\"\n              [virtualScrollItemSize]=\"72\"\n            />\n          </div>\n        }\n      </section>\n\n      <section\n        class=\"flex flex-col gap-3 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-4 py-4\"\n      >\n        <div class=\"flex items-center justify-between gap-2\">\n          <div class=\"text-base font-medium text-surface-800\">\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          @if (isPreviewing()) {\n            <p-skeleton width=\"6rem\" height=\"0.75rem\"></p-skeleton>\n          }\n        </div>\n        @if (preview(); as p) {\n          @if (p.isValid) {\n            <div class=\"text-sm font-medium text-surface-900\">\n              {{\n                getPreviewSummary(p.summary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n          } @else {\n            <div class=\"text-sm font-medium text-red-700\">\n              {{ t(\"delegations.scope.previewInvalid\") }}\n            </div>\n          }\n          @if (p.warnings.length > 0) {\n            <ul class=\"list-inside list-disc space-y-1 text-xs text-amber-700\">\n              @for (w of p.warnings; track $index) {\n                <li>{{ w.message }}</li>\n              }\n            </ul>\n          }\n          @if (p.deniedItems.length > 0) {\n            <ul class=\"list-inside list-disc space-y-1 text-xs text-red-700\">\n              @for (d of p.deniedItems; track $index) {\n                <li>\n                  {{ formatDeniedTarget(d.targetKey) }} /\n                  {{ formatDeniedOperation(d.operationKey) }} -\n                  {{ d.reasonCode }}\n                </li>\n              }\n            </ul>\n          }\n        } @else {\n          <div class=\"text-xs text-surface-500\">\n            {{ t(\"delegations.scope.noSelection\") }}\n          </div>\n        }\n      </section>\n    }\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { scope: [{ type: i0.Input, args: [{ isSignal: true, alias: "scope", required: false }] }, { type: i0.Output, args: ["scopeChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }], delegatorUserId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegatorUserId", required: false }] }] } });
 function humanizeDelegationDisplay(value, language) {
     return (formatDelegationScopeSummary(value, language) ||
@@ -2253,7 +2253,7 @@ class DelegationForm {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationForm, isStandalone: true, selector: "mt-delegation-form", inputs: { delegationForEdit: { classPropertyName: "delegationForEdit", publicName: "delegationForEdit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n  <div\r\n    [class]=\"\r\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    <div\r\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-[minmax(0,28rem)_minmax(0,1fr)] lg:items-start\"\r\n    >\r\n      <section\r\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\r\n      >\r\n        <mt-dynamic-form\r\n          [formConfig]=\"formConfig()\"\r\n          [formControl]=\"delegationFormControl\"\r\n        />\r\n      </section>\r\n\r\n      <section\r\n        class=\"flex min-h-0 flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs\"\r\n      >\r\n        <div class=\"flex flex-col gap-2\">\r\n          <div\r\n            class=\"inline-flex w-fit items-center gap-2 rounded-full bg-primary-50 px-3 py-1 text-xs font-medium text-primary-700\"\r\n          >\r\n            <span class=\"inline-flex size-2 rounded-full bg-primary-500\"></span>\r\n            {{ t(\"delegations.scope.previewTitle\") }}\r\n          </div>\r\n          <h3 class=\"text-xl font-semibold text-surface-900\">\r\n            {{ t(\"delegations.scope.permissionsTitle\") }}\r\n          </h3>\r\n          @if (adminMode() && !showScopePicker()) {\r\n            <p class=\"text-sm text-surface-500\">\r\n              {{ t(\"delegations.form.selectDelegatorFirst\") }}\r\n            </p>\r\n          } @else {\r\n            <p class=\"text-sm text-surface-500\">\r\n              {{ t(\"delegations.scope.noSelection\") }}\r\n            </p>\r\n          }\r\n        </div>\r\n\r\n        @if (showScopePicker()) {\r\n          <mt-scope-picker\r\n            [(scope)]=\"scope\"\r\n            [readonly]=\"readonly()\"\r\n            [adminMode]=\"adminMode()\"\r\n            [delegatorUserId]=\"selectedDelegatorId()\"\r\n          ></mt-scope-picker>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-10\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"12\"\r\n                  width=\"44\"\r\n                  height=\"40\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M22 28H42\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M22 36H34\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <circle\r\n                  cx=\"45\"\r\n                  cy=\"20\"\r\n                  r=\"7\"\r\n                  class=\"fill-surface-0 stroke-primary\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M45 17V23\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M42 20H48\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"space-y-1\">\r\n              <p class=\"text-base font-medium text-surface-900\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </p>\r\n              <p class=\"text-sm text-surface-500\">\r\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n      </section>\r\n    </div>\r\n\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        variant=\"outlined\"\r\n        (click)=\"ref.close()\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n      />\r\n      @if (!readonly()) {\r\n        <mt-button\r\n          [label]=\"\r\n            delegationForEdit()\r\n              ? t('delegations.common.update')\r\n              : t('delegations.common.create')\r\n          \"\r\n          [loading]=\"isSaving()\"\r\n          [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\r\n          (click)=\"onSubmit()\"\r\n          styleClass=\"w-full sm:w-auto\"\r\n        />\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScopePicker, selector: "mt-scope-picker", inputs: ["scope", "readonly", "adminMode", "delegatorUserId"], outputs: ["scopeChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationForm, isStandalone: true, selector: "mt-delegation-form", inputs: { delegationForEdit: { classPropertyName: "delegationForEdit", publicName: "delegationForEdit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\n      modal.contentClass\n    \"\n  >\n    <div\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-[minmax(0,28rem)_minmax(0,1fr)] lg:items-start\"\n    >\n      <section\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\n      >\n        <mt-dynamic-form\n          [formConfig]=\"formConfig()\"\n          [formControl]=\"delegationFormControl\"\n        />\n      </section>\n\n      <section\n        class=\"flex min-h-0 flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs\"\n      >\n        <div class=\"flex flex-col gap-2\">\n          <div\n            class=\"inline-flex w-fit items-center gap-2 rounded-full bg-primary-50 px-3 py-1 text-xs font-medium text-primary-700\"\n          >\n            <span class=\"inline-flex size-2 rounded-full bg-primary-500\"></span>\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          <h3 class=\"text-xl font-semibold text-surface-900\">\n            {{ t(\"delegations.scope.permissionsTitle\") }}\n          </h3>\n          @if (adminMode() && !showScopePicker()) {\n            <p class=\"text-sm text-surface-500\">\n              {{ t(\"delegations.form.selectDelegatorFirst\") }}\n            </p>\n          } @else {\n            <p class=\"text-sm text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </p>\n          }\n        </div>\n\n        @if (showScopePicker()) {\n          <mt-scope-picker\n            [(scope)]=\"scope\"\n            [readonly]=\"readonly()\"\n            [adminMode]=\"adminMode()\"\n            [delegatorUserId]=\"selectedDelegatorId()\"\n          ></mt-scope-picker>\n        } @else {\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-10\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"40\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M22 28H42\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M22 36H34\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <circle\n                  cx=\"45\"\n                  cy=\"20\"\n                  r=\"7\"\n                  class=\"fill-surface-0 stroke-primary\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M45 17V23\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M42 20H48\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\n              </p>\n            </div>\n          </div>\n        }\n      </section>\n    </div>\n\n    <div [class]=\"modal.footerClass\">\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n        styleClass=\"w-full sm:w-auto\"\n      />\n      @if (!readonly()) {\n        <mt-button\n          [label]=\"\n            delegationForEdit()\n              ? t('delegations.common.update')\n              : t('delegations.common.create')\n          \"\n          [loading]=\"isSaving()\"\n          [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\n          (click)=\"onSubmit()\"\n          styleClass=\"w-full sm:w-auto\"\n        />\n      }\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys"], outputs: ["runtimeMessagesChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: ScopePicker, selector: "mt-scope-picker", inputs: ["scope", "readonly", "adminMode", "delegatorUserId"], outputs: ["scopeChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationForm, decorators: [{
             type: Component,
@@ -2264,7 +2264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         ReactiveFormsModule,
                         ScopePicker,
                         TranslocoDirective,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\r\n  <div\r\n    [class]=\"\r\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    <div\r\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-[minmax(0,28rem)_minmax(0,1fr)] lg:items-start\"\r\n    >\r\n      <section\r\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\r\n      >\r\n        <mt-dynamic-form\r\n          [formConfig]=\"formConfig()\"\r\n          [formControl]=\"delegationFormControl\"\r\n        />\r\n      </section>\r\n\r\n      <section\r\n        class=\"flex min-h-0 flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs\"\r\n      >\r\n        <div class=\"flex flex-col gap-2\">\r\n          <div\r\n            class=\"inline-flex w-fit items-center gap-2 rounded-full bg-primary-50 px-3 py-1 text-xs font-medium text-primary-700\"\r\n          >\r\n            <span class=\"inline-flex size-2 rounded-full bg-primary-500\"></span>\r\n            {{ t(\"delegations.scope.previewTitle\") }}\r\n          </div>\r\n          <h3 class=\"text-xl font-semibold text-surface-900\">\r\n            {{ t(\"delegations.scope.permissionsTitle\") }}\r\n          </h3>\r\n          @if (adminMode() && !showScopePicker()) {\r\n            <p class=\"text-sm text-surface-500\">\r\n              {{ t(\"delegations.form.selectDelegatorFirst\") }}\r\n            </p>\r\n          } @else {\r\n            <p class=\"text-sm text-surface-500\">\r\n              {{ t(\"delegations.scope.noSelection\") }}\r\n            </p>\r\n          }\r\n        </div>\r\n\r\n        @if (showScopePicker()) {\r\n          <mt-scope-picker\r\n            [(scope)]=\"scope\"\r\n            [readonly]=\"readonly()\"\r\n            [adminMode]=\"adminMode()\"\r\n            [delegatorUserId]=\"selectedDelegatorId()\"\r\n          ></mt-scope-picker>\r\n        } @else {\r\n          <div\r\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\r\n          >\r\n            <div\r\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\r\n            >\r\n              <svg\r\n                viewBox=\"0 0 64 64\"\r\n                class=\"size-10\"\r\n                fill=\"none\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                aria-hidden=\"true\"\r\n              >\r\n                <rect\r\n                  x=\"10\"\r\n                  y=\"12\"\r\n                  width=\"44\"\r\n                  height=\"40\"\r\n                  rx=\"12\"\r\n                  class=\"fill-primary/10 stroke-primary/35\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M22 28H42\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M22 36H34\"\r\n                  class=\"stroke-primary/70\"\r\n                  stroke-width=\"3\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <circle\r\n                  cx=\"45\"\r\n                  cy=\"20\"\r\n                  r=\"7\"\r\n                  class=\"fill-surface-0 stroke-primary\"\r\n                  stroke-width=\"2\"\r\n                />\r\n                <path\r\n                  d=\"M45 17V23\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n                <path\r\n                  d=\"M42 20H48\"\r\n                  class=\"stroke-primary\"\r\n                  stroke-width=\"2.5\"\r\n                  stroke-linecap=\"round\"\r\n                />\r\n              </svg>\r\n            </div>\r\n            <div class=\"space-y-1\">\r\n              <p class=\"text-base font-medium text-surface-900\">\r\n                {{ t(\"delegations.scope.permissionsTitle\") }}\r\n              </p>\r\n              <p class=\"text-sm text-surface-500\">\r\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\r\n              </p>\r\n            </div>\r\n          </div>\r\n        }\r\n      </section>\r\n    </div>\r\n\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button\r\n        [label]=\"t('delegations.common.cancel')\"\r\n        variant=\"outlined\"\r\n        (click)=\"ref.close()\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n      />\r\n      @if (!readonly()) {\r\n        <mt-button\r\n          [label]=\"\r\n            delegationForEdit()\r\n              ? t('delegations.common.update')\r\n              : t('delegations.common.create')\r\n          \"\r\n          [loading]=\"isSaving()\"\r\n          [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\r\n          (click)=\"onSubmit()\"\r\n          styleClass=\"w-full sm:w-auto\"\r\n        />\r\n      }\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div\n    [class]=\"\n      'flex h-full min-h-0 min-w-0 flex-col overflow-hidden ' +\n      modal.contentClass\n    \"\n  >\n    <div\n      class=\"grid min-h-0 flex-1 gap-4 overflow-y-auto p-4 max-[640px]:p-3 lg:grid-cols-[minmax(0,28rem)_minmax(0,1fr)] lg:items-start\"\n    >\n      <section\n        class=\"flex flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs lg:sticky lg:top-0\"\n      >\n        <mt-dynamic-form\n          [formConfig]=\"formConfig()\"\n          [formControl]=\"delegationFormControl\"\n        />\n      </section>\n\n      <section\n        class=\"flex min-h-0 flex-col gap-4 rounded-3xl border border-surface-200 bg-surface-0 p-4 shadow-xs\"\n      >\n        <div class=\"flex flex-col gap-2\">\n          <div\n            class=\"inline-flex w-fit items-center gap-2 rounded-full bg-primary-50 px-3 py-1 text-xs font-medium text-primary-700\"\n          >\n            <span class=\"inline-flex size-2 rounded-full bg-primary-500\"></span>\n            {{ t(\"delegations.scope.previewTitle\") }}\n          </div>\n          <h3 class=\"text-xl font-semibold text-surface-900\">\n            {{ t(\"delegations.scope.permissionsTitle\") }}\n          </h3>\n          @if (adminMode() && !showScopePicker()) {\n            <p class=\"text-sm text-surface-500\">\n              {{ t(\"delegations.form.selectDelegatorFirst\") }}\n            </p>\n          } @else {\n            <p class=\"text-sm text-surface-500\">\n              {{ t(\"delegations.scope.noSelection\") }}\n            </p>\n          }\n        </div>\n\n        @if (showScopePicker()) {\n          <mt-scope-picker\n            [(scope)]=\"scope\"\n            [readonly]=\"readonly()\"\n            [adminMode]=\"adminMode()\"\n            [delegatorUserId]=\"selectedDelegatorId()\"\n          ></mt-scope-picker>\n        } @else {\n          <div\n            class=\"flex min-h-72 flex-col items-center justify-center gap-4 rounded-3xl border border-dashed border-surface-300 bg-surface-50 px-6 py-8 text-center\"\n          >\n            <div\n              class=\"flex size-18 items-center justify-center rounded-3xl bg-surface-0 text-primary shadow-sm\"\n            >\n              <svg\n                viewBox=\"0 0 64 64\"\n                class=\"size-10\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                aria-hidden=\"true\"\n              >\n                <rect\n                  x=\"10\"\n                  y=\"12\"\n                  width=\"44\"\n                  height=\"40\"\n                  rx=\"12\"\n                  class=\"fill-primary/10 stroke-primary/35\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M22 28H42\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M22 36H34\"\n                  class=\"stroke-primary/70\"\n                  stroke-width=\"3\"\n                  stroke-linecap=\"round\"\n                />\n                <circle\n                  cx=\"45\"\n                  cy=\"20\"\n                  r=\"7\"\n                  class=\"fill-surface-0 stroke-primary\"\n                  stroke-width=\"2\"\n                />\n                <path\n                  d=\"M45 17V23\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n                <path\n                  d=\"M42 20H48\"\n                  class=\"stroke-primary\"\n                  stroke-width=\"2.5\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            </div>\n            <div class=\"space-y-1\">\n              <p class=\"text-base font-medium text-surface-900\">\n                {{ t(\"delegations.scope.permissionsTitle\") }}\n              </p>\n              <p class=\"text-sm text-surface-500\">\n                {{ t(\"delegations.form.selectDelegatorFirst\") }}\n              </p>\n            </div>\n          </div>\n        }\n      </section>\n    </div>\n\n    <div [class]=\"modal.footerClass\">\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n        styleClass=\"w-full sm:w-auto\"\n      />\n      @if (!readonly()) {\n        <mt-button\n          [label]=\"\n            delegationForEdit()\n              ? t('delegations.common.update')\n              : t('delegations.common.create')\n          \"\n          [loading]=\"isSaving()\"\n          [disabled]=\"!delegationFormControl.valid || !canSubmit()\"\n          (click)=\"onSubmit()\"\n          styleClass=\"w-full sm:w-auto\"\n        />\n      }\n    </div>\n  </div>\n</ng-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { delegationForEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegationForEdit", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }] } });
 
 /**
@@ -2307,7 +2307,7 @@ class DelegationDetailDrawer {
         return toDelegationUserEntity(party, { label });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track tab.key) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegator,\n                      t('delegations.column.delegatorName')\n                    )\n                  \"\n                ></mt-entity-preview>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <mt-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegatedUser,\n                      t('delegations.column.delegatedTo')\n                    )\n                  \"\n                ></mt-entity-preview>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{\n                formatScopeSummary(d.row.scopeSummary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ getScopeTargetLabel(grant.target) }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ getScopeActionLabel(grant.action) }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationDetailDrawer, isStandalone: true, selector: "mt-delegation-detail-drawer", inputs: { delegationId: { classPropertyName: "delegationId", publicName: "delegationId", isSignal: true, isRequired: true, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track $index) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegator,\n                      t('delegations.column.delegatorName')\n                    )\n                  \"\n                ></mt-entity-preview>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <mt-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegatedUser,\n                      t('delegations.column.delegatedTo')\n                    )\n                  \"\n                ></mt-entity-preview>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{\n                formatScopeSummary(d.row.scopeSummary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ getScopeTargetLabel(grant.target) }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ getScopeActionLabel(grant.action) }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EntityPreview, selector: "mt-entity-preview", inputs: ["data", "attachmentShape"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DelegationStatusChip, selector: "mt-delegation-status-chip", inputs: ["status"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationDetailDrawer, decorators: [{
             type: Component,
@@ -2318,7 +2318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         SkeletonModule,
                         TranslocoDirective,
                         DelegationStatusChip,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track tab.key) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegator,\n                      t('delegations.column.delegatorName')\n                    )\n                  \"\n                ></mt-entity-preview>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <mt-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegatedUser,\n                      t('delegations.column.delegatedTo')\n                    )\n                  \"\n                ></mt-entity-preview>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{\n                formatScopeSummary(d.row.scopeSummary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ getScopeTargetLabel(grant.target) }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ getScopeActionLabel(grant.action) }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex flex-col h-full\">\n    <!-- Tabs -->\n    <div class=\"flex border-b border-gray-200 px-4\">\n      @for (tab of tabs; track $index) {\n        <button\n          type=\"button\"\n          class=\"px-3 py-2 -mb-px border-b-2 text-sm font-medium transition-colors\"\n          [class.border-primary]=\"activeTab() === tab.key\"\n          [class.text-primary]=\"activeTab() === tab.key\"\n          [class.border-transparent]=\"activeTab() !== tab.key\"\n          [class.text-gray-500]=\"activeTab() !== tab.key\"\n          (click)=\"setTab(tab.key)\"\n        >\n          {{ t(tab.i18n) }}\n        </button>\n      }\n    </div>\n\n    <!-- Body -->\n    <div class=\"flex-1 overflow-y-auto p-4\">\n      @if (isLoading() && !detail()) {\n        <p-skeleton height=\"2rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\" class=\"mb-3\"></p-skeleton>\n        <p-skeleton height=\"6rem\"></p-skeleton>\n      } @else if (detail(); as d) {\n        @if (activeTab() === \"overview\") {\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between gap-3\">\n              <div class=\"flex items-center gap-3 min-w-0\">\n                <mt-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegator,\n                      t('delegations.column.delegatorName')\n                    )\n                  \"\n                ></mt-entity-preview>\n              </div>\n              <mt-delegation-status-chip\n                [status]=\"d.status.effectiveStatus\"\n              ></mt-delegation-status-chip>\n            </div>\n\n            <div class=\"grid grid-cols-2 gap-4\">\n              <div class=\"flex flex-col\">\n                <mt-entity-preview\n                  [data]=\"\n                    userEntity(\n                      d.row.delegatedUser,\n                      t('delegations.column.delegatedTo')\n                    )\n                  \"\n                ></mt-entity-preview>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.approval\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{ approvalLabel() }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.startDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.startsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.endDate\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  {{ d.row.endsAtUtc | date: \"medium\" }}\n                </span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.form.timeZone\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">{{\n                  d.row.timeZoneId\n                }}</span>\n              </div>\n              <div class=\"flex flex-col\">\n                <span class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.column.days\") }}\n                </span>\n                <span class=\"text-sm text-gray-900\">\n                  @if (d.row.dayRuleMode === \"FullRange\") {\n                    {{ t(\"delegations.form.fullRange\") }}\n                  } @else {\n                    {{ d.row.specificDays.join(\", \") }}\n                  }\n                </span>\n              </div>\n            </div>\n\n            @if (d.row.cancellation?.cancellationReason) {\n              <div\n                class=\"rounded-md border border-gray-200 bg-surface-50 p-3 text-sm text-gray-800\"\n              >\n                <div class=\"font-medium\">\n                  {{ t(\"delegations.form.cancellationReason\") }}\n                </div>\n                <div>{{ d.row.cancellation.cancellationReason }}</div>\n              </div>\n            }\n          </div>\n        } @else {\n          <!-- Scope tab -->\n          <div class=\"flex flex-col gap-3\">\n            <div class=\"text-sm text-gray-900\">\n              {{\n                formatScopeSummary(d.row.scopeSummary) ||\n                  t(\"delegations.column.scopeSummary\")\n              }}\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              @for (grant of d.scope.grants; track $index) {\n                <div\n                  class=\"border border-gray-200 rounded-md px-3 py-2 flex flex-col gap-1\"\n                >\n                  <div class=\"flex items-center justify-between gap-2\">\n                    <span class=\"text-sm font-medium text-gray-900\">\n                      {{ getScopeTargetLabel(grant.target) }}\n                    </span>\n                    <span class=\"text-xs text-gray-500\">\n                      {{ grant.target.targetType }}\n                    </span>\n                  </div>\n                  <span\n                    class=\"text-xs px-2 py-0.5 rounded-md bg-primary-50 text-primary w-fit\"\n                  >\n                    {{ getScopeActionLabel(grant.action) }}\n                  </span>\n                </div>\n              }\n              @if (d.scope.grants.length === 0) {\n                <p class=\"text-xs text-gray-500\">\n                  {{ t(\"delegations.scope.noSelection\") }}\n                </p>\n              }\n            </div>\n          </div>\n        }\n      }\n    </div>\n\n    <!-- Footer -->\n    <div\n      class=\"border-t border-gray-200 px-4 py-3 flex items-center justify-end\"\n    >\n      <mt-button\n        [label]=\"t('delegations.common.cancel')\"\n        variant=\"outlined\"\n        (click)=\"ref.close()\"\n      ></mt-button>\n    </div>\n  </div>\n</ng-container>\n", styles: [":host{display:block;height:100%}\n"] }]
         }], propDecorators: { delegationId: [{ type: i0.Input, args: [{ isSignal: true, alias: "delegationId", required: true }] }], adminMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminMode", required: false }] }] } });
 
 /**
@@ -2716,7 +2716,7 @@ class DelegationsList {
         this.busyIds.update((ids) => on ? [...ids, key] : ids.filter((id) => id !== key));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, showPageShell: { classPropertyName: "showPageShell", publicName: "showPageShell", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, surfaceTitleKey: { classPropertyName: "surfaceTitleKey", publicName: "surfaceTitleKey", isSignal: true, isRequired: false, transformFunction: null }, assignedTabLabelKey: { classPropertyName: "assignedTabLabelKey", publicName: "assignedTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, assignedDecisionTab: { classPropertyName: "assignedDecisionTab", publicName: "assignedDecisionTab", isSignal: true, isRequired: false, transformFunction: null }, assignedEmptyStateKey: { classPropertyName: "assignedEmptyStateKey", publicName: "assignedEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, assignedStatus: { classPropertyName: "assignedStatus", publicName: "assignedStatus", isSignal: true, isRequired: false, transformFunction: null }, showApprovalTab: { classPropertyName: "showApprovalTab", publicName: "showApprovalTab", isSignal: true, isRequired: false, transformFunction: null }, approvalTabLabelKey: { classPropertyName: "approvalTabLabelKey", publicName: "approvalTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, approvalEmptyStateKey: { classPropertyName: "approvalEmptyStateKey", publicName: "approvalEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, approvalStatus: { classPropertyName: "approvalStatus", publicName: "approvalStatus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <ng-template #tableContent>\n    <div class=\"flex flex-col gap-4\">\n      @if (!adminMode()) {\n        <mt-tabs\n          mode=\"underline\"\n          [(active)]=\"activeTab\"\n          [options]=\"tabs()\"\n          fluid\n          (onChange)=\"switchTab($event)\"\n        ></mt-tabs>\n      }\n\n      <mt-table\n        [data]=\"tableRows()\"\n        [columns]=\"tableColumns()\"\n        [actions]=\"tableActions()\"\n        [rowActions]=\"rowActions()\"\n        [loading]=\"isLoading()\"\n        [noCard]=\"true\"\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: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: DelegationsList, isStandalone: true, selector: "mt-delegations-list", inputs: { showBreadcrumb: { classPropertyName: "showBreadcrumb", publicName: "showBreadcrumb", isSignal: true, isRequired: false, transformFunction: null }, showPageShell: { classPropertyName: "showPageShell", publicName: "showPageShell", isSignal: true, isRequired: false, transformFunction: null }, adminMode: { classPropertyName: "adminMode", publicName: "adminMode", isSignal: true, isRequired: false, transformFunction: null }, surfaceTitleKey: { classPropertyName: "surfaceTitleKey", publicName: "surfaceTitleKey", isSignal: true, isRequired: false, transformFunction: null }, assignedTabLabelKey: { classPropertyName: "assignedTabLabelKey", publicName: "assignedTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, assignedDecisionTab: { classPropertyName: "assignedDecisionTab", publicName: "assignedDecisionTab", isSignal: true, isRequired: false, transformFunction: null }, assignedEmptyStateKey: { classPropertyName: "assignedEmptyStateKey", publicName: "assignedEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, assignedStatus: { classPropertyName: "assignedStatus", publicName: "assignedStatus", isSignal: true, isRequired: false, transformFunction: null }, showApprovalTab: { classPropertyName: "showApprovalTab", publicName: "showApprovalTab", isSignal: true, isRequired: false, transformFunction: null }, approvalTabLabelKey: { classPropertyName: "approvalTabLabelKey", publicName: "approvalTabLabelKey", isSignal: true, isRequired: false, transformFunction: null }, approvalEmptyStateKey: { classPropertyName: "approvalEmptyStateKey", publicName: "approvalEmptyStateKey", isSignal: true, isRequired: false, transformFunction: null }, approvalStatus: { classPropertyName: "approvalStatus", publicName: "approvalStatus", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <ng-template #tableContent>\n    <div class=\"flex flex-col gap-4\">\n      @if (!adminMode()) {\n        <mt-tabs\n          mode=\"underline\"\n          [(active)]=\"activeTab\"\n          [options]=\"tabs()\"\n          fluid\n          (onChange)=\"switchTab($event)\"\n        ></mt-tabs>\n      }\n\n      <mt-table\n        [data]=\"tableRows()\"\n        [columns]=\"tableColumns()\"\n        [actions]=\"tableActions()\"\n        [rowActions]=\"rowActions()\"\n        [loading]=\"isLoading()\"\n        [noCard]=\"true\"\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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "exportable", "printable", "groupable", "cellClickFilter", "freezeActions", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: DelegationsList, decorators: [{
             type: Component,
@@ -2728,7 +2728,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         Table,
                         Tabs,
                         TranslocoDirective,
-                    ], 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        <mt-tabs\n          mode=\"underline\"\n          [(active)]=\"activeTab\"\n          [options]=\"tabs()\"\n          fluid\n          (onChange)=\"switchTab($event)\"\n        ></mt-tabs>\n      }\n\n      <mt-table\n        [data]=\"tableRows()\"\n        [columns]=\"tableColumns()\"\n        [actions]=\"tableActions()\"\n        [rowActions]=\"rowActions()\"\n        [loading]=\"isLoading()\"\n        [noCard]=\"true\"\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"] }]
+                    ], 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        <mt-tabs\n          mode=\"underline\"\n          [(active)]=\"activeTab\"\n          [options]=\"tabs()\"\n          fluid\n          (onChange)=\"switchTab($event)\"\n        ></mt-tabs>\n      }\n\n      <mt-table\n        [data]=\"tableRows()\"\n        [columns]=\"tableColumns()\"\n        [actions]=\"tableActions()\"\n        [rowActions]=\"rowActions()\"\n        [loading]=\"isLoading()\"\n        [noCard]=\"true\"\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}\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 }] }] } });
 
 /**