@masterteam/system-settings 0.0.14 → 0.0.16

package/fesm2022/{masterteam-system-settings-email-delivery-shell-DowMjl4L.mjs → masterteam-system-settings-email-delivery-shell-Co2SifYp.mjs}

@@ -1,31 +1,137 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, computed, input, ChangeDetectionStrategy, Component, DestroyRef } from '@angular/core';
+import { input, inject, computed, ChangeDetectionStrategy, Component, Injectable, signal, DestroyRef } from '@angular/core';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslocoService, TranslocoDirective } 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 { EntityStatus } from '@masterteam/components/entities';
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { mergeMap, of, throwError, catchError, map, switchMap, forkJoin, tap, finalize, take, timer } from 'rxjs';
-import { EMAIL_DELIVERY_OPTIONS, EMAIL_DELIVERY_ATTEMPT_STATUSES, EMAIL_DELIVERY_PERMISSIONS } from './masterteam-system-settings.mjs';
+import { EMAIL_DELIVERY_OPTIONS, isConnectionTestAttempt, EMAIL_DELIVERY_ATTEMPT_STATUSES, EMAIL_DELIVERY_PERMISSIONS } from './masterteam-system-settings.mjs';
 import { Icon } from '@masterteam/icons';
-import * as i1 from '@angular/forms';
-import { FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Button } from '@masterteam/components/button';
 import { ModalService } from '@masterteam/components/modal';
-import { SelectField } from '@masterteam/components/select-field';
 import { Table } from '@masterteam/components/table';
-import { EntityStatus } from '@masterteam/components/entities';
 import { DatePipe, DOCUMENT } from '@angular/common';
-import { Card } from '@masterteam/components/card';
 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 { 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';
+
+const STATUS_DEFINITIONS = {
+    // Page-level readiness, shown as a chip beside the page title instead of the
+    // banner that used to sit above every tab.
+    readiness: {
+        ready: status('#059669', 'readiness.ready'),
+        'needs-setup': status('#D97706', 'readiness.needs-setup'),
+        unavailable: status('#64748B', 'readiness.unavailable'),
+    },
+    connection: {
+        Draft: status('#64748B', 'connection.draft'),
+        PendingAuthorization: status('#D97706', 'connection.pending-authorization'),
+        PendingValidation: status('#0284C7', 'connection.pending-validation'),
+        Ready: status('#059669', 'connection.ready'),
+        ReauthorizationRequired: status('#EA580C', 'connection.reauthorization-required'),
+        ConditionalAccessRequired: status('#EA580C', 'connection.conditional-access-required'),
+        Disabled: status('#64748B', 'connection.disabled'),
+        Invalid: status('#DC2626', 'connection.invalid'),
+    },
+    attempt: {
+        Reserved: status('#64748B', 'attempt.reserved'),
+        ProviderInvocationStarted: status('#0284C7', 'attempt.provider-invocation-started'),
+        ProviderInvocationDefinitivelyNotAccepted: status('#DC2626', 'attempt.provider-not-accepted'),
+        ProviderResultReconciliation: status('#7C3AED', 'attempt.reconciling'),
+        ProviderResultPending: status('#0284C7', 'attempt.pending'),
+        Blocked: status('#DC2626', 'attempt.blocked'),
+        RetryScheduled: status('#D97706', 'attempt.retry-scheduled'),
+        Accepted: status('#059669', 'attempt.accepted'),
+        OutcomeUnknown: status('#EA580C', 'attempt.outcome-unknown'),
+        FailedPermanent: status('#DC2626', 'attempt.failed-permanent'),
+        DeadLettered: status('#BE123C', 'attempt.dead-lettered'),
+    },
+    support: {
+        active: status('#D97706', 'support.active'),
+        'repair-pending': status('#0284C7', 'support.repair-pending'),
+        repaired: status('#059669', 'support.repaired'),
+        'acknowledgement-pending': status('#0284C7', 'support.acknowledgement-pending'),
+        acknowledged: status('#64748B', 'support.acknowledged'),
+        Owned: status('#059669', 'support.owned'),
+        owned: status('#059669', 'support.owned'),
+        Missing: status('#D97706', 'support.missing'),
+        missing: status('#D97706', 'support.missing'),
+        Conflict: status('#DC2626', 'support.conflict'),
+        conflict: status('#DC2626', 'support.conflict'),
+        IdentityIncomplete: status('#EA580C', 'support.identity-incomplete'),
+        identityincomplete: status('#EA580C', 'support.identity-incomplete'),
+        'retryable-after-upgrade': status('#0284C7', 'support.retryable-after-upgrade'),
+        'repair-required': status('#EA580C', 'support.repair-required'),
+        'acknowledge-only': status('#64748B', 'support.acknowledge-only'),
+        configured: status('#059669', 'support.configured'),
+        'not-configured': status('#64748B', 'support.not-configured'),
+    },
+};
+class EmailDeliveryStatus {
+    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    kind = input('support', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+    transloco = inject(TranslocoService);
+    activeLanguage = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
+    statusData = computed(() => {
+        this.activeLanguage();
+        return {
+            name: '',
+            viewType: 'Status',
+            value: getEmailDeliveryStatusValue(this.kind(), this.value(), (key) => this.transloco.translate(key)),
+            configuration: { hideName: true },
+        };
+    }, ...(ngDevMode ? [{ debugName: "statusData" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EmailDeliveryStatus, isStandalone: true, selector: "mt-email-delivery-status", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex" }, ngImport: i0, template: `<mt-entity-status [data]="statusData()" />`, isInline: true, dependencies: [{ kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryStatus, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mt-email-delivery-status',
+                    imports: [EntityStatus],
+                    template: `<mt-entity-status [data]="statusData()" />`,
+                    host: { class: 'inline-flex' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }] } });
+function getEmailDeliveryStatusMap(kind, translate) {
+    return Object.fromEntries(Object.entries(STATUS_DEFINITIONS[kind]).map(([key, definition]) => [
+        key,
+        {
+            color: definition.color,
+            display: translate(`email-delivery.status.${definition.translationKey}`),
+        },
+    ]));
+}
+function getEmailDeliveryStatusValue(kind, value, translate) {
+    const definition = STATUS_DEFINITIONS[kind][value];
+    return {
+        key: value,
+        display: definition
+            ? translate(`email-delivery.status.${definition.translationKey}`)
+            : value,
+        color: definition?.color ?? '#64748B',
+    };
+}
+function status(color, translationKey) {
+    return { color, translationKey };
+}
 
 class EmailDeliveryApi {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -73,10 +179,19 @@ class EmailDeliveryHttpApi extends EmailDeliveryApi {
     }
     sendConnectionTest(id, request) {
         return this.http
-            .post(this.url(`connections/${encodeURIComponent(id)}/test`), request)
-            .pipe(mergeMap((response) => isEmailSendResult(response)
-            ? of(response)
-            : throwError(() => response)), catchError((error) => {
+            .post(this.url(`connections/${encodeURIComponent(id)}/test`), request, { observe: 'response' })
+            .pipe(mergeMap((response) => {
+            const body = response.body;
+            if (isEmailSendResult(body))
+                return of(body);
+            // 202 means the send was accepted without a result on this response.
+            // The caller must read the outcome back with the same testRequestId;
+            // posting again would deliver a second real email.
+            if (response.status === 202) {
+                return throwError(() => body ?? PENDING_CONTROLLED_TEST);
+            }
+            return throwError(() => body);
+        }), catchError((error) => {
             const body = error instanceof HttpErrorResponse ? error.error : error;
             return isEmailSendResult(body) ? of(body) : throwError(() => error);
         }));
@@ -158,6 +273,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
+/**
+ * Stand-in problem for a bare `202 Accepted` that carries no body of its own —
+ * it routes the dialog to retrieval by GUID, the same as the catalog problem
+ * the backend normally returns for an in-flight test.
+ */
+const PENDING_CONTROLLED_TEST = {
+    code: 'email.delivery_test_request_in_progress',
+    category: 'pending',
+    retryable: true,
+    action: 'poll_status',
+    readinessImpact: 'unchanged',
+    correlationId: '',
+    retryAfterSeconds: null,
+};
 function isEmailSendResult(value) {
     return (typeof value === 'object' &&
         value !== null &&
@@ -189,6 +318,7 @@ class EmailDeliveryFacade {
     transloco = inject(TranslocoService);
     toast = inject(ToastService);
     initialized = false;
+    attemptsLoaded = false;
     status = signal(null, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     providers = signal([], ...(ngDevMode ? [{ debugName: "providers" }] : /* istanbul ignore next */ []));
     errorCatalog = signal([], ...(ngDevMode ? [{ debugName: "errorCatalog" }] : /* istanbul ignore next */ []));
@@ -277,11 +407,18 @@ class EmailDeliveryFacade {
     sendConnectionTest(id, request) {
         this.mutationLoading.set('test');
         this.lastConnectionTestRequestId.set(request.testRequestId);
-        return this.api.sendConnectionTest(id, request).pipe(tap((result) => this.lastConnectionTest.set(result)), switchMap((result) => this.refreshConnection(id).pipe(map(() => result))), finalize(() => this.mutationLoading.set(null)));
+        return this.api.sendConnectionTest(id, request).pipe(tap((result) => {
+            this.lastConnectionTest.set(result);
+            this.refreshActivity();
+        }), switchMap((result) => this.refreshConnection(id).pipe(map(() => result))), finalize(() => this.mutationLoading.set(null)));
     }
     retrieveConnectionTest(connectionId, testRequestId) {
         this.mutationLoading.set('retrieve-test');
-        return this.api.getConnectionTest(connectionId, testRequestId).pipe(tap((stored) => this.lastConnectionTest.set(stored.result)), finalize(() => this.mutationLoading.set(null)));
+        return this.api.getConnectionTest(connectionId, testRequestId).pipe(tap((stored) => {
+            this.lastConnectionTest.set(stored.result);
+            if (stored.result)
+                this.refreshActivity();
+        }), finalize(() => this.mutationLoading.set(null)));
     }
     bindConnection(id, purpose = 'notifications') {
         this.mutationLoading.set('bind');
@@ -308,6 +445,7 @@ class EmailDeliveryFacade {
         if (reset)
             this.attemptStatusFilter.set(status);
         return this.api.getAttempts(status, cursor, 50).pipe(tap((page) => {
+            this.attemptsLoaded = true;
             this.attempts.set(reset ? page.items : mergeById(this.attempts(), page.items, 'id'));
             this.attemptsNextCursor.set(page.nextCursor);
         }), finalize(() => this.attemptsLoading.set(false)));
@@ -420,6 +558,17 @@ class EmailDeliveryFacade {
         sessionStorage.removeItem(PENDING_AUTHORIZATION_STORAGE_KEY);
         return id;
     }
+    /**
+     * A completed controlled test writes its own Activity row, so the loaded
+     * Activity list is stale the moment the test returns. Only refresh once
+     * Activity has been opened — before that its own load covers it, and the
+     * status filter in effect there is preserved.
+     */
+    refreshActivity() {
+        if (!this.attemptsLoaded)
+            return;
+        this.loadAttempts(true).subscribe({ error: () => undefined });
+    }
     refreshConnection(id) {
         return forkJoin({
             details: this.api.getConnection(id),
@@ -475,103 +624,6 @@ function mergeHostEvidence(current, incoming) {
     return Array.from(values.values());
 }
 
-const STATUS_DEFINITIONS = {
-    connection: {
-        Draft: status('#64748B', 'connection.draft'),
-        PendingAuthorization: status('#D97706', 'connection.pending-authorization'),
-        PendingValidation: status('#0284C7', 'connection.pending-validation'),
-        Ready: status('#059669', 'connection.ready'),
-        ReauthorizationRequired: status('#EA580C', 'connection.reauthorization-required'),
-        ConditionalAccessRequired: status('#EA580C', 'connection.conditional-access-required'),
-        Disabled: status('#64748B', 'connection.disabled'),
-        Invalid: status('#DC2626', 'connection.invalid'),
-    },
-    attempt: {
-        Reserved: status('#64748B', 'attempt.reserved'),
-        ProviderInvocationStarted: status('#0284C7', 'attempt.provider-invocation-started'),
-        ProviderInvocationDefinitivelyNotAccepted: status('#DC2626', 'attempt.provider-not-accepted'),
-        ProviderResultReconciliation: status('#7C3AED', 'attempt.reconciling'),
-        ProviderResultPending: status('#0284C7', 'attempt.pending'),
-        Blocked: status('#DC2626', 'attempt.blocked'),
-        RetryScheduled: status('#D97706', 'attempt.retry-scheduled'),
-        Accepted: status('#059669', 'attempt.accepted'),
-        OutcomeUnknown: status('#EA580C', 'attempt.outcome-unknown'),
-        FailedPermanent: status('#DC2626', 'attempt.failed-permanent'),
-        DeadLettered: status('#BE123C', 'attempt.dead-lettered'),
-    },
-    support: {
-        active: status('#D97706', 'support.active'),
-        'repair-pending': status('#0284C7', 'support.repair-pending'),
-        repaired: status('#059669', 'support.repaired'),
-        'acknowledgement-pending': status('#0284C7', 'support.acknowledgement-pending'),
-        acknowledged: status('#64748B', 'support.acknowledged'),
-        Owned: status('#059669', 'support.owned'),
-        owned: status('#059669', 'support.owned'),
-        Missing: status('#D97706', 'support.missing'),
-        missing: status('#D97706', 'support.missing'),
-        Conflict: status('#DC2626', 'support.conflict'),
-        conflict: status('#DC2626', 'support.conflict'),
-        IdentityIncomplete: status('#EA580C', 'support.identity-incomplete'),
-        identityincomplete: status('#EA580C', 'support.identity-incomplete'),
-        'retryable-after-upgrade': status('#0284C7', 'support.retryable-after-upgrade'),
-        'repair-required': status('#EA580C', 'support.repair-required'),
-        'acknowledge-only': status('#64748B', 'support.acknowledge-only'),
-        configured: status('#059669', 'support.configured'),
-        'not-configured': status('#64748B', 'support.not-configured'),
-    },
-};
-class EmailDeliveryStatus {
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    kind = input('support', ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
-    transloco = inject(TranslocoService);
-    activeLanguage = toSignal(this.transloco.langChanges$, {
-        initialValue: this.transloco.getActiveLang(),
-    });
-    statusData = computed(() => {
-        this.activeLanguage();
-        return {
-            name: '',
-            viewType: 'Status',
-            value: getEmailDeliveryStatusValue(this.kind(), this.value(), (key) => this.transloco.translate(key)),
-            configuration: { hideName: true },
-        };
-    }, ...(ngDevMode ? [{ debugName: "statusData" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryStatus, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: EmailDeliveryStatus, isStandalone: true, selector: "mt-email-delivery-status", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-flex" }, ngImport: i0, template: `<mt-entity-status [data]="statusData()" />`, isInline: true, dependencies: [{ kind: "component", type: EntityStatus, selector: "mt-entity-status", inputs: ["data", "name", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryStatus, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'mt-email-delivery-status',
-                    imports: [EntityStatus],
-                    template: `<mt-entity-status [data]="statusData()" />`,
-                    host: { class: 'inline-flex' },
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: false }] }] } });
-function getEmailDeliveryStatusMap(kind, translate) {
-    return Object.fromEntries(Object.entries(STATUS_DEFINITIONS[kind]).map(([key, definition]) => [
-        key,
-        {
-            color: definition.color,
-            display: translate(`email-delivery.status.${definition.translationKey}`),
-        },
-    ]));
-}
-function getEmailDeliveryStatusValue(kind, value, translate) {
-    const definition = STATUS_DEFINITIONS[kind][value];
-    return {
-        key: value,
-        display: definition
-            ? translate(`email-delivery.status.${definition.translationKey}`)
-            : value,
-        color: definition?.color ?? '#64748B',
-    };
-}
-function status(color, translationKey) {
-    return { color, translationKey };
-}
-
 class EmailOperatorReasonDialog {
     itemName = input.required(...(ngDevMode ? [{ debugName: "itemName" }] : /* istanbul ignore next */ []));
     consequence = input.required(...(ngDevMode ? [{ debugName: "consequence" }] : /* istanbul ignore next */ []));
@@ -605,7 +657,7 @@ class EmailOperatorReasonDialog {
                 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-lg 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      <mt-toggle-field\r\n        [formControl]=\"exceptionalOverride\"\r\n        [label]=\"t('exceptional-override')\"\r\n        [hint]=\"t('exceptional-override-hint')\"\r\n      />\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 });
+    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'\">\n  <form\n    [class]=\"'space-y-5 p-4 sm:p-5 ' + modal.contentClass\"\n    (ngSubmit)=\"confirm()\"\n  >\n    <div\n      class=\"rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-950\"\n      role=\"note\"\n    >\n      <p class=\"m-0 break-words font-semibold\">{{ itemName() }}</p>\n      <p class=\"mb-0 mt-1\">{{ consequence() }}</p>\n    </div>\n\n    <mt-textarea-field\n      [formControl]=\"reason\"\n      [label]=\"t('operator-reason')\"\n      [hint]=\"t('operator-reason-hint')\"\n      [required]=\"true\"\n      [maxLength]=\"500\"\n      rows=\"4\"\n    />\n\n    @if (showExceptionalOverride()) {\n      <div class=\"flex flex-col gap-1\">\n        <mt-toggle-field\n          [formControl]=\"exceptionalOverride\"\n          [label]=\"t('exceptional-override')\"\n        />\n        <!-- mt-toggle-field has no hint input, so the consequence of an\n             exceptional replay is rendered here instead of silently dropped. -->\n        <p class=\"m-0 text-xs text-muted-color\">\n          {{ t(\"exceptional-override-hint\") }}\n        </p>\n      </div>\n    }\n  </form>\n\n  <div [class]=\"modal.footerClass\">\n    <mt-button\n      type=\"button\"\n      [label]=\"t('cancel')\"\n      variant=\"outlined\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"cancel()\"\n    />\n    <mt-button\n      type=\"button\"\n      severity=\"warn\"\n      [label]=\"confirmLabel() || t('confirm-action')\"\n      [disabled]=\"!canConfirm()\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"confirm()\"\n    />\n  </div>\n</ng-container>\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,
@@ -615,7 +667,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         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-lg 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      <mt-toggle-field\r\n        [formControl]=\"exceptionalOverride\"\r\n        [label]=\"t('exceptional-override')\"\r\n        [hint]=\"t('exceptional-override-hint')\"\r\n      />\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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <form\n    [class]=\"'space-y-5 p-4 sm:p-5 ' + modal.contentClass\"\n    (ngSubmit)=\"confirm()\"\n  >\n    <div\n      class=\"rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-950\"\n      role=\"note\"\n    >\n      <p class=\"m-0 break-words font-semibold\">{{ itemName() }}</p>\n      <p class=\"mb-0 mt-1\">{{ consequence() }}</p>\n    </div>\n\n    <mt-textarea-field\n      [formControl]=\"reason\"\n      [label]=\"t('operator-reason')\"\n      [hint]=\"t('operator-reason-hint')\"\n      [required]=\"true\"\n      [maxLength]=\"500\"\n      rows=\"4\"\n    />\n\n    @if (showExceptionalOverride()) {\n      <div class=\"flex flex-col gap-1\">\n        <mt-toggle-field\n          [formControl]=\"exceptionalOverride\"\n          [label]=\"t('exceptional-override')\"\n        />\n        <!-- mt-toggle-field has no hint input, so the consequence of an\n             exceptional replay is rendered here instead of silently dropped. -->\n        <p class=\"m-0 text-xs text-muted-color\">\n          {{ t(\"exceptional-override-hint\") }}\n        </p>\n      </div>\n    }\n  </form>\n\n  <div [class]=\"modal.footerClass\">\n    <mt-button\n      type=\"button\"\n      [label]=\"t('cancel')\"\n      variant=\"outlined\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"cancel()\"\n    />\n    <mt-button\n      type=\"button\"\n      severity=\"warn\"\n      [label]=\"confirmLabel() || t('confirm-action')\"\n      [disabled]=\"!canConfirm()\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"confirm()\"\n    />\n  </div>\n</ng-container>\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 {
@@ -624,7 +676,17 @@ class EmailAttemptDetails {
     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',
@@ -676,52 +738,121 @@ class EmailAttemptDetails {
         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-lg 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        <mt-card class=\"block\">\r\n          <h3 class=\"mb-4 text-base font-semibold text-color\">\r\n            {{ t(\"delivery-summary\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 sm:grid-cols-2\">\r\n            <div class=\"rounded-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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          </dl>\r\n        </mt-card>\r\n\r\n        <mt-card class=\"block\">\r\n          <h3 class=\"mb-4 text-base font-semibold text-color\">\r\n            {{ t(\"technical-identifiers\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 sm:grid-cols-2\">\r\n            <div class=\"rounded-lg border border-surface-200 bg-surface-50 p-4\">\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            </div>\r\n            <div class=\"rounded-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\"\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-lg border border-surface-200 bg-surface-50 p-4\"\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        </mt-card>\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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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'\">\n  @if (attempt(); as item) {\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\n      <div class=\"grid w-full gap-5\">\n        <div\n          class=\"rounded-md border px-4 py-3 text-sm\"\n          [class.border-amber-200]=\"item.status === 'OutcomeUnknown'\"\n          [class.bg-amber-50]=\"item.status === 'OutcomeUnknown'\"\n          [class.border-blue-200]=\"item.status !== 'OutcomeUnknown'\"\n          [class.bg-blue-50]=\"item.status !== 'OutcomeUnknown'\"\n          role=\"status\"\n        >\n          @if (item.status === \"OutcomeUnknown\") {\n            {{ t(\"outcome-unknown-copy\") }}\n          } @else if (item.outcome === \"Accepted\") {\n            {{ t(\"accepted-copy\") }}\n          } @else {\n            {{ facade.describeCode(item.resultCode) }}\n          }\n        </div>\n\n        <!-- Same section shape the connection form uses (mt-client-form section\n             mode): header strip on a bordered, flat, rounded-md container. -->\n        <section\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n        >\n          <h3\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n          >\n            {{ t(\"delivery-summary\") }}\n          </h3>\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.operation\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                {{\n                  isConnectionTest()\n                    ? t(\"operation.connection-test\")\n                    : item.operationKind\n                }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.status\") }}\n              </dt>\n              <dd class=\"mb-0 mt-2\">\n                <mt-email-delivery-status\n                  kind=\"attempt\"\n                  [value]=\"item.status\"\n                />\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.outcome\") }}\n              </dt>\n              <dd class=\"mb-0 mt-2\">\n                @if (item.outcome) {\n                  <mt-email-delivery-status\n                    kind=\"attempt\"\n                    [value]=\"item.outcome\"\n                  />\n                } @else {\n                  <span class=\"font-medium text-color\">\u2014</span>\n                }\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.provider\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                {{ providerLabel(item.providerKey) }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.created\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\n                <time [attr.datetime]=\"item.createdAtUtc\">{{\n                  item.createdAtUtc | date: \"medium\"\n                }}</time>\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.count\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\n                {{ item.attemptCount }}\n              </dd>\n            </div>\n          </dl>\n        </section>\n\n        <section\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n        >\n          <h3\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n          >\n            {{ t(\"technical-identifiers\") }}\n          </h3>\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"recipient-fingerprint\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\n                {{ item.recipientFingerprint }}\n              </dd>\n              <p class=\"mt-2 text-xs text-muted-color\">\n                {{ t(\"recipient-fingerprint-hint\") }}\n              </p>\n            </div>\n            @if (item.testRequestId) {\n              <div\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\n              >\n                <dt class=\"text-xs text-muted-color\">\n                  {{ t(\"test-request-id\") }}\n                </dt>\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\n                  {{ item.testRequestId }}\n                </dd>\n              </div>\n            }\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">{{ t(\"attempt.id\") }}</dt>\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\n                {{ item.id }}\n              </dd>\n            </div>\n            @if (item.correlationId) {\n              <div\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\n              >\n                <dt class=\"text-xs text-muted-color\">\n                  {{ t(\"correlation-id\") }}\n                </dt>\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\n                  {{ item.correlationId }}\n                </dd>\n              </div>\n            }\n            @if (item.providerRequestId) {\n              <div\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\n              >\n                <dt class=\"text-xs text-muted-color\">\n                  {{ t(\"provider-request-id\") }}\n                </dt>\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\n                  {{ item.providerRequestId }}\n                </dd>\n              </div>\n            }\n          </dl>\n        </section>\n      </div>\n    </div>\n\n    <div [class]=\"modal.footerClass\">\n      <mt-button\n        [label]=\"t('close')\"\n        variant=\"outlined\"\n        styleClass=\"w-full sm:w-auto\"\n        (onClick)=\"close()\"\n      />\n      @if (canReplay()) {\n        <mt-button\n          severity=\"warn\"\n          icon=\"arrow.refresh-cw-01\"\n          [label]=\"t('replay-attempt')\"\n          [disabled]=\"!facade.managementAvailable()\"\n          [loading]=\"facade.mutationLoading() === 'replay-' + item.id\"\n          styleClass=\"w-full sm:w-auto\"\n          (onClick)=\"replay()\"\n        />\n      }\n    </div>\n  }\n</ng-container>\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, Card, 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-lg 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        <mt-card class=\"block\">\r\n          <h3 class=\"mb-4 text-base font-semibold text-color\">\r\n            {{ t(\"delivery-summary\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 sm:grid-cols-2\">\r\n            <div class=\"rounded-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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          </dl>\r\n        </mt-card>\r\n\r\n        <mt-card class=\"block\">\r\n          <h3 class=\"mb-4 text-base font-semibold text-color\">\r\n            {{ t(\"technical-identifiers\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 sm:grid-cols-2\">\r\n            <div class=\"rounded-lg border border-surface-200 bg-surface-50 p-4\">\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            </div>\r\n            <div class=\"rounded-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\"\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-lg border border-surface-200 bg-surface-50 p-4\"\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        </mt-card>\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" }]
+            args: [{ selector: 'mt-email-attempt-details', imports: [DatePipe, TranslocoDirective, Button, EmailDeliveryStatus], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  @if (attempt(); as item) {\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\n      <div class=\"grid w-full gap-5\">\n        <div\n          class=\"rounded-md border px-4 py-3 text-sm\"\n          [class.border-amber-200]=\"item.status === 'OutcomeUnknown'\"\n          [class.bg-amber-50]=\"item.status === 'OutcomeUnknown'\"\n          [class.border-blue-200]=\"item.status !== 'OutcomeUnknown'\"\n          [class.bg-blue-50]=\"item.status !== 'OutcomeUnknown'\"\n          role=\"status\"\n        >\n          @if (item.status === \"OutcomeUnknown\") {\n            {{ t(\"outcome-unknown-copy\") }}\n          } @else if (item.outcome === \"Accepted\") {\n            {{ t(\"accepted-copy\") }}\n          } @else {\n            {{ facade.describeCode(item.resultCode) }}\n          }\n        </div>\n\n        <!-- Same section shape the connection form uses (mt-client-form section\n             mode): header strip on a bordered, flat, rounded-md container. -->\n        <section\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n        >\n          <h3\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n          >\n            {{ t(\"delivery-summary\") }}\n          </h3>\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.operation\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                {{\n                  isConnectionTest()\n                    ? t(\"operation.connection-test\")\n                    : item.operationKind\n                }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.status\") }}\n              </dt>\n              <dd class=\"mb-0 mt-2\">\n                <mt-email-delivery-status\n                  kind=\"attempt\"\n                  [value]=\"item.status\"\n                />\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.outcome\") }}\n              </dt>\n              <dd class=\"mb-0 mt-2\">\n                @if (item.outcome) {\n                  <mt-email-delivery-status\n                    kind=\"attempt\"\n                    [value]=\"item.outcome\"\n                  />\n                } @else {\n                  <span class=\"font-medium text-color\">\u2014</span>\n                }\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.provider\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                {{ providerLabel(item.providerKey) }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.created\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\n                <time [attr.datetime]=\"item.createdAtUtc\">{{\n                  item.createdAtUtc | date: \"medium\"\n                }}</time>\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"attempt.count\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\n                {{ item.attemptCount }}\n              </dd>\n            </div>\n          </dl>\n        </section>\n\n        <section\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n        >\n          <h3\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n          >\n            {{ t(\"technical-identifiers\") }}\n          </h3>\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"recipient-fingerprint\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\n                {{ item.recipientFingerprint }}\n              </dd>\n              <p class=\"mt-2 text-xs text-muted-color\">\n                {{ t(\"recipient-fingerprint-hint\") }}\n              </p>\n            </div>\n            @if (item.testRequestId) {\n              <div\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\n              >\n                <dt class=\"text-xs text-muted-color\">\n                  {{ t(\"test-request-id\") }}\n                </dt>\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\n                  {{ item.testRequestId }}\n                </dd>\n              </div>\n            }\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">{{ t(\"attempt.id\") }}</dt>\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\n                {{ item.id }}\n              </dd>\n            </div>\n            @if (item.correlationId) {\n              <div\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\n              >\n                <dt class=\"text-xs text-muted-color\">\n                  {{ t(\"correlation-id\") }}\n                </dt>\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\n                  {{ item.correlationId }}\n                </dd>\n              </div>\n            }\n            @if (item.providerRequestId) {\n              <div\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\n              >\n                <dt class=\"text-xs text-muted-color\">\n                  {{ t(\"provider-request-id\") }}\n                </dt>\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\n                  {{ item.providerRequestId }}\n                </dd>\n              </div>\n            }\n          </dl>\n        </section>\n      </div>\n    </div>\n\n    <div [class]=\"modal.footerClass\">\n      <mt-button\n        [label]=\"t('close')\"\n        variant=\"outlined\"\n        styleClass=\"w-full sm:w-auto\"\n        (onClick)=\"close()\"\n      />\n      @if (canReplay()) {\n        <mt-button\n          severity=\"warn\"\n          icon=\"arrow.refresh-cw-01\"\n          [label]=\"t('replay-attempt')\"\n          [disabled]=\"!facade.managementAvailable()\"\n          [loading]=\"facade.mutationLoading() === 'replay-' + item.id\"\n          styleClass=\"w-full sm:w-auto\"\n          (onClick)=\"replay()\"\n        />\n      }\n    </div>\n  }\n</ng-container>\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);
-    status = new FormControl(null);
     activeLanguage = toSignal(this.transloco.langChanges$, {
         initialValue: this.transloco.getActiveLang(),
     });
-    statusOptions = computed(() => {
+    /**
+     * 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();
-        const statusMap = getEmailDeliveryStatusMap('attempt', this.transloco.translate.bind(this.transloco));
-        return [
-            { label: this.t('all-statuses'), value: null },
-            ...EMAIL_DELIVERY_ATTEMPT_STATUSES.map((value) => ({
-                label: statusMap[value]?.display ?? value,
-                value,
-            })),
-        ];
-    }, ...(ngDevMode ? [{ debugName: "statusOptions" }] : /* istanbul ignore next */ []));
+        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',
-                statusMap: getEmailDeliveryStatusMap('attempt', this.transloco.translate.bind(this.transloco)),
+                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: 'providerKey', label: this.t('attempt.provider') },
-            { key: 'recipientFingerprint', label: this.t('recipient-fingerprint') },
             {
                 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',
             },
-            { key: 'attemptCount', label: this.t('attempt.count'), type: 'number' },
         ];
     }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
     actions = computed(() => {
@@ -737,7 +868,18 @@ class EmailDeliveryAttempts {
     ngOnInit() {
         this.load(true);
     }
-    applyFilter() {
+    /**
+     * 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() {
@@ -746,7 +888,7 @@ class EmailDeliveryAttempts {
     openDetails(attempt) {
         const ref = this.modal.openModal(EmailAttemptDetails, 'drawer', {
             header: this.t('attempt-details'),
-            styleClass: '!absolute !shadow-none !w-full !max-w-full',
+            styleClass: EMAIL_DELIVERY_DRAWER_STYLE_CLASS,
             position: 'end',
             appendTo: 'page-content',
             dismissableMask: true,
@@ -758,28 +900,62 @@ class EmailDeliveryAttempts {
                 this.load(true);
         });
     }
-    load(reset) {
-        this.facade.loadAttempts(reset, this.status.getRawValue()).subscribe({
+    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-labelledby=\"attempts-heading\">\r\n    <div>\r\n      <h2 id=\"attempts-heading\" class=\"text-lg font-semibold text-color\">\r\n        {{ t(\"activity-title\") }}\r\n      </h2>\r\n      <p class=\"mt-1 text-sm text-muted-color\">\r\n        {{ t(\"activity-description\") }}\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-3 sm:flex-row sm:items-end\">\r\n      <mt-select-field\r\n        class=\"w-full sm:w-72\"\r\n        [formControl]=\"status\"\r\n        [label]=\"t('attempt.status-filter')\"\r\n        [options]=\"statusOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n      <mt-button\r\n        severity=\"secondary\"\r\n        variant=\"outlined\"\r\n        [label]=\"t('apply-filter')\"\r\n        (onClick)=\"applyFilter()\"\r\n      />\r\n    </div>\r\n\r\n    @if (!facade.attemptsLoading() && facade.attempts().length === 0) {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('no-attempts-title')\"\r\n        [description]=\"t('no-attempts-description')\"\r\n      />\r\n    } @else {\r\n      <mt-table\r\n        [data]=\"facade.attempts()\"\r\n        [columns]=\"columns()\"\r\n        [rowActions]=\"actions()\"\r\n        [loading]=\"facade.attemptsLoading()\"\r\n        [generalSearch]=\"true\"\r\n        dataKey=\"id\"\r\n        actionShape=\"popover\"\r\n        [clickableRows]=\"true\"\r\n        (rowClick)=\"openDetails($event)\"\r\n      />\r\n    }\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: "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: 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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { 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 });
+    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'\">\n  <section class=\"space-y-4\" aria-label=\"{{ t('activity-title') }}\">\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"columns()\"\n      [rowActions]=\"actions()\"\n      [filters]=\"tableFilters()\"\n      [loading]=\"facade.attemptsLoading()\"\n      [generalSearch]=\"true\"\n      [showFilters]=\"true\"\n      [emptyTitle]=\"t('no-attempts-title')\"\n      [emptyDescription]=\"t('no-attempts-description')\"\n      filterMode=\"column\"\n      dataKey=\"id\"\n      actionShape=\"popover\"\n      [clickableRows]=\"true\"\n      storageKey=\"email-delivery-attempts\"\n      (filtersChange)=\"onFiltersChange($event)\"\n      (rowClick)=\"openDetails($event)\"\n    >\n      <ng-template #captionEnd>\n        <mt-button\n          severity=\"secondary\"\n          variant=\"outlined\"\n          icon=\"arrow.refresh-cw-01\"\n          [label]=\"t('refresh')\"\n          [loading]=\"facade.attemptsLoading()\"\n          (onClick)=\"refresh()\"\n        />\n      </ng-template>\n    </mt-table>\n\n    @if (facade.attemptsNextCursor()) {\n      <div class=\"flex justify-center\">\n        <mt-button\n          severity=\"secondary\"\n          variant=\"outlined\"\n          [label]=\"t('load-more')\"\n          [loading]=\"facade.attemptsLoading()\"\n          (onClick)=\"loadMore()\"\n        />\n      </div>\n    }\n  </section>\n</ng-container>\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: [
-                        ReactiveFormsModule,
-                        TranslocoDirective,
-                        Button,
-                        EmptyState,
-                        SelectField,
-                        Table,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-4\" aria-labelledby=\"attempts-heading\">\r\n    <div>\r\n      <h2 id=\"attempts-heading\" class=\"text-lg font-semibold text-color\">\r\n        {{ t(\"activity-title\") }}\r\n      </h2>\r\n      <p class=\"mt-1 text-sm text-muted-color\">\r\n        {{ t(\"activity-description\") }}\r\n      </p>\r\n    </div>\r\n\r\n    <div class=\"flex flex-col gap-3 sm:flex-row sm:items-end\">\r\n      <mt-select-field\r\n        class=\"w-full sm:w-72\"\r\n        [formControl]=\"status\"\r\n        [label]=\"t('attempt.status-filter')\"\r\n        [options]=\"statusOptions()\"\r\n        optionLabel=\"label\"\r\n        optionValue=\"value\"\r\n      />\r\n      <mt-button\r\n        severity=\"secondary\"\r\n        variant=\"outlined\"\r\n        [label]=\"t('apply-filter')\"\r\n        (onClick)=\"applyFilter()\"\r\n      />\r\n    </div>\r\n\r\n    @if (!facade.attemptsLoading() && facade.attempts().length === 0) {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('no-attempts-title')\"\r\n        [description]=\"t('no-attempts-description')\"\r\n      />\r\n    } @else {\r\n      <mt-table\r\n        [data]=\"facade.attempts()\"\r\n        [columns]=\"columns()\"\r\n        [rowActions]=\"actions()\"\r\n        [loading]=\"facade.attemptsLoading()\"\r\n        [generalSearch]=\"true\"\r\n        dataKey=\"id\"\r\n        actionShape=\"popover\"\r\n        [clickableRows]=\"true\"\r\n        (rowClick)=\"openDetails($event)\"\r\n      />\r\n    }\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" }]
+            args: [{ selector: 'mt-email-delivery-attempts', imports: [TranslocoDirective, Button, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <section class=\"space-y-4\" aria-label=\"{{ t('activity-title') }}\">\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"columns()\"\n      [rowActions]=\"actions()\"\n      [filters]=\"tableFilters()\"\n      [loading]=\"facade.attemptsLoading()\"\n      [generalSearch]=\"true\"\n      [showFilters]=\"true\"\n      [emptyTitle]=\"t('no-attempts-title')\"\n      [emptyDescription]=\"t('no-attempts-description')\"\n      filterMode=\"column\"\n      dataKey=\"id\"\n      actionShape=\"popover\"\n      [clickableRows]=\"true\"\n      storageKey=\"email-delivery-attempts\"\n      (filtersChange)=\"onFiltersChange($event)\"\n      (rowClick)=\"openDetails($event)\"\n    >\n      <ng-template #captionEnd>\n        <mt-button\n          severity=\"secondary\"\n          variant=\"outlined\"\n          icon=\"arrow.refresh-cw-01\"\n          [label]=\"t('refresh')\"\n          [loading]=\"facade.attemptsLoading()\"\n          (onClick)=\"refresh()\"\n        />\n      </ng-template>\n    </mt-table>\n\n    @if (facade.attemptsNextCursor()) {\n      <div class=\"flex justify-center\">\n        <mt-button\n          severity=\"secondary\"\n          variant=\"outlined\"\n          [label]=\"t('load-more')\"\n          [loading]=\"facade.attemptsLoading()\"\n          (onClick)=\"loadMore()\"\n        />\n      </div>\n    }\n  </section>\n</ng-container>\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);
@@ -801,30 +977,37 @@ class EmailDeliveryHostEvidence {
         this.activeLanguage();
         const statusMap = getEmailDeliveryStatusMap('support', this.transloco.translate.bind(this.transloco));
         return [
-            { key: 'evidenceKindLabel', label: this.t('evidence-kind') },
+            {
+                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: '20rem',
+                width: '15rem',
                 shrink: true,
             },
         ];
@@ -933,11 +1116,11 @@ class EmailDeliveryHostEvidence {
         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\r\n    class=\"space-y-4 rounded-xl border border-surface-200 bg-surface-0 p-4 shadow-xs sm:p-5\"\r\n    aria-labelledby=\"host-evidence-heading\"\r\n  >\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-lg 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    @if (!facade.hostEvidenceLoading() && facade.hostEvidence().length === 0) {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('no-evidence-title')\"\r\n        [description]=\"t('no-evidence-description')\"\r\n      />\r\n    } @else {\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        filterMode=\"column\"\r\n        actionShape=\"popover\"\r\n        dataKey=\"evidenceRowId\"\r\n        storageKey=\"email-delivery-host-evidence\"\r\n      />\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: 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 });
+    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'\">\n  <section class=\"space-y-3\" aria-labelledby=\"host-evidence-heading\">\n    <div\n      class=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\"\n    >\n      <div>\n        <h3 id=\"host-evidence-heading\" class=\"font-semibold text-color\">\n          {{ t(\"host-evidence-title\") }}\n        </h3>\n        <p class=\"mt-1 text-sm text-muted-color\">\n          {{ t(\"host-evidence-description\") }}\n        </p>\n      </div>\n      <mt-button\n        severity=\"secondary\"\n        variant=\"outlined\"\n        icon=\"arrow.refresh-cw-01\"\n        [label]=\"t('rebuild-evidence-index')\"\n        [disabled]=\"!facade.managementAvailable()\"\n        [loading]=\"facade.mutationLoading() === 'rebuild-evidence'\"\n        (onClick)=\"confirmRebuild()\"\n      />\n    </div>\n\n    @if (facade.hostEvidenceScanBudgetExhausted()) {\n      <div\n        class=\"rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-950\"\n        role=\"status\"\n      >\n        {{ t(\"scan-budget-exhausted\") }}\n      </div>\n    }\n\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"columns()\"\n      [rowActions]=\"actions()\"\n      [loading]=\"facade.hostEvidenceLoading()\"\n      [generalSearch]=\"true\"\n      [showFilters]=\"true\"\n      [emptyTitle]=\"t('no-evidence-title')\"\n      [emptyDescription]=\"t('no-evidence-description')\"\n      filterMode=\"column\"\n      actionShape=\"popover\"\n      dataKey=\"evidenceRowId\"\n      storageKey=\"email-delivery-host-evidence\"\n    />\n\n    @if (facade.hostEvidenceNextCursor()) {\n      <div class=\"flex justify-center\">\n        <mt-button\n          severity=\"secondary\"\n          variant=\"outlined\"\n          [label]=\"t('load-more')\"\n          [loading]=\"facade.hostEvidenceLoading()\"\n          (onClick)=\"loadMore()\"\n        />\n      </div>\n    }\n  </section>\n</ng-container>\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, EmptyState, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section\r\n    class=\"space-y-4 rounded-xl border border-surface-200 bg-surface-0 p-4 shadow-xs sm:p-5\"\r\n    aria-labelledby=\"host-evidence-heading\"\r\n  >\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-lg 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    @if (!facade.hostEvidenceLoading() && facade.hostEvidence().length === 0) {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('no-evidence-title')\"\r\n        [description]=\"t('no-evidence-description')\"\r\n      />\r\n    } @else {\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        filterMode=\"column\"\r\n        actionShape=\"popover\"\r\n        dataKey=\"evidenceRowId\"\r\n        storageKey=\"email-delivery-host-evidence\"\r\n      />\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" }]
+            args: [{ selector: 'mt-email-delivery-host-evidence', imports: [TranslocoDirective, Button, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <section class=\"space-y-3\" aria-labelledby=\"host-evidence-heading\">\n    <div\n      class=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\"\n    >\n      <div>\n        <h3 id=\"host-evidence-heading\" class=\"font-semibold text-color\">\n          {{ t(\"host-evidence-title\") }}\n        </h3>\n        <p class=\"mt-1 text-sm text-muted-color\">\n          {{ t(\"host-evidence-description\") }}\n        </p>\n      </div>\n      <mt-button\n        severity=\"secondary\"\n        variant=\"outlined\"\n        icon=\"arrow.refresh-cw-01\"\n        [label]=\"t('rebuild-evidence-index')\"\n        [disabled]=\"!facade.managementAvailable()\"\n        [loading]=\"facade.mutationLoading() === 'rebuild-evidence'\"\n        (onClick)=\"confirmRebuild()\"\n      />\n    </div>\n\n    @if (facade.hostEvidenceScanBudgetExhausted()) {\n      <div\n        class=\"rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-950\"\n        role=\"status\"\n      >\n        {{ t(\"scan-budget-exhausted\") }}\n      </div>\n    }\n\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"columns()\"\n      [rowActions]=\"actions()\"\n      [loading]=\"facade.hostEvidenceLoading()\"\n      [generalSearch]=\"true\"\n      [showFilters]=\"true\"\n      [emptyTitle]=\"t('no-evidence-title')\"\n      [emptyDescription]=\"t('no-evidence-description')\"\n      filterMode=\"column\"\n      actionShape=\"popover\"\n      dataKey=\"evidenceRowId\"\n      storageKey=\"email-delivery-host-evidence\"\n    />\n\n    @if (facade.hostEvidenceNextCursor()) {\n      <div class=\"flex justify-center\">\n        <mt-button\n          severity=\"secondary\"\n          variant=\"outlined\"\n          [label]=\"t('load-more')\"\n          [loading]=\"facade.hostEvidenceLoading()\"\n          (onClick)=\"loadMore()\"\n        />\n      </div>\n    }\n  </section>\n</ng-container>\n" }]
         }] });
 function identifierEntity$1(value) {
     return {
@@ -980,13 +1163,14 @@ class EmailDeliveryQuarantine {
                 key: 'attemptIdentity',
                 label: this.t('attempt.id'),
                 type: 'entity',
-                width: '19rem',
+                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') },
@@ -994,6 +1178,7 @@ class EmailDeliveryQuarantine {
                 key: 'quarantinedAtUtc',
                 label: this.t('detected'),
                 type: 'dateTime',
+                width: '10rem',
             },
         ];
     }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -1056,11 +1241,11 @@ class EmailDeliveryQuarantine {
         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\r\n    class=\"space-y-4 rounded-xl border border-surface-200 bg-surface-0 p-4 shadow-xs sm:p-5\"\r\n    aria-labelledby=\"quarantine-heading\"\r\n  >\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    @if (!facade.quarantineLoading() && facade.quarantine().length === 0) {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('no-quarantine-title')\"\r\n        [description]=\"t('no-quarantine-description')\"\r\n      />\r\n    } @else {\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        filterMode=\"column\"\r\n        actionShape=\"popover\"\r\n        dataKey=\"itemId\"\r\n        storageKey=\"email-delivery-quarantine\"\r\n      />\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: 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 });
+    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'\">\n  <section class=\"space-y-3\" aria-labelledby=\"quarantine-heading\">\n    <div>\n      <h3 id=\"quarantine-heading\" class=\"font-semibold text-color\">\n        {{ t(\"quarantine-title\") }}\n      </h3>\n      <p class=\"mt-1 text-sm text-muted-color\">\n        {{ t(\"quarantine-description\") }}\n      </p>\n    </div>\n\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"columns()\"\n      [rowActions]=\"actions()\"\n      [loading]=\"facade.quarantineLoading()\"\n      [generalSearch]=\"true\"\n      [showFilters]=\"true\"\n      [emptyTitle]=\"t('no-quarantine-title')\"\n      [emptyDescription]=\"t('no-quarantine-description')\"\n      filterMode=\"column\"\n      actionShape=\"popover\"\n      dataKey=\"itemId\"\n      storageKey=\"email-delivery-quarantine\"\n    />\n\n    @if (facade.quarantineNextCursor()) {\n      <div class=\"flex justify-center\">\n        <mt-button\n          severity=\"secondary\"\n          variant=\"outlined\"\n          [label]=\"t('load-more')\"\n          [loading]=\"facade.quarantineLoading()\"\n          (onClick)=\"loadMore()\"\n        />\n      </div>\n    }\n  </section>\n</ng-container>\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, EmptyState, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section\r\n    class=\"space-y-4 rounded-xl border border-surface-200 bg-surface-0 p-4 shadow-xs sm:p-5\"\r\n    aria-labelledby=\"quarantine-heading\"\r\n  >\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    @if (!facade.quarantineLoading() && facade.quarantine().length === 0) {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('no-quarantine-title')\"\r\n        [description]=\"t('no-quarantine-description')\"\r\n      />\r\n    } @else {\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        filterMode=\"column\"\r\n        actionShape=\"popover\"\r\n        dataKey=\"itemId\"\r\n        storageKey=\"email-delivery-quarantine\"\r\n      />\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" }]
+            args: [{ selector: 'mt-email-delivery-quarantine', imports: [TranslocoDirective, Button, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <section class=\"space-y-3\" aria-labelledby=\"quarantine-heading\">\n    <div>\n      <h3 id=\"quarantine-heading\" class=\"font-semibold text-color\">\n        {{ t(\"quarantine-title\") }}\n      </h3>\n      <p class=\"mt-1 text-sm text-muted-color\">\n        {{ t(\"quarantine-description\") }}\n      </p>\n    </div>\n\n    <mt-table\n      [data]=\"rows()\"\n      [columns]=\"columns()\"\n      [rowActions]=\"actions()\"\n      [loading]=\"facade.quarantineLoading()\"\n      [generalSearch]=\"true\"\n      [showFilters]=\"true\"\n      [emptyTitle]=\"t('no-quarantine-title')\"\n      [emptyDescription]=\"t('no-quarantine-description')\"\n      filterMode=\"column\"\n      actionShape=\"popover\"\n      dataKey=\"itemId\"\n      storageKey=\"email-delivery-quarantine\"\n    />\n\n    @if (facade.quarantineNextCursor()) {\n      <div class=\"flex justify-center\">\n        <mt-button\n          severity=\"secondary\"\n          variant=\"outlined\"\n          [label]=\"t('load-more')\"\n          [loading]=\"facade.quarantineLoading()\"\n          (onClick)=\"loadMore()\"\n        />\n      </div>\n    }\n  </section>\n</ng-container>\n" }]
         }] });
 function identifierEntity(value) {
     return {
@@ -1077,7 +1262,7 @@ class EmailDeliveryActivity {
         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-6\">\r\n    <mt-email-delivery-attempts class=\"block min-w-0\" />\r\n\r\n    <details\r\n      class=\"group overflow-hidden rounded-xl border border-surface-200 bg-surface-0\"\r\n      (toggle)=\"onAdvancedToggle($event)\"\r\n    >\r\n      <summary\r\n        class=\"cursor-pointer list-none p-5 font-semibold text-color focus-visible:outline-2 focus-visible:outline-offset-2\"\r\n      >\r\n        <span class=\"flex items-center justify-between gap-3\">\r\n          <span>\r\n            {{ t(\"advanced-support\") }}\r\n            <span class=\"mt-1 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=\"text-base transition-transform group-open:rotate-180\"\r\n          />\r\n        </span>\r\n      </summary>\r\n      @if (advancedExpanded()) {\r\n        <div\r\n          class=\"grid gap-6 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 });
+    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'\">\n  <div class=\"grid gap-5\">\n    <mt-email-delivery-attempts class=\"block min-w-0\" />\n\n    <!-- Operator recovery tools. Kept collapsed and visually quieter than the\n         Activity table above it: they are for incident work, not daily use. -->\n    <details\n      class=\"group overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n      (toggle)=\"onAdvancedToggle($event)\"\n    >\n      <summary\n        class=\"flex cursor-pointer list-none items-center gap-3 p-4 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      >\n        <span\n          class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-surface-100 text-muted-color\"\n        >\n          <mt-icon icon=\"general.tool-02\" aria-hidden=\"true\" />\n        </span>\n        <span class=\"min-w-0 flex-1\">\n          <span class=\"block font-semibold text-color\">\n            {{ t(\"advanced-support\") }}\n          </span>\n          <span class=\"mt-0.5 block text-sm font-normal text-muted-color\">\n            {{ t(\"advanced-support-description\") }}\n          </span>\n        </span>\n        <mt-icon\n          icon=\"arrow.chevron-down\"\n          aria-hidden=\"true\"\n          class=\"shrink-0 text-base text-muted-color transition-transform group-open:rotate-180\"\n        />\n      </summary>\n      @if (advancedExpanded()) {\n        <div\n          class=\"grid gap-4 border-t border-surface-200 bg-surface-50/60 p-4 sm:p-5\"\n        >\n          <mt-email-delivery-quarantine class=\"block min-w-0\" />\n          <mt-email-delivery-host-evidence class=\"block min-w-0\" />\n        </div>\n      }\n    </details>\n  </div>\n</ng-container>\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,
@@ -1087,7 +1272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         EmailDeliveryAttempts,
                         EmailDeliveryQuarantine,
                         EmailDeliveryHostEvidence,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <div class=\"grid gap-6\">\r\n    <mt-email-delivery-attempts class=\"block min-w-0\" />\r\n\r\n    <details\r\n      class=\"group overflow-hidden rounded-xl border border-surface-200 bg-surface-0\"\r\n      (toggle)=\"onAdvancedToggle($event)\"\r\n    >\r\n      <summary\r\n        class=\"cursor-pointer list-none p-5 font-semibold text-color focus-visible:outline-2 focus-visible:outline-offset-2\"\r\n      >\r\n        <span class=\"flex items-center justify-between gap-3\">\r\n          <span>\r\n            {{ t(\"advanced-support\") }}\r\n            <span class=\"mt-1 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=\"text-base transition-transform group-open:rotate-180\"\r\n          />\r\n        </span>\r\n      </summary>\r\n      @if (advancedExpanded()) {\r\n        <div\r\n          class=\"grid gap-6 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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <div class=\"grid gap-5\">\n    <mt-email-delivery-attempts class=\"block min-w-0\" />\n\n    <!-- Operator recovery tools. Kept collapsed and visually quieter than the\n         Activity table above it: they are for incident work, not daily use. -->\n    <details\n      class=\"group overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n      (toggle)=\"onAdvancedToggle($event)\"\n    >\n      <summary\n        class=\"flex cursor-pointer list-none items-center gap-3 p-4 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      >\n        <span\n          class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-surface-100 text-muted-color\"\n        >\n          <mt-icon icon=\"general.tool-02\" aria-hidden=\"true\" />\n        </span>\n        <span class=\"min-w-0 flex-1\">\n          <span class=\"block font-semibold text-color\">\n            {{ t(\"advanced-support\") }}\n          </span>\n          <span class=\"mt-0.5 block text-sm font-normal text-muted-color\">\n            {{ t(\"advanced-support-description\") }}\n          </span>\n        </span>\n        <mt-icon\n          icon=\"arrow.chevron-down\"\n          aria-hidden=\"true\"\n          class=\"shrink-0 text-base text-muted-color transition-transform group-open:rotate-180\"\n        />\n      </summary>\n      @if (advancedExpanded()) {\n        <div\n          class=\"grid gap-4 border-t border-surface-200 bg-surface-50/60 p-4 sm:p-5\"\n        >\n          <mt-email-delivery-quarantine class=\"block min-w-0\" />\n          <mt-email-delivery-host-evidence class=\"block min-w-0\" />\n        </div>\n      }\n    </details>\n  </div>\n</ng-container>\n" }]
         }] });
 
 class EmailControlledTestDialog {
@@ -1106,7 +1291,7 @@ class EmailControlledTestDialog {
     form = new FormControl({
         recipients: null,
         subject: 'Pplus email delivery test',
-        body: 'This is a controlled Pplus email delivery test.',
+        body: 'This is a controlled test.',
         isHtml: false,
     }, { nonNullable: true });
     formStatus = toSignal(this.form.statusChanges, {
@@ -1160,6 +1345,15 @@ class EmailControlledTestDialog {
             },
         ],
     }), ...(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();
@@ -1249,7 +1443,7 @@ class EmailControlledTestDialog {
         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-lg 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    @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-lg 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-lg 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 (testResult.outcome === \"Accepted\") {\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 });
+    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'\">\n  <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\n    <div\n      class=\"mb-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950\"\n      role=\"note\"\n    >\n      <strong>{{ t(\"test.real-email-warning-title\") }}</strong>\n      {{ t(\"test.real-email-warning\") }}\n    </div>\n\n    @if (!result()) {\n      <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\n    }\n\n    @if (timedOut()) {\n      <div\n        class=\"mt-4 rounded-md border border-orange-200 bg-orange-50 px-4 py-3\"\n        role=\"alert\"\n      >\n        <p class=\"font-semibold text-orange-950\">\n          {{ t(\"test.timeout-title\") }}\n        </p>\n        <p class=\"mt-1 text-sm text-orange-900\">\n          {{ t(\"test.timeout-description\") }}\n        </p>\n      </div>\n    }\n\n    @if (result(); as testResult) {\n      <div\n        class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-4\"\n        aria-live=\"polite\"\n      >\n        <mt-email-delivery-status kind=\"attempt\" [value]=\"testResult.outcome\" />\n        <p class=\"mt-1 text-sm text-muted-color\">\n          {{ facade.describeCode(testResult.code) }}\n        </p>\n        @if (showsAcceptedCaveat(testResult)) {\n          <p class=\"mt-3 text-sm font-medium text-amber-800\">\n            {{ t(\"accepted-unconfirmed\") }}\n          </p>\n        }\n        @if (testResult.outcome === \"OutcomeUnknown\") {\n          <p class=\"mt-3 text-sm font-medium text-red-700\">\n            {{ t(\"outcome-unknown-warning\") }}\n          </p>\n        }\n      </div>\n    }\n  </div>\n\n  <div [class]=\"modal.footerClass\">\n    <mt-button\n      severity=\"secondary\"\n      variant=\"outlined\"\n      [label]=\"t('close')\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"close()\"\n    />\n    @if (timedOut()) {\n      <mt-button\n        [label]=\"t('test.retrieve')\"\n        icon=\"arrow.refresh-cw-01\"\n        [disabled]=\"polling()\"\n        [loading]=\"polling() || facade.mutationLoading() === 'retrieve-test'\"\n        styleClass=\"w-full sm:w-auto\"\n        (onClick)=\"retrieve()\"\n      />\n    } @else if (!result()) {\n      <mt-button\n        [label]=\"t('test.send')\"\n        icon=\"communication.send-01\"\n        [disabled]=\"!canSubmit()\"\n        [loading]=\"facade.mutationLoading() === 'test'\"\n        styleClass=\"w-full sm:w-auto\"\n        (onClick)=\"submit()\"\n      />\n    }\n  </div>\n</ng-container>\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,
@@ -1259,8 +1453,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         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-lg 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    @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-lg 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-lg 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 (testResult.outcome === \"Accepted\") {\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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\n    <div\n      class=\"mb-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950\"\n      role=\"note\"\n    >\n      <strong>{{ t(\"test.real-email-warning-title\") }}</strong>\n      {{ t(\"test.real-email-warning\") }}\n    </div>\n\n    @if (!result()) {\n      <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\n    }\n\n    @if (timedOut()) {\n      <div\n        class=\"mt-4 rounded-md border border-orange-200 bg-orange-50 px-4 py-3\"\n        role=\"alert\"\n      >\n        <p class=\"font-semibold text-orange-950\">\n          {{ t(\"test.timeout-title\") }}\n        </p>\n        <p class=\"mt-1 text-sm text-orange-900\">\n          {{ t(\"test.timeout-description\") }}\n        </p>\n      </div>\n    }\n\n    @if (result(); as testResult) {\n      <div\n        class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-4\"\n        aria-live=\"polite\"\n      >\n        <mt-email-delivery-status kind=\"attempt\" [value]=\"testResult.outcome\" />\n        <p class=\"mt-1 text-sm text-muted-color\">\n          {{ facade.describeCode(testResult.code) }}\n        </p>\n        @if (showsAcceptedCaveat(testResult)) {\n          <p class=\"mt-3 text-sm font-medium text-amber-800\">\n            {{ t(\"accepted-unconfirmed\") }}\n          </p>\n        }\n        @if (testResult.outcome === \"OutcomeUnknown\") {\n          <p class=\"mt-3 text-sm font-medium text-red-700\">\n            {{ t(\"outcome-unknown-warning\") }}\n          </p>\n        }\n      </div>\n    }\n  </div>\n\n  <div [class]=\"modal.footerClass\">\n    <mt-button\n      severity=\"secondary\"\n      variant=\"outlined\"\n      [label]=\"t('close')\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"close()\"\n    />\n    @if (timedOut()) {\n      <mt-button\n        [label]=\"t('test.retrieve')\"\n        icon=\"arrow.refresh-cw-01\"\n        [disabled]=\"polling()\"\n        [loading]=\"polling() || facade.mutationLoading() === 'retrieve-test'\"\n        styleClass=\"w-full sm:w-auto\"\n        (onClick)=\"retrieve()\"\n      />\n    } @else if (!result()) {\n      <mt-button\n        [label]=\"t('test.send')\"\n        icon=\"communication.send-01\"\n        [disabled]=\"!canSubmit()\"\n        [loading]=\"facade.mutationLoading() === 'test'\"\n        styleClass=\"w-full sm:w-auto\"\n        (onClick)=\"submit()\"\n      />\n    }\n  </div>\n</ng-container>\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 POLL_DELAYS_MS = [1_000, 2_000, 4_000, 5_000, 5_000, 5_000];
 function isPendingRequestState(value) {
     return !['Completed', 'Failed', 'Cancelled', 'Canceled'].includes(value);
@@ -1419,30 +1614,24 @@ class EmailConnectionEditor {
     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: [
-            {
-                key: 'basics',
-                label: this.t('editor.basics'),
-                type: 'header',
-                columns: 12,
-                fields: this.buildBasicFields(),
-            },
-            {
-                key: 'configuration',
-                label: this.t('editor.configuration'),
-                type: 'header',
-                columns: 12,
-                fields: this.buildConfigurationFields(),
-            },
-            {
-                key: 'credentials',
-                label: this.t('editor.credentials'),
-                type: 'header',
-                columns: 12,
-                fields: this.buildCredentialFields(),
-            },
-        ],
+            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) => {
@@ -1583,6 +1772,22 @@ class EmailConnectionEditor {
         });
         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 [
@@ -1809,12 +2014,24 @@ class EmailConnectionEditor {
         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    <p class=\"m-0 text-sm text-muted-color\">\r\n      {{ t(\"editor.description\") }}\r\n    </p>\r\n\r\n    @if (selectedProvider(); as provider) {\r\n      @if (provider.warnings.length > 0) {\r\n        <section\r\n          class=\"rounded-lg border border-amber-200 bg-amber-50 px-4 py-3\"\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 class=\"mb-0 mt-2 list-disc space-y-1 ps-5 text-sm text-amber-900\">\r\n            @for (warning of provider.warnings; track warning) {\r\n              <li>{{ 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-lg 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    @if (editorLoading()) {\r\n      <div class=\"py-12 text-center text-sm text-muted-color\" role=\"status\">\r\n        {{ t(\"loading\") }}\r\n      </div>\r\n    } @else {\r\n      @for (generation of [formGeneration()]; track generation) {\r\n        <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\r\n      }\r\n    }\r\n\r\n    @if (applicableFields().length === 0 && !editorLoading()) {\r\n      <div\r\n        class=\"rounded-lg 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  </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: "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 });
+    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'\">\n  <div\n    [class]=\"\n      'flex min-h-0 flex-col gap-5 overflow-y-auto p-4 sm:p-5 ' +\n      modal.contentClass\n    \"\n  >\n    @if (editorLoading()) {\n      <div\n        class=\"flex flex-col gap-5\"\n        role=\"status\"\n        [attr.aria-label]=\"t('loading')\"\n      >\n        @for (section of [1, 2, 3]; track section) {\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\n              <p-skeleton\n                width=\"10rem\"\n                height=\"1.25rem\"\n                borderRadius=\"0.375rem\"\n              />\n            </div>\n            <div class=\"grid gap-4 p-4 sm:grid-cols-2\">\n              @for (field of [1, 2, 3, 4]; track field) {\n                <p-skeleton height=\"3.25rem\" borderRadius=\"0.375rem\" />\n              }\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      @if (selectedProvider(); as provider) {\n        @if (provider.warnings.length > 0) {\n          <section\n            class=\"rounded-md border border-amber-200 bg-amber-50 p-4\"\n            role=\"note\"\n            aria-labelledby=\"provider-warnings-heading\"\n          >\n            <h2\n              id=\"provider-warnings-heading\"\n              class=\"m-0 text-sm font-semibold text-amber-950\"\n            >\n              {{ t(\"provider-warnings\") }}\n            </h2>\n            <ul\n              class=\"mb-0 mt-2.5 list-disc space-y-2 ps-5 text-sm leading-relaxed text-amber-900\"\n            >\n              @for (warning of provider.warnings; track warning) {\n                <li class=\"ps-1\">{{ warning }}</li>\n              }\n            </ul>\n          </section>\n        }\n      }\n\n      @if (isEdit()) {\n        <div\n          class=\"rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-950\"\n          role=\"note\"\n        >\n          {{ t(\"editor.update-invalidates-proof\") }}\n        </div>\n      }\n\n      @for (generation of [formGeneration()]; track generation) {\n        <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\n      }\n\n      @if (applicableFields().length === 0) {\n        <div\n          class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-3 text-sm text-muted-color\"\n        >\n          {{ t(\"editor.select-provider-mode\") }}\n        </div>\n      }\n    }\n  </div>\n\n  <div [class]=\"modal.footerClass\">\n    <mt-button\n      [label]=\"t('cancel')\"\n      variant=\"outlined\"\n      [disabled]=\"!!facade.mutationLoading()\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"cancel()\"\n    />\n    <mt-button\n      [label]=\"t('save')\"\n      icon=\"general.save-01\"\n      [disabled]=\"!canSave()\"\n      [loading]=\"facade.mutationLoading() === (isEdit() ? 'update' : 'create')\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"save()\"\n    />\n  </div>\n</ng-container>\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, 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    <p class=\"m-0 text-sm text-muted-color\">\r\n      {{ t(\"editor.description\") }}\r\n    </p>\r\n\r\n    @if (selectedProvider(); as provider) {\r\n      @if (provider.warnings.length > 0) {\r\n        <section\r\n          class=\"rounded-lg border border-amber-200 bg-amber-50 px-4 py-3\"\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 class=\"mb-0 mt-2 list-disc space-y-1 ps-5 text-sm text-amber-900\">\r\n            @for (warning of provider.warnings; track warning) {\r\n              <li>{{ 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-lg 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    @if (editorLoading()) {\r\n      <div class=\"py-12 text-center text-sm text-muted-color\" role=\"status\">\r\n        {{ t(\"loading\") }}\r\n      </div>\r\n    } @else {\r\n      @for (generation of [formGeneration()]; track generation) {\r\n        <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\r\n      }\r\n    }\r\n\r\n    @if (applicableFields().length === 0 && !editorLoading()) {\r\n      <div\r\n        class=\"rounded-lg 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  </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" }]
+            args: [{ selector: 'mt-email-connection-editor', imports: [
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        SkeletonModule,
+                        DynamicForm,
+                        Button,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <div\n    [class]=\"\n      'flex min-h-0 flex-col gap-5 overflow-y-auto p-4 sm:p-5 ' +\n      modal.contentClass\n    \"\n  >\n    @if (editorLoading()) {\n      <div\n        class=\"flex flex-col gap-5\"\n        role=\"status\"\n        [attr.aria-label]=\"t('loading')\"\n      >\n        @for (section of [1, 2, 3]; track section) {\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\n              <p-skeleton\n                width=\"10rem\"\n                height=\"1.25rem\"\n                borderRadius=\"0.375rem\"\n              />\n            </div>\n            <div class=\"grid gap-4 p-4 sm:grid-cols-2\">\n              @for (field of [1, 2, 3, 4]; track field) {\n                <p-skeleton height=\"3.25rem\" borderRadius=\"0.375rem\" />\n              }\n            </div>\n          </div>\n        }\n      </div>\n    } @else {\n      @if (selectedProvider(); as provider) {\n        @if (provider.warnings.length > 0) {\n          <section\n            class=\"rounded-md border border-amber-200 bg-amber-50 p-4\"\n            role=\"note\"\n            aria-labelledby=\"provider-warnings-heading\"\n          >\n            <h2\n              id=\"provider-warnings-heading\"\n              class=\"m-0 text-sm font-semibold text-amber-950\"\n            >\n              {{ t(\"provider-warnings\") }}\n            </h2>\n            <ul\n              class=\"mb-0 mt-2.5 list-disc space-y-2 ps-5 text-sm leading-relaxed text-amber-900\"\n            >\n              @for (warning of provider.warnings; track warning) {\n                <li class=\"ps-1\">{{ warning }}</li>\n              }\n            </ul>\n          </section>\n        }\n      }\n\n      @if (isEdit()) {\n        <div\n          class=\"rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-950\"\n          role=\"note\"\n        >\n          {{ t(\"editor.update-invalidates-proof\") }}\n        </div>\n      }\n\n      @for (generation of [formGeneration()]; track generation) {\n        <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\n      }\n\n      @if (applicableFields().length === 0) {\n        <div\n          class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-3 text-sm text-muted-color\"\n        >\n          {{ t(\"editor.select-provider-mode\") }}\n        </div>\n      }\n    }\n  </div>\n\n  <div [class]=\"modal.footerClass\">\n    <mt-button\n      [label]=\"t('cancel')\"\n      variant=\"outlined\"\n      [disabled]=\"!!facade.mutationLoading()\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"cancel()\"\n    />\n    <mt-button\n      [label]=\"t('save')\"\n      icon=\"general.save-01\"\n      [disabled]=\"!canSave()\"\n      [loading]=\"facade.mutationLoading() === (isEdit() ? 'update' : 'create')\"\n      styleClass=\"w-full sm:w-auto\"\n      (onClick)=\"save()\"\n    />\n  </div>\n</ng-container>\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,
@@ -2023,7 +2240,7 @@ class EmailConnectionDetailsPage {
     edit() {
         const drawer = this.modal.openModal(EmailConnectionEditor, 'drawer', {
             header: this.t('editor.edit-title'),
-            styleClass: '!absolute !shadow-none !w-full !max-w-full',
+            styleClass: EMAIL_DELIVERY_DRAWER_STYLE_CLASS,
             position: 'end',
             appendTo: 'page-content',
             dismissableMask: true,
@@ -2140,19 +2357,19 @@ class EmailConnectionDetailsPage {
         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 [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\r\n      <div class=\"py-12 text-center text-sm text-muted-color\" role=\"status\">\r\n        {{ t(\"loading\") }}\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-xl border border-surface-200 bg-surface-0 p-4 shadow-xs 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          </div>\r\n          <mt-email-delivery-status\r\n            class=\"shrink-0\"\r\n            kind=\"connection\"\r\n            [value]=\"details.connection.state\"\r\n          />\r\n        </section>\r\n\r\n        <mt-card class=\"block\">\r\n          <h3 class=\"mb-4 text-base font-semibold text-color\">\r\n            {{ t(\"connection-overview\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 sm:grid-cols-2 xl:grid-cols-3\">\r\n            <div class=\"rounded-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\"\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        </mt-card>\r\n\r\n        @if (publicConfiguration().length > 0) {\r\n          <mt-card class=\"block\">\r\n            <h3 class=\"mb-4 text-base font-semibold text-color\">\r\n              {{ t(\"provider-settings\") }}\r\n            </h3>\r\n            <dl class=\"grid gap-3 sm:grid-cols-2 xl:grid-cols-3\">\r\n              @for (entry of publicConfiguration(); track entry.key) {\r\n                <div\r\n                  class=\"rounded-lg border border-surface-200 bg-surface-50 p-4\"\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          </mt-card>\r\n        }\r\n\r\n        <mt-card class=\"block\">\r\n          <h3 class=\"mb-4 text-base font-semibold text-color\">\r\n            {{ t(\"credential-status\") }}\r\n          </h3>\r\n          <div class=\"grid gap-3\">\r\n            @for (credential of credentialItems(); track credential.key) {\r\n              <div\r\n                class=\"grid gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 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=\"text-sm text-muted-color\">{{ t(\"no-credentials\") }}</p>\r\n            }\r\n          </div>\r\n        </mt-card>\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: "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: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { 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 });
+    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'\">\n  @if (facade.detailsLoading()) {\n    <div\n      [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\"\n      role=\"status\"\n      [attr.aria-label]=\"t('loading')\"\n    >\n      <div class=\"grid w-full gap-5\">\n        <p-skeleton height=\"5rem\" borderRadius=\"0.375rem\" />\n        @for (section of [1, 2, 3]; track section) {\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\n              <p-skeleton\n                width=\"12rem\"\n                height=\"1.25rem\"\n                borderRadius=\"0.375rem\"\n              />\n            </div>\n            <div class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\n              @for (tile of [1, 2, 3]; track tile) {\n                <p-skeleton height=\"4rem\" borderRadius=\"0.375rem\" />\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  } @else if (facade.selectedConnection(); as details) {\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\n      <div class=\"grid w-full gap-5\">\n        <section\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\"\n        >\n          <div class=\"min-w-0\">\n            <h2 class=\"m-0 truncate text-lg font-semibold text-color\">\n              {{ details.connection.name }}\n            </h2>\n            <p class=\"mb-0 mt-1 break-all text-sm text-muted-color\">\n              {{ details.connection.senderAddress }}\n            </p>\n          </div>\n          <mt-email-delivery-status\n            class=\"shrink-0\"\n            kind=\"connection\"\n            [value]=\"details.connection.state\"\n          />\n        </section>\n\n        <!-- Same section shape the connection form uses (mt-client-form section\n             mode): header strip on a bordered, flat, rounded-md container. -->\n        <section\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n        >\n          <h3\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n          >\n            {{ t(\"connection-overview\") }}\n          </h3>\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"connection.provider\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                {{ provider()?.displayName || details.connection.providerKey }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"connection.authentication-mode\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                {{ authenticationModeLabel() }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"used-for-notifications\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\n                {{\n                  details.bindings.includes(\"notifications\")\n                    ? t(\"yes\")\n                    : t(\"no\")\n                }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"connection.last-validation\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\n                {{\n                  details.connection.lastValidatedAtUtc\n                    ? (details.connection.lastValidatedAtUtc | date: \"medium\")\n                    : \"\u2014\"\n                }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"authorization-state\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                {{ details.authorizationState || \"\u2014\" }}\n              </dd>\n            </div>\n            @if (details.connection.senderDisplayName) {\n              <div\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\n              >\n                <dt class=\"text-xs text-muted-color\">\n                  {{ t(\"connection.sender-display-name\") }}\n                </dt>\n                <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                  {{ details.connection.senderDisplayName }}\n                </dd>\n              </div>\n            }\n          </dl>\n        </section>\n\n        @if (publicConfiguration().length > 0) {\n          <section\n            class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n          >\n            <h3\n              class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n            >\n              {{ t(\"provider-settings\") }}\n            </h3>\n            <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\n              @for (entry of publicConfiguration(); track entry.key) {\n                <div\n                  class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\n                >\n                  <dt class=\"text-xs text-muted-color\">{{ entry.label }}</dt>\n                  <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                    {{ entry.value }}\n                  </dd>\n                </div>\n              }\n            </dl>\n          </section>\n        }\n\n        <section\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n        >\n          <h3\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n          >\n            {{ t(\"credential-status\") }}\n          </h3>\n          <div class=\"grid gap-3 p-4\">\n            @for (credential of credentialItems(); track credential.key) {\n              <div\n                class=\"grid gap-3 rounded-md border border-surface-200 bg-surface-50 p-3 sm:grid-cols-3 sm:items-center\"\n              >\n                <div class=\"min-w-0\">\n                  <p class=\"m-0 break-words font-medium text-color\">\n                    {{ credential.label }}\n                  </p>\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\n                    {{ credential.key }}\n                  </p>\n                </div>\n                <div class=\"min-w-0\">\n                  <p class=\"m-0 text-sm font-medium text-color\">\n                    {{ credential.storageLabel }}\n                  </p>\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\n                    @if (credential.lastRotatedAtUtc) {\n                      {{ t(\"last-rotated\") }} \u00B7\n                      {{ credential.lastRotatedAtUtc | date: \"medium\" }}\n                    } @else {\n                      {{ t(\"last-rotated\") }} \u00B7 \u2014\n                    }\n                  </p>\n                </div>\n                <mt-email-delivery-status\n                  class=\"shrink-0 sm:justify-self-end\"\n                  kind=\"support\"\n                  [value]=\"\n                    credential.configured ? 'configured' : 'not-configured'\n                  \"\n                />\n              </div>\n            } @empty {\n              <p class=\"m-0 text-sm text-muted-color\">\n                {{ t(\"no-credentials\") }}\n              </p>\n            }\n          </div>\n        </section>\n      </div>\n    </div>\n\n    <div [class]=\"modal.footerClass\">\n      <mt-button\n        [label]=\"t('close')\"\n        variant=\"outlined\"\n        styleClass=\"w-full sm:w-auto\"\n        (onClick)=\"close()\"\n      />\n      @if (actionMenuItems().length > 0) {\n        <mt-button\n          [label]=\"t('actions')\"\n          icon=\"general.dots-vertical\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          styleClass=\"w-full sm:w-auto\"\n          (onClick)=\"actionMenu.toggle($event)\"\n        />\n        <mt-menu\n          #actionMenu\n          [model]=\"actionMenuItems()\"\n          appendTo=\"body\"\n          [ariaLabel]=\"t('actions')\"\n        />\n      }\n      <mt-button\n        [label]=\"t('edit')\"\n        icon=\"general.edit-01\"\n        [disabled]=\"!facade.managementAvailable()\"\n        styleClass=\"w-full sm:w-auto\"\n        (onClick)=\"edit()\"\n      />\n    </div>\n  } @else {\n    <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\n      <mt-empty-state illustration=\"none\" [title]=\"t('connection-not-found')\" />\n    </div>\n    <div [class]=\"modal.footerClass\">\n      <mt-button [label]=\"t('close')\" variant=\"outlined\" (onClick)=\"close()\" />\n    </div>\n  }\n</ng-container>\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,
-                        Card,
                         EmptyState,
                         Menu,
                         EmailDeliveryStatus,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  @if (facade.detailsLoading()) {\r\n    <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\r\n      <div class=\"py-12 text-center text-sm text-muted-color\" role=\"status\">\r\n        {{ t(\"loading\") }}\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-xl border border-surface-200 bg-surface-0 p-4 shadow-xs 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          </div>\r\n          <mt-email-delivery-status\r\n            class=\"shrink-0\"\r\n            kind=\"connection\"\r\n            [value]=\"details.connection.state\"\r\n          />\r\n        </section>\r\n\r\n        <mt-card class=\"block\">\r\n          <h3 class=\"mb-4 text-base font-semibold text-color\">\r\n            {{ t(\"connection-overview\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 sm:grid-cols-2 xl:grid-cols-3\">\r\n            <div class=\"rounded-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\">\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-lg border border-surface-200 bg-surface-50 p-4\"\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        </mt-card>\r\n\r\n        @if (publicConfiguration().length > 0) {\r\n          <mt-card class=\"block\">\r\n            <h3 class=\"mb-4 text-base font-semibold text-color\">\r\n              {{ t(\"provider-settings\") }}\r\n            </h3>\r\n            <dl class=\"grid gap-3 sm:grid-cols-2 xl:grid-cols-3\">\r\n              @for (entry of publicConfiguration(); track entry.key) {\r\n                <div\r\n                  class=\"rounded-lg border border-surface-200 bg-surface-50 p-4\"\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          </mt-card>\r\n        }\r\n\r\n        <mt-card class=\"block\">\r\n          <h3 class=\"mb-4 text-base font-semibold text-color\">\r\n            {{ t(\"credential-status\") }}\r\n          </h3>\r\n          <div class=\"grid gap-3\">\r\n            @for (credential of credentialItems(); track credential.key) {\r\n              <div\r\n                class=\"grid gap-3 rounded-lg border border-surface-200 bg-surface-50 p-4 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=\"text-sm text-muted-color\">{{ t(\"no-credentials\") }}</p>\r\n            }\r\n          </div>\r\n        </mt-card>\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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  @if (facade.detailsLoading()) {\n    <div\n      [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\"\n      role=\"status\"\n      [attr.aria-label]=\"t('loading')\"\n    >\n      <div class=\"grid w-full gap-5\">\n        <p-skeleton height=\"5rem\" borderRadius=\"0.375rem\" />\n        @for (section of [1, 2, 3]; track section) {\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\n              <p-skeleton\n                width=\"12rem\"\n                height=\"1.25rem\"\n                borderRadius=\"0.375rem\"\n              />\n            </div>\n            <div class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\n              @for (tile of [1, 2, 3]; track tile) {\n                <p-skeleton height=\"4rem\" borderRadius=\"0.375rem\" />\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  } @else if (facade.selectedConnection(); as details) {\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\n      <div class=\"grid w-full gap-5\">\n        <section\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\"\n        >\n          <div class=\"min-w-0\">\n            <h2 class=\"m-0 truncate text-lg font-semibold text-color\">\n              {{ details.connection.name }}\n            </h2>\n            <p class=\"mb-0 mt-1 break-all text-sm text-muted-color\">\n              {{ details.connection.senderAddress }}\n            </p>\n          </div>\n          <mt-email-delivery-status\n            class=\"shrink-0\"\n            kind=\"connection\"\n            [value]=\"details.connection.state\"\n          />\n        </section>\n\n        <!-- Same section shape the connection form uses (mt-client-form section\n             mode): header strip on a bordered, flat, rounded-md container. -->\n        <section\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n        >\n          <h3\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n          >\n            {{ t(\"connection-overview\") }}\n          </h3>\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"connection.provider\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                {{ provider()?.displayName || details.connection.providerKey }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"connection.authentication-mode\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                {{ authenticationModeLabel() }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"used-for-notifications\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\n                {{\n                  details.bindings.includes(\"notifications\")\n                    ? t(\"yes\")\n                    : t(\"no\")\n                }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"connection.last-validation\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\n                {{\n                  details.connection.lastValidatedAtUtc\n                    ? (details.connection.lastValidatedAtUtc | date: \"medium\")\n                    : \"\u2014\"\n                }}\n              </dd>\n            </div>\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\n              <dt class=\"text-xs text-muted-color\">\n                {{ t(\"authorization-state\") }}\n              </dt>\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                {{ details.authorizationState || \"\u2014\" }}\n              </dd>\n            </div>\n            @if (details.connection.senderDisplayName) {\n              <div\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\n              >\n                <dt class=\"text-xs text-muted-color\">\n                  {{ t(\"connection.sender-display-name\") }}\n                </dt>\n                <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                  {{ details.connection.senderDisplayName }}\n                </dd>\n              </div>\n            }\n          </dl>\n        </section>\n\n        @if (publicConfiguration().length > 0) {\n          <section\n            class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n          >\n            <h3\n              class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n            >\n              {{ t(\"provider-settings\") }}\n            </h3>\n            <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\n              @for (entry of publicConfiguration(); track entry.key) {\n                <div\n                  class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\n                >\n                  <dt class=\"text-xs text-muted-color\">{{ entry.label }}</dt>\n                  <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\n                    {{ entry.value }}\n                  </dd>\n                </div>\n              }\n            </dl>\n          </section>\n        }\n\n        <section\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\n        >\n          <h3\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\n          >\n            {{ t(\"credential-status\") }}\n          </h3>\n          <div class=\"grid gap-3 p-4\">\n            @for (credential of credentialItems(); track credential.key) {\n              <div\n                class=\"grid gap-3 rounded-md border border-surface-200 bg-surface-50 p-3 sm:grid-cols-3 sm:items-center\"\n              >\n                <div class=\"min-w-0\">\n                  <p class=\"m-0 break-words font-medium text-color\">\n                    {{ credential.label }}\n                  </p>\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\n                    {{ credential.key }}\n                  </p>\n                </div>\n                <div class=\"min-w-0\">\n                  <p class=\"m-0 text-sm font-medium text-color\">\n                    {{ credential.storageLabel }}\n                  </p>\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\n                    @if (credential.lastRotatedAtUtc) {\n                      {{ t(\"last-rotated\") }} \u00B7\n                      {{ credential.lastRotatedAtUtc | date: \"medium\" }}\n                    } @else {\n                      {{ t(\"last-rotated\") }} \u00B7 \u2014\n                    }\n                  </p>\n                </div>\n                <mt-email-delivery-status\n                  class=\"shrink-0 sm:justify-self-end\"\n                  kind=\"support\"\n                  [value]=\"\n                    credential.configured ? 'configured' : 'not-configured'\n                  \"\n                />\n              </div>\n            } @empty {\n              <p class=\"m-0 text-sm text-muted-color\">\n                {{ t(\"no-credentials\") }}\n              </p>\n            }\n          </div>\n        </section>\n      </div>\n    </div>\n\n    <div [class]=\"modal.footerClass\">\n      <mt-button\n        [label]=\"t('close')\"\n        variant=\"outlined\"\n        styleClass=\"w-full sm:w-auto\"\n        (onClick)=\"close()\"\n      />\n      @if (actionMenuItems().length > 0) {\n        <mt-button\n          [label]=\"t('actions')\"\n          icon=\"general.dots-vertical\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          styleClass=\"w-full sm:w-auto\"\n          (onClick)=\"actionMenu.toggle($event)\"\n        />\n        <mt-menu\n          #actionMenu\n          [model]=\"actionMenuItems()\"\n          appendTo=\"body\"\n          [ariaLabel]=\"t('actions')\"\n        />\n      }\n      <mt-button\n        [label]=\"t('edit')\"\n        icon=\"general.edit-01\"\n        [disabled]=\"!facade.managementAvailable()\"\n        styleClass=\"w-full sm:w-auto\"\n        (onClick)=\"edit()\"\n      />\n    </div>\n  } @else {\n    <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\n      <mt-empty-state illustration=\"none\" [title]=\"t('connection-not-found')\" />\n    </div>\n    <div [class]=\"modal.footerClass\">\n      <mt-button [label]=\"t('close')\" variant=\"outlined\" (onClick)=\"close()\" />\n    </div>\n  }\n</ng-container>\n" }]
         }], propDecorators: { connectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionId", required: true }] }] } });
 function humanizeIdentifier(value) {
     return value
@@ -2177,6 +2394,10 @@ class EmailDeliveryConnections {
         initialValue: this.transloco.getActiveLang(),
     });
     canConfigure = this.facade.hasPermission(EMAIL_DELIVERY_PERMISSIONS.controlPanel);
+    /** 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 ??
@@ -2195,6 +2416,7 @@ class EmailDeliveryConnections {
             {
                 key: 'providerLabel',
                 label: this.t('connection.provider'),
+                width: '18rem',
                 filterConfig: {
                     type: 'select',
                     options: this.facade.providers().map((provider) => ({
@@ -2206,12 +2428,14 @@ class EmailDeliveryConnections {
             {
                 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) => ({
@@ -2223,8 +2447,9 @@ class EmailDeliveryConnections {
             },
             {
                 key: 'usedForNotifications',
-                label: this.t('used-for-notifications'),
+                label: this.t('in-use'),
                 type: 'boolean',
+                width: '10rem',
                 readonly: true,
                 filterConfig: { type: 'boolean' },
             },
@@ -2232,6 +2457,7 @@ class EmailDeliveryConnections {
                 key: 'lastValidatedAtUtc',
                 label: this.t('connection.last-validation'),
                 type: 'dateTime',
+                width: '15rem',
             },
         ];
     }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -2299,7 +2525,7 @@ class EmailDeliveryConnections {
     openDetails(connection) {
         const drawer = this.modal.openModal(EmailConnectionDetailsPage, 'drawer', {
             header: this.t('connection-details'),
-            styleClass: '!absolute !shadow-none !w-full !max-w-full',
+            styleClass: EMAIL_DELIVERY_DRAWER_STYLE_CLASS,
             position: 'end',
             appendTo: 'page-content',
             dismissableMask: true,
@@ -2361,7 +2587,7 @@ class EmailDeliveryConnections {
     openEditor(connectionId) {
         const drawer = this.modal.openModal(EmailConnectionEditor, 'drawer', {
             header: this.t(connectionId ? 'editor.edit-title' : 'editor.create-title'),
-            styleClass: '!absolute !shadow-none !w-full !max-w-full',
+            styleClass: EMAIL_DELIVERY_DRAWER_STYLE_CLASS,
             position: 'end',
             appendTo: 'page-content',
             dismissableMask: true,
@@ -2383,11 +2609,11 @@ class EmailDeliveryConnections {
         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-labelledby=\"connections-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        <h2 id=\"connections-heading\" class=\"text-lg font-semibold text-color\">\r\n          {{ t(\"connections-title\") }}\r\n        </h2>\r\n        <p class=\"mt-1 text-sm text-muted-color\">\r\n          {{ t(\"connections-description\") }}\r\n        </p>\r\n      </div>\r\n      @if (\r\n        canConfigure &&\r\n        facade.managementAvailable() &&\r\n        facade.providers().length > 0\r\n      ) {\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    </div>\r\n\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 if (\r\n      !facade.statusLoading() &&\r\n      !facade.connectionsLoading() &&\r\n      facade.connections().length === 0\r\n    ) {\r\n      <mt-empty-state\r\n        [title]=\"t('no-connections-title')\"\r\n        [description]=\"t('no-connections-description')\"\r\n        [actionLabel]=\"\r\n          canConfigure && facade.managementAvailable()\r\n            ? t('create-connection')\r\n            : undefined\r\n        \"\r\n        actionIcon=\"general.plus\"\r\n        (actionClick)=\"createConnection()\"\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        filterMode=\"column\"\r\n        actionShape=\"popover\"\r\n        [clickableRows]=\"true\"\r\n        dataKey=\"id\"\r\n        storageKey=\"email-delivery-connections\"\r\n        (rowClick)=\"openDetails($event)\"\r\n      />\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 });
+    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'\">\n  <section class=\"space-y-4\" aria-label=\"{{ t('connections-title') }}\">\n    @if (\n      !facade.statusLoading() &&\n      !facade.catalogLoading() &&\n      facade.providers().length === 0\n    ) {\n      <mt-empty-state\n        illustration=\"none\"\n        [title]=\"t('no-providers-title')\"\n        [description]=\"t('no-providers-description')\"\n      />\n    } @else {\n      <mt-table\n        [data]=\"rows()\"\n        [columns]=\"columns()\"\n        [rowActions]=\"rowActions()\"\n        [loading]=\"\n          facade.statusLoading() ||\n          facade.connectionsLoading() ||\n          facade.catalogLoading()\n        \"\n        [generalSearch]=\"true\"\n        [showFilters]=\"true\"\n        [emptyTitle]=\"t('no-connections-title')\"\n        [emptyDescription]=\"t('no-connections-description')\"\n        [emptyActionLabel]=\"canCreate() ? t('create-connection') : undefined\"\n        emptyActionIcon=\"general.plus\"\n        filterMode=\"column\"\n        actionShape=\"popover\"\n        [clickableRows]=\"true\"\n        dataKey=\"id\"\n        storageKey=\"email-delivery-connections\"\n        (emptyAction)=\"createConnection()\"\n        (rowClick)=\"openDetails($event)\"\n      >\n        <ng-template #captionEnd>\n          @if (canCreate()) {\n            <mt-button\n              [label]=\"t('create-connection')\"\n              icon=\"general.plus\"\n              (onClick)=\"createConnection()\"\n            />\n          }\n        </ng-template>\n      </mt-table>\n    }\n  </section>\n</ng-container>\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-labelledby=\"connections-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        <h2 id=\"connections-heading\" class=\"text-lg font-semibold text-color\">\r\n          {{ t(\"connections-title\") }}\r\n        </h2>\r\n        <p class=\"mt-1 text-sm text-muted-color\">\r\n          {{ t(\"connections-description\") }}\r\n        </p>\r\n      </div>\r\n      @if (\r\n        canConfigure &&\r\n        facade.managementAvailable() &&\r\n        facade.providers().length > 0\r\n      ) {\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    </div>\r\n\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 if (\r\n      !facade.statusLoading() &&\r\n      !facade.connectionsLoading() &&\r\n      facade.connections().length === 0\r\n    ) {\r\n      <mt-empty-state\r\n        [title]=\"t('no-connections-title')\"\r\n        [description]=\"t('no-connections-description')\"\r\n        [actionLabel]=\"\r\n          canConfigure && facade.managementAvailable()\r\n            ? t('create-connection')\r\n            : undefined\r\n        \"\r\n        actionIcon=\"general.plus\"\r\n        (actionClick)=\"createConnection()\"\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        filterMode=\"column\"\r\n        actionShape=\"popover\"\r\n        [clickableRows]=\"true\"\r\n        dataKey=\"id\"\r\n        storageKey=\"email-delivery-connections\"\r\n        (rowClick)=\"openDetails($event)\"\r\n      />\r\n    }\r\n  </section>\r\n</ng-container>\r\n" }]
+            args: [{ selector: 'mt-email-delivery-connections', imports: [TranslocoDirective, Button, EmptyState, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <section class=\"space-y-4\" aria-label=\"{{ t('connections-title') }}\">\n    @if (\n      !facade.statusLoading() &&\n      !facade.catalogLoading() &&\n      facade.providers().length === 0\n    ) {\n      <mt-empty-state\n        illustration=\"none\"\n        [title]=\"t('no-providers-title')\"\n        [description]=\"t('no-providers-description')\"\n      />\n    } @else {\n      <mt-table\n        [data]=\"rows()\"\n        [columns]=\"columns()\"\n        [rowActions]=\"rowActions()\"\n        [loading]=\"\n          facade.statusLoading() ||\n          facade.connectionsLoading() ||\n          facade.catalogLoading()\n        \"\n        [generalSearch]=\"true\"\n        [showFilters]=\"true\"\n        [emptyTitle]=\"t('no-connections-title')\"\n        [emptyDescription]=\"t('no-connections-description')\"\n        [emptyActionLabel]=\"canCreate() ? t('create-connection') : undefined\"\n        emptyActionIcon=\"general.plus\"\n        filterMode=\"column\"\n        actionShape=\"popover\"\n        [clickableRows]=\"true\"\n        dataKey=\"id\"\n        storageKey=\"email-delivery-connections\"\n        (emptyAction)=\"createConnection()\"\n        (rowClick)=\"openDetails($event)\"\n      >\n        <ng-template #captionEnd>\n          @if (canCreate()) {\n            <mt-button\n              [label]=\"t('create-connection')\"\n              icon=\"general.plus\"\n              (onClick)=\"createConnection()\"\n            />\n          }\n        </ng-template>\n      </mt-table>\n    }\n  </section>\n</ng-container>\n" }]
         }] });
 const connectionStates = [
     'Draft',
@@ -2421,6 +2647,43 @@ class EmailDeliveryShell {
             { 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');
@@ -2443,7 +2706,7 @@ class EmailDeliveryShell {
         });
     }
     goBack() {
-        void this.router.navigate(['/control-panel/product-settings']);
+        void this.router.navigate([PRODUCT_SETTINGS_ROUTE]);
     }
     syncTabFromUrl() {
         this.activeTab.set(this.route.snapshot.queryParamMap.get('tab') === 'activity'
@@ -2484,18 +2747,22 @@ class EmailDeliveryShell {
         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    @if (canView) {\r\n      <p class=\"mb-4 text-sm text-muted-color\">\r\n        {{ t(\"description\") }}\r\n      </p>\r\n      @if (facade.status(); as status) {\r\n        <div\r\n          class=\"mb-4 rounded-lg border px-4 py-3\"\r\n          [class.border-emerald-200]=\"status.isReady\"\r\n          [class.bg-emerald-50]=\"status.isReady\"\r\n          [class.border-amber-200]=\"!status.isReady && status.managementEnabled\"\r\n          [class.bg-amber-50]=\"!status.isReady && status.managementEnabled\"\r\n          [class.border-surface-300]=\"!status.managementEnabled\"\r\n          [class.bg-surface-100]=\"!status.managementEnabled\"\r\n          role=\"status\"\r\n        >\r\n          <p class=\"font-semibold text-color\">\r\n            {{\r\n              status.isReady\r\n                ? t(\"ready\")\r\n                : status.managementEnabled\r\n                  ? t(\"needs-setup\")\r\n                  : t(\"unavailable\")\r\n            }}\r\n          </p>\r\n          <p class=\"mt-1 text-sm text-muted-color\">\r\n            {{ facade.describeCode(status.code) }}\r\n          </p>\r\n        </div>\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    } @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: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "component", type: EmailDeliveryConnections, selector: "mt-email-delivery-connections" }, { kind: "component", type: EmailDeliveryActivity, selector: "mt-email-delivery-activity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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'\">\n  <mt-page\n    [title]=\"t('title')\"\n    avatarIcon=\"communication.mail-01\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-blue-100)',\n      '--p-avatar-color': 'var(--p-blue-700)',\n    }\"\n    [tabs]=\"canView ? tabs() : []\"\n    [activeTab]=\"activeTab()\"\n    contentClass=\"min-h-0 max-[1025px]:p-4 max-[640px]:p-3\"\n    backButton\n    (backButtonClick)=\"goBack()\"\n    (tabChange)=\"onTabChange($event)\"\n  >\n    <!-- Declared unconditionally: a content query cannot reach a template that\n         only exists inside a control-flow block, so the condition lives here. -->\n    <ng-template #titleEnd>\n      @if (canView && readiness(); as state) {\n        <span class=\"shrink-0\" [mtTooltip]=\"readinessHint()\">\n          <mt-email-delivery-status kind=\"readiness\" [value]=\"state\" />\n        </span>\n      }\n    </ng-template>\n\n    @if (canView) {\n      <div\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\"\n      >\n        <mt-breadcrumb\n          [items]=\"breadcrumbItems()\"\n          styleClass=\"mx-1 flex justify-start\"\n        />\n\n        @if (activeTab() === \"activity\") {\n          <mt-email-delivery-activity />\n        } @else {\n          <mt-email-delivery-connections />\n        }\n      </div>\n    } @else {\n      <mt-empty-state\n        illustration=\"none\"\n        [title]=\"t('access-denied-title')\"\n        [description]=\"t('access-denied-description')\"\n      />\n    }\n  </mt-page>\n</ng-container>\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    @if (canView) {\r\n      <p class=\"mb-4 text-sm text-muted-color\">\r\n        {{ t(\"description\") }}\r\n      </p>\r\n      @if (facade.status(); as status) {\r\n        <div\r\n          class=\"mb-4 rounded-lg border px-4 py-3\"\r\n          [class.border-emerald-200]=\"status.isReady\"\r\n          [class.bg-emerald-50]=\"status.isReady\"\r\n          [class.border-amber-200]=\"!status.isReady && status.managementEnabled\"\r\n          [class.bg-amber-50]=\"!status.isReady && status.managementEnabled\"\r\n          [class.border-surface-300]=\"!status.managementEnabled\"\r\n          [class.bg-surface-100]=\"!status.managementEnabled\"\r\n          role=\"status\"\r\n        >\r\n          <p class=\"font-semibold text-color\">\r\n            {{\r\n              status.isReady\r\n                ? t(\"ready\")\r\n                : status.managementEnabled\r\n                  ? t(\"needs-setup\")\r\n                  : t(\"unavailable\")\r\n            }}\r\n          </p>\r\n          <p class=\"mt-1 text-sm text-muted-color\">\r\n            {{ facade.describeCode(status.code) }}\r\n          </p>\r\n        </div>\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    } @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" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <mt-page\n    [title]=\"t('title')\"\n    avatarIcon=\"communication.mail-01\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-blue-100)',\n      '--p-avatar-color': 'var(--p-blue-700)',\n    }\"\n    [tabs]=\"canView ? tabs() : []\"\n    [activeTab]=\"activeTab()\"\n    contentClass=\"min-h-0 max-[1025px]:p-4 max-[640px]:p-3\"\n    backButton\n    (backButtonClick)=\"goBack()\"\n    (tabChange)=\"onTabChange($event)\"\n  >\n    <!-- Declared unconditionally: a content query cannot reach a template that\n         only exists inside a control-flow block, so the condition lives here. -->\n    <ng-template #titleEnd>\n      @if (canView && readiness(); as state) {\n        <span class=\"shrink-0\" [mtTooltip]=\"readinessHint()\">\n          <mt-email-delivery-status kind=\"readiness\" [value]=\"state\" />\n        </span>\n      }\n    </ng-template>\n\n    @if (canView) {\n      <div\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\"\n      >\n        <mt-breadcrumb\n          [items]=\"breadcrumbItems()\"\n          styleClass=\"mx-1 flex justify-start\"\n        />\n\n        @if (activeTab() === \"activity\") {\n          <mt-email-delivery-activity />\n        } @else {\n          <mt-email-delivery-connections />\n        }\n      </div>\n    } @else {\n      <mt-empty-state\n        illustration=\"none\"\n        [title]=\"t('access-denied-title')\"\n        [description]=\"t('access-denied-description')\"\n      />\n    }\n  </mt-page>\n</ng-container>\n" }]
         }], ctorParameters: () => [] });
+const PRODUCT_SETTINGS_ROUTE = '/control-panel/product-settings';
 
 export { EmailDeliveryShell };
-//# sourceMappingURL=masterteam-system-settings-email-delivery-shell-DowMjl4L.mjs.map
+//# sourceMappingURL=masterteam-system-settings-email-delivery-shell-Co2SifYp.mjs.map