@masterteam/notification 0.0.28 → 0.0.29

package/fesm2022/masterteam-notification.mjs

@@ -1,114 +1,73 @@
 import * as i0 from '@angular/core';
-import { inject, input, Component, Injectable, computed, signal, effect, untracked, ChangeDetectionStrategy } from '@angular/core';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { CommonModule } from '@angular/common';
+import { inject, Injectable, computed, input, ChangeDetectionStrategy, Component, output, signal, DestroyRef, effect, untracked, ElementRef, viewChild, HostListener } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
-import { FormControl, Validators, ReactiveFormsModule, FormGroup } from '@angular/forms';
-import * as i2 from '@jsverse/transloco';
-import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
-import { Card } from '@masterteam/components/card';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
+import { TranslocoService, TranslocoDirective } from '@jsverse/transloco';
 import { Button } from '@masterteam/components/button';
+import { ConfirmationService } from '@masterteam/components/confirmation';
+import { EmptyState } from '@masterteam/components/empty-state';
+import { ModalService } from '@masterteam/components/modal';
 import { SelectField } from '@masterteam/components/select-field';
+import { Tabs } from '@masterteam/components/tabs';
 import { TextField } from '@masterteam/components/text-field';
 import { TextareaField } from '@masterteam/components/textarea-field';
-import { EditorField } from '@masterteam/components/editor-field';
-import { ToggleField } from '@masterteam/components/toggle-field';
-import { Tabs } from '@masterteam/components/tabs';
+import { ToastService } from '@masterteam/components/toast';
+import { Tooltip } from '@masterteam/components/tooltip';
+import { FormulaBuilder } from '@masterteam/formula-builder';
 import { Icon } from '@masterteam/icons';
-import { ConfirmationService } from '@masterteam/components/confirmation';
-import { ModalService } from '@masterteam/components/modal';
+import { EmailHtmlPreview, EmailVisualEditor, EmailUserTestDialog } from '@masterteam/system-settings';
 import { Skeleton } from 'primeng/skeleton';
-import { EmailUserTestDialog, buildEmailTemplatePlaceholderFields, collectEmailTemplatePlaceholders } from '@masterteam/system-settings';
-import { ToastService } from '@masterteam/components/toast';
-import { ModalRef } from '@masterteam/components/dialog';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { map, tap, Subject, merge, debounceTime, filter, switchMap, of, catchError, startWith, Observable } from 'rxjs';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 import { Action, Selector, State, Store, select } from '@ngxs/store';
-import { CrudStateBase, handleApiRequest } from '@masterteam/components';
-
-class AddTemplateDialog {
-    modalService = inject(ModalService);
-    ref = inject(ModalRef);
-    data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    templateNameControl = new FormControl('', [Validators.required]);
-    onSave() {
-        if (this.templateNameControl.valid) {
-            this.ref.close({ name: this.templateNameControl.value?.trim() });
-        }
-    }
-    onCancel() {
-        this.ref.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AddTemplateDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AddTemplateDialog, isStandalone: true, selector: "mt-add-template-dialog", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"modalService.contentClass\" class=\"p-4\">\r\n  <mt-text-field\r\n    [formControl]=\"templateNameControl\"\r\n    [label]=\"'notification.templateName' | transloco\"\r\n    [placeholder]=\"'notification.enterTemplateName' | transloco\"\r\n    [required]=\"true\"\r\n  />\r\n</div>\r\n\r\n<div [class]=\"modalService.footerClass\">\r\n  <mt-button\r\n    [label]=\"'notification.cancel' | transloco\"\r\n    variant=\"outlined\"\r\n    (onClick)=\"onCancel()\"\r\n  />\r\n  <mt-button\r\n    [label]=\"'notification.save' | transloco\"\r\n    [disabled]=\"!templateNameControl.valid\"\r\n    (onClick)=\"onSave()\"\r\n  />\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: TranslocoModule }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { 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: "pipe", type: i2.TranslocoPipe, name: "transloco" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AddTemplateDialog, decorators: [{
-            type: Component,
-            args: [{ selector: 'mt-add-template-dialog', standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        TranslocoModule,
-                        TextField,
-                        Button,
-                    ], template: "<div [class]=\"modalService.contentClass\" class=\"p-4\">\r\n  <mt-text-field\r\n    [formControl]=\"templateNameControl\"\r\n    [label]=\"'notification.templateName' | transloco\"\r\n    [placeholder]=\"'notification.enterTemplateName' | transloco\"\r\n    [required]=\"true\"\r\n  />\r\n</div>\r\n\r\n<div [class]=\"modalService.footerClass\">\r\n  <mt-button\r\n    [label]=\"'notification.cancel' | transloco\"\r\n    variant=\"outlined\"\r\n    (onClick)=\"onCancel()\"\r\n  />\r\n  <mt-button\r\n    [label]=\"'notification.save' | transloco\"\r\n    [disabled]=\"!templateNameControl.valid\"\r\n    (onClick)=\"onSave()\"\r\n  />\r\n</div>\r\n" }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
+import { handleApiRequest } from '@masterteam/components';
+import { ModalRef } from '@masterteam/components/dialog';
+import { RadioCardsField } from '@masterteam/components/radio-cards-field';
+import { ToggleField } from '@masterteam/components/toggle-field';
+import { DatePipe } from '@angular/common';
 
 // ============================================================================
-// Action Keys Enum
+// Action Keys
 // ============================================================================
 var NotificationActionKey;
 (function (NotificationActionKey) {
     NotificationActionKey["GetEvents"] = "getEvents";
-    NotificationActionKey["GetReceivers"] = "getReceivers";
-    NotificationActionKey["GetProperties"] = "getProperties";
+    NotificationActionKey["GetContext"] = "getContext";
+    NotificationActionKey["GetDefaults"] = "getDefaults";
+    NotificationActionKey["GetPublications"] = "getPublications";
+    NotificationActionKey["CreateTemplate"] = "createTemplate";
+    NotificationActionKey["SaveTemplate"] = "saveTemplate";
     NotificationActionKey["AddReceivers"] = "addReceivers";
     NotificationActionKey["DeleteReceiver"] = "deleteReceiver";
-    NotificationActionKey["AddTemplate"] = "addTemplate";
-    NotificationActionKey["UpdateTemplate"] = "updateTemplate";
     NotificationActionKey["DeleteTemplate"] = "deleteTemplate";
+    NotificationActionKey["PublishTemplate"] = "publishTemplate";
+    NotificationActionKey["SetActivation"] = "setActivation";
+    NotificationActionKey["RestorePublication"] = "restorePublication";
+    NotificationActionKey["InitializeDefaults"] = "initializeDefaults";
+    NotificationActionKey["RestoreDefault"] = "restoreDefault";
 })(NotificationActionKey || (NotificationActionKey = {}));
-const CHANNEL_CONFIGS = [
-    {
-        key: 'email',
-        labelKey: 'notification.channel.email',
-        supportsBilingual: false,
-        bilingualOptional: false,
-        useRichEditor: true,
-        templateKey: 'emailTemplate',
-    },
-    {
-        key: 'sms',
-        labelKey: 'notification.channel.sms',
-        supportsBilingual: false,
-        bilingualOptional: false,
-        useRichEditor: false,
-        templateKey: 'smsTemplate',
-    },
-    {
-        key: 'app',
-        labelKey: 'notification.channel.app',
-        supportsBilingual: true,
-        bilingualOptional: false,
-        useRichEditor: true,
-        translatableKey: 'appTemplate',
-    },
+/** Writes that must never run twice at once (the contract forbids double submits). */
+const NOTIFICATION_MUTATION_KEYS = [
+    NotificationActionKey.CreateTemplate,
+    NotificationActionKey.SaveTemplate,
+    NotificationActionKey.AddReceivers,
+    NotificationActionKey.DeleteReceiver,
+    NotificationActionKey.DeleteTemplate,
+    NotificationActionKey.PublishTemplate,
+    NotificationActionKey.SetActivation,
+    NotificationActionKey.RestorePublication,
+    NotificationActionKey.InitializeDefaults,
+    NotificationActionKey.RestoreDefault,
+];
+const NOTIFICATION_CHANNELS = [
+    'App',
+    'Email',
+    'Sms',
 ];
-/** Helper to get channel config by key */
-function getChannelConfig(key) {
-    return CHANNEL_CONFIGS.find((c) => c.key === key) ?? CHANNEL_CONFIGS[0];
-}
-/** Build form control name for a channel field */
-function getFormControlName(ch, type) {
-    if (type === 'single')
-        return ch.templateKey ?? null;
-    if (!ch.translatableKey)
-        return null;
-    return type === 'en'
-        ? `${ch.translatableKey}.en`
-        : `${ch.translatableKey}.ar`;
-}
 
 // ============================================================================
-// Module Configuration
+// Scope
 // ============================================================================
 class SetModuleInfo {
     moduleType;
@@ -125,56 +84,45 @@ class SetModuleInfo {
         this.parentPath = parentPath;
     }
 }
+class ResetNotificationState {
+    static type = '[Notification] Reset State';
+}
 // ============================================================================
-// Data Loading Actions
+// Loading
 // ============================================================================
+/** Loads (or re-reads) the scope's events, keeping the current selection when it still exists. */
 class GetEvents {
     static type = '[Notification] Get Events';
 }
-class GetReceivers {
-    static type = '[Notification] Get Receivers';
-}
-class GetProperties {
-    isMultiLang;
-    static type = '[Notification] Get Properties';
-    constructor(isMultiLang) {
-        this.isMultiLang = isMultiLang;
-    }
-}
-// ============================================================================
-// Action Mode (Workflow)
-// ============================================================================
-class SetActionMode {
-    actionId;
-    static type = '[Notification] Set Action Mode';
-    constructor(actionId) {
-        this.actionId = actionId;
+class GetAuthoringContext {
+    eventId;
+    static type = '[Notification] Get Authoring Context';
+    constructor(eventId) {
+        this.eventId = eventId;
     }
 }
-class GetActionReceivers {
-    actionId;
-    static type = '[Notification] Get Action Receivers';
-    constructor(actionId) {
-        this.actionId = actionId;
+class GetDefaultRecipes {
+    eventId;
+    static type = '[Notification] Get Default Recipes';
+    constructor(eventId) {
+        this.eventId = eventId;
     }
 }
-class GetActionProperties {
-    actionId;
-    isMultiLang;
-    static type = '[Notification] Get Action Properties';
-    constructor(actionId, isMultiLang) {
-        this.actionId = actionId;
-        this.isMultiLang = isMultiLang;
+class GetPublications {
+    templateId;
+    static type = '[Notification] Get Publications';
+    constructor(templateId) {
+        this.templateId = templateId;
     }
 }
 // ============================================================================
-// Selection Actions
+// Selection
 // ============================================================================
 class SelectEvent {
-    eventName;
+    eventId;
     static type = '[Notification] Select Event';
-    constructor(eventName) {
-        this.eventName = eventName;
+    constructor(eventId) {
+        this.eventId = eventId;
     }
 }
 class SelectTemplate {
@@ -185,58 +133,426 @@ class SelectTemplate {
     }
 }
 // ============================================================================
-// Receiver CRUD
+// Template writes
 // ============================================================================
-class AddReceivers {
+class CreateTemplate {
+    eventId;
+    payload;
+    static type = '[Notification] Create Template';
+    constructor(eventId, payload) {
+        this.eventId = eventId;
+        this.payload = payload;
+    }
+}
+class SaveTemplate {
     templateId;
     payload;
-    static type = '[Notification] Add Receivers';
+    static type = '[Notification] Save Template';
     constructor(templateId, payload) {
         this.templateId = templateId;
         this.payload = payload;
     }
 }
+class DeleteTemplate {
+    templateId;
+    expectedRevision;
+    static type = '[Notification] Delete Template';
+    constructor(templateId, expectedRevision) {
+        this.templateId = templateId;
+        this.expectedRevision = expectedRevision;
+    }
+}
+class AddReceivers {
+    templateId;
+    expectedRevision;
+    receivers;
+    static type = '[Notification] Add Receivers';
+    constructor(templateId, expectedRevision, receivers) {
+        this.templateId = templateId;
+        this.expectedRevision = expectedRevision;
+        this.receivers = receivers;
+    }
+}
 class DeleteReceiver {
     receiverId;
+    expectedRevision;
     static type = '[Notification] Delete Receiver';
-    constructor(receiverId) {
+    constructor(receiverId, expectedRevision) {
         this.receiverId = receiverId;
+        this.expectedRevision = expectedRevision;
     }
 }
 // ============================================================================
-// Template CRUD
+// Lifecycle
 // ============================================================================
-class AddTemplate {
-    eventId;
-    payload;
-    static type = '[Notification] Add Template';
-    constructor(eventId, payload) {
-        this.eventId = eventId;
-        this.payload = payload;
+class PublishTemplate {
+    templateId;
+    expectedRevision;
+    reviews;
+    static type = '[Notification] Publish Template';
+    constructor(templateId, expectedRevision, reviews) {
+        this.templateId = templateId;
+        this.expectedRevision = expectedRevision;
+        this.reviews = reviews;
     }
 }
-class UpdateTemplate {
+class SetTemplateActivation {
     templateId;
-    payload;
-    static type = '[Notification] Update Template';
-    constructor(templateId, payload) {
+    expectedRevision;
+    enabled;
+    reviews;
+    static type = '[Notification] Set Template Activation';
+    constructor(templateId, expectedRevision, enabled, reviews) {
         this.templateId = templateId;
-        this.payload = payload;
+        this.expectedRevision = expectedRevision;
+        this.enabled = enabled;
+        this.reviews = reviews;
     }
 }
-class DeleteTemplate {
+class RestorePublication {
     templateId;
-    static type = '[Notification] Delete Template';
-    constructor(templateId) {
+    expectedRevision;
+    publicationRevision;
+    reviews;
+    static type = '[Notification] Restore Publication';
+    constructor(templateId, expectedRevision, publicationRevision, reviews) {
         this.templateId = templateId;
+        this.expectedRevision = expectedRevision;
+        this.publicationRevision = publicationRevision;
+        this.reviews = reviews;
     }
 }
 // ============================================================================
-// Reset State
+// Defaults
 // ============================================================================
-class ResetNotificationState {
-    static type = '[Notification] Reset State';
+class InitializeDefaults {
+    eventId;
+    static type = '[Notification] Initialize Defaults';
+    constructor(eventId) {
+        this.eventId = eventId;
+    }
+}
+class RestoreDefault {
+    eventId;
+    payload;
+    static type = '[Notification] Restore Default';
+    constructor(eventId, payload) {
+        this.eventId = eventId;
+        this.payload = payload;
+    }
+}
+
+/**
+ * Notification authoring endpoints. Every call is marked `noMessage`: the
+ * backend answers failures with a bare stable code (`NOTIFICATION_*`) as the
+ * message, so the host's message interceptor would toast that raw code. The
+ * editor translates the code itself (see `notification.errors.ts`).
+ */
+class NotificationTemplateApi {
+    http = inject(HttpClient);
+    baseUrl = 'notifications';
+    headers = new HttpHeaders({ noMessage: 'true' });
+    getEvents(scopePath) {
+        return this.get(`${scopePath}/events`);
+    }
+    getContext(eventId) {
+        return this.get(`/events/${eventId}/authoring-context`);
+    }
+    getDefaults(eventId) {
+        return this.get(`/events/${eventId}/default-recipes`);
+    }
+    initializeDefaults(eventId) {
+        return this.post(`/events/${eventId}/defaults`, null);
+    }
+    restoreDefault(eventId, payload) {
+        return this.post(`/events/${eventId}/defaults/restore`, payload);
+    }
+    preview(eventId, request) {
+        return this.post(`/events/${eventId}/preview`, request);
+    }
+    createTemplate(eventId, payload) {
+        return this.post(`/events/${eventId}`, payload);
+    }
+    saveTemplate(templateId, payload) {
+        return this.http
+            .put(this.url(`/templates/${templateId}`), payload, { headers: this.headers })
+            .pipe(map((response) => response.data));
+    }
+    addReceivers(templateId, expectedRevision, receivers) {
+        return this.post(`/templates/${templateId}`, {
+            expectedRevision,
+            receivers,
+        });
+    }
+    deleteReceiver(receiverId, expectedRevision) {
+        return this.delete(`/receivers/${receiverId}`, expectedRevision);
+    }
+    deleteTemplate(templateId, expectedRevision) {
+        return this.delete(`/templates/${templateId}`, expectedRevision);
+    }
+    getPublications(templateId) {
+        return this.get(`/templates/${templateId}/publications`);
+    }
+    publish(templateId, expectedRevision, reviews) {
+        return this.post(`/templates/${templateId}/publish`, {
+            expectedRevision,
+            ...reviews,
+        });
+    }
+    setActivation(templateId, expectedRevision, enabled, reviews) {
+        // Turning off needs no review; the flags are only sent when turning on.
+        const body = enabled
+            ? { expectedRevision, enabled, ...reviews }
+            : { expectedRevision, enabled };
+        return this.http
+            .put(this.url(`/templates/${templateId}/activation`), body, { headers: this.headers })
+            .pipe(map((response) => response.data));
+    }
+    restorePublication(templateId, expectedRevision, publicationRevision, reviews) {
+        return this.post(`/templates/${templateId}/restore`, {
+            expectedRevision,
+            publicationRevision,
+            ...reviews,
+        });
+    }
+    get(path) {
+        return this.http
+            .get(this.url(path), { headers: this.headers })
+            .pipe(map((response) => response.data));
+    }
+    post(path, body) {
+        return this.http
+            .post(this.url(path), body, { headers: this.headers })
+            .pipe(map((response) => response.data));
+    }
+    delete(path, expectedRevision) {
+        return this.http
+            .delete(this.url(path), {
+            headers: this.headers,
+            params: { expectedRevision },
+        })
+            .pipe(map((response) => response.data));
+    }
+    url(path) {
+        return `${this.baseUrl}${path}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationTemplateApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationTemplateApi, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationTemplateApi, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Reads the stable code out of a failed notification request.
+ *
+ * Domain failures arrive as `errors: { code, message, details }`. Command
+ * endpoints can wrap the domain code in `errors.details.code` under an outer
+ * validation code (e.g. `VAL_002`), so the nested code wins when present.
+ * Display text is never matched — only codes.
+ */
+function readNotificationFailure(error) {
+    const status = error instanceof HttpErrorResponse ? error.status : null;
+    const body = error instanceof HttpErrorResponse ? error.error : error;
+    const errors = body?.errors;
+    const details = errors?.details;
+    const nestedCode = details && typeof details === 'object' && !Array.isArray(details)
+        ? details.code
+        : undefined;
+    const code = typeof nestedCode === 'string'
+        ? nestedCode
+        : typeof errors?.code === 'string'
+            ? errors.code
+            : null;
+    return {
+        code,
+        status,
+        diagnostics: Array.isArray(details) ? toDiagnostics(details) : [],
+    };
+}
+function isRevisionConflict(failure) {
+    return (failure.status === 409 ||
+        failure.code === 'NOTIFICATION_REVISION_CONFLICT' ||
+        failure.code === 'EMAIL_REVISION_CONFLICT');
+}
+function toDiagnostics(values) {
+    return values.filter((value) => typeof value === 'object' &&
+        value !== null &&
+        typeof value.code === 'string');
+}
+
+function recipientKey(type, id) {
+    return `${type ?? ''}:${id ?? ''}`;
+}
+/**
+ * Flattens the recipient catalog into select-ready groups. A node is a
+ * subgroup only when its `items` is an array — leaves carry `items: null` —
+ * and subgroup names are kept as a prefix so two "Manager" roles from
+ * different levels stay distinguishable.
+ */
+function flattenRecipientCatalog(groups, lang) {
+    return groups
+        .map((group) => ({
+        groupName: group.groupName,
+        items: flattenNodes(group.items, lang),
+    }))
+        .filter((group) => group.items.length > 0);
+}
+function flattenNodes(nodes, lang, prefix) {
+    return (nodes ?? []).flatMap((node) => {
+        if (Array.isArray(node.items)) {
+            const label = node.subGroupName
+                ? prefix
+                    ? `${prefix} - ${node.subGroupName}`
+                    : node.subGroupName
+                : prefix;
+            return flattenNodes(node.items, lang, label);
+        }
+        if (!node.id || !node.type)
+            return [];
+        const name = (lang === 'ar' ? node.nameAr : node.nameEn) || node.name || node.id;
+        return [
+            {
+                key: recipientKey(node.type, node.id),
+                id: node.id,
+                type: node.type,
+                name: prefix ? `${prefix} - ${name}` : name,
+            },
+        ];
+    });
+}
+function templateStatus(template) {
+    if (template.publishedRevision == null)
+        return 'draft';
+    return template.isEnabled ? 'on' : 'off';
+}
+/** The retained publication that is live right now, if it is in the loaded history. */
+function currentPublication(template, publications) {
+    if (template.publishedRevision == null)
+        return null;
+    return (publications.find((publication) => publication.revision === template.publishedRevision) ?? null);
+}
+/**
+ * Whether the saved draft differs from what is published. Comparing
+ * `draftRevision` to `publishedRevision` is wrong (they count different
+ * things); the contract compares the draft against the `sourceDraftRevision`
+ * of the current publication. Null when that cannot be known yet.
+ */
+function hasUnpublishedChanges(template, publications) {
+    if (template.publishedRevision == null)
+        return null;
+    const publication = currentPublication(template, publications);
+    if (!publication)
+        return null;
+    return template.draftRevision !== publication.sourceDraftRevision;
+}
+/** The default slot that owns this template, if any (owned defaults need a language review). */
+function isDefaultOwned(template, defaults) {
+    return (defaults?.slots ?? []).some((slot) => slot.templateId === template.id);
+}
+/** Channels with a recipe but no slot at all — the only ones "Add defaults" may create. */
+function missingDefaultChannels(defaults) {
+    if (!defaults)
+        return [];
+    const slotted = new Set(defaults.slots.map((slot) => slot.channel));
+    return defaults.recipes
+        .map((recipe) => recipe.channel)
+        .filter((channel) => !slotted.has(channel));
+}
+function parseAppContent(value) {
+    if (!value)
+        return { en: '', ar: '' };
+    try {
+        const parsed = JSON.parse(value);
+        return {
+            en: typeof parsed?.en === 'string' ? parsed.en : '',
+            ar: typeof parsed?.ar === 'string' ? parsed.ar : '',
+        };
+    }
+    catch {
+        return { en: '', ar: '' };
+    }
+}
+/** Maps retained publication content onto the event preview request. */
+function publicationPreviewRequest(content) {
+    return contentPreviewRequest({
+        channel: content.channel,
+        subject: content.subject,
+        emailTemplate: content.emailContent,
+        smsTemplate: content.smsContent,
+        appTemplate: parseAppContent(content.appContent),
+    });
+}
+function templatePreviewRequest(template) {
+    return contentPreviewRequest(template);
+}
+function contentPreviewRequest(content) {
+    switch (content.channel) {
+        case 'Email':
+            return {
+                channel: 'Email',
+                subject: content.subject ?? '',
+                emailTemplate: content.emailTemplate ?? '',
+            };
+        case 'Sms':
+            return { channel: 'Sms', smsTemplate: content.smsTemplate ?? '' };
+        case 'App':
+            return {
+                channel: 'App',
+                appTemplate: {
+                    en: content.appTemplate?.en ?? '',
+                    ar: content.appTemplate?.ar ?? '',
+                },
+            };
+    }
+}
+const PREVIEW_TOKEN = /\{\{\s*([A-Za-z0-9_.]+)\s*\}\}/g;
+const MAX_PREVIEW_SAMPLES = 100;
+/** Sample for the record link: resolved by the server against its client base URL. */
+const SAMPLE_WEB_URL = '/';
+/**
+ * Readable sample values for a preview: every field the content uses shows as
+ * its own name in brackets (`[Item name]`) instead of the server's "-", and the
+ * record link resolves. Only keys in the event's catalog are sent — the server
+ * rejects any other sample key — and never more than the server's limit.
+ */
+function previewSamples(request, properties, lang) {
+    const catalog = new Map(properties
+        .flatMap((group) => group.properties)
+        .map((property) => [property.key.toLowerCase(), property]));
+    const text = [
+        request.emailTemplate,
+        request.smsTemplate,
+        request.appTemplate?.en,
+        request.appTemplate?.ar,
+    ]
+        .filter((value) => !!value)
+        .join(' ');
+    const samples = {};
+    for (const match of text.matchAll(PREVIEW_TOKEN)) {
+        if (Object.keys(samples).length >= MAX_PREVIEW_SAMPLES)
+            break;
+        const property = catalog.get(match[1].toLowerCase());
+        if (!property || property.key in samples)
+            continue;
+        if (property.key.toLowerCase() === 'weburl') {
+            samples[property.key] = SAMPLE_WEB_URL;
+            continue;
+        }
+        if (property.key.toLowerCase() === 'mobileuri')
+            continue;
+        const label = (lang === 'ar' ? property.nameAr : property.nameEn) || property.name;
+        samples[property.key] = `[${label}]`;
+    }
+    return samples;
+}
+function withPreviewSamples(request, properties, lang) {
+    const samples = previewSamples(request, properties, lang);
+    return Object.keys(samples).length > 0 ? { ...request, samples } : request;
 }
+/** The system principal that publishes generated App defaults. */
+const DEFAULTS_PUBLISHER = 'system:notification-defaults';
 
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -244,59 +560,51 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-// Default State
 const DEFAULT_STATE = {
-    // Module configuration
     moduleType: null,
     moduleId: null,
     parentModuleType: null,
     parentModuleId: null,
     parentPath: '',
-    // Action mode
-    isActionMode: false,
-    selectedActionId: null,
-    // Data collections
     events: [],
-    templates: [], // Flattened templates
-    actions: [],
-    receivers: [],
-    receiverGroups: [],
-    propertyGroups: [],
-    // Selection state
-    selectedEventName: null,
+    templates: [],
+    context: null,
+    defaults: null,
+    publications: [],
+    publicationsTemplateId: null,
+    selectedEventId: null,
     selectedTemplateId: null,
-    // Loading state (from LoadingStateShape)
     loadingActive: [],
     errors: {},
 };
-// State Definition
-let NotificationState = class NotificationState extends CrudStateBase {
-    http = inject(HttpClient);
-    baseUrl = 'notifications';
-    // Selectors - Individual selectors for fine-grained reactivity
-    static getState(state) {
-        return state;
-    }
+let NotificationState = class NotificationState {
+    api = inject(NotificationTemplateApi);
+    // ==========================================================================
+    // Slice selectors
+    // ==========================================================================
     static getEvents(state) {
         return state.events;
     }
     static getTemplates(state) {
         return state.templates;
     }
-    static getReceivers(state) {
-        return state.receivers;
+    static getSelectedEventId(state) {
+        return state.selectedEventId;
     }
-    static getReceiverGroups(state) {
-        return state.receiverGroups;
+    static getSelectedTemplateId(state) {
+        return state.selectedTemplateId;
     }
-    static getPropertyGroups(state) {
-        return state.propertyGroups;
+    static getContext(state) {
+        return state.context;
     }
-    static getSelectedEventName(state) {
-        return state.selectedEventName;
+    static getDefaults(state) {
+        return state.defaults;
     }
-    static getSelectedTemplateId(state) {
-        return state.selectedTemplateId;
+    static getPublicationsSlice(state) {
+        return {
+            templateId: state.publicationsTemplateId,
+            items: state.publications,
+        };
     }
     static getLoadingActive(state) {
         return state.loadingActive;
@@ -304,119 +612,26 @@ let NotificationState = class NotificationState extends CrudStateBase {
     static getErrors(state) {
         return state.errors;
     }
+    // ==========================================================================
     // Derived selectors
-    static getSelectedEvent(events, selectedEventName) {
-        return events.find((e) => e.eventName === selectedEventName) ?? null;
+    // ==========================================================================
+    static getSelectedEvent(events, selectedEventId) {
+        return events.find((event) => event.id === selectedEventId) ?? null;
     }
-    static getEventTemplates(templates, selectedEvent) {
-        if (!selectedEvent)
+    static getEventTemplates(templates, selectedEventId) {
+        if (selectedEventId == null)
             return [];
-        return templates.filter((t) => t.eventId === selectedEvent.id);
+        return templates.filter((template) => template.eventId === selectedEventId);
     }
     static getSelectedTemplate(templates, selectedTemplateId) {
-        return templates.find((t) => t.id === selectedTemplateId) ?? null;
-    }
-    static getAvailableReceivers(receivers, selectedTemplate) {
-        if (!selectedTemplate)
-            return receivers;
-        const templateReceivers = selectedTemplate.receivers ?? [];
-        const assignedIds = new Set(templateReceivers.map((r) => r.identifier));
-        return receivers.filter((r) => !assignedIds.has(String(r.id)));
-    }
-    static getAvailableReceiverGroups(receiverGroups, selectedTemplate) {
-        if (!selectedTemplate)
-            return receiverGroups;
-        const assignedIds = new Set((selectedTemplate.receivers ?? []).map((r) => r.identifier));
-        return receiverGroups
-            .map((group) => ({
-            ...group,
-            items: group.items.filter((item) => !assignedIds.has(String(item.id))),
-        }))
-            .filter((group) => group.items.length > 0);
-    }
-    // Helper Methods
-    /** API returns events with nested templates - we flatten for state */
-    flattenEventsResponse(eventsWithTemplates) {
-        const events = [];
-        const templates = [];
-        for (const event of eventsWithTemplates) {
-            const { templates: eventTemplates, ...eventData } = event;
-            events.push(eventData);
-            templates.push(...eventTemplates.map((t) => ({ ...t, eventId: event.id })));
-        }
-        return { events, templates };
-    }
-    normalizeReceiverGroups(groups) {
-        return groups
-            .map((group) => ({
-            groupName: group.groupName,
-            items: this.flattenReceiverItems(group.items),
-        }))
-            .filter((group) => group.items.length > 0);
-    }
-    flattenReceiverItems(items, parentLabel) {
-        if (!Array.isArray(items)) {
-            return [];
-        }
-        return items.flatMap((item) => {
-            const subGroupItems = item.items;
-            if (Array.isArray(subGroupItems)) {
-                const subGroupName = item.subGroupName;
-                const nextLabel = subGroupName
-                    ? parentLabel
-                        ? `${parentLabel} - ${subGroupName}`
-                        : subGroupName
-                    : parentLabel;
-                return this.flattenReceiverItems(subGroupItems, nextLabel);
-            }
-            const receiver = item;
-            if (receiver.id == null || !receiver.name) {
-                return [];
-            }
-            return [
-                {
-                    ...receiver,
-                    name: parentLabel
-                        ? `${parentLabel} - ${receiver.name}`
-                        : receiver.name,
-                },
-            ];
-        });
-    }
-    hasOwnField(value, field) {
-        return Object.prototype.hasOwnProperty.call(value, field);
+        return (templates.find((template) => template.id === selectedTemplateId) ?? null);
     }
-    mergeUpdatedTemplate(existingTemplate, updatedTemplate) {
-        const mergedTemplate = {
-            ...existingTemplate,
-            name: updatedTemplate.name ?? existingTemplate.name,
-        };
-        if (this.hasOwnField(updatedTemplate, 'emailTemplate')) {
-            mergedTemplate.emailTemplate = updatedTemplate.emailTemplate ?? '';
-        }
-        if (this.hasOwnField(updatedTemplate, 'emailContentTranslatable') &&
-            updatedTemplate.emailContentTranslatable) {
-            mergedTemplate.emailContentTranslatable = {
-                ...existingTemplate.emailContentTranslatable,
-                ...updatedTemplate.emailContentTranslatable,
-            };
-        }
-        if (this.hasOwnField(updatedTemplate, 'smsTemplate')) {
-            mergedTemplate.smsTemplate = updatedTemplate.smsTemplate ?? '';
-        }
-        if (this.hasOwnField(updatedTemplate, 'appTemplate') &&
-            updatedTemplate.appTemplate) {
-            mergedTemplate.appTemplate = {
-                ...existingTemplate.appTemplate,
-                ...updatedTemplate.appTemplate,
-            };
-        }
-        if (this.hasOwnField(updatedTemplate, 'conditionFormula')) {
-            mergedTemplate.conditionFormula = updatedTemplate.conditionFormula;
-        }
-        return mergedTemplate;
+    static getPublications(slice, selectedTemplateId) {
+        return slice.templateId === selectedTemplateId ? slice.items : [];
     }
-    // Module Configuration
+    // ==========================================================================
+    // Scope
+    // ==========================================================================
     setModuleInfo(ctx, action) {
         let parentPath = '';
         if (action.parentModuleType && action.parentModuleId) {
@@ -431,218 +646,273 @@ let NotificationState = class NotificationState extends CrudStateBase {
             parentModuleType: action.parentModuleType ?? null,
             parentModuleId: action.parentModuleId ?? null,
             parentPath,
-            isActionMode: action.moduleType === 'workflow',
         });
     }
     resetState(ctx) {
         ctx.setState(DEFAULT_STATE);
     }
-    // Data Loading Actions (Normal Mode)
+    // ==========================================================================
+    // Loading
+    // ==========================================================================
     getEvents(ctx) {
-        const { moduleType, moduleId, parentPath } = ctx.getState();
-        const req$ = this.http.get(`${this.baseUrl}${parentPath}/${moduleType}/${moduleId}/events`);
-        return this.load(ctx, {
+        const scope = scopePathOf(ctx.getState());
+        if (!scope)
+            return;
+        const previousEventId = ctx.getState().selectedEventId;
+        return handleApiRequest({
+            ctx,
             key: NotificationActionKey.GetEvents,
-            request$: req$,
-            updateState: (_state, data) => {
-                const { events, templates } = this.flattenEventsResponse(data ?? []);
-                const firstEvent = events[0];
-                const firstTemplate = templates.find((t) => t.eventId === firstEvent?.id);
-                return {
-                    events,
-                    templates,
-                    selectedEventName: firstEvent?.eventName ?? null,
-                    selectedTemplateId: firstTemplate?.id ?? null,
-                };
+            request$: this.api.getEvents(scope),
+            onSuccess: (data, state) => {
+                // A late answer for a scope the host already left must not land.
+                if (scopePathOf(state) !== scope)
+                    return;
+                const { events, templates } = flattenEvents(data ?? []);
+                const selectedEventId = events.some((event) => event.id === state.selectedEventId)
+                    ? state.selectedEventId
+                    : (events[0]?.id ?? null);
+                const eventTemplates = templates.filter((template) => template.eventId === selectedEventId);
+                const selectedTemplateId = eventTemplates.some((template) => template.id === state.selectedTemplateId)
+                    ? state.selectedTemplateId
+                    : (eventTemplates[0]?.id ?? null);
+                return { events, templates, selectedEventId, selectedTemplateId };
             },
+        }).pipe(tap(() => {
+            const state = ctx.getState();
+            if (scopePathOf(state) !== scope)
+                return;
+            const eventId = state.selectedEventId;
+            if (eventId != null &&
+                (eventId !== previousEventId || state.context?.eventId !== eventId)) {
+                ctx.patchState({ context: null, defaults: null });
+                ctx.dispatch([
+                    new GetAuthoringContext(eventId),
+                    new GetDefaultRecipes(eventId),
+                ]);
+            }
+            if (state.selectedTemplateId != null) {
+                ctx.dispatch(new GetPublications(state.selectedTemplateId));
+            }
+        }));
+    }
+    getAuthoringContext(ctx, action) {
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.GetContext,
+            request$: this.api.getContext(action.eventId),
+            onSuccess: (context, state) => state.selectedEventId === action.eventId ? { context } : undefined,
         });
     }
-    getReceivers(ctx) {
-        const { parentPath, moduleType, moduleId } = ctx.getState();
-        const req$ = this.http.get(`${this.baseUrl}${parentPath}/${moduleType}/${moduleId}/receivers`);
+    getDefaultRecipes(ctx, action) {
         return handleApiRequest({
             ctx,
-            key: NotificationActionKey.GetReceivers,
-            request$: req$,
-            onSuccess: (response) => {
-                const receiverGroups = this.normalizeReceiverGroups(response.data ?? []);
-                return {
-                    receiverGroups,
-                    receivers: receiverGroups.flatMap((group) => group.items),
-                };
-            },
+            key: NotificationActionKey.GetDefaults,
+            request$: this.api.getDefaults(action.eventId),
+            onSuccess: (defaults, state) => state.selectedEventId === action.eventId ? { defaults } : undefined,
         });
     }
-    getProperties(ctx, action) {
-        const { moduleType, moduleId, parentPath } = ctx.getState();
-        const url = `${this.baseUrl}${parentPath}/${moduleType}/${moduleId}/properties?IsMultiLanguageEnabled=${action.isMultiLang ? 'true' : 'false'}`;
-        const req$ = this.http.get(url);
+    getPublications(ctx, action) {
+        const template = ctx
+            .getState()
+            .templates.find((item) => item.id === action.templateId);
+        // A template that was never published has no history to read.
+        if (template?.publishedRevision == null) {
+            ctx.patchState({
+                publications: [],
+                publicationsTemplateId: action.templateId,
+            });
+            return;
+        }
         return handleApiRequest({
             ctx,
-            key: NotificationActionKey.GetProperties,
-            request$: req$,
-            onSuccess: (response) => ({
-                propertyGroups: response.data?.map((group) => ({
-                    ...group,
-                    icon: 'custom.list-cards',
-                })) ?? [],
-            }),
+            key: NotificationActionKey.GetPublications,
+            request$: this.api.getPublications(action.templateId),
+            onSuccess: (publications, state) => state.selectedTemplateId === action.templateId
+                ? { publications, publicationsTemplateId: action.templateId }
+                : undefined,
         });
     }
-    // Action Mode (Workflow)
-    setActionMode(ctx, action) {
+    // ==========================================================================
+    // Selection
+    // ==========================================================================
+    selectEvent(ctx, action) {
+        const state = ctx.getState();
+        if (state.selectedEventId === action.eventId)
+            return;
+        const firstTemplate = state.templates.find((template) => template.eventId === action.eventId);
         ctx.patchState({
-            selectedActionId: action.actionId,
+            selectedEventId: action.eventId,
+            selectedTemplateId: firstTemplate?.id ?? null,
+            context: null,
+            defaults: null,
+            publications: [],
+            publicationsTemplateId: null,
         });
+        const loads = [
+            new GetAuthoringContext(action.eventId),
+            new GetDefaultRecipes(action.eventId),
+        ];
+        if (firstTemplate)
+            loads.push(new GetPublications(firstTemplate.id));
+        return ctx.dispatch(loads);
     }
-    getActionReceivers(ctx, action) {
-        const req$ = this.http.get(`${this.baseUrl}/action/${action.actionId}/receivers`);
-        return handleApiRequest({
-            ctx,
-            key: NotificationActionKey.GetReceivers,
-            request$: req$,
-            onSuccess: (response) => {
-                const receiverGroups = this.normalizeReceiverGroups(response.data ?? []);
-                return {
-                    receiverGroups,
-                    receivers: receiverGroups.flatMap((group) => group.items),
-                };
-            },
+    selectTemplate(ctx, action) {
+        if (ctx.getState().selectedTemplateId === action.templateId)
+            return;
+        ctx.patchState({
+            selectedTemplateId: action.templateId,
+            publications: [],
+            publicationsTemplateId: null,
         });
+        return ctx.dispatch(new GetPublications(action.templateId));
     }
-    getActionProperties(ctx, action) {
-        const url = `${this.baseUrl}/action/${action.actionId}/properties?IsMultiLanguageEnabled=${action.isMultiLang ? 'true' : 'false'}`;
-        const req$ = this.http.get(url);
+    // ==========================================================================
+    // Template writes — every one returns the whole template DTO, which becomes
+    // the new server baseline (its `revision` is the next expectedRevision).
+    // ==========================================================================
+    createTemplate(ctx, action) {
         return handleApiRequest({
             ctx,
-            key: NotificationActionKey.GetProperties,
-            request$: req$,
-            onSuccess: (response) => ({
-                propertyGroups: response.data ?? [],
+            key: NotificationActionKey.CreateTemplate,
+            request$: this.api.createTemplate(action.eventId, action.payload),
+            onSuccess: (template, state) => ({
+                templates: upsertTemplate(state.templates, template),
+                ...(state.selectedEventId === action.eventId
+                    ? {
+                        selectedTemplateId: template.id,
+                        publications: [],
+                        publicationsTemplateId: template.id,
+                    }
+                    : {}),
             }),
         });
     }
-    // Selection Actions
-    selectEvent(ctx, action) {
-        const state = ctx.getState();
-        const event = state.events.find((e) => e.eventName === action.eventName);
-        const eventTemplates = state.templates.filter((t) => t.eventId === event?.id);
-        ctx.patchState({
-            selectedEventName: action.eventName,
-            selectedTemplateId: eventTemplates[0]?.id ?? null,
+    saveTemplate(ctx, action) {
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.SaveTemplate,
+            request$: this.api.saveTemplate(action.templateId, action.payload),
+            onSuccess: (template, state) => ({
+                templates: upsertTemplate(state.templates, template),
+            }),
         });
     }
-    selectTemplate(ctx, action) {
-        ctx.patchState({ selectedTemplateId: action.templateId });
-    }
-    // Receiver CRUD
     addReceivers(ctx, action) {
-        const req$ = this.http.post(`${this.baseUrl}/templates/${action.templateId}`, action.payload);
         return handleApiRequest({
             ctx,
             key: NotificationActionKey.AddReceivers,
-            request$: req$,
-            onSuccess: (response, state) => {
-                const newReceivers = response.data ?? [];
-                const templates = this.adapter.updateOne(state.templates, action.templateId, {
-                    receivers: [
-                        ...(state.templates.find((t) => t.id === action.templateId)
-                            ?.receivers ?? []),
-                        ...newReceivers,
-                    ],
-                }, 'id');
-                return { templates };
-            },
+            request$: this.api.addReceivers(action.templateId, action.expectedRevision, action.receivers),
+            onSuccess: (template, state) => ({
+                templates: upsertTemplate(state.templates, template),
+            }),
         });
     }
     deleteReceiver(ctx, action) {
-        const state = ctx.getState();
-        const template = this.getSelectedTemplate(state);
-        if (!template) {
-            return;
-        }
-        const req$ = this.http.delete(`${this.baseUrl}/receivers/${action.receiverId}`);
         return handleApiRequest({
             ctx,
             key: NotificationActionKey.DeleteReceiver,
-            request$: req$,
-            onSuccess: (_, currentState) => {
-                const templates = this.adapter.updateOne(currentState.templates, template.id, {
-                    receivers: template.receivers.filter((r) => r.id !== action.receiverId),
-                }, 'id');
-                return { templates };
-            },
+            request$: this.api.deleteReceiver(action.receiverId, action.expectedRevision),
+            onSuccess: (template, state) => ({
+                templates: upsertTemplate(state.templates, template),
+            }),
         });
     }
-    // Template CRUD
-    addTemplate(ctx, action) {
-        const req$ = this.http.post(`${this.baseUrl}/events/${action.eventId}`, action.payload);
+    deleteTemplate(ctx, action) {
+        const eventId = ctx
+            .getState()
+            .templates.find((template) => template.id === action.templateId)?.eventId;
         return handleApiRequest({
             ctx,
-            key: NotificationActionKey.AddTemplate,
-            request$: req$,
-            onSuccess: (response, state) => {
-                const newTemplate = response.data;
-                if (!newTemplate)
-                    return {};
+            key: NotificationActionKey.DeleteTemplate,
+            request$: this.api.deleteTemplate(action.templateId, action.expectedRevision),
+            onSuccess: (_, state) => {
+                const templates = state.templates.filter((template) => template.id !== action.templateId);
+                const next = templates.find((template) => template.eventId === state.selectedEventId);
                 return {
-                    templates: this.adapter.addOne(state.templates, {
-                        ...newTemplate,
-                        eventId: action.eventId,
-                    }),
-                    selectedTemplateId: newTemplate.id,
+                    templates,
+                    selectedTemplateId: state.selectedTemplateId === action.templateId
+                        ? (next?.id ?? null)
+                        : state.selectedTemplateId,
+                    publications: [],
+                    publicationsTemplateId: null,
                 };
             },
-        });
-    }
-    updateTemplate(ctx, action) {
-        const req$ = this.http.put(`${this.baseUrl}/templates/${action.templateId}`, action.payload, {
-            headers: new HttpHeaders({
-                'Content-Type': 'application/json',
+        }).pipe(tap(() => {
+            // Deleting a default leaves its slot behind as "intentionally removed".
+            if (eventId != null)
+                ctx.dispatch(new GetDefaultRecipes(eventId));
+            const selected = ctx.getState().selectedTemplateId;
+            if (selected != null)
+                ctx.dispatch(new GetPublications(selected));
+        }));
+    }
+    // ==========================================================================
+    // Lifecycle
+    // ==========================================================================
+    publishTemplate(ctx, action) {
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.PublishTemplate,
+            request$: this.api.publish(action.templateId, action.expectedRevision, action.reviews),
+            onSuccess: (template, state) => ({
+                templates: upsertTemplate(state.templates, template),
             }),
-        });
+        }).pipe(tap(() => ctx.dispatch(new GetPublications(action.templateId))));
+    }
+    setTemplateActivation(ctx, action) {
         return handleApiRequest({
             ctx,
-            key: NotificationActionKey.UpdateTemplate,
-            request$: req$,
-            onSuccess: (response, state) => {
-                const updatedTemplate = response.data;
-                if (!updatedTemplate)
-                    return {};
-                // Preserve existing fields that API may not return or shouldn't change
-                const existingTemplate = state.templates.find((t) => t.id === action.templateId);
-                if (!existingTemplate)
-                    return {};
-                // Only update name and content fields, preserve channel/eventId/receivers
-                const templates = this.adapter.upsertOne(state.templates, this.mergeUpdatedTemplate(existingTemplate, updatedTemplate), 'id');
-                return { templates };
-            },
+            key: NotificationActionKey.SetActivation,
+            request$: this.api.setActivation(action.templateId, action.expectedRevision, action.enabled, action.reviews),
+            onSuccess: (template, state) => ({
+                templates: upsertTemplate(state.templates, template),
+            }),
         });
     }
-    deleteTemplate(ctx, action) {
-        const req$ = this.http.delete(`${this.baseUrl}/templates/${action.templateId}`);
+    restorePublication(ctx, action) {
         return handleApiRequest({
             ctx,
-            key: NotificationActionKey.DeleteTemplate,
-            request$: req$,
-            onSuccess: (_, state) => {
-                const templates = this.adapter.removeOne(state.templates, action.templateId, 'id');
-                // Select first template of current event after deletion
-                const currentEvent = state.events.find((e) => e.eventName === state.selectedEventName);
-                const eventTemplates = templates.filter((t) => t.eventId === currentEvent?.id);
-                const systemTemplate = eventTemplates.find((t) => t.isSystem);
-                return {
-                    templates,
-                    selectedTemplateId: systemTemplate?.id ?? eventTemplates[0]?.id ?? null,
-                };
-            },
-        });
+            key: NotificationActionKey.RestorePublication,
+            request$: this.api.restorePublication(action.templateId, action.expectedRevision, action.publicationRevision, action.reviews),
+            onSuccess: (template, state) => ({
+                templates: upsertTemplate(state.templates, template),
+            }),
+        }).pipe(tap(() => ctx.dispatch(new GetPublications(action.templateId))));
     }
-    // Private Helpers
-    getSelectedTemplate(state) {
-        return (state.templates.find((t) => t.id === state.selectedTemplateId) ?? null);
+    // ==========================================================================
+    // Defaults
+    // ==========================================================================
+    initializeDefaults(ctx, action) {
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.InitializeDefaults,
+            request$: this.api.initializeDefaults(action.eventId),
+            onSuccess: (result, state) => state.selectedEventId === action.eventId
+                ? { defaults: result.defaults }
+                : undefined,
+        }).pipe(
+        // `createdTemplates` omits a template whose audit projection failed even
+        // though it was committed, so the event list is re-read instead.
+        tap(() => ctx.dispatch(new GetEvents())));
+    }
+    restoreDefault(ctx, action) {
+        return handleApiRequest({
+            ctx,
+            key: NotificationActionKey.RestoreDefault,
+            request$: this.api.restoreDefault(action.eventId, action.payload),
+            onSuccess: (template, state) => ({
+                templates: upsertTemplate(state.templates, template),
+                ...(state.selectedEventId === action.eventId
+                    ? {
+                        selectedTemplateId: template.id,
+                        publications: [],
+                        publicationsTemplateId: template.id,
+                    }
+                    : {}),
+            }),
+        }).pipe(tap(() => ctx.dispatch(new GetDefaultRecipes(action.eventId))));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationState });
 };
 __decorate([
@@ -652,47 +922,53 @@ __decorate([
     Action(ResetNotificationState)
 ], NotificationState.prototype, "resetState", null);
 __decorate([
-    Action(GetEvents)
+    Action(GetEvents, { cancelUncompleted: true })
 ], NotificationState.prototype, "getEvents", null);
 __decorate([
-    Action(GetReceivers)
-], NotificationState.prototype, "getReceivers", null);
+    Action(GetAuthoringContext, { cancelUncompleted: true })
+], NotificationState.prototype, "getAuthoringContext", null);
 __decorate([
-    Action(GetProperties)
-], NotificationState.prototype, "getProperties", null);
+    Action(GetDefaultRecipes, { cancelUncompleted: true })
+], NotificationState.prototype, "getDefaultRecipes", null);
 __decorate([
-    Action(SetActionMode)
-], NotificationState.prototype, "setActionMode", null);
-__decorate([
-    Action(GetActionReceivers)
-], NotificationState.prototype, "getActionReceivers", null);
-__decorate([
-    Action(GetActionProperties)
-], NotificationState.prototype, "getActionProperties", null);
+    Action(GetPublications, { cancelUncompleted: true })
+], NotificationState.prototype, "getPublications", null);
 __decorate([
     Action(SelectEvent)
 ], NotificationState.prototype, "selectEvent", null);
 __decorate([
     Action(SelectTemplate)
 ], NotificationState.prototype, "selectTemplate", null);
+__decorate([
+    Action(CreateTemplate)
+], NotificationState.prototype, "createTemplate", null);
+__decorate([
+    Action(SaveTemplate)
+], NotificationState.prototype, "saveTemplate", null);
 __decorate([
     Action(AddReceivers)
 ], NotificationState.prototype, "addReceivers", null);
 __decorate([
     Action(DeleteReceiver)
 ], NotificationState.prototype, "deleteReceiver", null);
-__decorate([
-    Action(AddTemplate)
-], NotificationState.prototype, "addTemplate", null);
-__decorate([
-    Action(UpdateTemplate)
-], NotificationState.prototype, "updateTemplate", null);
 __decorate([
     Action(DeleteTemplate)
 ], NotificationState.prototype, "deleteTemplate", null);
 __decorate([
-    Selector()
-], NotificationState, "getState", null);
+    Action(PublishTemplate)
+], NotificationState.prototype, "publishTemplate", null);
+__decorate([
+    Action(SetTemplateActivation)
+], NotificationState.prototype, "setTemplateActivation", null);
+__decorate([
+    Action(RestorePublication)
+], NotificationState.prototype, "restorePublication", null);
+__decorate([
+    Action(InitializeDefaults)
+], NotificationState.prototype, "initializeDefaults", null);
+__decorate([
+    Action(RestoreDefault)
+], NotificationState.prototype, "restoreDefault", null);
 __decorate([
     Selector()
 ], NotificationState, "getEvents", null);
@@ -701,19 +977,19 @@ __decorate([
 ], NotificationState, "getTemplates", null);
 __decorate([
     Selector()
-], NotificationState, "getReceivers", null);
+], NotificationState, "getSelectedEventId", null);
 __decorate([
     Selector()
-], NotificationState, "getReceiverGroups", null);
+], NotificationState, "getSelectedTemplateId", null);
 __decorate([
     Selector()
-], NotificationState, "getPropertyGroups", null);
+], NotificationState, "getContext", null);
 __decorate([
     Selector()
-], NotificationState, "getSelectedEventName", null);
+], NotificationState, "getDefaults", null);
 __decorate([
     Selector()
-], NotificationState, "getSelectedTemplateId", null);
+], NotificationState, "getPublicationsSlice", null);
 __decorate([
     Selector()
 ], NotificationState, "getLoadingActive", null);
@@ -721,15 +997,12 @@ __decorate([
     Selector()
 ], NotificationState, "getErrors", null);
 __decorate([
-    Selector([
-        NotificationState.getEvents,
-        NotificationState.getSelectedEventName,
-    ])
+    Selector([NotificationState.getEvents, NotificationState.getSelectedEventId])
 ], NotificationState, "getSelectedEvent", null);
 __decorate([
     Selector([
         NotificationState.getTemplates,
-        NotificationState.getSelectedEvent,
+        NotificationState.getSelectedEventId,
     ])
 ], NotificationState, "getEventTemplates", null);
 __decorate([
@@ -740,16 +1013,10 @@ __decorate([
 ], NotificationState, "getSelectedTemplate", null);
 __decorate([
     Selector([
-        NotificationState.getReceivers,
-        NotificationState.getSelectedTemplate,
-    ])
-], NotificationState, "getAvailableReceivers", null);
-__decorate([
-    Selector([
-        NotificationState.getReceiverGroups,
-        NotificationState.getSelectedTemplate,
+        NotificationState.getPublicationsSlice,
+        NotificationState.getSelectedTemplateId,
     ])
-], NotificationState, "getAvailableReceiverGroups", null);
+], NotificationState, "getPublications", null);
 NotificationState = __decorate([
     State({
         name: 'notification',
@@ -758,48 +1025,71 @@ NotificationState = __decorate([
 ], NotificationState);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationState, decorators: [{
             type: Injectable
-        }], propDecorators: { setModuleInfo: [], resetState: [], getEvents: [], getReceivers: [], getProperties: [], setActionMode: [], getActionReceivers: [], getActionProperties: [], selectEvent: [], selectTemplate: [], addReceivers: [], deleteReceiver: [], addTemplate: [], updateTemplate: [], deleteTemplate: [] } });
+        }], propDecorators: { setModuleInfo: [], resetState: [], getEvents: [], getAuthoringContext: [], getDefaultRecipes: [], getPublications: [], selectEvent: [], selectTemplate: [], createTemplate: [], saveTemplate: [], addReceivers: [], deleteReceiver: [], deleteTemplate: [], publishTemplate: [], setTemplateActivation: [], restorePublication: [], initializeDefaults: [], restoreDefault: [] } });
+function scopePathOf(state) {
+    if (!state.moduleType || state.moduleId == null || state.moduleId === '') {
+        return null;
+    }
+    return `${state.parentPath}/${state.moduleType}/${state.moduleId}`;
+}
+function flattenEvents(data) {
+    const events = [];
+    const templates = [];
+    for (const { templates: eventTemplates, ...event } of data) {
+        events.push(event);
+        templates.push(...(eventTemplates ?? []).map((template) => ({
+            ...template,
+            eventId: event.id,
+        })));
+    }
+    return { events, templates };
+}
+function upsertTemplate(templates, template) {
+    const index = templates.findIndex((item) => item.id === template.id);
+    if (index === -1)
+        return [...templates, template];
+    const next = [...templates];
+    next[index] = template;
+    return next;
+}
 
 class NotificationFacade {
     store = inject(Store);
-    // ============================================================================
-    // Data Selectors - Memoized by NGXS (fine-grained reactivity)
-    // ============================================================================
+    api = inject(NotificationTemplateApi);
+    // ==========================================================================
+    // Data
+    // ==========================================================================
     events = select(NotificationState.getEvents);
+    /** Templates of the selected event. */
     templates = select(NotificationState.getEventTemplates);
-    receivers = select(NotificationState.getReceivers);
-    receiverGroups = select(NotificationState.getReceiverGroups);
-    propertyGroups = select(NotificationState.getPropertyGroups);
-    // Selection selectors
-    selectedEventName = select(NotificationState.getSelectedEventName);
+    selectedEventId = select(NotificationState.getSelectedEventId);
     selectedTemplateId = select(NotificationState.getSelectedTemplateId);
     selectedEvent = select(NotificationState.getSelectedEvent);
     selectedTemplate = select(NotificationState.getSelectedTemplate);
-    availableReceivers = select(NotificationState.getAvailableReceivers);
-    availableReceiverGroups = select(NotificationState.getAvailableReceiverGroups);
-    // ============================================================================
-    // Loading/Error Slices - Memoized by NGXS
-    // ============================================================================
+    context = select(NotificationState.getContext);
+    defaults = select(NotificationState.getDefaults);
+    publications = select(NotificationState.getPublications);
+    // ==========================================================================
+    // Loading / errors
+    // ==========================================================================
     loadingActive = select(NotificationState.getLoadingActive);
     errors = select(NotificationState.getErrors);
-    // ============================================================================
-    // Loading Signals - Computed from slice (minimal reactivity)
-    // ============================================================================
     isLoadingEvents = computed(() => this.loadingActive().includes(NotificationActionKey.GetEvents), ...(ngDevMode ? [{ debugName: "isLoadingEvents" }] : /* istanbul ignore next */ []));
-    isLoadingReceivers = computed(() => this.loadingActive().includes(NotificationActionKey.GetReceivers), ...(ngDevMode ? [{ debugName: "isLoadingReceivers" }] : /* istanbul ignore next */ []));
-    isLoadingProperties = computed(() => this.loadingActive().includes(NotificationActionKey.GetProperties), ...(ngDevMode ? [{ debugName: "isLoadingProperties" }] : /* istanbul ignore next */ []));
-    isAddingReceivers = computed(() => this.loadingActive().includes(NotificationActionKey.AddReceivers), ...(ngDevMode ? [{ debugName: "isAddingReceivers" }] : /* istanbul ignore next */ []));
-    isDeletingReceiver = computed(() => this.loadingActive().includes(NotificationActionKey.DeleteReceiver), ...(ngDevMode ? [{ debugName: "isDeletingReceiver" }] : /* istanbul ignore next */ []));
-    isAddingTemplate = computed(() => this.loadingActive().includes(NotificationActionKey.AddTemplate), ...(ngDevMode ? [{ debugName: "isAddingTemplate" }] : /* istanbul ignore next */ []));
-    isUpdatingTemplate = computed(() => this.loadingActive().includes(NotificationActionKey.UpdateTemplate), ...(ngDevMode ? [{ debugName: "isUpdatingTemplate" }] : /* istanbul ignore next */ []));
-    isDeletingTemplate = computed(() => this.loadingActive().includes(NotificationActionKey.DeleteTemplate), ...(ngDevMode ? [{ debugName: "isDeletingTemplate" }] : /* istanbul ignore next */ []));
-    // ============================================================================
-    // Error Signals - Computed from slice (minimal reactivity)
-    // ============================================================================
+    isLoadingContext = computed(() => this.loadingActive().includes(NotificationActionKey.GetContext), ...(ngDevMode ? [{ debugName: "isLoadingContext" }] : /* istanbul ignore next */ []));
+    isLoadingDefaults = computed(() => this.loadingActive().includes(NotificationActionKey.GetDefaults), ...(ngDevMode ? [{ debugName: "isLoadingDefaults" }] : /* istanbul ignore next */ []));
+    isLoadingPublications = computed(() => this.loadingActive().includes(NotificationActionKey.GetPublications), ...(ngDevMode ? [{ debugName: "isLoadingPublications" }] : /* istanbul ignore next */ []));
+    /** True while any write is in flight — every write control disables on it. */
+    isMutating = computed(() => this.loadingActive().some((key) => NOTIFICATION_MUTATION_KEYS.includes(key)), ...(ngDevMode ? [{ debugName: "isMutating" }] : /* istanbul ignore next */ []));
     eventsError = computed(() => this.errors()[NotificationActionKey.GetEvents] ?? null, ...(ngDevMode ? [{ debugName: "eventsError" }] : /* istanbul ignore next */ []));
-    receiversError = computed(() => this.errors()[NotificationActionKey.GetReceivers] ?? null, ...(ngDevMode ? [{ debugName: "receiversError" }] : /* istanbul ignore next */ []));
-    propertiesError = computed(() => this.errors()[NotificationActionKey.GetProperties] ?? null, ...(ngDevMode ? [{ debugName: "propertiesError" }] : /* istanbul ignore next */ []));
-    // Action Dispatchers - Configuration
+    contextError = computed(() => this.errors()[NotificationActionKey.GetContext] ?? null, ...(ngDevMode ? [{ debugName: "contextError" }] : /* istanbul ignore next */ []));
+    defaultsError = computed(() => this.errors()[NotificationActionKey.GetDefaults] ?? null, ...(ngDevMode ? [{ debugName: "defaultsError" }] : /* istanbul ignore next */ []));
+    /** Accepts the enum or its string value, so templates can name the key. */
+    isLoading(key) {
+        return this.loadingActive().includes(key);
+    }
+    // ==========================================================================
+    // Scope
+    // ==========================================================================
     /**
      * Scopes this (shared, singleton) state to a module/event context.
      *
@@ -817,68 +1107,70 @@ class NotificationFacade {
     resetState() {
         return this.store.dispatch(new ResetNotificationState());
     }
-    // Action Dispatchers - Data Loading
+    /** Loads the scope's events; the selected event's catalog and defaults follow. */
     loadEvents() {
         return this.store.dispatch(new GetEvents());
     }
-    loadReceivers() {
-        return this.store.dispatch(new GetReceivers());
+    /** Kept for existing hosts — both load the scope's events and what follows from them. */
+    loadBaseData() {
+        return this.loadEvents();
     }
-    loadProperties(isMultiLang) {
-        return this.store.dispatch(new GetProperties(isMultiLang));
+    loadAllData() {
+        return this.loadEvents();
     }
-    loadPropertiesForCurrentContext(isMultiLang) {
-        const state = this.store.selectSnapshot(NotificationState.getState);
-        if (state.isActionMode && state.selectedActionId != null) {
-            return this.store.dispatch(new GetActionProperties(state.selectedActionId, isMultiLang));
-        }
-        return this.store.dispatch(new GetProperties(isMultiLang));
+    // ==========================================================================
+    // Selection
+    // ==========================================================================
+    selectEvent(eventId) {
+        return this.store.dispatch(new SelectEvent(eventId));
     }
-    // Action Dispatchers - Action Mode (Workflow)
-    setActionMode(actionId) {
-        return this.store.dispatch(new SetActionMode(actionId));
+    selectTemplate(templateId) {
+        return this.store.dispatch(new SelectTemplate(templateId));
     }
-    loadActionReceivers(actionId) {
-        return this.store.dispatch(new GetActionReceivers(actionId));
+    reloadDefaults(eventId) {
+        return this.store.dispatch(new GetDefaultRecipes(eventId));
     }
-    loadActionProperties(actionId, isMultiLang) {
-        return this.store.dispatch(new GetActionProperties(actionId, isMultiLang));
+    // ==========================================================================
+    // Writes
+    // ==========================================================================
+    createTemplate(eventId, payload) {
+        return this.store.dispatch(new CreateTemplate(eventId, payload));
     }
-    // Action Dispatchers - Selection
-    selectEvent(eventName) {
-        return this.store.dispatch(new SelectEvent(eventName));
+    saveTemplate(templateId, payload) {
+        return this.store.dispatch(new SaveTemplate(templateId, payload));
     }
-    selectTemplate(templateId) {
-        return this.store.dispatch(new SelectTemplate(templateId));
+    deleteTemplate(templateId, expectedRevision) {
+        return this.store.dispatch(new DeleteTemplate(templateId, expectedRevision));
     }
-    // Action Dispatchers - Receiver CRUD
-    addReceivers(templateId, payload) {
-        return this.store.dispatch(new AddReceivers(templateId, payload));
+    addReceivers(templateId, expectedRevision, receivers) {
+        return this.store.dispatch(new AddReceivers(templateId, expectedRevision, receivers));
     }
-    deleteReceiver(receiverId) {
-        return this.store.dispatch(new DeleteReceiver(receiverId));
+    deleteReceiver(receiverId, expectedRevision) {
+        return this.store.dispatch(new DeleteReceiver(receiverId, expectedRevision));
     }
-    // Action Dispatchers - Template CRUD
-    addTemplate(eventId, payload) {
-        return this.store.dispatch(new AddTemplate(eventId, payload));
+    publish(templateId, expectedRevision, reviews) {
+        return this.store.dispatch(new PublishTemplate(templateId, expectedRevision, reviews));
     }
-    updateTemplate(templateId, payload) {
-        return this.store.dispatch(new UpdateTemplate(templateId, payload));
+    turnOn(templateId, expectedRevision, reviews) {
+        return this.store.dispatch(new SetTemplateActivation(templateId, expectedRevision, true, reviews));
     }
-    deleteTemplate(templateId) {
-        return this.store.dispatch(new DeleteTemplate(templateId));
+    turnOff(templateId, expectedRevision) {
+        return this.store.dispatch(new SetTemplateActivation(templateId, expectedRevision, false, null));
     }
-    loadBaseData() {
-        this.loadEvents();
-        this.loadReceivers();
+    restorePublication(templateId, expectedRevision, publicationRevision, reviews) {
+        return this.store.dispatch(new RestorePublication(templateId, expectedRevision, publicationRevision, reviews));
     }
-    /**
-     * Load all data for normal mode (non-workflow)
-     */
-    loadAllData(isMultiLang = true) {
-        this.loadEvents();
-        this.loadReceivers();
-        this.loadPropertiesForCurrentContext(isMultiLang);
+    initializeDefaults(eventId) {
+        return this.store.dispatch(new InitializeDefaults(eventId));
+    }
+    restoreDefault(eventId, payload) {
+        return this.store.dispatch(new RestoreDefault(eventId, payload));
+    }
+    // ==========================================================================
+    // Preview — render-only, never stored: it saves, publishes and sends nothing.
+    // ==========================================================================
+    preview(eventId, request) {
+        return this.api.preview(eventId, request);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationFacade, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationFacade, providedIn: 'root' });
@@ -888,405 +1180,1214 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
-class NotificationTemplate {
+/**
+ * Turns the backend's stable codes into translated sentences. Codes are the
+ * contract; display text from the server is never matched or shown raw.
+ */
+class NotificationMessages {
+    transloco = inject(TranslocoService);
+    code(code) {
+        if (code) {
+            // EMAIL_* codes are shared with the Email design tab. The loaded keys
+            // are checked first: a translate() miss logs a missing-key warning.
+            const loaded = this.transloco.getTranslation(this.transloco.getActiveLang());
+            for (const key of [
+                `notification.codes.${code}`,
+                `email-delivery.design.codes.${code}`,
+            ]) {
+                if (Object.prototype.hasOwnProperty.call(loaded, key)) {
+                    return this.transloco.translate(key);
+                }
+            }
+        }
+        return this.transloco.translate('notification.codes.generic', {
+            code: code ?? '—',
+        });
+    }
+    diagnostic(diagnostic) {
+        const message = this.code(diagnostic.code);
+        return diagnostic.path ? `${message} (${diagnostic.path})` : message;
+    }
+    channel(channel) {
+        return this.transloco.translate(`notification.channel.${channel}`);
+    }
+    t(key, params) {
+        return this.transloco.translate(`notification.${key}`, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationMessages, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationMessages, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationMessages, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+const CHANNEL_ICONS = {
+    App: 'alert.bell-01',
+    Email: 'communication.mail-01',
+    Sms: 'communication.message-text-square-01',
+};
+
+/** A template's channel is chosen once, here — it cannot change afterwards. */
+class AddTemplateDialog {
+    modalService = inject(ModalService);
+    ref = inject(ModalRef);
+    transloco = inject(TranslocoService);
+    /** Channels the event's authoring context allows. */
+    channels = input(NOTIFICATION_CHANNELS, ...(ngDevMode ? [{ debugName: "channels" }] : /* istanbul ignore next */ []));
+    form = new FormGroup({
+        name: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.required, Validators.maxLength(250)],
+        }),
+        channel: new FormControl(null, {
+            validators: [Validators.required],
+        }),
+    });
+    channelOptions = computed(() => this.channels().map((channel) => ({
+        id: channel,
+        name: this.transloco.translate(`notification.channel.${channel}`),
+        description: this.transloco.translate(`notification.channel-description.${channel}`),
+        icon: CHANNEL_ICONS[channel],
+    })), ...(ngDevMode ? [{ debugName: "channelOptions" }] : /* istanbul ignore next */ []));
+    onSave() {
+        const { name, channel } = this.form.getRawValue();
+        if (this.form.invalid || !channel || !name.trim()) {
+            this.form.markAllAsTouched();
+            return;
+        }
+        const result = { name: name.trim(), channel };
+        this.ref.close(result);
+    }
+    onCancel() {
+        this.ref.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AddTemplateDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: AddTemplateDialog, isStandalone: true, selector: "mt-add-template-dialog", inputs: { channels: { classPropertyName: "channels", publicName: "channels", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'notification'\">\n  <div\n    [class]=\"modalService.contentClass\"\n    class=\"flex flex-col gap-4 p-4\"\n    [formGroup]=\"form\"\n  >\n    <mt-text-field\n      formControlName=\"name\"\n      [label]=\"t('name')\"\n      [placeholder]=\"t('enterName')\"\n      [required]=\"true\"\n    />\n    <mt-radio-cards-field\n      formControlName=\"channel\"\n      [options]=\"channelOptions()\"\n      optionLabel=\"name\"\n      optionValue=\"id\"\n      [label]=\"t('channel.label')\"\n      [hint]=\"t('channel.fixed-hint')\"\n      [required]=\"true\"\n    />\n  </div>\n\n  <div [class]=\"modalService.footerClass\">\n    <mt-button\n      [label]=\"t('cancel')\"\n      severity=\"secondary\"\n      variant=\"outlined\"\n      (onClick)=\"onCancel()\"\n    />\n    <mt-button\n      [label]=\"t('create')\"\n      [disabled]=\"form.invalid\"\n      (onClick)=\"onSave()\"\n    />\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: RadioCardsField, selector: "mt-radio-cards-field", inputs: ["circle", "label", "hint", "readonly", "required", "color", "size", "optionLabel", "optionValue", "options"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: AddTemplateDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-add-template-dialog', imports: [
+                        ReactiveFormsModule,
+                        TranslocoDirective,
+                        TextField,
+                        RadioCardsField,
+                        Button,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'notification'\">\n  <div\n    [class]=\"modalService.contentClass\"\n    class=\"flex flex-col gap-4 p-4\"\n    [formGroup]=\"form\"\n  >\n    <mt-text-field\n      formControlName=\"name\"\n      [label]=\"t('name')\"\n      [placeholder]=\"t('enterName')\"\n      [required]=\"true\"\n    />\n    <mt-radio-cards-field\n      formControlName=\"channel\"\n      [options]=\"channelOptions()\"\n      optionLabel=\"name\"\n      optionValue=\"id\"\n      [label]=\"t('channel.label')\"\n      [hint]=\"t('channel.fixed-hint')\"\n      [required]=\"true\"\n    />\n  </div>\n\n  <div [class]=\"modalService.footerClass\">\n    <mt-button\n      [label]=\"t('cancel')\"\n      severity=\"secondary\"\n      variant=\"outlined\"\n      (onClick)=\"onCancel()\"\n    />\n    <mt-button\n      [label]=\"t('create')\"\n      [disabled]=\"form.invalid\"\n      (onClick)=\"onSave()\"\n    />\n  </div>\n</ng-container>\n" }]
+        }], propDecorators: { channels: [{ type: i0.Input, args: [{ isSignal: true, alias: "channels", required: false }] }] } });
+
+/**
+ * Renders a notification preview the way it will be read: Email inside the
+ * shared design, App as its English and Arabic messages, SMS as plain text.
+ * HTML only ever goes into the sandboxed `mt-email-html-preview` frame.
+ * Images always show: the server strips every image outside
+ * `approvedImageOrigins`, and the frame's CSP allows only those origins.
+ */
+class NotificationContentPreview {
+    messages = inject(NotificationMessages);
+    preview = input(null, ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
+    status = input('idle', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    errorCode = input(null, ...(ngDevMode ? [{ debugName: "errorCode" }] : /* istanbul ignore next */ []));
+    /** The shown render is from an older version of the content. */
+    stale = input(false, ...(ngDevMode ? [{ debugName: "stale" }] : /* istanbul ignore next */ []));
+    height = input('26rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /**
+     * Stretch the rendered frames to the height the host gives this preview
+     * (beside the editor), with `height` as the minimum.
+     */
+    fill = input(false, ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    /** Off beside the editor, where the Subject field is in view. */
+    showSubject = input(true, ...(ngDevMode ? [{ debugName: "showSubject" }] : /* istanbul ignore next */ []));
+    retry = output();
+    narrow = new FormControl(false, { nonNullable: true });
+    narrowValue = signal(false, ...(ngDevMode ? [{ debugName: "narrowValue" }] : /* istanbul ignore next */ []));
+    email = computed(() => {
+        const preview = this.preview();
+        return preview?.channel === 'Email' ? preview : null;
+    }, ...(ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []));
+    app = computed(() => {
+        const preview = this.preview();
+        return preview?.channel === 'App' ? preview : null;
+    }, ...(ngDevMode ? [{ debugName: "app" }] : /* istanbul ignore next */ []));
+    sms = computed(() => {
+        const preview = this.preview();
+        return preview?.channel === 'Sms' ? preview : null;
+    }, ...(ngDevMode ? [{ debugName: "sms" }] : /* istanbul ignore next */ []));
+    diagnostics = computed(() => {
+        const preview = this.preview();
+        if (!preview)
+            return [];
+        if (preview.channel === 'App') {
+            return [...preview.english.diagnostics, ...preview.arabic.diagnostics];
+        }
+        return preview.diagnostics;
+    }, ...(ngDevMode ? [{ debugName: "diagnostics" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.narrow.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe((value) => this.narrowValue.set(value));
+    }
+    describe(diagnostic) {
+        return this.messages.diagnostic(diagnostic);
+    }
+    describeCode(code) {
+        return this.messages.code(code);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationContentPreview, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NotificationContentPreview, isStandalone: true, selector: "mt-notification-content-preview", inputs: { preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, errorCode: { classPropertyName: "errorCode", publicName: "errorCode", isSignal: true, isRequired: false, transformFunction: null }, stale: { classPropertyName: "stale", publicName: "stale", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, showSubject: { classPropertyName: "showSubject", publicName: "showSubject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { retry: "retry" }, host: { properties: { "class.flex-1": "fill()" }, classAttribute: "flex min-w-0 flex-col" }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'notification.preview'\">\n  <div class=\"flex min-w-0 flex-1 flex-col gap-3\">\n    <!-- The dimmed render already shows an update in progress; this only\n         announces it. -->\n    <span class=\"sr-only\" aria-live=\"polite\">{{\n      status() === \"updating\" ? t(\"updating\") : \"\"\n    }}</span>\n    @if (email()) {\n      <div class=\"flex justify-end\">\n        <mt-toggle-field [formControl]=\"narrow\" [label]=\"t('narrow')\" />\n      </div>\n    }\n\n    @if (status() === \"error\") {\n      <div\n        class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        role=\"alert\"\n      >\n        <span>{{ describeCode(errorCode()) }}</span>\n        <mt-button\n          [label]=\"t('retry')\"\n          size=\"small\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          (onClick)=\"retry.emit()\"\n        />\n      </div>\n    }\n\n    @if (preview()) {\n      <div\n        class=\"flex min-w-0 flex-1 flex-col gap-3 transition-opacity\"\n        [class.opacity-60]=\"stale() || status() === 'updating'\"\n      >\n        @if (email(); as email) {\n          @if (showSubject()) {\n            <div\n              class=\"rounded-md border border-surface bg-surface-50 px-3 py-2 text-sm\"\n            >\n              <span class=\"text-muted-color\">{{ t(\"subject\") }}:</span>\n              <span class=\"ms-1 font-medium\">{{ email.subject || \"\u2014\" }}</span>\n            </div>\n          }\n          <div\n            class=\"mx-auto w-full overflow-hidden rounded-md border border-surface\"\n            [class.max-w-[375px]]=\"narrowValue()\"\n            [class.relative]=\"fill()\"\n            [class.flex-1]=\"fill()\"\n            [style.min-height]=\"fill() ? height() : null\"\n          >\n            <mt-email-html-preview\n              [class.absolute]=\"fill()\"\n              [class.inset-0]=\"fill()\"\n              [html]=\"email.html\"\n              [showImages]=\"true\"\n              [approvedImageOrigins]=\"email.approvedImageOrigins\"\n              [title]=\"t('email-title')\"\n              [height]=\"fill() ? '100%' : height()\"\n            />\n          </div>\n        }\n        @if (app(); as app) {\n          <div class=\"flex min-w-0 flex-1 flex-col gap-3\">\n            <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <span class=\"text-xs font-medium text-muted-color\">{{\n                t(\"english\")\n              }}</span>\n              <div\n                class=\"overflow-hidden rounded-md border border-surface\"\n                [class.relative]=\"fill()\"\n                [class.flex-1]=\"fill()\"\n                [class.min-h-48]=\"fill()\"\n              >\n                <mt-email-html-preview\n                  [class.absolute]=\"fill()\"\n                  [class.inset-0]=\"fill()\"\n                  [html]=\"app.english.html\"\n                  [fragment]=\"true\"\n                  direction=\"ltr\"\n                  [showImages]=\"true\"\n                  [approvedImageOrigins]=\"app.approvedImageOrigins\"\n                  [title]=\"t('english')\"\n                  [height]=\"fill() ? '100%' : '12rem'\"\n                />\n              </div>\n            </div>\n            <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <span class=\"text-xs font-medium text-muted-color\">{{\n                t(\"arabic\")\n              }}</span>\n              <div\n                class=\"overflow-hidden rounded-md border border-surface\"\n                [class.relative]=\"fill()\"\n                [class.flex-1]=\"fill()\"\n                [class.min-h-48]=\"fill()\"\n              >\n                <mt-email-html-preview\n                  [class.absolute]=\"fill()\"\n                  [class.inset-0]=\"fill()\"\n                  [html]=\"app.arabic.html\"\n                  [fragment]=\"true\"\n                  direction=\"rtl\"\n                  [showImages]=\"true\"\n                  [approvedImageOrigins]=\"app.approvedImageOrigins\"\n                  [title]=\"t('arabic')\"\n                  [height]=\"fill() ? '100%' : '12rem'\"\n                />\n              </div>\n            </div>\n          </div>\n        }\n        @if (sms(); as sms) {\n          <div\n            class=\"whitespace-pre-wrap break-words rounded-md border border-surface bg-surface-50 px-4 py-3 text-sm\"\n            dir=\"auto\"\n          >\n            {{ sms.text }}\n          </div>\n          <span class=\"text-xs text-muted-color\">{{\n            t(\"sms-length\", { count: sms.text.length })\n          }}</span>\n        }\n\n        @if (diagnostics().length > 0) {\n          <ul class=\"list-disc ps-5 text-sm text-amber-700\">\n            @for (diagnostic of diagnostics(); track $index) {\n              <li>{{ describe(diagnostic) }}</li>\n            }\n          </ul>\n        }\n      </div>\n    } @else if (status() !== \"error\") {\n      <p-skeleton width=\"100%\" [height]=\"height()\" borderRadius=\"0.375rem\" />\n    }\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: EmailHtmlPreview, selector: "mt-email-html-preview", inputs: ["html", "showImages", "approvedImageOrigins", "fragment", "direction", "title", "height"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationContentPreview, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-notification-content-preview', imports: [
+                        TranslocoDirective,
+                        ReactiveFormsModule,
+                        Button,
+                        ToggleField,
+                        EmailHtmlPreview,
+                        Skeleton,
+                    ], host: { class: 'flex min-w-0 flex-col', '[class.flex-1]': 'fill()' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'notification.preview'\">\n  <div class=\"flex min-w-0 flex-1 flex-col gap-3\">\n    <!-- The dimmed render already shows an update in progress; this only\n         announces it. -->\n    <span class=\"sr-only\" aria-live=\"polite\">{{\n      status() === \"updating\" ? t(\"updating\") : \"\"\n    }}</span>\n    @if (email()) {\n      <div class=\"flex justify-end\">\n        <mt-toggle-field [formControl]=\"narrow\" [label]=\"t('narrow')\" />\n      </div>\n    }\n\n    @if (status() === \"error\") {\n      <div\n        class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n        role=\"alert\"\n      >\n        <span>{{ describeCode(errorCode()) }}</span>\n        <mt-button\n          [label]=\"t('retry')\"\n          size=\"small\"\n          severity=\"secondary\"\n          variant=\"outlined\"\n          (onClick)=\"retry.emit()\"\n        />\n      </div>\n    }\n\n    @if (preview()) {\n      <div\n        class=\"flex min-w-0 flex-1 flex-col gap-3 transition-opacity\"\n        [class.opacity-60]=\"stale() || status() === 'updating'\"\n      >\n        @if (email(); as email) {\n          @if (showSubject()) {\n            <div\n              class=\"rounded-md border border-surface bg-surface-50 px-3 py-2 text-sm\"\n            >\n              <span class=\"text-muted-color\">{{ t(\"subject\") }}:</span>\n              <span class=\"ms-1 font-medium\">{{ email.subject || \"\u2014\" }}</span>\n            </div>\n          }\n          <div\n            class=\"mx-auto w-full overflow-hidden rounded-md border border-surface\"\n            [class.max-w-[375px]]=\"narrowValue()\"\n            [class.relative]=\"fill()\"\n            [class.flex-1]=\"fill()\"\n            [style.min-height]=\"fill() ? height() : null\"\n          >\n            <mt-email-html-preview\n              [class.absolute]=\"fill()\"\n              [class.inset-0]=\"fill()\"\n              [html]=\"email.html\"\n              [showImages]=\"true\"\n              [approvedImageOrigins]=\"email.approvedImageOrigins\"\n              [title]=\"t('email-title')\"\n              [height]=\"fill() ? '100%' : height()\"\n            />\n          </div>\n        }\n        @if (app(); as app) {\n          <div class=\"flex min-w-0 flex-1 flex-col gap-3\">\n            <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <span class=\"text-xs font-medium text-muted-color\">{{\n                t(\"english\")\n              }}</span>\n              <div\n                class=\"overflow-hidden rounded-md border border-surface\"\n                [class.relative]=\"fill()\"\n                [class.flex-1]=\"fill()\"\n                [class.min-h-48]=\"fill()\"\n              >\n                <mt-email-html-preview\n                  [class.absolute]=\"fill()\"\n                  [class.inset-0]=\"fill()\"\n                  [html]=\"app.english.html\"\n                  [fragment]=\"true\"\n                  direction=\"ltr\"\n                  [showImages]=\"true\"\n                  [approvedImageOrigins]=\"app.approvedImageOrigins\"\n                  [title]=\"t('english')\"\n                  [height]=\"fill() ? '100%' : '12rem'\"\n                />\n              </div>\n            </div>\n            <div class=\"flex min-w-0 flex-1 flex-col gap-1\">\n              <span class=\"text-xs font-medium text-muted-color\">{{\n                t(\"arabic\")\n              }}</span>\n              <div\n                class=\"overflow-hidden rounded-md border border-surface\"\n                [class.relative]=\"fill()\"\n                [class.flex-1]=\"fill()\"\n                [class.min-h-48]=\"fill()\"\n              >\n                <mt-email-html-preview\n                  [class.absolute]=\"fill()\"\n                  [class.inset-0]=\"fill()\"\n                  [html]=\"app.arabic.html\"\n                  [fragment]=\"true\"\n                  direction=\"rtl\"\n                  [showImages]=\"true\"\n                  [approvedImageOrigins]=\"app.approvedImageOrigins\"\n                  [title]=\"t('arabic')\"\n                  [height]=\"fill() ? '100%' : '12rem'\"\n                />\n              </div>\n            </div>\n          </div>\n        }\n        @if (sms(); as sms) {\n          <div\n            class=\"whitespace-pre-wrap break-words rounded-md border border-surface bg-surface-50 px-4 py-3 text-sm\"\n            dir=\"auto\"\n          >\n            {{ sms.text }}\n          </div>\n          <span class=\"text-xs text-muted-color\">{{\n            t(\"sms-length\", { count: sms.text.length })\n          }}</span>\n        }\n\n        @if (diagnostics().length > 0) {\n          <ul class=\"list-disc ps-5 text-sm text-amber-700\">\n            @for (diagnostic of diagnostics(); track $index) {\n              <li>{{ describe(diagnostic) }}</li>\n            }\n          </ul>\n        }\n      </div>\n    } @else if (status() !== \"error\") {\n      <p-skeleton width=\"100%\" [height]=\"height()\" borderRadius=\"0.375rem\" />\n    }\n  </div>\n</ng-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], errorCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorCode", required: false }] }], stale: [{ type: i0.Input, args: [{ isSignal: true, alias: "stale", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], showSubject: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubject", required: false }] }], retry: [{ type: i0.Output, args: ["retry"] }] } });
+
+/**
+ * One preview pipeline per editor. A new request cancels the one in flight,
+ * a late answer for an older draft is dropped (`switchMap`), and Retry
+ * re-renders the exact request that failed — so retrying a history preview
+ * keeps the selected publication instead of falling back to the draft.
+ * Previews never save, publish, enable or send anything.
+ */
+class NotificationPreviewRunner {
+    status = signal('idle', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Last successful render — kept on screen while the next one runs. */
+    result = signal(null, ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
+    errorCode = signal(null, ...(ngDevMode ? [{ debugName: "errorCode" }] : /* istanbul ignore next */ []));
+    /** Identity of the request `result` was rendered from. */
+    resultKey = signal(null, ...(ngDevMode ? [{ debugName: "resultKey" }] : /* istanbul ignore next */ []));
+    immediate$ = new Subject();
+    debounced$ = new Subject();
+    retry$ = new Subject();
+    lastJob = null;
+    /** Bumped by every request, so a pending debounced one can tell it was overtaken. */
+    seq = 0;
+    constructor(facade, destroyRef, debounceMs = 600) {
+        merge(this.immediate$, this.debounced$.pipe(debounceTime(debounceMs), filter((job) => job.seq === this.seq)), this.retry$.pipe(map(() => this.lastJob)))
+            .pipe(switchMap((job) => {
+            this.lastJob = job;
+            if (!job) {
+                return of({ status: 'idle' });
+            }
+            return facade.preview(job.eventId, job.request).pipe(map((preview) => ({ status: 'ready', preview, job })), catchError((error) => of({
+                status: 'error',
+                code: readNotificationFailure(error).code,
+            })), startWith({ status: 'updating' }));
+        }), takeUntilDestroyed(destroyRef))
+            .subscribe((state) => {
+            this.status.set(state.status);
+            if (state.status === 'ready') {
+                this.result.set(state.preview);
+                this.resultKey.set(state.job.key);
+                this.errorCode.set(null);
+            }
+            else if (state.status === 'error') {
+                this.errorCode.set(state.code);
+            }
+            else if (state.status === 'idle') {
+                this.result.set(null);
+                this.resultKey.set(null);
+                this.errorCode.set(null);
+            }
+        });
+    }
+    /** Render now (opening a review, selecting a history entry). */
+    run(eventId, request) {
+        this.seq++;
+        this.immediate$.next(toJob(eventId, request));
+    }
+    /** Render after a typing pause. */
+    schedule(eventId, request) {
+        this.debounced$.next({ ...toJob(eventId, request), seq: ++this.seq });
+    }
+    retry() {
+        this.retry$.next();
+    }
+    clear() {
+        this.seq++;
+        this.immediate$.next(null);
+    }
+    isCurrent(eventId, request) {
+        return (this.status() === 'ready' &&
+            this.resultKey() === toJob(eventId, request).key);
+    }
+}
+function toJob(eventId, request) {
+    return { eventId, request, key: `${eventId}:${JSON.stringify(request)}` };
+}
+
+/**
+ * Retained publications of one template, newest first. Selecting a version
+ * previews that version's own content and recipients — never the draft's.
+ * "Restore" hands the chosen version back to the editor, which runs the
+ * review before anything is written.
+ */
+class TemplateHistoryDrawer {
+    modalService = inject(ModalService);
+    ref = inject(ModalRef);
     facade = inject(NotificationFacade);
+    destroyRef = inject(DestroyRef);
     transloco = inject(TranslocoService);
-    confirmationService = inject(ConfirmationService);
+    eventId = input.required(...(ngDevMode ? [{ debugName: "eventId" }] : /* istanbul ignore next */ []));
+    /** Restoring is blocked while the editor holds unsaved edits. */
+    draftDirty = input(false, ...(ngDevMode ? [{ debugName: "draftDirty" }] : /* istanbul ignore next */ []));
+    historyLimit = input(null, ...(ngDevMode ? [{ debugName: "historyLimit" }] : /* istanbul ignore next */ []));
+    runner = new NotificationPreviewRunner(this.facade, this.destroyRef);
+    publications = this.facade.publications;
+    template = this.facade.selectedTemplate;
+    selectedRevision = signal(null, ...(ngDevMode ? [{ debugName: "selectedRevision" }] : /* istanbul ignore next */ []));
+    selected = computed(() => this.publications().find((publication) => publication.revision === this.selectedRevision()) ?? null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    defaultsPublisher = DEFAULTS_PUBLISHER;
+    receiverLabels = computed(() => new Map(flattenRecipientCatalog(this.facade.context()?.recipients ?? [], this.transloco.getActiveLang())
+        .flatMap((group) => group.items)
+        .map((item) => [item.key.toLowerCase(), item.name])), ...(ngDevMode ? [{ debugName: "receiverLabels" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Open on the live version once the history arrives.
+        effect(() => {
+            const publications = this.publications();
+            const live = this.template()?.publishedRevision ?? null;
+            untracked(() => {
+                if (this.selectedRevision() !== null || publications.length === 0) {
+                    return;
+                }
+                this.select(publications.find((item) => item.revision === live) ??
+                    publications[0]);
+            });
+        });
+    }
+    select(publication) {
+        this.selectedRevision.set(publication.revision);
+        this.runner.run(this.eventId(), withPreviewSamples(publicationPreviewRequest(publication.content), this.facade.context()?.properties ?? [], this.transloco.getActiveLang()));
+    }
+    /** The catalog's (localized) name; the snapshot keeps whatever was saved. */
+    recipientName(recipient) {
+        return (this.receiverLabels().get(recipientKey(recipient.type, recipient.identifier).toLowerCase()) ??
+            (recipient.name || recipient.identifier));
+    }
+    restore() {
+        const publication = this.selected();
+        if (!publication || this.draftDirty())
+            return;
+        const result = { publication };
+        this.ref.close(result);
+    }
+    close() {
+        this.ref.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TemplateHistoryDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TemplateHistoryDrawer, isStandalone: true, selector: "mt-notification-template-history-drawer", inputs: { eventId: { classPropertyName: "eventId", publicName: "eventId", isSignal: true, isRequired: true, transformFunction: null }, draftDirty: { classPropertyName: "draftDirty", publicName: "draftDirty", isSignal: true, isRequired: false, transformFunction: null }, historyLimit: { classPropertyName: "historyLimit", publicName: "historyLimit", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'notification.history'\">\n  <div\n    [class]=\"modalService.contentClass\"\n    class=\"flex min-h-0 flex-col gap-4 p-4\"\n  >\n    @if (facade.isLoadingPublications() && publications().length === 0) {\n      <div class=\"flex flex-col gap-2\">\n        <p-skeleton width=\"100%\" height=\"3rem\" borderRadius=\"0.375rem\" />\n        <p-skeleton width=\"100%\" height=\"3rem\" borderRadius=\"0.375rem\" />\n        <p-skeleton width=\"100%\" height=\"20rem\" borderRadius=\"0.375rem\" />\n      </div>\n    } @else if (publications().length === 0) {\n      <p class=\"text-sm text-muted-color\">{{ t(\"empty\") }}</p>\n    } @else {\n      @if (historyLimit(); as limit) {\n        <p class=\"text-xs text-muted-color\">\n          {{ t(\"limit\", { limit: limit }) }}\n        </p>\n      }\n      <ul\n        class=\"flex flex-col gap-2\"\n        role=\"listbox\"\n        [attr.aria-label]=\"t('title')\"\n      >\n        @for (publication of publications(); track publication.revision) {\n          <li>\n            <button\n              type=\"button\"\n              role=\"option\"\n              [attr.aria-selected]=\"publication.revision === selectedRevision()\"\n              class=\"flex w-full flex-wrap items-center justify-between gap-2 rounded-md border px-3 py-2 text-start text-sm transition-colors\"\n              [class]=\"\n                publication.revision === selectedRevision()\n                  ? 'border-primary bg-primary-50'\n                  : 'border-surface bg-content hover:bg-surface-50'\n              \"\n              (click)=\"select(publication)\"\n            >\n              <span class=\"flex items-center gap-2\">\n                <span class=\"font-medium\">{{\n                  t(\"version\", { revision: publication.revision })\n                }}</span>\n                @if (publication.revision === template()?.publishedRevision) {\n                  <span\n                    class=\"rounded-md border border-green-200 bg-green-50 px-1.5 py-0.5 text-xs text-green-700\"\n                    >{{ t(\"live\") }}</span\n                  >\n                }\n              </span>\n              <span class=\"text-xs text-muted-color\">\n                {{ publication.publishedAtUtc | date: \"medium\" }}\n                \u00B7\n                {{\n                  publication.publishedBy === defaultsPublisher\n                    ? t(\"by-system\")\n                    : t(\"by-user\")\n                }}\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n\n      @if (selected(); as selected) {\n        <section class=\"flex flex-col gap-3 border-t border-surface pt-4\">\n          <h4 class=\"text-sm font-semibold\">\n            {{ t(\"version\", { revision: selected.revision }) }} \u2014\n            {{ selected.content.name }}\n          </h4>\n          <mt-notification-content-preview\n            [preview]=\"runner.result()\"\n            [status]=\"runner.status()\"\n            [errorCode]=\"runner.errorCode()\"\n            height=\"22rem\"\n            (retry)=\"runner.retry()\"\n          />\n          <div class=\"flex flex-col gap-1\">\n            <span class=\"text-xs font-medium text-muted-color\">{{\n              t(\"recipients\")\n            }}</span>\n            @if (selected.content.receivers.length > 0) {\n              <ul class=\"flex flex-wrap gap-2\">\n                @for (recipient of selected.content.receivers; track $index) {\n                  <li\n                    class=\"rounded-md border border-surface bg-surface-50 px-2 py-1 text-sm\"\n                  >\n                    {{ recipientName(recipient) }}\n                  </li>\n                }\n              </ul>\n            } @else {\n              <span class=\"text-sm text-muted-color\">{{\n                t(\"no-recipients\")\n              }}</span>\n            }\n          </div>\n          @if (selected.content.conditionFormula; as condition) {\n            <div class=\"flex flex-col gap-1\">\n              <span class=\"text-xs font-medium text-muted-color\">{{\n                t(\"condition\")\n              }}</span>\n              <code\n                class=\"block break-all rounded-md border border-surface bg-surface-50 px-3 py-2 text-xs\"\n                dir=\"ltr\"\n                >{{ condition }}</code\n              >\n            </div>\n          }\n        </section>\n      }\n    }\n  </div>\n\n  <div [class]=\"modalService.footerClass\">\n    <mt-button\n      [label]=\"t('close')\"\n      severity=\"secondary\"\n      variant=\"outlined\"\n      (onClick)=\"close()\"\n    />\n    <mt-button\n      icon=\"time.clock-rewind\"\n      [label]=\"t('restore')\"\n      [tooltip]=\"draftDirty() ? t('restore-blocked') : ''\"\n      [disabled]=\"!selected() || draftDirty()\"\n      (onClick)=\"restore()\"\n    />\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: NotificationContentPreview, selector: "mt-notification-content-preview", inputs: ["preview", "status", "errorCode", "stale", "height", "fill", "showSubject"], outputs: ["retry"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TemplateHistoryDrawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-notification-template-history-drawer', imports: [
+                        TranslocoDirective,
+                        DatePipe,
+                        Button,
+                        Skeleton,
+                        NotificationContentPreview,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'notification.history'\">\n  <div\n    [class]=\"modalService.contentClass\"\n    class=\"flex min-h-0 flex-col gap-4 p-4\"\n  >\n    @if (facade.isLoadingPublications() && publications().length === 0) {\n      <div class=\"flex flex-col gap-2\">\n        <p-skeleton width=\"100%\" height=\"3rem\" borderRadius=\"0.375rem\" />\n        <p-skeleton width=\"100%\" height=\"3rem\" borderRadius=\"0.375rem\" />\n        <p-skeleton width=\"100%\" height=\"20rem\" borderRadius=\"0.375rem\" />\n      </div>\n    } @else if (publications().length === 0) {\n      <p class=\"text-sm text-muted-color\">{{ t(\"empty\") }}</p>\n    } @else {\n      @if (historyLimit(); as limit) {\n        <p class=\"text-xs text-muted-color\">\n          {{ t(\"limit\", { limit: limit }) }}\n        </p>\n      }\n      <ul\n        class=\"flex flex-col gap-2\"\n        role=\"listbox\"\n        [attr.aria-label]=\"t('title')\"\n      >\n        @for (publication of publications(); track publication.revision) {\n          <li>\n            <button\n              type=\"button\"\n              role=\"option\"\n              [attr.aria-selected]=\"publication.revision === selectedRevision()\"\n              class=\"flex w-full flex-wrap items-center justify-between gap-2 rounded-md border px-3 py-2 text-start text-sm transition-colors\"\n              [class]=\"\n                publication.revision === selectedRevision()\n                  ? 'border-primary bg-primary-50'\n                  : 'border-surface bg-content hover:bg-surface-50'\n              \"\n              (click)=\"select(publication)\"\n            >\n              <span class=\"flex items-center gap-2\">\n                <span class=\"font-medium\">{{\n                  t(\"version\", { revision: publication.revision })\n                }}</span>\n                @if (publication.revision === template()?.publishedRevision) {\n                  <span\n                    class=\"rounded-md border border-green-200 bg-green-50 px-1.5 py-0.5 text-xs text-green-700\"\n                    >{{ t(\"live\") }}</span\n                  >\n                }\n              </span>\n              <span class=\"text-xs text-muted-color\">\n                {{ publication.publishedAtUtc | date: \"medium\" }}\n                \u00B7\n                {{\n                  publication.publishedBy === defaultsPublisher\n                    ? t(\"by-system\")\n                    : t(\"by-user\")\n                }}\n              </span>\n            </button>\n          </li>\n        }\n      </ul>\n\n      @if (selected(); as selected) {\n        <section class=\"flex flex-col gap-3 border-t border-surface pt-4\">\n          <h4 class=\"text-sm font-semibold\">\n            {{ t(\"version\", { revision: selected.revision }) }} \u2014\n            {{ selected.content.name }}\n          </h4>\n          <mt-notification-content-preview\n            [preview]=\"runner.result()\"\n            [status]=\"runner.status()\"\n            [errorCode]=\"runner.errorCode()\"\n            height=\"22rem\"\n            (retry)=\"runner.retry()\"\n          />\n          <div class=\"flex flex-col gap-1\">\n            <span class=\"text-xs font-medium text-muted-color\">{{\n              t(\"recipients\")\n            }}</span>\n            @if (selected.content.receivers.length > 0) {\n              <ul class=\"flex flex-wrap gap-2\">\n                @for (recipient of selected.content.receivers; track $index) {\n                  <li\n                    class=\"rounded-md border border-surface bg-surface-50 px-2 py-1 text-sm\"\n                  >\n                    {{ recipientName(recipient) }}\n                  </li>\n                }\n              </ul>\n            } @else {\n              <span class=\"text-sm text-muted-color\">{{\n                t(\"no-recipients\")\n              }}</span>\n            }\n          </div>\n          @if (selected.content.conditionFormula; as condition) {\n            <div class=\"flex flex-col gap-1\">\n              <span class=\"text-xs font-medium text-muted-color\">{{\n                t(\"condition\")\n              }}</span>\n              <code\n                class=\"block break-all rounded-md border border-surface bg-surface-50 px-3 py-2 text-xs\"\n                dir=\"ltr\"\n                >{{ condition }}</code\n              >\n            </div>\n          }\n        </section>\n      }\n    }\n  </div>\n\n  <div [class]=\"modalService.footerClass\">\n    <mt-button\n      [label]=\"t('close')\"\n      severity=\"secondary\"\n      variant=\"outlined\"\n      (onClick)=\"close()\"\n    />\n    <mt-button\n      icon=\"time.clock-rewind\"\n      [label]=\"t('restore')\"\n      [tooltip]=\"draftDirty() ? t('restore-blocked') : ''\"\n      [disabled]=\"!selected() || draftDirty()\"\n      (onClick)=\"restore()\"\n    />\n  </div>\n</ng-container>\n" }]
+        }], ctorParameters: () => [], propDecorators: { eventId: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventId", required: true }] }], draftDirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "draftDirty", required: false }] }], historyLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "historyLimit", required: false }] }] } });
+
+/**
+ * The explicit review before a write changes what is sent: the actual content
+ * (rendered by the server) and the actual receivers of the version being
+ * published / turned on / restored — never the working draft's.
+ *
+ * The review flags are not separate tick boxes (product decision, 2026-10-27):
+ * confirming this dialog, which only enables once the server preview has
+ * rendered, is the acknowledgement. They are sent only from that confirmation,
+ * never as defaults elsewhere.
+ */
+class TemplateReviewDialog {
     modalService = inject(ModalService);
+    ref = inject(ModalRef);
+    facade = inject(NotificationFacade);
+    destroyRef = inject(DestroyRef);
+    mode = input.required(...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    eventId = input.required(...(ngDevMode ? [{ debugName: "eventId" }] : /* istanbul ignore next */ []));
+    request = input.required(...(ngDevMode ? [{ debugName: "request" }] : /* istanbul ignore next */ []));
+    recipients = input([], ...(ngDevMode ? [{ debugName: "recipients" }] : /* istanbul ignore next */ []));
+    condition = input(null, ...(ngDevMode ? [{ debugName: "condition" }] : /* istanbul ignore next */ []));
+    /** Templates a ready-made slot owns also need `languageReviewed`. */
+    requireLanguageReview = input(false, ...(ngDevMode ? [{ debugName: "requireLanguageReview" }] : /* istanbul ignore next */ []));
+    /** Publishing an enabled template changes live sending at once. */
+    isEnabled = input(false, ...(ngDevMode ? [{ debugName: "isEnabled" }] : /* istanbul ignore next */ []));
+    runner = new NotificationPreviewRunner(this.facade, this.destroyRef);
+    previewReady = computed(() => this.runner.status() === 'ready', ...(ngDevMode ? [{ debugName: "previewReady" }] : /* istanbul ignore next */ []));
+    ngOnInit() {
+        this.runner.run(this.eventId(), this.request());
+    }
+    confirm() {
+        if (!this.previewReady())
+            return;
+        const reviewed = this.mode() !== 'restoreDefault';
+        const result = {
+            recipientsReviewed: reviewed,
+            languageReviewed: reviewed && this.requireLanguageReview(),
+        };
+        this.ref.close(result);
+    }
+    cancel() {
+        this.ref.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TemplateReviewDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: TemplateReviewDialog, isStandalone: true, selector: "mt-notification-template-review-dialog", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, eventId: { classPropertyName: "eventId", publicName: "eventId", isSignal: true, isRequired: true, transformFunction: null }, request: { classPropertyName: "request", publicName: "request", isSignal: true, isRequired: true, transformFunction: null }, recipients: { classPropertyName: "recipients", publicName: "recipients", isSignal: true, isRequired: false, transformFunction: null }, condition: { classPropertyName: "condition", publicName: "condition", isSignal: true, isRequired: false, transformFunction: null }, requireLanguageReview: { classPropertyName: "requireLanguageReview", publicName: "requireLanguageReview", isSignal: true, isRequired: false, transformFunction: null }, isEnabled: { classPropertyName: "isEnabled", publicName: "isEnabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'notification.review'\">\n  <div [class]=\"modalService.contentClass\" class=\"flex flex-col gap-4 p-4\">\n    <div\n      class=\"rounded-md border px-4 py-3 text-sm\"\n      [class]=\"\n        mode() === 'publish' && isEnabled()\n          ? 'border-amber-200 bg-amber-50 text-amber-700'\n          : 'border-surface bg-surface-50'\n      \"\n    >\n      {{\n        t(\n          \"intro.\" +\n            mode() +\n            (mode() === \"publish\" && isEnabled() ? \"-live\" : \"\")\n        )\n      }}\n    </div>\n\n    <section class=\"flex flex-col gap-2\">\n      <h4 class=\"text-sm font-semibold\">{{ t(\"recipients\") }}</h4>\n      @if (recipients().length > 0) {\n        <ul class=\"flex flex-wrap gap-2\">\n          @for (recipient of recipients(); track $index) {\n            <li\n              class=\"rounded-md border border-surface bg-surface-50 px-2 py-1 text-sm\"\n            >\n              <span class=\"font-medium\">{{ recipient.name }}</span>\n              <span class=\"ms-1 text-xs text-muted-color\">{{\n                t(\"recipient-type.\" + recipient.type)\n              }}</span>\n            </li>\n          }\n        </ul>\n      } @else {\n        <p class=\"text-sm text-amber-700\">{{ t(\"no-recipients\") }}</p>\n      }\n    </section>\n\n    <section class=\"flex flex-col gap-2\">\n      <h4 class=\"text-sm font-semibold\">{{ t(\"condition\") }}</h4>\n      @if (condition(); as condition) {\n        <code\n          class=\"block break-all rounded-md border border-surface bg-surface-50 px-3 py-2 text-xs\"\n          dir=\"ltr\"\n          >{{ condition }}</code\n        >\n      } @else {\n        <p class=\"text-sm text-muted-color\">{{ t(\"always\") }}</p>\n      }\n    </section>\n\n    <section class=\"flex flex-col gap-2\">\n      <h4 class=\"text-sm font-semibold\">{{ t(\"content\") }}</h4>\n      <mt-notification-content-preview\n        [preview]=\"runner.result()\"\n        [status]=\"runner.status()\"\n        [errorCode]=\"runner.errorCode()\"\n        height=\"20rem\"\n        (retry)=\"runner.retry()\"\n      />\n    </section>\n  </div>\n\n  <div [class]=\"modalService.footerClass\">\n    <div class=\"flex w-full justify-end gap-2\">\n      <mt-button\n        [label]=\"t('cancel')\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (onClick)=\"cancel()\"\n      />\n      <mt-button\n        [label]=\"t('confirm.' + mode())\"\n        [tooltip]=\"previewReady() ? '' : t('waiting-preview')\"\n        [disabled]=\"!previewReady()\"\n        (onClick)=\"confirm()\"\n      />\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: NotificationContentPreview, selector: "mt-notification-content-preview", inputs: ["preview", "status", "errorCode", "stale", "height", "fill", "showSubject"], outputs: ["retry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TemplateReviewDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-notification-template-review-dialog', imports: [TranslocoDirective, Button, NotificationContentPreview], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'notification.review'\">\n  <div [class]=\"modalService.contentClass\" class=\"flex flex-col gap-4 p-4\">\n    <div\n      class=\"rounded-md border px-4 py-3 text-sm\"\n      [class]=\"\n        mode() === 'publish' && isEnabled()\n          ? 'border-amber-200 bg-amber-50 text-amber-700'\n          : 'border-surface bg-surface-50'\n      \"\n    >\n      {{\n        t(\n          \"intro.\" +\n            mode() +\n            (mode() === \"publish\" && isEnabled() ? \"-live\" : \"\")\n        )\n      }}\n    </div>\n\n    <section class=\"flex flex-col gap-2\">\n      <h4 class=\"text-sm font-semibold\">{{ t(\"recipients\") }}</h4>\n      @if (recipients().length > 0) {\n        <ul class=\"flex flex-wrap gap-2\">\n          @for (recipient of recipients(); track $index) {\n            <li\n              class=\"rounded-md border border-surface bg-surface-50 px-2 py-1 text-sm\"\n            >\n              <span class=\"font-medium\">{{ recipient.name }}</span>\n              <span class=\"ms-1 text-xs text-muted-color\">{{\n                t(\"recipient-type.\" + recipient.type)\n              }}</span>\n            </li>\n          }\n        </ul>\n      } @else {\n        <p class=\"text-sm text-amber-700\">{{ t(\"no-recipients\") }}</p>\n      }\n    </section>\n\n    <section class=\"flex flex-col gap-2\">\n      <h4 class=\"text-sm font-semibold\">{{ t(\"condition\") }}</h4>\n      @if (condition(); as condition) {\n        <code\n          class=\"block break-all rounded-md border border-surface bg-surface-50 px-3 py-2 text-xs\"\n          dir=\"ltr\"\n          >{{ condition }}</code\n        >\n      } @else {\n        <p class=\"text-sm text-muted-color\">{{ t(\"always\") }}</p>\n      }\n    </section>\n\n    <section class=\"flex flex-col gap-2\">\n      <h4 class=\"text-sm font-semibold\">{{ t(\"content\") }}</h4>\n      <mt-notification-content-preview\n        [preview]=\"runner.result()\"\n        [status]=\"runner.status()\"\n        [errorCode]=\"runner.errorCode()\"\n        height=\"20rem\"\n        (retry)=\"runner.retry()\"\n      />\n    </section>\n  </div>\n\n  <div [class]=\"modalService.footerClass\">\n    <div class=\"flex w-full justify-end gap-2\">\n      <mt-button\n        [label]=\"t('cancel')\"\n        severity=\"secondary\"\n        variant=\"outlined\"\n        (onClick)=\"cancel()\"\n      />\n      <mt-button\n        [label]=\"t('confirm.' + mode())\"\n        [tooltip]=\"previewReady() ? '' : t('waiting-preview')\"\n        [disabled]=\"!previewReady()\"\n        (onClick)=\"confirm()\"\n      />\n    </div>\n  </div>\n</ng-container>\n" }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: true }] }], eventId: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventId", required: true }] }], request: [{ type: i0.Input, args: [{ isSignal: true, alias: "request", required: true }] }], recipients: [{ type: i0.Input, args: [{ isSignal: true, alias: "recipients", required: false }] }], condition: [{ type: i0.Input, args: [{ isSignal: true, alias: "condition", required: false }] }], requireLanguageReview: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireLanguageReview", required: false }] }], isEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEnabled", required: false }] }] } });
+
+const WIDE_LAYOUT_MIN_WIDTH = 960;
+const DRAWER_STYLE_CLASS = '!shadow-none !w-full !max-w-full md:!w-[70%] lg:!w-[50%]';
+/**
+ * Control Panel notification templates for one scope (Level, Module,
+ * LevelModule, Request/Step, EscalationRequest/Step, Delegation).
+ *
+ * Saving and previewing a draft never changes what is sent: only Publish
+ * (snapshot the saved draft) and Turn on/off do, and both go through an
+ * explicit review of the actual content and recipients first. Every write
+ * carries the last revision read; a conflict keeps the user's edits.
+ */
+class NotificationTemplate {
+    facade = inject(NotificationFacade);
+    messages = inject(NotificationMessages);
+    transloco = inject(TranslocoService);
+    confirmation = inject(ConfirmationService);
+    modal = inject(ModalService);
     toast = inject(ToastService);
-    // ============================================================================
-    // Data Signals from Facade
-    // ============================================================================
+    destroyRef = inject(DestroyRef);
+    lang = toSignal(this.transloco.langChanges$, {
+        initialValue: this.transloco.getActiveLang(),
+    });
+    // ==========================================================================
+    // Store
+    // ==========================================================================
     events = this.facade.events;
     templates = this.facade.templates;
-    receivers = this.facade.receivers;
-    propertyGroups = this.facade.propertyGroups;
-    // Selection Signals
-    selectedEventName = this.facade.selectedEventName;
-    selectedTemplateId = this.facade.selectedTemplateId;
     selectedEvent = this.facade.selectedEvent;
-    selectedTemplate = this.facade.selectedTemplate;
-    availableReceivers = this.facade.availableReceivers;
-    availableReceiverGroups = this.facade.availableReceiverGroups;
-    // ============================================================================
-    // Loading States from Facade
-    // ============================================================================
-    isLoadingEvents = this.facade.isLoadingEvents;
-    isLoadingReceivers = this.facade.isLoadingReceivers;
-    isLoadingProperties = this.facade.isLoadingProperties;
-    isUpdatingTemplate = this.facade.isUpdatingTemplate;
-    isDeletingTemplate = this.facade.isDeletingTemplate;
-    isAddingTemplate = this.facade.isAddingTemplate;
-    // ============================================================================
-    // Error States from Facade
-    // ============================================================================
-    eventsError = this.facade.eventsError;
-    propertiesError = this.facade.propertiesError;
-    // ============================================================================
-    // Local State
-    // ============================================================================
-    deletingReceiverIds = signal([], ...(ngDevMode ? [{ debugName: "deletingReceiverIds" }] : /* istanbul ignore next */ []));
-    addingReceiverIds = signal([], ...(ngDevMode ? [{ debugName: "addingReceiverIds" }] : /* istanbul ignore next */ []));
-    // ============================================================================
-    // Form - Dynamic controls based on CHANNEL_CONFIGS
-    // ============================================================================
-    form = this.buildForm();
-    propertyPickerControl = new FormControl(null);
-    receiverPickerControl = new FormControl(null);
-    channelControl = this.form.controls['channel'];
-    channelSignal = toSignal(this.channelControl.valueChanges, {
-        initialValue: this.channelControl.value,
+    selectedEventId = this.facade.selectedEventId;
+    selectedTemplateId = this.facade.selectedTemplateId;
+    template = this.facade.selectedTemplate;
+    context = this.facade.context;
+    defaults = this.facade.defaults;
+    publications = this.facade.publications;
+    isMutating = this.facade.isMutating;
+    // ==========================================================================
+    // Controls
+    // ==========================================================================
+    eventControl = new FormControl(null);
+    placeholderControl = new FormControl(null);
+    recipientControl = new FormControl(null);
+    form = new FormGroup({
+        name: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.required, Validators.maxLength(250)],
+        }),
+        subject: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.maxLength(250)],
+        }),
+        emailTemplate: new FormControl('', { nonNullable: true }),
+        smsTemplate: new FormControl('', {
+            nonNullable: true,
+            validators: [Validators.maxLength(4000)],
+        }),
+        appEn: new FormControl('', { nonNullable: true }),
+        appAr: new FormControl('', { nonNullable: true }),
+        conditionFormula: new FormControl('', { nonNullable: true }),
     });
-    buildForm() {
-        const fc = (v = '') => new FormControl(v, { nonNullable: true });
-        const controls = {
-            event: new FormControl(null),
-            name: fc(),
-            channel: new FormControl('email', {
-                nonNullable: true,
-            }),
-        };
-        for (const ch of CHANNEL_CONFIGS) {
-            if (ch.templateKey)
-                controls[ch.templateKey] = fc();
-            if (ch.translatableKey) {
-                // Nested FormGroup to match payload structure { en: '', ar: '' }
-                controls[ch.translatableKey] = new FormGroup({
-                    en: fc(),
-                    ar: fc(),
-                });
-            }
-            if (ch.bilingualOptional) {
-                controls[`${ch.key}Bilingual`] = new FormControl(false, {
-                    nonNullable: true,
-                });
-            }
-        }
-        return new FormGroup(controls);
-    }
-    // ============================================================================
-    // Computed
-    // ============================================================================
-    channelConfigs = CHANNEL_CONFIGS;
-    /** Check if channel should show bilingual fields - reads from form */
-    isBilingual(ch) {
-        if (!ch.supportsBilingual)
+    formValue = signal(this.form.getRawValue(), ...(ngDevMode ? [{ debugName: "formValue" }] : /* istanbul ignore next */ []));
+    /** Mirrors the tabs' own `active` model so a cancelled switch can snap back. */
+    activeTab = signal(null, ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    activeField = signal('emailTemplate', ...(ngDevMode ? [{ debugName: "activeField" }] : /* istanbul ignore next */ []));
+    channelIcons = CHANNEL_ICONS;
+    host = inject(ElementRef);
+    /** Editor and preview side by side; see the ResizeObserver in the constructor. */
+    wide = signal(false, ...(ngDevMode ? [{ debugName: "wide" }] : /* istanbul ignore next */ []));
+    conflict = signal(false, ...(ngDevMode ? [{ debugName: "conflict" }] : /* istanbul ignore next */ []));
+    writeDiagnostics = signal([], ...(ngDevMode ? [{ debugName: "writeDiagnostics" }] : /* istanbul ignore next */ []));
+    preview = new NotificationPreviewRunner(this.facade, this.destroyRef);
+    /** A newly opened template renders at once instead of after the typing pause. */
+    renderPreviewNow = false;
+    emailEditor = viewChild('emailEditor', { ...(ngDevMode ? { debugName: "emailEditor" } : /* istanbul ignore next */ {}), read: EmailVisualEditor });
+    appEnEditor = viewChild('appEnEditor', { ...(ngDevMode ? { debugName: "appEnEditor" } : /* istanbul ignore next */ {}), read: EmailVisualEditor });
+    appArEditor = viewChild('appArEditor', { ...(ngDevMode ? { debugName: "appArEditor" } : /* istanbul ignore next */ {}), read: EmailVisualEditor });
+    smsSource = viewChild('smsSource', ...(ngDevMode ? [{ debugName: "smsSource" }] : /* istanbul ignore next */ []));
+    // ==========================================================================
+    // Derived state
+    // ==========================================================================
+    channel = computed(() => this.template()?.channel ?? null, ...(ngDevMode ? [{ debugName: "channel" }] : /* istanbul ignore next */ []));
+    status = computed(() => {
+        const template = this.template();
+        return template ? templateStatus(template) : null;
+    }, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    unpublishedChanges = computed(() => {
+        const template = this.template();
+        return template
+            ? hasUnpublishedChanges(template, this.publications())
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "unpublishedChanges" }] : /* istanbul ignore next */ []));
+    defaultOwned = computed(() => {
+        const template = this.template();
+        return !!template && isDefaultOwned(template, this.defaults());
+    }, ...(ngDevMode ? [{ debugName: "defaultOwned" }] : /* istanbul ignore next */ []));
+    /** Unsaved edits, measured against the server baseline rather than control flags. */
+    dirty = computed(() => {
+        const template = this.template();
+        if (!template)
             return false;
-        if (!ch.bilingualOptional)
-            return true; // forced bilingual (app)
-        return this.form.controls[`${ch.key}Bilingual`]?.value ?? false;
-    }
-    channelOptions = computed(() => CHANNEL_CONFIGS.map((c) => ({
-        ...c,
-        name: this.transloco.translate(c.labelKey),
-    })), ...(ngDevMode ? [{ debugName: "channelOptions" }] : /* istanbul ignore next */ []));
-    /** Templates of the selected event, rendered as tabs. */
-    templateTabs = computed(() => this.templates().map((t) => ({
-        label: t.name,
-        value: t.id,
-        isSystem: t.isSystem,
+        const value = this.formValue();
+        const same = (current, saved) => current === (saved ?? '');
+        if (!same(value.name, template.name))
+            return true;
+        if (value.conditionFormula.trim() !== (template.conditionFormula ?? '').trim()) {
+            return true;
+        }
+        switch (template.channel) {
+            case 'Email':
+                return (!same(value.subject, template.subject) ||
+                    !same(value.emailTemplate, template.emailTemplate));
+            case 'Sms':
+                return !same(value.smsTemplate, template.smsTemplate);
+            case 'App':
+                return (!same(value.appEn, template.appTemplate?.en) ||
+                    !same(value.appAr, template.appTemplate?.ar));
+        }
+    }, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    nameValid = computed(() => this.formValue().name.trim().length > 0 &&
+        this.formValue().name.length <= 250, ...(ngDevMode ? [{ debugName: "nameValid" }] : /* istanbul ignore next */ []));
+    canSave = computed(() => this.dirty() && this.nameValid() && !this.isMutating(), ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+    canPublish = computed(() => !!this.template() && !this.dirty() && !this.isMutating(), ...(ngDevMode ? [{ debugName: "canPublish" }] : /* istanbul ignore next */ []));
+    canTurnOn = computed(() => {
+        const template = this.template();
+        return (!!template &&
+            template.publishedRevision != null &&
+            !!currentPublication(template, this.publications()) &&
+            !this.isMutating());
+    }, ...(ngDevMode ? [{ debugName: "canTurnOn" }] : /* istanbul ignore next */ []));
+    templateTabs = computed(() => this.templates().map((template) => ({
+        label: template.name || this.messages.t('untitled'),
+        value: template.id,
+        icon: CHANNEL_ICONS[template.channel],
     })), ...(ngDevMode ? [{ debugName: "templateTabs" }] : /* istanbul ignore next */ []));
-    activeChannel = computed(() => this.selectedTemplate()?.channel ?? this.channelSignal(), ...(ngDevMode ? [{ debugName: "activeChannel" }] : /* istanbul ignore next */ []));
-    shouldUseMultilingualProperties = computed(() => this.activeChannel() !== 'app', ...(ngDevMode ? [{ debugName: "shouldUseMultilingualProperties" }] : /* istanbul ignore next */ []));
-    isFormInvalid = computed(() => !this.form.controls['name'].value?.trim(), ...(ngDevMode ? [{ debugName: "isFormInvalid" }] : /* istanbul ignore next */ []));
-    /**
-     * Snapshot of the form's default shape, captured before any context ever
-     * patches it. Used by {@link resetTemplateFields} to clear the form when the
-     * selected template resolves to nothing, so a component switching context
-     * never keeps displaying a previous context's values (see
-     * `ResetNotificationState` for the store-level counterpart of this reset).
-     */
-    emptyFormValue = this.form.getRawValue();
+    placeholderGroups = computed(() => {
+        const ar = this.lang() === 'ar';
+        return (this.context()?.properties ?? []).map((group) => ({
+            groupName: group.groupName,
+            properties: group.properties.map((property) => ({
+                key: property.key,
+                label: (ar ? property.nameAr : property.nameEn) || property.name,
+            })),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "placeholderGroups" }] : /* istanbul ignore next */ []));
+    /** Image hosts the server accepts, as reported by the latest email preview. */
+    emailImageOrigins = computed(() => {
+        const result = this.preview.result();
+        return result?.channel === 'Email' ? result.approvedImageOrigins : [];
+    }, ...(ngDevMode ? [{ debugName: "emailImageOrigins" }] : /* istanbul ignore next */ []));
+    /** Image hosts the server accepts in App messages, from the latest App preview. */
+    appImageOrigins = computed(() => {
+        const result = this.preview.result();
+        return result?.channel === 'App' ? result.approvedImageOrigins : [];
+    }, ...(ngDevMode ? [{ debugName: "appImageOrigins" }] : /* istanbul ignore next */ []));
+    /** Catalog names by `type:id`, so saved receivers read as the catalog does. */
+    receiverLabels = computed(() => new Map(flattenRecipientCatalog(this.context()?.recipients ?? [], this.lang())
+        .flatMap((group) => group.items)
+        .map((item) => [item.key.toLowerCase(), item.name])), ...(ngDevMode ? [{ debugName: "receiverLabels" }] : /* istanbul ignore next */ []));
+    /** Field labels for the email editor's placeholder chips. */
+    placeholderOptions = computed(() => this.placeholderGroups().flatMap((group) => group.properties), ...(ngDevMode ? [{ debugName: "placeholderOptions" }] : /* istanbul ignore next */ []));
+    recipientGroups = computed(() => {
+        const assigned = new Set((this.template()?.receivers ?? []).map((receiver) => recipientKey(receiver.type, receiver.identifier)));
+        return flattenRecipientCatalog(this.context()?.recipients ?? [], this.lang())
+            .map((group) => ({
+            ...group,
+            items: group.items.filter((item) => !assigned.has(item.key)),
+        }))
+            .filter((group) => group.items.length > 0);
+    }, ...(ngDevMode ? [{ debugName: "recipientGroups" }] : /* istanbul ignore next */ []));
+    conditionPropertiesByPath = computed(() => {
+        const ar = this.lang() === 'ar';
+        return {
+            Current: (this.context()?.conditionProperties ?? []).map((property) => ({
+                key: property.key,
+                name: (ar ? property.nameAr : property.nameEn) || property.name,
+            })),
+        };
+    }, ...(ngDevMode ? [{ debugName: "conditionPropertiesByPath" }] : /* istanbul ignore next */ []));
+    conditionKeys = computed(() => (this.context()?.conditionProperties ?? []).map((property) => property.key), ...(ngDevMode ? [{ debugName: "conditionKeys" }] : /* istanbul ignore next */ []));
+    missingDefaults = computed(() => missingDefaultChannels(this.defaults()), ...(ngDevMode ? [{ debugName: "missingDefaults" }] : /* istanbul ignore next */ []));
+    removedDefaults = computed(() => {
+        const defaults = this.defaults();
+        if (!defaults)
+            return [];
+        return defaults.slots
+            .filter((slot) => slot.templateId == null)
+            .map((slot) => ({
+            slot,
+            recipe: defaults.recipes.find((recipe) => recipe.channel === slot.channel) ??
+                null,
+        }))
+            .filter((item) => item.recipe !== null);
+    }, ...(ngDevMode ? [{ debugName: "removedDefaults" }] : /* istanbul ignore next */ []));
+    /** What the live preview renders: the editor's current, unsaved values. */
+    previewRequest = computed(() => {
+        const template = this.template();
+        if (!template)
+            return null;
+        const value = this.formValue();
+        return this.withSamples(templatePreviewRequest({
+            channel: template.channel,
+            subject: value.subject,
+            emailTemplate: value.emailTemplate,
+            smsTemplate: value.smsTemplate,
+            appTemplate: { en: value.appEn, ar: value.appAr },
+        }));
+    }, ...(ngDevMode ? [{ debugName: "previewRequest" }] : /* istanbul ignore next */ []));
+    previewStale = computed(() => {
+        const eventId = this.selectedEventId();
+        const request = this.previewRequest();
+        return (eventId == null ||
+            request == null ||
+            !this.preview.isCurrent(eventId, request));
+    }, ...(ngDevMode ? [{ debugName: "previewStale" }] : /* istanbul ignore next */ []));
     constructor() {
+        this.form.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.formValue.set(this.form.getRawValue()));
         effect(() => {
-            const eventName = this.selectedEventName();
-            if (eventName) {
-                if (this.form.controls['event'].value !== eventName) {
-                    this.form.controls['event'].setValue(eventName, {
-                        emitEvent: false,
-                    });
+            const eventId = this.selectedEventId();
+            untracked(() => {
+                if (this.eventControl.value !== eventId) {
+                    this.eventControl.setValue(eventId, { emitEvent: false });
                 }
-            }
-            else {
-                this.form.controls['event'].setValue(null, { emitEvent: false });
-            }
+            });
         });
+        // A newly selected template replaces the editor; a write on the same
+        // template (recipients, publish, activation) never touches unsaved edits.
         effect(() => {
-            this.selectedTemplateId(); // depend on selected template id
-            const template = untracked(this.selectedTemplate);
-            if (template) {
-                this.patchForm(template);
-            }
-            else {
-                this.resetTemplateFields();
-            }
+            const templateId = this.selectedTemplateId();
+            this.activeTab.set(templateId);
+            untracked(() => {
+                this.conflict.set(false);
+                this.writeDiagnostics.set([]);
+                // Never leave the previous template's render (possibly another
+                // channel) on screen under the new one.
+                this.preview.clear();
+                this.renderPreviewNow = true;
+                const template = this.template();
+                if (template) {
+                    this.patchFromTemplate(template);
+                    this.activeField.set(defaultField(template.channel));
+                }
+                else {
+                    this.form.reset();
+                }
+            });
         });
         effect(() => {
-            const template = this.selectedTemplate();
-            if (!template) {
+            const eventId = this.selectedEventId();
+            const request = this.previewRequest();
+            // The field catalog supplies the preview's sample values; rendering
+            // before it arrives shows "-" and a warning per field for a moment. A
+            // failed catalog load still previews, just without samples. (Not keyed
+            // on the loading flag: a reload cancels and restarts the catalog read.)
+            if (eventId != null &&
+                this.context()?.eventId !== eventId &&
+                this.facade.contextError() == null) {
                 return;
             }
-            this.facade.loadPropertiesForCurrentContext(this.shouldUseMultilingualProperties());
+            untracked(() => {
+                if (eventId == null || request == null) {
+                    this.preview.clear();
+                }
+                else if (this.renderPreviewNow) {
+                    this.renderPreviewNow = false;
+                    this.preview.run(eventId, request);
+                }
+                else {
+                    this.preview.schedule(eventId, request);
+                }
+            });
         });
+        // Two columns only when the editor itself is wide enough. Hosts range from
+        // a full page to a builder drawer, so the viewport says little; a
+        // ResizeObserver is used rather than container queries, which re-parent
+        // PrimeNG's in-place overlays.
+        if (typeof ResizeObserver !== 'undefined') {
+            const observer = new ResizeObserver(([entry]) => this.wide.set(entry.contentRect.width >= WIDE_LAYOUT_MIN_WIDTH));
+            observer.observe(this.host.nativeElement);
+            this.destroyRef.onDestroy(() => observer.disconnect());
+        }
     }
-    // ============================================================================
-    // Event Handlers
-    // ============================================================================
-    onEventChange(eventName) {
-        if (eventName)
-            this.facade.selectEvent(eventName);
+    onBeforeUnload(event) {
+        if (this.dirty() || this.isMutating())
+            event.preventDefault();
+    }
+    // ==========================================================================
+    // Selection
+    // ==========================================================================
+    onEventChange(eventId) {
+        if (eventId == null) {
+            // Clearing the picker is not a selection; keep showing the current event.
+            this.eventControl.setValue(this.selectedEventId(), { emitEvent: false });
+            return;
+        }
+        if (eventId === this.selectedEventId())
+            return;
+        this.confirmDiscard().subscribe((discard) => {
+            if (discard) {
+                this.facade.selectEvent(eventId);
+            }
+            else {
+                this.eventControl.setValue(this.selectedEventId(), {
+                    emitEvent: false,
+                });
+            }
+        });
     }
     onTemplateTabChange(templateId) {
-        this.facade.selectTemplate(templateId);
-    }
-    // Channel is fixed per template - set on creation only
-    onAddProperty(propertyKey) {
-        if (!propertyKey)
+        const current = this.selectedTemplateId();
+        if (templateId === current)
             return;
-        const tag = `{{${propertyKey}}}`;
-        const ch = getChannelConfig(this.form.controls['channel'].value);
-        if (this.isBilingual(ch) && ch.translatableKey) {
-            const group = this.form.get(ch.translatableKey);
-            if (group) {
-                const enCtrl = group.get('en');
-                const arCtrl = group.get('ar');
-                enCtrl?.setValue(`${enCtrl.value ?? ''} ${tag}`);
-                arCtrl?.setValue(`${arCtrl.value ?? ''} ${tag}`);
+        this.activeTab.set(templateId);
+        this.confirmDiscard().subscribe((discard) => {
+            if (discard) {
+                this.facade.selectTemplate(templateId);
+            }
+            else {
+                this.activeTab.set(current);
             }
+        });
+    }
+    retryLoad() {
+        const eventId = this.selectedEventId();
+        if (this.facade.eventsError() || eventId == null) {
+            this.facade.loadEvents();
+            return;
         }
-        else if (ch.templateKey) {
-            this.appendToControl(ch.templateKey, tag);
+        this.facade.reloadDefaults(eventId);
+        this.facade.loadEvents();
+    }
+    // ==========================================================================
+    // Content editing
+    // ==========================================================================
+    setActiveField(field) {
+        this.activeField.set(field);
+    }
+    onInsertPlaceholder(key) {
+        if (!key)
+            return;
+        // After the select has finished applying its own pick, or the reset is overwritten.
+        setTimeout(() => this.placeholderControl.reset());
+        const field = this.activeField();
+        const label = this.placeholderOptions().find((item) => item.key === key)?.label;
+        const editor = field === 'emailTemplate'
+            ? this.emailEditor()
+            : field === 'appEn'
+                ? this.appEnEditor()
+                : field === 'appAr'
+                    ? this.appArEditor()
+                    : undefined;
+        if (editor) {
+            editor.insertToken(key, label);
+            return;
         }
+        // SMS: plain text at the caret.
+        const token = `{{${key}}}`;
+        const control = this.form.controls.smsTemplate;
+        const textarea = this.smsSource()?.nativeElement.querySelector('textarea');
+        const start = textarea?.selectionStart ?? control.value.length;
+        const end = textarea?.selectionEnd ?? start;
+        control.setValue(control.value.slice(0, start) + token + control.value.slice(end));
+        const caret = start + token.length;
+        // ngModel writes the new value into the textarea asynchronously, which
+        // moves the caret to the end; restore it after that write.
         setTimeout(() => {
-            this.propertyPickerControl.reset();
-        }, 0);
+            textarea?.focus();
+            textarea?.setSelectionRange(caret, caret);
+        });
     }
-    onAddReceiver(receiverId) {
-        const template = this.selectedTemplate();
-        if (!receiverId || !template) {
-            setTimeout(() => this.receiverPickerControl.reset(), 0);
+    onSave() {
+        const template = this.template();
+        if (!template || !this.canSave()) {
+            this.form.markAllAsTouched();
             return;
         }
-        if (this.addingReceiverIds().includes(receiverId)) {
-            setTimeout(() => this.receiverPickerControl.reset(), 0);
+        this.facade
+            .saveTemplate(template.id, this.buildSavePayload(template))
+            .subscribe({
+            next: () => {
+                const saved = this.template();
+                // Show exactly what the server stored (it sanitizes on save).
+                if (saved)
+                    this.patchFromTemplate(saved);
+                this.afterWrite('saved');
+            },
+            error: (error) => this.onWriteError(error),
+        });
+    }
+    onDiscard() {
+        // Discarded edits cannot be brought back, so ask first (as switching does).
+        this.confirmDiscard().subscribe((discard) => {
+            const template = this.template();
+            if (discard && template)
+                this.patchFromTemplate(template);
+        });
+    }
+    // ==========================================================================
+    // Recipients
+    // ==========================================================================
+    onAddRecipient(key) {
+        const template = this.template();
+        setTimeout(() => this.recipientControl.reset());
+        if (!key || !template || this.isMutating())
             return;
-        }
-        const selectedReceiver = this.availableReceivers().find((r) => r.id === receiverId);
-        if (!selectedReceiver) {
-            setTimeout(() => this.receiverPickerControl.reset(), 0);
+        const option = this.recipientGroups()
+            .flatMap((group) => group.items)
+            .find((item) => item.key === key);
+        if (!option)
             return;
-        }
-        this.addingReceiverIds.update((ids) => [...ids, receiverId]);
         this.facade
-            .addReceivers(template.id, {
-            receivers: [
-                {
-                    id: selectedReceiver.id,
-                    type: selectedReceiver.type,
-                },
-            ],
-        })
+            .addReceivers(template.id, template.revision, [
+            { type: option.type, id: option.id },
+        ])
             .subscribe({
-            complete: () => this.addingReceiverIds.update((ids) => ids.filter((id) => id !== receiverId)),
-            error: () => this.addingReceiverIds.update((ids) => ids.filter((id) => id !== receiverId)),
+            next: () => this.afterWrite(null),
+            error: (error) => this.onWriteError(error),
         });
-        setTimeout(() => this.receiverPickerControl.reset(), 0);
     }
-    onDeleteReceiver(receiver) {
-        this.confirmationService.confirmDelete({
+    onRemoveRecipient(receiver) {
+        const template = this.template();
+        if (!template || receiver.isSystem || this.isMutating())
+            return;
+        this.confirmation.confirmDelete({
             type: 'dialog',
-            accept: () => {
-                this.deletingReceiverIds.update((ids) => [...ids, receiver.id]);
-                this.facade.deleteReceiver(receiver.id).subscribe({
-                    complete: () => {
-                        this.deletingReceiverIds.update((ids) => ids.filter((id) => id !== receiver.id));
-                    },
-                    error: () => {
-                        this.deletingReceiverIds.update((ids) => ids.filter((id) => id !== receiver.id));
-                    },
-                });
+            message: this.messages.t('recipients.remove-message', {
+                name: this.receiverName(receiver),
+            }),
+            accept: () => this.facade.deleteReceiver(receiver.id, template.revision).subscribe({
+                next: () => this.afterWrite(null),
+                error: (error) => this.onWriteError(error),
+            }),
+        });
+    }
+    /**
+     * The catalog's name first: ready-made templates come back with the raw
+     * identifier as their saved name (`creator`), while the catalog has the
+     * localized label.
+     */
+    receiverName(receiver) {
+        const fromCatalog = this.receiverLabels().get(recipientKey(receiver.type, receiver.identifier).toLowerCase());
+        if (fromCatalog)
+            return fromCatalog;
+        const name = receiver.name;
+        if (typeof name === 'string')
+            return name || receiver.identifier || '';
+        const ar = this.lang() === 'ar';
+        return ((ar ? name?.ar : name?.en) || name?.display || receiver.identifier || '');
+    }
+    // ==========================================================================
+    // Lifecycle
+    // ==========================================================================
+    onPublish() {
+        const template = this.template();
+        if (!template || !this.canPublish())
+            return;
+        const revision = template.revision;
+        this.review('publish', {
+            request: templatePreviewRequest(template),
+            recipients: template.receivers.map((receiver) => ({
+                name: this.receiverName(receiver),
+                type: receiver.type,
+            })),
+            condition: template.conditionFormula,
+            isEnabled: template.isEnabled,
+        }).subscribe((reviews) => this.facade.publish(template.id, revision, reviews).subscribe({
+            next: () => this.afterWrite('published'),
+            error: (error) => this.onWriteError(error),
+        }));
+    }
+    onTurnOn() {
+        const template = this.template();
+        if (!template || !this.canTurnOn())
+            return;
+        const publication = currentPublication(template, this.publications());
+        if (!publication)
+            return;
+        const revision = template.revision;
+        // Turning on sends the *published* version — review that, not the draft.
+        this.review('enable', publicationReview(publication, (receiver) => this.receiverName(receiver))).subscribe((reviews) => this.facade.turnOn(template.id, revision, reviews).subscribe({
+            next: () => this.afterWrite('turned-on'),
+            error: (error) => this.onWriteError(error),
+        }));
+    }
+    onTurnOff() {
+        const template = this.template();
+        if (!template || this.isMutating())
+            return;
+        const revision = template.revision;
+        this.confirmation.confirm({
+            type: 'dialog',
+            header: this.messages.t('turn-off.header'),
+            message: this.messages.t('turn-off.message'),
+            icon: 'general.toggle-01-left',
+            acceptLabel: this.messages.t('actions.turn-off'),
+            acceptButton: { severity: 'danger' },
+            accept: () => this.facade.turnOff(template.id, revision).subscribe({
+                next: () => this.afterWrite('turned-off'),
+                error: (error) => this.onWriteError(error),
+            }),
+        });
+    }
+    onOpenHistory() {
+        const eventId = this.selectedEventId();
+        if (eventId == null)
+            return;
+        const ref = this.modal.openModal(TemplateHistoryDrawer, 'drawer', {
+            header: this.messages.t('history.title'),
+            styleClass: DRAWER_STYLE_CLASS,
+            position: 'end',
+            dismissableMask: true,
+            dismissible: true,
+            inputValues: {
+                eventId,
+                draftDirty: this.dirty(),
+                historyLimit: this.context()?.publicationHistoryLimit ?? null,
             },
         });
+        ref.onClose.subscribe((result) => {
+            if (result?.publication)
+                this.restoreVersion(result.publication);
+        });
     }
-    isReceiverDeleting(receiverId) {
-        return this.deletingReceiverIds().includes(receiverId);
+    restoreVersion(publication) {
+        const template = this.template();
+        if (!template || this.dirty() || this.isMutating())
+            return;
+        const revision = template.revision;
+        this.review('restore', {
+            ...publicationReview(publication, (receiver) => this.receiverName(receiver)),
+            isEnabled: template.isEnabled,
+        }).subscribe((reviews) => this.facade
+            .restorePublication(template.id, revision, publication.revision, reviews)
+            .subscribe({
+            next: () => {
+                const restored = this.template();
+                if (restored)
+                    this.patchFromTemplate(restored);
+                this.afterWrite('restored');
+            },
+            error: (error) => this.onWriteError(error),
+        }));
     }
-    onSaveTemplate() {
-        const template = this.selectedTemplate();
-        if (!template || this.isFormInvalid()) {
-            this.form.markAllAsTouched();
+    onDelete() {
+        const template = this.template();
+        if (!template || template.isSystem || this.isMutating())
             return;
-        }
-        // Build payload dynamically from all channel controls
-        const payload = this.buildUpdatePayload(template);
-        this.facade.updateTemplate(template.id, payload).subscribe({
-            next: () => this.form.markAsPristine(),
+        this.confirmation.confirmDelete({
+            type: 'dialog',
+            message: this.messages.t(this.defaultOwned() ? 'delete.default-message' : 'delete.message'),
+            accept: () => this.facade.deleteTemplate(template.id, template.revision).subscribe({
+                next: () => this.toast.success(this.messages.t('toast.deleted')),
+                error: (error) => this.onWriteError(error),
+            }),
+        });
+    }
+    onAddTemplate() {
+        const event = this.selectedEvent();
+        if (!event || this.isMutating())
+            return;
+        this.confirmDiscard().subscribe((discard) => {
+            if (!discard)
+                return;
+            const ref = this.modal.openModal(AddTemplateDialog, 'dialog', {
+                header: this.messages.t('addTemplate'),
+                styleClass: '!w-[34rem] max-w-[96vw]',
+                dismissible: true,
+                inputValues: {
+                    channels: this.context()?.channels ?? NOTIFICATION_CHANNELS,
+                },
+            });
+            ref.onClose.subscribe((result) => {
+                if (!result)
+                    return;
+                this.facade
+                    .createTemplate(event.id, {
+                    channel: result.channel,
+                    name: result.name,
+                    subject: null,
+                    emailTemplate: null,
+                    smsTemplate: null,
+                    appTemplate: null,
+                    conditionFormula: null,
+                    receivers: [],
+                })
+                    .subscribe({
+                    next: () => this.afterWrite('created'),
+                    error: (error) => this.onWriteError(error),
+                });
+            });
         });
     }
     onTestEmail() {
         const event = this.selectedEvent();
-        const template = this.selectedTemplate();
-        if (!event || !template || this.form.controls['channel'].value !== 'email')
+        const template = this.template();
+        if (!event || !template || template.channel !== 'Email')
             return;
-        if (this.form.dirty) {
-            this.toast.warn(this.transloco.translate('notification.saveBeforeEmailTest'));
+        if (this.dirty()) {
+            this.toast.warn(this.messages.t('saveBeforeEmailTest'));
             return;
         }
-        const eventId = toNumericId(event.id);
-        const templateId = toNumericId(template.id);
-        if (eventId === null || templateId === null)
-            return;
-        this.modalService.openModal(EmailUserTestDialog, 'dialog', {
-            header: this.transloco.translate('notification.testEmail'),
+        // Sends the saved draft — never the editor's unsaved values.
+        this.modal.openModal(EmailUserTestDialog, 'dialog', {
+            header: this.messages.t('testEmail'),
             styleClass: '!w-[96vw] sm:!w-[38rem]',
             inputValues: {
                 kind: 'template',
-                eventId,
-                templateId,
-                sourceLabel: `${event.name} — ${template.name}`,
-                placeholderFields: buildEmailTemplatePlaceholderFields(collectEmailTemplatePlaceholders(template.emailTemplate, template.emailContentTranslatable?.en, template.emailContentTranslatable?.ar), this.propertyGroups().flatMap((group) => group.properties), this.transloco.getActiveLang()),
+                eventId: event.id,
+                templateId: template.id,
+                sourceLabel: `${event.name} — ${template.name ?? ''}`,
+                // The same readable values as the preview, instead of a field per
+                // placeholder.
+                sampleValues: previewSamples({
+                    channel: 'Email',
+                    subject: template.subject,
+                    emailTemplate: template.emailTemplate,
+                }, this.context()?.properties ?? [], this.transloco.getActiveLang()),
             },
         });
     }
-    onDeleteTemplate() {
-        const template = this.selectedTemplate();
-        if (!template || template.isSystem)
+    // ==========================================================================
+    // Defaults
+    // ==========================================================================
+    onInitializeDefaults() {
+        const eventId = this.selectedEventId();
+        if (eventId == null || this.isMutating())
             return;
-        this.confirmationService.confirm({
-            type: 'dialog',
-            message: this.transloco.translate('notification.deleteTemplateMessage'),
-            icon: 'general.trash-01',
-            acceptButton: { severity: 'danger' },
-            accept: () => this.facade.deleteTemplate(template.id),
+        const autoApp = (this.defaults()?.recipes ?? []).some((recipe) => recipe.autoPublishApp &&
+            this.missingDefaults().includes(recipe.channel));
+        this.facade.initializeDefaults(eventId).subscribe({
+            next: () => this.toast.success(this.messages.t(autoApp ? 'defaults.added-app-on' : 'defaults.added')),
+            error: (error) => this.onWriteError(error),
         });
     }
-    onAddTemplateClick() {
-        const event = this.selectedEvent();
-        if (!event)
+    onRestoreDefault(channel) {
+        const eventId = this.selectedEventId();
+        if (eventId == null || this.isMutating())
             return;
-        const ref = this.modalService.openModal(AddTemplateDialog, 'dialog', {
-            header: this.transloco.translate('notification.addTemplate'),
-            styleClass: '!w-[25rem]',
-        });
-        ref.onClose.subscribe((result) => {
-            if (result?.name) {
-                this.facade.addTemplate(event.id, {
-                    name: result.name,
-                    channel: this.form.controls['channel'].value,
-                });
-            }
+        // Review the catalog as it is now, not as it was when the page loaded.
+        this.facade.reloadDefaults(eventId).subscribe(() => {
+            const defaults = this.defaults();
+            const slot = defaults?.slots.find((item) => item.channel === channel && item.templateId == null);
+            const recipe = defaults?.recipes.find((item) => item.channel === channel);
+            if (!slot || !recipe)
+                return;
+            this.review('restoreDefault', {
+                request: templatePreviewRequest(recipe.draft),
+                recipients: recipe.draft.receivers.map((receiver) => ({
+                    name: this.receiverName(receiver),
+                    type: receiver.type,
+                })),
+                condition: recipe.draft.conditionFormula,
+            }).subscribe(() => this.facade
+                .restoreDefault(eventId, {
+                channel,
+                expectedSlotRevision: slot.revision,
+                recipeHash: recipe.recipeHash,
+            })
+                .subscribe({
+                next: () => this.afterWrite('default-restored'),
+                error: (error) => this.onWriteError(error),
+            }));
         });
     }
-    // ============================================================================
-    // Private Methods
-    // ============================================================================
+    // ==========================================================================
+    // Conflicts and errors
+    // ==========================================================================
     /**
-     * Clears every template-owned control back to the captured empty shape.
-     *
-     * `event` is deliberately excluded, so `patchValue` leaves whatever the event
-     * effect (or the user's own pick) put in that control. An event with no
-     * templates yet — a brand-new one, or one whose last template was just
-     * deleted — resolves `selectedTemplate` to null, and this effect runs after
-     * the event effect in the same flush: resetting the whole group there would
-     * blank the event picker the user just used, while `selectedEvent()` stays
-     * truthy and keeps the tabs/add-template row visible. Leaving the control
-     * alone also keeps the two effects ordering-independent — on a full
-     * `ResetNotificationState` the event effect has already nulled it, and that
-     * null is carried through.
-     *
-     * `channel` is restored through {@link channelControl} with events enabled
-     * because `channelSignal` is a `toSignal` of its `valueChanges` and is the
-     * only consumer of them on this form — a silent reset would leave
-     * `activeChannel()` reporting the previous template's channel.
+     * After a revision conflict: re-read the latest version, then either keep
+     * the user's edits on top of it (the next Save applies them deliberately)
+     * or replace them with what is saved.
      */
-    resetTemplateFields() {
-        const { event: _event, channel, ...templateFields } = this.emptyFormValue;
-        this.form.patchValue(templateFields, { emitEvent: false });
-        this.channelControl.setValue(channel);
-        this.form.markAsPristine();
-        this.form.markAsUntouched();
-    }
-    appendToControl(key, value) {
-        const ctrl = this.form.controls[key];
-        ctrl?.setValue(`${ctrl.value ?? ''} ${value}`);
-    }
-    patchForm(template) {
-        const channel = template.channel || 'email';
-        this.form.patchValue({
-            name: template.name,
-            channel: channel,
-        });
-        // Patch all channel controls dynamically
-        const t = template;
-        for (const ch of CHANNEL_CONFIGS) {
-            if (ch.templateKey) {
-                this.form
-                    .get(ch.templateKey)
-                    ?.setValue(t[ch.templateKey] ?? '');
-            }
-            if (ch.translatableKey) {
-                const trans = t[ch.translatableKey] ?? {};
-                this.form.get(ch.translatableKey)?.patchValue({
-                    en: trans.en ?? '',
-                    ar: trans.ar ?? '',
-                });
+    resolveConflict(keepMine) {
+        this.facade.loadEvents().subscribe(() => {
+            if (!keepMine) {
+                const template = this.template();
+                if (template)
+                    this.patchFromTemplate(template);
             }
+            this.conflict.set(false);
+        });
+    }
+    describeDiagnostic(diagnostic) {
+        return this.messages.diagnostic(diagnostic);
+    }
+    channelLabel(channel) {
+        return this.messages.channel(channel);
+    }
+    afterWrite(toastKey) {
+        this.writeDiagnostics.set([]);
+        const template = this.template();
+        // The write committed even when its audit record did not; never repeat it.
+        if (template?.auditState === 'Failed') {
+            this.toast.warn(this.messages.t('toast.audit-warning'));
+            return;
         }
+        if (toastKey)
+            this.toast.success(this.messages.t(`toast.${toastKey}`));
     }
-    buildUpdatePayload(template) {
-        const title = this.form.controls['name'].value?.trim() || template.name;
-        // The backend treats this PUT as a full replace: any channel template
-        // omitted from the payload is nulled out. Always send email/sms/app
-        // together — patchForm() populates every channel control from the loaded
-        // template, so channels not edited this session keep their values.
-        const payload = { title };
-        const target = payload;
-        for (const ch of CHANNEL_CONFIGS) {
-            if (ch.templateKey) {
-                target[ch.templateKey] = this.getTemplateControlValue(ch.templateKey);
-            }
-            if (ch.translatableKey) {
-                target[ch.translatableKey] = this.getTranslatableControlValue(ch.translatableKey);
-            }
+    onWriteError(error) {
+        const failure = readNotificationFailure(error);
+        if (isRevisionConflict(failure)) {
+            this.conflict.set(true);
+            return;
+        }
+        this.writeDiagnostics.set(failure.diagnostics);
+        this.toast.error(this.messages.code(failure.code));
+        const eventId = this.selectedEventId();
+        if (eventId != null &&
+            (failure.code === 'NOTIFICATION_RECIPE_CHANGED' ||
+                failure.code === 'NOTIFICATION_DEFAULT_ALREADY_PRESENT' ||
+                failure.code === 'NOTIFICATION_DEFAULT_ADOPTION_AMBIGUOUS')) {
+            this.facade.reloadDefaults(eventId);
+        }
+        else if (failure.code?.endsWith('_NOT_FOUND')) {
+            this.facade.loadEvents();
         }
-        return payload;
     }
-    getTemplateControlValue(controlName) {
-        const control = this.form.get(controlName);
-        return control?.value ?? '';
+    // ==========================================================================
+    // Helpers
+    // ==========================================================================
+    review(mode, content) {
+        const eventId = this.selectedEventId();
+        if (eventId == null)
+            return of();
+        const ref = this.modal.openModal(TemplateReviewDialog, 'dialog', {
+            header: this.messages.t(`review.title.${mode}`),
+            styleClass: '!w-[96vw] lg:!w-[52rem]',
+            dismissible: true,
+            inputValues: {
+                mode,
+                eventId,
+                request: this.withSamples(content.request),
+                recipients: content.recipients,
+                condition: content.condition,
+                requireLanguageReview: mode !== 'restoreDefault' && this.defaultOwned(),
+                isEnabled: content.isEnabled ?? false,
+            },
+        });
+        return ref.onClose.pipe(filter((result) => !!result), map((result) => result));
+    }
+    /** Readable sample values for every field the previewed content uses. */
+    withSamples(request) {
+        return withPreviewSamples(request, this.context()?.properties ?? [], this.lang());
+    }
+    confirmDiscard() {
+        if (!this.dirty())
+            return of(true);
+        return new Observable((subscriber) => {
+            this.confirmation.confirm({
+                type: 'dialog',
+                header: this.messages.t('unsaved.header'),
+                message: this.messages.t('unsaved.message'),
+                acceptLabel: this.messages.t('unsaved.discard'),
+                rejectLabel: this.messages.t('unsaved.stay'),
+                acceptButton: { severity: 'danger' },
+                accept: () => {
+                    subscriber.next(true);
+                    subscriber.complete();
+                },
+                reject: () => {
+                    subscriber.next(false);
+                    subscriber.complete();
+                },
+            });
+        });
     }
-    getTranslatableControlValue(controlName) {
-        const group = this.form.get(controlName);
-        const value = group?.getRawValue();
+    patchFromTemplate(template) {
+        this.form.reset({
+            name: template.name ?? '',
+            subject: template.subject ?? '',
+            emailTemplate: template.emailTemplate ?? '',
+            smsTemplate: template.smsTemplate ?? '',
+            appEn: template.appTemplate?.en ?? '',
+            appAr: template.appTemplate?.ar ?? '',
+            conditionFormula: template.conditionFormula ?? '',
+        });
+        this.formValue.set(this.form.getRawValue());
+    }
+    /** Replacement semantics: only the template's own channel field is sent. */
+    buildSavePayload(template) {
+        const value = this.form.getRawValue();
+        const condition = value.conditionFormula.trim();
         return {
-            en: value?.en ?? '',
-            ar: value?.ar ?? '',
+            expectedRevision: template.revision,
+            name: value.name.trim(),
+            subject: template.channel === 'Email' ? value.subject.trim() || null : null,
+            emailTemplate: template.channel === 'Email' ? value.emailTemplate : null,
+            smsTemplate: template.channel === 'Sms' ? value.smsTemplate : null,
+            appTemplate: template.channel === 'App'
+                ? { en: value.appEn, ar: value.appAr }
+                : null,
+            conditionFormula: condition || null,
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationTemplate, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NotificationTemplate, isStandalone: true, selector: "mt-notification-template", ngImport: i0, template: "<div class=\"flex flex-col gap-4 p-4\" [formGroup]=\"form\">\r\n  <!-- Loading State -->\r\n  @if (isLoadingEvents()) {\r\n    <div class=\"flex flex-col gap-4\">\r\n      <div class=\"w-1/2\">\r\n        <p-skeleton width=\"4rem\" height=\"1rem\" styleClass=\"mb-2\" />\r\n        <p-skeleton width=\"100%\" height=\"2.5rem\" borderRadius=\"0.5rem\" />\r\n      </div>\r\n      <div class=\"flex items-center justify-between\">\r\n        <div class=\"flex gap-2\">\r\n          <p-skeleton width=\"5rem\" height=\"2.25rem\" borderRadius=\"0.5rem\" />\r\n          <p-skeleton width=\"5rem\" height=\"2.25rem\" borderRadius=\"0.5rem\" />\r\n          <p-skeleton width=\"5rem\" height=\"2.25rem\" borderRadius=\"0.5rem\" />\r\n        </div>\r\n        <p-skeleton width=\"8rem\" height=\"2.25rem\" borderRadius=\"0.5rem\" />\r\n      </div>\r\n      <p-skeleton width=\"100%\" height=\"2.5rem\" borderRadius=\"0.5rem\" />\r\n      <p-skeleton width=\"100%\" height=\"2.5rem\" borderRadius=\"0.5rem\" />\r\n      <p-skeleton width=\"100%\" height=\"8rem\" borderRadius=\"0.5rem\" />\r\n      <div class=\"flex justify-end gap-2 pt-4\">\r\n        <p-skeleton width=\"6rem\" height=\"2.5rem\" borderRadius=\"0.5rem\" />\r\n        <p-skeleton width=\"6rem\" height=\"2.5rem\" borderRadius=\"0.5rem\" />\r\n      </div>\r\n    </div>\r\n  } @else if (events().length === 0) {\r\n    <!-- Empty State -->\r\n    <mt-card>\r\n      <div\r\n        class=\"flex flex-col items-center justify-center py-12 text-slate-500\"\r\n      >\r\n        <mt-icon icon=\"alert.alert-circle\" class=\"mb-2 h-12 w-12\" />\r\n        <p>{{ \"notification.noEventsFound\" | transloco }}</p>\r\n      </div>\r\n    </mt-card>\r\n  } @else {\r\n    <!-- Event Selector -->\r\n    <div class=\"w-1/2\">\r\n      <mt-select-field\r\n        formControlName=\"event\"\r\n        [options]=\"events()\"\r\n        [optionLabel]=\"'name'\"\r\n        [optionValue]=\"'eventName'\"\r\n        [label]=\"'notification.events' | transloco\"\r\n        [placeholder]=\"'notification.selectEvent' | transloco\"\r\n        [required]=\"true\"\r\n        [filter]=\"false\"\r\n        (onChange)=\"onEventChange($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (selectedEvent()) {\r\n      <!-- Template Tabs + Add notification -->\r\n      <div class=\"flex items-center justify-between gap-2\">\r\n        <mt-tabs\r\n          [active]=\"selectedTemplateId()\"\r\n          [options]=\"templateTabs()\"\r\n          (activeChange)=\"onTemplateTabChange($event)\"\r\n        />\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          [label]=\"'notification.addNotification' | transloco\"\r\n          size=\"small\"\r\n          [loading]=\"isAddingTemplate()\"\r\n          (onClick)=\"onAddTemplateClick()\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Template Content -->\r\n      @if (selectedTemplate(); as template) {\r\n        <div class=\"flex flex-col gap-4\">\r\n          <!-- Name -->\r\n          <div class=\"w-full\">\r\n            <mt-text-field\r\n              formControlName=\"name\"\r\n              [label]=\"'notification.name' | transloco\"\r\n              [placeholder]=\"'notification.enterName' | transloco\"\r\n              [required]=\"true\"\r\n            />\r\n          </div>\r\n          <!-- Channel & Properties Picker -->\r\n          <div class=\"flex flex-col gap-4\">\r\n            <mt-select-field\r\n              formControlName=\"channel\"\r\n              [options]=\"channelOptions()\"\r\n              [optionLabel]=\"'name'\"\r\n              [optionValue]=\"'key'\"\r\n              [label]=\"'notification.channel.label' | transloco\"\r\n              [placeholder]=\"'notification.selectChannel' | transloco\"\r\n              [required]=\"true\"\r\n              [filter]=\"false\"\r\n              [disabled]=\"true\"\r\n            />\r\n            <mt-select-field\r\n              [options]=\"propertyGroups()\"\r\n              [optionLabel]=\"'name'\"\r\n              [optionValue]=\"'key'\"\r\n              [group]=\"true\"\r\n              [optionGroupLabel]=\"'groupName'\"\r\n              [optionGroupChildren]=\"'properties'\"\r\n              [label]=\"'notification.propertiesList' | transloco\"\r\n              [placeholder]=\"'notification.selectProperty' | transloco\"\r\n              [hasPlaceholderPrefix]=\"false\"\r\n              [filter]=\"true\"\r\n              [filterBy]=\"'name'\"\r\n              [loading]=\"isLoadingProperties()\"\r\n              [formControl]=\"propertyPickerControl\"\r\n              (onChange)=\"onAddProperty($event)\"\r\n            />\r\n          </div>\r\n          <!-- Channel Content Editors -->\r\n          @for (ch of channelConfigs; track ch.key) {\r\n            @if (form.controls[\"channel\"].value === ch.key) {\r\n              <!-- Bilingual Content Fields -->\r\n              @if (isBilingual(ch) && ch.translatableKey) {\r\n                <ng-container [formGroupName]=\"ch.translatableKey\">\r\n                  @if (ch.useRichEditor) {\r\n                    <mt-editor-field\r\n                      formControlName=\"en\"\r\n                      [label]=\"'notification.english' | transloco\"\r\n                      dir=\"ltr\"\r\n                    />\r\n                    <mt-editor-field\r\n                      formControlName=\"ar\"\r\n                      [label]=\"'notification.arabic' | transloco\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  } @else {\r\n                    <mt-textarea-field\r\n                      formControlName=\"en\"\r\n                      [label]=\"'notification.english' | transloco\"\r\n                      [rows]=\"'6'\"\r\n                      dir=\"ltr\"\r\n                    />\r\n                    <mt-textarea-field\r\n                      formControlName=\"ar\"\r\n                      [label]=\"'notification.arabic' | transloco\"\r\n                      [rows]=\"'6'\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  }\r\n                </ng-container>\r\n              } @else if (ch.templateKey) {\r\n                <!-- Non-Bilingual Content Field -->\r\n                @if (ch.useRichEditor) {\r\n                  <mt-editor-field\r\n                    [formControlName]=\"ch.templateKey\"\r\n                    [label]=\"'notification.notificationBody' | transloco\"\r\n                  />\r\n                } @else {\r\n                  <mt-textarea-field\r\n                    [formControlName]=\"ch.templateKey\"\r\n                    [label]=\"'notification.notificationBody' | transloco\"\r\n                    [rows]=\"'6'\"\r\n                  />\r\n                }\r\n              }\r\n              <!-- Bilingual Toggle -->\r\n              @if (ch.bilingualOptional) {\r\n                <mt-toggle-field\r\n                  [formControlName]=\"ch.key + 'Bilingual'\"\r\n                  [label]=\"'notification.bilingual' | transloco\"\r\n                />\r\n              }\r\n            }\r\n          }\r\n          <!-- Receivers -->\r\n          <div class=\"w-full\">\r\n            <mt-select-field\r\n              [options]=\"availableReceiverGroups()\"\r\n              [optionLabel]=\"'name'\"\r\n              [optionValue]=\"'id'\"\r\n              [group]=\"true\"\r\n              [optionGroupLabel]=\"'groupName'\"\r\n              [optionGroupChildren]=\"'items'\"\r\n              [label]=\"'notification.receivers' | transloco\"\r\n              [placeholder]=\"'notification.selectReceiver' | transloco\"\r\n              [filter]=\"true\"\r\n              [filterBy]=\"'name'\"\r\n              [loading]=\"isLoadingReceivers()\"\r\n              [formControl]=\"receiverPickerControl\"\r\n              (onChange)=\"onAddReceiver($event)\"\r\n            />\r\n          </div>\r\n          @if ((template.receivers ?? []).length > 0) {\r\n            <div class=\"flex w-full flex-wrap gap-2\">\r\n              @for (receiver of template.receivers; track receiver.id) {\r\n                <div\r\n                  class=\"flex items-center gap-2 rounded-full border border-surface bg-surface-50 py-1 pe-2 ps-3 text-sm transition-colors hover:bg-surface-100\"\r\n                >\r\n                  <mt-icon\r\n                    icon=\"user.user-01\"\r\n                    class=\"h-4 w-4 shrink-0 text-slate-500\"\r\n                  />\r\n                  <span class=\"font-medium\">{{ receiver.name?.display }}</span>\r\n                  @if (!receiver.isSystem) {\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      size=\"small\"\r\n                      [text]=\"true\"\r\n                      [loading]=\"isReceiverDeleting(receiver.id)\"\r\n                      (onClick)=\"onDeleteReceiver(receiver)\"\r\n                    />\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n          <!-- Actions -->\r\n          <div class=\"flex justify-end gap-2 pt-4\">\r\n            @if (form.controls[\"channel\"].value === \"email\") {\r\n              <mt-button\r\n                icon=\"communication.send-01\"\r\n                [label]=\"'notification.testEmail' | transloco\"\r\n                severity=\"secondary\"\r\n                variant=\"outlined\"\r\n                [disabled]=\"\r\n                  form.dirty || isUpdatingTemplate() || isDeletingTemplate()\r\n                \"\r\n                (onClick)=\"onTestEmail()\"\r\n              />\r\n            }\r\n            @if (!template.isSystem) {\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                [label]=\"'notification.delete' | transloco\"\r\n                severity=\"danger\"\r\n                [loading]=\"isDeletingTemplate()\"\r\n                [disabled]=\"isUpdatingTemplate()\"\r\n                (onClick)=\"onDeleteTemplate()\"\r\n              />\r\n            }\r\n            <mt-button\r\n              icon=\"general.save-01\"\r\n              [label]=\"'notification.save' | transloco\"\r\n              [loading]=\"isUpdatingTemplate()\"\r\n              [disabled]=\"isDeletingTemplate() || isFormInvalid()\"\r\n              (onClick)=\"onSaveTemplate()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <!-- No template selected -->\r\n        <div\r\n          class=\"flex flex-col items-center justify-center py-12 text-slate-500\"\r\n        >\r\n          <mt-icon icon=\"alert.bell-01\" class=\"mb-2 h-12 w-12\" />\r\n          <p>{{ \"notification.selectTemplatePrompt\" | transloco }}</p>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep mt-textarea-field>.flex.items-center,:host ::ng-deep mt-editor-field>.flex.items-center{direction:ltr}:host-context([dir=rtl]) ::ng-deep mt-textarea-field>.flex.items-center,:host-context([dir=rtl]) ::ng-deep mt-editor-field>.flex.items-center{direction:rtl}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: TranslocoModule }, { kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { 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: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: TextField, selector: "mt-text-field", inputs: ["field", "hint", "label", "placeholder", "class", "type", "readonly", "pInputs", "required", "maxLength", "icon", "iconPosition"] }, { kind: "component", type: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "component", type: EditorField, selector: "mt-editor-field", inputs: ["label", "hint", "placeholder", "readonly", "theme", "height", "dir", "modules", "required"] }, { kind: "component", type: ToggleField, selector: "mt-toggle-field", inputs: ["label", "inputId", "labelPosition", "placeholder", "readonly", "pInputs", "required", "toggleShape", "size", "icon", "descriptionCard"], outputs: ["onChange"] }, { kind: "component", type: Tabs, selector: "mt-tabs", inputs: ["options", "optionLabel", "optionValue", "active", "mode", "moreLabel", "defaultIcon", "size", "fluid", "disabled", "searchThreshold"], outputs: ["activeChange", "onChange"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NotificationTemplate, isStandalone: true, selector: "mt-notification-template", host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" } }, viewQueries: [{ propertyName: "emailEditor", first: true, predicate: ["emailEditor"], descendants: true, read: EmailVisualEditor, isSignal: true }, { propertyName: "appEnEditor", first: true, predicate: ["appEnEditor"], descendants: true, read: EmailVisualEditor, isSignal: true }, { propertyName: "appArEditor", first: true, predicate: ["appArEditor"], descendants: true, read: EmailVisualEditor, isSignal: true }, { propertyName: "smsSource", first: true, predicate: ["smsSource"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *transloco=\"let t; prefix: 'notification'\">\n  <div class=\"flex min-w-0 flex-col gap-4 p-4\">\n    @if (facade.isLoadingEvents() && events().length === 0) {\n      <div class=\"flex flex-col gap-4\" aria-live=\"polite\">\n        <p-skeleton width=\"50%\" height=\"2.5rem\" borderRadius=\"0.375rem\" />\n        <p-skeleton width=\"100%\" height=\"2.5rem\" borderRadius=\"0.375rem\" />\n        <p-skeleton width=\"100%\" height=\"16rem\" borderRadius=\"0.375rem\" />\n      </div>\n    } @else if (facade.eventsError() && events().length === 0) {\n      <mt-empty-state\n        illustration=\"none\"\n        [title]=\"t('load-error')\"\n        [actionLabel]=\"t('actions.retry')\"\n        actionIcon=\"arrow.refresh-cw-01\"\n        (actionClick)=\"retryLoad()\"\n      />\n    } @else if (events().length === 0) {\n      <mt-empty-state illustration=\"none\" [title]=\"t('noEventsFound')\" />\n    } @else {\n      <!-- Event -->\n      <div class=\"w-full md:w-1/2\">\n        <mt-select-field\n          [formControl]=\"eventControl\"\n          [options]=\"events()\"\n          optionLabel=\"name\"\n          optionValue=\"id\"\n          [label]=\"t('events')\"\n          [placeholder]=\"t('selectEvent')\"\n          [filter]=\"events().length > 8\"\n          filterBy=\"name\"\n          [showClear]=\"false\"\n          (onChange)=\"onEventChange($event)\"\n        />\n      </div>\n\n      @if (selectedEvent(); as event) {\n        <!-- Ready-made defaults -->\n        @if (missingDefaults().length > 0 || removedDefaults().length > 0) {\n          <div\n            class=\"flex flex-col gap-2 rounded-md border border-surface bg-surface-50 px-4 py-3 text-sm\"\n          >\n            @if (missingDefaults().length > 0) {\n              <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                <span class=\"flex items-center gap-2\">\n                  <mt-icon\n                    icon=\"general.zap\"\n                    class=\"size-4 shrink-0 text-primary\"\n                  />\n                  {{ t(\"defaults.missing\") }}\n                </span>\n                <mt-button\n                  size=\"small\"\n                  [label]=\"t('defaults.add')\"\n                  [loading]=\"facade.isLoading('initializeDefaults')\"\n                  [disabled]=\"isMutating()\"\n                  (onClick)=\"onInitializeDefaults()\"\n                />\n              </div>\n            }\n            @for (item of removedDefaults(); track item.slot.channel) {\n              <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                <span>{{\n                  t(\"defaults.removed\", {\n                    channel: channelLabel(item.slot.channel),\n                  })\n                }}</span>\n                <mt-button\n                  size=\"small\"\n                  severity=\"secondary\"\n                  variant=\"outlined\"\n                  [label]=\"t('defaults.restore')\"\n                  [disabled]=\"isMutating()\"\n                  (onClick)=\"onRestoreDefault(item.slot.channel)\"\n                />\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Templates of the event -->\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          @if (templates().length > 0) {\n            <mt-tabs\n              class=\"min-w-0 flex-1\"\n              mode=\"underline\"\n              [active]=\"activeTab()\"\n              [options]=\"templateTabs()\"\n              (activeChange)=\"onTemplateTabChange($event)\"\n            />\n          } @else {\n            <span class=\"text-sm text-muted-color\">{{\n              t(\"no-templates\")\n            }}</span>\n          }\n          <mt-button\n            icon=\"general.plus\"\n            [label]=\"t('addNotification')\"\n            size=\"small\"\n            [disabled]=\"isMutating() || !context()\"\n            (onClick)=\"onAddTemplate()\"\n          />\n        </div>\n\n        @if (facade.contextError() && !context()) {\n          <div\n            class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n            role=\"alert\"\n          >\n            <span>{{ t(\"context-error\") }}</span>\n            <mt-button\n              size=\"small\"\n              severity=\"secondary\"\n              variant=\"outlined\"\n              [label]=\"t('actions.retry')\"\n              (onClick)=\"retryLoad()\"\n            />\n          </div>\n        }\n\n        @if (template(); as template) {\n          @if (!context()) {\n            <div class=\"flex flex-col gap-3\">\n              <p-skeleton\n                width=\"100%\"\n                height=\"3.5rem\"\n                borderRadius=\"0.375rem\"\n              />\n              <p-skeleton width=\"100%\" height=\"20rem\" borderRadius=\"0.375rem\" />\n            </div>\n          } @else {\n            <!-- Status and actions -->\n            <div\n              class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-surface bg-content px-4 py-3\"\n            >\n              <div class=\"flex min-w-0 flex-wrap items-center gap-2 text-sm\">\n                <span\n                  class=\"inline-flex items-center gap-1 rounded-md border border-surface bg-surface-50 px-2 py-0.5\"\n                >\n                  <mt-icon\n                    [icon]=\"channelIcons[template.channel]\"\n                    class=\"size-4\"\n                  />\n                  {{ channelLabel(template.channel) }}\n                </span>\n                @switch (status()) {\n                  @case (\"on\") {\n                    <span\n                      class=\"rounded-md border border-green-200 bg-green-50 px-2 py-0.5 font-medium text-green-700\"\n                      [mtTooltip]=\"t('status.on-hint')\"\n                      >{{ t(\"status.on\") }}</span\n                    >\n                  }\n                  @case (\"off\") {\n                    <span\n                      class=\"rounded-md border border-surface bg-surface-50 px-2 py-0.5 font-medium text-muted-color\"\n                      [mtTooltip]=\"t('status.off-hint')\"\n                      >{{ t(\"status.off\") }}</span\n                    >\n                  }\n                  @case (\"draft\") {\n                    <span\n                      class=\"rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 font-medium text-amber-700\"\n                      [mtTooltip]=\"t('status.draft-hint')\"\n                      >{{ t(\"status.draft\") }}</span\n                    >\n                  }\n                }\n                @if (unpublishedChanges()) {\n                  <span\n                    class=\"rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-amber-700\"\n                    [mtTooltip]=\"t('status.unpublished-hint')\"\n                    >{{ t(\"status.unpublished\") }}</span\n                  >\n                }\n                @if (defaultOwned()) {\n                  <span\n                    class=\"rounded-md border border-surface bg-surface-50 px-2 py-0.5 text-muted-color\"\n                    >{{ t(\"status.default\") }}</span\n                  >\n                }\n                @if (dirty()) {\n                  <span\n                    class=\"rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-amber-700\"\n                    >{{ t(\"status.unsaved\") }}</span\n                  >\n                }\n              </div>\n\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <mt-button\n                  icon=\"time.clock-rewind\"\n                  severity=\"secondary\"\n                  variant=\"text\"\n                  [tooltip]=\"t('actions.history')\"\n                  [ariaLabel]=\"t('actions.history')\"\n                  [disabled]=\"template.publishedRevision === null\"\n                  (onClick)=\"onOpenHistory()\"\n                />\n                @if (template.channel === \"Email\") {\n                  <mt-button\n                    icon=\"communication.send-01\"\n                    severity=\"secondary\"\n                    variant=\"text\"\n                    [tooltip]=\"\n                      dirty() ? t('saveBeforeEmailTest') : t('testEmail')\n                    \"\n                    [ariaLabel]=\"t('testEmail')\"\n                    [disabled]=\"dirty() || isMutating()\"\n                    (onClick)=\"onTestEmail()\"\n                  />\n                }\n                @if (!template.isSystem) {\n                  <mt-button\n                    icon=\"general.trash-01\"\n                    severity=\"danger\"\n                    variant=\"text\"\n                    [tooltip]=\"t('actions.delete')\"\n                    [ariaLabel]=\"t('actions.delete')\"\n                    [loading]=\"facade.isLoading('deleteTemplate')\"\n                    [disabled]=\"isMutating()\"\n                    (onClick)=\"onDelete()\"\n                  />\n                }\n                @if (status() === \"on\") {\n                  <mt-button\n                    icon=\"general.toggle-01-left\"\n                    severity=\"secondary\"\n                    variant=\"outlined\"\n                    [label]=\"t('actions.turn-off')\"\n                    [loading]=\"facade.isLoading('setActivation')\"\n                    [disabled]=\"isMutating()\"\n                    (onClick)=\"onTurnOff()\"\n                  />\n                } @else {\n                  <mt-button\n                    icon=\"general.toggle-01-right\"\n                    severity=\"secondary\"\n                    variant=\"outlined\"\n                    [label]=\"t('actions.turn-on')\"\n                    [tooltip]=\"\n                      template.publishedRevision === null\n                        ? t('actions.turn-on-blocked')\n                        : ''\n                    \"\n                    [loading]=\"facade.isLoading('setActivation')\"\n                    [disabled]=\"!canTurnOn()\"\n                    (onClick)=\"onTurnOn()\"\n                  />\n                }\n                <mt-button\n                  icon=\"general.check\"\n                  severity=\"secondary\"\n                  variant=\"outlined\"\n                  [label]=\"t('actions.publish')\"\n                  [tooltip]=\"dirty() ? t('actions.save-first') : ''\"\n                  [loading]=\"facade.isLoading('publishTemplate')\"\n                  [disabled]=\"!canPublish()\"\n                  (onClick)=\"onPublish()\"\n                />\n                @if (dirty()) {\n                  <mt-button\n                    severity=\"secondary\"\n                    variant=\"text\"\n                    [label]=\"t('actions.discard')\"\n                    [disabled]=\"isMutating()\"\n                    (onClick)=\"onDiscard()\"\n                  />\n                }\n                <mt-button\n                  icon=\"general.save-01\"\n                  [label]=\"t('save')\"\n                  [loading]=\"facade.isLoading('saveTemplate')\"\n                  [disabled]=\"!canSave()\"\n                  (onClick)=\"onSave()\"\n                />\n              </div>\n            </div>\n\n            @if (conflict()) {\n              <div\n                class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700\"\n                role=\"alert\"\n              >\n                <span>{{ t(\"conflict.message\") }}</span>\n                <div class=\"flex flex-wrap gap-2\">\n                  <mt-button\n                    size=\"small\"\n                    severity=\"secondary\"\n                    variant=\"outlined\"\n                    [label]=\"t('conflict.keep-mine')\"\n                    (onClick)=\"resolveConflict(true)\"\n                  />\n                  <mt-button\n                    size=\"small\"\n                    severity=\"secondary\"\n                    [label]=\"t('conflict.load-latest')\"\n                    (onClick)=\"resolveConflict(false)\"\n                  />\n                </div>\n              </div>\n            }\n\n            @if (writeDiagnostics().length > 0) {\n              <ul\n                class=\"list-disc rounded-md border border-red-200 bg-red-50 py-3 pe-4 ps-8 text-sm text-red-700\"\n                role=\"alert\"\n              >\n                @for (diagnostic of writeDiagnostics(); track $index) {\n                  <li>{{ describeDiagnostic(diagnostic) }}</li>\n                }\n              </ul>\n            }\n\n            <div\n              class=\"grid min-w-0 gap-4\"\n              [class]=\"wide() ? 'grid-cols-2' : 'grid-cols-1'\"\n              [formGroup]=\"form\"\n            >\n              <!-- Content -->\n              <section\n                class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n              >\n                <header\n                  class=\"border-b border-surface bg-surface-50 px-4 py-2.5 text-sm font-semibold\"\n                >\n                  {{ t(\"sections.content\") }}\n                </header>\n                <div class=\"flex min-w-0 flex-col gap-4 p-4\">\n                  <mt-text-field\n                    formControlName=\"name\"\n                    [label]=\"t('name')\"\n                    [placeholder]=\"t('enterName')\"\n                    [required]=\"true\"\n                  />\n                  @if (template.channel === \"Email\") {\n                    <mt-text-field\n                      formControlName=\"subject\"\n                      [label]=\"t('subject')\"\n                      [hint]=\"t('subject-hint')\"\n                    />\n                  }\n                  <mt-select-field\n                    [formControl]=\"placeholderControl\"\n                    [options]=\"placeholderGroups()\"\n                    optionLabel=\"label\"\n                    optionValue=\"key\"\n                    [group]=\"true\"\n                    optionGroupLabel=\"groupName\"\n                    optionGroupChildren=\"properties\"\n                    [label]=\"t('placeholders.label')\"\n                    [hint]=\"t('placeholders.hint')\"\n                    [placeholder]=\"t('placeholders.placeholder')\"\n                    [hasPlaceholderPrefix]=\"false\"\n                    [filter]=\"true\"\n                    filterBy=\"label\"\n                    (onChange)=\"onInsertPlaceholder($event)\"\n                  />\n                  @switch (template.channel) {\n                    @case (\"Email\") {\n                      <mt-email-visual-editor\n                        #emailEditor\n                        formControlName=\"emailTemplate\"\n                        [label]=\"t('email-body')\"\n                        [hint]=\"t('email-body-hint')\"\n                        [placeholders]=\"placeholderOptions()\"\n                        [approvedImageOrigins]=\"emailImageOrigins()\"\n                        height=\"26rem\"\n                      />\n                    }\n                    @case (\"Sms\") {\n                      <div #smsSource (focusin)=\"setActiveField('smsTemplate')\">\n                        <mt-textarea-field\n                          dir=\"auto\"\n                          formControlName=\"smsTemplate\"\n                          [label]=\"t('sms-body')\"\n                          [hint]=\"t('sms-body-hint')\"\n                          rows=\"6\"\n                        />\n                      </div>\n                    }\n                    @case (\"App\") {\n                      <mt-email-visual-editor\n                        #appEnEditor\n                        formControlName=\"appEn\"\n                        [label]=\"t('english')\"\n                        direction=\"ltr\"\n                        [starter]=\"false\"\n                        [placeholders]=\"placeholderOptions()\"\n                        [approvedImageOrigins]=\"appImageOrigins()\"\n                        height=\"12rem\"\n                        (focused)=\"setActiveField('appEn')\"\n                      />\n                      <mt-email-visual-editor\n                        #appArEditor\n                        formControlName=\"appAr\"\n                        [label]=\"t('arabic')\"\n                        direction=\"rtl\"\n                        [starter]=\"false\"\n                        [placeholders]=\"placeholderOptions()\"\n                        [approvedImageOrigins]=\"appImageOrigins()\"\n                        height=\"12rem\"\n                        (focused)=\"setActiveField('appAr')\"\n                      />\n                    }\n                  }\n                </div>\n              </section>\n\n              <!-- Live preview -->\n              <section\n                class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n              >\n                <header\n                  class=\"border-b border-surface bg-surface-50 px-4 py-2.5 text-sm font-semibold\"\n                >\n                  {{ t(\"sections.preview\") }}\n                </header>\n                <div class=\"flex flex-1 flex-col p-4\">\n                  <mt-notification-content-preview\n                    [preview]=\"preview.result()\"\n                    [status]=\"preview.status()\"\n                    [errorCode]=\"preview.errorCode()\"\n                    [stale]=\"previewStale()\"\n                    [fill]=\"true\"\n                    [showSubject]=\"false\"\n                    (retry)=\"preview.retry()\"\n                  />\n                </div>\n              </section>\n\n              <!-- Recipients -->\n              <section\n                class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n              >\n                <header\n                  class=\"border-b border-surface bg-surface-50 px-4 py-2.5 text-sm font-semibold\"\n                >\n                  {{ t(\"sections.recipients\") }}\n                </header>\n                <div class=\"flex min-w-0 flex-col gap-3 p-4\">\n                  <mt-select-field\n                    [formControl]=\"recipientControl\"\n                    [options]=\"recipientGroups()\"\n                    optionLabel=\"name\"\n                    optionValue=\"key\"\n                    [group]=\"true\"\n                    optionGroupLabel=\"groupName\"\n                    optionGroupChildren=\"items\"\n                    [label]=\"t('recipients.add')\"\n                    [hint]=\"t('recipients.hint')\"\n                    [placeholder]=\"t('recipients.placeholder')\"\n                    [filter]=\"true\"\n                    filterBy=\"name\"\n                    [loading]=\"facade.isLoading('addReceivers')\"\n                    (onChange)=\"onAddRecipient($event)\"\n                  />\n                  @if (template.receivers.length > 0) {\n                    <ul class=\"flex flex-wrap gap-2\">\n                      @for (receiver of template.receivers; track receiver.id) {\n                        <li\n                          class=\"flex items-center gap-2 rounded-md border border-surface bg-surface-50 py-1 pe-1 ps-3 text-sm\"\n                        >\n                          <span class=\"font-medium\">{{\n                            receiverName(receiver)\n                          }}</span>\n                          <span class=\"text-xs text-muted-color\">{{\n                            t(\"recipient-type.\" + receiver.type)\n                          }}</span>\n                          @if (!receiver.isSystem) {\n                            <mt-button\n                              icon=\"general.x-close\"\n                              severity=\"secondary\"\n                              size=\"small\"\n                              [text]=\"true\"\n                              [ariaLabel]=\"t('recipients.remove')\"\n                              [disabled]=\"isMutating()\"\n                              (onClick)=\"onRemoveRecipient(receiver)\"\n                            />\n                          }\n                        </li>\n                      }\n                    </ul>\n                  } @else {\n                    <p class=\"text-sm text-amber-700\">\n                      {{ t(\"recipients.empty\") }}\n                    </p>\n                  }\n                </div>\n              </section>\n\n              <!-- Send only when -->\n              <section\n                class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n              >\n                <header\n                  class=\"border-b border-surface bg-surface-50 px-4 py-2.5 text-sm font-semibold\"\n                >\n                  {{ t(\"sections.condition\") }}\n                </header>\n                <div class=\"flex min-w-0 flex-col gap-2 p-4\">\n                  <p class=\"text-sm text-muted-color\">\n                    {{ t(\"condition.hint\") }}\n                  </p>\n                  <mt-formula-builder\n                    formControlName=\"conditionFormula\"\n                    valueMode=\"expression\"\n                    [isProcessBuilder]=\"true\"\n                    [propertiesByPath]=\"conditionPropertiesByPath()\"\n                    [knownProperties]=\"conditionKeys()\"\n                    [placeholder]=\"t('condition.placeholder')\"\n                  />\n                </div>\n              </section>\n            </div>\n          }\n        } @else if (templates().length > 0) {\n          <p class=\"py-8 text-center text-sm text-muted-color\">\n            {{ t(\"selectTemplatePrompt\") }}\n          </p>\n        }\n      }\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep mt-textarea-field>.flex.items-center,:host ::ng-deep mt-editor-field>.flex.items-center{direction:ltr}:host-context([dir=rtl]) ::ng-deep mt-textarea-field>.flex.items-center,:host-context([dir=rtl]) ::ng-deep mt-editor-field>.flex.items-center{direction:rtl}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: Button, selector: "mt-button", inputs: ["icon", "label", "tooltip", "class", "type", "styleClass", "severity", "badge", "variant", "badgeSeverity", "size", "iconPos", "autofocus", "fluid", "raised", "rounded", "text", "plain", "outlined", "link", "disabled", "loading", "pInputs", "ariaLabel"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: EmptyState, selector: "mt-empty-state", inputs: ["variant", "illustration", "title", "description", "actionLabel", "actionIcon"], outputs: ["actionClick"] }, { kind: "component", type: SelectField, selector: "mt-select-field", inputs: ["field", "hint", "label", "placeholder", "hasPlaceholderPrefix", "class", "readonly", "pInputs", "options", "optionValue", "optionLabel", "filter", "filterBy", "dataKey", "showClear", "clearAfterSelect", "required", "group", "size", "optionGroupLabel", "optionGroupChildren", "loading", "optionIcon", "optionIconColor", "optionIconShape", "optionAvatarShape", "optionGroupIcon", "optionGroupIconColor", "optionGroupIconShape", "optionGroupAvatarShape", "markCurrentUser"], outputs: ["onChange"] }, { kind: "component", type: 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: TextareaField, selector: "mt-textarea-field", inputs: ["field", "hint", "label", "placeholder", "class", "readonly", "noErrorStyle", "pInputs", "rows", "required", "maxLength"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }, { kind: "component", type: FormulaBuilder, selector: "mt-formula-builder", inputs: ["propertiesByPath", "levelSchemaId", "moduleId", "contextKey", "contextEntityTypeKey", "templateId", "placeholder", "hideToolbar", "hideStatusBar", "invalidWhenEmpty", "toolbarTabs", "functionCategories", "operators", "codeOnly", "builderOnly", "valueMode", "isProcessBuilder", "knownProperties"], outputs: ["validationChange", "tokensChange"] }, { kind: "component", type: EmailVisualEditor, selector: "mt-email-visual-editor", inputs: ["label", "hint", "placeholders", "layout", "height", "direction", "starter", "approvedImageOrigins"], outputs: ["focused"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "component", type: Skeleton, selector: "p-skeleton", inputs: ["styleClass", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "component", type: NotificationContentPreview, selector: "mt-notification-content-preview", inputs: ["preview", "status", "errorCode", "stale", "height", "fill", "showSubject"], outputs: ["retry"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NotificationTemplate, decorators: [{
             type: Component,
-            args: [{ selector: 'mt-notification-template', standalone: true, imports: [
-                        CommonModule,
+            args: [{ selector: 'mt-notification-template', imports: [
                         ReactiveFormsModule,
-                        TranslocoModule,
-                        Card,
+                        TranslocoDirective,
                         Button,
+                        EmptyState,
                         SelectField,
+                        Tabs,
                         TextField,
                         TextareaField,
-                        EditorField,
-                        ToggleField,
-                        Tabs,
+                        Tooltip,
+                        FormulaBuilder,
+                        EmailVisualEditor,
                         Icon,
                         Skeleton,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"flex flex-col gap-4 p-4\" [formGroup]=\"form\">\r\n  <!-- Loading State -->\r\n  @if (isLoadingEvents()) {\r\n    <div class=\"flex flex-col gap-4\">\r\n      <div class=\"w-1/2\">\r\n        <p-skeleton width=\"4rem\" height=\"1rem\" styleClass=\"mb-2\" />\r\n        <p-skeleton width=\"100%\" height=\"2.5rem\" borderRadius=\"0.5rem\" />\r\n      </div>\r\n      <div class=\"flex items-center justify-between\">\r\n        <div class=\"flex gap-2\">\r\n          <p-skeleton width=\"5rem\" height=\"2.25rem\" borderRadius=\"0.5rem\" />\r\n          <p-skeleton width=\"5rem\" height=\"2.25rem\" borderRadius=\"0.5rem\" />\r\n          <p-skeleton width=\"5rem\" height=\"2.25rem\" borderRadius=\"0.5rem\" />\r\n        </div>\r\n        <p-skeleton width=\"8rem\" height=\"2.25rem\" borderRadius=\"0.5rem\" />\r\n      </div>\r\n      <p-skeleton width=\"100%\" height=\"2.5rem\" borderRadius=\"0.5rem\" />\r\n      <p-skeleton width=\"100%\" height=\"2.5rem\" borderRadius=\"0.5rem\" />\r\n      <p-skeleton width=\"100%\" height=\"8rem\" borderRadius=\"0.5rem\" />\r\n      <div class=\"flex justify-end gap-2 pt-4\">\r\n        <p-skeleton width=\"6rem\" height=\"2.5rem\" borderRadius=\"0.5rem\" />\r\n        <p-skeleton width=\"6rem\" height=\"2.5rem\" borderRadius=\"0.5rem\" />\r\n      </div>\r\n    </div>\r\n  } @else if (events().length === 0) {\r\n    <!-- Empty State -->\r\n    <mt-card>\r\n      <div\r\n        class=\"flex flex-col items-center justify-center py-12 text-slate-500\"\r\n      >\r\n        <mt-icon icon=\"alert.alert-circle\" class=\"mb-2 h-12 w-12\" />\r\n        <p>{{ \"notification.noEventsFound\" | transloco }}</p>\r\n      </div>\r\n    </mt-card>\r\n  } @else {\r\n    <!-- Event Selector -->\r\n    <div class=\"w-1/2\">\r\n      <mt-select-field\r\n        formControlName=\"event\"\r\n        [options]=\"events()\"\r\n        [optionLabel]=\"'name'\"\r\n        [optionValue]=\"'eventName'\"\r\n        [label]=\"'notification.events' | transloco\"\r\n        [placeholder]=\"'notification.selectEvent' | transloco\"\r\n        [required]=\"true\"\r\n        [filter]=\"false\"\r\n        (onChange)=\"onEventChange($event)\"\r\n      />\r\n    </div>\r\n\r\n    @if (selectedEvent()) {\r\n      <!-- Template Tabs + Add notification -->\r\n      <div class=\"flex items-center justify-between gap-2\">\r\n        <mt-tabs\r\n          [active]=\"selectedTemplateId()\"\r\n          [options]=\"templateTabs()\"\r\n          (activeChange)=\"onTemplateTabChange($event)\"\r\n        />\r\n        <mt-button\r\n          icon=\"general.plus\"\r\n          [label]=\"'notification.addNotification' | transloco\"\r\n          size=\"small\"\r\n          [loading]=\"isAddingTemplate()\"\r\n          (onClick)=\"onAddTemplateClick()\"\r\n        />\r\n      </div>\r\n\r\n      <!-- Template Content -->\r\n      @if (selectedTemplate(); as template) {\r\n        <div class=\"flex flex-col gap-4\">\r\n          <!-- Name -->\r\n          <div class=\"w-full\">\r\n            <mt-text-field\r\n              formControlName=\"name\"\r\n              [label]=\"'notification.name' | transloco\"\r\n              [placeholder]=\"'notification.enterName' | transloco\"\r\n              [required]=\"true\"\r\n            />\r\n          </div>\r\n          <!-- Channel & Properties Picker -->\r\n          <div class=\"flex flex-col gap-4\">\r\n            <mt-select-field\r\n              formControlName=\"channel\"\r\n              [options]=\"channelOptions()\"\r\n              [optionLabel]=\"'name'\"\r\n              [optionValue]=\"'key'\"\r\n              [label]=\"'notification.channel.label' | transloco\"\r\n              [placeholder]=\"'notification.selectChannel' | transloco\"\r\n              [required]=\"true\"\r\n              [filter]=\"false\"\r\n              [disabled]=\"true\"\r\n            />\r\n            <mt-select-field\r\n              [options]=\"propertyGroups()\"\r\n              [optionLabel]=\"'name'\"\r\n              [optionValue]=\"'key'\"\r\n              [group]=\"true\"\r\n              [optionGroupLabel]=\"'groupName'\"\r\n              [optionGroupChildren]=\"'properties'\"\r\n              [label]=\"'notification.propertiesList' | transloco\"\r\n              [placeholder]=\"'notification.selectProperty' | transloco\"\r\n              [hasPlaceholderPrefix]=\"false\"\r\n              [filter]=\"true\"\r\n              [filterBy]=\"'name'\"\r\n              [loading]=\"isLoadingProperties()\"\r\n              [formControl]=\"propertyPickerControl\"\r\n              (onChange)=\"onAddProperty($event)\"\r\n            />\r\n          </div>\r\n          <!-- Channel Content Editors -->\r\n          @for (ch of channelConfigs; track ch.key) {\r\n            @if (form.controls[\"channel\"].value === ch.key) {\r\n              <!-- Bilingual Content Fields -->\r\n              @if (isBilingual(ch) && ch.translatableKey) {\r\n                <ng-container [formGroupName]=\"ch.translatableKey\">\r\n                  @if (ch.useRichEditor) {\r\n                    <mt-editor-field\r\n                      formControlName=\"en\"\r\n                      [label]=\"'notification.english' | transloco\"\r\n                      dir=\"ltr\"\r\n                    />\r\n                    <mt-editor-field\r\n                      formControlName=\"ar\"\r\n                      [label]=\"'notification.arabic' | transloco\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  } @else {\r\n                    <mt-textarea-field\r\n                      formControlName=\"en\"\r\n                      [label]=\"'notification.english' | transloco\"\r\n                      [rows]=\"'6'\"\r\n                      dir=\"ltr\"\r\n                    />\r\n                    <mt-textarea-field\r\n                      formControlName=\"ar\"\r\n                      [label]=\"'notification.arabic' | transloco\"\r\n                      [rows]=\"'6'\"\r\n                      dir=\"rtl\"\r\n                    />\r\n                  }\r\n                </ng-container>\r\n              } @else if (ch.templateKey) {\r\n                <!-- Non-Bilingual Content Field -->\r\n                @if (ch.useRichEditor) {\r\n                  <mt-editor-field\r\n                    [formControlName]=\"ch.templateKey\"\r\n                    [label]=\"'notification.notificationBody' | transloco\"\r\n                  />\r\n                } @else {\r\n                  <mt-textarea-field\r\n                    [formControlName]=\"ch.templateKey\"\r\n                    [label]=\"'notification.notificationBody' | transloco\"\r\n                    [rows]=\"'6'\"\r\n                  />\r\n                }\r\n              }\r\n              <!-- Bilingual Toggle -->\r\n              @if (ch.bilingualOptional) {\r\n                <mt-toggle-field\r\n                  [formControlName]=\"ch.key + 'Bilingual'\"\r\n                  [label]=\"'notification.bilingual' | transloco\"\r\n                />\r\n              }\r\n            }\r\n          }\r\n          <!-- Receivers -->\r\n          <div class=\"w-full\">\r\n            <mt-select-field\r\n              [options]=\"availableReceiverGroups()\"\r\n              [optionLabel]=\"'name'\"\r\n              [optionValue]=\"'id'\"\r\n              [group]=\"true\"\r\n              [optionGroupLabel]=\"'groupName'\"\r\n              [optionGroupChildren]=\"'items'\"\r\n              [label]=\"'notification.receivers' | transloco\"\r\n              [placeholder]=\"'notification.selectReceiver' | transloco\"\r\n              [filter]=\"true\"\r\n              [filterBy]=\"'name'\"\r\n              [loading]=\"isLoadingReceivers()\"\r\n              [formControl]=\"receiverPickerControl\"\r\n              (onChange)=\"onAddReceiver($event)\"\r\n            />\r\n          </div>\r\n          @if ((template.receivers ?? []).length > 0) {\r\n            <div class=\"flex w-full flex-wrap gap-2\">\r\n              @for (receiver of template.receivers; track receiver.id) {\r\n                <div\r\n                  class=\"flex items-center gap-2 rounded-full border border-surface bg-surface-50 py-1 pe-2 ps-3 text-sm transition-colors hover:bg-surface-100\"\r\n                >\r\n                  <mt-icon\r\n                    icon=\"user.user-01\"\r\n                    class=\"h-4 w-4 shrink-0 text-slate-500\"\r\n                  />\r\n                  <span class=\"font-medium\">{{ receiver.name?.display }}</span>\r\n                  @if (!receiver.isSystem) {\r\n                    <mt-button\r\n                      icon=\"general.trash-01\"\r\n                      severity=\"danger\"\r\n                      size=\"small\"\r\n                      [text]=\"true\"\r\n                      [loading]=\"isReceiverDeleting(receiver.id)\"\r\n                      (onClick)=\"onDeleteReceiver(receiver)\"\r\n                    />\r\n                  }\r\n                </div>\r\n              }\r\n            </div>\r\n          }\r\n          <!-- Actions -->\r\n          <div class=\"flex justify-end gap-2 pt-4\">\r\n            @if (form.controls[\"channel\"].value === \"email\") {\r\n              <mt-button\r\n                icon=\"communication.send-01\"\r\n                [label]=\"'notification.testEmail' | transloco\"\r\n                severity=\"secondary\"\r\n                variant=\"outlined\"\r\n                [disabled]=\"\r\n                  form.dirty || isUpdatingTemplate() || isDeletingTemplate()\r\n                \"\r\n                (onClick)=\"onTestEmail()\"\r\n              />\r\n            }\r\n            @if (!template.isSystem) {\r\n              <mt-button\r\n                icon=\"general.trash-01\"\r\n                [label]=\"'notification.delete' | transloco\"\r\n                severity=\"danger\"\r\n                [loading]=\"isDeletingTemplate()\"\r\n                [disabled]=\"isUpdatingTemplate()\"\r\n                (onClick)=\"onDeleteTemplate()\"\r\n              />\r\n            }\r\n            <mt-button\r\n              icon=\"general.save-01\"\r\n              [label]=\"'notification.save' | transloco\"\r\n              [loading]=\"isUpdatingTemplate()\"\r\n              [disabled]=\"isDeletingTemplate() || isFormInvalid()\"\r\n              (onClick)=\"onSaveTemplate()\"\r\n            />\r\n          </div>\r\n        </div>\r\n      } @else {\r\n        <!-- No template selected -->\r\n        <div\r\n          class=\"flex flex-col items-center justify-center py-12 text-slate-500\"\r\n        >\r\n          <mt-icon icon=\"alert.bell-01\" class=\"mb-2 h-12 w-12\" />\r\n          <p>{{ \"notification.selectTemplatePrompt\" | transloco }}</p>\r\n        </div>\r\n      }\r\n    }\r\n  }\r\n</div>\r\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep mt-textarea-field>.flex.items-center,:host ::ng-deep mt-editor-field>.flex.items-center{direction:ltr}:host-context([dir=rtl]) ::ng-deep mt-textarea-field>.flex.items-center,:host-context([dir=rtl]) ::ng-deep mt-editor-field>.flex.items-center{direction:rtl}\n"] }]
-        }], ctorParameters: () => [] });
-function toNumericId(value) {
-    const parsed = Number(value);
-    return Number.isSafeInteger(parsed) && parsed > 0 ? parsed : null;
+                        NotificationContentPreview,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *transloco=\"let t; prefix: 'notification'\">\n  <div class=\"flex min-w-0 flex-col gap-4 p-4\">\n    @if (facade.isLoadingEvents() && events().length === 0) {\n      <div class=\"flex flex-col gap-4\" aria-live=\"polite\">\n        <p-skeleton width=\"50%\" height=\"2.5rem\" borderRadius=\"0.375rem\" />\n        <p-skeleton width=\"100%\" height=\"2.5rem\" borderRadius=\"0.375rem\" />\n        <p-skeleton width=\"100%\" height=\"16rem\" borderRadius=\"0.375rem\" />\n      </div>\n    } @else if (facade.eventsError() && events().length === 0) {\n      <mt-empty-state\n        illustration=\"none\"\n        [title]=\"t('load-error')\"\n        [actionLabel]=\"t('actions.retry')\"\n        actionIcon=\"arrow.refresh-cw-01\"\n        (actionClick)=\"retryLoad()\"\n      />\n    } @else if (events().length === 0) {\n      <mt-empty-state illustration=\"none\" [title]=\"t('noEventsFound')\" />\n    } @else {\n      <!-- Event -->\n      <div class=\"w-full md:w-1/2\">\n        <mt-select-field\n          [formControl]=\"eventControl\"\n          [options]=\"events()\"\n          optionLabel=\"name\"\n          optionValue=\"id\"\n          [label]=\"t('events')\"\n          [placeholder]=\"t('selectEvent')\"\n          [filter]=\"events().length > 8\"\n          filterBy=\"name\"\n          [showClear]=\"false\"\n          (onChange)=\"onEventChange($event)\"\n        />\n      </div>\n\n      @if (selectedEvent(); as event) {\n        <!-- Ready-made defaults -->\n        @if (missingDefaults().length > 0 || removedDefaults().length > 0) {\n          <div\n            class=\"flex flex-col gap-2 rounded-md border border-surface bg-surface-50 px-4 py-3 text-sm\"\n          >\n            @if (missingDefaults().length > 0) {\n              <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                <span class=\"flex items-center gap-2\">\n                  <mt-icon\n                    icon=\"general.zap\"\n                    class=\"size-4 shrink-0 text-primary\"\n                  />\n                  {{ t(\"defaults.missing\") }}\n                </span>\n                <mt-button\n                  size=\"small\"\n                  [label]=\"t('defaults.add')\"\n                  [loading]=\"facade.isLoading('initializeDefaults')\"\n                  [disabled]=\"isMutating()\"\n                  (onClick)=\"onInitializeDefaults()\"\n                />\n              </div>\n            }\n            @for (item of removedDefaults(); track item.slot.channel) {\n              <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                <span>{{\n                  t(\"defaults.removed\", {\n                    channel: channelLabel(item.slot.channel),\n                  })\n                }}</span>\n                <mt-button\n                  size=\"small\"\n                  severity=\"secondary\"\n                  variant=\"outlined\"\n                  [label]=\"t('defaults.restore')\"\n                  [disabled]=\"isMutating()\"\n                  (onClick)=\"onRestoreDefault(item.slot.channel)\"\n                />\n              </div>\n            }\n          </div>\n        }\n\n        <!-- Templates of the event -->\n        <div class=\"flex flex-wrap items-center justify-between gap-2\">\n          @if (templates().length > 0) {\n            <mt-tabs\n              class=\"min-w-0 flex-1\"\n              mode=\"underline\"\n              [active]=\"activeTab()\"\n              [options]=\"templateTabs()\"\n              (activeChange)=\"onTemplateTabChange($event)\"\n            />\n          } @else {\n            <span class=\"text-sm text-muted-color\">{{\n              t(\"no-templates\")\n            }}</span>\n          }\n          <mt-button\n            icon=\"general.plus\"\n            [label]=\"t('addNotification')\"\n            size=\"small\"\n            [disabled]=\"isMutating() || !context()\"\n            (onClick)=\"onAddTemplate()\"\n          />\n        </div>\n\n        @if (facade.contextError() && !context()) {\n          <div\n            class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700\"\n            role=\"alert\"\n          >\n            <span>{{ t(\"context-error\") }}</span>\n            <mt-button\n              size=\"small\"\n              severity=\"secondary\"\n              variant=\"outlined\"\n              [label]=\"t('actions.retry')\"\n              (onClick)=\"retryLoad()\"\n            />\n          </div>\n        }\n\n        @if (template(); as template) {\n          @if (!context()) {\n            <div class=\"flex flex-col gap-3\">\n              <p-skeleton\n                width=\"100%\"\n                height=\"3.5rem\"\n                borderRadius=\"0.375rem\"\n              />\n              <p-skeleton width=\"100%\" height=\"20rem\" borderRadius=\"0.375rem\" />\n            </div>\n          } @else {\n            <!-- Status and actions -->\n            <div\n              class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-surface bg-content px-4 py-3\"\n            >\n              <div class=\"flex min-w-0 flex-wrap items-center gap-2 text-sm\">\n                <span\n                  class=\"inline-flex items-center gap-1 rounded-md border border-surface bg-surface-50 px-2 py-0.5\"\n                >\n                  <mt-icon\n                    [icon]=\"channelIcons[template.channel]\"\n                    class=\"size-4\"\n                  />\n                  {{ channelLabel(template.channel) }}\n                </span>\n                @switch (status()) {\n                  @case (\"on\") {\n                    <span\n                      class=\"rounded-md border border-green-200 bg-green-50 px-2 py-0.5 font-medium text-green-700\"\n                      [mtTooltip]=\"t('status.on-hint')\"\n                      >{{ t(\"status.on\") }}</span\n                    >\n                  }\n                  @case (\"off\") {\n                    <span\n                      class=\"rounded-md border border-surface bg-surface-50 px-2 py-0.5 font-medium text-muted-color\"\n                      [mtTooltip]=\"t('status.off-hint')\"\n                      >{{ t(\"status.off\") }}</span\n                    >\n                  }\n                  @case (\"draft\") {\n                    <span\n                      class=\"rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 font-medium text-amber-700\"\n                      [mtTooltip]=\"t('status.draft-hint')\"\n                      >{{ t(\"status.draft\") }}</span\n                    >\n                  }\n                }\n                @if (unpublishedChanges()) {\n                  <span\n                    class=\"rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-amber-700\"\n                    [mtTooltip]=\"t('status.unpublished-hint')\"\n                    >{{ t(\"status.unpublished\") }}</span\n                  >\n                }\n                @if (defaultOwned()) {\n                  <span\n                    class=\"rounded-md border border-surface bg-surface-50 px-2 py-0.5 text-muted-color\"\n                    >{{ t(\"status.default\") }}</span\n                  >\n                }\n                @if (dirty()) {\n                  <span\n                    class=\"rounded-md border border-amber-200 bg-amber-50 px-2 py-0.5 text-amber-700\"\n                    >{{ t(\"status.unsaved\") }}</span\n                  >\n                }\n              </div>\n\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <mt-button\n                  icon=\"time.clock-rewind\"\n                  severity=\"secondary\"\n                  variant=\"text\"\n                  [tooltip]=\"t('actions.history')\"\n                  [ariaLabel]=\"t('actions.history')\"\n                  [disabled]=\"template.publishedRevision === null\"\n                  (onClick)=\"onOpenHistory()\"\n                />\n                @if (template.channel === \"Email\") {\n                  <mt-button\n                    icon=\"communication.send-01\"\n                    severity=\"secondary\"\n                    variant=\"text\"\n                    [tooltip]=\"\n                      dirty() ? t('saveBeforeEmailTest') : t('testEmail')\n                    \"\n                    [ariaLabel]=\"t('testEmail')\"\n                    [disabled]=\"dirty() || isMutating()\"\n                    (onClick)=\"onTestEmail()\"\n                  />\n                }\n                @if (!template.isSystem) {\n                  <mt-button\n                    icon=\"general.trash-01\"\n                    severity=\"danger\"\n                    variant=\"text\"\n                    [tooltip]=\"t('actions.delete')\"\n                    [ariaLabel]=\"t('actions.delete')\"\n                    [loading]=\"facade.isLoading('deleteTemplate')\"\n                    [disabled]=\"isMutating()\"\n                    (onClick)=\"onDelete()\"\n                  />\n                }\n                @if (status() === \"on\") {\n                  <mt-button\n                    icon=\"general.toggle-01-left\"\n                    severity=\"secondary\"\n                    variant=\"outlined\"\n                    [label]=\"t('actions.turn-off')\"\n                    [loading]=\"facade.isLoading('setActivation')\"\n                    [disabled]=\"isMutating()\"\n                    (onClick)=\"onTurnOff()\"\n                  />\n                } @else {\n                  <mt-button\n                    icon=\"general.toggle-01-right\"\n                    severity=\"secondary\"\n                    variant=\"outlined\"\n                    [label]=\"t('actions.turn-on')\"\n                    [tooltip]=\"\n                      template.publishedRevision === null\n                        ? t('actions.turn-on-blocked')\n                        : ''\n                    \"\n                    [loading]=\"facade.isLoading('setActivation')\"\n                    [disabled]=\"!canTurnOn()\"\n                    (onClick)=\"onTurnOn()\"\n                  />\n                }\n                <mt-button\n                  icon=\"general.check\"\n                  severity=\"secondary\"\n                  variant=\"outlined\"\n                  [label]=\"t('actions.publish')\"\n                  [tooltip]=\"dirty() ? t('actions.save-first') : ''\"\n                  [loading]=\"facade.isLoading('publishTemplate')\"\n                  [disabled]=\"!canPublish()\"\n                  (onClick)=\"onPublish()\"\n                />\n                @if (dirty()) {\n                  <mt-button\n                    severity=\"secondary\"\n                    variant=\"text\"\n                    [label]=\"t('actions.discard')\"\n                    [disabled]=\"isMutating()\"\n                    (onClick)=\"onDiscard()\"\n                  />\n                }\n                <mt-button\n                  icon=\"general.save-01\"\n                  [label]=\"t('save')\"\n                  [loading]=\"facade.isLoading('saveTemplate')\"\n                  [disabled]=\"!canSave()\"\n                  (onClick)=\"onSave()\"\n                />\n              </div>\n            </div>\n\n            @if (conflict()) {\n              <div\n                class=\"flex flex-wrap items-center justify-between gap-3 rounded-md border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700\"\n                role=\"alert\"\n              >\n                <span>{{ t(\"conflict.message\") }}</span>\n                <div class=\"flex flex-wrap gap-2\">\n                  <mt-button\n                    size=\"small\"\n                    severity=\"secondary\"\n                    variant=\"outlined\"\n                    [label]=\"t('conflict.keep-mine')\"\n                    (onClick)=\"resolveConflict(true)\"\n                  />\n                  <mt-button\n                    size=\"small\"\n                    severity=\"secondary\"\n                    [label]=\"t('conflict.load-latest')\"\n                    (onClick)=\"resolveConflict(false)\"\n                  />\n                </div>\n              </div>\n            }\n\n            @if (writeDiagnostics().length > 0) {\n              <ul\n                class=\"list-disc rounded-md border border-red-200 bg-red-50 py-3 pe-4 ps-8 text-sm text-red-700\"\n                role=\"alert\"\n              >\n                @for (diagnostic of writeDiagnostics(); track $index) {\n                  <li>{{ describeDiagnostic(diagnostic) }}</li>\n                }\n              </ul>\n            }\n\n            <div\n              class=\"grid min-w-0 gap-4\"\n              [class]=\"wide() ? 'grid-cols-2' : 'grid-cols-1'\"\n              [formGroup]=\"form\"\n            >\n              <!-- Content -->\n              <section\n                class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n              >\n                <header\n                  class=\"border-b border-surface bg-surface-50 px-4 py-2.5 text-sm font-semibold\"\n                >\n                  {{ t(\"sections.content\") }}\n                </header>\n                <div class=\"flex min-w-0 flex-col gap-4 p-4\">\n                  <mt-text-field\n                    formControlName=\"name\"\n                    [label]=\"t('name')\"\n                    [placeholder]=\"t('enterName')\"\n                    [required]=\"true\"\n                  />\n                  @if (template.channel === \"Email\") {\n                    <mt-text-field\n                      formControlName=\"subject\"\n                      [label]=\"t('subject')\"\n                      [hint]=\"t('subject-hint')\"\n                    />\n                  }\n                  <mt-select-field\n                    [formControl]=\"placeholderControl\"\n                    [options]=\"placeholderGroups()\"\n                    optionLabel=\"label\"\n                    optionValue=\"key\"\n                    [group]=\"true\"\n                    optionGroupLabel=\"groupName\"\n                    optionGroupChildren=\"properties\"\n                    [label]=\"t('placeholders.label')\"\n                    [hint]=\"t('placeholders.hint')\"\n                    [placeholder]=\"t('placeholders.placeholder')\"\n                    [hasPlaceholderPrefix]=\"false\"\n                    [filter]=\"true\"\n                    filterBy=\"label\"\n                    (onChange)=\"onInsertPlaceholder($event)\"\n                  />\n                  @switch (template.channel) {\n                    @case (\"Email\") {\n                      <mt-email-visual-editor\n                        #emailEditor\n                        formControlName=\"emailTemplate\"\n                        [label]=\"t('email-body')\"\n                        [hint]=\"t('email-body-hint')\"\n                        [placeholders]=\"placeholderOptions()\"\n                        [approvedImageOrigins]=\"emailImageOrigins()\"\n                        height=\"26rem\"\n                      />\n                    }\n                    @case (\"Sms\") {\n                      <div #smsSource (focusin)=\"setActiveField('smsTemplate')\">\n                        <mt-textarea-field\n                          dir=\"auto\"\n                          formControlName=\"smsTemplate\"\n                          [label]=\"t('sms-body')\"\n                          [hint]=\"t('sms-body-hint')\"\n                          rows=\"6\"\n                        />\n                      </div>\n                    }\n                    @case (\"App\") {\n                      <mt-email-visual-editor\n                        #appEnEditor\n                        formControlName=\"appEn\"\n                        [label]=\"t('english')\"\n                        direction=\"ltr\"\n                        [starter]=\"false\"\n                        [placeholders]=\"placeholderOptions()\"\n                        [approvedImageOrigins]=\"appImageOrigins()\"\n                        height=\"12rem\"\n                        (focused)=\"setActiveField('appEn')\"\n                      />\n                      <mt-email-visual-editor\n                        #appArEditor\n                        formControlName=\"appAr\"\n                        [label]=\"t('arabic')\"\n                        direction=\"rtl\"\n                        [starter]=\"false\"\n                        [placeholders]=\"placeholderOptions()\"\n                        [approvedImageOrigins]=\"appImageOrigins()\"\n                        height=\"12rem\"\n                        (focused)=\"setActiveField('appAr')\"\n                      />\n                    }\n                  }\n                </div>\n              </section>\n\n              <!-- Live preview -->\n              <section\n                class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n              >\n                <header\n                  class=\"border-b border-surface bg-surface-50 px-4 py-2.5 text-sm font-semibold\"\n                >\n                  {{ t(\"sections.preview\") }}\n                </header>\n                <div class=\"flex flex-1 flex-col p-4\">\n                  <mt-notification-content-preview\n                    [preview]=\"preview.result()\"\n                    [status]=\"preview.status()\"\n                    [errorCode]=\"preview.errorCode()\"\n                    [stale]=\"previewStale()\"\n                    [fill]=\"true\"\n                    [showSubject]=\"false\"\n                    (retry)=\"preview.retry()\"\n                  />\n                </div>\n              </section>\n\n              <!-- Recipients -->\n              <section\n                class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n              >\n                <header\n                  class=\"border-b border-surface bg-surface-50 px-4 py-2.5 text-sm font-semibold\"\n                >\n                  {{ t(\"sections.recipients\") }}\n                </header>\n                <div class=\"flex min-w-0 flex-col gap-3 p-4\">\n                  <mt-select-field\n                    [formControl]=\"recipientControl\"\n                    [options]=\"recipientGroups()\"\n                    optionLabel=\"name\"\n                    optionValue=\"key\"\n                    [group]=\"true\"\n                    optionGroupLabel=\"groupName\"\n                    optionGroupChildren=\"items\"\n                    [label]=\"t('recipients.add')\"\n                    [hint]=\"t('recipients.hint')\"\n                    [placeholder]=\"t('recipients.placeholder')\"\n                    [filter]=\"true\"\n                    filterBy=\"name\"\n                    [loading]=\"facade.isLoading('addReceivers')\"\n                    (onChange)=\"onAddRecipient($event)\"\n                  />\n                  @if (template.receivers.length > 0) {\n                    <ul class=\"flex flex-wrap gap-2\">\n                      @for (receiver of template.receivers; track receiver.id) {\n                        <li\n                          class=\"flex items-center gap-2 rounded-md border border-surface bg-surface-50 py-1 pe-1 ps-3 text-sm\"\n                        >\n                          <span class=\"font-medium\">{{\n                            receiverName(receiver)\n                          }}</span>\n                          <span class=\"text-xs text-muted-color\">{{\n                            t(\"recipient-type.\" + receiver.type)\n                          }}</span>\n                          @if (!receiver.isSystem) {\n                            <mt-button\n                              icon=\"general.x-close\"\n                              severity=\"secondary\"\n                              size=\"small\"\n                              [text]=\"true\"\n                              [ariaLabel]=\"t('recipients.remove')\"\n                              [disabled]=\"isMutating()\"\n                              (onClick)=\"onRemoveRecipient(receiver)\"\n                            />\n                          }\n                        </li>\n                      }\n                    </ul>\n                  } @else {\n                    <p class=\"text-sm text-amber-700\">\n                      {{ t(\"recipients.empty\") }}\n                    </p>\n                  }\n                </div>\n              </section>\n\n              <!-- Send only when -->\n              <section\n                class=\"flex min-w-0 flex-col overflow-hidden rounded-md border border-surface bg-content\"\n              >\n                <header\n                  class=\"border-b border-surface bg-surface-50 px-4 py-2.5 text-sm font-semibold\"\n                >\n                  {{ t(\"sections.condition\") }}\n                </header>\n                <div class=\"flex min-w-0 flex-col gap-2 p-4\">\n                  <p class=\"text-sm text-muted-color\">\n                    {{ t(\"condition.hint\") }}\n                  </p>\n                  <mt-formula-builder\n                    formControlName=\"conditionFormula\"\n                    valueMode=\"expression\"\n                    [isProcessBuilder]=\"true\"\n                    [propertiesByPath]=\"conditionPropertiesByPath()\"\n                    [knownProperties]=\"conditionKeys()\"\n                    [placeholder]=\"t('condition.placeholder')\"\n                  />\n                </div>\n              </section>\n            </div>\n          }\n        } @else if (templates().length > 0) {\n          <p class=\"py-8 text-center text-sm text-muted-color\">\n            {{ t(\"selectTemplatePrompt\") }}\n          </p>\n        }\n      }\n    }\n  </div>\n</ng-container>\n", styles: [":host{display:block;width:100%;height:100%}:host ::ng-deep mt-textarea-field>.flex.items-center,:host ::ng-deep mt-editor-field>.flex.items-center{direction:ltr}:host-context([dir=rtl]) ::ng-deep mt-textarea-field>.flex.items-center,:host-context([dir=rtl]) ::ng-deep mt-editor-field>.flex.items-center{direction:rtl}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { emailEditor: [{ type: i0.ViewChild, args: ['emailEditor', { ...{
+                            read: EmailVisualEditor,
+                        }, isSignal: true }] }], appEnEditor: [{ type: i0.ViewChild, args: ['appEnEditor', { ...{
+                            read: EmailVisualEditor,
+                        }, isSignal: true }] }], appArEditor: [{ type: i0.ViewChild, args: ['appArEditor', { ...{
+                            read: EmailVisualEditor,
+                        }, isSignal: true }] }], smsSource: [{ type: i0.ViewChild, args: ['smsSource', { isSignal: true }] }], onBeforeUnload: [{
+                type: HostListener,
+                args: ['window:beforeunload', ['$event']]
+            }] } });
+function defaultField(channel) {
+    switch (channel) {
+        case 'Email':
+            return 'emailTemplate';
+        case 'Sms':
+            return 'smsTemplate';
+        case 'App':
+            return 'appEn';
+    }
+}
+function publicationReview(publication, nameOf) {
+    return {
+        request: publicationPreviewRequest(publication.content),
+        recipients: publication.content.receivers.map((receiver) => ({
+            name: nameOf(receiver),
+            type: receiver.type,
+        })),
+        condition: publication.content.conditionFormula,
+    };
 }
 
 const APP_STATES = [NotificationState];
@@ -1295,5 +2396,5 @@ const APP_STATES = [NotificationState];
  * Generated bundle index. Do not edit.
  */
 
-export { APP_STATES, AddReceivers, AddTemplate, AddTemplateDialog, CHANNEL_CONFIGS, DeleteReceiver, DeleteTemplate, GetActionProperties, GetActionReceivers, GetEvents, GetProperties, GetReceivers, NotificationActionKey, NotificationFacade, NotificationState, NotificationTemplate, ResetNotificationState, SelectEvent, SelectTemplate, SetActionMode, SetModuleInfo, UpdateTemplate, getChannelConfig, getFormControlName };
+export { APP_STATES, AddReceivers, AddTemplateDialog, CreateTemplate, DEFAULTS_PUBLISHER, DeleteReceiver, DeleteTemplate, GetAuthoringContext, GetDefaultRecipes, GetEvents, GetPublications, InitializeDefaults, NOTIFICATION_CHANNELS, NOTIFICATION_MUTATION_KEYS, NotificationActionKey, NotificationContentPreview, NotificationFacade, NotificationState, NotificationTemplate, NotificationTemplateApi, PublishTemplate, ResetNotificationState, RestoreDefault, RestorePublication, SaveTemplate, SelectEvent, SelectTemplate, SetModuleInfo, SetTemplateActivation, TemplateHistoryDrawer, TemplateReviewDialog, currentPublication, flattenRecipientCatalog, hasUnpublishedChanges, isDefaultOwned, isRevisionConflict, missingDefaultChannels, parseAppContent, previewSamples, publicationPreviewRequest, readNotificationFailure, recipientKey, templatePreviewRequest, templateStatus, withPreviewSamples };
 //# sourceMappingURL=masterteam-notification.mjs.map