@masterteam/system-settings 0.0.22 → 0.0.23

package/fesm2022/{masterteam-system-settings-email-delivery-shell-oTWOzKWj.mjs → masterteam-system-settings-email-delivery-shell-D9NShoTc.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { input, inject, ChangeDetectionStrategy, Component, signal, computed, DestroyRef } from '@angular/core';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { input, inject, ChangeDetectionStrategy, Component, signal, computed, DestroyRef, effect, untracked, HostListener } from '@angular/core';
+import { toSignal, takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { Breadcrumb } from '@masterteam/components/breadcrumb';
@@ -8,12 +8,12 @@ import { EmptyState } from '@masterteam/components/empty-state';
 import { Page } from '@masterteam/components/page';
 import { ToastService } from '@masterteam/components/toast';
 import { Tooltip } from '@masterteam/components/tooltip';
-import { E as EmailDeliveryFacade, i as isConnectionTestAttempt, a as EmailDeliveryStatus, g as getEmailDeliveryStatusMap, b as EMAIL_DELIVERY_ATTEMPT_STATUSES, c as createEmailTestRequestId, d as areEmailTestRecipientsValid, p as parseEmailTestRecipients, e as isEmailTestRequestPending, f as EMAIL_DELIVERY_PERMISSIONS } from './masterteam-system-settings-masterteam-system-settings-7I4TfgwP.mjs';
+import { E as EmailDeliveryFacade, i as isConnectionTestAttempt, a as EmailDeliveryStatus, g as getEmailDeliveryStatusMap, b as EMAIL_DELIVERY_ATTEMPT_STATUSES, c as createEmailTestRequestId, d as areEmailTestRecipientsValid, p as parseEmailTestRecipients, e as isEmailTestRequestPending, f as EMAIL_DELIVERY_PERMISSIONS, h as EmailLayoutFacade, j as EMAIL_LAYOUT_CONTENT_SLOT, k as EMAIL_LAYOUT_MAX_BYTES, r as readLayoutErrorDiagnostics, l as EmailVisualEditor, m as EmailHtmlPreview } from './masterteam-system-settings-masterteam-system-settings-C51hZw-Q.mjs';
 import { Icon } from '@masterteam/icons';
 import { Button } from '@masterteam/components/button';
 import { ModalService } from '@masterteam/components/modal';
 import { Table } from '@masterteam/components/table';
-import { take, timer, of, map, switchMap, finalize } from 'rxjs';
+import { take, timer, of, map, switchMap, finalize, Subject, merge, debounceTime, distinctUntilChanged, catchError, startWith } from 'rxjs';
 import { DatePipe, DOCUMENT } from '@angular/common';
 import { ModalRef } from '@masterteam/components/dialog';
 import * as i1 from '@angular/forms';
@@ -26,7 +26,7 @@ import { TextareaFieldConfig, TextFieldConfig, ToggleFieldConfig, ValidatorConfi
 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';
+import { SkeletonModule, Skeleton } from 'primeng/skeleton';
 
 class EmailOperatorReasonDialog {
     itemName = input.required(...(ngDevMode ? [{ debugName: "itemName" }] : /* istanbul ignore next */ []));
@@ -338,7 +338,7 @@ class EmailDeliveryAttempts {
         return this.transloco.translate(`email-delivery.${key}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryAttempts, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailDeliveryAttempts, isStandalone: true, selector: "mt-email-delivery-attempts", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <section class=\"space-y-4\" aria-label=\"{{ t('activity-title') }}\">\r\n    <mt-table\r\n      [data]=\"rows()\"\r\n      [columns]=\"columns()\"\r\n      [rowActions]=\"actions()\"\r\n      [filters]=\"tableFilters()\"\r\n      [loading]=\"facade.attemptsLoading()\"\r\n      [generalSearch]=\"true\"\r\n      [showFilters]=\"true\"\r\n      [emptyTitle]=\"t('no-attempts-title')\"\r\n      [emptyDescription]=\"t('no-attempts-description')\"\r\n      filterMode=\"column\"\r\n      dataKey=\"id\"\r\n      actionShape=\"popover\"\r\n      [clickableRows]=\"true\"\r\n      storageKey=\"email-delivery-attempts\"\r\n      (filtersChange)=\"onFiltersChange($event)\"\r\n      (rowClick)=\"openDetails($event)\"\r\n    >\r\n      <ng-template #captionEnd>\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          icon=\"arrow.refresh-cw-01\"\r\n          [label]=\"t('refresh')\"\r\n          [loading]=\"facade.attemptsLoading()\"\r\n          (onClick)=\"refresh()\"\r\n        />\r\n      </ng-template>\r\n    </mt-table>\r\n\r\n    @if (facade.attemptsNextCursor()) {\r\n      <div class=\"flex justify-center\">\r\n        <mt-button\r\n          severity=\"secondary\"\r\n          variant=\"outlined\"\r\n          [label]=\"t('load-more')\"\r\n          [loading]=\"facade.attemptsLoading()\"\r\n          (onClick)=\"loadMore()\"\r\n        />\r\n      </div>\r\n    }\r\n  </section>\r\n</ng-container>\r\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Table, selector: "mt-table", inputs: ["filters", "data", "columns", "rowActions", "size", "showGridlines", "stripedRows", "selectableRows", "clickableRows", "generalSearch", "lazyLocalSearch", "showFilters", "filterMode", "loading", "updating", "lazy", "lazyLocalSort", "lazyTotalRecords", "reorderableColumns", "reorderableRows", "dataKey", "storageKey", "storageMode", "persistStateExclude", "exportable", "printable", "groupable", "groupCountMap", "cellClickFilter", "freezeActions", "virtualScroll", "virtualScrollItemSize", "scrollHeight", "printTitle", "exportFilename", "actionShape", "rowActionsLoadingFn", "tableLayout", "noCard", "tabs", "tabsOptionLabel", "tabsOptionValue", "activeTab", "actions", "captionStartTemplate", "captionEndTemplate", "emptyTitle", "emptyDescription", "emptyActionLabel", "emptyActionIcon", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "rowActionsRequested", "filtersChange", "activeTabChange", "onTabChange", "pageSizeChange", "currentPageChange", "firstChange", "filterTermChange", "groupByChange", "sortFieldChange", "sortDirectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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", "filterCloseOnOutsideClick", "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", "externalFiltersActive", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "filtersCleared", "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,
@@ -525,7 +525,7 @@ 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 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 });
+    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", "filterCloseOnOutsideClick", "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", "externalFiltersActive", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "filtersCleared", "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,
@@ -650,7 +650,7 @@ 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 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 });
+    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", "filterCloseOnOutsideClick", "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", "externalFiltersActive", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "filtersCleared", "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,
@@ -2041,7 +2041,7 @@ 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-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 });
+    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", "filterCloseOnOutsideClick", "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", "externalFiltersActive", "paginatorPosition", "alwaysShowPaginator", "rowsPerPageOptions", "pageSize", "currentPage", "first", "filterTerm", "groupBy", "sortField", "sortDirection"], outputs: ["selectionChange", "cellChange", "lazyLoad", "columnReorder", "rowReorder", "rowClick", "emptyAction", "filtersCleared", "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,
@@ -2061,6 +2061,244 @@ function toKebabCase(value) {
     return value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
 }
 
+/**
+ * Product Settings → Email → Email design. Edits the one shared base that wraps
+ * every notification email (logo, header, footer, typography). The source is
+ * edited as exact HTML — no visual editor rewrites tables, inline styles,
+ * `lang`/`dir` or the `{content}` slot — next to a live, sandboxed preview of
+ * the server's fixed bilingual sample.
+ */
+class EmailDeliveryDesign {
+    facade = inject(EmailLayoutFacade);
+    confirmation = inject(ConfirmationService);
+    toast = inject(ToastService);
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
+    sourceControl = new FormControl('', { nonNullable: true });
+    narrow = new FormControl(false, { nonNullable: true });
+    narrowValue = signal(false, ...(ngDevMode ? [{ debugName: "narrowValue" }] : /* istanbul ignore next */ []));
+    preview = signal({ status: 'idle' }, ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+    /** Last successful render — kept on screen (dimmed) while the next one runs. */
+    rendered = signal(null, ...(ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []));
+    previewErrorCode = computed(() => {
+        const state = this.preview();
+        return state.status === 'error' ? state.code : null;
+    }, ...(ngDevMode ? [{ debugName: "previewErrorCode" }] : /* istanbul ignore next */ []));
+    retry$ = new Subject();
+    writeDiagnostics = signal([], ...(ngDevMode ? [{ debugName: "writeDiagnostics" }] : /* istanbul ignore next */ []));
+    slotCount = computed(() => this.facade.draft().split(EMAIL_LAYOUT_CONTENT_SLOT).length - 1, ...(ngDevMode ? [{ debugName: "slotCount" }] : /* istanbul ignore next */ []));
+    byteSize = computed(() => new TextEncoder().encode(this.facade.draft()).length, ...(ngDevMode ? [{ debugName: "byteSize" }] : /* istanbul ignore next */ []));
+    sizeLabel = computed(() => this.transloco.translate('email-delivery.design.size', {
+        used: (this.byteSize() / 1024).toFixed(1),
+        limit: EMAIL_LAYOUT_MAX_BYTES / 1024,
+    }), ...(ngDevMode ? [{ debugName: "sizeLabel" }] : /* istanbul ignore next */ []));
+    overLimit = computed(() => this.byteSize() > EMAIL_LAYOUT_MAX_BYTES, ...(ngDevMode ? [{ debugName: "overLimit" }] : /* istanbul ignore next */ []));
+    /** The size only matters, and is only shown, close to the limit. */
+    nearLimit = computed(() => this.byteSize() >= EMAIL_LAYOUT_MAX_BYTES * 0.8, ...(ngDevMode ? [{ debugName: "nearLimit" }] : /* istanbul ignore next */ []));
+    /** A preview only counts while it was rendered from exactly the current draft. */
+    freshPreview = computed(() => {
+        const state = this.preview();
+        return state.status === 'ready' && state.body === this.facade.draft()
+            ? state.result
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "freshPreview" }] : /* istanbul ignore next */ []));
+    /** The preview ran against a newer live revision than this draft started from. */
+    baselineMoved = computed(() => {
+        const result = this.freshPreview();
+        const snapshot = this.facade.snapshot();
+        return (!!result && !!snapshot && result.effectiveRevision !== snapshot.revision);
+    }, ...(ngDevMode ? [{ debugName: "baselineMoved" }] : /* istanbul ignore next */ []));
+    blockingDiagnostics = computed(() => (this.facade.snapshot()?.diagnostics ?? []).filter((diagnostic) => diagnostic.severity === 'error'), ...(ngDevMode ? [{ debugName: "blockingDiagnostics" }] : /* istanbul ignore next */ []));
+    canPublish = computed(() => {
+        const snapshot = this.facade.snapshot();
+        return (!!snapshot &&
+            (this.facade.dirty() || snapshot.source !== 'published') &&
+            !!this.freshPreview() &&
+            !this.baselineMoved() &&
+            this.slotCount() === 1 &&
+            !this.overLimit() &&
+            !this.facade.conflict() &&
+            this.facade.saving() === null);
+    }, ...(ngDevMode ? [{ debugName: "canPublish" }] : /* istanbul ignore next */ []));
+    publishBlockedReason = computed(() => {
+        if (this.canPublish() || this.facade.saving())
+            return '';
+        const key = this.overLimit()
+            ? 'size-limit'
+            : this.slotCount() !== 1
+                ? 'slot'
+                : this.facade.conflict() || this.baselineMoved()
+                    ? 'conflict'
+                    : !this.freshPreview()
+                        ? 'preview-required'
+                        : 'no-changes';
+        return this.transloco.translate(`email-delivery.design.publish-blocked.${key}`);
+    }, ...(ngDevMode ? [{ debugName: "publishBlockedReason" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // The facade owns the draft so it survives tab switches; mirror it into
+        // the textarea only when it changed from outside (reload, publish, discard).
+        effect(() => {
+            const draft = this.facade.draft();
+            untracked(() => {
+                if (this.sourceControl.value !== draft) {
+                    this.sourceControl.setValue(draft, { emitEvent: false });
+                }
+            });
+        });
+        this.sourceControl.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe((value) => this.facade.draft.set(value));
+        this.narrow.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe((value) => this.narrowValue.set(value));
+        // One preview stream per editor: a pause in typing cancels the previous
+        // request and renders the current draft; Retry re-renders the same draft.
+        const draft$ = toObservable(this.facade.draft);
+        merge(draft$.pipe(debounceTime(500), distinctUntilChanged()), this.retry$.pipe(map(() => this.facade.draft())))
+            .pipe(switchMap((body) => {
+            if (!this.facade.snapshot())
+                return of({ status: 'idle' });
+            return this.facade.preview(body).pipe(map((result) => ({ status: 'ready', body, result })), catchError((error) => of({
+                status: 'error',
+                body,
+                code: this.facade.readErrorCode(error),
+            })), startWith({ status: 'updating', body }));
+        }), takeUntilDestroyed())
+            .subscribe((state) => {
+            this.preview.set(state);
+            if (state.status === 'ready')
+                this.rendered.set(state.result);
+        });
+    }
+    ngOnInit() {
+        // Unsaved edits from an earlier visit to this tab are kept; otherwise
+        // always start from what is live now.
+        if (this.facade.dirty()) {
+            this.retry$.next();
+        }
+        else {
+            this.reload();
+        }
+    }
+    onBeforeUnload(event) {
+        if (this.facade.dirty() || this.facade.saving()) {
+            event.preventDefault();
+        }
+    }
+    reload() {
+        this.facade
+            .load()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: () => this.retry$.next(),
+            error: () => undefined,
+        });
+    }
+    retryPreview() {
+        this.retry$.next();
+    }
+    discard() {
+        if (!this.facade.dirty())
+            return;
+        // Discarded edits cannot be brought back, so ask the same question as
+        // leaving the page.
+        this.confirmation.confirm({
+            type: 'dialog',
+            header: this.t('leave.header'),
+            message: this.t('leave.message'),
+            acceptLabel: this.t('leave.discard'),
+            rejectLabel: this.t('leave.stay'),
+            acceptButton: { severity: 'danger' },
+            accept: () => {
+                this.facade.discard();
+                this.writeDiagnostics.set([]);
+            },
+        });
+    }
+    publish() {
+        if (!this.canPublish())
+            return;
+        this.confirmation.confirm({
+            header: this.t('confirm-publish.header'),
+            message: this.t('confirm-publish.message'),
+            icon: 'communication.mail-01',
+            acceptLabel: this.t('actions.publish'),
+            accept: () => this.facade.publish().subscribe({
+                next: () => {
+                    this.writeDiagnostics.set([]);
+                    this.toast.success(this.t('published'));
+                    this.retry$.next();
+                },
+                error: (error) => this.onWriteError(error),
+            }),
+        });
+    }
+    restorePrevious() {
+        if (this.facade.saving())
+            return;
+        this.confirmation.confirm({
+            header: this.t('confirm-restore.header'),
+            message: this.t(this.facade.dirty()
+                ? 'confirm-restore.message-dirty'
+                : 'confirm-restore.message'),
+            icon: 'arrow.refresh-cw-01',
+            acceptLabel: this.t('actions.restore'),
+            accept: () => this.facade.restorePrevious().subscribe({
+                next: () => {
+                    this.writeDiagnostics.set([]);
+                    this.toast.success(this.t('restored'));
+                    this.retry$.next();
+                },
+                error: (error) => this.onWriteError(error),
+            }),
+        });
+    }
+    resolveConflict(keepDraft) {
+        this.facade
+            .reloadLatest(keepDraft)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({ next: () => this.retry$.next(), error: () => undefined });
+    }
+    describeDiagnostic(diagnostic) {
+        return this.facade.describeDiagnostic(diagnostic);
+    }
+    describeCode(code) {
+        return this.facade.describeCode(code);
+    }
+    onWriteError(error) {
+        this.writeDiagnostics.set(readLayoutErrorDiagnostics(error));
+        if (this.facade.conflict())
+            return; // the banner explains it
+        this.toast.error(this.facade.describeCode(this.facade.readErrorCode(error)));
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.design.${key}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryDesign, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailDeliveryDesign, isStandalone: true, selector: "mt-email-delivery-design", host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery.design'\">\n  @if (facade.loading() && !facade.snapshot()) {\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\" aria-live=\"polite\">\n      <p-skeleton width=\"100%\" height=\"32rem\" borderRadius=\"0.375rem\" />\n      <p-skeleton width=\"100%\" height=\"32rem\" borderRadius=\"0.375rem\" />\n    </div>\n  } @else if (facade.loadFailed() && !facade.snapshot()) {\n    <mt-empty-state\n      illustration=\"none\"\n      [title]=\"t('load-error-title')\"\n      [description]=\"describeCode(facade.loadErrorCode())\"\n      [actionLabel]=\"t('actions.retry')\"\n      actionIcon=\"arrow.refresh-cw-01\"\n      (actionClick)=\"reload()\"\n    />\n  } @else if (facade.snapshot(); as snapshot) {\n    <div class=\"flex min-w-0 flex-col gap-4\">\n      <!-- Status and actions -->\n      <div\n        class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-surface bg-content px-4 py-3\"\n      >\n        <div class=\"flex min-w-0 flex-wrap items-center gap-2 text-sm\">\n          <span\n            class=\"rounded-md border border-surface bg-surface-50 px-2 py-0.5 font-medium\"\n          >\n            {{ t(\"source.\" + snapshot.source) }}\n            @if (snapshot.revision > 0) {\n              \u00B7 {{ t(\"revision\", { revision: snapshot.revision }) }}\n            }\n          </span>\n          @if (facade.dirty()) {\n            <span\n              class=\"rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 font-medium text-amber-700\"\n            >\n              {{ t(\"unsaved\") }}\n            </span>\n          }\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          @if (snapshot.canRestore) {\n            <mt-button\n              icon=\"arrow.refresh-cw-01\"\n              [label]=\"t('actions.restore')\"\n              severity=\"secondary\"\n              variant=\"outlined\"\n              [loading]=\"facade.saving() === 'restore'\"\n              [disabled]=\"facade.saving() !== null\"\n              (onClick)=\"restorePrevious()\"\n            />\n          }\n          <mt-button\n            [label]=\"t('actions.discard')\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [disabled]=\"!facade.dirty() || facade.saving() !== null\"\n            (onClick)=\"discard()\"\n          />\n          <mt-button\n            icon=\"general.check\"\n            [label]=\"t('actions.publish')\"\n            [tooltip]=\"publishBlockedReason()\"\n            [loading]=\"facade.saving() === 'publish'\"\n            [disabled]=\"!canPublish()\"\n            (onClick)=\"publish()\"\n          />\n        </div>\n      </div>\n\n      @if (facade.conflict() || baselineMoved()) {\n        <div\n          class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700\"\n          role=\"alert\"\n        >\n          <span>{{ t(\"conflict\") }}</span>\n          <div class=\"flex flex-wrap gap-2\">\n            <mt-button\n              [label]=\"t('actions.keep-mine')\"\n              size=\"small\"\n              severity=\"secondary\"\n              variant=\"outlined\"\n              (onClick)=\"resolveConflict(true)\"\n            />\n            <mt-button\n              [label]=\"t('actions.load-latest')\"\n              size=\"small\"\n              severity=\"secondary\"\n              (onClick)=\"resolveConflict(false)\"\n            />\n          </div>\n        </div>\n      }\n\n      @if (blockingDiagnostics().length > 0) {\n        <div\n          class=\"rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n          role=\"alert\"\n        >\n          <p class=\"font-medium\">{{ t(\"blocked\") }}</p>\n          <ul class=\"mt-1 list-disc ps-5\">\n            @for (diagnostic of blockingDiagnostics(); track $index) {\n              <li>{{ describeDiagnostic(diagnostic) }}</li>\n            }\n          </ul>\n        </div>\n      }\n\n      @if (writeDiagnostics().length > 0) {\n        <div\n          class=\"rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n          role=\"alert\"\n        >\n          <ul class=\"list-disc ps-5\">\n            @for (diagnostic of writeDiagnostics(); track $index) {\n              <li>{{ describeDiagnostic(diagnostic) }}</li>\n            }\n          </ul>\n        </div>\n      }\n\n      <div class=\"grid min-w-0 grid-cols-1 gap-4 xl:grid-cols-2\">\n        <!-- HTML source -->\n        <section\n          class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n        >\n          <header\n            class=\"flex items-center justify-between gap-2 border-b border-surface bg-surface-50 px-4 py-2.5\"\n          >\n            <h3 class=\"text-sm font-semibold\">{{ t(\"source-title\") }}</h3>\n            @if (nearLimit()) {\n              <span\n                class=\"text-xs\"\n                [class.text-red-600]=\"overLimit()\"\n                [class.text-amber-700]=\"!overLimit()\"\n                >{{ sizeLabel() }}</span\n              >\n            }\n          </header>\n          <div class=\"flex flex-col gap-2 p-4\">\n            <mt-email-visual-editor\n              [formControl]=\"sourceControl\"\n              [label]=\"t('source-label')\"\n              [hint]=\"t('source-hint')\"\n              [layout]=\"true\"\n              [approvedImageOrigins]=\"snapshot.approvedImageOrigins\"\n              height=\"34rem\"\n            />\n            @if (slotCount() !== 1) {\n              <p class=\"text-sm text-red-600\" role=\"alert\">\n                {{ t(slotCount() === 0 ? \"slot-missing\" : \"slot-duplicate\") }}\n              </p>\n            }\n          </div>\n        </section>\n\n        <!-- Live preview -->\n        <section\n          class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n        >\n          <header\n            class=\"flex flex-wrap items-center justify-between gap-2 border-b border-surface bg-surface-50 px-4 py-2.5\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <h3 class=\"text-sm font-semibold\">{{ t(\"preview-title\") }}</h3>\n              <span class=\"text-xs text-muted-color\" aria-live=\"polite\">{{\n                preview().status === \"updating\" ? t(\"preview-updating\") : \"\"\n              }}</span>\n            </div>\n            <mt-toggle-field [formControl]=\"narrow\" [label]=\"t('narrow')\" />\n          </header>\n          <div class=\"flex flex-col gap-3 p-4\">\n            @if (preview().status === \"error\") {\n              <div\n                class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n                role=\"alert\"\n              >\n                <span>{{ describeCode(previewErrorCode()) }}</span>\n                <mt-button\n                  [label]=\"t('actions.retry')\"\n                  size=\"small\"\n                  severity=\"secondary\"\n                  variant=\"outlined\"\n                  (onClick)=\"retryPreview()\"\n                />\n              </div>\n            }\n            <!-- 39rem = the editor frame (34rem) plus its label and toolbar, so\n                 both columns end level. -->\n            @if (rendered(); as rendered) {\n              <div\n                class=\"mx-auto w-full overflow-hidden rounded-md border border-surface transition-opacity\"\n                [class.max-w-[375px]]=\"narrowValue()\"\n                [class.opacity-60]=\"!freshPreview()\"\n              >\n                <mt-email-html-preview\n                  [html]=\"rendered.html\"\n                  [showImages]=\"true\"\n                  [approvedImageOrigins]=\"rendered.approvedImageOrigins\"\n                  [title]=\"t('preview-title')\"\n                  height=\"39rem\"\n                />\n              </div>\n              @if (rendered.diagnostics.length > 0) {\n                <ul class=\"list-disc ps-5 text-sm text-amber-700\">\n                  @for (diagnostic of rendered.diagnostics; track $index) {\n                    <li>{{ describeDiagnostic(diagnostic) }}</li>\n                  }\n                </ul>\n              }\n            } @else if (preview().status !== \"error\") {\n              <p-skeleton width=\"100%\" height=\"39rem\" borderRadius=\"0.375rem\" />\n            }\n          </div>\n        </section>\n      </div>\n    </div>\n  }\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: 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: "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: EmailVisualEditor, selector: "mt-email-visual-editor", inputs: ["label", "hint", "placeholders", "layout", "height", "direction", "starter", "approvedImageOrigins"], outputs: ["focused"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: EmailHtmlPreview, selector: "mt-email-html-preview", inputs: ["html", "showImages", "approvedImageOrigins", "fragment", "direction", "title", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryDesign, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-delivery-design', imports: [
+                        TranslocoDirective,
+                        ReactiveFormsModule,
+                        Button,
+                        EmptyState,
+                        EmailVisualEditor,
+                        ToggleField,
+                        Skeleton,
+                        EmailHtmlPreview,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery.design'\">\n  @if (facade.loading() && !facade.snapshot()) {\n    <div class=\"grid grid-cols-1 gap-4 xl:grid-cols-2\" aria-live=\"polite\">\n      <p-skeleton width=\"100%\" height=\"32rem\" borderRadius=\"0.375rem\" />\n      <p-skeleton width=\"100%\" height=\"32rem\" borderRadius=\"0.375rem\" />\n    </div>\n  } @else if (facade.loadFailed() && !facade.snapshot()) {\n    <mt-empty-state\n      illustration=\"none\"\n      [title]=\"t('load-error-title')\"\n      [description]=\"describeCode(facade.loadErrorCode())\"\n      [actionLabel]=\"t('actions.retry')\"\n      actionIcon=\"arrow.refresh-cw-01\"\n      (actionClick)=\"reload()\"\n    />\n  } @else if (facade.snapshot(); as snapshot) {\n    <div class=\"flex min-w-0 flex-col gap-4\">\n      <!-- Status and actions -->\n      <div\n        class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-surface bg-content px-4 py-3\"\n      >\n        <div class=\"flex min-w-0 flex-wrap items-center gap-2 text-sm\">\n          <span\n            class=\"rounded-md border border-surface bg-surface-50 px-2 py-0.5 font-medium\"\n          >\n            {{ t(\"source.\" + snapshot.source) }}\n            @if (snapshot.revision > 0) {\n              \u00B7 {{ t(\"revision\", { revision: snapshot.revision }) }}\n            }\n          </span>\n          @if (facade.dirty()) {\n            <span\n              class=\"rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 font-medium text-amber-700\"\n            >\n              {{ t(\"unsaved\") }}\n            </span>\n          }\n        </div>\n        <div class=\"flex flex-wrap items-center gap-2\">\n          @if (snapshot.canRestore) {\n            <mt-button\n              icon=\"arrow.refresh-cw-01\"\n              [label]=\"t('actions.restore')\"\n              severity=\"secondary\"\n              variant=\"outlined\"\n              [loading]=\"facade.saving() === 'restore'\"\n              [disabled]=\"facade.saving() !== null\"\n              (onClick)=\"restorePrevious()\"\n            />\n          }\n          <mt-button\n            [label]=\"t('actions.discard')\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [disabled]=\"!facade.dirty() || facade.saving() !== null\"\n            (onClick)=\"discard()\"\n          />\n          <mt-button\n            icon=\"general.check\"\n            [label]=\"t('actions.publish')\"\n            [tooltip]=\"publishBlockedReason()\"\n            [loading]=\"facade.saving() === 'publish'\"\n            [disabled]=\"!canPublish()\"\n            (onClick)=\"publish()\"\n          />\n        </div>\n      </div>\n\n      @if (facade.conflict() || baselineMoved()) {\n        <div\n          class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700\"\n          role=\"alert\"\n        >\n          <span>{{ t(\"conflict\") }}</span>\n          <div class=\"flex flex-wrap gap-2\">\n            <mt-button\n              [label]=\"t('actions.keep-mine')\"\n              size=\"small\"\n              severity=\"secondary\"\n              variant=\"outlined\"\n              (onClick)=\"resolveConflict(true)\"\n            />\n            <mt-button\n              [label]=\"t('actions.load-latest')\"\n              size=\"small\"\n              severity=\"secondary\"\n              (onClick)=\"resolveConflict(false)\"\n            />\n          </div>\n        </div>\n      }\n\n      @if (blockingDiagnostics().length > 0) {\n        <div\n          class=\"rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n          role=\"alert\"\n        >\n          <p class=\"font-medium\">{{ t(\"blocked\") }}</p>\n          <ul class=\"mt-1 list-disc ps-5\">\n            @for (diagnostic of blockingDiagnostics(); track $index) {\n              <li>{{ describeDiagnostic(diagnostic) }}</li>\n            }\n          </ul>\n        </div>\n      }\n\n      @if (writeDiagnostics().length > 0) {\n        <div\n          class=\"rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n          role=\"alert\"\n        >\n          <ul class=\"list-disc ps-5\">\n            @for (diagnostic of writeDiagnostics(); track $index) {\n              <li>{{ describeDiagnostic(diagnostic) }}</li>\n            }\n          </ul>\n        </div>\n      }\n\n      <div class=\"grid min-w-0 grid-cols-1 gap-4 xl:grid-cols-2\">\n        <!-- HTML source -->\n        <section\n          class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n        >\n          <header\n            class=\"flex items-center justify-between gap-2 border-b border-surface bg-surface-50 px-4 py-2.5\"\n          >\n            <h3 class=\"text-sm font-semibold\">{{ t(\"source-title\") }}</h3>\n            @if (nearLimit()) {\n              <span\n                class=\"text-xs\"\n                [class.text-red-600]=\"overLimit()\"\n                [class.text-amber-700]=\"!overLimit()\"\n                >{{ sizeLabel() }}</span\n              >\n            }\n          </header>\n          <div class=\"flex flex-col gap-2 p-4\">\n            <mt-email-visual-editor\n              [formControl]=\"sourceControl\"\n              [label]=\"t('source-label')\"\n              [hint]=\"t('source-hint')\"\n              [layout]=\"true\"\n              [approvedImageOrigins]=\"snapshot.approvedImageOrigins\"\n              height=\"34rem\"\n            />\n            @if (slotCount() !== 1) {\n              <p class=\"text-sm text-red-600\" role=\"alert\">\n                {{ t(slotCount() === 0 ? \"slot-missing\" : \"slot-duplicate\") }}\n              </p>\n            }\n          </div>\n        </section>\n\n        <!-- Live preview -->\n        <section\n          class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n        >\n          <header\n            class=\"flex flex-wrap items-center justify-between gap-2 border-b border-surface bg-surface-50 px-4 py-2.5\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <h3 class=\"text-sm font-semibold\">{{ t(\"preview-title\") }}</h3>\n              <span class=\"text-xs text-muted-color\" aria-live=\"polite\">{{\n                preview().status === \"updating\" ? t(\"preview-updating\") : \"\"\n              }}</span>\n            </div>\n            <mt-toggle-field [formControl]=\"narrow\" [label]=\"t('narrow')\" />\n          </header>\n          <div class=\"flex flex-col gap-3 p-4\">\n            @if (preview().status === \"error\") {\n              <div\n                class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n                role=\"alert\"\n              >\n                <span>{{ describeCode(previewErrorCode()) }}</span>\n                <mt-button\n                  [label]=\"t('actions.retry')\"\n                  size=\"small\"\n                  severity=\"secondary\"\n                  variant=\"outlined\"\n                  (onClick)=\"retryPreview()\"\n                />\n              </div>\n            }\n            <!-- 39rem = the editor frame (34rem) plus its label and toolbar, so\n                 both columns end level. -->\n            @if (rendered(); as rendered) {\n              <div\n                class=\"mx-auto w-full overflow-hidden rounded-md border border-surface transition-opacity\"\n                [class.max-w-[375px]]=\"narrowValue()\"\n                [class.opacity-60]=\"!freshPreview()\"\n              >\n                <mt-email-html-preview\n                  [html]=\"rendered.html\"\n                  [showImages]=\"true\"\n                  [approvedImageOrigins]=\"rendered.approvedImageOrigins\"\n                  [title]=\"t('preview-title')\"\n                  height=\"39rem\"\n                />\n              </div>\n              @if (rendered.diagnostics.length > 0) {\n                <ul class=\"list-disc ps-5 text-sm text-amber-700\">\n                  @for (diagnostic of rendered.diagnostics; track $index) {\n                    <li>{{ describeDiagnostic(diagnostic) }}</li>\n                  }\n                </ul>\n              }\n            } @else if (preview().status !== \"error\") {\n              <p-skeleton width=\"100%\" height=\"39rem\" borderRadius=\"0.375rem\" />\n            }\n          </div>\n        </section>\n      </div>\n    </div>\n  }\n</ng-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { onBeforeUnload: [{
+                type: HostListener,
+                args: ['window:beforeunload', ['$event']]
+            }] } });
+
+const EMAIL_DELIVERY_TABS = [
+    'connections',
+    'activity',
+    'design',
+];
 class EmailDeliveryShell {
     route = inject(ActivatedRoute);
     router = inject(Router);
@@ -2077,6 +2315,7 @@ class EmailDeliveryShell {
         return [
             { label: this.t('tabs.connections'), value: 'connections' },
             { label: this.t('tabs.activity'), value: 'activity' },
+            { label: this.t('tabs.design'), value: 'design' },
         ];
     }, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
     /**
@@ -2118,7 +2357,7 @@ class EmailDeliveryShell {
     }, ...(ngDevMode ? [{ debugName: "readinessHint" }] : /* istanbul ignore next */ []));
     constructor() {
         this.route.queryParamMap.pipe(takeUntilDestroyed()).subscribe((params) => {
-            this.activeTab.set(params.get('tab') === 'activity' ? 'activity' : 'connections');
+            this.activeTab.set(toTab(params.get('tab')));
         });
     }
     ngOnInit() {
@@ -2144,7 +2383,7 @@ class EmailDeliveryShell {
         });
     }
     onTabChange(value) {
-        if (value !== 'connections' && value !== 'activity')
+        if (!EMAIL_DELIVERY_TABS.includes(value))
             return;
         void this.router.navigate([], {
             relativeTo: this.route,
@@ -2156,9 +2395,7 @@ class EmailDeliveryShell {
         void this.router.navigate([PRODUCT_SETTINGS_ROUTE]);
     }
     syncTabFromUrl() {
-        this.activeTab.set(this.route.snapshot.queryParamMap.get('tab') === 'activity'
-            ? 'activity'
-            : 'connections');
+        this.activeTab.set(toTab(this.route.snapshot.queryParamMap.get('tab')));
     }
     handleAuthorizationCallback() {
         const query = this.route.snapshot.queryParamMap;
@@ -2194,7 +2431,7 @@ 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    <!-- Declared unconditionally: a content query cannot reach a template that\r\n         only exists inside a control-flow block, so the condition lives here. -->\r\n    <ng-template #titleEnd>\r\n      @if (canView() && readiness(); as state) {\r\n        <span class=\"shrink-0\" [mtTooltip]=\"readinessHint()\">\r\n          <mt-email-delivery-status kind=\"readiness\" [value]=\"state\" />\r\n        </span>\r\n      }\r\n    </ng-template>\r\n\r\n    @if (facade.permissionsLoading()) {\r\n      <div class=\"p-6 text-sm text-muted-color\" aria-live=\"polite\">\r\n        {{ t(\"access-checking\") }}\r\n      </div>\r\n    } @else if (canView()) {\r\n      <div\r\n        class=\"flex min-h-0 flex-col gap-4 [&_.mt-actions-column]:w-[5rem] [&_mt-card]:rounded-md [&_mt-table_:has(>.p-datatable)]:rounded-md\"\r\n      >\r\n        <mt-breadcrumb\r\n          [items]=\"breadcrumbItems()\"\r\n          styleClass=\"mx-1 flex justify-start\"\r\n        />\r\n\r\n        @if (activeTab() === \"activity\") {\r\n          <mt-email-delivery-activity />\r\n        } @else {\r\n          <mt-email-delivery-connections />\r\n        }\r\n      </div>\r\n    } @else if (facade.permissionsError()) {\r\n      <!-- A failed access read is not a denial; say so and offer the retry,\r\n           otherwise a transient 500 reads as \"you do not have access\". -->\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('access-error-title')\"\r\n        [description]=\"t('access-error-description')\"\r\n        [actionLabel]=\"t('access-retry')\"\r\n        actionIcon=\"arrow.refresh-cw-01\"\r\n        (actionClick)=\"retryPermissions()\"\r\n      />\r\n    } @else {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('access-denied-title')\"\r\n        [description]=\"t('access-denied-description')\"\r\n      />\r\n    }\r\n  </mt-page>\r\n</ng-container>\r\n", dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }, { kind: "component", type: EmailDeliveryConnections, selector: "mt-email-delivery-connections" }, { kind: "component", type: EmailDeliveryActivity, selector: "mt-email-delivery-activity" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailDeliveryShell, isStandalone: true, selector: "mt-email-delivery-shell", ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <mt-page\n    [title]=\"t('title')\"\n    avatarIcon=\"communication.mail-01\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-blue-100)',\n      '--p-avatar-color': 'var(--p-blue-700)',\n    }\"\n    [tabs]=\"canView() ? tabs() : []\"\n    [activeTab]=\"activeTab()\"\n    contentClass=\"min-h-0 max-[1025px]:p-4 max-[640px]:p-3\"\n    backButton\n    (backButtonClick)=\"goBack()\"\n    (tabChange)=\"onTabChange($event)\"\n  >\n    <!-- Declared unconditionally: a content query cannot reach a template that\n         only exists inside a control-flow block, so the condition lives here. -->\n    <ng-template #titleEnd>\n      @if (canView() && readiness(); as state) {\n        <span class=\"shrink-0\" [mtTooltip]=\"readinessHint()\">\n          <mt-email-delivery-status kind=\"readiness\" [value]=\"state\" />\n        </span>\n      }\n    </ng-template>\n\n    @if (facade.permissionsLoading()) {\n      <div class=\"p-6 text-sm text-muted-color\" aria-live=\"polite\">\n        {{ t(\"access-checking\") }}\n      </div>\n    } @else if (canView()) {\n      <div\n        class=\"flex min-h-0 flex-col gap-4 [&_.mt-actions-column]:w-[5rem] [&_mt-card]:rounded-md [&_mt-table_:has(>.p-datatable)]:rounded-md\"\n      >\n        <mt-breadcrumb\n          [items]=\"breadcrumbItems()\"\n          styleClass=\"mx-1 flex justify-start\"\n        />\n\n        @if (activeTab() === \"activity\") {\n          <mt-email-delivery-activity />\n        } @else if (activeTab() === \"design\") {\n          <mt-email-delivery-design />\n        } @else {\n          <mt-email-delivery-connections />\n        }\n      </div>\n    } @else if (facade.permissionsError()) {\n      <!-- A failed access read is not a denial; say so and offer the retry,\n           otherwise a transient 500 reads as \"you do not have access\". -->\n      <mt-empty-state\n        illustration=\"none\"\n        [title]=\"t('access-error-title')\"\n        [description]=\"t('access-error-description')\"\n        [actionLabel]=\"t('access-retry')\"\n        actionIcon=\"arrow.refresh-cw-01\"\n        (actionClick)=\"retryPermissions()\"\n      />\n    } @else {\n      <mt-empty-state\n        illustration=\"none\"\n        [title]=\"t('access-denied-title')\"\n        [description]=\"t('access-denied-description')\"\n      />\n    }\n  </mt-page>\n</ng-container>\n", dependencies: [{ kind: "component", type: Page, selector: "mt-page", inputs: ["backButton", "backButtonIcon", "avatarIcon", "avatarStyle", "avatarShape", "title", "tabs", "activeTab", "contentClass", "contentId"], outputs: ["backButtonClick", "tabChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Breadcrumb, selector: "mt-breadcrumb", inputs: ["items", "styleClass"], outputs: ["onItemClick"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: EmailDeliveryStatus, selector: "mt-email-delivery-status", inputs: ["value", "kind"] }, { kind: "component", type: EmailDeliveryConnections, selector: "mt-email-delivery-connections" }, { kind: "component", type: EmailDeliveryActivity, selector: "mt-email-delivery-activity" }, { kind: "component", type: EmailDeliveryDesign, selector: "mt-email-delivery-design" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailDeliveryShell, decorators: [{
             type: Component,
@@ -2207,9 +2444,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         EmailDeliveryStatus,
                         EmailDeliveryConnections,
                         EmailDeliveryActivity,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\r\n  <mt-page\r\n    [title]=\"t('title')\"\r\n    avatarIcon=\"communication.mail-01\"\r\n    [avatarStyle]=\"{\r\n      '--p-avatar-background': 'var(--p-blue-100)',\r\n      '--p-avatar-color': 'var(--p-blue-700)',\r\n    }\"\r\n    [tabs]=\"canView() ? tabs() : []\"\r\n    [activeTab]=\"activeTab()\"\r\n    contentClass=\"min-h-0 max-[1025px]:p-4 max-[640px]:p-3\"\r\n    backButton\r\n    (backButtonClick)=\"goBack()\"\r\n    (tabChange)=\"onTabChange($event)\"\r\n  >\r\n    <!-- Declared unconditionally: a content query cannot reach a template that\r\n         only exists inside a control-flow block, so the condition lives here. -->\r\n    <ng-template #titleEnd>\r\n      @if (canView() && readiness(); as state) {\r\n        <span class=\"shrink-0\" [mtTooltip]=\"readinessHint()\">\r\n          <mt-email-delivery-status kind=\"readiness\" [value]=\"state\" />\r\n        </span>\r\n      }\r\n    </ng-template>\r\n\r\n    @if (facade.permissionsLoading()) {\r\n      <div class=\"p-6 text-sm text-muted-color\" aria-live=\"polite\">\r\n        {{ t(\"access-checking\") }}\r\n      </div>\r\n    } @else if (canView()) {\r\n      <div\r\n        class=\"flex min-h-0 flex-col gap-4 [&_.mt-actions-column]:w-[5rem] [&_mt-card]:rounded-md [&_mt-table_:has(>.p-datatable)]:rounded-md\"\r\n      >\r\n        <mt-breadcrumb\r\n          [items]=\"breadcrumbItems()\"\r\n          styleClass=\"mx-1 flex justify-start\"\r\n        />\r\n\r\n        @if (activeTab() === \"activity\") {\r\n          <mt-email-delivery-activity />\r\n        } @else {\r\n          <mt-email-delivery-connections />\r\n        }\r\n      </div>\r\n    } @else if (facade.permissionsError()) {\r\n      <!-- A failed access read is not a denial; say so and offer the retry,\r\n           otherwise a transient 500 reads as \"you do not have access\". -->\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('access-error-title')\"\r\n        [description]=\"t('access-error-description')\"\r\n        [actionLabel]=\"t('access-retry')\"\r\n        actionIcon=\"arrow.refresh-cw-01\"\r\n        (actionClick)=\"retryPermissions()\"\r\n      />\r\n    } @else {\r\n      <mt-empty-state\r\n        illustration=\"none\"\r\n        [title]=\"t('access-denied-title')\"\r\n        [description]=\"t('access-denied-description')\"\r\n      />\r\n    }\r\n  </mt-page>\r\n</ng-container>\r\n" }]
+                        EmailDeliveryDesign,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery'\">\n  <mt-page\n    [title]=\"t('title')\"\n    avatarIcon=\"communication.mail-01\"\n    [avatarStyle]=\"{\n      '--p-avatar-background': 'var(--p-blue-100)',\n      '--p-avatar-color': 'var(--p-blue-700)',\n    }\"\n    [tabs]=\"canView() ? tabs() : []\"\n    [activeTab]=\"activeTab()\"\n    contentClass=\"min-h-0 max-[1025px]:p-4 max-[640px]:p-3\"\n    backButton\n    (backButtonClick)=\"goBack()\"\n    (tabChange)=\"onTabChange($event)\"\n  >\n    <!-- Declared unconditionally: a content query cannot reach a template that\n         only exists inside a control-flow block, so the condition lives here. -->\n    <ng-template #titleEnd>\n      @if (canView() && readiness(); as state) {\n        <span class=\"shrink-0\" [mtTooltip]=\"readinessHint()\">\n          <mt-email-delivery-status kind=\"readiness\" [value]=\"state\" />\n        </span>\n      }\n    </ng-template>\n\n    @if (facade.permissionsLoading()) {\n      <div class=\"p-6 text-sm text-muted-color\" aria-live=\"polite\">\n        {{ t(\"access-checking\") }}\n      </div>\n    } @else if (canView()) {\n      <div\n        class=\"flex min-h-0 flex-col gap-4 [&_.mt-actions-column]:w-[5rem] [&_mt-card]:rounded-md [&_mt-table_:has(>.p-datatable)]:rounded-md\"\n      >\n        <mt-breadcrumb\n          [items]=\"breadcrumbItems()\"\n          styleClass=\"mx-1 flex justify-start\"\n        />\n\n        @if (activeTab() === \"activity\") {\n          <mt-email-delivery-activity />\n        } @else if (activeTab() === \"design\") {\n          <mt-email-delivery-design />\n        } @else {\n          <mt-email-delivery-connections />\n        }\n      </div>\n    } @else if (facade.permissionsError()) {\n      <!-- A failed access read is not a denial; say so and offer the retry,\n           otherwise a transient 500 reads as \"you do not have access\". -->\n      <mt-empty-state\n        illustration=\"none\"\n        [title]=\"t('access-error-title')\"\n        [description]=\"t('access-error-description')\"\n        [actionLabel]=\"t('access-retry')\"\n        actionIcon=\"arrow.refresh-cw-01\"\n        (actionClick)=\"retryPermissions()\"\n      />\n    } @else {\n      <mt-empty-state\n        illustration=\"none\"\n        [title]=\"t('access-denied-title')\"\n        [description]=\"t('access-denied-description')\"\n      />\n    }\n  </mt-page>\n</ng-container>\n" }]
         }], ctorParameters: () => [] });
 const PRODUCT_SETTINGS_ROUTE = '/control-panel/product-settings';
+function toTab(value) {
+    return EMAIL_DELIVERY_TABS.includes(value)
+        ? value
+        : 'connections';
+}
 
 export { EmailDeliveryShell };
-//# sourceMappingURL=masterteam-system-settings-email-delivery-shell-oTWOzKWj.mjs.map
+//# sourceMappingURL=masterteam-system-settings-email-delivery-shell-D9NShoTc.mjs.map