@masterteam/system-settings 0.0.16 → 0.0.18

package/fesm2022/masterteam-system-settings-email-delivery-shell-Bjwtj5Ic.mjs

@@ -0,0 +1,2213 @@
+import * as i0 from '@angular/core';
+import { input, inject, ChangeDetectionStrategy, Component, signal, computed, DestroyRef } from '@angular/core';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
+import { Breadcrumb } from '@masterteam/components/breadcrumb';
+import { EmptyState } from '@masterteam/components/empty-state';
+import { Page } from '@masterteam/components/page';
+import { ToastService } from '@masterteam/components/toast';
+import { Tooltip } from '@masterteam/components/tooltip';
+import { E as EmailDeliveryFacade, i as isConnectionTestAttempt, a as EmailDeliveryStatus, g as getEmailDeliveryStatusMap, b as EMAIL_DELIVERY_ATTEMPT_STATUSES, c as createEmailTestRequestId, d as areEmailTestRecipientsValid, p as parseEmailTestRecipients, e as isEmailTestRequestPending, f as EMAIL_DELIVERY_PERMISSIONS } from './masterteam-system-settings-masterteam-system-settings-CO-XTJOi.mjs';
+import { Icon } from '@masterteam/icons';
+import { Button } from '@masterteam/components/button';
+import { ModalService } from '@masterteam/components/modal';
+import { Table } from '@masterteam/components/table';
+import { take, timer, of, map, switchMap, finalize } from 'rxjs';
+import { DatePipe, DOCUMENT } from '@angular/common';
+import { ModalRef } from '@masterteam/components/dialog';
+import * as i1 from '@angular/forms';
+import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { TextareaField } from '@masterteam/components/textarea-field';
+import { ToggleField } from '@masterteam/components/toggle-field';
+import { ConfirmationService } from '@masterteam/components/confirmation';
+import { HttpErrorResponse } from '@angular/common/http';
+import { TextareaFieldConfig, TextFieldConfig, ToggleFieldConfig, ValidatorConfig, SelectFieldConfig, RadioButtonFieldConfig, NumberFieldConfig } from '@masterteam/components';
+import { DynamicForm } from '@masterteam/forms/dynamic-form';
+import { Menu } from '@masterteam/components/menu';
+import * as i1$1 from 'primeng/skeleton';
+import { SkeletonModule } from 'primeng/skeleton';
+
+class EmailOperatorReasonDialog {
+    itemName = input.required(...(ngDevMode ? [{ debugName: "itemName" }] : /* istanbul ignore next */ []));
+    consequence = input.required(...(ngDevMode ? [{ debugName: "consequence" }] : /* istanbul ignore next */ []));
+    showExceptionalOverride = input(false, ...(ngDevMode ? [{ debugName: "showExceptionalOverride" }] : /* istanbul ignore next */ []));
+    confirmLabel = input(null, ...(ngDevMode ? [{ debugName: "confirmLabel" }] : /* istanbul ignore next */ []));
+    ref = inject(ModalRef);
+    modal = inject(ModalService);
+    reason = new FormControl('', {
+        nonNullable: true,
+        validators: [Validators.required, Validators.maxLength(500)],
+    });
+    exceptionalOverride = new FormControl(false, {
+        nonNullable: true,
+    });
+    cancel() {
+        this.ref.close();
+    }
+    confirm() {
+        this.reason.markAsTouched();
+        this.exceptionalOverride.markAsTouched();
+        if (!this.canConfirm())
+            return;
+        this.ref.close({
+            reason: this.reason.getRawValue().trim(),
+            exceptionalOverride: this.exceptionalOverride.getRawValue(),
+        });
+    }
+    canConfirm() {
+        return (this.reason.valid &&
+            (!this.showExceptionalOverride() ||
+                this.exceptionalOverride.getRawValue()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailOperatorReasonDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailOperatorReasonDialog, isStandalone: true, selector: "mt-email-operator-reason-dialog", inputs: { itemName: { classPropertyName: "itemName", publicName: "itemName", isSignal: true, isRequired: true, transformFunction: null }, consequence: { classPropertyName: "consequence", publicName: "consequence", isSignal: true, isRequired: true, transformFunction: null }, showExceptionalOverride: { classPropertyName: "showExceptionalOverride", publicName: "showExceptionalOverride", isSignal: true, isRequired: false, transformFunction: null }, confirmLabel: { classPropertyName: "confirmLabel", publicName: "confirmLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <form\r\n    [class]=\"'space-y-5 p-4 sm:p-5 ' + modal.contentClass\"\r\n    (ngSubmit)=\"confirm()\"\r\n  >\r\n    <div\r\n      class=\"rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-950\"\r\n      role=\"note\"\r\n    >\r\n      <p class=\"m-0 break-words font-semibold\">{{ itemName() }}</p>\r\n      <p class=\"mb-0 mt-1\">{{ consequence() }}</p>\r\n    </div>\r\n\r\n    <mt-textarea-field\r\n      [formControl]=\"reason\"\r\n      [label]=\"t('operator-reason')\"\r\n      [hint]=\"t('operator-reason-hint')\"\r\n      [required]=\"true\"\r\n      [maxLength]=\"500\"\r\n      rows=\"4\"\r\n    />\r\n\r\n    @if (showExceptionalOverride()) {\r\n      <div class=\"flex flex-col gap-1\">\r\n        <mt-toggle-field\r\n          [formControl]=\"exceptionalOverride\"\r\n          [label]=\"t('exceptional-override')\"\r\n        />\r\n        <!-- mt-toggle-field has no hint input, so the consequence of an\r\n             exceptional replay is rendered here instead of silently dropped. -->\r\n        <p class=\"m-0 text-xs text-muted-color\">\r\n          {{ t(\"exceptional-override-hint\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </form>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      type=\"button\"\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      type=\"button\"\r\n      severity=\"warn\"\r\n      [label]=\"confirmLabel() || t('confirm-action')\"\r\n      [disabled]=\"!canConfirm()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"confirm()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailOperatorReasonDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-operator-reason-dialog', imports: [
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        Button,
+                        TextareaField,
+                        ToggleField,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <form\r\n    [class]=\"'space-y-5 p-4 sm:p-5 ' + modal.contentClass\"\r\n    (ngSubmit)=\"confirm()\"\r\n  >\r\n    <div\r\n      class=\"rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-950\"\r\n      role=\"note\"\r\n    >\r\n      <p class=\"m-0 break-words font-semibold\">{{ itemName() }}</p>\r\n      <p class=\"mb-0 mt-1\">{{ consequence() }}</p>\r\n    </div>\r\n\r\n    <mt-textarea-field\r\n      [formControl]=\"reason\"\r\n      [label]=\"t('operator-reason')\"\r\n      [hint]=\"t('operator-reason-hint')\"\r\n      [required]=\"true\"\r\n      [maxLength]=\"500\"\r\n      rows=\"4\"\r\n    />\r\n\r\n    @if (showExceptionalOverride()) {\r\n      <div class=\"flex flex-col gap-1\">\r\n        <mt-toggle-field\r\n          [formControl]=\"exceptionalOverride\"\r\n          [label]=\"t('exceptional-override')\"\r\n        />\r\n        <!-- mt-toggle-field has no hint input, so the consequence of an\r\n             exceptional replay is rendered here instead of silently dropped. -->\r\n        <p class=\"m-0 text-xs text-muted-color\">\r\n          {{ t(\"exceptional-override-hint\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </form>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      type=\"button\"\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      type=\"button\"\r\n      severity=\"warn\"\r\n      [label]=\"confirmLabel() || t('confirm-action')\"\r\n      [disabled]=\"!canConfirm()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"confirm()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], propDecorators: { itemName: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemName", required: true }] }], consequence: [{ type: i0.Input, args: [{ isSignal: true, alias: "consequence", required: true }] }], showExceptionalOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExceptionalOverride", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }] } });
+
+class EmailAttemptDetails {
+    attempt = input.required(...(ngDevMode ? [{ debugName: "attempt" }] : /* istanbul ignore next */ []));
+    ref = inject(ModalRef);
+    transloco = inject(TranslocoService);
+    modal = inject(ModalService);
+    facade = inject(EmailDeliveryFacade);
+    isConnectionTest() {
+        return isConnectionTestAttempt(this.attempt());
+    }
+    /**
+     * A controlled test is an operator action against one connection, not product
+     * work the platform owes anyone — replaying it would send a second real email
+     * nobody asked for, so the backend's test rows are never replayable.
+     */
+    canReplay() {
+        if (this.isConnectionTest())
+            return false;
+        return [
+            'Blocked',
+            'RetryScheduled',
+            'Accepted',
+            'FailedPermanent',
+            'DeadLettered',
+            'OutcomeUnknown',
+        ].includes(this.attempt().status);
+    }
+    providerLabel(providerKey) {
+        return (this.facade.providerByKey(providerKey)?.displayName ?? providerKey ?? '—');
+    }
+    replay() {
+        const attempt = this.attempt();
+        const dialog = this.modal.openModal(EmailOperatorReasonDialog, 'dialog', {
+            header: this.t('replay-attempt'),
+            styleClass: '!w-[36rem] max-w-[96vw]',
+            dismissible: true,
+            inputValues: {
+                itemName: attempt.id,
+                consequence: isExceptionalReplay(attempt.status)
+                    ? this.t('replay-exceptional-warning')
+                    : this.t('replay-warning'),
+                showExceptionalOverride: isExceptionalReplay(attempt.status),
+                confirmLabel: this.t('replay-attempt'),
+            },
+        });
+        dialog.onClose
+            .pipe(take(1))
+            .subscribe((decision) => {
+            if (!decision)
+                return;
+            this.facade
+                .replayAttempt(attempt, {
+                concurrencyToken: attempt.concurrencyToken,
+                exceptionalOverride: decision.exceptionalOverride,
+                reason: decision.reason,
+            })
+                .subscribe({
+                next: (result) => this.ref.close(result.attempt),
+                error: (error) => this.facade.showError(error),
+            });
+        });
+    }
+    close() {
+        this.ref.close();
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.${key}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailAttemptDetails, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailAttemptDetails, isStandalone: true, selector: "mt-email-attempt-details", inputs: { attempt: { classPropertyName: "attempt", publicName: "attempt", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  @if (attempt(); as item) {\r\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\r\n      <div class=\"grid w-full gap-5\">\r\n        <div\r\n          class=\"rounded-md border px-4 py-3 text-sm\"\r\n          [class.border-amber-200]=\"item.status === 'OutcomeUnknown'\"\r\n          [class.bg-amber-50]=\"item.status === 'OutcomeUnknown'\"\r\n          [class.border-blue-200]=\"item.status !== 'OutcomeUnknown'\"\r\n          [class.bg-blue-50]=\"item.status !== 'OutcomeUnknown'\"\r\n          role=\"status\"\r\n        >\r\n          @if (item.status === \"OutcomeUnknown\") {\r\n            {{ t(\"outcome-unknown-copy\") }}\r\n          } @else if (item.outcome === \"Accepted\") {\r\n            {{ t(\"accepted-copy\") }}\r\n          } @else {\r\n            {{ facade.describeCode(item.resultCode) }}\r\n          }\r\n        </div>\r\n\r\n        <!-- Same section shape the connection form uses (mt-client-form section\r\n             mode): header strip on a bordered, flat, rounded-md container. -->\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"delivery-summary\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.operation\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{\r\n                  isConnectionTest()\r\n                    ? t(\"operation.connection-test\")\r\n                    : item.operationKind\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.status\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-2\">\r\n                <mt-email-delivery-status\r\n                  kind=\"attempt\"\r\n                  [value]=\"item.status\"\r\n                />\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.outcome\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-2\">\r\n                @if (item.outcome) {\r\n                  <mt-email-delivery-status\r\n                    kind=\"attempt\"\r\n                    [value]=\"item.outcome\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"font-medium text-color\">\u2014</span>\r\n                }\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.provider\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ providerLabel(item.providerKey) }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.created\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                <time [attr.datetime]=\"item.createdAtUtc\">{{\r\n                  item.createdAtUtc | date: \"medium\"\r\n                }}</time>\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.count\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{ item.attemptCount }}\r\n              </dd>\r\n            </div>\r\n          </dl>\r\n        </section>\r\n\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"technical-identifiers\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"recipient-fingerprint\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                {{ item.recipientFingerprint }}\r\n              </dd>\r\n              <p class=\"mt-2 text-xs text-muted-color\">\r\n                {{ t(\"recipient-fingerprint-hint\") }}\r\n              </p>\r\n            </div>\r\n            @if (item.testRequestId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"test-request-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.testRequestId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">{{ t(\"attempt.id\") }}</dt>\r\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                {{ item.id }}\r\n              </dd>\r\n            </div>\r\n            @if (item.correlationId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"correlation-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.correlationId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n            @if (item.providerRequestId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"provider-request-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.providerRequestId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n          </dl>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button\r\n        [label]=\"t('close')\"\r\n        variant=\"outlined\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"close()\"\r\n      />\r\n      @if (canReplay()) {\r\n        <mt-button\r\n          severity=\"warn\"\r\n          icon=\"arrow.refresh-cw-01\"\r\n          [label]=\"t('replay-attempt')\"\r\n          [disabled]=\"!facade.managementAvailable()\"\r\n          [loading]=\"facade.mutationLoading() === 'replay-' + item.id\"\r\n          styleClass=\"w-full sm:w-auto\"\r\n          (onClick)=\"replay()\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailAttemptDetails, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-attempt-details', imports: [DatePipe, TranslocoDirective, Button, EmailDeliveryStatus], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  @if (attempt(); as item) {\r\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\r\n      <div class=\"grid w-full gap-5\">\r\n        <div\r\n          class=\"rounded-md border px-4 py-3 text-sm\"\r\n          [class.border-amber-200]=\"item.status === 'OutcomeUnknown'\"\r\n          [class.bg-amber-50]=\"item.status === 'OutcomeUnknown'\"\r\n          [class.border-blue-200]=\"item.status !== 'OutcomeUnknown'\"\r\n          [class.bg-blue-50]=\"item.status !== 'OutcomeUnknown'\"\r\n          role=\"status\"\r\n        >\r\n          @if (item.status === \"OutcomeUnknown\") {\r\n            {{ t(\"outcome-unknown-copy\") }}\r\n          } @else if (item.outcome === \"Accepted\") {\r\n            {{ t(\"accepted-copy\") }}\r\n          } @else {\r\n            {{ facade.describeCode(item.resultCode) }}\r\n          }\r\n        </div>\r\n\r\n        <!-- Same section shape the connection form uses (mt-client-form section\r\n             mode): header strip on a bordered, flat, rounded-md container. -->\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"delivery-summary\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.operation\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{\r\n                  isConnectionTest()\r\n                    ? t(\"operation.connection-test\")\r\n                    : item.operationKind\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.status\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-2\">\r\n                <mt-email-delivery-status\r\n                  kind=\"attempt\"\r\n                  [value]=\"item.status\"\r\n                />\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.outcome\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-2\">\r\n                @if (item.outcome) {\r\n                  <mt-email-delivery-status\r\n                    kind=\"attempt\"\r\n                    [value]=\"item.outcome\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"font-medium text-color\">\u2014</span>\r\n                }\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.provider\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ providerLabel(item.providerKey) }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.created\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                <time [attr.datetime]=\"item.createdAtUtc\">{{\r\n                  item.createdAtUtc | date: \"medium\"\r\n                }}</time>\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.count\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{ item.attemptCount }}\r\n              </dd>\r\n            </div>\r\n          </dl>\r\n        </section>\r\n\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"technical-identifiers\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"recipient-fingerprint\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                {{ item.recipientFingerprint }}\r\n              </dd>\r\n              <p class=\"mt-2 text-xs text-muted-color\">\r\n                {{ t(\"recipient-fingerprint-hint\") }}\r\n              </p>\r\n            </div>\r\n            @if (item.testRequestId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"test-request-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.testRequestId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">{{ t(\"attempt.id\") }}</dt>\r\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                {{ item.id }}\r\n              </dd>\r\n            </div>\r\n            @if (item.correlationId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"correlation-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.correlationId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n            @if (item.providerRequestId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"provider-request-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.providerRequestId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n          </dl>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button\r\n        [label]=\"t('close')\"\r\n        variant=\"outlined\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"close()\"\r\n      />\r\n      @if (canReplay()) {\r\n        <mt-button\r\n          severity=\"warn\"\r\n          icon=\"arrow.refresh-cw-01\"\r\n          [label]=\"t('replay-attempt')\"\r\n          [disabled]=\"!facade.managementAvailable()\"\r\n          [loading]=\"facade.mutationLoading() === 'replay-' + item.id\"\r\n          styleClass=\"w-full sm:w-auto\"\r\n          (onClick)=\"replay()\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</ng-container>\r\n" }]
+        }], propDecorators: { attempt: [{ type: i0.Input, args: [{ isSignal: true, alias: "attempt", required: true }] }] } });
+function isExceptionalReplay(status) {
+    return status === 'Accepted' || status === 'OutcomeUnknown';
+}
+
+/**
+ * Shared chrome for the Email Delivery overlays.
+ *
+ * Every drawer on this page opens over the page content (`appendTo:
+ * 'page-content'`), so it is positioned absolutely and drops its own shadow.
+ * It takes the full width only while there is no room to spare — from `lg` up
+ * it settles at half the page so the table stays readable behind it, which is
+ * also what keeps the forms and callouts inside from stretching into
+ * unreadably long lines.
+ */
+const EMAIL_DELIVERY_DRAWER_STYLE_CLASS = '!absolute !shadow-none !w-full !max-w-full md:!w-[70%] lg:!w-[50%]';
+
+class EmailDeliveryAttempts {
+    modal = inject(ModalService);
+    transloco = inject(TranslocoService);
+    facade = inject(EmailDeliveryFacade);
+    activeLanguage = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
+    /**
+     * Status is the one filter the backend understands (`?status=`), so it is
+     * held here and round-tripped into the query; every other column filters the
+     * rows already loaded.
+     */
+    tableFilters = signal({}, ...(ngDevMode ? [{ debugName: "tableFilters" }] : /* istanbul ignore next */ []));
+    /**
+     * Activity mixes product sends with the operator's own controlled tests. The
+     * table renders plain fields, so the labels are projected onto the row here;
+     * the extra properties are inert everywhere the raw attempt is used.
+     */
+    rows = computed(() => {
+        this.activeLanguage();
+        return this.facade.attempts().map((attempt) => ({
+            ...attempt,
+            operationLabel: this.operationLabel(attempt),
+            providerLabel: this.facade.providerByKey(attempt.providerKey)?.displayName ??
+                attempt.providerKey ??
+                '—',
+            resultLabel: attempt.resultCode
+                ? this.facade.describeCode(attempt.resultCode)
+                : '—',
+            recipientFingerprintShort: shortenFingerprint(attempt.recipientFingerprint),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    columns = computed(() => {
+        this.activeLanguage();
+        const statusMap = getEmailDeliveryStatusMap('attempt', this.transloco.translate.bind(this.transloco));
+        return [
+            {
+                key: 'status',
+                label: this.t('attempt.status'),
+                type: 'status',
+                width: '15rem',
+                statusMap,
+                filterConfig: {
+                    type: 'select',
+                    multiple: false,
+                    options: EMAIL_DELIVERY_ATTEMPT_STATUSES.map((value) => ({
+                        label: statusMap[value]?.display ?? value,
+                        value,
+                    })),
+                },
+            },
+            {
+                key: 'operationLabel',
+                label: this.t('attempt.operation'),
+                width: '14rem',
+                filterConfig: {
+                    type: 'select',
+                    options: this.distinctOptions((row) => row.operationLabel),
+                },
+            },
+            {
+                key: 'providerLabel',
+                label: this.t('attempt.provider'),
+                width: '15rem',
+                filterConfig: {
+                    type: 'select',
+                    options: this.distinctOptions((row) => row.providerLabel),
+                },
+            },
+            {
+                key: 'resultLabel',
+                label: this.t('attempt.result'),
+                filterConfig: { type: 'text' },
+            },
+            {
+                key: 'recipientFingerprintShort',
+                label: this.t('recipient-fingerprint'),
+                width: '15rem',
+                filterable: false,
+            },
+            {
+                key: 'createdAtUtc',
+                label: this.t('attempt.created'),
+                type: 'dateTime',
+                width: '10rem',
+                filterConfig: { type: 'date' },
+            },
+            {
+                key: 'attemptCount',
+                label: this.t('attempt.count'),
+                type: 'number',
+                width: '7rem',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    actions = computed(() => {
+        this.activeLanguage();
+        return [
+            {
+                icon: 'general.eye',
+                label: this.t('view-details'),
+                action: (row) => this.openDetails(row),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.load(true);
+    }
+    /**
+     * Only the status filter reaches the backend; the rest narrow the rows the
+     * table already holds, so nothing else needs a round trip.
+     */
+    onFiltersChange(filters) {
+        this.tableFilters.set(filters);
+        const status = readStatusFilter(filters['status']);
+        if (status === this.facade.attemptStatusFilter())
+            return;
+        this.load(true, status);
+    }
+    refresh() {
+        this.load(true);
+    }
+    loadMore() {
+        this.load(false);
+    }
+    openDetails(attempt) {
+        const ref = this.modal.openModal(EmailAttemptDetails, 'drawer', {
+            header: this.t('attempt-details'),
+            styleClass: EMAIL_DELIVERY_DRAWER_STYLE_CLASS,
+            position: 'end',
+            appendTo: 'page-content',
+            dismissableMask: true,
+            dismissible: true,
+            inputValues: { attempt },
+        });
+        ref.onClose.pipe(take(1)).subscribe((updated) => {
+            if (updated)
+                this.load(true);
+        });
+    }
+    load(reset, status = this.facade.attemptStatusFilter()) {
+        this.facade.loadAttempts(reset, status).subscribe({
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    /**
+     * Select filters over locally-filtered columns only offer values that are
+     * actually present, so the operator never picks an option that empties the
+     * table.
+     */
+    distinctOptions(select) {
+        const values = new Set(this.rows().map(select).filter(Boolean));
+        return Array.from(values)
+            .sort((left, right) => left.localeCompare(right))
+            .map((value) => ({ label: value, value }));
+    }
+    /**
+     * Controlled tests are always shown as "Connection test"; anything else falls
+     * back to the backend's own operation kind rather than a guessed label.
+     */
+    operationLabel(attempt) {
+        return isConnectionTestAttempt(attempt)
+            ? this.t('operation.connection-test')
+            : attempt.operationKind;
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.${key}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryAttempts, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailDeliveryAttempts, isStandalone: true, selector: "mt-email-delivery-attempts", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-4\" aria-label=\"{{ t('activity-title') }}\">\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [filters]=\"tableFilters()\"\r\n      [loading]=\"facade.attemptsLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-attempts-title')\"\r\n      [emptyDescription]=\"t('no-attempts-description')\"\r\n      filterMode=\"column\"\r\n      dataKey=\"id\"\r\n      actionShape=\"popover\"\r\n      [clickableRows]=\"true\"\r\n      storageKey=\"email-delivery-attempts\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (rowClick)=\"openDetails($event)\"\r\n    >\r\n      <ng-template #captionEnd>\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          icon=\"arrow.refresh-cw-01\"\r\n          [label]=\"t('refresh')\"\r\n          [loading]=\"facade.attemptsLoading()\"\r\n          (onClick)=\"refresh()\"\r\n        />\r\n      </ng-template>\r\n    </mt-table>\r\n\r\n    @if (facade.attemptsNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.attemptsLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryAttempts, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-delivery-attempts', imports: [TranslocoDirective, Button, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-4\" aria-label=\"{{ t('activity-title') }}\">\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [filters]=\"tableFilters()\"\r\n      [loading]=\"facade.attemptsLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-attempts-title')\"\r\n      [emptyDescription]=\"t('no-attempts-description')\"\r\n      filterMode=\"column\"\r\n      dataKey=\"id\"\r\n      actionShape=\"popover\"\r\n      [clickableRows]=\"true\"\r\n      storageKey=\"email-delivery-attempts\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (rowClick)=\"openDetails($event)\"\r\n    >\r\n      <ng-template #captionEnd>\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          icon=\"arrow.refresh-cw-01\"\r\n          [label]=\"t('refresh')\"\r\n          [loading]=\"facade.attemptsLoading()\"\r\n          (onClick)=\"refresh()\"\r\n        />\r\n      </ng-template>\r\n    </mt-table>\r\n\r\n    @if (facade.attemptsNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.attemptsLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n" }]
+        }] });
+/**
+ * The status column is a single-select, so its stored value is the raw status.
+ * An empty selection clears the backend filter rather than sending a blank.
+ */
+function readStatusFilter(value) {
+    const raw = Array.isArray(value) ? value[0] : value;
+    return typeof raw === 'string' && raw.trim() !== '' ? raw : null;
+}
+const FINGERPRINT_PREFIX_LENGTH = 12;
+/**
+ * A 64-character hash has nowhere to wrap, so rendering it whole pushed its
+ * column far past the width the table asked for. The list only needs enough of
+ * it to tell two recipients apart; the drawer still shows the value in full.
+ */
+function shortenFingerprint(value) {
+    if (!value)
+        return '—';
+    return value.length > FINGERPRINT_PREFIX_LENGTH
+        ? value.slice(0, FINGERPRINT_PREFIX_LENGTH) + '…'
+        : value;
+}
+
+class EmailDeliveryHostEvidence {
+    document = inject(DOCUMENT);
+    modal = inject(ModalService);
+    confirmation = inject(ConfirmationService);
+    transloco = inject(TranslocoService);
+    facade = inject(EmailDeliveryFacade);
+    activeLanguage = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
+    rows = computed(() => this.facade.hostEvidence().map((item) => ({
+        ...item,
+        evidenceRowId: item.evidenceOccurrenceId ?? item.itemId,
+        evidenceKindLabel: humanizeIdentifier$1(item.evidenceKind),
+        evidenceOccurrenceIdentity: identifierEntity$1(item.evidenceOccurrenceId),
+        errorLabel: this.facade.describeCode(item.errorCode),
+    })), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    columns = computed(() => {
+        this.activeLanguage();
+        const statusMap = getEmailDeliveryStatusMap('support', this.transloco.translate.bind(this.transloco));
+        return [
+            {
+                key: 'evidenceKindLabel',
+                label: this.t('evidence-kind'),
+                width: '11rem',
+            },
+            {
+                key: 'resolutionState',
+                label: this.t('resolution-state'),
+                type: 'status',
+                width: '12rem',
+                statusMap,
+            },
+            {
+                key: 'ownershipState',
+                label: this.t('ownership-state'),
+                type: 'status',
+                width: '11rem',
+                statusMap,
+            },
+            {
+                key: 'detectedAtUtc',
+                label: this.t('detected'),
+                type: 'dateTime',
+                width: '10rem',
+            },
+            { key: 'errorLabel', label: this.t('issue') },
+            {
+                key: 'evidenceOccurrenceIdentity',
+                label: this.t('evidence-occurrence-id'),
+                type: 'entity',
+                width: '15rem',
+                shrink: true,
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    actions = computed(() => {
+        this.activeLanguage();
+        return [
+            {
+                icon: 'general.download-01',
+                label: this.t('export'),
+                hidden: (row) => {
+                    const item = row;
+                    return !item.canExport || !item.evidenceOccurrenceId;
+                },
+                action: (row) => this.export(row),
+            },
+            {
+                icon: 'general.tool-02',
+                label: this.t('repair'),
+                hidden: (row) => !this.facade.managementAvailable() ||
+                    !row.canRepair ||
+                    !row.evidenceOccurrenceId ||
+                    !row.decisionToken,
+                action: (row) => this.decide(row, 'repair'),
+            },
+            {
+                icon: 'general.check-circle',
+                label: this.t('acknowledge'),
+                color: 'danger',
+                hidden: (row) => !this.facade.managementAvailable() ||
+                    !row.evidenceOccurrenceId ||
+                    !row.decisionToken,
+                action: (row) => this.decide(row, 'acknowledge'),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        if (this.facade.hostEvidence().length === 0)
+            this.load(true);
+    }
+    export(item) {
+        if (!item.evidenceOccurrenceId)
+            return;
+        this.facade.exportHostEvidence(item.evidenceOccurrenceId).subscribe({
+            next: (download) => {
+                const url = URL.createObjectURL(download.blob);
+                const anchor = this.document.createElement('a');
+                anchor.href = url;
+                anchor.download = download.fileName;
+                anchor.rel = 'noopener';
+                anchor.click();
+                URL.revokeObjectURL(url);
+            },
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    decide(item, action) {
+        if (!item.evidenceOccurrenceId || !item.decisionToken)
+            return;
+        const dialog = this.modal.openModal(EmailOperatorReasonDialog, 'dialog', {
+            header: this.t(action === 'repair' ? 'repair-evidence' : 'acknowledge-evidence'),
+            styleClass: '!w-[36rem] max-w-[96vw]',
+            dismissible: true,
+            inputValues: {
+                itemName: item.evidenceOccurrenceId,
+                consequence: this.t(action === 'repair'
+                    ? 'evidence-repair-warning'
+                    : 'evidence-acknowledge-warning'),
+                confirmLabel: this.t(action),
+            },
+        });
+        dialog.onClose
+            .pipe(take(1))
+            .subscribe((decision) => {
+            if (!decision)
+                return;
+            this.facade
+                .decideHostEvidence(item, action, decision.reason)
+                .subscribe({
+                error: (error) => {
+                    this.facade.showError(error);
+                    this.load(true);
+                },
+            });
+        });
+    }
+    confirmRebuild() {
+        this.confirmation.confirm({
+            type: 'dialog',
+            header: this.t('rebuild-evidence-index'),
+            message: this.t('rebuild-evidence-warning'),
+            accept: () => this.facade.rebuildEvidenceIndex(200).subscribe({
+                error: (error) => this.facade.showError(error),
+            }),
+        });
+    }
+    loadMore() {
+        this.load(false);
+    }
+    load(reset) {
+        this.facade.loadHostEvidence(reset).subscribe({
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.${key}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryHostEvidence, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailDeliveryHostEvidence, isStandalone: true, selector: "mt-email-delivery-host-evidence", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-3\" aria-labelledby=\"host-evidence-heading\">\r\n    <div\r\n      class=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\"\r\n    >\r\n      <div>\r\n        <h3 id=\"host-evidence-heading\" class=\"font-semibold text-color\">\r\n          {{ t(\"host-evidence-title\") }}\r\n        </h3>\r\n        <p class=\"mt-1 text-sm text-muted-color\">\r\n          {{ t(\"host-evidence-description\") }}\r\n        </p>\r\n      </div>\r\n      <mt-button\r\n        severity=\"secondary\"\r\n        variant=\"outlined\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [label]=\"t('rebuild-evidence-index')\"\r\n        [disabled]=\"!facade.managementAvailable()\"\r\n        [loading]=\"facade.mutationLoading() === 'rebuild-evidence'\"\r\n        (onClick)=\"confirmRebuild()\"\r\n      />\r\n    </div>\r\n\r\n    @if (facade.hostEvidenceScanBudgetExhausted()) {\r\n      <div\r\n        class=\"rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-950\"\r\n        role=\"status\"\r\n      >\r\n        {{ t(\"scan-budget-exhausted\") }}\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [loading]=\"facade.hostEvidenceLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-evidence-title')\"\r\n      [emptyDescription]=\"t('no-evidence-description')\"\r\n      filterMode=\"column\"\r\n      actionShape=\"popover\"\r\n      dataKey=\"evidenceRowId\"\r\n      storageKey=\"email-delivery-host-evidence\"\r\n    />\r\n\r\n    @if (facade.hostEvidenceNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.hostEvidenceLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryHostEvidence, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-delivery-host-evidence', imports: [TranslocoDirective, Button, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-3\" aria-labelledby=\"host-evidence-heading\">\r\n    <div\r\n      class=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\"\r\n    >\r\n      <div>\r\n        <h3 id=\"host-evidence-heading\" class=\"font-semibold text-color\">\r\n          {{ t(\"host-evidence-title\") }}\r\n        </h3>\r\n        <p class=\"mt-1 text-sm text-muted-color\">\r\n          {{ t(\"host-evidence-description\") }}\r\n        </p>\r\n      </div>\r\n      <mt-button\r\n        severity=\"secondary\"\r\n        variant=\"outlined\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [label]=\"t('rebuild-evidence-index')\"\r\n        [disabled]=\"!facade.managementAvailable()\"\r\n        [loading]=\"facade.mutationLoading() === 'rebuild-evidence'\"\r\n        (onClick)=\"confirmRebuild()\"\r\n      />\r\n    </div>\r\n\r\n    @if (facade.hostEvidenceScanBudgetExhausted()) {\r\n      <div\r\n        class=\"rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-950\"\r\n        role=\"status\"\r\n      >\r\n        {{ t(\"scan-budget-exhausted\") }}\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [loading]=\"facade.hostEvidenceLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-evidence-title')\"\r\n      [emptyDescription]=\"t('no-evidence-description')\"\r\n      filterMode=\"column\"\r\n      actionShape=\"popover\"\r\n      dataKey=\"evidenceRowId\"\r\n      storageKey=\"email-delivery-host-evidence\"\r\n    />\r\n\r\n    @if (facade.hostEvidenceNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.hostEvidenceLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n" }]
+        }] });
+function identifierEntity$1(value) {
+    return {
+        name: '',
+        viewType: 'Text',
+        value: value ?? '—',
+        configuration: { hideName: true },
+    };
+}
+function humanizeIdentifier$1(value) {
+    return value
+        .replace(/[._-]+/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .replace(/^./, (character) => character.toUpperCase())
+        .replace(/\bSmtp\b/g, 'SMTP')
+        .replace(/\bTls\b/g, 'TLS')
+        .replace(/\bOauth2?\b/gi, 'OAuth2')
+        .replace(/\bHttp\b/g, 'HTTP')
+        .replace(/\bApi\b/g, 'API');
+}
+
+class EmailDeliveryQuarantine {
+    modal = inject(ModalService);
+    transloco = inject(TranslocoService);
+    facade = inject(EmailDeliveryFacade);
+    activeLanguage = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
+    rows = computed(() => this.facade.quarantine().map((item) => ({
+        ...item,
+        attemptIdentity: identifierEntity(item.attemptId),
+        errorLabel: this.facade.describeCode(item.errorCode),
+    })), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    columns = computed(() => {
+        this.activeLanguage();
+        return [
+            {
+                key: 'attemptIdentity',
+                label: this.t('attempt.id'),
+                type: 'entity',
+                width: '15rem',
+                shrink: true,
+            },
+            {
+                key: 'recoveryClassification',
+                label: this.t('recovery-classification'),
+                type: 'status',
+                width: '12rem',
+                statusMap: getEmailDeliveryStatusMap('support', this.transloco.translate.bind(this.transloco)),
+            },
+            { key: 'errorLabel', label: this.t('issue') },
+            {
+                key: 'quarantinedAtUtc',
+                label: this.t('detected'),
+                type: 'dateTime',
+                width: '10rem',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    actions = computed(() => {
+        this.activeLanguage();
+        return [
+            {
+                icon: 'arrow.refresh-cw-01',
+                label: this.t('retry'),
+                hidden: (row) => !this.facade.managementAvailable() ||
+                    row.recoveryClassification !==
+                        'retryable-after-upgrade',
+                action: (row) => this.decide(row, 'retry'),
+            },
+            {
+                icon: 'general.check-circle',
+                label: this.t('acknowledge'),
+                color: 'danger',
+                hidden: () => !this.facade.managementAvailable(),
+                action: (row) => this.decide(row, 'acknowledge'),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        if (this.facade.quarantine().length === 0)
+            this.load(true);
+    }
+    decide(item, action) {
+        const dialog = this.modal.openModal(EmailOperatorReasonDialog, 'dialog', {
+            header: this.t(action === 'retry' ? 'retry-quarantine' : 'acknowledge-quarantine'),
+            styleClass: '!w-[36rem] max-w-[96vw]',
+            dismissible: true,
+            inputValues: {
+                itemName: item.itemId,
+                consequence: this.t(action === 'retry'
+                    ? 'quarantine-retry-warning'
+                    : 'quarantine-acknowledge-warning'),
+                confirmLabel: this.t(action),
+            },
+        });
+        dialog.onClose
+            .pipe(take(1))
+            .subscribe((decision) => {
+            if (!decision)
+                return;
+            this.facade.decideQuarantine(item, action, decision.reason).subscribe({
+                error: (error) => this.facade.showError(error),
+            });
+        });
+    }
+    loadMore() {
+        this.load(false);
+    }
+    load(reset) {
+        this.facade.loadQuarantine(reset).subscribe({
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.${key}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryQuarantine, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailDeliveryQuarantine, isStandalone: true, selector: "mt-email-delivery-quarantine", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-3\" aria-labelledby=\"quarantine-heading\">\r\n    <div>\r\n      <h3 id=\"quarantine-heading\" class=\"font-semibold text-color\">\r\n        {{ t(\"quarantine-title\") }}\r\n      </h3>\r\n      <p class=\"mt-1 text-sm text-muted-color\">\r\n        {{ t(\"quarantine-description\") }}\r\n      </p>\r\n    </div>\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [loading]=\"facade.quarantineLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-quarantine-title')\"\r\n      [emptyDescription]=\"t('no-quarantine-description')\"\r\n      filterMode=\"column\"\r\n      actionShape=\"popover\"\r\n      dataKey=\"itemId\"\r\n      storageKey=\"email-delivery-quarantine\"\r\n    />\r\n\r\n    @if (facade.quarantineNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.quarantineLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { 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", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryQuarantine, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-delivery-quarantine', imports: [TranslocoDirective, Button, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-3\" aria-labelledby=\"quarantine-heading\">\r\n    <div>\r\n      <h3 id=\"quarantine-heading\" class=\"font-semibold text-color\">\r\n        {{ t(\"quarantine-title\") }}\r\n      </h3>\r\n      <p class=\"mt-1 text-sm text-muted-color\">\r\n        {{ t(\"quarantine-description\") }}\r\n      </p>\r\n    </div>\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [loading]=\"facade.quarantineLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-quarantine-title')\"\r\n      [emptyDescription]=\"t('no-quarantine-description')\"\r\n      filterMode=\"column\"\r\n      actionShape=\"popover\"\r\n      dataKey=\"itemId\"\r\n      storageKey=\"email-delivery-quarantine\"\r\n    />\r\n\r\n    @if (facade.quarantineNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.quarantineLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n" }]
+        }] });
+function identifierEntity(value) {
+    return {
+        name: '',
+        viewType: 'Text',
+        value: value ?? '—',
+        configuration: { hideName: true },
+    };
+}
+
+class EmailDeliveryActivity {
+    advancedExpanded = signal(false, ...(ngDevMode ? [{ debugName: "advancedExpanded" }] : /* istanbul ignore next */ []));
+    onAdvancedToggle(event) {
+        this.advancedExpanded.set(event.currentTarget.open);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryActivity, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailDeliveryActivity, isStandalone: true, selector: "mt-email-delivery-activity", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <div class=\"grid gap-5\">\r\n    <mt-email-delivery-attempts class=\"block min-w-0\" />\r\n\r\n    <!-- Operator recovery tools. Kept collapsed and visually quieter than the\r\n         Activity table above it: they are for incident work, not daily use. -->\r\n    <details\r\n      class=\"group overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n      (toggle)=\"onAdvancedToggle($event)\"\r\n    >\r\n      <summary\r\n        class=\"flex cursor-pointer list-none items-center gap-3 p-4 focus-visible:outline-2 focus-visible:outline-offset-2\"\r\n      >\r\n        <span\r\n          class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-surface-100 text-muted-color\"\r\n        >\r\n          <mt-icon icon=\"general.tool-02\" aria-hidden=\"true\" />\r\n        </span>\r\n        <span class=\"min-w-0 flex-1\">\r\n          <span class=\"block font-semibold text-color\">\r\n            {{ t(\"advanced-support\") }}\r\n          </span>\r\n          <span class=\"mt-0.5 block text-sm font-normal text-muted-color\">\r\n            {{ t(\"advanced-support-description\") }}\r\n          </span>\r\n        </span>\r\n        <mt-icon\r\n          icon=\"arrow.chevron-down\"\r\n          aria-hidden=\"true\"\r\n          class=\"shrink-0 text-base text-muted-color transition-transform group-open:rotate-180\"\r\n        />\r\n      </summary>\r\n      @if (advancedExpanded()) {\r\n        <div\r\n          class=\"grid gap-4 border-t border-surface-200 bg-surface-50/60 p-4 sm:p-5\"\r\n        >\r\n          <mt-email-delivery-quarantine class=\"block min-w-0\" />\r\n          <mt-email-delivery-host-evidence class=\"block min-w-0\" />\r\n        </div>\r\n      }\r\n    </details>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: EmailDeliveryAttempts, selector: "mt-email-delivery-attempts" }, { kind: "component", type: EmailDeliveryQuarantine, selector: "mt-email-delivery-quarantine" }, { kind: "component", type: EmailDeliveryHostEvidence, selector: "mt-email-delivery-host-evidence" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryActivity, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-delivery-activity', imports: [
+                        TranslocoDirective,
+                        Icon,
+                        EmailDeliveryAttempts,
+                        EmailDeliveryQuarantine,
+                        EmailDeliveryHostEvidence,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <div class=\"grid gap-5\">\r\n    <mt-email-delivery-attempts class=\"block min-w-0\" />\r\n\r\n    <!-- Operator recovery tools. Kept collapsed and visually quieter than the\r\n         Activity table above it: they are for incident work, not daily use. -->\r\n    <details\r\n      class=\"group overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n      (toggle)=\"onAdvancedToggle($event)\"\r\n    >\r\n      <summary\r\n        class=\"flex cursor-pointer list-none items-center gap-3 p-4 focus-visible:outline-2 focus-visible:outline-offset-2\"\r\n      >\r\n        <span\r\n          class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-surface-100 text-muted-color\"\r\n        >\r\n          <mt-icon icon=\"general.tool-02\" aria-hidden=\"true\" />\r\n        </span>\r\n        <span class=\"min-w-0 flex-1\">\r\n          <span class=\"block font-semibold text-color\">\r\n            {{ t(\"advanced-support\") }}\r\n          </span>\r\n          <span class=\"mt-0.5 block text-sm font-normal text-muted-color\">\r\n            {{ t(\"advanced-support-description\") }}\r\n          </span>\r\n        </span>\r\n        <mt-icon\r\n          icon=\"arrow.chevron-down\"\r\n          aria-hidden=\"true\"\r\n          class=\"shrink-0 text-base text-muted-color transition-transform group-open:rotate-180\"\r\n        />\r\n      </summary>\r\n      @if (advancedExpanded()) {\r\n        <div\r\n          class=\"grid gap-4 border-t border-surface-200 bg-surface-50/60 p-4 sm:p-5\"\r\n        >\r\n          <mt-email-delivery-quarantine class=\"block min-w-0\" />\r\n          <mt-email-delivery-host-evidence class=\"block min-w-0\" />\r\n        </div>\r\n      }\r\n    </details>\r\n  </div>\r\n</ng-container>\r\n" }]
+        }] });
+
+class EmailControlledTestDialog {
+    connectionId = input.required(...(ngDevMode ? [{ debugName: "connectionId" }] : /* istanbul ignore next */ []));
+    connectionName = input.required(...(ngDevMode ? [{ debugName: "connectionName" }] : /* istanbul ignore next */ []));
+    modal = inject(ModalService);
+    ref = inject(ModalRef);
+    destroyRef = inject(DestroyRef);
+    transloco = inject(TranslocoService);
+    facade = inject(EmailDeliveryFacade);
+    testRequestId = signal(createEmailTestRequestId(), ...(ngDevMode ? [{ debugName: "testRequestId" }] : /* istanbul ignore next */ []));
+    timedOut = signal(false, ...(ngDevMode ? [{ debugName: "timedOut" }] : /* istanbul ignore next */ []));
+    polling = signal(false, ...(ngDevMode ? [{ debugName: "polling" }] : /* istanbul ignore next */ []));
+    result = signal(null, ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
+    pollIndex = 0;
+    form = new FormControl({
+        recipients: null,
+        subject: 'Pplus email delivery test',
+        body: 'This is a controlled test.',
+        isHtml: false,
+    }, { nonNullable: true });
+    formStatus = toSignal(this.form.statusChanges, {
+        initialValue: this.form.status,
+    });
+    canSubmit = computed(() => this.formStatus() === 'VALID' &&
+        !this.facade.mutationLoading() &&
+        !this.result(), ...(ngDevMode ? [{ debugName: "canSubmit" }] : /* istanbul ignore next */ []));
+    formConfig = computed(() => ({
+        sections: [
+            {
+                key: 'controlled-test',
+                type: 'none',
+                columns: 12,
+                fields: [
+                    new TextareaFieldConfig({
+                        key: 'recipients',
+                        label: this.t('test.recipients'),
+                        placeholder: this.t('test.recipients-placeholder'),
+                        hint: this.t('test.recipients-hint'),
+                        colSpan: 12,
+                        rows: 3,
+                        validators: [
+                            ValidatorConfig.required(),
+                            ValidatorConfig.custom((value) => areEmailTestRecipientsValid(value, 100, 320), this.t('test.recipients-invalid')),
+                        ],
+                    }),
+                    new TextFieldConfig({
+                        key: 'subject',
+                        label: this.t('test.subject'),
+                        colSpan: 12,
+                        validators: [
+                            ValidatorConfig.required(),
+                            ValidatorConfig.maxLength(998),
+                            ValidatorConfig.pattern('^[^\\r\\n]*$'),
+                        ],
+                    }),
+                    new TextareaFieldConfig({
+                        key: 'body',
+                        label: this.t('test.body'),
+                        colSpan: 12,
+                        rows: 8,
+                        validators: [ValidatorConfig.maxLength(2_000_000)],
+                    }),
+                    new ToggleFieldConfig({
+                        key: 'isHtml',
+                        label: this.t('test.html'),
+                        colSpan: 12,
+                    }),
+                ],
+            },
+        ],
+    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
+    /**
+     * The provider-acceptance caveat is shown once. When the backend already
+     * answers with the accepted-delivery-unconfirmed code, the code message
+     * above carries that sentence and the extra line would just repeat it.
+     */
+    showsAcceptedCaveat(result) {
+        return (result.outcome === 'Accepted' &&
+            result.code !== ACCEPTED_DELIVERY_UNCONFIRMED_CODE);
+    }
+    submit() {
+        if (!this.canSubmit()) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        const value = this.form.getRawValue();
+        this.facade
+            .sendConnectionTest(this.connectionId(), {
+            testRequestId: this.testRequestId(),
+            recipients: parseEmailTestRecipients(value.recipients),
+            subject: value.subject?.trim() ?? '',
+            body: value.body ?? '',
+            isHtml: value.isHtml,
+        })
+            .subscribe({
+            next: (result) => {
+                this.result.set(result);
+                this.timedOut.set(false);
+            },
+            error: (error) => {
+                if (isAmbiguousTimeout(error) ||
+                    this.facade.errorAction(error) === 'poll_status') {
+                    this.startPolling();
+                    return;
+                }
+                this.facade.showError(error);
+                // The backend rejected this GUID because it already stands for a
+                // different send. Retrieving it would return someone else's test and
+                // reusing it can never succeed, so the dialog mints a fresh one and
+                // waits for the operator to press Send again — it never resends.
+                if (isTestRequestConflict(error)) {
+                    this.testRequestId.set(createEmailTestRequestId());
+                }
+            },
+        });
+    }
+    retrieve() {
+        if (this.polling())
+            return;
+        this.retrieveStoredResult(false);
+    }
+    retrieveStoredResult(fromPoll) {
+        this.facade
+            .retrieveConnectionTest(this.connectionId(), this.testRequestId())
+            .subscribe({
+            next: (stored) => {
+                if (stored.result) {
+                    this.result.set(stored.result);
+                    this.timedOut.set(false);
+                    this.polling.set(false);
+                    return;
+                }
+                if (fromPoll && isEmailTestRequestPending(stored.requestState)) {
+                    this.schedulePoll();
+                }
+                else {
+                    this.polling.set(false);
+                    this.timedOut.set(true);
+                }
+            },
+            error: (error) => {
+                if (fromPoll && this.facade.errorAction(error) === 'poll_status') {
+                    this.schedulePoll();
+                    return;
+                }
+                this.polling.set(false);
+                this.timedOut.set(true);
+                this.facade.showError(error);
+            },
+        });
+    }
+    startPolling() {
+        if (this.polling())
+            return;
+        this.timedOut.set(true);
+        this.polling.set(true);
+        this.pollIndex = 0;
+        this.schedulePoll();
+    }
+    schedulePoll() {
+        const delay = POLL_DELAYS_MS[this.pollIndex++];
+        if (delay === undefined) {
+            this.polling.set(false);
+            return;
+        }
+        timer(delay)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.retrieveStoredResult(true));
+    }
+    close() {
+        this.ref.close(this.result());
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.${key}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailControlledTestDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailControlledTestDialog, isStandalone: true, selector: "mt-email-controlled-test-dialog", inputs: { connectionId: { classPropertyName: "connectionId", publicName: "connectionId", isSignal: true, isRequired: true, transformFunction: null }, connectionName: { classPropertyName: "connectionName", publicName: "connectionName", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\r\n    <div\r\n      class=\"mb-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950\"\r\n      role=\"note\"\r\n    >\r\n      <strong>{{ t(\"test.real-email-warning-title\") }}</strong>\r\n      {{ t(\"test.real-email-warning\") }}\r\n    </div>\r\n\r\n    <!-- The GUID this dialog will keep for the whole exchange. It is what a\r\n         lost response is retrieved with, so the operator can record it before\r\n         sending rather than reconstructing it afterwards. -->\r\n    <p class=\"mb-4 text-xs text-muted-color\">\r\n      {{ t(\"test-request-id\") }}:\r\n      <span class=\"break-all font-mono\">{{ testRequestId() }}</span>\r\n    </p>\r\n\r\n    @if (!result()) {\r\n      <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\r\n    }\r\n\r\n    @if (timedOut()) {\r\n      <div\r\n        class=\"mt-4 rounded-md border border-orange-200 bg-orange-50 px-4 py-3\"\r\n        role=\"alert\"\r\n      >\r\n        <p class=\"font-semibold text-orange-950\">\r\n          {{ t(\"test.timeout-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 text-sm text-orange-900\">\r\n          {{ t(\"test.timeout-description\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n\r\n    @if (result(); as testResult) {\r\n      <div\r\n        class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-4\"\r\n        aria-live=\"polite\"\r\n      >\r\n        <mt-email-delivery-status kind=\"attempt\" [value]=\"testResult.outcome\" />\r\n        <p class=\"mt-1 text-sm text-muted-color\">\r\n          {{ facade.describeCode(testResult.code) }}\r\n        </p>\r\n        @if (showsAcceptedCaveat(testResult)) {\r\n          <p class=\"mt-3 text-sm font-medium text-amber-800\">\r\n            {{ t(\"accepted-unconfirmed\") }}\r\n          </p>\r\n        }\r\n        @if (testResult.outcome === \"OutcomeUnknown\") {\r\n          <p class=\"mt-3 text-sm font-medium text-red-700\">\r\n            {{ t(\"outcome-unknown-warning\") }}\r\n          </p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      severity=\"secondary\"\r\n      variant=\"outlined\"\r\n      [label]=\"t('close')\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"close()\"\r\n    />\r\n    @if (timedOut()) {\r\n      <mt-button\r\n        [label]=\"t('test.retrieve')\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [disabled]=\"polling()\"\r\n        [loading]=\"polling() || facade.mutationLoading() === 'retrieve-test'\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"retrieve()\"\r\n      />\r\n    } @else if (!result()) {\r\n      <mt-button\r\n        [label]=\"t('test.send')\"\r\n        icon=\"communication.send-01\"\r\n        [disabled]=\"!canSubmit()\"\r\n        [loading]=\"facade.mutationLoading() === 'test'\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"submit()\"\r\n      />\r\n    }\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailControlledTestDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-controlled-test-dialog', imports: [
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        DynamicForm,
+                        Button,
+                        EmailDeliveryStatus,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\r\n    <div\r\n      class=\"mb-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950\"\r\n      role=\"note\"\r\n    >\r\n      <strong>{{ t(\"test.real-email-warning-title\") }}</strong>\r\n      {{ t(\"test.real-email-warning\") }}\r\n    </div>\r\n\r\n    <!-- The GUID this dialog will keep for the whole exchange. It is what a\r\n         lost response is retrieved with, so the operator can record it before\r\n         sending rather than reconstructing it afterwards. -->\r\n    <p class=\"mb-4 text-xs text-muted-color\">\r\n      {{ t(\"test-request-id\") }}:\r\n      <span class=\"break-all font-mono\">{{ testRequestId() }}</span>\r\n    </p>\r\n\r\n    @if (!result()) {\r\n      <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\r\n    }\r\n\r\n    @if (timedOut()) {\r\n      <div\r\n        class=\"mt-4 rounded-md border border-orange-200 bg-orange-50 px-4 py-3\"\r\n        role=\"alert\"\r\n      >\r\n        <p class=\"font-semibold text-orange-950\">\r\n          {{ t(\"test.timeout-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 text-sm text-orange-900\">\r\n          {{ t(\"test.timeout-description\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n\r\n    @if (result(); as testResult) {\r\n      <div\r\n        class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-4\"\r\n        aria-live=\"polite\"\r\n      >\r\n        <mt-email-delivery-status kind=\"attempt\" [value]=\"testResult.outcome\" />\r\n        <p class=\"mt-1 text-sm text-muted-color\">\r\n          {{ facade.describeCode(testResult.code) }}\r\n        </p>\r\n        @if (showsAcceptedCaveat(testResult)) {\r\n          <p class=\"mt-3 text-sm font-medium text-amber-800\">\r\n            {{ t(\"accepted-unconfirmed\") }}\r\n          </p>\r\n        }\r\n        @if (testResult.outcome === \"OutcomeUnknown\") {\r\n          <p class=\"mt-3 text-sm font-medium text-red-700\">\r\n            {{ t(\"outcome-unknown-warning\") }}\r\n          </p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      severity=\"secondary\"\r\n      variant=\"outlined\"\r\n      [label]=\"t('close')\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"close()\"\r\n    />\r\n    @if (timedOut()) {\r\n      <mt-button\r\n        [label]=\"t('test.retrieve')\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [disabled]=\"polling()\"\r\n        [loading]=\"polling() || facade.mutationLoading() === 'retrieve-test'\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"retrieve()\"\r\n      />\r\n    } @else if (!result()) {\r\n      <mt-button\r\n        [label]=\"t('test.send')\"\r\n        icon=\"communication.send-01\"\r\n        [disabled]=\"!canSubmit()\"\r\n        [loading]=\"facade.mutationLoading() === 'test'\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"submit()\"\r\n      />\r\n    }\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], propDecorators: { connectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionId", required: true }] }], connectionName: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionName", required: true }] }] } });
+const ACCEPTED_DELIVERY_UNCONFIRMED_CODE = 'email.accepted_delivery_unconfirmed';
+const TEST_REQUEST_CONFLICT_CODE = 'email.delivery_test_request_conflict';
+function isTestRequestConflict(error) {
+    const body = error instanceof HttpErrorResponse ? error.error : error;
+    return (typeof body === 'object' &&
+        body !== null &&
+        body.code === TEST_REQUEST_CONFLICT_CODE);
+}
+const POLL_DELAYS_MS = [1_000, 2_000, 4_000, 5_000, 5_000, 5_000];
+function isAmbiguousTimeout(error) {
+    return (error instanceof HttpErrorResponse &&
+        (error.status === 0 || error.status === 408 || error.status === 504));
+}
+
+function getApplicableProviderFields(provider, authenticationMode) {
+    if (!provider || !authenticationMode) {
+        return [];
+    }
+    return provider.fields.filter((field) => field.authenticationModes.length === 0 ||
+        field.authenticationModes.includes(authenticationMode));
+}
+function getApplicableProviderActions(provider, authenticationMode, authorizationModel) {
+    if (!provider || !authenticationMode) {
+        return [];
+    }
+    return (provider.actions ?? []).filter((action) => {
+        if (!action.isExecutable) {
+            return false;
+        }
+        if (action.authenticationModes.length > 0 &&
+            !action.authenticationModes.includes(authenticationMode)) {
+            return false;
+        }
+        return (!action.authorizationModels?.length ||
+            (!!authorizationModel &&
+                action.authorizationModels.includes(authorizationModel)));
+    });
+}
+function parseProviderCapabilities(value) {
+    return value
+        .split(',')
+        .map((item) => item.trim())
+        .filter(Boolean);
+}
+function providerFieldControlKey(index) {
+    return `providerField${index}`;
+}
+function credentialOperationControlKey(index) {
+    return `credentialOperation${index}`;
+}
+function credentialStorageControlKey(index) {
+    return `credentialStorage${index}`;
+}
+function credentialValueControlKey(index) {
+    return `credentialValue${index}`;
+}
+function credentialReferenceControlKey(index) {
+    return `credentialReference${index}`;
+}
+function buildConnectionRequest(value, provider, existingConcurrencyToken) {
+    const mode = requiredTrimmed(value.authenticationMode);
+    const publicConfiguration = {};
+    const credentials = [];
+    provider.fields.forEach((field, index) => {
+        if (field.authenticationModes.length > 0 &&
+            !field.authenticationModes.includes(mode)) {
+            return;
+        }
+        if (field.isSecret) {
+            const operation = value[credentialOperationControlKey(index)];
+            if (!operation || operation === 'omitted') {
+                return;
+            }
+            const storageKind = (value[credentialStorageControlKey(index)] ??
+                'protected-value');
+            credentials.push({
+                key: field.key,
+                operation,
+                storageKind,
+                value: operation === 'replace' && storageKind === 'protected-value'
+                    ? optionalTrimmed(value[credentialValueControlKey(index)])
+                    : null,
+                externalReference: operation === 'replace' && storageKind === 'external-reference'
+                    ? optionalTrimmed(value[credentialReferenceControlKey(index)])
+                    : null,
+            });
+            return;
+        }
+        const fieldValue = value[providerFieldControlKey(index)];
+        if (fieldValue === null || fieldValue === undefined || fieldValue === '') {
+            return;
+        }
+        publicConfiguration[field.key] =
+            typeof fieldValue === 'boolean' ? String(fieldValue) : String(fieldValue);
+    });
+    const request = {
+        name: requiredTrimmed(value.name),
+        providerKey: provider.key,
+        authenticationMode: mode,
+        senderAddress: requiredTrimmed(value.senderAddress),
+        senderDisplayName: optionalTrimmed(value.senderDisplayName),
+        publicConfiguration,
+        credentials,
+    };
+    return existingConcurrencyToken
+        ? { ...request, concurrencyToken: existingConcurrencyToken }
+        : request;
+}
+function requiredTrimmed(value) {
+    return String(value ?? '').trim();
+}
+function optionalTrimmed(value) {
+    const normalized = String(value ?? '').trim();
+    return normalized || null;
+}
+
+class EmailConnectionEditor {
+    editorConnectionId = input(null, ...(ngDevMode ? [{ debugName: "editorConnectionId" }] : /* istanbul ignore next */ []));
+    ref = inject(ModalRef);
+    transloco = inject(TranslocoService);
+    modal = inject(ModalService);
+    facade = inject(EmailDeliveryFacade);
+    connectionId = signal(null, ...(ngDevMode ? [{ debugName: "connectionId" }] : /* istanbul ignore next */ []));
+    existingDetails = signal(null, ...(ngDevMode ? [{ debugName: "existingDetails" }] : /* istanbul ignore next */ []));
+    editorLoading = signal(true, ...(ngDevMode ? [{ debugName: "editorLoading" }] : /* istanbul ignore next */ []));
+    formGeneration = signal(0, ...(ngDevMode ? [{ debugName: "formGeneration" }] : /* istanbul ignore next */ []));
+    formValue = signal(emptyEditorValue(), ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+    form = new FormControl(emptyEditorValue(), { nonNullable: true });
+    formStatus = toSignal(this.form.statusChanges, {
+        initialValue: this.form.status,
+    });
+    previousProviderKey = null;
+    previousAuthenticationMode = null;
+    structureSignature = '';
+    isEdit = computed(() => !!this.connectionId(), ...(ngDevMode ? [{ debugName: "isEdit" }] : /* istanbul ignore next */ []));
+    selectedProvider = computed(() => this.facade.providerByKey(this.formValue().providerKey), ...(ngDevMode ? [{ debugName: "selectedProvider" }] : /* istanbul ignore next */ []));
+    selectedMode = computed(() => this.formValue().authenticationMode, ...(ngDevMode ? [{ debugName: "selectedMode" }] : /* istanbul ignore next */ []));
+    applicableFields = computed(() => getApplicableProviderFields(this.selectedProvider(), this.selectedMode()), ...(ngDevMode ? [{ debugName: "applicableFields" }] : /* istanbul ignore next */ []));
+    canSave = computed(() => !this.editorLoading() &&
+        this.formStatus() === 'VALID' &&
+        !this.facade.mutationLoading(), ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+    configurationFields = computed(() => this.buildConfigurationFields(), ...(ngDevMode ? [{ debugName: "configurationFields" }] : /* istanbul ignore next */ []));
+    /**
+     * Empty whenever the selected mode authenticates without a stored secret —
+     * an anonymous QC-test SMTP endpoint, for instance. That is a valid provider
+     * descriptor, not a load failure.
+     */
+    credentialFields = computed(() => this.buildCredentialFields(), ...(ngDevMode ? [{ debugName: "credentialFields" }] : /* istanbul ignore next */ []));
+    /**
+     * A section header over an empty body reads as something that failed to
+     * load, so a section with no applicable fields is not rendered at all.
+     */
+    formConfig = computed(() => ({
+        layout: SECTION_MODE_LAYOUT,
+        sections: [
+            this.section('basics', this.buildBasicFields()),
+            this.section('configuration', this.configurationFields()),
+            this.section('credentials', this.credentialFields()),
+        ].filter((section) => section.fields.length > 0),
+    }), ...(ngDevMode ? [{ debugName: "formConfig" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+            this.handleFormValue(value);
+        });
+    }
+    ngOnInit() {
+        const id = this.editorConnectionId();
+        this.connectionId.set(id);
+        const catalog$ = this.facade.providers().length
+            ? of(undefined)
+            : this.facade.loadCatalog().pipe(map(() => undefined));
+        catalog$
+            .pipe(switchMap(() => (id ? this.facade.loadConnection(id) : of(null))), finalize(() => this.editorLoading.set(false)))
+            .subscribe({
+            next: (details) => {
+                this.existingDetails.set(details);
+                this.seedForm(details);
+            },
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    ngOnDestroy() {
+        this.clearSecretControls();
+    }
+    save() {
+        if (!this.canSave()) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        const provider = this.selectedProvider();
+        if (!provider)
+            return;
+        const id = this.connectionId();
+        const request = buildConnectionRequest(this.form.getRawValue(), provider, this.existingDetails()?.connection.concurrencyToken);
+        const operation = id
+            ? this.facade.updateConnection(id, request)
+            : this.facade.createConnection(request);
+        operation.pipe(finalize(() => this.clearSecretControls())).subscribe({
+            next: () => {
+                this.ref.close(true);
+            },
+            error: (error) => this.handleSaveError(error),
+        });
+    }
+    cancel() {
+        this.clearSecretControls();
+        this.ref.close(false);
+    }
+    seedForm(details) {
+        const provider = details
+            ? this.facade.providerByKey(details.connection.providerKey)
+            : (this.facade.providers()[0] ?? null);
+        const mode = details
+            ? details.connection.authenticationMode
+            : (provider?.authenticationModes[0]?.key ?? null);
+        const value = {
+            name: details?.connection.name ?? null,
+            providerKey: provider?.key ?? null,
+            authenticationMode: mode,
+            senderAddress: details?.connection.senderAddress ?? null,
+            senderDisplayName: details?.connection.senderDisplayName ?? null,
+        };
+        provider?.fields.forEach((field, index) => {
+            if (!isApplicable(field, mode))
+                return;
+            if (field.isSecret) {
+                const status = details?.credentials.find((credential) => credential.key === field.key);
+                value[credentialOperationControlKey(index)] = details
+                    ? 'omitted'
+                    : 'replace';
+                value[credentialStorageControlKey(index)] =
+                    status?.storageKind === 'ExternalReference'
+                        ? 'external-reference'
+                        : 'protected-value';
+                value[credentialValueControlKey(index)] = null;
+                value[credentialReferenceControlKey(index)] = null;
+                return;
+            }
+            const rawValue = details?.connection.publicConfiguration[field.key] ??
+                field.defaultValue;
+            value[providerFieldControlKey(index)] = toEditorFieldValue(field, rawValue);
+        });
+        this.previousProviderKey = provider?.key ?? null;
+        this.previousAuthenticationMode = mode;
+        this.formValue.set(value);
+        this.form.setValue(value, { emitEvent: false });
+        this.structureSignature = this.getStructureSignature(value, provider);
+        this.formGeneration.update((generation) => generation + 1);
+    }
+    handleFormValue(value) {
+        let provider = this.facade.providerByKey(value.providerKey);
+        const providerChanged = value.providerKey !== this.previousProviderKey;
+        let mode = value.authenticationMode;
+        if (provider &&
+            !provider.authenticationModes.some((item) => item.key === mode)) {
+            mode = provider.authenticationModes[0]?.key ?? null;
+        }
+        const modeChanged = mode !== this.previousAuthenticationMode;
+        if (providerChanged || modeChanged) {
+            const reset = this.resetProviderValues(value, provider, mode);
+            this.previousProviderKey = provider?.key ?? null;
+            this.previousAuthenticationMode = mode;
+            this.formValue.set(reset);
+            this.form.setValue(reset, { emitEvent: false });
+            this.structureSignature = this.getStructureSignature(reset, provider);
+            this.formGeneration.update((generation) => generation + 1);
+            return;
+        }
+        provider = this.facade.providerByKey(value.providerKey);
+        this.formValue.set(value);
+        const signature = this.getStructureSignature(value, provider);
+        if (signature !== this.structureSignature) {
+            this.structureSignature = signature;
+            this.formGeneration.update((generation) => generation + 1);
+        }
+    }
+    resetProviderValues(value, provider, mode) {
+        const reset = {
+            name: value.name,
+            providerKey: provider?.key ?? null,
+            authenticationMode: mode,
+            senderAddress: value.senderAddress,
+            senderDisplayName: value.senderDisplayName,
+        };
+        provider?.fields.forEach((field, index) => {
+            if (!isApplicable(field, mode))
+                return;
+            if (field.isSecret) {
+                reset[credentialOperationControlKey(index)] = 'replace';
+                reset[credentialStorageControlKey(index)] = 'protected-value';
+                reset[credentialValueControlKey(index)] = null;
+                reset[credentialReferenceControlKey(index)] = null;
+            }
+            else {
+                reset[providerFieldControlKey(index)] = toEditorFieldValue(field, field.defaultValue);
+            }
+        });
+        return reset;
+    }
+    /**
+     * Every section wears the same shell mt-client-form gives its sections — a
+     * bordered, flat, rounded-md card with a header strip — so the connection
+     * form reads like the runtime forms in the rest of the product.
+     */
+    section(key, fields) {
+        return {
+            key,
+            label: this.t(`editor.${key}`),
+            type: 'header',
+            columns: 12,
+            headerClass: SECTION_MODE_HEADER_CLASS,
+            bodyClass: SECTION_MODE_BODY_CLASS,
+            fields,
+        };
+    }
+    buildBasicFields() {
+        const provider = this.selectedProvider();
+        return [
+            new TextFieldConfig({
+                key: 'name',
+                label: this.t('connection.name'),
+                colSpan: 12,
+                validators: [
+                    ValidatorConfig.required(),
+                    ValidatorConfig.maxLength(150),
+                ],
+            }),
+            new SelectFieldConfig({
+                key: 'providerKey',
+                label: this.t('connection.provider'),
+                options: this.facade.providers().map((item) => ({
+                    label: item.displayName,
+                    value: item.key,
+                })),
+                optionLabel: 'label',
+                optionValue: 'value',
+                colSpan: 6,
+                validators: [ValidatorConfig.required()],
+            }),
+            new SelectFieldConfig({
+                key: 'authenticationMode',
+                label: this.t('connection.authentication-mode'),
+                options: provider?.authenticationModes.map((item) => ({
+                    label: item.displayName,
+                    value: item.key,
+                })) ?? [],
+                optionLabel: 'label',
+                optionValue: 'value',
+                colSpan: 6,
+                validators: [ValidatorConfig.required()],
+            }),
+            new TextFieldConfig({
+                key: 'senderAddress',
+                label: this.t('connection.sender-address'),
+                inputType: 'email',
+                colSpan: 6,
+                validators: [ValidatorConfig.required(), ValidatorConfig.email()],
+            }),
+            new TextFieldConfig({
+                key: 'senderDisplayName',
+                label: this.t('connection.sender-display-name'),
+                colSpan: 6,
+                validators: [ValidatorConfig.maxLength(200)],
+            }),
+        ];
+    }
+    buildConfigurationFields() {
+        const provider = this.selectedProvider();
+        if (!provider)
+            return [];
+        return provider.fields.flatMap((field, index) => {
+            if (field.isSecret || !isApplicable(field, this.selectedMode())) {
+                return [];
+            }
+            return [this.toProviderFieldConfig(field, index)];
+        });
+    }
+    buildCredentialFields() {
+        const provider = this.selectedProvider();
+        if (!provider)
+            return [];
+        return provider.fields.flatMap((field, index) => {
+            if (!field.isSecret || !isApplicable(field, this.selectedMode())) {
+                return [];
+            }
+            const operationKey = credentialOperationControlKey(index);
+            const storageKey = credentialStorageControlKey(index);
+            const operation = (this.formValue()[operationKey] ??
+                (this.isEdit() ? 'omitted' : 'replace'));
+            const storageKind = (this.formValue()[storageKey] ??
+                'protected-value');
+            const operationOptions = [
+                ...(this.isEdit()
+                    ? [{ label: this.t('credential.keep'), value: 'omitted' }]
+                    : []),
+                { label: this.t('credential.replace'), value: 'replace' },
+                ...(!field.required && this.isEdit()
+                    ? [{ label: this.t('credential.clear'), value: 'clear' }]
+                    : []),
+            ];
+            const fields = [
+                new SelectFieldConfig({
+                    key: operationKey,
+                    label: `${field.displayName} — ${this.t('credential.operation')}`,
+                    options: operationOptions,
+                    optionLabel: 'label',
+                    optionValue: 'value',
+                    colSpan: 6,
+                    validators: [ValidatorConfig.required()],
+                }),
+            ];
+            if (operation !== 'replace')
+                return fields;
+            fields.push(new RadioButtonFieldConfig({
+                key: storageKey,
+                label: this.t('credential.storage-choice'),
+                options: [
+                    {
+                        label: this.t('credential.protected-value'),
+                        value: 'protected-value',
+                    },
+                    {
+                        label: this.t('credential.external-reference'),
+                        value: 'external-reference',
+                    },
+                ],
+                optionLabel: 'label',
+                optionValue: 'value',
+                orientation: 'vertical',
+                colSpan: 6,
+                validators: [ValidatorConfig.required()],
+            }));
+            fields.push(storageKind === 'external-reference'
+                ? new TextFieldConfig({
+                    key: credentialReferenceControlKey(index),
+                    label: this.t('credential.external-reference'),
+                    hint: this.t('credential.external-reference-hint'),
+                    colSpan: 12,
+                    validators: [
+                        ValidatorConfig.required(),
+                        ValidatorConfig.maxLength(500),
+                        ValidatorConfig.pattern('^EmailSecrets:[A-Za-z0-9_.-]{1,100}$'),
+                    ],
+                })
+                : new TextFieldConfig({
+                    key: credentialValueControlKey(index),
+                    label: field.displayName,
+                    inputType: 'password',
+                    hint: this.t('credential.protected-value-hint'),
+                    colSpan: 12,
+                    validators: [
+                        ValidatorConfig.required(),
+                        ...(field.maximumLength
+                            ? [ValidatorConfig.maxLength(field.maximumLength)]
+                            : []),
+                    ],
+                }));
+            return fields;
+        });
+    }
+    toProviderFieldConfig(field, index) {
+        const config = {
+            key: providerFieldControlKey(index),
+            label: field.displayName,
+            colSpan: 6,
+            readonly: !!this.existingDetails()?.authorizationState &&
+                !field.editableAfterAuthorization,
+            validators: providerFieldValidators(field, this.t.bind(this)),
+        };
+        if (field.dataType === 'Boolean') {
+            return new ToggleFieldConfig(config);
+        }
+        if (field.dataType === 'Integer' || field.dataType === 'Port') {
+            return new NumberFieldConfig({
+                ...config,
+                min: field.dataType === 'Port' ? 1 : undefined,
+                max: field.dataType === 'Port' ? 65_535 : undefined,
+                useGrouping: false,
+            });
+        }
+        if (field.dataType === 'Choice') {
+            return new SelectFieldConfig({
+                ...config,
+                options: (field.allowedValues ?? []).map((value) => ({
+                    label: value,
+                    value,
+                })),
+                optionLabel: 'label',
+                optionValue: 'value',
+            });
+        }
+        return new TextFieldConfig({
+            ...config,
+            inputType: field.dataType === 'Email' ? 'email' : 'text',
+        });
+    }
+    getStructureSignature(value, provider) {
+        const credentials = provider?.fields.flatMap((field, index) => field.isSecret && isApplicable(field, value.authenticationMode)
+            ? [
+                `${value[credentialOperationControlKey(index)] ?? ''}:${value[credentialStorageControlKey(index)] ?? ''}`,
+            ]
+            : []);
+        return `${value.providerKey ?? ''}|${value.authenticationMode ?? ''}|${credentials?.join('|') ?? ''}`;
+    }
+    clearSecretControls() {
+        const provider = this.selectedProvider();
+        if (!provider)
+            return;
+        const value = { ...this.form.getRawValue() };
+        provider.fields.forEach((field, index) => {
+            if (!field.isSecret)
+                return;
+            value[credentialValueControlKey(index)] = null;
+            value[credentialReferenceControlKey(index)] = null;
+        });
+        this.formValue.set(value);
+        this.form.setValue(value, { emitEvent: false });
+        this.formGeneration.update((generation) => generation + 1);
+    }
+    handleSaveError(error) {
+        this.facade.showError(error);
+        const id = this.connectionId();
+        if (!(error instanceof HttpErrorResponse) || error.status !== 409 || !id) {
+            return;
+        }
+        this.editorLoading.set(true);
+        this.facade
+            .loadConnection(id)
+            .pipe(finalize(() => this.editorLoading.set(false)))
+            .subscribe({
+            next: (details) => {
+                this.existingDetails.set(details);
+                this.seedForm(details);
+            },
+            error: (loadError) => this.facade.showError(loadError),
+        });
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.${key}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailConnectionEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailConnectionEditor, isStandalone: true, selector: "mt-email-connection-editor", inputs: { editorConnectionId: { classPropertyName: "editorConnectionId", publicName: "editorConnectionId", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <div\r\n    [class]=\"\r\n      'flex min-h-0 flex-col gap-5 overflow-y-auto p-4 sm:p-5 ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    @if (editorLoading()) {\r\n      <div\r\n        class=\"flex flex-col gap-5\"\r\n        role=\"status\"\r\n        [attr.aria-label]=\"t('loading')\"\r\n      >\r\n        @for (section of [1, 2, 3]; track section) {\r\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\r\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\r\n              <p-skeleton\r\n                width=\"10rem\"\r\n                height=\"1.25rem\"\r\n                borderRadius=\"0.375rem\"\r\n              />\r\n            </div>\r\n            <div class=\"grid gap-4 p-4 sm:grid-cols-2\">\r\n              @for (field of [1, 2, 3, 4]; track field) {\r\n                <p-skeleton height=\"3.25rem\" borderRadius=\"0.375rem\" />\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      @if (selectedProvider(); as provider) {\r\n        @if (provider.warnings.length > 0) {\r\n          <section\r\n            class=\"rounded-md border border-amber-200 bg-amber-50 p-4\"\r\n            role=\"note\"\r\n            aria-labelledby=\"provider-warnings-heading\"\r\n          >\r\n            <h2\r\n              id=\"provider-warnings-heading\"\r\n              class=\"m-0 text-sm font-semibold text-amber-950\"\r\n            >\r\n              {{ t(\"provider-warnings\") }}\r\n            </h2>\r\n            <ul\r\n              class=\"mb-0 mt-2.5 list-disc space-y-2 ps-5 text-sm leading-relaxed text-amber-900\"\r\n            >\r\n              @for (warning of provider.warnings; track warning) {\r\n                <li class=\"ps-1\">{{ warning }}</li>\r\n              }\r\n            </ul>\r\n          </section>\r\n        }\r\n      }\r\n\r\n      @if (isEdit()) {\r\n        <div\r\n          class=\"rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-950\"\r\n          role=\"note\"\r\n        >\r\n          {{ t(\"editor.update-invalidates-proof\") }}\r\n        </div>\r\n      }\r\n\r\n      @for (generation of [formGeneration()]; track generation) {\r\n        <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\r\n      }\r\n\r\n      @if (applicableFields().length === 0) {\r\n        <div\r\n          class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-3 text-sm text-muted-color\"\r\n        >\r\n          {{ t(\"editor.select-provider-mode\") }}\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"!!facade.mutationLoading()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-01\"\r\n      [disabled]=\"!canSave()\"\r\n      [loading]=\"facade.mutationLoading() === (isEdit() ? 'update' : 'create')\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailConnectionEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-connection-editor', imports: [
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        SkeletonModule,
+                        DynamicForm,
+                        Button,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <div\r\n    [class]=\"\r\n      'flex min-h-0 flex-col gap-5 overflow-y-auto p-4 sm:p-5 ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    @if (editorLoading()) {\r\n      <div\r\n        class=\"flex flex-col gap-5\"\r\n        role=\"status\"\r\n        [attr.aria-label]=\"t('loading')\"\r\n      >\r\n        @for (section of [1, 2, 3]; track section) {\r\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\r\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\r\n              <p-skeleton\r\n                width=\"10rem\"\r\n                height=\"1.25rem\"\r\n                borderRadius=\"0.375rem\"\r\n              />\r\n            </div>\r\n            <div class=\"grid gap-4 p-4 sm:grid-cols-2\">\r\n              @for (field of [1, 2, 3, 4]; track field) {\r\n                <p-skeleton height=\"3.25rem\" borderRadius=\"0.375rem\" />\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      @if (selectedProvider(); as provider) {\r\n        @if (provider.warnings.length > 0) {\r\n          <section\r\n            class=\"rounded-md border border-amber-200 bg-amber-50 p-4\"\r\n            role=\"note\"\r\n            aria-labelledby=\"provider-warnings-heading\"\r\n          >\r\n            <h2\r\n              id=\"provider-warnings-heading\"\r\n              class=\"m-0 text-sm font-semibold text-amber-950\"\r\n            >\r\n              {{ t(\"provider-warnings\") }}\r\n            </h2>\r\n            <ul\r\n              class=\"mb-0 mt-2.5 list-disc space-y-2 ps-5 text-sm leading-relaxed text-amber-900\"\r\n            >\r\n              @for (warning of provider.warnings; track warning) {\r\n                <li class=\"ps-1\">{{ warning }}</li>\r\n              }\r\n            </ul>\r\n          </section>\r\n        }\r\n      }\r\n\r\n      @if (isEdit()) {\r\n        <div\r\n          class=\"rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-950\"\r\n          role=\"note\"\r\n        >\r\n          {{ t(\"editor.update-invalidates-proof\") }}\r\n        </div>\r\n      }\r\n\r\n      @for (generation of [formGeneration()]; track generation) {\r\n        <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\r\n      }\r\n\r\n      @if (applicableFields().length === 0) {\r\n        <div\r\n          class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-3 text-sm text-muted-color\"\r\n        >\r\n          {{ t(\"editor.select-provider-mode\") }}\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"!!facade.mutationLoading()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-01\"\r\n      [disabled]=\"!canSave()\"\r\n      [loading]=\"facade.mutationLoading() === (isEdit() ? 'update' : 'create')\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { editorConnectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorConnectionId", required: false }] }] } });
+// Mirrors the section-mode styling mt-client-form applies to its own sections.
+const SECTION_MODE_LAYOUT = {
+    sectionClass: 'flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0',
+};
+const SECTION_MODE_HEADER_CLASS = 'm-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color';
+const SECTION_MODE_BODY_CLASS = '@container grid grid-cols-12 gap-4 items-start p-4';
+function emptyEditorValue() {
+    return {
+        name: null,
+        providerKey: null,
+        authenticationMode: null,
+        senderAddress: null,
+        senderDisplayName: null,
+    };
+}
+function isApplicable(field, mode) {
+    return (!!mode &&
+        (field.authenticationModes.length === 0 ||
+            field.authenticationModes.includes(mode)));
+}
+function toEditorFieldValue(field, value) {
+    if (value === null || value === undefined || value === '')
+        return null;
+    if (field.dataType === 'Boolean')
+        return value.toLowerCase() === 'true';
+    if (field.dataType === 'Integer' || field.dataType === 'Port') {
+        const numberValue = Number(value);
+        return Number.isFinite(numberValue) ? numberValue : null;
+    }
+    return value;
+}
+function providerFieldValidators(field, translate) {
+    const validators = [];
+    if (field.required)
+        validators.push(ValidatorConfig.required());
+    if (field.maximumLength) {
+        validators.push(ValidatorConfig.maxLength(field.maximumLength));
+    }
+    if (field.dataType === 'Email')
+        validators.push(ValidatorConfig.email());
+    if (field.dataType === 'Text') {
+        validators.push(ValidatorConfig.pattern('^[^\\r\\n\\u0000]*$'));
+    }
+    if (field.dataType === 'Identifier') {
+        validators.push(ValidatorConfig.pattern('^[A-Za-z0-9._-]+$'));
+    }
+    if (field.dataType === 'Host') {
+        validators.push(ValidatorConfig.custom((value) => validHost(value), translate('validation.host')));
+    }
+    if (field.dataType === 'Url') {
+        validators.push(ValidatorConfig.custom((value) => validHttpsUrl(value), translate('validation.https-url')));
+    }
+    if (field.dataType === 'HeaderName') {
+        validators.push(ValidatorConfig.pattern('^X-[A-Za-z0-9-]+$'));
+    }
+    return validators;
+}
+function validHost(value) {
+    const host = String(value ?? '')
+        .trim()
+        .toLowerCase();
+    return (!!host &&
+        host !== 'localhost' &&
+        !/^\d{1,3}(?:\.\d{1,3}){3}$/.test(host) &&
+        /^(?=.{1,253}$)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9][a-z0-9-]{0,62}$/.test(host));
+}
+function validHttpsUrl(value) {
+    try {
+        const url = new URL(String(value ?? ''));
+        return (url.protocol === 'https:' &&
+            !url.username &&
+            !url.password &&
+            !url.hash &&
+            url.hostname.toLowerCase() !== 'localhost');
+    }
+    catch {
+        return false;
+    }
+}
+
+class EmailConnectionDetailsPage {
+    connectionId = input.required(...(ngDevMode ? [{ debugName: "connectionId" }] : /* istanbul ignore next */ []));
+    document = inject(DOCUMENT);
+    ref = inject(ModalRef);
+    confirmation = inject(ConfirmationService);
+    transloco = inject(TranslocoService);
+    modal = inject(ModalService);
+    facade = inject(EmailDeliveryFacade);
+    activeLanguage = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
+    actions = computed(() => {
+        const details = this.facade.selectedConnection();
+        if (!details || details.connection.id !== this.connectionId())
+            return [];
+        return getApplicableProviderActions(this.facade.providerByKey(details.connection.providerKey), details.connection.authenticationMode, details.connection.publicConfiguration['AuthorizationModel']);
+    }, ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    provider = computed(() => {
+        const details = this.facade.selectedConnection();
+        return details
+            ? this.facade.providerByKey(details.connection.providerKey)
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "provider" }] : /* istanbul ignore next */ []));
+    /**
+     * The provider descriptor's own warnings, shown here and not only while
+     * editing: a connection whose mode carries a standing caveat — the QC SMTP
+     * endpoint that runs without TLS or authentication, for instance — must
+     * still say so to whoever opens it later.
+     */
+    providerWarnings = computed(() => this.provider()?.warnings ?? [], ...(ngDevMode ? [{ debugName: "providerWarnings" }] : /* istanbul ignore next */ []));
+    /**
+     * The contract assigns each connection state one next step. Saying it in
+     * words means the chip is not the only place the operator can read what to
+     * do, which is also what keeps the state legible without relying on color.
+     */
+    stateGuidance = computed(() => {
+        this.activeLanguage();
+        const details = this.facade.selectedConnection();
+        if (!details)
+            return '';
+        return this.optionalT(`state-guidance.${toKebabCase$1(details.connection.state)}`);
+    }, ...(ngDevMode ? [{ debugName: "stateGuidance" }] : /* istanbul ignore next */ []));
+    /**
+     * The last validation code, so an invalid connection shows the reason rather
+     * than only a chip that says something went wrong.
+     */
+    lastValidationMessage = computed(() => {
+        this.activeLanguage();
+        const code = this.facade.selectedConnection()?.connection.lastValidationCode;
+        return code ? this.facade.describeCode(code) : '';
+    }, ...(ngDevMode ? [{ debugName: "lastValidationMessage" }] : /* istanbul ignore next */ []));
+    authenticationModeLabel = computed(() => {
+        const details = this.facade.selectedConnection();
+        if (!details)
+            return '';
+        return (this.provider()?.authenticationModes.find((mode) => mode.key === details.connection.authenticationMode)?.displayName ?? details.connection.authenticationMode);
+    }, ...(ngDevMode ? [{ debugName: "authenticationModeLabel" }] : /* istanbul ignore next */ []));
+    publicConfiguration = computed(() => {
+        this.activeLanguage();
+        const details = this.facade.selectedConnection();
+        if (!details)
+            return [];
+        const fields = this.provider()?.fields ?? [];
+        const fieldOrder = new Map(fields.map((field, index) => [field.key.toLowerCase(), index]));
+        return Object.entries(details.connection.publicConfiguration)
+            .filter(([, value]) => value !== '')
+            .sort(([left], [right]) => (fieldOrder.get(left.toLowerCase()) ?? Number.MAX_SAFE_INTEGER) -
+            (fieldOrder.get(right.toLowerCase()) ?? Number.MAX_SAFE_INTEGER))
+            .map(([key, value]) => {
+            const field = fields.find((candidate) => candidate.key.toLowerCase() === key.toLowerCase());
+            return {
+                key,
+                label: field?.displayName ?? humanizeIdentifier(key),
+                value: this.configurationValueLabel(value, field),
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "publicConfiguration" }] : /* istanbul ignore next */ []));
+    credentialItems = computed(() => {
+        this.activeLanguage();
+        const details = this.facade.selectedConnection();
+        if (!details)
+            return [];
+        const fields = this.provider()?.fields ?? [];
+        return details.credentials.map((credential) => ({
+            key: credential.key,
+            label: fields.find((field) => field.key.toLowerCase() === credential.key.toLowerCase())?.displayName ?? humanizeIdentifier(credential.key),
+            configured: credential.configured,
+            storageLabel: this.credentialStorageLabel(credential.storageKind),
+            lastRotatedAtUtc: credential.lastRotatedAtUtc,
+        }));
+    }, ...(ngDevMode ? [{ debugName: "credentialItems" }] : /* istanbul ignore next */ []));
+    actionMenuItems = computed(() => {
+        this.activeLanguage();
+        const details = this.facade.selectedConnection();
+        if (!details || !this.facade.managementAvailable())
+            return [];
+        const items = this.interactiveActions().map((action) => ({
+            id: action.key,
+            label: action.displayName,
+            icon: 'security.lock-unlocked-01',
+            command: () => this.authorize(action),
+        }));
+        if (this.hasAction('validate')) {
+            items.push({
+                id: 'validate',
+                label: this.t('validate'),
+                icon: 'general.check-circle',
+                command: () => this.validate(),
+            });
+        }
+        if (this.hasAction('test-send')) {
+            items.push({
+                id: 'test-send',
+                label: this.t('test-send'),
+                icon: 'communication.send-01',
+                command: () => this.test(),
+            });
+        }
+        if (details.connection.state === 'Ready' &&
+            !details.bindings.includes('notifications')) {
+            items.push({
+                id: 'bind',
+                label: this.t('use-for-notifications'),
+                icon: 'general.link-01',
+                command: () => this.bind(),
+            });
+        }
+        if (details.bindings.includes('notifications')) {
+            items.push({
+                id: 'unbind',
+                label: this.t('stop-using'),
+                icon: 'general.link-broken-01',
+                severity: 'warn',
+                command: () => this.unbind(),
+            });
+        }
+        if (details.authorizationState) {
+            items.push({
+                id: 'revoke',
+                label: this.t('revoke'),
+                icon: 'security.lock-01',
+                severity: 'warn',
+                command: () => this.revoke(),
+            });
+        }
+        if (details.bindings.length === 0) {
+            items.push({ id: 'destructive-separator', separator: true }, {
+                id: 'delete',
+                label: this.t('delete'),
+                icon: 'general.trash-01',
+                severity: 'danger',
+                command: () => this.delete(),
+            });
+        }
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "actionMenuItems" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.reload();
+    }
+    edit() {
+        const drawer = this.modal.openModal(EmailConnectionEditor, 'drawer', {
+            header: this.t('editor.edit-title'),
+            styleClass: EMAIL_DELIVERY_DRAWER_STYLE_CLASS,
+            position: 'end',
+            appendTo: 'page-content',
+            dismissableMask: true,
+            dismissible: true,
+            inputValues: { editorConnectionId: this.connectionId() },
+        });
+        drawer.onClose.pipe(take(1)).subscribe((saved) => {
+            if (saved)
+                this.reload();
+        });
+    }
+    validate() {
+        this.facade.validateConnection(this.connectionId()).subscribe({
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    test() {
+        const details = this.facade.selectedConnection();
+        if (!details)
+            return;
+        const dialog = this.modal.openModal(EmailControlledTestDialog, 'dialog', {
+            header: this.t('test.title'),
+            styleClass: '!w-[42rem] max-w-[96vw]',
+            dismissible: true,
+            inputValues: {
+                connectionId: details.connection.id,
+                connectionName: details.connection.name,
+            },
+        });
+        dialog.onClose.pipe(take(1)).subscribe(() => this.reload());
+    }
+    authorize(action) {
+        const kind = action.key === 'authorize' ? 'delegated' : 'admin-consent';
+        this.facade.startAuthorization(this.connectionId(), kind).subscribe({
+            next: (result) => this.document.location.assign(result.authorizationUrl),
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    revoke() {
+        const details = this.facade.selectedConnection();
+        if (!details)
+            return;
+        this.confirmation.confirm({
+            type: 'dialog',
+            header: this.t('revoke'),
+            message: this.t('confirm.revoke'),
+            accept: () => this.facade.revokeAuthorization(this.connectionId()).subscribe({
+                error: (error) => this.facade.showError(error),
+            }),
+        });
+    }
+    bind() {
+        this.facade.bindConnection(this.connectionId()).subscribe({
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    unbind() {
+        this.confirmation.confirm({
+            type: 'dialog',
+            header: this.t('stop-using'),
+            message: this.t('confirm.unbind'),
+            accept: () => this.facade.unbindConnection(this.connectionId()).subscribe({
+                error: (error) => this.facade.showError(error),
+            }),
+        });
+    }
+    delete() {
+        const details = this.facade.selectedConnection();
+        if (!details)
+            return;
+        this.confirmation.confirmDelete({
+            type: 'dialog',
+            message: this.t('confirm.delete'),
+            accept: () => this.facade
+                .deleteConnection(this.connectionId(), details.connection.concurrencyToken)
+                .subscribe({
+                next: () => this.ref.close(true),
+                error: (error) => this.facade.showError(error),
+            }),
+        });
+    }
+    hasAction(key) {
+        return this.actions().some((action) => action.key === key);
+    }
+    interactiveActions() {
+        return this.actions().filter((action) => action.isInteractive);
+    }
+    close() {
+        this.ref.close();
+    }
+    reload() {
+        this.facade.loadConnection(this.connectionId()).subscribe({
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.${key}`);
+    }
+    /** Empty rather than the raw key when a state has no guidance sentence. */
+    optionalT(key) {
+        const fullKey = `email-delivery.${key}`;
+        const translated = this.transloco.translate(fullKey);
+        return translated === fullKey ? '' : translated;
+    }
+    credentialStorageLabel(storageKind) {
+        switch (storageKind.replace(/[-_\s]/g, '').toLowerCase()) {
+            case 'externalreference':
+                return this.t('credential.external-reference');
+            case 'protectedvalue':
+                return this.t('credential.protected-value');
+            default:
+                return humanizeIdentifier(storageKind);
+        }
+    }
+    configurationValueLabel(value, field) {
+        if (value.toLowerCase() === 'true')
+            return this.t('yes');
+        if (value.toLowerCase() === 'false')
+            return this.t('no');
+        return field?.dataType === 'Choice' ? humanizeIdentifier(value) : value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailConnectionDetailsPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailConnectionDetailsPage, isStandalone: true, selector: "mt-email-connection-details", inputs: { connectionId: { classPropertyName: "connectionId", publicName: "connectionId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  @if (facade.detailsLoading()) {\r\n    <div\r\n      [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\"\r\n      role=\"status\"\r\n      [attr.aria-label]=\"t('loading')\"\r\n    >\r\n      <div class=\"grid w-full gap-5\">\r\n        <p-skeleton height=\"5rem\" borderRadius=\"0.375rem\" />\r\n        @for (section of [1, 2, 3]; track section) {\r\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\r\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\r\n              <p-skeleton\r\n                width=\"12rem\"\r\n                height=\"1.25rem\"\r\n                borderRadius=\"0.375rem\"\r\n              />\r\n            </div>\r\n            <div class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n              @for (tile of [1, 2, 3]; track tile) {\r\n                <p-skeleton height=\"4rem\" borderRadius=\"0.375rem\" />\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (facade.selectedConnection(); as details) {\r\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\r\n      <div class=\"grid w-full gap-5\">\r\n        <section\r\n          class=\"flex flex-col gap-3 rounded-md border border-surface-200 bg-surface-0 p-4 sm:flex-row sm:items-center sm:justify-between\"\r\n        >\r\n          <div class=\"min-w-0\">\r\n            <h2 class=\"m-0 truncate text-lg font-semibold text-color\">\r\n              {{ details.connection.name }}\r\n            </h2>\r\n            <p class=\"mb-0 mt-1 break-all text-sm text-muted-color\">\r\n              {{ details.connection.senderAddress }}\r\n            </p>\r\n            <!-- The next step in words, so the state is never carried by the\r\n                 chip's color alone. -->\r\n            @if (stateGuidance(); as guidance) {\r\n              <p class=\"mb-0 mt-2 text-sm text-color\">{{ guidance }}</p>\r\n            }\r\n            @if (lastValidationMessage(); as lastResult) {\r\n              <p class=\"mb-0 mt-1 text-sm text-muted-color\">\r\n                {{ t(\"last-result\") }}: {{ lastResult }}\r\n              </p>\r\n            }\r\n          </div>\r\n          <mt-email-delivery-status\r\n            class=\"shrink-0 self-start\"\r\n            kind=\"connection\"\r\n            [value]=\"details.connection.state\"\r\n          />\r\n        </section>\r\n\r\n        <!-- The descriptor's standing caveats for this provider and mode. The\r\n             editor shows them while configuring; they belong here too, because\r\n             whoever opens an existing connection is the one deciding whether\r\n             it may carry production notification email. -->\r\n        @if (providerWarnings().length > 0) {\r\n          <section\r\n            class=\"rounded-md border border-amber-200 bg-amber-50 p-4\"\r\n            role=\"note\"\r\n            aria-labelledby=\"connection-provider-warnings-heading\"\r\n          >\r\n            <h3\r\n              id=\"connection-provider-warnings-heading\"\r\n              class=\"m-0 text-sm font-semibold text-amber-950\"\r\n            >\r\n              {{ t(\"provider-warnings\") }}\r\n            </h3>\r\n            <ul\r\n              class=\"mb-0 mt-2.5 list-disc space-y-2 ps-5 text-sm leading-relaxed text-amber-900\"\r\n            >\r\n              @for (warning of providerWarnings(); track warning) {\r\n                <li class=\"ps-1\">{{ warning }}</li>\r\n              }\r\n            </ul>\r\n          </section>\r\n        }\r\n\r\n        <!-- Same section shape the connection form uses (mt-client-form section\r\n             mode): header strip on a bordered, flat, rounded-md container. -->\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"connection-overview\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.provider\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ provider()?.displayName || details.connection.providerKey }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.authentication-mode\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ authenticationModeLabel() }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"used-for-notifications\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{\r\n                  details.bindings.includes(\"notifications\")\r\n                    ? t(\"yes\")\r\n                    : t(\"no\")\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.last-validation\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{\r\n                  details.connection.lastValidatedAtUtc\r\n                    ? (details.connection.lastValidatedAtUtc | date: \"medium\")\r\n                    : \"\u2014\"\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"authorization-state\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ details.authorizationState || \"\u2014\" }}\r\n              </dd>\r\n            </div>\r\n            @if (details.connection.senderDisplayName) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"connection.sender-display-name\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                  {{ details.connection.senderDisplayName }}\r\n                </dd>\r\n              </div>\r\n            }\r\n          </dl>\r\n        </section>\r\n\r\n        @if (publicConfiguration().length > 0) {\r\n          <section\r\n            class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n          >\r\n            <h3\r\n              class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n            >\r\n              {{ t(\"provider-settings\") }}\r\n            </h3>\r\n            <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n              @for (entry of publicConfiguration(); track entry.key) {\r\n                <div\r\n                  class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n                >\r\n                  <dt class=\"text-xs text-muted-color\">{{ entry.label }}</dt>\r\n                  <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                    {{ entry.value }}\r\n                  </dd>\r\n                </div>\r\n              }\r\n            </dl>\r\n          </section>\r\n        }\r\n\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"credential-status\") }}\r\n          </h3>\r\n          <div class=\"grid gap-3 p-4\">\r\n            @for (credential of credentialItems(); track credential.key) {\r\n              <div\r\n                class=\"grid gap-3 rounded-md border border-surface-200 bg-surface-50 p-3 sm:grid-cols-3 sm:items-center\"\r\n              >\r\n                <div class=\"min-w-0\">\r\n                  <p class=\"m-0 break-words font-medium text-color\">\r\n                    {{ credential.label }}\r\n                  </p>\r\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\r\n                    {{ credential.key }}\r\n                  </p>\r\n                </div>\r\n                <div class=\"min-w-0\">\r\n                  <p class=\"m-0 text-sm font-medium text-color\">\r\n                    {{ credential.storageLabel }}\r\n                  </p>\r\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\r\n                    @if (credential.lastRotatedAtUtc) {\r\n                      {{ t(\"last-rotated\") }} \u00B7\r\n                      {{ credential.lastRotatedAtUtc | date: \"medium\" }}\r\n                    } @else {\r\n                      {{ t(\"last-rotated\") }} \u00B7 \u2014\r\n                    }\r\n                  </p>\r\n                </div>\r\n                <mt-email-delivery-status\r\n                  class=\"shrink-0 sm:justify-self-end\"\r\n                  kind=\"support\"\r\n                  [value]=\"\r\n                    credential.configured ? 'configured' : 'not-configured'\r\n                  \"\r\n                />\r\n              </div>\r\n            } @empty {\r\n              <p class=\"m-0 text-sm text-muted-color\">\r\n                {{ t(\"no-credentials\") }}\r\n              </p>\r\n            }\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button\r\n        [label]=\"t('close')\"\r\n        variant=\"outlined\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"close()\"\r\n      />\r\n      @if (actionMenuItems().length > 0) {\r\n        <mt-button\r\n          [label]=\"t('actions')\"\r\n          icon=\"general.dots-vertical\"\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          styleClass=\"w-full sm:w-auto\"\r\n          (onClick)=\"actionMenu.toggle($event)\"\r\n        />\r\n        <mt-menu\r\n          #actionMenu\r\n          [model]=\"actionMenuItems()\"\r\n          appendTo=\"body\"\r\n          [ariaLabel]=\"t('actions')\"\r\n        />\r\n      }\r\n      <mt-button\r\n        [label]=\"t('edit')\"\r\n        icon=\"general.edit-01\"\r\n        [disabled]=\"!facade.managementAvailable()\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"edit()\"\r\n      />\r\n    </div>\r\n  } @else {\r\n    <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\r\n      <mt-empty-state illustration=\"none\" [title]=\"t('connection-not-found')\" />\r\n    </div>\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button [label]=\"t('close')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n    </div>\r\n  }\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "component", type: Menu, selector: "mt-menu", inputs: ["model", "popup", "appendTo", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "activeItemId"], outputs: ["activeItemIdChange", "onShow", "onHide", "onBlur", "onFocus", "onItemSelect"] }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailConnectionDetailsPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-connection-details', imports: [
+                        DatePipe,
+                        TranslocoDirective,
+                        SkeletonModule,
+                        Button,
+                        EmptyState,
+                        Menu,
+                        EmailDeliveryStatus,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  @if (facade.detailsLoading()) {\r\n    <div\r\n      [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\"\r\n      role=\"status\"\r\n      [attr.aria-label]=\"t('loading')\"\r\n    >\r\n      <div class=\"grid w-full gap-5\">\r\n        <p-skeleton height=\"5rem\" borderRadius=\"0.375rem\" />\r\n        @for (section of [1, 2, 3]; track section) {\r\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\r\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\r\n              <p-skeleton\r\n                width=\"12rem\"\r\n                height=\"1.25rem\"\r\n                borderRadius=\"0.375rem\"\r\n              />\r\n            </div>\r\n            <div class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n              @for (tile of [1, 2, 3]; track tile) {\r\n                <p-skeleton height=\"4rem\" borderRadius=\"0.375rem\" />\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (facade.selectedConnection(); as details) {\r\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\r\n      <div class=\"grid w-full gap-5\">\r\n        <section\r\n          class=\"flex flex-col gap-3 rounded-md border border-surface-200 bg-surface-0 p-4 sm:flex-row sm:items-center sm:justify-between\"\r\n        >\r\n          <div class=\"min-w-0\">\r\n            <h2 class=\"m-0 truncate text-lg font-semibold text-color\">\r\n              {{ details.connection.name }}\r\n            </h2>\r\n            <p class=\"mb-0 mt-1 break-all text-sm text-muted-color\">\r\n              {{ details.connection.senderAddress }}\r\n            </p>\r\n            <!-- The next step in words, so the state is never carried by the\r\n                 chip's color alone. -->\r\n            @if (stateGuidance(); as guidance) {\r\n              <p class=\"mb-0 mt-2 text-sm text-color\">{{ guidance }}</p>\r\n            }\r\n            @if (lastValidationMessage(); as lastResult) {\r\n              <p class=\"mb-0 mt-1 text-sm text-muted-color\">\r\n                {{ t(\"last-result\") }}: {{ lastResult }}\r\n              </p>\r\n            }\r\n          </div>\r\n          <mt-email-delivery-status\r\n            class=\"shrink-0 self-start\"\r\n            kind=\"connection\"\r\n            [value]=\"details.connection.state\"\r\n          />\r\n        </section>\r\n\r\n        <!-- The descriptor's standing caveats for this provider and mode. The\r\n             editor shows them while configuring; they belong here too, because\r\n             whoever opens an existing connection is the one deciding whether\r\n             it may carry production notification email. -->\r\n        @if (providerWarnings().length > 0) {\r\n          <section\r\n            class=\"rounded-md border border-amber-200 bg-amber-50 p-4\"\r\n            role=\"note\"\r\n            aria-labelledby=\"connection-provider-warnings-heading\"\r\n          >\r\n            <h3\r\n              id=\"connection-provider-warnings-heading\"\r\n              class=\"m-0 text-sm font-semibold text-amber-950\"\r\n            >\r\n              {{ t(\"provider-warnings\") }}\r\n            </h3>\r\n            <ul\r\n              class=\"mb-0 mt-2.5 list-disc space-y-2 ps-5 text-sm leading-relaxed text-amber-900\"\r\n            >\r\n              @for (warning of providerWarnings(); track warning) {\r\n                <li class=\"ps-1\">{{ warning }}</li>\r\n              }\r\n            </ul>\r\n          </section>\r\n        }\r\n\r\n        <!-- Same section shape the connection form uses (mt-client-form section\r\n             mode): header strip on a bordered, flat, rounded-md container. -->\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"connection-overview\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.provider\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ provider()?.displayName || details.connection.providerKey }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.authentication-mode\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ authenticationModeLabel() }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"used-for-notifications\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{\r\n                  details.bindings.includes(\"notifications\")\r\n                    ? t(\"yes\")\r\n                    : t(\"no\")\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.last-validation\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{\r\n                  details.connection.lastValidatedAtUtc\r\n                    ? (details.connection.lastValidatedAtUtc | date: \"medium\")\r\n                    : \"\u2014\"\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"authorization-state\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ details.authorizationState || \"\u2014\" }}\r\n              </dd>\r\n            </div>\r\n            @if (details.connection.senderDisplayName) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"connection.sender-display-name\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                  {{ details.connection.senderDisplayName }}\r\n                </dd>\r\n              </div>\r\n            }\r\n          </dl>\r\n        </section>\r\n\r\n        @if (publicConfiguration().length > 0) {\r\n          <section\r\n            class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n          >\r\n            <h3\r\n              class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n            >\r\n              {{ t(\"provider-settings\") }}\r\n            </h3>\r\n            <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n              @for (entry of publicConfiguration(); track entry.key) {\r\n                <div\r\n                  class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n                >\r\n                  <dt class=\"text-xs text-muted-color\">{{ entry.label }}</dt>\r\n                  <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                    {{ entry.value }}\r\n                  </dd>\r\n                </div>\r\n              }\r\n            </dl>\r\n          </section>\r\n        }\r\n\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"credential-status\") }}\r\n          </h3>\r\n          <div class=\"grid gap-3 p-4\">\r\n            @for (credential of credentialItems(); track credential.key) {\r\n              <div\r\n                class=\"grid gap-3 rounded-md border border-surface-200 bg-surface-50 p-3 sm:grid-cols-3 sm:items-center\"\r\n              >\r\n                <div class=\"min-w-0\">\r\n                  <p class=\"m-0 break-words font-medium text-color\">\r\n                    {{ credential.label }}\r\n                  </p>\r\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\r\n                    {{ credential.key }}\r\n                  </p>\r\n                </div>\r\n                <div class=\"min-w-0\">\r\n                  <p class=\"m-0 text-sm font-medium text-color\">\r\n                    {{ credential.storageLabel }}\r\n                  </p>\r\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\r\n                    @if (credential.lastRotatedAtUtc) {\r\n                      {{ t(\"last-rotated\") }} \u00B7\r\n                      {{ credential.lastRotatedAtUtc | date: \"medium\" }}\r\n                    } @else {\r\n                      {{ t(\"last-rotated\") }} \u00B7 \u2014\r\n                    }\r\n                  </p>\r\n                </div>\r\n                <mt-email-delivery-status\r\n                  class=\"shrink-0 sm:justify-self-end\"\r\n                  kind=\"support\"\r\n                  [value]=\"\r\n                    credential.configured ? 'configured' : 'not-configured'\r\n                  \"\r\n                />\r\n              </div>\r\n            } @empty {\r\n              <p class=\"m-0 text-sm text-muted-color\">\r\n                {{ t(\"no-credentials\") }}\r\n              </p>\r\n            }\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button\r\n        [label]=\"t('close')\"\r\n        variant=\"outlined\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"close()\"\r\n      />\r\n      @if (actionMenuItems().length > 0) {\r\n        <mt-button\r\n          [label]=\"t('actions')\"\r\n          icon=\"general.dots-vertical\"\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          styleClass=\"w-full sm:w-auto\"\r\n          (onClick)=\"actionMenu.toggle($event)\"\r\n        />\r\n        <mt-menu\r\n          #actionMenu\r\n          [model]=\"actionMenuItems()\"\r\n          appendTo=\"body\"\r\n          [ariaLabel]=\"t('actions')\"\r\n        />\r\n      }\r\n      <mt-button\r\n        [label]=\"t('edit')\"\r\n        icon=\"general.edit-01\"\r\n        [disabled]=\"!facade.managementAvailable()\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"edit()\"\r\n      />\r\n    </div>\r\n  } @else {\r\n    <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\r\n      <mt-empty-state illustration=\"none\" [title]=\"t('connection-not-found')\" />\r\n    </div>\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button [label]=\"t('close')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n    </div>\r\n  }\r\n</ng-container>\r\n" }]
+        }], propDecorators: { connectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionId", required: true }] }] } });
+function toKebabCase$1(value) {
+    return value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+function humanizeIdentifier(value) {
+    return value
+        .replace(/[._-]+/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/\s+/g, ' ')
+        .trim()
+        .replace(/^./, (character) => character.toUpperCase())
+        .replace(/\bSmtp\b/g, 'SMTP')
+        .replace(/\bTls\b/g, 'TLS')
+        .replace(/\bOauth2?\b/gi, 'OAuth2')
+        .replace(/\bHttp\b/g, 'HTTP')
+        .replace(/\bApi\b/g, 'API');
+}
+
+class EmailDeliveryConnections {
+    transloco = inject(TranslocoService);
+    modal = inject(ModalService);
+    confirmationService = inject(ConfirmationService);
+    facade = inject(EmailDeliveryFacade);
+    activeLanguage = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
+    canConfigure = computed(() => this.facade.hasPermission(EMAIL_DELIVERY_PERMISSIONS.controlPanel), ...(ngDevMode ? [{ debugName: "canConfigure" }] : /* istanbul ignore next */ []));
+    /** One rule for both the caption action and the empty-state action. */
+    canCreate = computed(() => this.canConfigure() &&
+        this.facade.managementAvailable() &&
+        this.facade.providers().length > 0, ...(ngDevMode ? [{ debugName: "canCreate" }] : /* istanbul ignore next */ []));
+    rows = computed(() => this.facade.connections().map((connection) => ({
+        ...connection,
+        providerLabel: this.facade.providerByKey(connection.providerKey)?.displayName ??
+            connection.providerKey,
+        usedForNotifications: connection.bindings.includes('notifications'),
+    })), ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    columns = computed(() => {
+        this.activeLanguage();
+        return [
+            {
+                key: 'name',
+                label: this.t('connection.name'),
+                sortable: true,
+                filterConfig: { type: 'text' },
+            },
+            {
+                key: 'providerLabel',
+                label: this.t('connection.provider'),
+                width: '18rem',
+                filterConfig: {
+                    type: 'select',
+                    options: this.facade.providers().map((provider) => ({
+                        label: provider.displayName,
+                        value: provider.displayName,
+                    })),
+                },
+            },
+            {
+                key: 'senderAddress',
+                label: this.t('connection.sender'),
+                width: '18rem',
+                filterConfig: { type: 'text' },
+            },
+            {
+                key: 'state',
+                label: this.t('connection.state'),
+                type: 'status',
+                width: '15rem',
+                filterConfig: {
+                    type: 'select',
+                    options: connectionStates.map((state) => ({
+                        label: this.t(`status.connection.${toKebabCase(state)}`),
+                        value: state,
+                    })),
+                },
+                statusMap: getEmailDeliveryStatusMap('connection', this.transloco.translate.bind(this.transloco)),
+            },
+            {
+                key: 'usedForNotifications',
+                label: this.t('in-use'),
+                type: 'boolean',
+                width: '10rem',
+                readonly: true,
+                filterConfig: { type: 'boolean' },
+            },
+            {
+                key: 'lastValidatedAtUtc',
+                label: this.t('connection.last-validation'),
+                type: 'dateTime',
+                width: '15rem',
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    rowActions = computed(() => {
+        this.activeLanguage();
+        return [
+            {
+                icon: 'general.eye',
+                label: this.t('details'),
+                action: (row) => this.openDetails(row),
+            },
+            {
+                icon: 'general.edit-01',
+                label: this.t('edit'),
+                hidden: () => !this.canMutate(),
+                action: (row) => this.openEdit(row),
+            },
+            {
+                icon: 'general.check-circle',
+                label: this.t('validate'),
+                hidden: (row) => !this.canMutate() ||
+                    !this.hasAction(row, 'validate'),
+                loading: () => this.facade.mutationLoading() === 'validate',
+                action: (row) => this.validate(row),
+            },
+            {
+                icon: 'communication.send-01',
+                label: this.t('test-send'),
+                hidden: (row) => !this.canMutate() ||
+                    !this.hasAction(row, 'test-send'),
+                action: (row) => this.openTest(row),
+            },
+            {
+                icon: 'general.link-01',
+                label: this.t('bind'),
+                hidden: (row) => {
+                    const connection = row;
+                    return (!this.canMutate() ||
+                        connection.state !== 'Ready' ||
+                        connection.bindings.includes('notifications'));
+                },
+                action: (row) => this.bind(row),
+            },
+            {
+                icon: 'general.link-broken-01',
+                label: this.t('unbind'),
+                color: 'warn',
+                hidden: (row) => !this.canMutate() ||
+                    !row.bindings.includes('notifications'),
+                action: (row) => this.confirmUnbind(row),
+            },
+            {
+                icon: 'general.trash-01',
+                label: this.t('delete'),
+                color: 'danger',
+                hidden: (row) => !this.canMutate() ||
+                    row.bindings.length > 0,
+                action: (row) => this.confirmDelete(row),
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
+    createConnection() {
+        this.openEditor(null);
+    }
+    openDetails(connection) {
+        const drawer = this.modal.openModal(EmailConnectionDetailsPage, 'drawer', {
+            header: this.t('connection-details'),
+            styleClass: EMAIL_DELIVERY_DRAWER_STYLE_CLASS,
+            position: 'end',
+            appendTo: 'page-content',
+            dismissableMask: true,
+            dismissible: true,
+            inputValues: { connectionId: connection.id },
+        });
+        drawer.onClose.subscribe(() => {
+            this.facade.loadConnections().subscribe({
+                error: (error) => this.facade.showError(error),
+            });
+        });
+    }
+    openEdit(connection) {
+        this.openEditor(connection.id);
+    }
+    validate(connection) {
+        this.facade.validateConnection(connection.id).subscribe({
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    openTest(connection) {
+        this.modal.openModal(EmailControlledTestDialog, 'dialog', {
+            header: this.t('test.title'),
+            styleClass: '!w-[42rem] max-w-[96vw]',
+            dismissible: true,
+            inputValues: {
+                connectionId: connection.id,
+                connectionName: connection.name,
+            },
+        });
+    }
+    bind(connection) {
+        this.facade.bindConnection(connection.id).subscribe({
+            error: (error) => this.facade.showError(error),
+        });
+    }
+    confirmUnbind(connection) {
+        this.confirmationService.confirm({
+            type: 'dialog',
+            header: this.t('unbind'),
+            message: this.t('confirm.unbind'),
+            accept: () => this.facade.unbindConnection(connection.id).subscribe({
+                error: (error) => this.facade.showError(error),
+            }),
+        });
+    }
+    confirmDelete(connection) {
+        this.confirmationService.confirmDelete({
+            type: 'dialog',
+            message: this.t('confirm.delete'),
+            accept: () => this.facade
+                .deleteConnection(connection.id, connection.concurrencyToken)
+                .subscribe({ error: (error) => this.facade.showError(error) }),
+        });
+    }
+    canMutate() {
+        return this.canConfigure() && this.facade.managementAvailable();
+    }
+    openEditor(connectionId) {
+        const drawer = this.modal.openModal(EmailConnectionEditor, 'drawer', {
+            header: this.t(connectionId ? 'editor.edit-title' : 'editor.create-title'),
+            styleClass: EMAIL_DELIVERY_DRAWER_STYLE_CLASS,
+            position: 'end',
+            appendTo: 'page-content',
+            dismissableMask: true,
+            dismissible: true,
+            inputValues: { editorConnectionId: connectionId },
+        });
+        drawer.onClose.subscribe((saved) => {
+            if (!saved)
+                return;
+            this.facade.loadConnections().subscribe({
+                error: (error) => this.facade.showError(error),
+            });
+        });
+    }
+    hasAction(connection, actionKey) {
+        return getApplicableProviderActions(this.facade.providerByKey(connection.providerKey), connection.authenticationMode).some((action) => action.key === actionKey);
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.${key}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryConnections, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailDeliveryConnections, isStandalone: true, selector: "mt-email-delivery-connections", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-4\" aria-label=\"{{ t('connections-title') }}\">\r\n    @if (\r\n      !facade.statusLoading() &&\r\n      !facade.catalogLoading() &&\r\n      facade.providers().length === 0\r\n    ) {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('no-providers-title')\"\r\n        [description]=\"t('no-providers-description')\"\r\n      />\r\n    } @else {\r\n      <mt-table\r\n        [data]=\"rows()\"\r\n        [columns]=\"columns()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"\r\n          facade.statusLoading() ||\r\n          facade.connectionsLoading() ||\r\n          facade.catalogLoading()\r\n        \"\r\n        [generalSearch]=\"true\"\r\n        [showFilters]=\"true\"\r\n        [emptyTitle]=\"t('no-connections-title')\"\r\n        [emptyDescription]=\"t('no-connections-description')\"\r\n        [emptyActionLabel]=\"canCreate() ? t('create-connection') : undefined\"\r\n        emptyActionIcon=\"general.plus\"\r\n        filterMode=\"column\"\r\n        actionShape=\"popover\"\r\n        [clickableRows]=\"true\"\r\n        dataKey=\"id\"\r\n        storageKey=\"email-delivery-connections\"\r\n        (emptyAction)=\"createConnection()\"\r\n        (rowClick)=\"openDetails($event)\"\r\n      >\r\n        <ng-template #captionEnd>\r\n          @if (canCreate()) {\r\n            <mt-button\r\n              [label]=\"t('create-connection')\"\r\n              icon=\"general.plus\"\r\n              (onClick)=\"createConnection()\"\r\n            />\r\n          }\r\n        </ng-template>\r\n      </mt-table>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { 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", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { 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", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryConnections, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-delivery-connections', imports: [TranslocoDirective, Button, EmptyState, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-4\" aria-label=\"{{ t('connections-title') }}\">\r\n    @if (\r\n      !facade.statusLoading() &&\r\n      !facade.catalogLoading() &&\r\n      facade.providers().length === 0\r\n    ) {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('no-providers-title')\"\r\n        [description]=\"t('no-providers-description')\"\r\n      />\r\n    } @else {\r\n      <mt-table\r\n        [data]=\"rows()\"\r\n        [columns]=\"columns()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"\r\n          facade.statusLoading() ||\r\n          facade.connectionsLoading() ||\r\n          facade.catalogLoading()\r\n        \"\r\n        [generalSearch]=\"true\"\r\n        [showFilters]=\"true\"\r\n        [emptyTitle]=\"t('no-connections-title')\"\r\n        [emptyDescription]=\"t('no-connections-description')\"\r\n        [emptyActionLabel]=\"canCreate() ? t('create-connection') : undefined\"\r\n        emptyActionIcon=\"general.plus\"\r\n        filterMode=\"column\"\r\n        actionShape=\"popover\"\r\n        [clickableRows]=\"true\"\r\n        dataKey=\"id\"\r\n        storageKey=\"email-delivery-connections\"\r\n        (emptyAction)=\"createConnection()\"\r\n        (rowClick)=\"openDetails($event)\"\r\n      >\r\n        <ng-template #captionEnd>\r\n          @if (canCreate()) {\r\n            <mt-button\r\n              [label]=\"t('create-connection')\"\r\n              icon=\"general.plus\"\r\n              (onClick)=\"createConnection()\"\r\n            />\r\n          }\r\n        </ng-template>\r\n      </mt-table>\r\n    }\r\n  </section>\r\n</ng-container>\r\n" }]
+        }] });
+const connectionStates = [
+    'Draft',
+    'PendingAuthorization',
+    'PendingValidation',
+    'Ready',
+    'ReauthorizationRequired',
+    'ConditionalAccessRequired',
+    'Disabled',
+    'Invalid',
+];
+function toKebabCase(value) {
+    return value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+class EmailDeliveryShell {
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    transloco = inject(TranslocoService);
+    toast = inject(ToastService);
+    facade = inject(EmailDeliveryFacade);
+    activeLanguage = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
+    activeTab = signal('connections', ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    canView = computed(() => this.facade.hasPermission(EMAIL_DELIVERY_PERMISSIONS.controlPanel), ...(ngDevMode ? [{ debugName: "canView" }] : /* istanbul ignore next */ []));
+    tabs = computed(() => {
+        this.activeLanguage();
+        return [
+            { label: this.t('tabs.connections'), value: 'connections' },
+            { label: this.t('tabs.activity'), value: 'activity' },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    /**
+     * Same trail the sibling control-panel pages render, so Email Delivery reads
+     * as part of Product Settings rather than a standalone screen.
+     */
+    breadcrumbItems = computed(() => {
+        this.activeLanguage();
+        return [
+            {
+                label: '',
+                icon: 'general.home-line',
+                routerLink: '/control-panel/workspaces',
+            },
+            {
+                label: this.t('breadcrumb.product-settings'),
+                routerLink: PRODUCT_SETTINGS_ROUTE,
+            },
+            { label: this.t('title') },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "breadcrumbItems" }] : /* istanbul ignore next */ []));
+    /**
+     * Readiness moved out of a page-wide banner and onto a chip beside the title.
+     * The banner's explanation survives as the chip's tooltip, so the reason is
+     * still one hover away without a block of text above every tab.
+     */
+    readiness = computed(() => {
+        const status = this.facade.status();
+        if (!status)
+            return null;
+        if (!status.managementEnabled)
+            return 'unavailable';
+        return status.isReady ? 'ready' : 'needs-setup';
+    }, ...(ngDevMode ? [{ debugName: "readiness" }] : /* istanbul ignore next */ []));
+    readinessHint = computed(() => {
+        this.activeLanguage();
+        const status = this.facade.status();
+        return status ? this.facade.describeCode(status.code) : '';
+    }, ...(ngDevMode ? [{ debugName: "readinessHint" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((params) => {
+            this.activeTab.set(params.get('tab') === 'activity' ? 'activity' : 'connections');
+        });
+    }
+    ngOnInit() {
+        this.resolveAccess();
+    }
+    retryPermissions() {
+        if (this.facade.permissionsLoading())
+            return;
+        this.resolveAccess();
+    }
+    resolveAccess() {
+        this.facade.loadPermissions(true).subscribe({
+            next: () => {
+                if (!this.canView())
+                    return;
+                this.facade.initialize();
+                this.syncTabFromUrl();
+                this.handleAuthorizationCallback();
+            },
+            // The error is already on the facade; the template turns it into the
+            // retryable state rather than the access-denied one.
+            error: () => undefined,
+        });
+    }
+    onTabChange(value) {
+        if (value !== 'connections' && value !== 'activity')
+            return;
+        void this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: { tab: value === 'connections' ? null : value },
+            queryParamsHandling: 'merge',
+        });
+    }
+    goBack() {
+        void this.router.navigate([PRODUCT_SETTINGS_ROUTE]);
+    }
+    syncTabFromUrl() {
+        this.activeTab.set(this.route.snapshot.queryParamMap.get('tab') === 'activity'
+            ? 'activity'
+            : 'connections');
+    }
+    handleAuthorizationCallback() {
+        const query = this.route.snapshot.queryParamMap;
+        const authorization = query.get('authorization');
+        const code = query.get('code');
+        if (!authorization && !code)
+            return;
+        const message = this.facade.describeCode(code);
+        if (authorization === 'completed') {
+            this.toast.success(message);
+        }
+        else {
+            this.toast.error(message);
+        }
+        const pendingConnectionId = this.facade.takePendingAuthorizationConnection();
+        void this.router
+            .navigate([], {
+            relativeTo: this.route,
+            queryParams: { authorization: null, code: null },
+            queryParamsHandling: 'merge',
+            replaceUrl: true,
+        })
+            .then(() => {
+            if (!pendingConnectionId)
+                return;
+            this.facade.loadConnection(pendingConnectionId).subscribe({
+                next: () => this.facade.loadConnections().subscribe(),
+                error: (error) => this.facade.showError(error),
+            });
+        });
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.${key}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailDeliveryShell, isStandalone: true, selector: "mt-email-delivery-shell", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <mt-page\r\n    [title]=\"t('title')\"\r\n    avatarIcon=\"communication.mail-01\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-blue-100)',\r\n      '--p-avatar-color': 'var(--p-blue-700)',\r\n    }\"\r\n    [tabs]=\"canView() ? tabs() : []\"\r\n    [activeTab]=\"activeTab()\"\r\n    contentClass=\"min-h-0 max-[1025px]:p-4 max-[640px]:p-3\"\r\n    backButton\r\n    (backButtonClick)=\"goBack()\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n  >\r\n    <!-- Declared unconditionally: a content query cannot reach a template that\r\n         only exists inside a control-flow block, so the condition lives here. -->\r\n    <ng-template #titleEnd>\r\n      @if (canView() && readiness(); as state) {\r\n        <span class=\"shrink-0\" [mtTooltip]=\"readinessHint()\">\r\n          <mt-email-delivery-status kind=\"readiness\" [value]=\"state\" />\r\n        </span>\r\n      }\r\n    </ng-template>\r\n\r\n    @if (facade.permissionsLoading()) {\r\n      <div class=\"p-6 text-sm text-muted-color\" aria-live=\"polite\">\r\n        {{ t(\"access-checking\") }}\r\n      </div>\r\n    } @else if (canView()) {\r\n      <div\r\n        class=\"flex min-h-0 flex-col gap-4 [&_.mt-actions-column]:w-[5rem] [&_mt-card]:rounded-md [&_mt-table_:has(>.p-datatable)]:rounded-md\"\r\n      >\r\n        <mt-breadcrumb\r\n          [items]=\"breadcrumbItems()\"\r\n          styleClass=\"mx-1 flex justify-start\"\r\n        />\r\n\r\n        @if (activeTab() === \"activity\") {\r\n          <mt-email-delivery-activity />\r\n        } @else {\r\n          <mt-email-delivery-connections />\r\n        }\r\n      </div>\r\n    } @else if (facade.permissionsError()) {\r\n      <!-- A failed access read is not a denial; say so and offer the retry,\r\n           otherwise a transient 500 reads as \"you do not have access\". -->\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('access-error-title')\"\r\n        [description]=\"t('access-error-description')\"\r\n        [actionLabel]=\"t('access-retry')\"\r\n        actionIcon=\"arrow.refresh-cw-01\"\r\n        (actionClick)=\"retryPermissions()\"\r\n      />\r\n    } @else {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('access-denied-title')\"\r\n        [description]=\"t('access-denied-description')\"\r\n      />\r\n    }\r\n  </mt-page>\r\n</ng-container>\r\n", dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }, { kind: "component", type: EmailDeliveryConnections, selector: "mt-email-delivery-connections" }, { kind: "component", type: EmailDeliveryActivity, selector: "mt-email-delivery-activity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryShell, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-delivery-shell', imports: [
+                        Page,
+                        TranslocoDirective,
+                        Breadcrumb,
+                        EmptyState,
+                        Tooltip,
+                        EmailDeliveryStatus,
+                        EmailDeliveryConnections,
+                        EmailDeliveryActivity,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <mt-page\r\n    [title]=\"t('title')\"\r\n    avatarIcon=\"communication.mail-01\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-blue-100)',\r\n      '--p-avatar-color': 'var(--p-blue-700)',\r\n    }\"\r\n    [tabs]=\"canView() ? tabs() : []\"\r\n    [activeTab]=\"activeTab()\"\r\n    contentClass=\"min-h-0 max-[1025px]:p-4 max-[640px]:p-3\"\r\n    backButton\r\n    (backButtonClick)=\"goBack()\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n  >\r\n    <!-- Declared unconditionally: a content query cannot reach a template that\r\n         only exists inside a control-flow block, so the condition lives here. -->\r\n    <ng-template #titleEnd>\r\n      @if (canView() && readiness(); as state) {\r\n        <span class=\"shrink-0\" [mtTooltip]=\"readinessHint()\">\r\n          <mt-email-delivery-status kind=\"readiness\" [value]=\"state\" />\r\n        </span>\r\n      }\r\n    </ng-template>\r\n\r\n    @if (facade.permissionsLoading()) {\r\n      <div class=\"p-6 text-sm text-muted-color\" aria-live=\"polite\">\r\n        {{ t(\"access-checking\") }}\r\n      </div>\r\n    } @else if (canView()) {\r\n      <div\r\n        class=\"flex min-h-0 flex-col gap-4 [&_.mt-actions-column]:w-[5rem] [&_mt-card]:rounded-md [&_mt-table_:has(>.p-datatable)]:rounded-md\"\r\n      >\r\n        <mt-breadcrumb\r\n          [items]=\"breadcrumbItems()\"\r\n          styleClass=\"mx-1 flex justify-start\"\r\n        />\r\n\r\n        @if (activeTab() === \"activity\") {\r\n          <mt-email-delivery-activity />\r\n        } @else {\r\n          <mt-email-delivery-connections />\r\n        }\r\n      </div>\r\n    } @else if (facade.permissionsError()) {\r\n      <!-- A failed access read is not a denial; say so and offer the retry,\r\n           otherwise a transient 500 reads as \"you do not have access\". -->\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('access-error-title')\"\r\n        [description]=\"t('access-error-description')\"\r\n        [actionLabel]=\"t('access-retry')\"\r\n        actionIcon=\"arrow.refresh-cw-01\"\r\n        (actionClick)=\"retryPermissions()\"\r\n      />\r\n    } @else {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('access-denied-title')\"\r\n        [description]=\"t('access-denied-description')\"\r\n      />\r\n    }\r\n  </mt-page>\r\n</ng-container>\r\n" }]
+        }], ctorParameters: () => [] });
+const PRODUCT_SETTINGS_ROUTE = '/control-panel/product-settings';
+
+export { EmailDeliveryShell };
+//# sourceMappingURL=masterteam-system-settings-email-delivery-shell-Bjwtj5Ic.mjs.map