@acorex-platform/module-content-management-client 0.0.21

package/fesm2022/acorex-platform-module-content-management-client-template-content-editor-widget-edit.component-CApNVTfc.mjs

@@ -0,0 +1,694 @@
+import * as i7 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i1 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import * as i8 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXFormModule } from '@acorex/components/form';
+import * as i3 from '@acorex/components/tabs';
+import { AXTabsModule } from '@acorex/components/tabs';
+import * as i4 from '@acorex/components/text-area';
+import { AXTextAreaModule } from '@acorex/components/text-area';
+import * as i5 from '@acorex/components/text-box';
+import { AXTextBoxModule } from '@acorex/components/text-box';
+import { AXToastService } from '@acorex/components/toast';
+import * as i6 from '@acorex/components/wysiwyg';
+import { AXWysiwygModule } from '@acorex/components/wysiwyg';
+import * as i2$1 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXValidationModule } from '@acorex/core/validation';
+import { AXPSettingsService, AXPTokenDefinitionService } from '@acorex-platform/framework-client/common';
+import { AXPEntityService } from '@acorex-platform/framework-client/layout/entity';
+import { AXPValueWidgetComponent } from '@acorex-platform/framework-client/layout/widget-core';
+import { AXPCommandExecutor } from '@acorex-platform/framework-client/runtime';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, ElementRef, viewChild, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { runtimeCommandPayloadData } from '@acorex-platform/framework-shared/core';
+import { AXM_TEXT_TEMPLATE_KIND, AXM_TEXT_TEMPLATE_CONTENT_SLOT, resolveTextTemplateLocalizedString, AXM_TEXT_TEMPLATE_PREVIEW_COMMAND_KEY, collectTextTemplatePlaceholderNames, RootConfig, AXM_TEXT_TEMPLATE_MAX_PARENT_DEPTH, composeTextTemplateBodyChain, replaceTextTemplatePlaceholders } from '@acorex-platform/module-content-management-client/contracts';
+import { AXP_TEXT_TEMPLATE_CHANNEL_DEFINITION_PROVIDER } from './acorex-platform-module-content-management-client.mjs';
+
+class AXMTemplateContentEditorWidgetEditComponent extends AXPValueWidgetComponent {
+    /** Returns icon class for a variable/token based on kind and dataType */
+    getVariableIcon(v) {
+        const kindMap = {
+            Static: 'fa-light fa-database',
+            Context: 'fa-light fa-layer-group',
+            Event: 'fa-light fa-bolt',
+            Computed: 'fa-light fa-calculator',
+            Secret: 'fa-light fa-key',
+        };
+        const dataTypeMap = {
+            String: 'fa-light fa-font',
+            Integer: 'fa-light fa-hashtag',
+            Boolean: 'fa-light fa-toggle-on',
+            Decimal: 'fa-light fa-calculator',
+            DateTime: 'fa-light fa-clock',
+            Json: 'fa-light fa-braces',
+        };
+        const byKind = v.kind && kindMap[v.kind];
+        if (byKind)
+            return byKind;
+        const byDataType = v.dataType && dataTypeMap[v.dataType];
+        if (byDataType)
+            return byDataType;
+        return 'fa-light fa-code';
+    }
+    /** Returns icon class for a channel based on name and type */
+    getChannelIcon(ch) {
+        const nameMap = {
+            email: 'fa-light fa-envelope',
+            sms: 'fa-light fa-comment-sms',
+            whatsapp: 'fa-brands fa-whatsapp',
+            push: 'fa-light fa-bell',
+            telegram: 'fa-brands fa-telegram',
+            'in-app': 'fa-light fa-inbox',
+        };
+        const byName = nameMap[ch.name?.toLowerCase() ?? ''];
+        if (byName)
+            return byName;
+        return ch.type === 'rich' ? 'fa-light fa-file-lines' : 'fa-light fa-align-left';
+    }
+    getTemplateLocale() {
+        return this.translationService.getActiveLang() ?? 'en-US';
+    }
+    /**
+     * Builds a mutable locale map from a stored channel field (string legacy or ML object).
+     */
+    normalizeChannelFieldToMl(existing) {
+        if (existing == null || existing === '') {
+            return {};
+        }
+        if (typeof existing === 'string') {
+            const s = existing;
+            return { 'en-US': s, 'fa-IR': s };
+        }
+        return { ...existing };
+    }
+    constructor() {
+        super();
+        /** Stored cursor/selection state before Insert Variable dropdown opens */
+        this.storedCursor = null;
+        this.channelProviders = inject(AXP_TEXT_TEMPLATE_CHANNEL_DEFINITION_PROVIDER, {
+            optional: true,
+        });
+        this.settingsService = inject(AXPSettingsService);
+        this.translationService = inject(AXTranslationService);
+        this.entityService = inject(AXPEntityService);
+        this.tokenDefinitionService = inject(AXPTokenDefinitionService, { optional: true });
+        this.commandExecutor = inject(AXPCommandExecutor);
+        this.toastService = inject(AXToastService);
+        this.sanitizer = inject(DomSanitizer);
+        this.destroyRef = inject(DestroyRef);
+        this.hostRef = inject((ElementRef));
+        /** Dedupes in-flight preview loads when effect re-runs. */
+        this.previewRequestSeq = 0;
+        this.wysiwygRef = viewChild('wysiwygRef', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wysiwygRef" }] : /* istanbul ignore next */ []));
+        this.bodyTextareaRef = viewChild('bodyTextarea', { ...(ngDevMode ? { debugName: "bodyTextareaRef" } : /* istanbul ignore next */ {}), read: (ElementRef) });
+        this.availableChannels = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "availableChannels" }] : /* istanbul ignore next */ []));
+        this.channelConfigured = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "channelConfigured" }] : /* istanbul ignore next */ []));
+        this.availableVariables = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "availableVariables" }] : /* istanbul ignore next */ []));
+        this.activeTabIndex = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : /* istanbul ignore next */ []));
+        this.viewMode = signal('edit', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
+        /** Resolved values for local preview fallback: expression/token evaluation, then sampleValue */
+        this.resolvedPreviewValues = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedPreviewValues" }] : /* istanbul ignore next */ []));
+        /** Parent-chain bodies (leaf → root) for the active locale, keyed by channel (local fallback). */
+        this.composedPreviewBodies = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "composedPreviewBodies" }] : /* istanbul ignore next */ []));
+        /** Server Preview results keyed by channel (preferred over local compose). */
+        this.serverPreviewByChannel = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "serverPreviewByChannel" }] : /* istanbul ignore next */ []));
+        this.activeChannel = computed(() => {
+            const idx = this.activeTabIndex();
+            const chs = this.availableChannels();
+            return chs[idx] ?? null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeChannel" }] : /* istanbul ignore next */ []));
+        /** True when the host entity form has Kind = Master. */
+        this.isMasterKind = computed(() => {
+            this.contextService.changeEvent();
+            const kind = this.contextService.getValue('kind');
+            return kind === AXM_TEXT_TEMPLATE_KIND.Master;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMasterKind" }] : /* istanbul ignore next */ []));
+        this.otherChannelsWithContent = (currentName) => this.availableChannels().filter((c) => c.name !== currentName && (this.getChannelBody(c.name) || (c.hasSubject && this.getChannelSubject(c.name))));
+        effect(() => {
+            this.viewMode();
+            this.activeTabIndex();
+            this.getValue();
+            this.contextService.changeEvent();
+            if (this.viewMode() === 'preview') {
+                void this.loadServerPreview();
+            }
+            else {
+                this.previewRequestSeq += 1;
+                this.resolvedPreviewValues.set({});
+                this.composedPreviewBodies.set({});
+                this.serverPreviewByChannel.set({});
+            }
+        });
+        this.settingsService.onChanged.subscribe(() => {
+            void this.refreshChannelConfiguration();
+        });
+    }
+    isChannelConfigured(name) {
+        return this.channelConfigured()[name] ?? true;
+    }
+    async openChannelConfigure(channel) {
+        const configure = channel.configureSettings;
+        if (!configure) {
+            return;
+        }
+        const saved = await this.settingsService.showSectionPopup({
+            scope: configure.scope,
+            section: configure.section,
+            group: configure.group,
+        });
+        if (saved) {
+            await this.refreshChannelConfiguration();
+        }
+    }
+    async refreshChannelConfiguration() {
+        const channels = this.availableChannels();
+        const next = {};
+        for (const channel of channels) {
+            next[channel.name] = await this.isChannelConfiguredInternal(channel);
+        }
+        this.channelConfigured.set(next);
+    }
+    async isChannelConfiguredInternal(channel) {
+        const requiredKeys = channel.requiredSettingKeys ?? [];
+        if (!requiredKeys.length) {
+            return true;
+        }
+        const scopeKey = channel.configureSettings?.scope ?? 'T';
+        const scoped = this.settingsService.scope(scopeKey);
+        for (const key of requiredKeys) {
+            const value = await scoped.get(key);
+            if (!this.hasNonEmptySettingValue(value)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    hasNonEmptySettingValue(value) {
+        if (value == null) {
+            return false;
+        }
+        if (typeof value === 'string') {
+            return value.trim().length > 0;
+        }
+        if (typeof value === 'number') {
+            return Number.isFinite(value);
+        }
+        if (typeof value === 'boolean') {
+            return true;
+        }
+        if (typeof value === 'object' && 'value' in value) {
+            return this.hasNonEmptySettingValue(value.value);
+        }
+        return String(value).trim().length > 0;
+    }
+    ngAfterViewInit() {
+        const el = this.hostRef.nativeElement;
+        const handleMousedown = (e) => {
+            const target = e.target;
+            if (!target || !el.contains(target))
+                return;
+            const trigger = target.closest?.('[data-insert-var-trigger]');
+            if (!trigger)
+                return;
+            this.captureCursorBeforeInsert();
+        };
+        el.addEventListener('mousedown', handleMousedown, { capture: true });
+        this.destroyRef.onDestroy(() => el.removeEventListener('mousedown', handleMousedown, { capture: true }));
+    }
+    async ngOnInit() {
+        super.ngOnInit();
+        const rawCh = this.channelProviders;
+        const chProviders = rawCh == null ? [] : Array.isArray(rawCh) ? rawCh : [rawCh];
+        const allChannels = [];
+        for (const p of chProviders) {
+            if (p?.getChannels)
+                allChannels.push(...p.getChannels());
+        }
+        this.availableChannels.set(Array.from(new Map(allChannels.map((c) => [c.name, c])).values()));
+        await this.refreshChannelConfiguration();
+        try {
+            const tokensAccessor = this.entityService.withEntity('PlatformManagement', 'Tokens').data();
+            const result = await tokensAccessor.query({ skip: 0, take: 500 });
+            const items = (result.items ?? []);
+            const vars = items
+                .map((t) => ({
+                name: String(t.name ?? ''),
+                title: String(t.title ?? t.name ?? ''),
+                sampleValue: t.sampleValue != null ? String(t.sampleValue) : undefined,
+                kind: t.kind,
+                dataType: t.dataType,
+            }))
+                .filter((v) => v.name);
+            this.availableVariables.set(Array.from(new Map(vars.map((v) => [v.name, v])).values()));
+        }
+        catch {
+            this.availableVariables.set([]);
+        }
+        const value = this.getValue();
+        if (value && typeof value === 'object' && Object.keys(value).length > 0) {
+            const names = Object.keys(value);
+            const chs = this.availableChannels();
+            const idx = chs.findIndex((c) => names.includes(c.name));
+            if (idx >= 0)
+                this.activeTabIndex.set(idx);
+        }
+    }
+    /** Capture cursor/selection before dropdown opens (runs in mousedown capture phase) */
+    captureCursorBeforeInsert() {
+        const ch = this.activeChannel();
+        if (!ch)
+            return;
+        this.storedCursor = null;
+        const active = document.activeElement;
+        if (!active)
+            return;
+        if (ch.type === 'plain') {
+            const textarea = this.getTextareaElement(active);
+            if (textarea) {
+                this.storedCursor = {
+                    channelName: ch.name,
+                    isPlain: true,
+                    selectionStart: textarea.selectionStart,
+                    selectionEnd: textarea.selectionEnd,
+                };
+            }
+        }
+        else {
+            const editable = this.getContentEditableElement(active);
+            if (editable) {
+                const sel = document.getSelection();
+                if (sel && sel.rangeCount > 0) {
+                    const range = sel.getRangeAt(0).cloneRange();
+                    this.storedCursor = {
+                        channelName: ch.name,
+                        isPlain: false,
+                        range,
+                    };
+                }
+            }
+        }
+    }
+    getTextareaElement(el) {
+        if (el instanceof HTMLTextAreaElement)
+            return el;
+        return el.querySelector?.('textarea') ?? null;
+    }
+    getContentEditableElement(el) {
+        if (el.isContentEditable)
+            return el;
+        return el.closest?.('[contenteditable="true"]') ?? null;
+    }
+    insertVariable(channelName, varName) {
+        this.insertToken(channelName, `{{${varName}}}`);
+    }
+    insertContentSlot(channelName) {
+        this.insertToken(channelName, AXM_TEXT_TEMPLATE_CONTENT_SLOT);
+    }
+    insertToken(channelName, token) {
+        const current = this.getChannelBody(channelName);
+        const stored = this.storedCursor;
+        this.storedCursor = null;
+        if (stored && stored.channelName === channelName) {
+            if (stored.isPlain) {
+                const start = stored.selectionStart ?? current.length;
+                const end = stored.selectionEnd ?? start;
+                const before = current.slice(0, start);
+                const after = current.slice(end);
+                const newBody = before + token + after;
+                this.setChannelBody(channelName, newBody);
+                const newCursor = start + token.length;
+                queueMicrotask(() => this.restoreTextareaCursor(newCursor));
+            }
+            else if (stored.range) {
+                try {
+                    const startNode = stored.range.startContainer;
+                    const elem = startNode.nodeType === Node.TEXT_NODE
+                        ? startNode.parentElement
+                        : startNode;
+                    const editable = elem?.closest?.('[contenteditable="true"]');
+                    const wysiwyg = this.wysiwygRef();
+                    const target = editable ?? wysiwyg?.getHostElement()?.querySelector?.('[contenteditable="true"]');
+                    if (target) {
+                        target.focus();
+                        const sel = document.getSelection();
+                        if (sel) {
+                            sel.removeAllRanges();
+                            sel.addRange(stored.range);
+                            document.execCommand('insertText', false, token);
+                        }
+                    }
+                    else {
+                        this.setChannelBody(channelName, current + token);
+                    }
+                }
+                catch {
+                    this.setChannelBody(channelName, current + token);
+                }
+            }
+        }
+        else {
+            this.setChannelBody(channelName, current + token);
+        }
+    }
+    restoreTextareaCursor(position) {
+        const ref = this.bodyTextareaRef();
+        const el = ref?.nativeElement;
+        const textarea = el?.querySelector?.('textarea') ?? (el instanceof HTMLTextAreaElement ? el : null);
+        if (textarea) {
+            textarea.focus();
+            textarea.setSelectionRange(position, position);
+        }
+    }
+    copyFromChannel(targetName, sourceName) {
+        const ch = this.availableChannels().find((c) => c.name === sourceName);
+        if (!ch)
+            return;
+        const hasSubject = ch.hasSubject;
+        if (hasSubject) {
+            this.setChannelSubject(targetName, this.getChannelSubject(sourceName));
+        }
+        this.setChannelBody(targetName, this.getChannelBody(sourceName));
+    }
+    getChannelSubject(name) {
+        const v = this.getValue()?.[name];
+        const raw = v && typeof v === 'object' && 'subject' in v ? v.subject : undefined;
+        return resolveTextTemplateLocalizedString(raw, this.getTemplateLocale());
+    }
+    setChannelSubject(name, value) {
+        const current = this.getValue() || {};
+        const ch = current[name] || { body: '' };
+        const locale = this.getTemplateLocale();
+        const ml = this.normalizeChannelFieldToMl(ch.subject);
+        ml[locale] = value ?? '';
+        this.setValue({ ...current, [name]: { ...ch, subject: ml } });
+    }
+    getChannelBody(name) {
+        const v = this.getValue()?.[name];
+        const raw = v && typeof v === 'object' && 'body' in v ? v.body : undefined;
+        return resolveTextTemplateLocalizedString(raw, this.getTemplateLocale());
+    }
+    handleWysiwygChange(name, e) {
+        const val = typeof e === 'object' && e !== null && 'value' in e
+            ? e.value
+            : String(e ?? '');
+        this.setChannelBody(name, val);
+    }
+    setChannelBody(name, value) {
+        const current = this.getValue() || {};
+        const ch = current[name] || { body: '' };
+        const hasSubject = this.availableChannels().find((c) => c.name === name)?.hasSubject ?? false;
+        const locale = this.getTemplateLocale();
+        const ml = this.normalizeChannelFieldToMl(ch.body);
+        ml[locale] = value ?? '';
+        if (hasSubject) {
+            this.setValue({ ...current, [name]: { ...ch, body: ml } });
+        }
+        else {
+            this.setValue({ ...current, [name]: { body: ml } });
+        }
+    }
+    /**
+     * Prefer server draft Preview (Context tokens + Event samples + parent composition).
+     * Falls back to local compose when the command fails.
+     */
+    async loadServerPreview() {
+        const requestSeq = ++this.previewRequestSeq;
+        const value = this.getValue();
+        const channel = this.activeChannel()?.name?.trim() || '';
+        if (!value || typeof value !== 'object' || !channel) {
+            this.serverPreviewByChannel.set({});
+            this.composedPreviewBodies.set({});
+            return;
+        }
+        const locale = this.getTemplateLocale();
+        const parentIdRaw = this.contextService.getValue('parentId');
+        const parentId = typeof parentIdRaw === 'string' ? parentIdRaw.trim() : '';
+        const kindRaw = this.contextService.getValue('kind');
+        const kind = typeof kindRaw === 'string' ? kindRaw.trim() : undefined;
+        const request = {
+            channels: value,
+            channel,
+            locale,
+            ...(parentId ? { parentId } : {}),
+            ...(kind ? { kind } : {}),
+        };
+        try {
+            const result = await this.commandExecutor.execute(AXM_TEXT_TEMPLATE_PREVIEW_COMMAND_KEY, request);
+            if (requestSeq !== this.previewRequestSeq) {
+                return;
+            }
+            const preview = runtimeCommandPayloadData(result);
+            if (preview?.body != null) {
+                this.serverPreviewByChannel.update((prev) => ({
+                    ...prev,
+                    [channel]: {
+                        ...(preview.subject != null ? { subject: preview.subject } : {}),
+                        body: preview.body,
+                    },
+                }));
+                return;
+            }
+            const message = typeof result?.message?.text === 'string' && result.message.text.trim()
+                ? result.message.text.trim()
+                : undefined;
+            await this.fallbackToLocalPreview(channel, message);
+        }
+        catch (error) {
+            if (requestSeq !== this.previewRequestSeq) {
+                return;
+            }
+            const message = error instanceof Error ? error.message : undefined;
+            await this.fallbackToLocalPreview(channel, message);
+        }
+    }
+    async fallbackToLocalPreview(channel, errorMessage) {
+        const title = await this.translationService.translateAsync('@content-management:templates.messages.preview-failed.title');
+        const content = await this.translationService.translateAsync('@content-management:templates.messages.preview-failed.content');
+        this.toastService.show({
+            color: 'warning',
+            title,
+            content: errorMessage ? `${content} ${errorMessage}` : content,
+            closeButton: true,
+            timeOut: 5000,
+        });
+        this.serverPreviewByChannel.update((prev) => {
+            const next = { ...prev };
+            delete next[channel];
+            return next;
+        });
+        await this.resolveComposedPreviewBodies();
+    }
+    /** Resolve variable values for local preview fallback */
+    async resolvePreviewVariables() {
+        const value = this.getValue();
+        if (!value || typeof value !== 'object')
+            return;
+        const locale = this.getTemplateLocale();
+        const parts = [];
+        for (const v of Object.values(value)) {
+            if (v != null && typeof v === 'object' && 'body' in v) {
+                const o = v;
+                parts.push(resolveTextTemplateLocalizedString(o.subject, locale));
+                parts.push(resolveTextTemplateLocalizedString(o.body, locale));
+            }
+        }
+        for (const body of Object.values(this.composedPreviewBodies())) {
+            parts.push(body);
+        }
+        const allText = parts.join('');
+        const varNames = collectTextTemplatePlaceholderNames(allText);
+        if (varNames.length === 0)
+            return;
+        const vars = this.availableVariables();
+        const resolved = {};
+        const svc = this.tokenDefinitionService;
+        for (const name of varNames) {
+            try {
+                if (svc) {
+                    const val = await svc.getValue(name);
+                    resolved[name] = val != null ? String(val) : '';
+                }
+            }
+            catch {
+                /* use fallback */
+            }
+            if (!(name in resolved) || !resolved[name]) {
+                const v = vars.find((x) => x.name === name);
+                if (v?.sampleValue != null) {
+                    resolved[name] = v.sampleValue;
+                }
+                else if (!(name in resolved)) {
+                    resolved[name] = '';
+                }
+            }
+        }
+        this.resolvedPreviewValues.update((prev) => ({ ...prev, ...resolved }));
+    }
+    /**
+     * Local fallback: loads optional parent masters and stores leaf→root body chains per channel.
+     */
+    async resolveComposedPreviewBodies() {
+        const value = this.getValue();
+        if (!value || typeof value !== 'object') {
+            this.composedPreviewBodies.set({});
+            return;
+        }
+        const parentIdRaw = this.contextService.getValue('parentId');
+        const parentId = typeof parentIdRaw === 'string' ? parentIdRaw.trim() : '';
+        const locale = this.getTemplateLocale();
+        const next = {};
+        if (!parentId) {
+            for (const channelName of Object.keys(value)) {
+                next[channelName] = this.getChannelBody(channelName);
+            }
+            this.composedPreviewBodies.set(next);
+            await this.resolvePreviewVariables();
+            return;
+        }
+        const parentBodiesByChannel = {};
+        try {
+            const accessor = this.entityService
+                .withEntity(RootConfig.module.name, RootConfig.entities.textTemplate.name)
+                .data();
+            const visited = new Set();
+            const selfIdRaw = this.contextService.getValue('id');
+            const selfId = typeof selfIdRaw === 'string' ? selfIdRaw.trim() : '';
+            if (selfId) {
+                visited.add(selfId);
+            }
+            let currentId = parentId;
+            let depth = 1;
+            while (currentId && depth <= AXM_TEXT_TEMPLATE_MAX_PARENT_DEPTH) {
+                if (visited.has(currentId)) {
+                    break;
+                }
+                visited.add(currentId);
+                const parent = await accessor.byKey(currentId);
+                if (!parent?.channels) {
+                    break;
+                }
+                for (const [channelName, channelDef] of Object.entries(parent.channels)) {
+                    const body = resolveTextTemplateLocalizedString(channelDef?.body, locale);
+                    if (!body)
+                        continue;
+                    (parentBodiesByChannel[channelName] ??= []).push(body);
+                }
+                currentId = parent.parentId?.trim() || null;
+                depth += 1;
+            }
+        }
+        catch {
+            /* keep leaf-only preview */
+        }
+        for (const channelName of Object.keys(value)) {
+            const leafBody = this.getChannelBody(channelName);
+            const parents = parentBodiesByChannel[channelName] ?? [];
+            next[channelName] = composeTextTemplateBodyChain([leafBody, ...parents], {});
+        }
+        this.composedPreviewBodies.set(next);
+        await this.resolvePreviewVariables();
+    }
+    /** Get preview value for variable: expression/token first, then sampleValue */
+    getPreviewValue(varName) {
+        const resolved = this.resolvedPreviewValues()[varName];
+        if (resolved !== undefined && resolved !== '')
+            return resolved;
+        const v = this.availableVariables().find((x) => x.name === varName);
+        return v?.sampleValue ?? `{{${varName}}}`;
+    }
+    /**
+     * Merge map for {@link replaceTextTemplatePlaceholders}: one entry per `{{name}}` in `text`.
+     * When `escapeMergeValuesForHtml` is true, substitution values are escaped for safe `innerHTML` fragments.
+     */
+    previewMergeFor(text, escapeMergeValuesForHtml) {
+        const out = {};
+        for (const name of collectTextTemplatePlaceholderNames(text)) {
+            let v = this.getPreviewValue(name);
+            if (escapeMergeValuesForHtml) {
+                v = v.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+            }
+            out[name] = v;
+        }
+        return out;
+    }
+    previewSubject(channelName) {
+        const server = this.serverPreviewByChannel()[channelName];
+        if (server?.subject != null) {
+            return server.subject;
+        }
+        return this.previewText(this.getChannelSubject(channelName));
+    }
+    previewText(text) {
+        return replaceTextTemplatePlaceholders(text, this.previewMergeFor(text, false));
+    }
+    /**
+     * Email/rich preview must bypass Angular's default innerHTML sanitizer;
+     * otherwise inline `style` (colors, gradients, header bar) is stripped and
+     * the preview diverges from the real sent email.
+     */
+    previewBodyHtml(channelName) {
+        const ch = this.availableChannels().find((c) => c.name === channelName);
+        const server = this.serverPreviewByChannel()[channelName];
+        if (server?.body != null) {
+            if (ch?.type === 'rich') {
+                return this.sanitizer.bypassSecurityTrustHtml(server.body);
+            }
+            return server.body
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/\n/g, '<br/>');
+        }
+        const composed = this.composedPreviewBodies()[channelName];
+        const body = composed ?? this.getChannelBody(channelName);
+        // Local fallback: do not escape merge for rich HTML (logo mark / styled shells).
+        const merged = replaceTextTemplatePlaceholders(body, this.previewMergeFor(body, ch?.type !== 'rich'));
+        if (ch?.type === 'rich') {
+            return this.sanitizer.bypassSecurityTrustHtml(merged);
+        }
+        return merged
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/\n/g, '<br/>');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMTemplateContentEditorWidgetEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMTemplateContentEditorWidgetEditComponent, isStandalone: true, selector: "axm-template-content-editor-widget-edit", viewQueries: [{ propertyName: "wysiwygRef", first: true, predicate: ["wysiwygRef"], descendants: true, isSignal: true }, { propertyName: "bodyTextareaRef", first: true, predicate: ["bodyTextarea"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!-- Template Content Editor: Channel tabs and content per channel -->\n<div class=\"flex flex-col gap-4 w-full\">\n  <!-- Channel tabs navigation -->\n  <div class=\"flex items-center gap-2 flex-wrap\">\n    <ax-tabs\n      [look]=\"'with-line'\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n      class=\"flex-1 min-w-0\"\n    >\n      @for (ch of availableChannels(); track ch.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(ch.title | translate | async) ?? ch.name\"\n          [key]=\"i.toString()\"\n          [active]=\"activeTabIndex() === i\"\n        ></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n\n  @if (activeChannel(); as ch) {\n    <!-- Channel content area: Edit mode or Preview mode -->\n    <div class=\"mb-4 p-4\">\n      @if (!isChannelConfigured(ch.name) && ch.notConfiguredMessageKey) {\n        <div\n          class=\"mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 p-3 rounded border border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-950/30\"\n        >\n          <p class=\"text-sm text-amber-900 dark:text-amber-100\">\n            {{ ch.notConfiguredMessageKey | translate | async }}\n          </p>\n          @if (ch.configureSettings) {\n            <ax-button\n              [text]=\"\n                '@content-management:templates.actions.configure-channel'\n                  | translate\n                  | async\n              \"\n              look=\"outline\"\n              color=\"primary\"\n              size=\"sm\"\n              (onClick)=\"openChannelConfigure(ch)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          }\n        </div>\n      }\n\n      @if (viewMode() === 'edit') {\n        <!-- Edit mode: Subject field (for channels that support it, e.g. Email) -->\n        @if (ch.hasSubject) {\n          <div class=\"mb-3\">\n            <label class=\"block text-sm mb-1\">\n              {{\n                '@content-management:templates.entities.text-template.fields.subject.title'\n                  | translate\n                  | async\n              }}\n            </label>\n            <ax-text-box\n              [ngModel]=\"getChannelSubject(ch.name)\"\n              (ngModelChange)=\"setChannelSubject(ch.name, $event)\"\n              [placeholder]=\"\n                ('@content-management:templates.entities.text-template.fields.subject.placeholder'\n                  | translate\n                  | async)!\n              \"\n            ></ax-text-box>\n          </div>\n        }\n\n        <!-- Edit mode: Body field (plain text or rich WYSIWYG) -->\n        <div>\n          <label class=\"block text-sm mb-1\">\n            {{\n              '@content-management:templates.entities.text-template.fields.body.title'\n                | translate\n                | async\n            }}\n          </label>\n          @if (ch.type === 'plain') {\n            <ax-text-area\n              #bodyTextarea\n              [ngModel]=\"getChannelBody(ch.name)\"\n              (ngModelChange)=\"setChannelBody(ch.name, $event)\"\n              [rows]=\"8\"\n              [placeholder]=\"\n                ('@content-management:templates.entities.text-template.fields.body-placeholder.plain'\n                  | translate\n                  | async)!\n              \"\n            ></ax-text-area>\n          } @else {\n            <ax-wysiwyg-container\n              #wysiwygRef\n              [placeHolder]=\"\n                ('@content-management:templates.entities.text-template.fields.body-placeholder.rich'\n                  | translate\n                  | async)!\n              \"\n              [ngModel]=\"getChannelBody(ch.name)\"\n              (onValueChanged)=\"handleWysiwygChange(ch.name, $event)\"\n              [look]=\"'solid'\"\n            >\n              <ax-wysiwyg-view [style.min-height.px]=\"200\"></ax-wysiwyg-view>\n              <ax-wysiwyg-toolbar>\n                <ax-prefix>\n                  <ax-wysiwyg-history></ax-wysiwyg-history>\n                  <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n                  <ax-wysiwyg-list></ax-wysiwyg-list>\n                </ax-prefix>\n              </ax-wysiwyg-toolbar>\n            </ax-wysiwyg-container>\n          }\n        </div>\n      } @else {\n        <!-- Preview mode: Rendered content with variable placeholders replaced by sample values -->\n        <div class=\"space-y-2\">\n          @if (ch.hasSubject && previewSubject(ch.name)) {\n            <div>\n              <span class=\"text-xs text-gray-500\"\n                >{{\n                  '@content-management:templates.entities.text-template.fields.subject.title'\n                    | translate\n                    | async\n                }}:\n              </span>\n              <span class=\"text-sm\">{{ previewSubject(ch.name) }}</span>\n            </div>\n          }\n          <!-- ----- Rich email keeps inline styles; plain channels use pre-wrap ----- -->\n          <div\n            class=\"text-sm p-3 bg-gray-100 dark:bg-gray-900 rounded border overflow-auto\"\n            [class.whitespace-pre-wrap]=\"ch.type !== 'rich'\"\n            [innerHTML]=\"previewBodyHtml(ch.name)\"\n          ></div>\n        </div>\n      }\n    </div>\n\n    <!-- Footer: Action buttons (left) + Edit/Preview toggle (right) in single row -->\n    <div\n      class=\"flex flex-nowrap items-center justify-between gap-3 pt-3 mt-1 border-t border-gray-200 dark:border-gray-700\"\n    >\n      <div class=\"flex flex-nowrap items-center gap-2 min-w-0\">\n        @if (viewMode() === 'edit') {\n          <!-- ----- Insert variable dropdown from platform tokens ----- -->\n          <div data-insert-var-trigger>\n            <ax-button\n              [text]=\"\n                '@content-management:templates.actions.insert-variable'\n                  | translate\n                  | async\n              \"\n              look=\"twotone\"\n              color=\"default\"\n              size=\"sm\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n              </ax-prefix>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @for (v of availableVariables(); track v.name) {\n                    <ax-button-item\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"(v.title || v.name) + ' ({{' + v.name + '}})'\"\n                      (onClick)=\"insertVariable(ch.name, v.name)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon [icon]=\"getVariableIcon(v)\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n              <ax-suffix>\n                <ax-icon icon=\"fa-light fa-chevron-down\"></ax-icon>\n              </ax-suffix>\n            </ax-button>\n          </div>\n          <!--->\n          <!-- ----- Insert reserved [content] slot for master templates ----- -->\n          @if (isMasterKind()) {\n            <div data-insert-var-trigger>\n              <ax-button\n                [text]=\"\n                  '@content-management:templates.actions.insert-content-slot'\n                    | translate\n                    | async\n                \"\n                look=\"twotone\"\n                color=\"default\"\n                size=\"sm\"\n                (onClick)=\"insertContentSlot(ch.name)\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n                </ax-prefix>\n              </ax-button>\n            </div>\n          }\n          <!--->\n          <!-- ----- Copy subject/body from another channel ----- -->\n          @if (otherChannelsWithContent(ch.name).length > 0) {\n            <ax-button\n              [text]=\"\n                '@content-management:templates.actions.copy-from'\n                  | translate\n                  | async\n              \"\n              look=\"twotone\"\n              color=\"default\"\n              size=\"sm\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-copy\"></ax-icon>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-icon icon=\"fa-light fa-chevron-down\"></ax-icon>\n              </ax-suffix>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @for (\n                    src of otherChannelsWithContent(ch.name);\n                    track src.name\n                  ) {\n                    <ax-button-item\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"(src.title | translate | async) ?? src.name\"\n                      (onClick)=\"copyFromChannel(ch.name, src.name)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon [icon]=\"getChannelIcon(src)\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          }\n        }\n      </div>\n      <div>\n        <ax-tabs [look]=\"'default'\">\n          <ax-tab-item\n            [text]=\"\n              ('@content-management:templates.actions.edit'\n                | translate\n                | async) ?? 'Edit'\n            \"\n            [active]=\"viewMode() === 'edit'\"\n            (onClick)=\"viewMode.set('edit')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-pen\" class=\"text-current\"></ax-icon>\n            </ax-prefix>\n          </ax-tab-item>\n          <ax-tab-item\n            [text]=\"\n              ('@content-management:templates.actions.preview'\n                | translate\n                | async) ?? 'Preview'\n            \"\n            [active]=\"viewMode() === 'preview'\"\n            (onClick)=\"viewMode.set('preview')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-eye\" class=\"text-current\"></ax-icon>\n            </ax-prefix>\n          </ax-tab-item>\n        </ax-tabs>\n      </div>\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i3.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i3.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXTextAreaModule }, { kind: "component", type: i4.AXTextAreaComponent, selector: "ax-text-area", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "placeholder", "maxLength", "look", "rows", "allowResize", "showCounter", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i5.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "maskPattern", "customTokens", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onMaskChanged"] }, { kind: "ngmodule", type: AXWysiwygModule }, { kind: "component", type: i6.AXWysiwygContainerComponent, selector: "ax-wysiwyg-container", inputs: ["look", "readonly", "disabled", "value", "placeHolder", "initialLine"], outputs: ["onValueChanged"] }, { kind: "component", type: i6.AXWysiwygViewComponent, selector: "ax-wysiwyg-view" }, { kind: "component", type: i6.AXWysiwygFontStyleComponent, selector: "ax-wysiwyg-font-style" }, { kind: "component", type: i6.AXWysiwygHistoryComponent, selector: "ax-wysiwyg-history" }, { kind: "component", type: i6.AXWysiwygListComponent, selector: "ax-wysiwyg-list" }, { kind: "component", type: i6.AXWysiwygToolbarComponent, selector: "ax-wysiwyg-toolbar" }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i7.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i7.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i7.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i8.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMTemplateContentEditorWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-template-content-editor-widget-edit', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        FormsModule,
+                        AXFormModule,
+                        AXTabsModule,
+                        AXTextAreaModule,
+                        AXTextBoxModule,
+                        AXWysiwygModule,
+                        AXValidationModule,
+                        AXTranslationModule,
+                        AXButtonModule,
+                        AXDropdownModule,
+                    ], template: "<!-- Template Content Editor: Channel tabs and content per channel -->\n<div class=\"flex flex-col gap-4 w-full\">\n  <!-- Channel tabs navigation -->\n  <div class=\"flex items-center gap-2 flex-wrap\">\n    <ax-tabs\n      [look]=\"'with-line'\"\n      (onActiveTabChanged)=\"activeTabIndex.set($event.index)\"\n      class=\"flex-1 min-w-0\"\n    >\n      @for (ch of availableChannels(); track ch.name; let i = $index) {\n        <ax-tab-item\n          [text]=\"(ch.title | translate | async) ?? ch.name\"\n          [key]=\"i.toString()\"\n          [active]=\"activeTabIndex() === i\"\n        ></ax-tab-item>\n      }\n    </ax-tabs>\n  </div>\n\n  @if (activeChannel(); as ch) {\n    <!-- Channel content area: Edit mode or Preview mode -->\n    <div class=\"mb-4 p-4\">\n      @if (!isChannelConfigured(ch.name) && ch.notConfiguredMessageKey) {\n        <div\n          class=\"mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 p-3 rounded border border-amber-300 bg-amber-50 dark:border-amber-700 dark:bg-amber-950/30\"\n        >\n          <p class=\"text-sm text-amber-900 dark:text-amber-100\">\n            {{ ch.notConfiguredMessageKey | translate | async }}\n          </p>\n          @if (ch.configureSettings) {\n            <ax-button\n              [text]=\"\n                '@content-management:templates.actions.configure-channel'\n                  | translate\n                  | async\n              \"\n              look=\"outline\"\n              color=\"primary\"\n              size=\"sm\"\n              (onClick)=\"openChannelConfigure(ch)\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-gear\"></ax-icon>\n              </ax-prefix>\n            </ax-button>\n          }\n        </div>\n      }\n\n      @if (viewMode() === 'edit') {\n        <!-- Edit mode: Subject field (for channels that support it, e.g. Email) -->\n        @if (ch.hasSubject) {\n          <div class=\"mb-3\">\n            <label class=\"block text-sm mb-1\">\n              {{\n                '@content-management:templates.entities.text-template.fields.subject.title'\n                  | translate\n                  | async\n              }}\n            </label>\n            <ax-text-box\n              [ngModel]=\"getChannelSubject(ch.name)\"\n              (ngModelChange)=\"setChannelSubject(ch.name, $event)\"\n              [placeholder]=\"\n                ('@content-management:templates.entities.text-template.fields.subject.placeholder'\n                  | translate\n                  | async)!\n              \"\n            ></ax-text-box>\n          </div>\n        }\n\n        <!-- Edit mode: Body field (plain text or rich WYSIWYG) -->\n        <div>\n          <label class=\"block text-sm mb-1\">\n            {{\n              '@content-management:templates.entities.text-template.fields.body.title'\n                | translate\n                | async\n            }}\n          </label>\n          @if (ch.type === 'plain') {\n            <ax-text-area\n              #bodyTextarea\n              [ngModel]=\"getChannelBody(ch.name)\"\n              (ngModelChange)=\"setChannelBody(ch.name, $event)\"\n              [rows]=\"8\"\n              [placeholder]=\"\n                ('@content-management:templates.entities.text-template.fields.body-placeholder.plain'\n                  | translate\n                  | async)!\n              \"\n            ></ax-text-area>\n          } @else {\n            <ax-wysiwyg-container\n              #wysiwygRef\n              [placeHolder]=\"\n                ('@content-management:templates.entities.text-template.fields.body-placeholder.rich'\n                  | translate\n                  | async)!\n              \"\n              [ngModel]=\"getChannelBody(ch.name)\"\n              (onValueChanged)=\"handleWysiwygChange(ch.name, $event)\"\n              [look]=\"'solid'\"\n            >\n              <ax-wysiwyg-view [style.min-height.px]=\"200\"></ax-wysiwyg-view>\n              <ax-wysiwyg-toolbar>\n                <ax-prefix>\n                  <ax-wysiwyg-history></ax-wysiwyg-history>\n                  <ax-wysiwyg-font-style></ax-wysiwyg-font-style>\n                  <ax-wysiwyg-list></ax-wysiwyg-list>\n                </ax-prefix>\n              </ax-wysiwyg-toolbar>\n            </ax-wysiwyg-container>\n          }\n        </div>\n      } @else {\n        <!-- Preview mode: Rendered content with variable placeholders replaced by sample values -->\n        <div class=\"space-y-2\">\n          @if (ch.hasSubject && previewSubject(ch.name)) {\n            <div>\n              <span class=\"text-xs text-gray-500\"\n                >{{\n                  '@content-management:templates.entities.text-template.fields.subject.title'\n                    | translate\n                    | async\n                }}:\n              </span>\n              <span class=\"text-sm\">{{ previewSubject(ch.name) }}</span>\n            </div>\n          }\n          <!-- ----- Rich email keeps inline styles; plain channels use pre-wrap ----- -->\n          <div\n            class=\"text-sm p-3 bg-gray-100 dark:bg-gray-900 rounded border overflow-auto\"\n            [class.whitespace-pre-wrap]=\"ch.type !== 'rich'\"\n            [innerHTML]=\"previewBodyHtml(ch.name)\"\n          ></div>\n        </div>\n      }\n    </div>\n\n    <!-- Footer: Action buttons (left) + Edit/Preview toggle (right) in single row -->\n    <div\n      class=\"flex flex-nowrap items-center justify-between gap-3 pt-3 mt-1 border-t border-gray-200 dark:border-gray-700\"\n    >\n      <div class=\"flex flex-nowrap items-center gap-2 min-w-0\">\n        @if (viewMode() === 'edit') {\n          <!-- ----- Insert variable dropdown from platform tokens ----- -->\n          <div data-insert-var-trigger>\n            <ax-button\n              [text]=\"\n                '@content-management:templates.actions.insert-variable'\n                  | translate\n                  | async\n              \"\n              look=\"twotone\"\n              color=\"default\"\n              size=\"sm\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n              </ax-prefix>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @for (v of availableVariables(); track v.name) {\n                    <ax-button-item\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"(v.title || v.name) + ' ({{' + v.name + '}})'\"\n                      (onClick)=\"insertVariable(ch.name, v.name)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon [icon]=\"getVariableIcon(v)\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n              <ax-suffix>\n                <ax-icon icon=\"fa-light fa-chevron-down\"></ax-icon>\n              </ax-suffix>\n            </ax-button>\n          </div>\n          <!--->\n          <!-- ----- Insert reserved [content] slot for master templates ----- -->\n          @if (isMasterKind()) {\n            <div data-insert-var-trigger>\n              <ax-button\n                [text]=\"\n                  '@content-management:templates.actions.insert-content-slot'\n                    | translate\n                    | async\n                \"\n                look=\"twotone\"\n                color=\"default\"\n                size=\"sm\"\n                (onClick)=\"insertContentSlot(ch.name)\"\n              >\n                <ax-prefix>\n                  <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n                </ax-prefix>\n              </ax-button>\n            </div>\n          }\n          <!--->\n          <!-- ----- Copy subject/body from another channel ----- -->\n          @if (otherChannelsWithContent(ch.name).length > 0) {\n            <ax-button\n              [text]=\"\n                '@content-management:templates.actions.copy-from'\n                  | translate\n                  | async\n              \"\n              look=\"twotone\"\n              color=\"default\"\n              size=\"sm\"\n            >\n              <ax-prefix>\n                <ax-icon icon=\"fa-light fa-copy\"></ax-icon>\n              </ax-prefix>\n              <ax-suffix>\n                <ax-icon icon=\"fa-light fa-chevron-down\"></ax-icon>\n              </ax-suffix>\n              <ax-dropdown-panel>\n                <ax-button-item-list>\n                  @for (\n                    src of otherChannelsWithContent(ch.name);\n                    track src.name\n                  ) {\n                    <ax-button-item\n                      look=\"blank\"\n                      color=\"default\"\n                      [text]=\"(src.title | translate | async) ?? src.name\"\n                      (onClick)=\"copyFromChannel(ch.name, src.name)\"\n                    >\n                      <ax-prefix>\n                        <ax-icon [icon]=\"getChannelIcon(src)\"></ax-icon>\n                      </ax-prefix>\n                    </ax-button-item>\n                  }\n                </ax-button-item-list>\n              </ax-dropdown-panel>\n            </ax-button>\n          }\n        }\n      </div>\n      <div>\n        <ax-tabs [look]=\"'default'\">\n          <ax-tab-item\n            [text]=\"\n              ('@content-management:templates.actions.edit'\n                | translate\n                | async) ?? 'Edit'\n            \"\n            [active]=\"viewMode() === 'edit'\"\n            (onClick)=\"viewMode.set('edit')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-pen\" class=\"text-current\"></ax-icon>\n            </ax-prefix>\n          </ax-tab-item>\n          <ax-tab-item\n            [text]=\"\n              ('@content-management:templates.actions.preview'\n                | translate\n                | async) ?? 'Preview'\n            \"\n            [active]=\"viewMode() === 'preview'\"\n            (onClick)=\"viewMode.set('preview')\"\n          >\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-eye\" class=\"text-current\"></ax-icon>\n            </ax-prefix>\n          </ax-tab-item>\n        </ax-tabs>\n      </div>\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { wysiwygRef: [{ type: i0.ViewChild, args: ['wysiwygRef', { isSignal: true }] }], bodyTextareaRef: [{ type: i0.ViewChild, args: ['bodyTextarea', { ...{ read: (ElementRef) }, isSignal: true }] }] } });
+
+export { AXMTemplateContentEditorWidgetEditComponent };
+//# sourceMappingURL=acorex-platform-module-content-management-client-template-content-editor-widget-edit.component-CApNVTfc.mjs.map