@masterteam/system-settings 0.0.22 → 0.0.23

package/fesm2022/{masterteam-system-settings-masterteam-system-settings-7I4TfgwP.mjs → masterteam-system-settings-masterteam-system-settings-C51hZw-Q.mjs}

@@ -1,10 +1,10 @@
-import { CommonModule } from '@angular/common';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, inject, computed, effect, output, signal, InjectionToken, makeEnvironmentProviders, Injectable, DestroyRef } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, inject, computed, effect, output, signal, InjectionToken, makeEnvironmentProviders, Injectable, DestroyRef, viewChild, untracked, forwardRef } from '@angular/core';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
-import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
+import { ReactiveFormsModule, FormGroup, FormControl, Validators, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Router } from '@angular/router';
 import { TranslocoDirective, TranslocoService } from '@jsverse/transloco';
 import { Breadcrumb } from '@masterteam/components/breadcrumb';
@@ -24,9 +24,13 @@ import { TextField } from '@masterteam/components/text-field';
 import { Table } from '@masterteam/components/table';
 import { MultiSelectField } from '@masterteam/components/multi-select-field';
 import { NumberField } from '@masterteam/components/number-field';
-import { of, map, tap, catchError, throwError, finalize, shareReplay, mergeMap, switchMap, forkJoin, timer } from 'rxjs';
+import { of, map, tap, catchError, throwError, finalize, shareReplay, mergeMap, switchMap, forkJoin, timer, Observable } from 'rxjs';
 import { TextareaField } from '@masterteam/components/textarea-field';
 import { EntityStatus } from '@masterteam/components/entities';
+import { ConfirmationService } from '@masterteam/components/confirmation';
+import { Tabs } from '@masterteam/components/tabs';
+import { Tooltip } from '@masterteam/components/tooltip';
+import { Icon } from '@masterteam/icons';
 
 /**
  * "Experience & Appearance" — product-wide application behaviour that is not
@@ -192,7 +196,7 @@ class SystemSettingsHolidaysSection {
     ], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
     hasHolidays = computed(() => this.holidays().length > 0, ...(ngDevMode ? [{ debugName: "hasHolidays" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SystemSettingsHolidaysSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SystemSettingsHolidaysSection, isStandalone: true, selector: "mt-system-settings-holidays-section", inputs: { holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addHoliday: "addHoliday", editHoliday: "editHoliday", deleteHoliday: "deleteHoliday" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\n  <mt-card class=\"block\">\n    <div class=\"space-y-6\">\n      <div\n        class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\"\n      >\n        <div class=\"space-y-1\">\n          <h4 class=\"text-base font-semibold text-neutral-900\">\n            {{ t(\"holidays-title\") }}\n          </h4>\n          <p class=\"text-sm text-neutral-600\">\n            {{ t(\"holidays-description\") }}\n          </p>\n        </div>\n\n        <mt-button\n          [label]=\"t('add-holiday')\"\n          icon=\"general.plus\"\n          (onClick)=\"addHoliday.emit()\"\n        />\n      </div>\n\n      @if (hasHolidays()) {\n        <mt-table\n          noCard\n          [data]=\"holidays()\"\n          [columns]=\"columns()\"\n          [rowActions]=\"rowActions()\"\n          [generalSearch]=\"false\"\n          [showFilters]=\"false\"\n          [dataKey]=\"'rowKey'\"\n          storageKey=\"admin-system-settings-holidays-table\"\n        >\n        </mt-table>\n      } @else {\n        <div\n          class=\"rounded-xl border border-dashed border-neutral-300 bg-neutral-50 px-6 py-10 text-center\"\n        >\n          <h5 class=\"text-base font-semibold text-neutral-900\">\n            {{ t(\"no-holidays-title\") }}\n          </h5>\n          <p class=\"mt-2 text-sm text-neutral-600\">\n            {{ t(\"no-holidays-description\") }}\n          </p>\n        </div>\n      }\n    </div>\n  </mt-card>\n</ng-container>\n", styles: [":host{display:block}\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: 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: SystemSettingsHolidaysSection, isStandalone: true, selector: "mt-system-settings-holidays-section", inputs: { holidays: { classPropertyName: "holidays", publicName: "holidays", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addHoliday: "addHoliday", editHoliday: "editHoliday", deleteHoliday: "deleteHoliday" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'system-settings'\">\n  <mt-card class=\"block\">\n    <div class=\"space-y-6\">\n      <div\n        class=\"flex flex-col gap-4 md:flex-row md:items-start md:justify-between\"\n      >\n        <div class=\"space-y-1\">\n          <h4 class=\"text-base font-semibold text-neutral-900\">\n            {{ t(\"holidays-title\") }}\n          </h4>\n          <p class=\"text-sm text-neutral-600\">\n            {{ t(\"holidays-description\") }}\n          </p>\n        </div>\n\n        <mt-button\n          [label]=\"t('add-holiday')\"\n          icon=\"general.plus\"\n          (onClick)=\"addHoliday.emit()\"\n        />\n      </div>\n\n      @if (hasHolidays()) {\n        <mt-table\n          noCard\n          [data]=\"holidays()\"\n          [columns]=\"columns()\"\n          [rowActions]=\"rowActions()\"\n          [generalSearch]=\"false\"\n          [showFilters]=\"false\"\n          [dataKey]=\"'rowKey'\"\n          storageKey=\"admin-system-settings-holidays-table\"\n        >\n        </mt-table>\n      } @else {\n        <div\n          class=\"rounded-xl border border-dashed border-neutral-300 bg-neutral-50 px-6 py-10 text-center\"\n        >\n          <h5 class=\"text-base font-semibold text-neutral-900\">\n            {{ t(\"no-holidays-title\") }}\n          </h5>\n          <p class=\"mt-2 text-sm text-neutral-600\">\n            {{ t(\"no-holidays-description\") }}\n          </p>\n        </div>\n      }\n    </div>\n  </mt-card>\n</ng-container>\n", styles: [":host{display:block}\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: 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: SystemSettingsHolidaysSection, decorators: [{
             type: Component,
@@ -2679,6 +2683,12 @@ class EmailUserTestDialog {
     sourceLabel = input('', ...(ngDevMode ? [{ debugName: "sourceLabel" }] : /* istanbul ignore next */ []));
     placeholderKeys = input([], ...(ngDevMode ? [{ debugName: "placeholderKeys" }] : /* istanbul ignore next */ []));
     placeholderFields = input([], ...(ngDevMode ? [{ debugName: "placeholderFields" }] : /* istanbul ignore next */ []));
+    /**
+     * When given, these values fill the placeholders and the per-placeholder
+     * fields are not shown (the notification editor sends the same readable
+     * samples as its preview).
+     */
+    sampleValues = input(null, ...(ngDevMode ? [{ debugName: "sampleValues" }] : /* istanbul ignore next */ []));
     modal = inject(ModalService);
     ref = inject(ModalRef);
     destroyRef = inject(DestroyRef);
@@ -2755,7 +2765,11 @@ class EmailUserTestDialog {
         const request = {
             testRequestId: this.testRequestId(),
             emails: parseEmailTestRecipients(this.recipients.value),
-            metadata: Object.fromEntries(this.metadataControls().map(({ key, control }) => [key, control.value])),
+            metadata: this.sampleValues() ??
+                Object.fromEntries(this.metadataControls().map(({ key, control }) => [
+                    key,
+                    control.value,
+                ])),
         };
         const operation = this.operation(request);
         if (!operation)
@@ -2858,7 +2872,7 @@ class EmailUserTestDialog {
         return this.transloco.translate(`email-delivery.user-test.${key}`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailUserTestDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailUserTestDialog, isStandalone: true, selector: "mt-email-user-test-dialog", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: true, transformFunction: null }, eventId: { classPropertyName: "eventId", publicName: "eventId", isSignal: true, isRequired: false, transformFunction: null }, templateId: { classPropertyName: "templateId", publicName: "templateId", isSignal: true, isRequired: false, transformFunction: null }, alertId: { classPropertyName: "alertId", publicName: "alertId", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholderKeys: { classPropertyName: "placeholderKeys", publicName: "placeholderKeys", isSignal: true, isRequired: false, transformFunction: null }, placeholderFields: { classPropertyName: "placeholderFields", publicName: "placeholderFields", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery.user-test'\">\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(\"real-email-warning-title\") }}</strong>\r\n      {{ t(\"real-email-warning\") }}\r\n    </div>\r\n\r\n    @if (sourceLabel()) {\r\n      <p class=\"mb-2 text-sm font-medium\">{{ sourceLabel() }}</p>\r\n    }\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      <div class=\"grid gap-4\">\r\n        <mt-textarea-field\r\n          [formControl]=\"recipients\"\r\n          [label]=\"t('recipients')\"\r\n          [placeholder]=\"t('recipients-placeholder')\"\r\n          [hint]=\"t('recipients-hint')\"\r\n          rows=\"3\"\r\n          [required]=\"true\"\r\n        />\r\n\r\n        @if (metadataControls().length > 0) {\r\n          <div class=\"rounded-md border border-surface-200 p-4\">\r\n            <p class=\"m-0 text-sm font-semibold\">\r\n              {{ t(\"placeholder-values\") }}\r\n            </p>\r\n            <p class=\"mt-1 mb-4 text-xs text-muted-color\">\r\n              {{ t(\"placeholder-values-hint\") }}\r\n            </p>\r\n            <div class=\"grid gap-4 md:grid-cols-2\">\r\n              @for (item of metadataControls(); track item.key) {\r\n                <mt-text-field\r\n                  [formControl]=\"item.control\"\r\n                  [label]=\"item.label\"\r\n                  [placeholder]=\"t('placeholder-value')\"\r\n                />\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <p class=\"m-0 text-sm text-muted-color\">\r\n            {{ t(\"no-placeholders\") }}\r\n          </p>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (polling() && !result()) {\r\n      <div\r\n        class=\"mt-4 rounded-md border border-surface-200 bg-surface-50 px-4 py-3\"\r\n        aria-live=\"polite\"\r\n      >\r\n        <p class=\"m-0 font-semibold\">\r\n          {{ t(\"pending-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm text-muted-color\">\r\n          {{ t(\"pending-description\") }}\r\n        </p>\r\n      </div>\r\n    } @else if (timedOut() && !result()) {\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=\"m-0 font-semibold text-orange-950\">\r\n          {{ t(\"timeout-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm text-orange-900\">\r\n          {{ t(\"timeout-description\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n\r\n    @if (result(); as dispatch) {\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        <p class=\"m-0 font-semibold\">\r\n          {{ dispatch.allAccepted ? t(\"accepted\") : t(\"not-accepted\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm text-muted-color\">\r\n          {{ t(\"request-state\") }}: {{ dispatch.requestState }}\r\n        </p>\r\n        @if (dispatch.expectedRecipientCount !== null) {\r\n          <p class=\"mt-1 mb-0 text-sm text-muted-color\">\r\n            {{ t(\"recipient-count\") }}: {{ dispatch.expectedRecipientCount }}\r\n          </p>\r\n        }\r\n        @if (dispatch.allAccepted) {\r\n          <p class=\"mt-3 mb-0 text-sm font-medium text-amber-800\">\r\n            {{ t(\"accepted-unconfirmed\") }}\r\n          </p>\r\n        }\r\n\r\n        @for (item of dispatch.results; track $index) {\r\n          <div\r\n            class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\"\r\n          >\r\n            <mt-email-delivery-status kind=\"attempt\" [value]=\"item.outcome\" />\r\n            <p class=\"mt-1 mb-0 text-xs text-muted-color\">\r\n              {{ facade.describeCode(item.code) }}\r\n            </p>\r\n          </div>\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 ((polling() || timedOut()) && !result()) {\r\n      <mt-button\r\n        [label]=\"t('retrieve')\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [disabled]=\"polling()\"\r\n        [loading]=\"\r\n          polling() || facade.mutationLoading() === 'retrieve-user-test'\r\n        \"\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('send')\"\r\n        icon=\"communication.send-01\"\r\n        [disabled]=\"!canSubmit()\"\r\n        [loading]=\"\r\n          facade.mutationLoading() === 'template-test' ||\r\n          facade.mutationLoading() === 'alert-test'\r\n        \"\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.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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { 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: EmailUserTestDialog, isStandalone: true, selector: "mt-email-user-test-dialog", inputs: { kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: true, transformFunction: null }, eventId: { classPropertyName: "eventId", publicName: "eventId", isSignal: true, isRequired: false, transformFunction: null }, templateId: { classPropertyName: "templateId", publicName: "templateId", isSignal: true, isRequired: false, transformFunction: null }, alertId: { classPropertyName: "alertId", publicName: "alertId", isSignal: true, isRequired: false, transformFunction: null }, sourceLabel: { classPropertyName: "sourceLabel", publicName: "sourceLabel", isSignal: true, isRequired: false, transformFunction: null }, placeholderKeys: { classPropertyName: "placeholderKeys", publicName: "placeholderKeys", isSignal: true, isRequired: false, transformFunction: null }, placeholderFields: { classPropertyName: "placeholderFields", publicName: "placeholderFields", isSignal: true, isRequired: false, transformFunction: null }, sampleValues: { classPropertyName: "sampleValues", publicName: "sampleValues", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery.user-test'\">\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(\"real-email-warning-title\") }}</strong>\r\n      {{\r\n        t(sampleValues() ? \"real-email-warning-samples\" : \"real-email-warning\")\r\n      }}\r\n    </div>\r\n\r\n    <!-- The test request ID is still generated and sent (it makes a retry\r\n         safe); it is not something the user acts on, so it is not shown. -->\r\n    @if (sourceLabel()) {\r\n      <p class=\"mb-4 text-sm font-medium\">{{ sourceLabel() }}</p>\r\n    }\r\n\r\n    @if (!result()) {\r\n      <div class=\"grid gap-4\">\r\n        <mt-textarea-field\r\n          [formControl]=\"recipients\"\r\n          [label]=\"t('recipients')\"\r\n          [placeholder]=\"t('recipients-placeholder')\"\r\n          [hint]=\"t('recipients-hint')\"\r\n          rows=\"3\"\r\n          [required]=\"true\"\r\n        />\r\n\r\n        @if (sampleValues()) {\r\n          <!-- The host fills the placeholders with sample values. -->\r\n        } @else if (metadataControls().length > 0) {\r\n          <div class=\"rounded-md border border-surface-200 p-4\">\r\n            <p class=\"m-0 text-sm font-semibold\">\r\n              {{ t(\"placeholder-values\") }}\r\n            </p>\r\n            <p class=\"mt-1 mb-4 text-xs text-muted-color\">\r\n              {{ t(\"placeholder-values-hint\") }}\r\n            </p>\r\n            <div class=\"grid gap-4 md:grid-cols-2\">\r\n              @for (item of metadataControls(); track item.key) {\r\n                <mt-text-field\r\n                  [formControl]=\"item.control\"\r\n                  [label]=\"item.label\"\r\n                  [placeholder]=\"t('placeholder-value')\"\r\n                />\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <p class=\"m-0 text-sm text-muted-color\">\r\n            {{ t(\"no-placeholders\") }}\r\n          </p>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (polling() && !result()) {\r\n      <div\r\n        class=\"mt-4 rounded-md border border-surface-200 bg-surface-50 px-4 py-3\"\r\n        aria-live=\"polite\"\r\n      >\r\n        <p class=\"m-0 font-semibold\">\r\n          {{ t(\"pending-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm text-muted-color\">\r\n          {{ t(\"pending-description\") }}\r\n        </p>\r\n      </div>\r\n    } @else if (timedOut() && !result()) {\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=\"m-0 font-semibold text-orange-950\">\r\n          {{ t(\"timeout-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm text-orange-900\">\r\n          {{ t(\"timeout-description\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n\r\n    @if (result(); as dispatch) {\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        <p class=\"m-0 font-semibold\">\r\n          {{ dispatch.allAccepted ? t(\"accepted\") : t(\"not-accepted\") }}\r\n        </p>\r\n        @if (dispatch.expectedRecipientCount !== null) {\r\n          <p class=\"mt-1 mb-0 text-sm text-muted-color\">\r\n            {{ t(\"recipient-count\") }}: {{ dispatch.expectedRecipientCount }}\r\n          </p>\r\n        }\r\n        @if (dispatch.allAccepted) {\r\n          <p class=\"mt-3 mb-0 text-sm font-medium text-amber-800\">\r\n            {{ t(\"accepted-unconfirmed\") }}\r\n          </p>\r\n        }\r\n\r\n        @for (item of dispatch.results; track $index) {\r\n          <div\r\n            class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\"\r\n          >\r\n            <mt-email-delivery-status kind=\"attempt\" [value]=\"item.outcome\" />\r\n            <p class=\"mt-1 mb-0 text-xs text-muted-color\">\r\n              {{ facade.describeCode(item.code) }}\r\n            </p>\r\n          </div>\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 ((polling() || timedOut()) && !result()) {\r\n      <mt-button\r\n        [label]=\"t('retrieve')\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [disabled]=\"polling()\"\r\n        [loading]=\"\r\n          polling() || facade.mutationLoading() === 'retrieve-user-test'\r\n        \"\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('send')\"\r\n        icon=\"communication.send-01\"\r\n        [disabled]=\"!canSubmit()\"\r\n        [loading]=\"\r\n          facade.mutationLoading() === 'template-test' ||\r\n          facade.mutationLoading() === 'alert-test'\r\n        \"\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.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: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { 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: EmailUserTestDialog, decorators: [{
             type: Component,
@@ -2869,8 +2883,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         TextareaField,
                         TextField,
                         EmailDeliveryStatus,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery.user-test'\">\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(\"real-email-warning-title\") }}</strong>\r\n      {{ t(\"real-email-warning\") }}\r\n    </div>\r\n\r\n    @if (sourceLabel()) {\r\n      <p class=\"mb-2 text-sm font-medium\">{{ sourceLabel() }}</p>\r\n    }\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      <div class=\"grid gap-4\">\r\n        <mt-textarea-field\r\n          [formControl]=\"recipients\"\r\n          [label]=\"t('recipients')\"\r\n          [placeholder]=\"t('recipients-placeholder')\"\r\n          [hint]=\"t('recipients-hint')\"\r\n          rows=\"3\"\r\n          [required]=\"true\"\r\n        />\r\n\r\n        @if (metadataControls().length > 0) {\r\n          <div class=\"rounded-md border border-surface-200 p-4\">\r\n            <p class=\"m-0 text-sm font-semibold\">\r\n              {{ t(\"placeholder-values\") }}\r\n            </p>\r\n            <p class=\"mt-1 mb-4 text-xs text-muted-color\">\r\n              {{ t(\"placeholder-values-hint\") }}\r\n            </p>\r\n            <div class=\"grid gap-4 md:grid-cols-2\">\r\n              @for (item of metadataControls(); track item.key) {\r\n                <mt-text-field\r\n                  [formControl]=\"item.control\"\r\n                  [label]=\"item.label\"\r\n                  [placeholder]=\"t('placeholder-value')\"\r\n                />\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <p class=\"m-0 text-sm text-muted-color\">\r\n            {{ t(\"no-placeholders\") }}\r\n          </p>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (polling() && !result()) {\r\n      <div\r\n        class=\"mt-4 rounded-md border border-surface-200 bg-surface-50 px-4 py-3\"\r\n        aria-live=\"polite\"\r\n      >\r\n        <p class=\"m-0 font-semibold\">\r\n          {{ t(\"pending-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm text-muted-color\">\r\n          {{ t(\"pending-description\") }}\r\n        </p>\r\n      </div>\r\n    } @else if (timedOut() && !result()) {\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=\"m-0 font-semibold text-orange-950\">\r\n          {{ t(\"timeout-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm text-orange-900\">\r\n          {{ t(\"timeout-description\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n\r\n    @if (result(); as dispatch) {\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        <p class=\"m-0 font-semibold\">\r\n          {{ dispatch.allAccepted ? t(\"accepted\") : t(\"not-accepted\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm text-muted-color\">\r\n          {{ t(\"request-state\") }}: {{ dispatch.requestState }}\r\n        </p>\r\n        @if (dispatch.expectedRecipientCount !== null) {\r\n          <p class=\"mt-1 mb-0 text-sm text-muted-color\">\r\n            {{ t(\"recipient-count\") }}: {{ dispatch.expectedRecipientCount }}\r\n          </p>\r\n        }\r\n        @if (dispatch.allAccepted) {\r\n          <p class=\"mt-3 mb-0 text-sm font-medium text-amber-800\">\r\n            {{ t(\"accepted-unconfirmed\") }}\r\n          </p>\r\n        }\r\n\r\n        @for (item of dispatch.results; track $index) {\r\n          <div\r\n            class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\"\r\n          >\r\n            <mt-email-delivery-status kind=\"attempt\" [value]=\"item.outcome\" />\r\n            <p class=\"mt-1 mb-0 text-xs text-muted-color\">\r\n              {{ facade.describeCode(item.code) }}\r\n            </p>\r\n          </div>\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 ((polling() || timedOut()) && !result()) {\r\n      <mt-button\r\n        [label]=\"t('retrieve')\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [disabled]=\"polling()\"\r\n        [loading]=\"\r\n          polling() || facade.mutationLoading() === 'retrieve-user-test'\r\n        \"\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('send')\"\r\n        icon=\"communication.send-01\"\r\n        [disabled]=\"!canSubmit()\"\r\n        [loading]=\"\r\n          facade.mutationLoading() === 'template-test' ||\r\n          facade.mutationLoading() === 'alert-test'\r\n        \"\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" }]
-        }], ctorParameters: () => [], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: true }] }], eventId: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventId", required: false }] }], templateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateId", required: false }] }], alertId: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertId", required: false }] }], sourceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceLabel", required: false }] }], placeholderKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKeys", required: false }] }], placeholderFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderFields", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery.user-test'\">\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(\"real-email-warning-title\") }}</strong>\r\n      {{\r\n        t(sampleValues() ? \"real-email-warning-samples\" : \"real-email-warning\")\r\n      }}\r\n    </div>\r\n\r\n    <!-- The test request ID is still generated and sent (it makes a retry\r\n         safe); it is not something the user acts on, so it is not shown. -->\r\n    @if (sourceLabel()) {\r\n      <p class=\"mb-4 text-sm font-medium\">{{ sourceLabel() }}</p>\r\n    }\r\n\r\n    @if (!result()) {\r\n      <div class=\"grid gap-4\">\r\n        <mt-textarea-field\r\n          [formControl]=\"recipients\"\r\n          [label]=\"t('recipients')\"\r\n          [placeholder]=\"t('recipients-placeholder')\"\r\n          [hint]=\"t('recipients-hint')\"\r\n          rows=\"3\"\r\n          [required]=\"true\"\r\n        />\r\n\r\n        @if (sampleValues()) {\r\n          <!-- The host fills the placeholders with sample values. -->\r\n        } @else if (metadataControls().length > 0) {\r\n          <div class=\"rounded-md border border-surface-200 p-4\">\r\n            <p class=\"m-0 text-sm font-semibold\">\r\n              {{ t(\"placeholder-values\") }}\r\n            </p>\r\n            <p class=\"mt-1 mb-4 text-xs text-muted-color\">\r\n              {{ t(\"placeholder-values-hint\") }}\r\n            </p>\r\n            <div class=\"grid gap-4 md:grid-cols-2\">\r\n              @for (item of metadataControls(); track item.key) {\r\n                <mt-text-field\r\n                  [formControl]=\"item.control\"\r\n                  [label]=\"item.label\"\r\n                  [placeholder]=\"t('placeholder-value')\"\r\n                />\r\n              }\r\n            </div>\r\n          </div>\r\n        } @else {\r\n          <p class=\"m-0 text-sm text-muted-color\">\r\n            {{ t(\"no-placeholders\") }}\r\n          </p>\r\n        }\r\n      </div>\r\n    }\r\n\r\n    @if (polling() && !result()) {\r\n      <div\r\n        class=\"mt-4 rounded-md border border-surface-200 bg-surface-50 px-4 py-3\"\r\n        aria-live=\"polite\"\r\n      >\r\n        <p class=\"m-0 font-semibold\">\r\n          {{ t(\"pending-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm text-muted-color\">\r\n          {{ t(\"pending-description\") }}\r\n        </p>\r\n      </div>\r\n    } @else if (timedOut() && !result()) {\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=\"m-0 font-semibold text-orange-950\">\r\n          {{ t(\"timeout-title\") }}\r\n        </p>\r\n        <p class=\"mt-1 mb-0 text-sm text-orange-900\">\r\n          {{ t(\"timeout-description\") }}\r\n        </p>\r\n      </div>\r\n    }\r\n\r\n    @if (result(); as dispatch) {\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        <p class=\"m-0 font-semibold\">\r\n          {{ dispatch.allAccepted ? t(\"accepted\") : t(\"not-accepted\") }}\r\n        </p>\r\n        @if (dispatch.expectedRecipientCount !== null) {\r\n          <p class=\"mt-1 mb-0 text-sm text-muted-color\">\r\n            {{ t(\"recipient-count\") }}: {{ dispatch.expectedRecipientCount }}\r\n          </p>\r\n        }\r\n        @if (dispatch.allAccepted) {\r\n          <p class=\"mt-3 mb-0 text-sm font-medium text-amber-800\">\r\n            {{ t(\"accepted-unconfirmed\") }}\r\n          </p>\r\n        }\r\n\r\n        @for (item of dispatch.results; track $index) {\r\n          <div\r\n            class=\"mt-3 rounded-md border border-surface-200 bg-surface-0 p-3\"\r\n          >\r\n            <mt-email-delivery-status kind=\"attempt\" [value]=\"item.outcome\" />\r\n            <p class=\"mt-1 mb-0 text-xs text-muted-color\">\r\n              {{ facade.describeCode(item.code) }}\r\n            </p>\r\n          </div>\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 ((polling() || timedOut()) && !result()) {\r\n      <mt-button\r\n        [label]=\"t('retrieve')\"\r\n        icon=\"arrow.refresh-cw-01\"\r\n        [disabled]=\"polling()\"\r\n        [loading]=\"\r\n          polling() || facade.mutationLoading() === 'retrieve-user-test'\r\n        \"\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('send')\"\r\n        icon=\"communication.send-01\"\r\n        [disabled]=\"!canSubmit()\"\r\n        [loading]=\"\r\n          facade.mutationLoading() === 'template-test' ||\r\n          facade.mutationLoading() === 'alert-test'\r\n        \"\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" }]
+        }], ctorParameters: () => [], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: true }] }], eventId: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventId", required: false }] }], templateId: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateId", required: false }] }], alertId: [{ type: i0.Input, args: [{ isSignal: true, alias: "alertId", required: false }] }], sourceLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceLabel", required: false }] }], placeholderKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderKeys", required: false }] }], placeholderFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderFields", required: false }] }], sampleValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "sampleValues", required: false }] }] } });
 const POLL_DELAYS_MS = [1_000, 2_000, 4_000, 5_000, 5_000, 5_000];
 const TEST_REQUEST_CONFLICT_CODE = 'email.delivery_test_request_conflict';
 function isAmbiguousTimeout(error) {
@@ -2886,17 +2900,1241 @@ function isTestRequestConflict(error) {
         value.errors?.code === TEST_REQUEST_CONFLICT_CODE);
 }
 
+/**
+ * State for the Email design tab. The working draft lives here rather than in
+ * the tab so switching between Connections / Activity / Email design keeps
+ * unsaved edits; leaving the page asks first (`emailDesignLeaveGuard`).
+ *
+ * There is no server-side draft: the base is only ever previewed (render-only)
+ * or published with the revision it was read at.
+ */
+class EmailLayoutFacade {
+    http = inject(HttpClient);
+    options = inject(EMAIL_DELIVERY_OPTIONS);
+    transloco = inject(TranslocoService);
+    // Failures arrive as a bare stable code; the tab translates it itself.
+    headers = new HttpHeaders({ noMessage: 'true' });
+    snapshot = signal(null, ...(ngDevMode ? [{ debugName: "snapshot" }] : /* istanbul ignore next */ []));
+    draft = signal('', ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    loadErrorCode = signal(null, ...(ngDevMode ? [{ debugName: "loadErrorCode" }] : /* istanbul ignore next */ []));
+    loadFailed = signal(false, ...(ngDevMode ? [{ debugName: "loadFailed" }] : /* istanbul ignore next */ []));
+    saving = signal(null, ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+    /** Someone else published since this draft's baseline was read. */
+    conflict = signal(false, ...(ngDevMode ? [{ debugName: "conflict" }] : /* istanbul ignore next */ []));
+    dirty = computed(() => {
+        const snapshot = this.snapshot();
+        return snapshot !== null && this.draft() !== snapshot.body;
+    }, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    load() {
+        this.loading.set(true);
+        this.loadFailed.set(false);
+        this.loadErrorCode.set(null);
+        return this.http
+            .get(this.url(), { headers: this.headers })
+            .pipe(map((response) => response.data), tap((snapshot) => {
+            // Never overwrite edits the user has not saved yet.
+            if (!this.dirty())
+                this.draft.set(snapshot.body);
+            this.snapshot.set(snapshot);
+        }), catchError((error) => {
+            this.loadFailed.set(true);
+            this.loadErrorCode.set(readLayoutErrorCode(error));
+            return throwError(() => error);
+        }), finalize(() => this.loading.set(false)));
+    }
+    /** Render-only: the server supplies a fixed bilingual sample; nothing is saved or sent. */
+    preview(body) {
+        return this.http
+            .post(this.url('preview'), { body }, { headers: this.headers })
+            .pipe(map((response) => response.data));
+    }
+    publish() {
+        const snapshot = this.snapshot();
+        if (!snapshot)
+            return throwError(() => new Error('Layout not loaded'));
+        this.saving.set('publish');
+        return this.http
+            .put(this.url(), { body: this.draft(), expectedRevision: snapshot.revision }, { headers: this.headers })
+            .pipe(map((response) => response.data), tap((published) => this.adopt(published)), catchError((error) => this.onWriteError(error)), finalize(() => this.saving.set(null)));
+    }
+    restorePrevious() {
+        const snapshot = this.snapshot();
+        if (!snapshot)
+            return throwError(() => new Error('Layout not loaded'));
+        this.saving.set('restore');
+        return this.http
+            .post(this.url('restore'), { expectedRevision: snapshot.revision }, { headers: this.headers })
+            .pipe(map((response) => response.data), tap((restored) => this.adopt(restored)), catchError((error) => this.onWriteError(error)), finalize(() => this.saving.set(null)));
+    }
+    /**
+     * Re-reads the live design after a conflict. `keepDraft` keeps the user's
+     * edits on top of the newer baseline, so the next publish applies them
+     * deliberately; otherwise the draft is replaced by what is live.
+     */
+    reloadLatest(keepDraft) {
+        const draft = this.draft();
+        return this.load().pipe(tap((snapshot) => {
+            this.draft.set(keepDraft ? draft : snapshot.body);
+            this.conflict.set(false);
+        }));
+    }
+    discard() {
+        const snapshot = this.snapshot();
+        if (snapshot)
+            this.draft.set(snapshot.body);
+    }
+    describeCode(code) {
+        if (code) {
+            const key = `email-delivery.design.codes.${code}`;
+            const translated = this.transloco.translate(key);
+            if (translated !== key)
+                return translated;
+        }
+        return this.transloco.translate('email-delivery.design.codes.generic', {
+            code: code ?? '—',
+        });
+    }
+    describeDiagnostic(diagnostic) {
+        const key = `email-delivery.design.codes.${diagnostic.code}`;
+        const translated = this.transloco.translate(key);
+        const message = translated === key ? diagnostic.code : translated;
+        return diagnostic.path ? `${message} (${diagnostic.path})` : message;
+    }
+    readErrorCode(error) {
+        return readLayoutErrorCode(error);
+    }
+    adopt(snapshot) {
+        // The server returns the sanitized body it stored; show exactly that.
+        this.snapshot.set(snapshot);
+        this.draft.set(snapshot.body);
+        this.conflict.set(false);
+    }
+    onWriteError(error) {
+        if ((error instanceof HttpErrorResponse && error.status === 409) ||
+            readLayoutErrorCode(error) === 'EMAIL_REVISION_CONFLICT') {
+            this.conflict.set(true);
+        }
+        return throwError(() => error);
+    }
+    url(path = '') {
+        const base = this.options.notificationApiBasePath.replace(/\/$/, '');
+        return path ? `${base}/email-layout/${path}` : `${base}/email-layout`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailLayoutFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailLayoutFacade, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailLayoutFacade, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function readLayoutErrorCode(error) {
+    const body = error instanceof HttpErrorResponse ? error.error : error;
+    const code = body?.errors?.code;
+    return typeof code === 'string' ? code : null;
+}
+function readLayoutErrorDiagnostics(error) {
+    const body = error instanceof HttpErrorResponse ? error.error : error;
+    const details = body?.errors
+        ?.details;
+    return Array.isArray(details)
+        ? details.filter((item) => typeof item === 'object' &&
+            item !== null &&
+            typeof item.code === 'string')
+        : [];
+}
+
+/**
+ * Leaving the Email page with an unpublished design draft asks once. Switching
+ * tabs inside the page is not a navigation away — the draft lives in
+ * `EmailLayoutFacade` and is still there when the tab is reopened.
+ */
+const emailDesignLeaveGuard = () => {
+    const facade = inject(EmailLayoutFacade);
+    if (facade.saving())
+        return false;
+    if (!facade.dirty())
+        return true;
+    const confirmation = inject(ConfirmationService);
+    const transloco = inject(TranslocoService);
+    const t = (key) => transloco.translate(`email-delivery.design.leave.${key}`);
+    return new Observable((subscriber) => {
+        confirmation.confirm({
+            header: t('header'),
+            message: t('message'),
+            icon: 'alert.alert-triangle',
+            acceptLabel: t('discard'),
+            rejectLabel: t('stay'),
+            acceptButton: { severity: 'danger' },
+            accept: () => {
+                facade.discard();
+                subscriber.next(true);
+                subscriber.complete();
+            },
+            reject: () => {
+                subscriber.next(false);
+                subscriber.complete();
+            },
+        });
+    });
+};
+
 const EMAIL_DELIVERY_ROUTES = [
     {
         path: '',
-        loadComponent: () => import('./masterteam-system-settings-email-delivery-shell-oTWOzKWj.mjs').then((module) => module.EmailDeliveryShell),
+        canDeactivate: [emailDesignLeaveGuard],
+        loadComponent: () => import('./masterteam-system-settings-email-delivery-shell-D9NShoTc.mjs').then((module) => module.EmailDeliveryShell),
     },
     { path: '**', redirectTo: '' },
 ];
 
+/** The one literal slot every base must contain exactly once. */
+const EMAIL_LAYOUT_CONTENT_SLOT = '{content}';
+/** UTF-8 byte limit for the base HTML. */
+const EMAIL_LAYOUT_MAX_BYTES = 128 * 1024;
+
+/**
+ * Renders server-composed notification HTML without letting it touch the app.
+ *
+ * The frame is an opaque origin (`sandbox=""`: no scripts, forms, popups,
+ * same-origin or top navigation), sends no referrer, and the document carries
+ * its own CSP: nothing loads except inline styles, and images only from the
+ * approved origins once the viewer opts in. Links are stripped from this
+ * preview-only copy so a click cannot navigate the frame; scrolling and
+ * keyboard focus still work. The source is never injected into the app DOM.
+ */
+class EmailHtmlPreview {
+    html = input('', ...(ngDevMode ? [{ debugName: "html" }] : /* istanbul ignore next */ []));
+    showImages = input(false, ...(ngDevMode ? [{ debugName: "showImages" }] : /* istanbul ignore next */ []));
+    approvedImageOrigins = input([], ...(ngDevMode ? [{ debugName: "approvedImageOrigins" }] : /* istanbul ignore next */ []));
+    fragment = input(false, ...(ngDevMode ? [{ debugName: "fragment" }] : /* istanbul ignore next */ []));
+    direction = input(null, ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    height = input('28rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    frame = viewChild.required('frame');
+    constructor() {
+        effect(() => {
+            this.frame().nativeElement.srcdoc = buildEmailPreviewDocument(this.html(), {
+                showImages: this.showImages(),
+                approvedImageOrigins: this.approvedImageOrigins(),
+                fragment: this.fragment(),
+                direction: this.direction(),
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailHtmlPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.8", type: EmailHtmlPreview, isStandalone: true, selector: "mt-email-html-preview", inputs: { html: { classPropertyName: "html", publicName: "html", isSignal: true, isRequired: false, transformFunction: null }, showImages: { classPropertyName: "showImages", publicName: "showImages", isSignal: true, isRequired: false, transformFunction: null }, approvedImageOrigins: { classPropertyName: "approvedImageOrigins", publicName: "approvedImageOrigins", isSignal: true, isRequired: false, transformFunction: null }, fragment: { classPropertyName: "fragment", publicName: "fragment", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block min-w-0" }, viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, isSignal: true }], ngImport: i0, template: `<iframe
+    #frame
+    sandbox=""
+    referrerpolicy="no-referrer"
+    [attr.title]="title()"
+    class="block w-full border-0 bg-white"
+    [style.height]="height()"
+  ></iframe>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailHtmlPreview, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mt-email-html-preview',
+                    template: `<iframe
+    #frame
+    sandbox=""
+    referrerpolicy="no-referrer"
+    [attr.title]="title()"
+    class="block w-full border-0 bg-white"
+    [style.height]="height()"
+  ></iframe>`,
+                    host: { class: 'block min-w-0' },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { html: [{ type: i0.Input, args: [{ isSignal: true, alias: "html", required: false }] }], showImages: [{ type: i0.Input, args: [{ isSignal: true, alias: "showImages", required: false }] }], approvedImageOrigins: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvedImageOrigins", required: false }] }], fragment: [{ type: i0.Input, args: [{ isSignal: true, alias: "fragment", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], frame: [{ type: i0.ViewChild, args: ['frame', { isSignal: true }] }] } });
+const BLOCKED_ELEMENTS = 'script, iframe, frame, object, embed, form, link, base, meta';
+const ORIGIN_PATTERN = /^https:\/\/[a-z0-9.-]+(:\d{1,5})?$/i;
+function buildEmailPreviewDocument(html, options) {
+    const source = options.fragment
+        ? `<!doctype html><html><head></head><body>${html}</body></html>`
+        : html;
+    const doc = new DOMParser().parseFromString(source, 'text/html');
+    doc.querySelectorAll(BLOCKED_ELEMENTS).forEach((node) => node.remove());
+    doc.querySelectorAll('*').forEach((element) => {
+        for (const attribute of Array.from(element.attributes)) {
+            if (attribute.name.toLowerCase().startsWith('on')) {
+                element.removeAttribute(attribute.name);
+            }
+        }
+    });
+    doc.querySelectorAll('a').forEach((anchor) => {
+        anchor.removeAttribute('href');
+        anchor.removeAttribute('target');
+        anchor.setAttribute('aria-disabled', 'true');
+    });
+    const origins = options.approvedImageOrigins.filter((origin) => ORIGIN_PATTERN.test(origin));
+    const imageSources = options.showImages && origins.length > 0 ? origins.join(' ') : "'none'";
+    const csp = doc.createElement('meta');
+    csp.setAttribute('http-equiv', 'Content-Security-Policy');
+    csp.setAttribute('content', `default-src 'none'; style-src 'unsafe-inline'; img-src ${imageSources}; font-src 'none'; form-action 'none'`);
+    const referrer = doc.createElement('meta');
+    referrer.setAttribute('name', 'referrer');
+    referrer.setAttribute('content', 'no-referrer');
+    doc.head.prepend(csp, referrer);
+    if (options.fragment) {
+        const style = doc.createElement('style');
+        style.textContent =
+            'body{margin:16px;font-family:Tahoma,Arial,sans-serif;font-size:14px;line-height:1.6;color:#1f2937;background:#fff}';
+        doc.head.append(style);
+        if (options.direction) {
+            doc.body.setAttribute('dir', options.direction);
+        }
+    }
+    return `<!doctype html>${doc.documentElement.outerHTML}`;
+}
+
+/**
+ * Pure helpers for `mt-email-visual-editor`: building the editing document and
+ * turning it back into the exact source format the backend expects.
+ *
+ * In the canvas, `{{token}}` placeholders and the layout's `{content}` slot are
+ * shown as non-editable chips; serialization turns every chip back into its
+ * literal text, so the stored HTML never contains editor markup.
+ */
+const TOKEN_PATTERN = /\{\{\s*([A-Za-z0-9_.]+)\s*\}\}/g;
+/** Canvas-only highlight of the image being edited; never serialized. */
+const SELECTED_CLASS = 'mt-selected';
+const TOKEN_ATTRIBUTE = 'data-mt-token';
+const SLOT_ATTRIBUTE = 'data-mt-slot';
+const STRIPPED_ELEMENTS = 'script, iframe, frame, object, embed, form, link, base, meta, style';
+/** A full HTML document cannot round-trip through a body-only canvas. */
+function isFullDocument(source) {
+    return /<\s*(html|head|body)\b/i.test(source);
+}
+/**
+ * Images load in the canvas only from the origins the server approves (the
+ * same ones an email may use); anything else stays a sized placeholder box.
+ */
+function buildEditingDocument(source, editable, direction = null, imageOrigins = []) {
+    const dir = direction ? ` dir="${direction}"` : '';
+    const origins = canvasImageOrigins(imageOrigins);
+    const imgSrc = origins.length > 0 ? origins.join(' ') : "'none'";
+    const loaded = origins.map((origin) => `img[src^="${origin}/"]`).join(',');
+    const style = loaded
+        ? `${CANVAS_STYLE}${loaded}{background:none;outline:none}${CANVAS_IMAGE_STATE_STYLE}`
+        : `${CANVAS_STYLE}${CANVAS_IMAGE_STATE_STYLE}`;
+    return `<!doctype html><html${dir}><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src ${imgSrc}; font-src 'none'; form-action 'none'"><style>${style}</style></head><body contenteditable="${editable}" spellcheck="true">${source}</body></html>`;
+}
+/** Only well-formed HTTPS origins reach the canvas CSP and style. */
+function canvasImageOrigins(origins) {
+    const result = [];
+    for (const origin of origins) {
+        try {
+            const url = new URL(origin.trim());
+            if (url.protocol === 'https:' && !result.includes(url.origin)) {
+                result.push(url.origin);
+            }
+        }
+        catch {
+            // Not an origin; leave its images blocked.
+        }
+    }
+    return result;
+}
+/** Strips anything active and turns tokens / the slot into chips. */
+function decorateCanvas(doc, placeholders, slotLabel) {
+    doc.body.querySelectorAll(STRIPPED_ELEMENTS).forEach((node) => node.remove());
+    doc.body.querySelectorAll('*').forEach((element) => {
+        for (const attribute of Array.from(element.attributes)) {
+            if (attribute.name.toLowerCase().startsWith('on')) {
+                element.removeAttribute(attribute.name);
+            }
+        }
+    });
+    const labels = new Map(placeholders.map((item) => [item.key, item.label]));
+    const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
+    const textNodes = [];
+    while (walker.nextNode())
+        textNodes.push(walker.currentNode);
+    for (const node of textNodes) {
+        const text = node.data;
+        if (!text.includes('{'))
+            continue;
+        const pattern = new RegExp(`${TOKEN_PATTERN.source}|${escapeRegExp(EMAIL_LAYOUT_CONTENT_SLOT)}`, 'g');
+        if (!pattern.test(text))
+            continue;
+        pattern.lastIndex = 0;
+        const fragment = doc.createDocumentFragment();
+        let last = 0;
+        for (const match of text.matchAll(pattern)) {
+            const index = match.index ?? 0;
+            if (index > last)
+                fragment.append(text.slice(last, index));
+            fragment.append(match[0] === EMAIL_LAYOUT_CONTENT_SLOT
+                ? createSlotChip(doc, slotLabel)
+                : createTokenChip(doc, match[1], labels.get(match[1]) ?? match[1]));
+            last = index + match[0].length;
+        }
+        if (last < text.length)
+            fragment.append(text.slice(last));
+        node.replaceWith(fragment);
+    }
+}
+function createTokenChip(doc, key, label) {
+    const chip = doc.createElement('span');
+    chip.setAttribute(TOKEN_ATTRIBUTE, key);
+    chip.setAttribute('contenteditable', 'false');
+    chip.className = 'mt-token';
+    chip.textContent = label;
+    return chip;
+}
+function createSlotChip(doc, label) {
+    const chip = doc.createElement('span');
+    chip.setAttribute(SLOT_ATTRIBUTE, '');
+    chip.setAttribute('contenteditable', 'false');
+    chip.className = 'mt-slot';
+    chip.textContent = label;
+    return chip;
+}
+/** The canvas body back to source: chips become their literal text again. */
+function serializeCanvas(body) {
+    const clone = body.cloneNode(true);
+    const doc = body.ownerDocument;
+    clone.querySelectorAll(`[${TOKEN_ATTRIBUTE}]`).forEach((chip) => {
+        chip.replaceWith(doc.createTextNode(`{{${chip.getAttribute(TOKEN_ATTRIBUTE)}}}`));
+    });
+    clone.querySelectorAll(`[${SLOT_ATTRIBUTE}]`).forEach((chip) => {
+        chip.replaceWith(doc.createTextNode(EMAIL_LAYOUT_CONTENT_SLOT));
+    });
+    clone.querySelectorAll(`.${SELECTED_CLASS}`).forEach((element) => {
+        element.classList.remove(SELECTED_CLASS);
+        if (element.classList.length === 0)
+            element.removeAttribute('class');
+    });
+    return clone.innerHTML;
+}
+/** Static links must be HTTPS; the only dynamic link is the whole `{{webUrl}}`. */
+function isAllowedLink(value) {
+    const trimmed = value.trim();
+    if (/^\{\{\s*webUrl\s*\}\}$/i.test(trimmed))
+        return true;
+    try {
+        return new URL(trimmed).protocol === 'https:';
+    }
+    catch {
+        return false;
+    }
+}
+const EMAIL_IMAGE_MIN_SIZE = 16;
+const EMAIL_IMAGE_MAX_SIZE = 1200;
+/**
+ * The backend image policy, checked before insertion so the user is told why
+ * instead of seeing the image silently removed on save: an approved HTTPS
+ * origin, no query or fragment, descriptive alt text, and explicit width and
+ * height between 16 and 1200. Inline image styles are never written.
+ */
+function validateEmailImage(image, approvedOrigins) {
+    if (approvedOrigins.length === 0)
+        return 'no-origins';
+    let url;
+    try {
+        url = new URL(image.src.trim());
+    }
+    catch {
+        return 'url';
+    }
+    if (url.protocol !== 'https:' || url.search || url.hash)
+        return 'url';
+    const approved = approvedOrigins.some((origin) => origin.replace(/\/$/, '').toLowerCase() === url.origin.toLowerCase());
+    if (!approved)
+        return 'origin';
+    if (!image.alt.trim())
+        return 'alt';
+    const inRange = (value) => value !== null &&
+        Number.isInteger(value) &&
+        value >= EMAIL_IMAGE_MIN_SIZE &&
+        value <= EMAIL_IMAGE_MAX_SIZE;
+    if (!inRange(image.width) || !inRange(image.height))
+        return 'size';
+    return null;
+}
+function buildEmailImage(doc, image) {
+    const element = doc.createElement('img');
+    applyEmailImage(element, image);
+    return element;
+}
+function applyEmailImage(element, image) {
+    element.setAttribute('src', image.src.trim());
+    element.setAttribute('alt', image.alt.trim());
+    element.setAttribute('width', String(image.width));
+    element.setAttribute('height', String(image.height));
+    element.removeAttribute('style');
+}
+const TEXT_COLORS = [
+    { key: 'black', value: '#111827' },
+    { key: 'gray', value: '#6b7280' },
+    { key: 'red', value: '#b91c1c' },
+    { key: 'orange', value: '#c2410c' },
+    { key: 'amber', value: '#a16207' },
+    { key: 'green', value: '#15803d' },
+    { key: 'teal', value: '#0f766e' },
+    { key: 'blue', value: '#1d4ed8' },
+    { key: 'purple', value: '#6d28d9' },
+    { key: 'pink', value: '#be185d' },
+];
+const HIGHLIGHT_COLORS = [
+    { key: 'yellow', value: '#fef08a' },
+    { key: 'green', value: '#bbf7d0' },
+    { key: 'teal', value: '#99f6e4' },
+    { key: 'blue', value: '#bfdbfe' },
+    { key: 'purple', value: '#e9d5ff' },
+    { key: 'pink', value: '#fbcfe8' },
+    { key: 'red', value: '#fecaca' },
+    { key: 'orange', value: '#fed7aa' },
+    { key: 'gray', value: '#e5e7eb' },
+];
+/** `normal` clears the size, so the text follows the shared design. */
+const TEXT_SIZES = [
+    { key: 'small', px: 13 },
+    { key: 'normal', px: null },
+    { key: 'large', px: 20 },
+    { key: 'huge', px: 26 },
+];
+/**
+ * `execCommand('fontSize')` can only write `<font size>`, which the policy
+ * strips; the editor applies it with a marker size and swaps each marker for a
+ * span with a pixel size.
+ */
+const FONT_SIZE_MARKER = '7';
+function replaceFontSizeMarkers(doc, px) {
+    doc.body
+        .querySelectorAll(`font[size="${FONT_SIZE_MARKER}"]`)
+        .forEach((font) => {
+        const span = doc.createElement('span');
+        span.style.fontSize = `${px}px`;
+        while (font.firstChild)
+            span.append(font.firstChild);
+        // The new size replaces any size already applied inside the selection.
+        span.querySelectorAll('span').forEach((inner) => {
+            const element = inner;
+            element.style.removeProperty('font-size');
+            unwrapIfBare(element);
+        });
+        font.replaceWith(span);
+    });
+}
+/**
+ * The browser writes strikethrough as `<strike>` (or, with CSS, as
+ * `text-decoration-line`); the policy keeps neither, but keeps `<s>`.
+ */
+function replaceStrikeTags(doc) {
+    doc.body.querySelectorAll('strike').forEach((strike) => {
+        const s = doc.createElement('s');
+        while (strike.firstChild)
+            s.append(strike.firstChild);
+        strike.replaceWith(s);
+    });
+}
+/**
+ * Removes one inline style (`color`, `background-color`, `font-size`) from the
+ * spans the range touches; a span left with no attributes is unwrapped.
+ */
+function clearInlineStyle(doc, range, property) {
+    const touched = Array.from(doc.body.querySelectorAll('span, font')).filter((element) => range.intersectsNode(element));
+    for (const element of touched) {
+        const html = element;
+        html.style.removeProperty(property);
+        if (property === 'color' && element.tagName === 'FONT') {
+            element.removeAttribute('color');
+        }
+        unwrapIfBare(html);
+    }
+}
+function unwrapIfBare(element) {
+    // Removing the last style property leaves `style=""` behind.
+    if (element.getAttribute('style')?.trim() === '') {
+        element.removeAttribute('style');
+    }
+    if (element.attributes.length > 0 || !element.parentNode)
+        return;
+    if (element.tagName !== 'SPAN' && element.tagName !== 'FONT')
+        return;
+    element.replaceWith(...Array.from(element.childNodes));
+}
+const BILINGUAL_STARTER = '<div lang="en" dir="ltr"><p><br></p></div><div lang="ar" dir="rtl"><p><br></p></div>';
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+const CANVAS_STYLE = [
+    'html{background:#fff}',
+    'body{margin:0;padding:16px 20px;min-height:calc(100vh - 32px);font-family:Tahoma,Arial,sans-serif;font-size:15px;line-height:1.7;color:#1f2937;outline:none;overflow-wrap:anywhere}',
+    'h1{font-size:24px;margin:0 0 12px}h2{font-size:20px;margin:0 0 12px}h3{font-size:17px;margin:0 0 10px}',
+    'p{margin:0 0 12px}ul,ol{margin:0 0 12px;padding-inline-start:24px}',
+    'a{color:#1d4ed8;text-decoration:underline;cursor:text}',
+    // Cell outlines only on hover: always-on outlines made layouts look broken.
+    'table{border-collapse:collapse}td:hover,th:hover{outline:1px dashed #cbd5e1;outline-offset:-1px}',
+    // An image from an origin that is not approved never loads (CSP); it shows
+    // as a sized box with its description.
+    'img{display:inline-block;max-width:100%;background:#f1f5f9;outline:1px dashed #94a3b8;outline-offset:-1px;color:#475569;font:12px/1.4 system-ui,sans-serif;cursor:pointer}',
+    '.mt-token{display:inline-block;margin:0 1px;padding:0 6px;border:1px solid #c7d2fe;border-radius:4px;background:#eef2ff;color:#3730a3;font:12px/1.7 system-ui,sans-serif;white-space:nowrap;vertical-align:baseline;user-select:all}',
+    '.mt-slot{display:block;margin:4px 0;padding:14px;border:1px dashed #94a3b8;border-radius:6px;background:#f8fafc;color:#475569;font:13px/1.5 system-ui,sans-serif;text-align:center;user-select:none}',
+].join('');
+/** After the per-origin rules, so hover and selection always show. */
+const CANVAS_IMAGE_STATE_STYLE = 'img:hover{outline:1px dashed #94a3b8}img.mt-selected{outline:2px solid #2563eb}';
+
+/**
+ * Visual editor for notification email HTML (event content and the shared
+ * base layout), with an HTML tab for the exact source.
+ *
+ * The canvas is a sandboxed, script-free iframe (`sandbox="allow-same-origin"`
+ * so the host can edit it; nothing inside it can run) with its own CSP —
+ * images and network stay blocked, as the contract asks. The browser's editing
+ * DOM keeps tables, inline styles and `lang` / `dir`; `{{tokens}}` and the
+ * layout's `{content}` slot are shown as chips and written back as literal
+ * text. Opening content, or switching between Visual and HTML, never emits a
+ * value: only a real edit does, so nothing is rewritten or marked unsaved just
+ * by looking at it.
+ */
+class EmailVisualEditor {
+    transloco = inject(TranslocoService);
+    destroyRef = inject(DestroyRef);
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Placeholders the content may use; their labels name the chips. */
+    placeholders = input([], ...(ngDevMode ? [{ debugName: "placeholders" }] : /* istanbul ignore next */ []));
+    /** Editing the shared base layout: `{content}` is shown as a protected slot. */
+    layout = input(false, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    height = input('24rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Reading direction of the whole canvas (a single-language field). */
+    direction = input(null, ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Offer the English + Arabic starter on an empty email. */
+    starter = input(true, ...(ngDevMode ? [{ debugName: "starter" }] : /* istanbul ignore next */ []));
+    /** The canvas or the HTML source received focus. */
+    focused = output();
+    /**
+     * HTTPS origins the server accepts images from (`approvedImageOrigins` on the
+     * layout read / preview). Empty means images are not allowed at all.
+     */
+    approvedImageOrigins = input([], ...(ngDevMode ? [{ debugName: "approvedImageOrigins" }] : /* istanbul ignore next */ []));
+    imageOpen = signal(false, ...(ngDevMode ? [{ debugName: "imageOpen" }] : /* istanbul ignore next */ []));
+    imageError = signal(null, ...(ngDevMode ? [{ debugName: "imageError" }] : /* istanbul ignore next */ []));
+    editingImage = signal(null, ...(ngDevMode ? [{ debugName: "editingImage" }] : /* istanbul ignore next */ []));
+    imageForm = {
+        src: new FormControl('', { nonNullable: true }),
+        alt: new FormControl('', { nonNullable: true }),
+        width: new FormControl(null),
+        height: new FormControl(null),
+    };
+    imageMin = EMAIL_IMAGE_MIN_SIZE;
+    imageMax = EMAIL_IMAGE_MAX_SIZE;
+    imageOriginsLabel = computed(() => this.approvedImageOrigins().join(', '), ...(ngDevMode ? [{ debugName: "imageOriginsLabel" }] : /* istanbul ignore next */ []));
+    imageErrorText = computed(() => {
+        const error = this.imageError();
+        if (!error)
+            return '';
+        this.lang();
+        return this.transloco.translate(`email-delivery.editor.image.errors.${error}`, {
+            origins: this.imageOriginsLabel(),
+            min: EMAIL_IMAGE_MIN_SIZE,
+            max: EMAIL_IMAGE_MAX_SIZE,
+        });
+    }, ...(ngDevMode ? [{ debugName: "imageErrorText" }] : /* istanbul ignore next */ []));
+    mode = signal('design', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    linkOpen = signal(false, ...(ngDevMode ? [{ debugName: "linkOpen" }] : /* istanbul ignore next */ []));
+    /** The colour / size row under the toolbar. */
+    stylePanel = signal(null, ...(ngDevMode ? [{ debugName: "stylePanel" }] : /* istanbul ignore next */ []));
+    textColors = TEXT_COLORS;
+    highlightColors = HIGHLIGHT_COLORS;
+    textSizes = TEXT_SIZES;
+    linkError = signal(false, ...(ngDevMode ? [{ debugName: "linkError" }] : /* istanbul ignore next */ []));
+    linkControl = new FormControl('', { nonNullable: true });
+    sourceControl = new FormControl('', { nonNullable: true });
+    designBlocked = computed(() => isFullDocument(this.value()), ...(ngDevMode ? [{ debugName: "designBlocked" }] : /* istanbul ignore next */ []));
+    effectiveMode = computed(() => this.designBlocked() ? 'html' : this.mode(), ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
+    isEmpty = computed(() => this.value().replace(/<[^>]*>|&nbsp;|\s/g, '') === '', ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+    modeOptions = computed(() => {
+        this.lang();
+        return [
+            { label: this.t('design'), value: 'design', icon: 'editor.pencil-01' },
+            { label: this.t('html'), value: 'html', icon: 'dev.code-02' },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "modeOptions" }] : /* istanbul ignore next */ []));
+    blockActions = [
+        {
+            key: 'paragraph',
+            icon: 'editor.pilcrow-01',
+            run: () => this.formatBlock('p'),
+        },
+        { key: 'heading', text: 'H2', run: () => this.formatBlock('h2') },
+        { key: 'subheading', text: 'H3', run: () => this.formatBlock('h3') },
+        { key: 'quote', text: '“', run: () => this.formatBlock('blockquote') },
+    ];
+    inlineActions = [
+        { key: 'bold', icon: 'editor.bold-01', run: () => this.exec('bold') },
+        { key: 'italic', icon: 'editor.italic-01', run: () => this.exec('italic') },
+        {
+            key: 'underline',
+            icon: 'editor.underline-01',
+            run: () => this.exec('underline'),
+        },
+        {
+            key: 'strike',
+            icon: 'editor.strikethrough-01',
+            run: () => this.strike(),
+        },
+    ];
+    styleActions = [
+        {
+            key: 'text-color',
+            icon: 'editor.palette',
+            run: () => this.toggleStylePanel('color'),
+        },
+        {
+            key: 'highlight',
+            icon: 'editor.roller-brush',
+            run: () => this.toggleStylePanel('highlight'),
+        },
+        {
+            key: 'size',
+            icon: 'editor.type-01',
+            run: () => this.toggleStylePanel('size'),
+        },
+    ];
+    alignActions = [
+        {
+            key: 'align-left',
+            icon: 'editor.align-left',
+            run: () => this.execWithCss('justifyLeft'),
+        },
+        {
+            key: 'align-center',
+            icon: 'editor.align-center',
+            run: () => this.execWithCss('justifyCenter'),
+        },
+        {
+            key: 'align-right',
+            icon: 'editor.align-right',
+            run: () => this.execWithCss('justifyRight'),
+        },
+    ];
+    listActions = [
+        {
+            key: 'bullets',
+            icon: 'editor.dotpoints-01',
+            run: () => this.exec('insertUnorderedList'),
+        },
+        {
+            key: 'numbers',
+            icon: 'layout.list',
+            run: () => this.exec('insertOrderedList'),
+        },
+        {
+            key: 'divider',
+            icon: 'general.minus',
+            run: () => this.exec('insertHorizontalRule'),
+        },
+    ];
+    directionActions = [
+        { key: 'ltr', text: 'EN', run: () => this.setDirection('ltr') },
+        { key: 'rtl', text: 'ع', run: () => this.setDirection('rtl') },
+    ];
+    historyActions = [
+        {
+            key: 'clear',
+            icon: 'editor.eraser',
+            run: () => this.exec('removeFormat'),
+        },
+        { key: 'undo', icon: 'arrow.flip-backward', run: () => this.exec('undo') },
+        { key: 'redo', icon: 'arrow.flip-forward', run: () => this.exec('redo') },
+    ];
+    frame = viewChild('frame', ...(ngDevMode ? [{ debugName: "frame" }] : /* istanbul ignore next */ []));
+    sourceHost = viewChild('sourceHost', ...(ngDevMode ? [{ debugName: "sourceHost" }] : /* istanbul ignore next */ []));
+    lang = signal(this.transloco.getActiveLang(), ...(ngDevMode ? [{ debugName: "lang" }] : /* istanbul ignore next */ []));
+    /** The last value this editor emitted — writes of it are not re-rendered. */
+    lastEmitted = null;
+    renderedFrame = null;
+    renderedKey = '';
+    savedRange = null;
+    /** Set while a multi-step command runs, so it emits once at the end. */
+    batching = false;
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    detachCanvas = null;
+    constructor() {
+        const langSub = this.transloco.langChanges$.subscribe((lang) => this.lang.set(lang));
+        this.destroyRef.onDestroy(() => {
+            langSub.unsubscribe();
+            this.detachCanvas?.();
+        });
+        // (Re)build the canvas for a new frame, when the chip labels change (the
+        // field catalog arrives after the content, or the language switches) and
+        // when the approved image origins arrive.
+        effect(() => {
+            const frame = this.frame()?.nativeElement ?? null;
+            if (!frame || this.effectiveMode() !== 'design')
+                return;
+            const renderKey = `${this.lang()}|${this.placeholders()
+                .map((item) => `${item.key}=${item.label}`)
+                .join(',')}|${this.approvedImageOrigins().join(',')}`;
+            untracked(() => {
+                if (frame !== this.renderedFrame || renderKey !== this.renderedKey) {
+                    this.renderedKey = renderKey;
+                    this.renderCanvas(frame);
+                }
+            });
+        });
+        this.sourceControl.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe((value) => this.emit(value));
+    }
+    // ==========================================================================
+    // ControlValueAccessor
+    // ==========================================================================
+    writeValue(value) {
+        const next = value ?? '';
+        this.value.set(next);
+        if (this.sourceControl.value !== next) {
+            this.sourceControl.setValue(next, { emitEvent: false });
+        }
+        if (next === this.lastEmitted)
+            return;
+        this.lastEmitted = null;
+        const frame = this.frame()?.nativeElement;
+        if (frame && this.effectiveMode() === 'design')
+            this.renderCanvas(frame);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled.set(disabled);
+        const body = this.renderedFrame?.contentDocument?.body;
+        if (body)
+            body.contentEditable = String(!disabled);
+        if (disabled) {
+            this.sourceControl.disable({ emitEvent: false });
+        }
+        else {
+            this.sourceControl.enable({ emitEvent: false });
+        }
+    }
+    // ==========================================================================
+    // Public API
+    // ==========================================================================
+    /** Inserts `{{key}}` where the cursor is (as a chip in Visual, as text in HTML). */
+    insertToken(key, label) {
+        if (this.disabled())
+            return;
+        const text = `{{${key}}}`;
+        if (this.effectiveMode() === 'html') {
+            const textarea = this.sourceHost()?.nativeElement.querySelector('textarea');
+            const current = this.sourceControl.value;
+            const start = textarea?.selectionStart ?? current.length;
+            const end = textarea?.selectionEnd ?? start;
+            this.sourceControl.setValue(current.slice(0, start) + text + current.slice(end));
+            setTimeout(() => {
+                textarea?.focus();
+                textarea?.setSelectionRange(start + text.length, start + text.length);
+            });
+            return;
+        }
+        const doc = this.canvasDocument();
+        if (!doc)
+            return;
+        const chip = createTokenChip(doc, key, label ??
+            this.placeholders().find((item) => item.key === key)?.label ??
+            key);
+        this.restoreSelection();
+        doc.execCommand('insertHTML', false, `${chip.outerHTML}&nbsp;`);
+    }
+    // ==========================================================================
+    // Toolbar
+    // ==========================================================================
+    onModeChange(mode) {
+        if (mode !== 'design' && mode !== 'html')
+            return;
+        if (mode === this.mode())
+            return;
+        this.mode.set(mode);
+        // A fresh frame is created for Visual; the effect renders it.
+        this.renderedFrame = null;
+    }
+    startBilingual() {
+        const doc = this.canvasDocument();
+        if (!doc)
+            return;
+        doc.body.innerHTML = BILINGUAL_STARTER;
+        this.placeCaret(doc, doc.body.querySelector('p'));
+        this.emitFromCanvas();
+    }
+    toggleStylePanel(panel) {
+        this.linkOpen.set(false);
+        this.imageOpen.set(false);
+        this.stylePanel.update((open) => (open === panel ? null : panel));
+    }
+    applyColor(swatch) {
+        const panel = this.stylePanel();
+        this.execWithCss(panel === 'highlight' ? 'hiliteColor' : 'foreColor', swatch.value);
+        this.stylePanel.set(null);
+    }
+    removeColor() {
+        const property = this.stylePanel() === 'highlight' ? 'background-color' : 'color';
+        this.clearStyle(property);
+        this.stylePanel.set(null);
+    }
+    applySize(size) {
+        const px = this.textSizes.find((item) => item.key === size)?.px ?? null;
+        if (px === null) {
+            this.clearStyle('font-size');
+        }
+        else {
+            const doc = this.canvasDocument();
+            if (!doc || this.disabled())
+                return;
+            this.restoreSelection();
+            this.batching = true;
+            try {
+                doc.execCommand('styleWithCSS', false, 'false');
+                doc.execCommand('fontSize', false, FONT_SIZE_MARKER);
+                replaceFontSizeMarkers(doc, px);
+            }
+            finally {
+                this.batching = false;
+            }
+            this.emitFromCanvas();
+        }
+        this.stylePanel.set(null);
+    }
+    swatchLabel(swatch) {
+        return this.t(`style.colors.${swatch.key}`);
+    }
+    toggleLink() {
+        this.stylePanel.set(null);
+        this.imageOpen.set(false);
+        this.linkError.set(false);
+        this.linkControl.setValue('');
+        this.linkOpen.update((open) => !open);
+    }
+    useRecordLink() {
+        this.linkControl.setValue('{{webUrl}}');
+        this.applyLink();
+    }
+    applyLink() {
+        const url = this.linkControl.value.trim();
+        if (!isAllowedLink(url)) {
+            this.linkError.set(true);
+            return;
+        }
+        const canonical = /^\{\{\s*webUrl\s*\}\}$/i.test(url) ? '{{webUrl}}' : url;
+        this.exec('createLink', canonical);
+        this.linkOpen.set(false);
+    }
+    removeLink() {
+        this.exec('unlink');
+        this.linkOpen.set(false);
+    }
+    /**
+     * Opens the image row: for the image selected in the canvas (to change it),
+     * otherwise for a new image at the cursor.
+     */
+    toggleImage() {
+        if (this.imageOpen()) {
+            this.imageOpen.set(false);
+            return;
+        }
+        this.linkOpen.set(false);
+        this.stylePanel.set(null);
+        this.imageError.set(this.approvedImageOrigins().length === 0 ? 'no-origins' : null);
+        const image = this.editingImage();
+        this.imageForm.src.setValue(image?.getAttribute('src') ?? '');
+        this.imageForm.alt.setValue(image?.getAttribute('alt') ?? '');
+        this.imageForm.width.setValue(numberAttribute(image, 'width'));
+        this.imageForm.height.setValue(numberAttribute(image, 'height'));
+        this.imageOpen.set(true);
+    }
+    applyImage() {
+        const draft = {
+            src: this.imageForm.src.value,
+            alt: this.imageForm.alt.value,
+            width: this.imageForm.width.value,
+            height: this.imageForm.height.value,
+        };
+        const error = validateEmailImage(draft, this.approvedImageOrigins());
+        this.imageError.set(error);
+        if (error)
+            return;
+        const doc = this.canvasDocument();
+        if (!doc)
+            return;
+        const editing = this.editingImage();
+        if (editing && doc.body.contains(editing)) {
+            applyEmailImage(editing, draft);
+            this.emitFromCanvas();
+        }
+        else {
+            this.restoreSelection();
+            doc.execCommand('insertHTML', false, buildEmailImage(doc, draft).outerHTML);
+        }
+        this.closeImage();
+    }
+    removeImage() {
+        const editing = this.editingImage();
+        if (editing) {
+            editing.remove();
+            this.emitFromCanvas();
+        }
+        this.closeImage();
+    }
+    closeImage() {
+        this.imageOpen.set(false);
+        this.selectImage(null);
+    }
+    actionLabel(key) {
+        return this.t(`actions.${key}`);
+    }
+    // ==========================================================================
+    // Canvas
+    // ==========================================================================
+    renderCanvas(frame) {
+        this.detachCanvas?.();
+        this.detachCanvas = null;
+        this.renderedFrame = frame;
+        this.savedRange = null;
+        // Elements of the previous canvas document are gone.
+        this.editingImage.set(null);
+        this.imageOpen.set(false);
+        this.stylePanel.set(null);
+        const onLoad = () => this.attachCanvas(frame);
+        frame.addEventListener('load', onLoad, { once: true });
+        frame.srcdoc = buildEditingDocument(this.value(), !this.disabled(), this.direction(), this.approvedImageOrigins());
+    }
+    attachCanvas(frame) {
+        const doc = frame.contentDocument;
+        if (!doc || frame !== this.renderedFrame)
+            return;
+        decorateCanvas(doc, this.placeholders(), this.t('slot'));
+        doc.execCommand('defaultParagraphSeparator', false, 'p');
+        const onInput = () => {
+            if (!this.batching)
+                this.emitFromCanvas();
+        };
+        const onSelection = () => this.saveSelection();
+        const onBlur = () => this.onTouched();
+        const onFocus = () => this.focused.emit();
+        const onClick = (event) => {
+            const target = event.target;
+            // A link in the canvas is text being edited, never a navigation.
+            if (target?.closest('a'))
+                event.preventDefault();
+            // Clicking an image selects it, so the Image button edits it. Canvas
+            // nodes live in the iframe's realm, so `instanceof` would never match.
+            this.selectImage(target?.tagName === 'IMG' ? target : null);
+        };
+        const onPaste = (event) => {
+            // Pasted documents bring foreign styles; keep plain text only.
+            event.preventDefault();
+            const text = event.clipboardData?.getData('text/plain') ?? '';
+            doc.execCommand('insertText', false, text);
+        };
+        doc.addEventListener('input', onInput);
+        doc.addEventListener('selectionchange', onSelection);
+        doc.addEventListener('click', onClick);
+        doc.addEventListener('paste', onPaste);
+        doc.body.addEventListener('blur', onBlur);
+        doc.addEventListener('focusin', onFocus);
+        this.detachCanvas = () => {
+            doc.removeEventListener('input', onInput);
+            doc.removeEventListener('selectionchange', onSelection);
+            doc.removeEventListener('click', onClick);
+            doc.removeEventListener('paste', onPaste);
+            doc.body.removeEventListener('blur', onBlur);
+            doc.removeEventListener('focusin', onFocus);
+        };
+    }
+    emitFromCanvas() {
+        const doc = this.canvasDocument();
+        if (!doc)
+            return;
+        const html = serializeCanvas(doc.body);
+        this.sourceControl.setValue(html, { emitEvent: false });
+        this.emit(html);
+    }
+    emit(value) {
+        if (value === this.value())
+            return;
+        this.lastEmitted = value;
+        this.value.set(value);
+        this.onChange(value);
+    }
+    exec(command, argument) {
+        const doc = this.canvasDocument();
+        if (!doc || this.disabled())
+            return;
+        this.restoreSelection();
+        doc.execCommand(command, false, argument);
+    }
+    /** Commands whose CSS form survives the email policy (spans with styles). */
+    execWithCss(command, argument) {
+        const doc = this.canvasDocument();
+        if (!doc || this.disabled())
+            return;
+        this.restoreSelection();
+        doc.execCommand('styleWithCSS', false, 'true');
+        try {
+            doc.execCommand(command, false, argument);
+        }
+        finally {
+            doc.execCommand('styleWithCSS', false, 'false');
+        }
+    }
+    /** Written as `<s>`: the policy strips `<strike>` and `text-decoration-line`. */
+    strike() {
+        const doc = this.canvasDocument();
+        if (!doc || this.disabled())
+            return;
+        this.restoreSelection();
+        this.batching = true;
+        try {
+            doc.execCommand('strikeThrough');
+            replaceStrikeTags(doc);
+        }
+        finally {
+            this.batching = false;
+        }
+        this.emitFromCanvas();
+    }
+    clearStyle(property) {
+        const doc = this.canvasDocument();
+        if (!doc || this.disabled())
+            return;
+        this.restoreSelection();
+        const selection = doc.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        clearInlineStyle(doc, selection.getRangeAt(0), property);
+        this.emitFromCanvas();
+    }
+    formatBlock(tag) {
+        this.exec('formatBlock', tag);
+    }
+    /** Sets the reading direction (and language) of the block under the cursor. */
+    setDirection(direction) {
+        const doc = this.canvasDocument();
+        if (!doc || this.disabled())
+            return;
+        this.restoreSelection();
+        const anchor = doc.getSelection()?.anchorNode ?? null;
+        // nodeType, not `instanceof`: canvas nodes belong to the iframe's realm.
+        const start = anchor?.nodeType === Node.ELEMENT_NODE
+            ? anchor
+            : (anchor?.parentElement ?? null);
+        const block = start?.closest('p, h1, h2, h3, li, td, th, div');
+        if (!block || block === doc.body || !doc.body.contains(block))
+            return;
+        block.setAttribute('dir', direction);
+        block.setAttribute('lang', direction === 'rtl' ? 'ar' : 'en');
+        this.emitFromCanvas();
+    }
+    /** Highlights (canvas-only class, never serialized) and selects one image. */
+    selectImage(image) {
+        const previous = this.editingImage();
+        if (previous && previous !== image) {
+            previous.classList.remove(SELECTED_CLASS);
+            if (previous.classList.length === 0)
+                previous.removeAttribute('class');
+        }
+        this.editingImage.set(image);
+        if (!image)
+            return;
+        image.classList.add(SELECTED_CLASS);
+        const doc = image.ownerDocument;
+        const range = doc.createRange();
+        range.selectNode(image);
+        const selection = doc.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        this.savedRange = range.cloneRange();
+    }
+    saveSelection() {
+        const doc = this.canvasDocument();
+        const selection = doc?.getSelection();
+        if (!doc || !selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        if (doc.body.contains(range.commonAncestorContainer)) {
+            this.savedRange = range.cloneRange();
+        }
+    }
+    restoreSelection() {
+        const frame = this.renderedFrame;
+        const doc = this.canvasDocument();
+        if (!frame || !doc)
+            return;
+        frame.contentWindow?.focus();
+        doc.body.focus();
+        if (!this.savedRange)
+            return;
+        const selection = doc.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(this.savedRange);
+    }
+    placeCaret(doc, element) {
+        if (!element)
+            return;
+        const range = doc.createRange();
+        range.selectNodeContents(element);
+        range.collapse(true);
+        const selection = doc.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        this.savedRange = range.cloneRange();
+    }
+    canvasDocument() {
+        return this.effectiveMode() === 'design'
+            ? (this.renderedFrame?.contentDocument ?? null)
+            : null;
+    }
+    t(key) {
+        return this.transloco.translate(`email-delivery.editor.${key}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailVisualEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: EmailVisualEditor, isStandalone: true, selector: "mt-email-visual-editor", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, placeholders: { classPropertyName: "placeholders", publicName: "placeholders", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, starter: { classPropertyName: "starter", publicName: "starter", isSignal: true, isRequired: false, transformFunction: null }, approvedImageOrigins: { classPropertyName: "approvedImageOrigins", publicName: "approvedImageOrigins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focused: "focused" }, host: { classAttribute: "block min-w-0" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EmailVisualEditor),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "frame", first: true, predicate: ["frame"], descendants: true, isSignal: true }, { propertyName: "sourceHost", first: true, predicate: ["sourceHost"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery.editor'\">\n  <div class=\"flex min-w-0 flex-col gap-1\">\n    @if (label() || hint()) {\n      <div class=\"flex items-center gap-1 text-sm\">\n        @if (label()) {\n          <span class=\"font-medium\">{{ label() }}</span>\n        }\n        @if (hint()) {\n          <span class=\"inline-flex text-surface-400\" [mtTooltip]=\"hint()\">\n            <mt-icon icon=\"general.help-circle\" />\n          </span>\n        }\n      </div>\n    }\n\n    <div\n      class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n    >\n      <!-- Toolbar -->\n      <div\n        class=\"flex flex-wrap items-center justify-between gap-2 border-b border-surface bg-surface-50 px-2 py-1.5\"\n      >\n        <div\n          class=\"flex min-w-0 flex-wrap items-center gap-0.5\"\n          role=\"toolbar\"\n          [attr.aria-label]=\"t('toolbar')\"\n        >\n          @if (effectiveMode() === \"design\") {\n            @for (action of blockActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of inlineActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of styleActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of alignActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of listActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <mt-button\n              icon=\"general.link-01\"\n              severity=\"secondary\"\n              variant=\"text\"\n              size=\"small\"\n              [tooltip]=\"t('actions.link')\"\n              [ariaLabel]=\"t('actions.link')\"\n              [disabled]=\"disabled()\"\n              (onClick)=\"toggleLink()\"\n            />\n            <mt-button\n              icon=\"image.image-01\"\n              severity=\"secondary\"\n              variant=\"text\"\n              size=\"small\"\n              [tooltip]=\"\n                editingImage() ? t('actions.image-edit') : t('actions.image')\n              \"\n              [ariaLabel]=\"t('actions.image')\"\n              [disabled]=\"disabled()\"\n              (onClick)=\"toggleImage()\"\n            />\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of directionActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of historyActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n          }\n        </div>\n        @if (!designBlocked()) {\n          <!-- ms-auto keeps the switch at the end when the toolbar wraps. -->\n          <mt-tabs\n            class=\"ms-auto\"\n            size=\"small\"\n            [options]=\"modeOptions()\"\n            [active]=\"mode()\"\n            (activeChange)=\"onModeChange($event)\"\n          />\n        }\n      </div>\n\n      @if (stylePanel() && effectiveMode() === \"design\") {\n        <div\n          class=\"flex flex-wrap items-center gap-2 border-b border-surface px-3 py-2\"\n          role=\"group\"\n          [attr.aria-label]=\"\n            t(\n              'style.' +\n                (stylePanel() === 'color' ? 'text-color' : stylePanel())\n            )\n          \"\n        >\n          <span class=\"text-xs font-medium text-muted-color\">{{\n            t(\n              \"style.\" +\n                (stylePanel() === \"color\" ? \"text-color\" : stylePanel())\n            )\n          }}</span>\n          @if (stylePanel() === \"size\") {\n            @for (size of textSizes; track size.key) {\n              <mt-button\n                size=\"small\"\n                severity=\"secondary\"\n                variant=\"outlined\"\n                [label]=\"t('style.sizes.' + size.key)\"\n                (onClick)=\"applySize(size.key)\"\n              />\n            }\n          } @else {\n            <div class=\"flex flex-wrap items-center gap-1\">\n              @for (\n                swatch of stylePanel() === \"highlight\"\n                  ? highlightColors\n                  : textColors;\n                track swatch.key\n              ) {\n                <!-- The swatch colour is data, not a theme token. -->\n                <button\n                  type=\"button\"\n                  class=\"size-6 rounded-md border border-surface outline-offset-2 hover:scale-110 focus-visible:outline-2 focus-visible:outline-primary\"\n                  [style.background-color]=\"swatch.value\"\n                  [attr.aria-label]=\"swatchLabel(swatch)\"\n                  [mtTooltip]=\"swatchLabel(swatch)\"\n                  (click)=\"applyColor(swatch)\"\n                ></button>\n              }\n            </div>\n            <mt-button\n              size=\"small\"\n              severity=\"secondary\"\n              variant=\"text\"\n              icon=\"general.x-close\"\n              [label]=\"t('style.remove-color')\"\n              (onClick)=\"removeColor()\"\n            />\n          }\n        </div>\n      }\n\n      @if (imageOpen() && effectiveMode() === \"design\") {\n        <div\n          class=\"flex flex-col gap-2 border-b border-surface px-3 py-2\"\n          [attr.aria-label]=\"t('actions.image')\"\n        >\n          <div class=\"grid grid-cols-1 gap-2 md:grid-cols-2\">\n            <mt-text-field\n              [formControl]=\"imageForm.src\"\n              [label]=\"t('image.src')\"\n              placeholder=\"https://\"\n              dir=\"ltr\"\n            />\n            <mt-text-field\n              [formControl]=\"imageForm.alt\"\n              [label]=\"t('image.alt')\"\n              [hint]=\"t('image.alt-hint')\"\n            />\n            <mt-number-field\n              [formControl]=\"imageForm.width\"\n              [label]=\"t('image.width')\"\n              [min]=\"imageMin\"\n              [max]=\"imageMax\"\n              [maxFractionDigits]=\"0\"\n            />\n            <mt-number-field\n              [formControl]=\"imageForm.height\"\n              [label]=\"t('image.height')\"\n              [min]=\"imageMin\"\n              [max]=\"imageMax\"\n              [maxFractionDigits]=\"0\"\n            />\n          </div>\n          @if (imageError(); as error) {\n            <p\n              class=\"rounded-md border px-3 py-2 text-xs\"\n              [class]=\"\n                error === 'no-origins'\n                  ? 'border-amber-200 bg-amber-50 text-amber-700'\n                  : 'border-red-200 bg-red-50 text-red-700'\n              \"\n              role=\"alert\"\n            >\n              {{ imageErrorText() }}\n            </p>\n          } @else {\n            <p class=\"text-xs text-muted-color\">\n              {{ t(\"image.hint\", { origins: imageOriginsLabel() }) }}\n            </p>\n          }\n          <div class=\"flex flex-wrap gap-2\">\n            <mt-button\n              size=\"small\"\n              [label]=\"editingImage() ? t('image.update') : t('image.insert')\"\n              [disabled]=\"imageError() === 'no-origins'\"\n              (onClick)=\"applyImage()\"\n            />\n            @if (editingImage()) {\n              <mt-button\n                size=\"small\"\n                severity=\"danger\"\n                variant=\"text\"\n                [label]=\"t('image.remove')\"\n                (onClick)=\"removeImage()\"\n              />\n            }\n            <mt-button\n              size=\"small\"\n              severity=\"secondary\"\n              variant=\"text\"\n              [label]=\"t('image.cancel')\"\n              (onClick)=\"closeImage()\"\n            />\n          </div>\n        </div>\n      }\n\n      @if (linkOpen() && effectiveMode() === \"design\") {\n        <div\n          class=\"flex flex-wrap items-start gap-2 border-b border-surface px-3 py-2\"\n        >\n          <mt-text-field\n            class=\"min-w-0 flex-1\"\n            [formControl]=\"linkControl\"\n            [placeholder]=\"t('link.placeholder')\"\n            dir=\"ltr\"\n          />\n          <mt-button\n            size=\"small\"\n            [label]=\"t('link.apply')\"\n            (onClick)=\"applyLink()\"\n          />\n          <mt-button\n            size=\"small\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            [label]=\"t('link.record')\"\n            (onClick)=\"useRecordLink()\"\n          />\n          <mt-button\n            size=\"small\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [label]=\"t('link.remove')\"\n            (onClick)=\"removeLink()\"\n          />\n          @if (linkError()) {\n            <p class=\"w-full text-xs text-red-600\" role=\"alert\">\n              {{ t(\"link.invalid\") }}\n            </p>\n          }\n        </div>\n      }\n\n      @if (designBlocked()) {\n        <p\n          class=\"border-b border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700\"\n        >\n          {{ t(\"design-blocked\") }}\n        </p>\n      }\n\n      @if (effectiveMode() === \"design\") {\n        @if (starter() && isEmpty() && !disabled()) {\n          <div\n            class=\"flex items-center justify-between gap-2 border-b border-surface px-3 py-2 text-xs text-muted-color\"\n          >\n            <span>{{ t(\"empty\") }}</span>\n            <mt-button\n              size=\"small\"\n              severity=\"secondary\"\n              variant=\"outlined\"\n              [label]=\"t('bilingual')\"\n              (onClick)=\"startBilingual()\"\n            />\n          </div>\n        }\n        <iframe\n          #frame\n          sandbox=\"allow-same-origin\"\n          referrerpolicy=\"no-referrer\"\n          [attr.title]=\"label() || t('canvas')\"\n          class=\"block w-full border-0 bg-white\"\n          [style.height]=\"height()\"\n        ></iframe>\n      } @else {\n        <div #sourceHost class=\"p-2\" dir=\"ltr\">\n          <textarea\n            class=\"block w-full resize-y rounded-md border border-surface bg-content p-2 font-mono text-xs leading-5 outline-none focus:border-primary\"\n            (focus)=\"focused.emit()\"\n            [style.height]=\"height()\"\n            [formControl]=\"sourceControl\"\n            [attr.aria-label]=\"label() || t('html')\"\n            spellcheck=\"false\"\n          ></textarea>\n        </div>\n      }\n    </div>\n  </div>\n\n  <ng-template #toolbarButton let-action>\n    <mt-button\n      [icon]=\"action.icon\"\n      [label]=\"action.text\"\n      severity=\"secondary\"\n      variant=\"text\"\n      size=\"small\"\n      [tooltip]=\"actionLabel(action.key)\"\n      [ariaLabel]=\"actionLabel(action.key)\"\n      [disabled]=\"disabled()\"\n      (onClick)=\"action.run()\"\n    />\n  </ng-template>\n</ng-container>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: NumberField, selector: "mt-number-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "pInputs", "format", "useGrouping", "maxFractionDigits", "min", "max", "required"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: EmailVisualEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-email-visual-editor', imports: [
+                        NgTemplateOutlet,
+                        TranslocoDirective,
+                        ReactiveFormsModule,
+                        Button,
+                        Tabs,
+                        TextField,
+                        NumberField,
+                        Tooltip,
+                        Icon,
+                    ], host: { class: 'block min-w-0' }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EmailVisualEditor),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'email-delivery.editor'\">\n  <div class=\"flex min-w-0 flex-col gap-1\">\n    @if (label() || hint()) {\n      <div class=\"flex items-center gap-1 text-sm\">\n        @if (label()) {\n          <span class=\"font-medium\">{{ label() }}</span>\n        }\n        @if (hint()) {\n          <span class=\"inline-flex text-surface-400\" [mtTooltip]=\"hint()\">\n            <mt-icon icon=\"general.help-circle\" />\n          </span>\n        }\n      </div>\n    }\n\n    <div\n      class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n    >\n      <!-- Toolbar -->\n      <div\n        class=\"flex flex-wrap items-center justify-between gap-2 border-b border-surface bg-surface-50 px-2 py-1.5\"\n      >\n        <div\n          class=\"flex min-w-0 flex-wrap items-center gap-0.5\"\n          role=\"toolbar\"\n          [attr.aria-label]=\"t('toolbar')\"\n        >\n          @if (effectiveMode() === \"design\") {\n            @for (action of blockActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of inlineActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of styleActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of alignActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of listActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <mt-button\n              icon=\"general.link-01\"\n              severity=\"secondary\"\n              variant=\"text\"\n              size=\"small\"\n              [tooltip]=\"t('actions.link')\"\n              [ariaLabel]=\"t('actions.link')\"\n              [disabled]=\"disabled()\"\n              (onClick)=\"toggleLink()\"\n            />\n            <mt-button\n              icon=\"image.image-01\"\n              severity=\"secondary\"\n              variant=\"text\"\n              size=\"small\"\n              [tooltip]=\"\n                editingImage() ? t('actions.image-edit') : t('actions.image')\n              \"\n              [ariaLabel]=\"t('actions.image')\"\n              [disabled]=\"disabled()\"\n              (onClick)=\"toggleImage()\"\n            />\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of directionActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n            <span\n              class=\"mx-1 h-5 w-px bg-surface-200\"\n              aria-hidden=\"true\"\n            ></span>\n            @for (action of historyActions; track action.key) {\n              <ng-container\n                [ngTemplateOutlet]=\"toolbarButton\"\n                [ngTemplateOutletContext]=\"{ $implicit: action }\"\n              />\n            }\n          }\n        </div>\n        @if (!designBlocked()) {\n          <!-- ms-auto keeps the switch at the end when the toolbar wraps. -->\n          <mt-tabs\n            class=\"ms-auto\"\n            size=\"small\"\n            [options]=\"modeOptions()\"\n            [active]=\"mode()\"\n            (activeChange)=\"onModeChange($event)\"\n          />\n        }\n      </div>\n\n      @if (stylePanel() && effectiveMode() === \"design\") {\n        <div\n          class=\"flex flex-wrap items-center gap-2 border-b border-surface px-3 py-2\"\n          role=\"group\"\n          [attr.aria-label]=\"\n            t(\n              'style.' +\n                (stylePanel() === 'color' ? 'text-color' : stylePanel())\n            )\n          \"\n        >\n          <span class=\"text-xs font-medium text-muted-color\">{{\n            t(\n              \"style.\" +\n                (stylePanel() === \"color\" ? \"text-color\" : stylePanel())\n            )\n          }}</span>\n          @if (stylePanel() === \"size\") {\n            @for (size of textSizes; track size.key) {\n              <mt-button\n                size=\"small\"\n                severity=\"secondary\"\n                variant=\"outlined\"\n                [label]=\"t('style.sizes.' + size.key)\"\n                (onClick)=\"applySize(size.key)\"\n              />\n            }\n          } @else {\n            <div class=\"flex flex-wrap items-center gap-1\">\n              @for (\n                swatch of stylePanel() === \"highlight\"\n                  ? highlightColors\n                  : textColors;\n                track swatch.key\n              ) {\n                <!-- The swatch colour is data, not a theme token. -->\n                <button\n                  type=\"button\"\n                  class=\"size-6 rounded-md border border-surface outline-offset-2 hover:scale-110 focus-visible:outline-2 focus-visible:outline-primary\"\n                  [style.background-color]=\"swatch.value\"\n                  [attr.aria-label]=\"swatchLabel(swatch)\"\n                  [mtTooltip]=\"swatchLabel(swatch)\"\n                  (click)=\"applyColor(swatch)\"\n                ></button>\n              }\n            </div>\n            <mt-button\n              size=\"small\"\n              severity=\"secondary\"\n              variant=\"text\"\n              icon=\"general.x-close\"\n              [label]=\"t('style.remove-color')\"\n              (onClick)=\"removeColor()\"\n            />\n          }\n        </div>\n      }\n\n      @if (imageOpen() && effectiveMode() === \"design\") {\n        <div\n          class=\"flex flex-col gap-2 border-b border-surface px-3 py-2\"\n          [attr.aria-label]=\"t('actions.image')\"\n        >\n          <div class=\"grid grid-cols-1 gap-2 md:grid-cols-2\">\n            <mt-text-field\n              [formControl]=\"imageForm.src\"\n              [label]=\"t('image.src')\"\n              placeholder=\"https://\"\n              dir=\"ltr\"\n            />\n            <mt-text-field\n              [formControl]=\"imageForm.alt\"\n              [label]=\"t('image.alt')\"\n              [hint]=\"t('image.alt-hint')\"\n            />\n            <mt-number-field\n              [formControl]=\"imageForm.width\"\n              [label]=\"t('image.width')\"\n              [min]=\"imageMin\"\n              [max]=\"imageMax\"\n              [maxFractionDigits]=\"0\"\n            />\n            <mt-number-field\n              [formControl]=\"imageForm.height\"\n              [label]=\"t('image.height')\"\n              [min]=\"imageMin\"\n              [max]=\"imageMax\"\n              [maxFractionDigits]=\"0\"\n            />\n          </div>\n          @if (imageError(); as error) {\n            <p\n              class=\"rounded-md border px-3 py-2 text-xs\"\n              [class]=\"\n                error === 'no-origins'\n                  ? 'border-amber-200 bg-amber-50 text-amber-700'\n                  : 'border-red-200 bg-red-50 text-red-700'\n              \"\n              role=\"alert\"\n            >\n              {{ imageErrorText() }}\n            </p>\n          } @else {\n            <p class=\"text-xs text-muted-color\">\n              {{ t(\"image.hint\", { origins: imageOriginsLabel() }) }}\n            </p>\n          }\n          <div class=\"flex flex-wrap gap-2\">\n            <mt-button\n              size=\"small\"\n              [label]=\"editingImage() ? t('image.update') : t('image.insert')\"\n              [disabled]=\"imageError() === 'no-origins'\"\n              (onClick)=\"applyImage()\"\n            />\n            @if (editingImage()) {\n              <mt-button\n                size=\"small\"\n                severity=\"danger\"\n                variant=\"text\"\n                [label]=\"t('image.remove')\"\n                (onClick)=\"removeImage()\"\n              />\n            }\n            <mt-button\n              size=\"small\"\n              severity=\"secondary\"\n              variant=\"text\"\n              [label]=\"t('image.cancel')\"\n              (onClick)=\"closeImage()\"\n            />\n          </div>\n        </div>\n      }\n\n      @if (linkOpen() && effectiveMode() === \"design\") {\n        <div\n          class=\"flex flex-wrap items-start gap-2 border-b border-surface px-3 py-2\"\n        >\n          <mt-text-field\n            class=\"min-w-0 flex-1\"\n            [formControl]=\"linkControl\"\n            [placeholder]=\"t('link.placeholder')\"\n            dir=\"ltr\"\n          />\n          <mt-button\n            size=\"small\"\n            [label]=\"t('link.apply')\"\n            (onClick)=\"applyLink()\"\n          />\n          <mt-button\n            size=\"small\"\n            severity=\"secondary\"\n            variant=\"outlined\"\n            [label]=\"t('link.record')\"\n            (onClick)=\"useRecordLink()\"\n          />\n          <mt-button\n            size=\"small\"\n            severity=\"secondary\"\n            variant=\"text\"\n            [label]=\"t('link.remove')\"\n            (onClick)=\"removeLink()\"\n          />\n          @if (linkError()) {\n            <p class=\"w-full text-xs text-red-600\" role=\"alert\">\n              {{ t(\"link.invalid\") }}\n            </p>\n          }\n        </div>\n      }\n\n      @if (designBlocked()) {\n        <p\n          class=\"border-b border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700\"\n        >\n          {{ t(\"design-blocked\") }}\n        </p>\n      }\n\n      @if (effectiveMode() === \"design\") {\n        @if (starter() && isEmpty() && !disabled()) {\n          <div\n            class=\"flex items-center justify-between gap-2 border-b border-surface px-3 py-2 text-xs text-muted-color\"\n          >\n            <span>{{ t(\"empty\") }}</span>\n            <mt-button\n              size=\"small\"\n              severity=\"secondary\"\n              variant=\"outlined\"\n              [label]=\"t('bilingual')\"\n              (onClick)=\"startBilingual()\"\n            />\n          </div>\n        }\n        <iframe\n          #frame\n          sandbox=\"allow-same-origin\"\n          referrerpolicy=\"no-referrer\"\n          [attr.title]=\"label() || t('canvas')\"\n          class=\"block w-full border-0 bg-white\"\n          [style.height]=\"height()\"\n        ></iframe>\n      } @else {\n        <div #sourceHost class=\"p-2\" dir=\"ltr\">\n          <textarea\n            class=\"block w-full resize-y rounded-md border border-surface bg-content p-2 font-mono text-xs leading-5 outline-none focus:border-primary\"\n            (focus)=\"focused.emit()\"\n            [style.height]=\"height()\"\n            [formControl]=\"sourceControl\"\n            [attr.aria-label]=\"label() || t('html')\"\n            spellcheck=\"false\"\n          ></textarea>\n        </div>\n      }\n    </div>\n  </div>\n\n  <ng-template #toolbarButton let-action>\n    <mt-button\n      [icon]=\"action.icon\"\n      [label]=\"action.text\"\n      severity=\"secondary\"\n      variant=\"text\"\n      size=\"small\"\n      [tooltip]=\"actionLabel(action.key)\"\n      [ariaLabel]=\"actionLabel(action.key)\"\n      [disabled]=\"disabled()\"\n      (onClick)=\"action.run()\"\n    />\n  </ng-template>\n</ng-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], placeholders: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholders", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], starter: [{ type: i0.Input, args: [{ isSignal: true, alias: "starter", required: false }] }], focused: [{ type: i0.Output, args: ["focused"] }], approvedImageOrigins: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvedImageOrigins", required: false }] }], frame: [{ type: i0.ViewChild, args: ['frame', { isSignal: true }] }], sourceHost: [{ type: i0.ViewChild, args: ['sourceHost', { isSignal: true }] }] } });
+function numberAttribute(element, name) {
+    const value = Number(element?.getAttribute(name));
+    return Number.isFinite(value) && value > 0 ? value : null;
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DEFAULT_GENERAL_CONFIGURATION as D, EmailDeliveryFacade as E, FIXED_CURRENCIES as F, GENERAL_CONFIGURATION_SETTING_KEY as G, RATE_SOURCE_OPTIONS as R, SystemSettings as S, TIMESHEET_FREQUENCY_OPTIONS as T, WEEKEND_DAY_DEFINITIONS as W, EmailDeliveryStatus as a, EMAIL_DELIVERY_ATTEMPT_STATUSES as b, createEmailTestRequestId as c, areEmailTestRecipientsValid as d, isEmailTestRequestPending as e, EMAIL_DELIVERY_PERMISSIONS as f, getEmailDeliveryStatusMap as g, EXPLORE_DEFAULT_VIEW_OPTIONS as h, isConnectionTestAttempt as i, DEFAULT_DATE_FORMAT_OPTIONS as j, DEFAULT_TIME_FORMAT_OPTIONS as k, DOTNET_DAY_DEFINITIONS as l, SCHEDULE_ITEM_TYPE_OPTIONS as m, SystemSettingsHolidayEditor as n, DEFAULT_EMAIL_DELIVERY_OPTIONS as o, parseEmailTestRecipients as p, EMAIL_DELIVERY_OPTIONS as q, provideEmailDelivery as r, EmailDeliveryAccessService as s, collectEmailTemplatePlaceholders as t, buildEmailTemplatePlaceholderFields as u, EmailUserTestDialog as v, EMAIL_USER_INITIATED_TEST_OPERATION_KIND as w, EMAIL_DELIVERY_ROUTES as x };
-//# sourceMappingURL=masterteam-system-settings-masterteam-system-settings-7I4TfgwP.mjs.map
+export { buildEmailTemplatePlaceholderFields as A, EmailUserTestDialog as B, EMAIL_USER_INITIATED_TEST_OPERATION_KIND as C, DEFAULT_GENERAL_CONFIGURATION as D, EmailDeliveryFacade as E, FIXED_CURRENCIES as F, GENERAL_CONFIGURATION_SETTING_KEY as G, EMAIL_DELIVERY_ROUTES as H, emailDesignLeaveGuard as I, buildEmailPreviewDocument as J, RATE_SOURCE_OPTIONS as R, SystemSettings as S, TIMESHEET_FREQUENCY_OPTIONS as T, WEEKEND_DAY_DEFINITIONS as W, EmailDeliveryStatus as a, EMAIL_DELIVERY_ATTEMPT_STATUSES as b, createEmailTestRequestId as c, areEmailTestRecipientsValid as d, isEmailTestRequestPending as e, EMAIL_DELIVERY_PERMISSIONS as f, getEmailDeliveryStatusMap as g, EmailLayoutFacade as h, isConnectionTestAttempt as i, EMAIL_LAYOUT_CONTENT_SLOT as j, EMAIL_LAYOUT_MAX_BYTES as k, EmailVisualEditor as l, EmailHtmlPreview as m, EXPLORE_DEFAULT_VIEW_OPTIONS as n, DEFAULT_DATE_FORMAT_OPTIONS as o, parseEmailTestRecipients as p, DEFAULT_TIME_FORMAT_OPTIONS as q, readLayoutErrorDiagnostics as r, DOTNET_DAY_DEFINITIONS as s, SCHEDULE_ITEM_TYPE_OPTIONS as t, SystemSettingsHolidayEditor as u, DEFAULT_EMAIL_DELIVERY_OPTIONS as v, EMAIL_DELIVERY_OPTIONS as w, provideEmailDelivery as x, EmailDeliveryAccessService as y, collectEmailTemplatePlaceholders as z };
+//# sourceMappingURL=masterteam-system-settings-masterteam-system-settings-C51hZw-Q.mjs.map