@masterteam/system-settings 0.0.15 → 0.0.17

package/fesm2022/{masterteam-system-settings-email-delivery-shell-DowMjl4L.mjs → masterteam-system-settings-email-delivery-shell-C_AhRF1f.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 */ []));
@@ -256,11 +386,11 @@ class EmailDeliveryFacade {
     }
     updateConnection(id, request) {
         this.mutationLoading.set('update');
-        return this.api.updateConnection(id, request).pipe(switchMap(() => this.refreshConnection(id)), tap(() => this.showSuccess('connection-updated')), finalize(() => this.mutationLoading.set(null)));
+        return this.api.updateConnection(id, request).pipe(this.reloadOnConflict(id), switchMap(() => this.refreshConnection(id)), tap(() => this.showSuccess('connection-updated')), finalize(() => this.mutationLoading.set(null)));
     }
     deleteConnection(id, concurrencyToken) {
         this.mutationLoading.set('delete');
-        return this.api.deleteConnection(id, concurrencyToken).pipe(switchMap(() => forkJoin({
+        return this.api.deleteConnection(id, concurrencyToken).pipe(this.reloadOnConflict(id), switchMap(() => forkJoin({
             connections: this.loadConnections(),
             status: this.loadStatus(),
         })), tap(() => {
@@ -270,26 +400,33 @@ class EmailDeliveryFacade {
     }
     validateConnection(id) {
         this.mutationLoading.set('validate');
-        return this.api.validateConnection(id).pipe(switchMap((result) => this.refreshConnection(id).pipe(map(() => result))), tap((result) => result.isValid
+        return this.api.validateConnection(id).pipe(this.reloadOnConflict(id), switchMap((result) => this.refreshConnection(id).pipe(map(() => result))), tap((result) => result.isValid
             ? this.toast.success(this.describeCode(result.code))
             : this.toast.warn(this.describeCode(result.code))), finalize(() => this.mutationLoading.set(null)));
     }
     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');
-        return this.api.bindConnection(purpose, id).pipe(switchMap(() => this.refreshConnection(id)), tap(() => this.showSuccess('connection-bound')), map(() => undefined), finalize(() => this.mutationLoading.set(null)));
+        return this.api.bindConnection(purpose, id).pipe(this.reloadOnConflict(id), switchMap(() => this.refreshConnection(id)), tap(() => this.showSuccess('connection-bound')), map(() => undefined), finalize(() => this.mutationLoading.set(null)));
     }
     unbindConnection(id, purpose = 'notifications') {
         this.mutationLoading.set('unbind');
-        return this.api.unbindConnection(purpose).pipe(switchMap(() => this.refreshConnection(id)), tap(() => this.showSuccess('connection-unbound')), map(() => undefined), finalize(() => this.mutationLoading.set(null)));
+        return this.api.unbindConnection(purpose).pipe(this.reloadOnConflict(id), switchMap(() => this.refreshConnection(id)), tap(() => this.showSuccess('connection-unbound')), map(() => undefined), finalize(() => this.mutationLoading.set(null)));
     }
     startAuthorization(id, kind) {
         this.mutationLoading.set(kind);
@@ -300,7 +437,7 @@ class EmailDeliveryFacade {
     }
     revokeAuthorization(id) {
         this.mutationLoading.set('revoke');
-        return this.api.revokeAuthorization(id).pipe(switchMap(() => this.refreshConnection(id)), tap(() => this.showSuccess('authorization-revoked')), map(() => undefined), finalize(() => this.mutationLoading.set(null)));
+        return this.api.revokeAuthorization(id).pipe(this.reloadOnConflict(id), switchMap(() => this.refreshConnection(id)), tap(() => this.showSuccess('authorization-revoked')), map(() => undefined), finalize(() => this.mutationLoading.set(null)));
     }
     loadAttempts(reset = true, status = this.attemptStatusFilter()) {
         this.attemptsLoading.set(true);
@@ -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)));
@@ -394,25 +532,81 @@ class EmailDeliveryFacade {
         const action = this.transloco.translate(actionKey);
         return action === actionKey ? code : `${action} (${code})`;
     }
+    /**
+     * The one sentence every failure path shows. It prefers the backend's stable
+     * code, falls back to the transport status the contract assigns a required
+     * behaviour to (401/403/409/422/428/429/503), and always appends the
+     * correlation ID when one is available — that identifier is what support asks
+     * for, and it is the only part of a failure this page is allowed to keep.
+     */
     describeError(error) {
-        const problem = extractProblem(error);
-        const base = this.describeCode(problem?.code);
-        return problem?.correlationId
-            ? `${base} (${this.transloco.translate('email-delivery.correlation-id')}: ${problem.correlationId})`
-            : base;
+        const failure = extractFailure(error);
+        const parts = [this.describeFailure(failure)];
+        if (failure.retryAfterSeconds !== null) {
+            parts.push(this.transloco.translate('email-delivery.retry-after', {
+                seconds: failure.retryAfterSeconds,
+            }));
+        }
+        if (failure.correlationId) {
+            parts.push(`${this.transloco.translate('email-delivery.correlation-id')}: ${failure.correlationId}`);
+        }
+        return parts.join(' ');
     }
     errorAction(error) {
-        const problem = extractProblem(error);
-        if (!problem)
-            return null;
-        return (problem.action ||
-            this.errorCatalog().find((entry) => entry.code === problem.code)
+        const failure = extractFailure(error);
+        return (failure.action ||
+            this.errorCatalog().find((entry) => entry.code === failure.code)
                 ?.frontendAction ||
-            null);
+            statusAction(failure.status));
     }
     showError(error) {
         this.toast.error(this.describeError(error));
     }
+    /**
+     * A `409` means the server state moved under this page. The contract requires
+     * reloading it rather than re-submitting over it, so every mutation that can
+     * conflict routes through here: the latest connection, list and readiness are
+     * pulled back before the caller sees the rejection.
+     */
+    reloadOnConflict(id) {
+        return catchError((error) => {
+            if (statusOf(error) !== 409)
+                return throwError(() => error);
+            const reload = id
+                ? this.refreshConnection(id).pipe(map(() => undefined))
+                : forkJoin({
+                    connections: this.loadConnections(),
+                    status: this.loadStatus(),
+                }).pipe(map(() => undefined));
+            reload.subscribe({ error: () => undefined });
+            return throwError(() => error);
+        });
+    }
+    describeFailure(failure) {
+        const translated = failure.code ? this.translateCode(failure.code) : null;
+        if (translated)
+            return translated;
+        const statusMessage = this.translateStatus(failure.status);
+        if (statusMessage) {
+            return failure.code
+                ? `${statusMessage} (${failure.code})`
+                : statusMessage;
+        }
+        return this.describeCode(failure.code);
+    }
+    translateCode(code) {
+        const key = `email-delivery.codes.${code}`;
+        const translated = this.transloco.translate(key);
+        return translated === key ? null : translated;
+    }
+    translateStatus(status) {
+        const key = status === null ? null : HTTP_STATUS_KEYS[status];
+        if (!key)
+            return null;
+        const fullKey = `email-delivery.http.${key}`;
+        const translated = this.transloco.translate(fullKey);
+        return translated === fullKey ? null : translated;
+    }
     takePendingAuthorizationConnection() {
         if (typeof sessionStorage === 'undefined')
             return null;
@@ -420,6 +614,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),
@@ -446,20 +651,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
-function extractProblem(error) {
-    if (error instanceof HttpErrorResponse) {
-        const value = error.error;
-        return value && typeof value.code === 'string'
-            ? value
-            : null;
-    }
-    if (typeof error === 'object' &&
-        error !== null &&
-        typeof error.code === 'string') {
-        return error;
+const HTTP_STATUS_KEYS = {
+    401: 'unauthorized',
+    403: 'forbidden',
+    409: 'conflict',
+    422: 'unprocessable',
+    428: 'authorization-required',
+    429: 'too-many-requests',
+    503: 'unavailable',
+};
+const HTTP_STATUS_ACTIONS = {
+    403: 'request_permission',
+    409: 'refresh',
+    422: 'correct_configuration',
+    428: 'authorize',
+    429: 'retry_later',
+    503: 'retry_later',
+};
+function statusAction(status) {
+    return status === null ? null : (HTTP_STATUS_ACTIONS[status] ?? null);
+}
+function statusOf(error) {
+    return error instanceof HttpErrorResponse ? error.status : null;
+}
+function extractFailure(error) {
+    const body = error instanceof HttpErrorResponse ? error.error : error;
+    const problem = readProblem(body);
+    const headers = error instanceof HttpErrorResponse ? error.headers : null;
+    return {
+        code: problem?.code ?? null,
+        action: problem?.action || null,
+        correlationId: problem?.correlationId ||
+            headers?.get('x-correlation-id') ||
+            headers?.get('correlation-id') ||
+            null,
+        retryAfterSeconds: problem?.retryAfterSeconds ??
+            parseRetryAfter(headers?.get('retry-after') ?? null),
+        status: statusOf(error),
+    };
+}
+/**
+ * Two envelopes reach this page. The email contract answers with the problem
+ * shape itself; Gateway rejects a request before it ever gets there and answers
+ * with `{ errors: { code, message } }` — that is how `REQ_001` arrives, and
+ * reading only the first shape lost it.
+ */
+function readProblem(body) {
+    if (typeof body !== 'object' || body === null)
+        return null;
+    const problem = body;
+    if (typeof problem.code === 'string')
+        return problem;
+    const gatewayCode = problem.errors?.code;
+    if (typeof gatewayCode === 'string') {
+        return { ...problem, code: gatewayCode };
     }
     return null;
 }
+/**
+ * `Retry-After` is either a delay in seconds or an HTTP date. Both become a
+ * whole number of seconds so the message can say when to try again; anything
+ * unparseable or already in the past is simply not offered.
+ */
+function parseRetryAfter(value) {
+    if (!value)
+        return null;
+    const seconds = Number(value);
+    if (Number.isFinite(seconds)) {
+        return seconds > 0 ? Math.ceil(seconds) : null;
+    }
+    const date = Date.parse(value);
+    if (Number.isNaN(date))
+        return null;
+    const delta = Math.ceil((date - Date.now()) / 1000);
+    return delta > 0 ? delta : null;
+}
 function mergeById(current, incoming, key) {
     const values = new Map(current.map((item) => [item[key], item]));
     incoming.forEach((item) => values.set(item[key], item));
@@ -475,103 +741,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 +774,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'\">\r\n  <form\r\n    [class]=\"'space-y-5 p-4 sm:p-5 ' + modal.contentClass\"\r\n    (ngSubmit)=\"confirm()\"\r\n  >\r\n    <div\r\n      class=\"rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-950\"\r\n      role=\"note\"\r\n    >\r\n      <p class=\"m-0 break-words font-semibold\">{{ itemName() }}</p>\r\n      <p class=\"mb-0 mt-1\">{{ consequence() }}</p>\r\n    </div>\r\n\r\n    <mt-textarea-field\r\n      [formControl]=\"reason\"\r\n      [label]=\"t('operator-reason')\"\r\n      [hint]=\"t('operator-reason-hint')\"\r\n      [required]=\"true\"\r\n      [maxLength]=\"500\"\r\n      rows=\"4\"\r\n    />\r\n\r\n    @if (showExceptionalOverride()) {\r\n      <div class=\"flex flex-col gap-1\">\r\n        <mt-toggle-field\r\n          [formControl]=\"exceptionalOverride\"\r\n          [label]=\"t('exceptional-override')\"\r\n        />\r\n        <!-- mt-toggle-field has no hint input, so the consequence of an\r\n             exceptional replay is rendered here instead of silently dropped. -->\r\n        <p class=\"m-0 text-xs text-muted-color\">\r\n          {{ t(\"exceptional-override-hint\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </form>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      type=\"button\"\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      type=\"button\"\r\n      severity=\"warn\"\r\n      [label]=\"confirmLabel() || t('confirm-action')\"\r\n      [disabled]=\"!canConfirm()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"confirm()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailOperatorReasonDialog, decorators: [{
             type: Component,
@@ -615,7 +784,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'\">\r\n  <form\r\n    [class]=\"'space-y-5 p-4 sm:p-5 ' + modal.contentClass\"\r\n    (ngSubmit)=\"confirm()\"\r\n  >\r\n    <div\r\n      class=\"rounded-md border border-amber-200 bg-amber-50 p-4 text-sm text-amber-950\"\r\n      role=\"note\"\r\n    >\r\n      <p class=\"m-0 break-words font-semibold\">{{ itemName() }}</p>\r\n      <p class=\"mb-0 mt-1\">{{ consequence() }}</p>\r\n    </div>\r\n\r\n    <mt-textarea-field\r\n      [formControl]=\"reason\"\r\n      [label]=\"t('operator-reason')\"\r\n      [hint]=\"t('operator-reason-hint')\"\r\n      [required]=\"true\"\r\n      [maxLength]=\"500\"\r\n      rows=\"4\"\r\n    />\r\n\r\n    @if (showExceptionalOverride()) {\r\n      <div class=\"flex flex-col gap-1\">\r\n        <mt-toggle-field\r\n          [formControl]=\"exceptionalOverride\"\r\n          [label]=\"t('exceptional-override')\"\r\n        />\r\n        <!-- mt-toggle-field has no hint input, so the consequence of an\r\n             exceptional replay is rendered here instead of silently dropped. -->\r\n        <p class=\"m-0 text-xs text-muted-color\">\r\n          {{ t(\"exceptional-override-hint\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n  </form>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      type=\"button\"\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      type=\"button\"\r\n      severity=\"warn\"\r\n      [label]=\"confirmLabel() || t('confirm-action')\"\r\n      [disabled]=\"!canConfirm()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"confirm()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
         }], propDecorators: { itemName: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemName", required: true }] }], consequence: [{ type: i0.Input, args: [{ isSignal: true, alias: "consequence", required: true }] }], showExceptionalOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExceptionalOverride", required: false }] }], confirmLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmLabel", required: false }] }] } });
 
 class EmailAttemptDetails {
@@ -624,7 +793,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 +855,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'\">\r\n  @if (attempt(); as item) {\r\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\r\n      <div class=\"grid w-full gap-5\">\r\n        <div\r\n          class=\"rounded-md border px-4 py-3 text-sm\"\r\n          [class.border-amber-200]=\"item.status === 'OutcomeUnknown'\"\r\n          [class.bg-amber-50]=\"item.status === 'OutcomeUnknown'\"\r\n          [class.border-blue-200]=\"item.status !== 'OutcomeUnknown'\"\r\n          [class.bg-blue-50]=\"item.status !== 'OutcomeUnknown'\"\r\n          role=\"status\"\r\n        >\r\n          @if (item.status === \"OutcomeUnknown\") {\r\n            {{ t(\"outcome-unknown-copy\") }}\r\n          } @else if (item.outcome === \"Accepted\") {\r\n            {{ t(\"accepted-copy\") }}\r\n          } @else {\r\n            {{ facade.describeCode(item.resultCode) }}\r\n          }\r\n        </div>\r\n\r\n        <!-- Same section shape the connection form uses (mt-client-form section\r\n             mode): header strip on a bordered, flat, rounded-md container. -->\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"delivery-summary\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.operation\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{\r\n                  isConnectionTest()\r\n                    ? t(\"operation.connection-test\")\r\n                    : item.operationKind\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.status\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-2\">\r\n                <mt-email-delivery-status\r\n                  kind=\"attempt\"\r\n                  [value]=\"item.status\"\r\n                />\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.outcome\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-2\">\r\n                @if (item.outcome) {\r\n                  <mt-email-delivery-status\r\n                    kind=\"attempt\"\r\n                    [value]=\"item.outcome\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"font-medium text-color\">\u2014</span>\r\n                }\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.provider\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ providerLabel(item.providerKey) }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.created\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                <time [attr.datetime]=\"item.createdAtUtc\">{{\r\n                  item.createdAtUtc | date: \"medium\"\r\n                }}</time>\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.count\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{ item.attemptCount }}\r\n              </dd>\r\n            </div>\r\n          </dl>\r\n        </section>\r\n\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"technical-identifiers\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"recipient-fingerprint\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                {{ item.recipientFingerprint }}\r\n              </dd>\r\n              <p class=\"mt-2 text-xs text-muted-color\">\r\n                {{ t(\"recipient-fingerprint-hint\") }}\r\n              </p>\r\n            </div>\r\n            @if (item.testRequestId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"test-request-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.testRequestId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">{{ t(\"attempt.id\") }}</dt>\r\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                {{ item.id }}\r\n              </dd>\r\n            </div>\r\n            @if (item.correlationId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"correlation-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.correlationId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n            @if (item.providerRequestId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"provider-request-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.providerRequestId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n          </dl>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button\r\n        [label]=\"t('close')\"\r\n        variant=\"outlined\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"close()\"\r\n      />\r\n      @if (canReplay()) {\r\n        <mt-button\r\n          severity=\"warn\"\r\n          icon=\"arrow.refresh-cw-01\"\r\n          [label]=\"t('replay-attempt')\"\r\n          [disabled]=\"!facade.managementAvailable()\"\r\n          [loading]=\"facade.mutationLoading() === 'replay-' + item.id\"\r\n          styleClass=\"w-full sm:w-auto\"\r\n          (onClick)=\"replay()\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailAttemptDetails, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-email-attempt-details', imports: [DatePipe, TranslocoDirective, Button, 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'\">\r\n  @if (attempt(); as item) {\r\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\r\n      <div class=\"grid w-full gap-5\">\r\n        <div\r\n          class=\"rounded-md border px-4 py-3 text-sm\"\r\n          [class.border-amber-200]=\"item.status === 'OutcomeUnknown'\"\r\n          [class.bg-amber-50]=\"item.status === 'OutcomeUnknown'\"\r\n          [class.border-blue-200]=\"item.status !== 'OutcomeUnknown'\"\r\n          [class.bg-blue-50]=\"item.status !== 'OutcomeUnknown'\"\r\n          role=\"status\"\r\n        >\r\n          @if (item.status === \"OutcomeUnknown\") {\r\n            {{ t(\"outcome-unknown-copy\") }}\r\n          } @else if (item.outcome === \"Accepted\") {\r\n            {{ t(\"accepted-copy\") }}\r\n          } @else {\r\n            {{ facade.describeCode(item.resultCode) }}\r\n          }\r\n        </div>\r\n\r\n        <!-- Same section shape the connection form uses (mt-client-form section\r\n             mode): header strip on a bordered, flat, rounded-md container. -->\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"delivery-summary\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.operation\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{\r\n                  isConnectionTest()\r\n                    ? t(\"operation.connection-test\")\r\n                    : item.operationKind\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.status\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-2\">\r\n                <mt-email-delivery-status\r\n                  kind=\"attempt\"\r\n                  [value]=\"item.status\"\r\n                />\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.outcome\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-2\">\r\n                @if (item.outcome) {\r\n                  <mt-email-delivery-status\r\n                    kind=\"attempt\"\r\n                    [value]=\"item.outcome\"\r\n                  />\r\n                } @else {\r\n                  <span class=\"font-medium text-color\">\u2014</span>\r\n                }\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.provider\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ providerLabel(item.providerKey) }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.created\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                <time [attr.datetime]=\"item.createdAtUtc\">{{\r\n                  item.createdAtUtc | date: \"medium\"\r\n                }}</time>\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"attempt.count\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{ item.attemptCount }}\r\n              </dd>\r\n            </div>\r\n          </dl>\r\n        </section>\r\n\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"technical-identifiers\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"recipient-fingerprint\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                {{ item.recipientFingerprint }}\r\n              </dd>\r\n              <p class=\"mt-2 text-xs text-muted-color\">\r\n                {{ t(\"recipient-fingerprint-hint\") }}\r\n              </p>\r\n            </div>\r\n            @if (item.testRequestId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"test-request-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.testRequestId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">{{ t(\"attempt.id\") }}</dt>\r\n              <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                {{ item.id }}\r\n              </dd>\r\n            </div>\r\n            @if (item.correlationId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"correlation-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.correlationId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n            @if (item.providerRequestId) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"provider-request-id\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-all font-mono text-sm text-color\">\r\n                  {{ item.providerRequestId }}\r\n                </dd>\r\n              </div>\r\n            }\r\n          </dl>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button\r\n        [label]=\"t('close')\"\r\n        variant=\"outlined\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"close()\"\r\n      />\r\n      @if (canReplay()) {\r\n        <mt-button\r\n          severity=\"warn\"\r\n          icon=\"arrow.refresh-cw-01\"\r\n          [label]=\"t('replay-attempt')\"\r\n          [disabled]=\"!facade.managementAvailable()\"\r\n          [loading]=\"facade.mutationLoading() === 'replay-' + item.id\"\r\n          styleClass=\"w-full sm:w-auto\"\r\n          (onClick)=\"replay()\"\r\n        />\r\n      }\r\n    </div>\r\n  }\r\n</ng-container>\r\n" }]
         }], propDecorators: { attempt: [{ type: i0.Input, args: [{ isSignal: true, alias: "attempt", required: true }] }] } });
 function isExceptionalReplay(status) {
     return status === 'Accepted' || status === 'OutcomeUnknown';
 }
 
+/**
+ * Shared chrome for the Email Delivery overlays.
+ *
+ * Every drawer on this page opens over the page content (`appendTo:
+ * 'page-content'`), so it is positioned absolutely and drops its own shadow.
+ * It takes the full width only while there is no room to spare — from `lg` up
+ * it settles at half the page so the table stays readable behind it, which is
+ * also what keeps the forms and callouts inside from stretching into
+ * unreadably long lines.
+ */
+const EMAIL_DELIVERY_DRAWER_STYLE_CLASS = '!absolute !shadow-none !w-full !max-w-full md:!w-[70%] lg:!w-[50%]';
+
 class EmailDeliveryAttempts {
     modal = inject(ModalService);
     transloco = inject(TranslocoService);
     facade = inject(EmailDeliveryFacade);
-    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 +985,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 +1005,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 +1017,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'\">\r\n  <section class=\"space-y-4\" aria-label=\"{{ t('activity-title') }}\">\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [filters]=\"tableFilters()\"\r\n      [loading]=\"facade.attemptsLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-attempts-title')\"\r\n      [emptyDescription]=\"t('no-attempts-description')\"\r\n      filterMode=\"column\"\r\n      dataKey=\"id\"\r\n      actionShape=\"popover\"\r\n      [clickableRows]=\"true\"\r\n      storageKey=\"email-delivery-attempts\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (rowClick)=\"openDetails($event)\"\r\n    >\r\n      <ng-template #captionEnd>\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          icon=\"arrow.refresh-cw-01\"\r\n          [label]=\"t('refresh')\"\r\n          [loading]=\"facade.attemptsLoading()\"\r\n          (onClick)=\"refresh()\"\r\n        />\r\n      </ng-template>\r\n    </mt-table>\r\n\r\n    @if (facade.attemptsNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.attemptsLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryAttempts, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-email-delivery-attempts', imports: [
-                        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'\">\r\n  <section class=\"space-y-4\" aria-label=\"{{ t('activity-title') }}\">\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [filters]=\"tableFilters()\"\r\n      [loading]=\"facade.attemptsLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-attempts-title')\"\r\n      [emptyDescription]=\"t('no-attempts-description')\"\r\n      filterMode=\"column\"\r\n      dataKey=\"id\"\r\n      actionShape=\"popover\"\r\n      [clickableRows]=\"true\"\r\n      storageKey=\"email-delivery-attempts\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (rowClick)=\"openDetails($event)\"\r\n    >\r\n      <ng-template #captionEnd>\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          icon=\"arrow.refresh-cw-01\"\r\n          [label]=\"t('refresh')\"\r\n          [loading]=\"facade.attemptsLoading()\"\r\n          (onClick)=\"refresh()\"\r\n        />\r\n      </ng-template>\r\n    </mt-table>\r\n\r\n    @if (facade.attemptsNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.attemptsLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n" }]
         }] });
+/**
+ * The status column is a single-select, so its stored value is the raw status.
+ * An empty selection clears the backend filter rather than sending a blank.
+ */
+function readStatusFilter(value) {
+    const raw = Array.isArray(value) ? value[0] : value;
+    return typeof raw === 'string' && raw.trim() !== '' ? raw : null;
+}
+const FINGERPRINT_PREFIX_LENGTH = 12;
+/**
+ * A 64-character hash has nowhere to wrap, so rendering it whole pushed its
+ * column far past the width the table asked for. The list only needs enough of
+ * it to tell two recipients apart; the drawer still shows the value in full.
+ */
+function shortenFingerprint(value) {
+    if (!value)
+        return '—';
+    return value.length > FINGERPRINT_PREFIX_LENGTH
+        ? value.slice(0, FINGERPRINT_PREFIX_LENGTH) + '…'
+        : value;
+}
 
 class EmailDeliveryHostEvidence {
     document = inject(DOCUMENT);
@@ -801,30 +1094,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 +1233,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'\">\r\n  <section class=\"space-y-3\" aria-labelledby=\"host-evidence-heading\">\r\n    <div\r\n      class=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\"\r\n    >\r\n      <div>\r\n        <h3 id=\"host-evidence-heading\" class=\"font-semibold text-color\">\r\n          {{ t(\"host-evidence-title\") }}\r\n        </h3>\r\n        <p class=\"mt-1 text-sm text-muted-color\">\r\n          {{ t(\"host-evidence-description\") }}\r\n        </p>\r\n      </div>\r\n      <mt-button\r\n        severity=\"secondary\"\r\n        variant=\"outlined\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [label]=\"t('rebuild-evidence-index')\"\r\n        [disabled]=\"!facade.managementAvailable()\"\r\n        [loading]=\"facade.mutationLoading() === 'rebuild-evidence'\"\r\n        (onClick)=\"confirmRebuild()\"\r\n      />\r\n    </div>\r\n\r\n    @if (facade.hostEvidenceScanBudgetExhausted()) {\r\n      <div\r\n        class=\"rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-950\"\r\n        role=\"status\"\r\n      >\r\n        {{ t(\"scan-budget-exhausted\") }}\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [loading]=\"facade.hostEvidenceLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-evidence-title')\"\r\n      [emptyDescription]=\"t('no-evidence-description')\"\r\n      filterMode=\"column\"\r\n      actionShape=\"popover\"\r\n      dataKey=\"evidenceRowId\"\r\n      storageKey=\"email-delivery-host-evidence\"\r\n    />\r\n\r\n    @if (facade.hostEvidenceNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.hostEvidenceLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryHostEvidence, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-email-delivery-host-evidence', imports: [TranslocoDirective, Button, 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'\">\r\n  <section class=\"space-y-3\" aria-labelledby=\"host-evidence-heading\">\r\n    <div\r\n      class=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\"\r\n    >\r\n      <div>\r\n        <h3 id=\"host-evidence-heading\" class=\"font-semibold text-color\">\r\n          {{ t(\"host-evidence-title\") }}\r\n        </h3>\r\n        <p class=\"mt-1 text-sm text-muted-color\">\r\n          {{ t(\"host-evidence-description\") }}\r\n        </p>\r\n      </div>\r\n      <mt-button\r\n        severity=\"secondary\"\r\n        variant=\"outlined\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [label]=\"t('rebuild-evidence-index')\"\r\n        [disabled]=\"!facade.managementAvailable()\"\r\n        [loading]=\"facade.mutationLoading() === 'rebuild-evidence'\"\r\n        (onClick)=\"confirmRebuild()\"\r\n      />\r\n    </div>\r\n\r\n    @if (facade.hostEvidenceScanBudgetExhausted()) {\r\n      <div\r\n        class=\"rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-950\"\r\n        role=\"status\"\r\n      >\r\n        {{ t(\"scan-budget-exhausted\") }}\r\n      </div>\r\n    }\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [loading]=\"facade.hostEvidenceLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-evidence-title')\"\r\n      [emptyDescription]=\"t('no-evidence-description')\"\r\n      filterMode=\"column\"\r\n      actionShape=\"popover\"\r\n      dataKey=\"evidenceRowId\"\r\n      storageKey=\"email-delivery-host-evidence\"\r\n    />\r\n\r\n    @if (facade.hostEvidenceNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.hostEvidenceLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n" }]
         }] });
 function identifierEntity$1(value) {
     return {
@@ -980,13 +1280,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 +1295,7 @@ class EmailDeliveryQuarantine {
                 key: 'quarantinedAtUtc',
                 label: this.t('detected'),
                 type: 'dateTime',
+                width: '10rem',
             },
         ];
     }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -1056,11 +1358,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'\">\r\n  <section class=\"space-y-3\" aria-labelledby=\"quarantine-heading\">\r\n    <div>\r\n      <h3 id=\"quarantine-heading\" class=\"font-semibold text-color\">\r\n        {{ t(\"quarantine-title\") }}\r\n      </h3>\r\n      <p class=\"mt-1 text-sm text-muted-color\">\r\n        {{ t(\"quarantine-description\") }}\r\n      </p>\r\n    </div>\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [loading]=\"facade.quarantineLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-quarantine-title')\"\r\n      [emptyDescription]=\"t('no-quarantine-description')\"\r\n      filterMode=\"column\"\r\n      actionShape=\"popover\"\r\n      dataKey=\"itemId\"\r\n      storageKey=\"email-delivery-quarantine\"\r\n    />\r\n\r\n    @if (facade.quarantineNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.quarantineLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryQuarantine, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-email-delivery-quarantine', imports: [TranslocoDirective, Button, 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'\">\r\n  <section class=\"space-y-3\" aria-labelledby=\"quarantine-heading\">\r\n    <div>\r\n      <h3 id=\"quarantine-heading\" class=\"font-semibold text-color\">\r\n        {{ t(\"quarantine-title\") }}\r\n      </h3>\r\n      <p class=\"mt-1 text-sm text-muted-color\">\r\n        {{ t(\"quarantine-description\") }}\r\n      </p>\r\n    </div>\r\n\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [loading]=\"facade.quarantineLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-quarantine-title')\"\r\n      [emptyDescription]=\"t('no-quarantine-description')\"\r\n      filterMode=\"column\"\r\n      actionShape=\"popover\"\r\n      dataKey=\"itemId\"\r\n      storageKey=\"email-delivery-quarantine\"\r\n    />\r\n\r\n    @if (facade.quarantineNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.quarantineLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n" }]
         }] });
 function identifierEntity(value) {
     return {
@@ -1077,7 +1379,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'\">\r\n  <div class=\"grid gap-5\">\r\n    <mt-email-delivery-attempts class=\"block min-w-0\" />\r\n\r\n    <!-- Operator recovery tools. Kept collapsed and visually quieter than the\r\n         Activity table above it: they are for incident work, not daily use. -->\r\n    <details\r\n      class=\"group overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n      (toggle)=\"onAdvancedToggle($event)\"\r\n    >\r\n      <summary\r\n        class=\"flex cursor-pointer list-none items-center gap-3 p-4 focus-visible:outline-2 focus-visible:outline-offset-2\"\r\n      >\r\n        <span\r\n          class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-surface-100 text-muted-color\"\r\n        >\r\n          <mt-icon icon=\"general.tool-02\" aria-hidden=\"true\" />\r\n        </span>\r\n        <span class=\"min-w-0 flex-1\">\r\n          <span class=\"block font-semibold text-color\">\r\n            {{ t(\"advanced-support\") }}\r\n          </span>\r\n          <span class=\"mt-0.5 block text-sm font-normal text-muted-color\">\r\n            {{ t(\"advanced-support-description\") }}\r\n          </span>\r\n        </span>\r\n        <mt-icon\r\n          icon=\"arrow.chevron-down\"\r\n          aria-hidden=\"true\"\r\n          class=\"shrink-0 text-base text-muted-color transition-transform group-open:rotate-180\"\r\n        />\r\n      </summary>\r\n      @if (advancedExpanded()) {\r\n        <div\r\n          class=\"grid gap-4 border-t border-surface-200 bg-surface-50/60 p-4 sm:p-5\"\r\n        >\r\n          <mt-email-delivery-quarantine class=\"block min-w-0\" />\r\n          <mt-email-delivery-host-evidence class=\"block min-w-0\" />\r\n        </div>\r\n      }\r\n    </details>\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: EmailDeliveryAttempts, selector: "mt-email-delivery-attempts" }, { kind: "component", type: EmailDeliveryQuarantine, selector: "mt-email-delivery-quarantine" }, { kind: "component", type: EmailDeliveryHostEvidence, selector: "mt-email-delivery-host-evidence" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryActivity, decorators: [{
             type: Component,
@@ -1087,7 +1389,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'\">\r\n  <div class=\"grid gap-5\">\r\n    <mt-email-delivery-attempts class=\"block min-w-0\" />\r\n\r\n    <!-- Operator recovery tools. Kept collapsed and visually quieter than the\r\n         Activity table above it: they are for incident work, not daily use. -->\r\n    <details\r\n      class=\"group overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n      (toggle)=\"onAdvancedToggle($event)\"\r\n    >\r\n      <summary\r\n        class=\"flex cursor-pointer list-none items-center gap-3 p-4 focus-visible:outline-2 focus-visible:outline-offset-2\"\r\n      >\r\n        <span\r\n          class=\"inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-surface-100 text-muted-color\"\r\n        >\r\n          <mt-icon icon=\"general.tool-02\" aria-hidden=\"true\" />\r\n        </span>\r\n        <span class=\"min-w-0 flex-1\">\r\n          <span class=\"block font-semibold text-color\">\r\n            {{ t(\"advanced-support\") }}\r\n          </span>\r\n          <span class=\"mt-0.5 block text-sm font-normal text-muted-color\">\r\n            {{ t(\"advanced-support-description\") }}\r\n          </span>\r\n        </span>\r\n        <mt-icon\r\n          icon=\"arrow.chevron-down\"\r\n          aria-hidden=\"true\"\r\n          class=\"shrink-0 text-base text-muted-color transition-transform group-open:rotate-180\"\r\n        />\r\n      </summary>\r\n      @if (advancedExpanded()) {\r\n        <div\r\n          class=\"grid gap-4 border-t border-surface-200 bg-surface-50/60 p-4 sm:p-5\"\r\n        >\r\n          <mt-email-delivery-quarantine class=\"block min-w-0\" />\r\n          <mt-email-delivery-host-evidence class=\"block min-w-0\" />\r\n        </div>\r\n      }\r\n    </details>\r\n  </div>\r\n</ng-container>\r\n" }]
         }] });
 
 class EmailControlledTestDialog {
@@ -1106,7 +1408,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 +1462,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();
@@ -1186,6 +1497,13 @@ class EmailControlledTestDialog {
                     return;
                 }
                 this.facade.showError(error);
+                // The backend rejected this GUID because it already stands for a
+                // different send. Retrieving it would return someone else's test and
+                // reusing it can never succeed, so the dialog mints a fresh one and
+                // waits for the operator to press Send again — it never resends.
+                if (isTestRequestConflict(error)) {
+                    this.testRequestId.set(createId());
+                }
             },
         });
     }
@@ -1249,7 +1567,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'\">\r\n  <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\r\n    <div\r\n      class=\"mb-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950\"\r\n      role=\"note\"\r\n    >\r\n      <strong>{{ t(\"test.real-email-warning-title\") }}</strong>\r\n      {{ t(\"test.real-email-warning\") }}\r\n    </div>\r\n\r\n    <!-- The GUID this dialog will keep for the whole exchange. It is what a\r\n         lost response is retrieved with, so the operator can record it before\r\n         sending rather than reconstructing it afterwards. -->\r\n    <p class=\"mb-4 text-xs text-muted-color\">\r\n      {{ t(\"test-request-id\") }}:\r\n      <span class=\"break-all font-mono\">{{ testRequestId() }}</span>\r\n    </p>\r\n\r\n    @if (!result()) {\r\n      <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\r\n    }\r\n\r\n    @if (timedOut()) {\r\n      <div\r\n        class=\"mt-4 rounded-md border border-orange-200 bg-orange-50 px-4 py-3\"\r\n        role=\"alert\"\r\n      >\r\n        <p class=\"font-semibold text-orange-950\">\r\n          {{ t(\"test.timeout-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 text-sm text-orange-900\">\r\n          {{ t(\"test.timeout-description\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n\r\n    @if (result(); as testResult) {\r\n      <div\r\n        class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-4\"\r\n        aria-live=\"polite\"\r\n      >\r\n        <mt-email-delivery-status kind=\"attempt\" [value]=\"testResult.outcome\" />\r\n        <p class=\"mt-1 text-sm text-muted-color\">\r\n          {{ facade.describeCode(testResult.code) }}\r\n        </p>\r\n        @if (showsAcceptedCaveat(testResult)) {\r\n          <p class=\"mt-3 text-sm font-medium text-amber-800\">\r\n            {{ t(\"accepted-unconfirmed\") }}\r\n          </p>\r\n        }\r\n        @if (testResult.outcome === \"OutcomeUnknown\") {\r\n          <p class=\"mt-3 text-sm font-medium text-red-700\">\r\n            {{ t(\"outcome-unknown-warning\") }}\r\n          </p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      severity=\"secondary\"\r\n      variant=\"outlined\"\r\n      [label]=\"t('close')\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"close()\"\r\n    />\r\n    @if (timedOut()) {\r\n      <mt-button\r\n        [label]=\"t('test.retrieve')\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [disabled]=\"polling()\"\r\n        [loading]=\"polling() || facade.mutationLoading() === 'retrieve-test'\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"retrieve()\"\r\n      />\r\n    } @else if (!result()) {\r\n      <mt-button\r\n        [label]=\"t('test.send')\"\r\n        icon=\"communication.send-01\"\r\n        [disabled]=\"!canSubmit()\"\r\n        [loading]=\"facade.mutationLoading() === 'test'\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"submit()\"\r\n      />\r\n    }\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailControlledTestDialog, decorators: [{
             type: Component,
@@ -1259,8 +1577,16 @@ 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'\">\r\n  <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\r\n    <div\r\n      class=\"mb-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950\"\r\n      role=\"note\"\r\n    >\r\n      <strong>{{ t(\"test.real-email-warning-title\") }}</strong>\r\n      {{ t(\"test.real-email-warning\") }}\r\n    </div>\r\n\r\n    <!-- The GUID this dialog will keep for the whole exchange. It is what a\r\n         lost response is retrieved with, so the operator can record it before\r\n         sending rather than reconstructing it afterwards. -->\r\n    <p class=\"mb-4 text-xs text-muted-color\">\r\n      {{ t(\"test-request-id\") }}:\r\n      <span class=\"break-all font-mono\">{{ testRequestId() }}</span>\r\n    </p>\r\n\r\n    @if (!result()) {\r\n      <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\r\n    }\r\n\r\n    @if (timedOut()) {\r\n      <div\r\n        class=\"mt-4 rounded-md border border-orange-200 bg-orange-50 px-4 py-3\"\r\n        role=\"alert\"\r\n      >\r\n        <p class=\"font-semibold text-orange-950\">\r\n          {{ t(\"test.timeout-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 text-sm text-orange-900\">\r\n          {{ t(\"test.timeout-description\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n\r\n    @if (result(); as testResult) {\r\n      <div\r\n        class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-4\"\r\n        aria-live=\"polite\"\r\n      >\r\n        <mt-email-delivery-status kind=\"attempt\" [value]=\"testResult.outcome\" />\r\n        <p class=\"mt-1 text-sm text-muted-color\">\r\n          {{ facade.describeCode(testResult.code) }}\r\n        </p>\r\n        @if (showsAcceptedCaveat(testResult)) {\r\n          <p class=\"mt-3 text-sm font-medium text-amber-800\">\r\n            {{ t(\"accepted-unconfirmed\") }}\r\n          </p>\r\n        }\r\n        @if (testResult.outcome === \"OutcomeUnknown\") {\r\n          <p class=\"mt-3 text-sm font-medium text-red-700\">\r\n            {{ t(\"outcome-unknown-warning\") }}\r\n          </p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      severity=\"secondary\"\r\n      variant=\"outlined\"\r\n      [label]=\"t('close')\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"close()\"\r\n    />\r\n    @if (timedOut()) {\r\n      <mt-button\r\n        [label]=\"t('test.retrieve')\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [disabled]=\"polling()\"\r\n        [loading]=\"polling() || facade.mutationLoading() === 'retrieve-test'\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"retrieve()\"\r\n      />\r\n    } @else if (!result()) {\r\n      <mt-button\r\n        [label]=\"t('test.send')\"\r\n        icon=\"communication.send-01\"\r\n        [disabled]=\"!canSubmit()\"\r\n        [loading]=\"facade.mutationLoading() === 'test'\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"submit()\"\r\n      />\r\n    }\r\n  </div>\r\n</ng-container>\r\n" }]
         }], propDecorators: { connectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionId", required: true }] }], connectionName: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionName", required: true }] }] } });
+const ACCEPTED_DELIVERY_UNCONFIRMED_CODE = 'email.accepted_delivery_unconfirmed';
+const TEST_REQUEST_CONFLICT_CODE = 'email.delivery_test_request_conflict';
+function isTestRequestConflict(error) {
+    const body = error instanceof HttpErrorResponse ? error.error : error;
+    return (typeof body === 'object' &&
+        body !== null &&
+        body.code === TEST_REQUEST_CONFLICT_CODE);
+}
 const POLL_DELAYS_MS = [1_000, 2_000, 4_000, 5_000, 5_000, 5_000];
 function isPendingRequestState(value) {
     return !['Completed', 'Failed', 'Cancelled', 'Canceled'].includes(value);
@@ -1419,30 +1745,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 +1903,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 +2145,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'\">\r\n  <div\r\n    [class]=\"\r\n      'flex min-h-0 flex-col gap-5 overflow-y-auto p-4 sm:p-5 ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    @if (editorLoading()) {\r\n      <div\r\n        class=\"flex flex-col gap-5\"\r\n        role=\"status\"\r\n        [attr.aria-label]=\"t('loading')\"\r\n      >\r\n        @for (section of [1, 2, 3]; track section) {\r\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\r\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\r\n              <p-skeleton\r\n                width=\"10rem\"\r\n                height=\"1.25rem\"\r\n                borderRadius=\"0.375rem\"\r\n              />\r\n            </div>\r\n            <div class=\"grid gap-4 p-4 sm:grid-cols-2\">\r\n              @for (field of [1, 2, 3, 4]; track field) {\r\n                <p-skeleton height=\"3.25rem\" borderRadius=\"0.375rem\" />\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      @if (selectedProvider(); as provider) {\r\n        @if (provider.warnings.length > 0) {\r\n          <section\r\n            class=\"rounded-md border border-amber-200 bg-amber-50 p-4\"\r\n            role=\"note\"\r\n            aria-labelledby=\"provider-warnings-heading\"\r\n          >\r\n            <h2\r\n              id=\"provider-warnings-heading\"\r\n              class=\"m-0 text-sm font-semibold text-amber-950\"\r\n            >\r\n              {{ t(\"provider-warnings\") }}\r\n            </h2>\r\n            <ul\r\n              class=\"mb-0 mt-2.5 list-disc space-y-2 ps-5 text-sm leading-relaxed text-amber-900\"\r\n            >\r\n              @for (warning of provider.warnings; track warning) {\r\n                <li class=\"ps-1\">{{ warning }}</li>\r\n              }\r\n            </ul>\r\n          </section>\r\n        }\r\n      }\r\n\r\n      @if (isEdit()) {\r\n        <div\r\n          class=\"rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-950\"\r\n          role=\"note\"\r\n        >\r\n          {{ t(\"editor.update-invalidates-proof\") }}\r\n        </div>\r\n      }\r\n\r\n      @for (generation of [formGeneration()]; track generation) {\r\n        <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\r\n      }\r\n\r\n      @if (applicableFields().length === 0) {\r\n        <div\r\n          class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-3 text-sm text-muted-color\"\r\n        >\r\n          {{ t(\"editor.select-provider-mode\") }}\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"!!facade.mutationLoading()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-01\"\r\n      [disabled]=\"!canSave()\"\r\n      [loading]=\"facade.mutationLoading() === (isEdit() ? 'update' : 'create')\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: DynamicForm, selector: "mt-dynamic-form", inputs: ["formConfig", "forcedHiddenFieldKeys", "forcedDisabledFieldKeys", "preserveForcedHiddenValues", "visibleSectionKeys", "externalValues", "serverFieldErrors"], outputs: ["runtimeMessagesChange"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailConnectionEditor, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-email-connection-editor', imports: [ReactiveFormsModule, TranslocoDirective, 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'\">\r\n  <div\r\n    [class]=\"\r\n      'flex min-h-0 flex-col gap-5 overflow-y-auto p-4 sm:p-5 ' +\r\n      modal.contentClass\r\n    \"\r\n  >\r\n    @if (editorLoading()) {\r\n      <div\r\n        class=\"flex flex-col gap-5\"\r\n        role=\"status\"\r\n        [attr.aria-label]=\"t('loading')\"\r\n      >\r\n        @for (section of [1, 2, 3]; track section) {\r\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\r\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\r\n              <p-skeleton\r\n                width=\"10rem\"\r\n                height=\"1.25rem\"\r\n                borderRadius=\"0.375rem\"\r\n              />\r\n            </div>\r\n            <div class=\"grid gap-4 p-4 sm:grid-cols-2\">\r\n              @for (field of [1, 2, 3, 4]; track field) {\r\n                <p-skeleton height=\"3.25rem\" borderRadius=\"0.375rem\" />\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    } @else {\r\n      @if (selectedProvider(); as provider) {\r\n        @if (provider.warnings.length > 0) {\r\n          <section\r\n            class=\"rounded-md border border-amber-200 bg-amber-50 p-4\"\r\n            role=\"note\"\r\n            aria-labelledby=\"provider-warnings-heading\"\r\n          >\r\n            <h2\r\n              id=\"provider-warnings-heading\"\r\n              class=\"m-0 text-sm font-semibold text-amber-950\"\r\n            >\r\n              {{ t(\"provider-warnings\") }}\r\n            </h2>\r\n            <ul\r\n              class=\"mb-0 mt-2.5 list-disc space-y-2 ps-5 text-sm leading-relaxed text-amber-900\"\r\n            >\r\n              @for (warning of provider.warnings; track warning) {\r\n                <li class=\"ps-1\">{{ warning }}</li>\r\n              }\r\n            </ul>\r\n          </section>\r\n        }\r\n      }\r\n\r\n      @if (isEdit()) {\r\n        <div\r\n          class=\"rounded-md border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-950\"\r\n          role=\"note\"\r\n        >\r\n          {{ t(\"editor.update-invalidates-proof\") }}\r\n        </div>\r\n      }\r\n\r\n      @for (generation of [formGeneration()]; track generation) {\r\n        <mt-dynamic-form [formConfig]=\"formConfig()\" [formControl]=\"form\" />\r\n      }\r\n\r\n      @if (applicableFields().length === 0) {\r\n        <div\r\n          class=\"rounded-md border border-surface-200 bg-surface-50 px-4 py-3 text-sm text-muted-color\"\r\n        >\r\n          {{ t(\"editor.select-provider-mode\") }}\r\n        </div>\r\n      }\r\n    }\r\n  </div>\r\n\r\n  <div [class]=\"modal.footerClass\">\r\n    <mt-button\r\n      [label]=\"t('cancel')\"\r\n      variant=\"outlined\"\r\n      [disabled]=\"!!facade.mutationLoading()\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"cancel()\"\r\n    />\r\n    <mt-button\r\n      [label]=\"t('save')\"\r\n      icon=\"general.save-01\"\r\n      [disabled]=\"!canSave()\"\r\n      [loading]=\"facade.mutationLoading() === (isEdit() ? 'update' : 'create')\"\r\n      styleClass=\"w-full sm:w-auto\"\r\n      (onClick)=\"save()\"\r\n    />\r\n  </div>\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { editorConnectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "editorConnectionId", required: false }] }] } });
+// Mirrors the section-mode styling mt-client-form applies to its own sections.
+const SECTION_MODE_LAYOUT = {
+    sectionClass: 'flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0',
+};
+const SECTION_MODE_HEADER_CLASS = 'm-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color';
+const SECTION_MODE_BODY_CLASS = '@container grid grid-cols-12 gap-4 items-start p-4';
 function emptyEditorValue() {
     return {
         name: null,
@@ -1912,6 +2260,34 @@ class EmailConnectionDetailsPage {
             ? this.facade.providerByKey(details.connection.providerKey)
             : null;
     }, ...(ngDevMode ? [{ debugName: "provider" }] : /* istanbul ignore next */ []));
+    /**
+     * The provider descriptor's own warnings, shown here and not only while
+     * editing: a connection whose mode carries a standing caveat — the QC SMTP
+     * endpoint that runs without TLS or authentication, for instance — must
+     * still say so to whoever opens it later.
+     */
+    providerWarnings = computed(() => this.provider()?.warnings ?? [], ...(ngDevMode ? [{ debugName: "providerWarnings" }] : /* istanbul ignore next */ []));
+    /**
+     * The contract assigns each connection state one next step. Saying it in
+     * words means the chip is not the only place the operator can read what to
+     * do, which is also what keeps the state legible without relying on color.
+     */
+    stateGuidance = computed(() => {
+        this.activeLanguage();
+        const details = this.facade.selectedConnection();
+        if (!details)
+            return '';
+        return this.optionalT(`state-guidance.${toKebabCase$1(details.connection.state)}`);
+    }, ...(ngDevMode ? [{ debugName: "stateGuidance" }] : /* istanbul ignore next */ []));
+    /**
+     * The last validation code, so an invalid connection shows the reason rather
+     * than only a chip that says something went wrong.
+     */
+    lastValidationMessage = computed(() => {
+        this.activeLanguage();
+        const code = this.facade.selectedConnection()?.connection.lastValidationCode;
+        return code ? this.facade.describeCode(code) : '';
+    }, ...(ngDevMode ? [{ debugName: "lastValidationMessage" }] : /* istanbul ignore next */ []));
     authenticationModeLabel = computed(() => {
         const details = this.facade.selectedConnection();
         if (!details)
@@ -2023,7 +2399,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,
@@ -2122,6 +2498,12 @@ class EmailConnectionDetailsPage {
     t(key) {
         return this.transloco.translate(`email-delivery.${key}`);
     }
+    /** Empty rather than the raw key when a state has no guidance sentence. */
+    optionalT(key) {
+        const fullKey = `email-delivery.${key}`;
+        const translated = this.transloco.translate(fullKey);
+        return translated === fullKey ? '' : translated;
+    }
     credentialStorageLabel(storageKind) {
         switch (storageKind.replace(/[-_\s]/g, '').toLowerCase()) {
             case 'externalreference':
@@ -2140,20 +2522,23 @@ 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'\">\r\n  @if (facade.detailsLoading()) {\r\n    <div\r\n      [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\"\r\n      role=\"status\"\r\n      [attr.aria-label]=\"t('loading')\"\r\n    >\r\n      <div class=\"grid w-full gap-5\">\r\n        <p-skeleton height=\"5rem\" borderRadius=\"0.375rem\" />\r\n        @for (section of [1, 2, 3]; track section) {\r\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\r\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\r\n              <p-skeleton\r\n                width=\"12rem\"\r\n                height=\"1.25rem\"\r\n                borderRadius=\"0.375rem\"\r\n              />\r\n            </div>\r\n            <div class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n              @for (tile of [1, 2, 3]; track tile) {\r\n                <p-skeleton height=\"4rem\" borderRadius=\"0.375rem\" />\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (facade.selectedConnection(); as details) {\r\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\r\n      <div class=\"grid w-full gap-5\">\r\n        <section\r\n          class=\"flex flex-col gap-3 rounded-md border border-surface-200 bg-surface-0 p-4 sm:flex-row sm:items-center sm:justify-between\"\r\n        >\r\n          <div class=\"min-w-0\">\r\n            <h2 class=\"m-0 truncate text-lg font-semibold text-color\">\r\n              {{ details.connection.name }}\r\n            </h2>\r\n            <p class=\"mb-0 mt-1 break-all text-sm text-muted-color\">\r\n              {{ details.connection.senderAddress }}\r\n            </p>\r\n            <!-- The next step in words, so the state is never carried by the\r\n                 chip's color alone. -->\r\n            @if (stateGuidance(); as guidance) {\r\n              <p class=\"mb-0 mt-2 text-sm text-color\">{{ guidance }}</p>\r\n            }\r\n            @if (lastValidationMessage(); as lastResult) {\r\n              <p class=\"mb-0 mt-1 text-sm text-muted-color\">\r\n                {{ t(\"last-result\") }}: {{ lastResult }}\r\n              </p>\r\n            }\r\n          </div>\r\n          <mt-email-delivery-status\r\n            class=\"shrink-0 self-start\"\r\n            kind=\"connection\"\r\n            [value]=\"details.connection.state\"\r\n          />\r\n        </section>\r\n\r\n        <!-- The descriptor's standing caveats for this provider and mode. The\r\n             editor shows them while configuring; they belong here too, because\r\n             whoever opens an existing connection is the one deciding whether\r\n             it may carry production notification email. -->\r\n        @if (providerWarnings().length > 0) {\r\n          <section\r\n            class=\"rounded-md border border-amber-200 bg-amber-50 p-4\"\r\n            role=\"note\"\r\n            aria-labelledby=\"connection-provider-warnings-heading\"\r\n          >\r\n            <h3\r\n              id=\"connection-provider-warnings-heading\"\r\n              class=\"m-0 text-sm font-semibold text-amber-950\"\r\n            >\r\n              {{ t(\"provider-warnings\") }}\r\n            </h3>\r\n            <ul\r\n              class=\"mb-0 mt-2.5 list-disc space-y-2 ps-5 text-sm leading-relaxed text-amber-900\"\r\n            >\r\n              @for (warning of providerWarnings(); track warning) {\r\n                <li class=\"ps-1\">{{ warning }}</li>\r\n              }\r\n            </ul>\r\n          </section>\r\n        }\r\n\r\n        <!-- Same section shape the connection form uses (mt-client-form section\r\n             mode): header strip on a bordered, flat, rounded-md container. -->\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"connection-overview\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.provider\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ provider()?.displayName || details.connection.providerKey }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.authentication-mode\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ authenticationModeLabel() }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"used-for-notifications\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{\r\n                  details.bindings.includes(\"notifications\")\r\n                    ? t(\"yes\")\r\n                    : t(\"no\")\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.last-validation\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{\r\n                  details.connection.lastValidatedAtUtc\r\n                    ? (details.connection.lastValidatedAtUtc | date: \"medium\")\r\n                    : \"\u2014\"\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"authorization-state\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ details.authorizationState || \"\u2014\" }}\r\n              </dd>\r\n            </div>\r\n            @if (details.connection.senderDisplayName) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"connection.sender-display-name\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                  {{ details.connection.senderDisplayName }}\r\n                </dd>\r\n              </div>\r\n            }\r\n          </dl>\r\n        </section>\r\n\r\n        @if (publicConfiguration().length > 0) {\r\n          <section\r\n            class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n          >\r\n            <h3\r\n              class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n            >\r\n              {{ t(\"provider-settings\") }}\r\n            </h3>\r\n            <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n              @for (entry of publicConfiguration(); track entry.key) {\r\n                <div\r\n                  class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n                >\r\n                  <dt class=\"text-xs text-muted-color\">{{ entry.label }}</dt>\r\n                  <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                    {{ entry.value }}\r\n                  </dd>\r\n                </div>\r\n              }\r\n            </dl>\r\n          </section>\r\n        }\r\n\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"credential-status\") }}\r\n          </h3>\r\n          <div class=\"grid gap-3 p-4\">\r\n            @for (credential of credentialItems(); track credential.key) {\r\n              <div\r\n                class=\"grid gap-3 rounded-md border border-surface-200 bg-surface-50 p-3 sm:grid-cols-3 sm:items-center\"\r\n              >\r\n                <div class=\"min-w-0\">\r\n                  <p class=\"m-0 break-words font-medium text-color\">\r\n                    {{ credential.label }}\r\n                  </p>\r\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\r\n                    {{ credential.key }}\r\n                  </p>\r\n                </div>\r\n                <div class=\"min-w-0\">\r\n                  <p class=\"m-0 text-sm font-medium text-color\">\r\n                    {{ credential.storageLabel }}\r\n                  </p>\r\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\r\n                    @if (credential.lastRotatedAtUtc) {\r\n                      {{ t(\"last-rotated\") }} \u00B7\r\n                      {{ credential.lastRotatedAtUtc | date: \"medium\" }}\r\n                    } @else {\r\n                      {{ t(\"last-rotated\") }} \u00B7 \u2014\r\n                    }\r\n                  </p>\r\n                </div>\r\n                <mt-email-delivery-status\r\n                  class=\"shrink-0 sm:justify-self-end\"\r\n                  kind=\"support\"\r\n                  [value]=\"\r\n                    credential.configured ? 'configured' : 'not-configured'\r\n                  \"\r\n                />\r\n              </div>\r\n            } @empty {\r\n              <p class=\"m-0 text-sm text-muted-color\">\r\n                {{ t(\"no-credentials\") }}\r\n              </p>\r\n            }\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button\r\n        [label]=\"t('close')\"\r\n        variant=\"outlined\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"close()\"\r\n      />\r\n      @if (actionMenuItems().length > 0) {\r\n        <mt-button\r\n          [label]=\"t('actions')\"\r\n          icon=\"general.dots-vertical\"\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          styleClass=\"w-full sm:w-auto\"\r\n          (onClick)=\"actionMenu.toggle($event)\"\r\n        />\r\n        <mt-menu\r\n          #actionMenu\r\n          [model]=\"actionMenuItems()\"\r\n          appendTo=\"body\"\r\n          [ariaLabel]=\"t('actions')\"\r\n        />\r\n      }\r\n      <mt-button\r\n        [label]=\"t('edit')\"\r\n        icon=\"general.edit-01\"\r\n        [disabled]=\"!facade.managementAvailable()\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"edit()\"\r\n      />\r\n    </div>\r\n  } @else {\r\n    <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\r\n      <mt-empty-state illustration=\"none\" [title]=\"t('connection-not-found')\" />\r\n    </div>\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button [label]=\"t('close')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n    </div>\r\n  }\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i1$1.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "component", type: Menu, selector: "mt-menu", inputs: ["model", "popup", "appendTo", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "activeItemId"], outputs: ["activeItemIdChange", "onShow", "onHide", "onBlur", "onFocus", "onItemSelect"] }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailConnectionDetailsPage, decorators: [{
             type: Component,
             args: [{ selector: 'mt-email-connection-details', imports: [
                         DatePipe,
                         TranslocoDirective,
+                        SkeletonModule,
                         Button,
-                        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'\">\r\n  @if (facade.detailsLoading()) {\r\n    <div\r\n      [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\"\r\n      role=\"status\"\r\n      [attr.aria-label]=\"t('loading')\"\r\n    >\r\n      <div class=\"grid w-full gap-5\">\r\n        <p-skeleton height=\"5rem\" borderRadius=\"0.375rem\" />\r\n        @for (section of [1, 2, 3]; track section) {\r\n          <div class=\"overflow-hidden rounded-md border border-surface-200\">\r\n            <div class=\"border-b border-surface-200 bg-surface-50 px-4 py-3\">\r\n              <p-skeleton\r\n                width=\"12rem\"\r\n                height=\"1.25rem\"\r\n                borderRadius=\"0.375rem\"\r\n              />\r\n            </div>\r\n            <div class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n              @for (tile of [1, 2, 3]; track tile) {\r\n                <p-skeleton height=\"4rem\" borderRadius=\"0.375rem\" />\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n      </div>\r\n    </div>\r\n  } @else if (facade.selectedConnection(); as details) {\r\n    <div [class]=\"'min-h-0 overflow-y-auto p-4 sm:p-5 ' + modal.contentClass\">\r\n      <div class=\"grid w-full gap-5\">\r\n        <section\r\n          class=\"flex flex-col gap-3 rounded-md border border-surface-200 bg-surface-0 p-4 sm:flex-row sm:items-center sm:justify-between\"\r\n        >\r\n          <div class=\"min-w-0\">\r\n            <h2 class=\"m-0 truncate text-lg font-semibold text-color\">\r\n              {{ details.connection.name }}\r\n            </h2>\r\n            <p class=\"mb-0 mt-1 break-all text-sm text-muted-color\">\r\n              {{ details.connection.senderAddress }}\r\n            </p>\r\n            <!-- The next step in words, so the state is never carried by the\r\n                 chip's color alone. -->\r\n            @if (stateGuidance(); as guidance) {\r\n              <p class=\"mb-0 mt-2 text-sm text-color\">{{ guidance }}</p>\r\n            }\r\n            @if (lastValidationMessage(); as lastResult) {\r\n              <p class=\"mb-0 mt-1 text-sm text-muted-color\">\r\n                {{ t(\"last-result\") }}: {{ lastResult }}\r\n              </p>\r\n            }\r\n          </div>\r\n          <mt-email-delivery-status\r\n            class=\"shrink-0 self-start\"\r\n            kind=\"connection\"\r\n            [value]=\"details.connection.state\"\r\n          />\r\n        </section>\r\n\r\n        <!-- The descriptor's standing caveats for this provider and mode. The\r\n             editor shows them while configuring; they belong here too, because\r\n             whoever opens an existing connection is the one deciding whether\r\n             it may carry production notification email. -->\r\n        @if (providerWarnings().length > 0) {\r\n          <section\r\n            class=\"rounded-md border border-amber-200 bg-amber-50 p-4\"\r\n            role=\"note\"\r\n            aria-labelledby=\"connection-provider-warnings-heading\"\r\n          >\r\n            <h3\r\n              id=\"connection-provider-warnings-heading\"\r\n              class=\"m-0 text-sm font-semibold text-amber-950\"\r\n            >\r\n              {{ t(\"provider-warnings\") }}\r\n            </h3>\r\n            <ul\r\n              class=\"mb-0 mt-2.5 list-disc space-y-2 ps-5 text-sm leading-relaxed text-amber-900\"\r\n            >\r\n              @for (warning of providerWarnings(); track warning) {\r\n                <li class=\"ps-1\">{{ warning }}</li>\r\n              }\r\n            </ul>\r\n          </section>\r\n        }\r\n\r\n        <!-- Same section shape the connection form uses (mt-client-form section\r\n             mode): header strip on a bordered, flat, rounded-md container. -->\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"connection-overview\") }}\r\n          </h3>\r\n          <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.provider\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ provider()?.displayName || details.connection.providerKey }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.authentication-mode\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ authenticationModeLabel() }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"used-for-notifications\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{\r\n                  details.bindings.includes(\"notifications\")\r\n                    ? t(\"yes\")\r\n                    : t(\"no\")\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"connection.last-validation\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 font-medium text-color\">\r\n                {{\r\n                  details.connection.lastValidatedAtUtc\r\n                    ? (details.connection.lastValidatedAtUtc | date: \"medium\")\r\n                    : \"\u2014\"\r\n                }}\r\n              </dd>\r\n            </div>\r\n            <div class=\"rounded-md border border-surface-200 bg-surface-50 p-3\">\r\n              <dt class=\"text-xs text-muted-color\">\r\n                {{ t(\"authorization-state\") }}\r\n              </dt>\r\n              <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                {{ details.authorizationState || \"\u2014\" }}\r\n              </dd>\r\n            </div>\r\n            @if (details.connection.senderDisplayName) {\r\n              <div\r\n                class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n              >\r\n                <dt class=\"text-xs text-muted-color\">\r\n                  {{ t(\"connection.sender-display-name\") }}\r\n                </dt>\r\n                <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                  {{ details.connection.senderDisplayName }}\r\n                </dd>\r\n              </div>\r\n            }\r\n          </dl>\r\n        </section>\r\n\r\n        @if (publicConfiguration().length > 0) {\r\n          <section\r\n            class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n          >\r\n            <h3\r\n              class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n            >\r\n              {{ t(\"provider-settings\") }}\r\n            </h3>\r\n            <dl class=\"grid gap-3 p-4 sm:grid-cols-2 xl:grid-cols-3\">\r\n              @for (entry of publicConfiguration(); track entry.key) {\r\n                <div\r\n                  class=\"rounded-md border border-surface-200 bg-surface-50 p-3\"\r\n                >\r\n                  <dt class=\"text-xs text-muted-color\">{{ entry.label }}</dt>\r\n                  <dd class=\"mb-0 mt-1 break-words font-medium text-color\">\r\n                    {{ entry.value }}\r\n                  </dd>\r\n                </div>\r\n              }\r\n            </dl>\r\n          </section>\r\n        }\r\n\r\n        <section\r\n          class=\"flex flex-col gap-0 overflow-hidden rounded-md border border-surface-200 bg-surface-0\"\r\n        >\r\n          <h3\r\n            class=\"m-0 border-b border-surface-200 bg-surface-50 px-4 py-3 text-lg font-semibold text-color\"\r\n          >\r\n            {{ t(\"credential-status\") }}\r\n          </h3>\r\n          <div class=\"grid gap-3 p-4\">\r\n            @for (credential of credentialItems(); track credential.key) {\r\n              <div\r\n                class=\"grid gap-3 rounded-md border border-surface-200 bg-surface-50 p-3 sm:grid-cols-3 sm:items-center\"\r\n              >\r\n                <div class=\"min-w-0\">\r\n                  <p class=\"m-0 break-words font-medium text-color\">\r\n                    {{ credential.label }}\r\n                  </p>\r\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\r\n                    {{ credential.key }}\r\n                  </p>\r\n                </div>\r\n                <div class=\"min-w-0\">\r\n                  <p class=\"m-0 text-sm font-medium text-color\">\r\n                    {{ credential.storageLabel }}\r\n                  </p>\r\n                  <p class=\"mb-0 mt-1 text-xs text-muted-color\">\r\n                    @if (credential.lastRotatedAtUtc) {\r\n                      {{ t(\"last-rotated\") }} \u00B7\r\n                      {{ credential.lastRotatedAtUtc | date: \"medium\" }}\r\n                    } @else {\r\n                      {{ t(\"last-rotated\") }} \u00B7 \u2014\r\n                    }\r\n                  </p>\r\n                </div>\r\n                <mt-email-delivery-status\r\n                  class=\"shrink-0 sm:justify-self-end\"\r\n                  kind=\"support\"\r\n                  [value]=\"\r\n                    credential.configured ? 'configured' : 'not-configured'\r\n                  \"\r\n                />\r\n              </div>\r\n            } @empty {\r\n              <p class=\"m-0 text-sm text-muted-color\">\r\n                {{ t(\"no-credentials\") }}\r\n              </p>\r\n            }\r\n          </div>\r\n        </section>\r\n      </div>\r\n    </div>\r\n\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button\r\n        [label]=\"t('close')\"\r\n        variant=\"outlined\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"close()\"\r\n      />\r\n      @if (actionMenuItems().length > 0) {\r\n        <mt-button\r\n          [label]=\"t('actions')\"\r\n          icon=\"general.dots-vertical\"\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          styleClass=\"w-full sm:w-auto\"\r\n          (onClick)=\"actionMenu.toggle($event)\"\r\n        />\r\n        <mt-menu\r\n          #actionMenu\r\n          [model]=\"actionMenuItems()\"\r\n          appendTo=\"body\"\r\n          [ariaLabel]=\"t('actions')\"\r\n        />\r\n      }\r\n      <mt-button\r\n        [label]=\"t('edit')\"\r\n        icon=\"general.edit-01\"\r\n        [disabled]=\"!facade.managementAvailable()\"\r\n        styleClass=\"w-full sm:w-auto\"\r\n        (onClick)=\"edit()\"\r\n      />\r\n    </div>\r\n  } @else {\r\n    <div [class]=\"modal.contentClass + ' p-4 sm:p-5'\">\r\n      <mt-empty-state illustration=\"none\" [title]=\"t('connection-not-found')\" />\r\n    </div>\r\n    <div [class]=\"modal.footerClass\">\r\n      <mt-button [label]=\"t('close')\" variant=\"outlined\" (onClick)=\"close()\" />\r\n    </div>\r\n  }\r\n</ng-container>\r\n" }]
         }], propDecorators: { connectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectionId", required: true }] }] } });
+function toKebabCase$1(value) {
+    return value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
 function humanizeIdentifier(value) {
     return value
         .replace(/[._-]+/g, ' ')
@@ -2177,6 +2562,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 +2584,7 @@ class EmailDeliveryConnections {
             {
                 key: 'providerLabel',
                 label: this.t('connection.provider'),
+                width: '18rem',
                 filterConfig: {
                     type: 'select',
                     options: this.facade.providers().map((provider) => ({
@@ -2206,12 +2596,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 +2615,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 +2625,7 @@ class EmailDeliveryConnections {
                 key: 'lastValidatedAtUtc',
                 label: this.t('connection.last-validation'),
                 type: 'dateTime',
+                width: '15rem',
             },
         ];
     }, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -2299,7 +2693,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 +2755,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 +2777,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'\">\r\n  <section class=\"space-y-4\" aria-label=\"{{ t('connections-title') }}\">\r\n    @if (\r\n      !facade.statusLoading() &&\r\n      !facade.catalogLoading() &&\r\n      facade.providers().length === 0\r\n    ) {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('no-providers-title')\"\r\n        [description]=\"t('no-providers-description')\"\r\n      />\r\n    } @else {\r\n      <mt-table\r\n        [data]=\"rows()\"\r\n        [columns]=\"columns()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"\r\n          facade.statusLoading() ||\r\n          facade.connectionsLoading() ||\r\n          facade.catalogLoading()\r\n        \"\r\n        [generalSearch]=\"true\"\r\n        [showFilters]=\"true\"\r\n        [emptyTitle]=\"t('no-connections-title')\"\r\n        [emptyDescription]=\"t('no-connections-description')\"\r\n        [emptyActionLabel]=\"canCreate() ? t('create-connection') : undefined\"\r\n        emptyActionIcon=\"general.plus\"\r\n        filterMode=\"column\"\r\n        actionShape=\"popover\"\r\n        [clickableRows]=\"true\"\r\n        dataKey=\"id\"\r\n        storageKey=\"email-delivery-connections\"\r\n        (emptyAction)=\"createConnection()\"\r\n        (rowClick)=\"openDetails($event)\"\r\n      >\r\n        <ng-template #captionEnd>\r\n          @if (canCreate()) {\r\n            <mt-button\r\n              [label]=\"t('create-connection')\"\r\n              icon=\"general.plus\"\r\n              (onClick)=\"createConnection()\"\r\n            />\r\n          }\r\n        </ng-template>\r\n      </mt-table>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryConnections, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-email-delivery-connections', imports: [TranslocoDirective, Button, EmptyState, Table], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-4\" aria-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'\">\r\n  <section class=\"space-y-4\" aria-label=\"{{ t('connections-title') }}\">\r\n    @if (\r\n      !facade.statusLoading() &&\r\n      !facade.catalogLoading() &&\r\n      facade.providers().length === 0\r\n    ) {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('no-providers-title')\"\r\n        [description]=\"t('no-providers-description')\"\r\n      />\r\n    } @else {\r\n      <mt-table\r\n        [data]=\"rows()\"\r\n        [columns]=\"columns()\"\r\n        [rowActions]=\"rowActions()\"\r\n        [loading]=\"\r\n          facade.statusLoading() ||\r\n          facade.connectionsLoading() ||\r\n          facade.catalogLoading()\r\n        \"\r\n        [generalSearch]=\"true\"\r\n        [showFilters]=\"true\"\r\n        [emptyTitle]=\"t('no-connections-title')\"\r\n        [emptyDescription]=\"t('no-connections-description')\"\r\n        [emptyActionLabel]=\"canCreate() ? t('create-connection') : undefined\"\r\n        emptyActionIcon=\"general.plus\"\r\n        filterMode=\"column\"\r\n        actionShape=\"popover\"\r\n        [clickableRows]=\"true\"\r\n        dataKey=\"id\"\r\n        storageKey=\"email-delivery-connections\"\r\n        (emptyAction)=\"createConnection()\"\r\n        (rowClick)=\"openDetails($event)\"\r\n      >\r\n        <ng-template #captionEnd>\r\n          @if (canCreate()) {\r\n            <mt-button\r\n              [label]=\"t('create-connection')\"\r\n              icon=\"general.plus\"\r\n              (onClick)=\"createConnection()\"\r\n            />\r\n          }\r\n        </ng-template>\r\n      </mt-table>\r\n    }\r\n  </section>\r\n</ng-container>\r\n" }]
         }] });
 const connectionStates = [
     'Draft',
@@ -2421,6 +2815,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 +2874,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 +2915,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'\">\r\n  <mt-page\r\n    [title]=\"t('title')\"\r\n    avatarIcon=\"communication.mail-01\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-blue-100)',\r\n      '--p-avatar-color': 'var(--p-blue-700)',\r\n    }\"\r\n    [tabs]=\"canView ? tabs() : []\"\r\n    [activeTab]=\"activeTab()\"\r\n    contentClass=\"min-h-0 max-[1025px]:p-4 max-[640px]:p-3\"\r\n    backButton\r\n    (backButtonClick)=\"goBack()\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n  >\r\n    <!-- Declared unconditionally: a content query cannot reach a template that\r\n         only exists inside a control-flow block, so the condition lives here. -->\r\n    <ng-template #titleEnd>\r\n      @if (canView && readiness(); as state) {\r\n        <span class=\"shrink-0\" [mtTooltip]=\"readinessHint()\">\r\n          <mt-email-delivery-status kind=\"readiness\" [value]=\"state\" />\r\n        </span>\r\n      }\r\n    </ng-template>\r\n\r\n    @if (canView) {\r\n      <div\r\n        class=\"flex min-h-0 flex-col gap-4 [&_.mt-actions-column]:w-[5rem] [&_mt-card]:rounded-md [&_mt-table_:has(>.p-datatable)]:rounded-md\"\r\n      >\r\n        <mt-breadcrumb\r\n          [items]=\"breadcrumbItems()\"\r\n          styleClass=\"mx-1 flex justify-start\"\r\n        />\r\n\r\n        @if (activeTab() === \"activity\") {\r\n          <mt-email-delivery-activity />\r\n        } @else {\r\n          <mt-email-delivery-connections />\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('access-denied-title')\"\r\n        [description]=\"t('access-denied-description')\"\r\n      />\r\n    }\r\n  </mt-page>\r\n</ng-container>\r\n", dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }, { kind: "component", type: EmailDeliveryConnections, selector: "mt-email-delivery-connections" }, { kind: "component", type: EmailDeliveryActivity, selector: "mt-email-delivery-activity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryShell, decorators: [{
             type: Component,
             args: [{ selector: 'mt-email-delivery-shell', imports: [
                         Page,
                         TranslocoDirective,
+                        Breadcrumb,
                         EmptyState,
+                        Tooltip,
+                        EmailDeliveryStatus,
                         EmailDeliveryConnections,
                         EmailDeliveryActivity,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <mt-page\r\n    [title]=\"t('title')\"\r\n    avatarIcon=\"communication.mail-01\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-blue-100)',\r\n      '--p-avatar-color': 'var(--p-blue-700)',\r\n    }\"\r\n    [tabs]=\"canView ? tabs() : []\"\r\n    [activeTab]=\"activeTab()\"\r\n    contentClass=\"min-h-0 max-[1025px]:p-4 max-[640px]:p-3\"\r\n    backButton\r\n    (backButtonClick)=\"goBack()\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n  >\r\n    @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'\">\r\n  <mt-page\r\n    [title]=\"t('title')\"\r\n    avatarIcon=\"communication.mail-01\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-blue-100)',\r\n      '--p-avatar-color': 'var(--p-blue-700)',\r\n    }\"\r\n    [tabs]=\"canView ? tabs() : []\"\r\n    [activeTab]=\"activeTab()\"\r\n    contentClass=\"min-h-0 max-[1025px]:p-4 max-[640px]:p-3\"\r\n    backButton\r\n    (backButtonClick)=\"goBack()\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n  >\r\n    <!-- Declared unconditionally: a content query cannot reach a template that\r\n         only exists inside a control-flow block, so the condition lives here. -->\r\n    <ng-template #titleEnd>\r\n      @if (canView && readiness(); as state) {\r\n        <span class=\"shrink-0\" [mtTooltip]=\"readinessHint()\">\r\n          <mt-email-delivery-status kind=\"readiness\" [value]=\"state\" />\r\n        </span>\r\n      }\r\n    </ng-template>\r\n\r\n    @if (canView) {\r\n      <div\r\n        class=\"flex min-h-0 flex-col gap-4 [&_.mt-actions-column]:w-[5rem] [&_mt-card]:rounded-md [&_mt-table_:has(>.p-datatable)]:rounded-md\"\r\n      >\r\n        <mt-breadcrumb\r\n          [items]=\"breadcrumbItems()\"\r\n          styleClass=\"mx-1 flex justify-start\"\r\n        />\r\n\r\n        @if (activeTab() === \"activity\") {\r\n          <mt-email-delivery-activity />\r\n        } @else {\r\n          <mt-email-delivery-connections />\r\n        }\r\n      </div>\r\n    } @else {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('access-denied-title')\"\r\n        [description]=\"t('access-denied-description')\"\r\n      />\r\n    }\r\n  </mt-page>\r\n</ng-container>\r\n" }]
         }], ctorParameters: () => [] });
+const PRODUCT_SETTINGS_ROUTE = '/control-panel/product-settings';
 
 export { EmailDeliveryShell };
-//# sourceMappingURL=masterteam-system-settings-email-delivery-shell-DowMjl4L.mjs.map
+//# sourceMappingURL=masterteam-system-settings-email-delivery-shell-C_AhRF1f.mjs.map