@doxi/angular 0.11.0

package/dist/doxiva-doxiva-editor.component.js

@@ -0,0 +1,1095 @@
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, Output, TemplateRef, ViewChild, inject, } from '@angular/core';
+import { NgFor, NgIf } from '@angular/common';
+import { defaultKeymapBindings, defaultRenderer, defaultSchema, EditorState, Fragment, getLinkAt, historyPlugin, insertImage, insertPageBreak, insertTable, installClipboardHandlers, installInputPipeline, keymap, printDocument, setLink, SetPageMetaStep, TextSelection, unsetLink, } from '@doxi/core';
+import { DoxivaEditorComponent, } from './doxiva-editor.component.js';
+import { DoxivaToolbarComponent, defaultToolbarActions, TOOLBAR_SEPARATOR, } from './doxiva-toolbar.component.js';
+import { DEFAULT_FEATURES, } from './doxiva.types.js';
+const SIZE_PX = {
+    letter: { w: 816, h: 1056 },
+    a4: { w: 794, h: 1123 },
+    legal: { w: 816, h: 1344 },
+    a5: { w: 559, h: 794 },
+};
+const MARGIN_PX = { normal: 96, narrow: 48, wide: 144 };
+// Inline SVG markup, drawn inside the toolbar's shared 24×24 viewBox.
+const ICON_NEW_PAGE = '<rect x="4" y="3" width="13" height="18" rx="2" />' +
+    '<path d="M7 10h7M7 14h7M7 18h4" />' +
+    '<circle cx="19" cy="6" r="3" />' +
+    '<path d="M19 4.5v3M17.5 6h3" />';
+const ICON_HEADER_FOOTER = '<rect x="4" y="3" width="16" height="18" rx="2" />' +
+    '<path d="M4 7h16M4 17h16" />' +
+    '<path d="M8 11h8M8 14h6" />';
+const ICON_PAGE_SETTINGS = '<rect x="4" y="3" width="13" height="18" rx="2" />' +
+    '<path d="M7 8h7M7 12h7M7 16h4" />' +
+    '<circle cx="19" cy="19" r="2.2" />';
+/**
+ * Filter the default toolbar actions by feature flags. Removes-only — never
+ * reorders. After filtering, consecutive `separator` items (and leading /
+ * trailing separators) are collapsed so a removed group doesn't leave a
+ * double divider. Ported verbatim from `@doxi/react`'s `DoxivaEditor`.
+ */
+function filterByFeatures(actions, features) {
+    const kept = actions.filter((item) => {
+        const t = item.type;
+        if (t === 'separator')
+            return true;
+        if (t === 'select') {
+            const id = item.id;
+            if (id === 'font-size')
+                return features.fontSize;
+            if (id === 'font-family')
+                return features.fontFamily;
+            return true;
+        }
+        if (t === 'palette') {
+            const id = item.id;
+            if (id === 'color')
+                return features.color;
+            if (id === 'cell-bg')
+                return features.tables;
+            return true;
+        }
+        if (t === 'popover') {
+            const id = item.id;
+            if (id === 'link')
+                return features.links;
+            if (id === 'table')
+                return features.tables;
+            if (id === 'image')
+                return features.images;
+            return true;
+        }
+        const id = item.id;
+        if (id === 'undo' || id === 'redo')
+            return features.history;
+        if (id === 'body' || id === 'h1' || id === 'h2' || id === 'h3')
+            return features.headings;
+        if (id === 'bold' || id === 'italic' || id === 'underline')
+            return features.marks;
+        if (id === 'align-left' ||
+            id === 'align-center' ||
+            id === 'align-right' ||
+            id === 'align-justify')
+            return features.alignment;
+        if (id === 'line-1' || id === 'line-1-5' || id === 'line-2')
+            return features.lineHeight;
+        if (id === 'list-bullet' || id === 'list-numbered')
+            return features.lists;
+        if (id === 'blockquote' || id === 'hr')
+            return features.blocks;
+        if (id === 'table-header-row')
+            return features.tables;
+        if (id === 'print')
+            return features.print;
+        return true;
+    });
+    return dedupeSeparators(kept);
+}
+function dedupeSeparators(items) {
+    const out = [];
+    for (const item of items) {
+        const isSep = item.type === 'separator';
+        if (isSep) {
+            if (out.length === 0)
+                continue;
+            const prev = out[out.length - 1];
+            if (prev.type === 'separator')
+                continue;
+        }
+        out.push(item);
+    }
+    while (out.length > 0 && out[out.length - 1].type === 'separator') {
+        out.pop();
+    }
+    return out;
+}
+function buildDefaultDoc() {
+    return defaultSchema.node('doc', null, [defaultSchema.node('paragraph', null)]);
+}
+/**
+ * The bundled Doxiva editor — a single Angular standalone component that
+ * internally orchestrates the toolbar, popovers (link / table / image /
+ * header-footer / page-settings), keymap, print bridge, DOCX import/export,
+ * page chrome, and theme handling. Hosts pass `features` to disable parts
+ * of the UX and `theme` to switch palettes. The low-level
+ * `DoxivaEditorComponent` (`<dx-editor>`), `DoxivaToolbarComponent`
+ * (`<dx-toolbar>`), and `defaultToolbarActions` remain exported for power
+ * users.
+ */
+let DxDoxivaEditorComponent = class DxDoxivaEditorComponent {
+    constructor() {
+        this.theme = 'light';
+        this.paginated = true;
+        this.defaultPageSize = 'letter';
+        this.editable = true;
+        this.change = new EventEmitter();
+        this.stateChange = new EventEmitter();
+        this.importWarnings = new EventEmitter();
+        /** Emitted once the underlying EditorView is mounted (and again on remount). */
+        this.ready = new EventEmitter();
+        this.cdr = inject(ChangeDetectorRef);
+        this.host = inject((ElementRef));
+        this.history = historyPlugin();
+        this.renderer = defaultRenderer;
+        this.effectiveFeatures = DEFAULT_FEATURES;
+        this.actions = [];
+        // Page-settings state.
+        this.pageSize = 'letter';
+        this.pageOrientation = 'portrait';
+        this.pageMargins = 'normal';
+        this.editorVisible = true;
+        // Header/footer chrome (pure CSS, not part of the doc).
+        this.chromeHeaderEnabled = true;
+        this.chromeFooterEnabled = true;
+        this.chromeHeaderHeightPx = 24;
+        this.chromeFooterHeightPx = 24;
+        // Header/footer popover form state.
+        this.headerText = '';
+        this.footerText = '';
+        this.headerPageNum = false;
+        this.footerPageNum = false;
+        // Image popover form state.
+        this.imageSrc = '';
+        this.imageAlt = '';
+        // Table-picker grid (8×8).
+        this.tablePickerRows = [0, 1, 2, 3, 4, 5, 6, 7];
+        this.tablePickerCols = [0, 1, 2, 3, 4, 5, 6, 7];
+        this.tableHover = null;
+        // EditorView captured in onReady. Used by Mod-P, the doxiva:print bridge,
+        // and the top-row buttons (which gate `[disabled]` on view === null).
+        this.view = null;
+        this.importWarningsList = [];
+        // Resolved theme — for `theme: 'auto'` mirrors prefers-color-scheme.
+        this.resolvedTheme = 'light';
+        this.mediaQuery = null;
+        this.mediaListener = null;
+        this.onPrintListener = null;
+        this.popoverTemplates = {};
+    }
+    ngOnInit() {
+        this.pageSize = this.defaultPageSize;
+        this.recomputeFeatures();
+        this.state = EditorState.create({
+            schema: defaultSchema,
+            doc: this.initialDoc ?? buildDefaultDoc(),
+            selection: new TextSelection(1, 1),
+            plugins: [this.history.plugin],
+        });
+        this.recomputeActions();
+        this.resolveTheme();
+    }
+    ngAfterViewInit() {
+        this.popoverTemplates = this.buildPopoverTemplates();
+        this.installMediaListener();
+        // Templates only become available in AfterViewInit; trigger CD so the
+        // dx-toolbar input binding flips on this pass.
+        this.cdr.detectChanges();
+    }
+    ngOnChanges(changes) {
+        if (changes['features'] && !changes['features'].firstChange) {
+            this.recomputeFeatures();
+            this.recomputeActions();
+            if (this.popoverTemplates && Object.keys(this.popoverTemplates).length > 0) {
+                this.popoverTemplates = this.buildPopoverTemplates();
+            }
+            this.cdr.markForCheck();
+        }
+        if (changes['theme'] && !changes['theme'].firstChange) {
+            this.uninstallMediaListener();
+            this.resolveTheme();
+            this.installMediaListener();
+            this.cdr.markForCheck();
+        }
+        if (changes['initialDoc'] && !changes['initialDoc'].firstChange) {
+            // React's <DoxivaEditor> only reads initialDoc once (useMemo). Mirror
+            // that — subsequent host changes are intentionally ignored. Hosts that
+            // need to swap a doc should remount or use the editor's dispatch path.
+        }
+        if (changes['paginated'] && !changes['paginated'].firstChange) {
+            // Re-render the editor with the new pagination config.
+            this.remountEditor();
+        }
+    }
+    ngOnDestroy() {
+        if (this.onPrintListener && typeof document !== 'undefined') {
+            document.removeEventListener('doxiva:print', this.onPrintListener);
+            this.onPrintListener = null;
+        }
+        this.uninstallMediaListener();
+        this.view = null;
+    }
+    get showTopRow() {
+        const f = this.effectiveFeatures;
+        return f.print || f.downloadPdf || f.exportDocx || f.importDocx;
+    }
+    get showWarningsPanel() {
+        return this.importWarningsList.length > 0 && this.onImportWarnings !== null;
+    }
+    get paginatedConfig() {
+        const base = SIZE_PX[this.pageSize];
+        const { w, h } = this.pageOrientation === 'landscape' ? { w: base.h, h: base.w } : base;
+        const m = MARGIN_PX[this.pageMargins];
+        return {
+            size: { widthPx: w, heightPx: h },
+            margins: { topPx: m, rightPx: m, bottomPx: m, leftPx: m },
+        };
+    }
+    // -- internal: feature/action recomputation ------------------------------
+    recomputeFeatures() {
+        this.effectiveFeatures = { ...DEFAULT_FEATURES, ...(this.features ?? {}) };
+    }
+    recomputeActions() {
+        const f = this.effectiveFeatures;
+        const filtered = filterByFeatures(defaultToolbarActions(defaultSchema, f.history ? this.history : undefined), f);
+        const tail = [];
+        if (f.newPage) {
+            tail.push({
+                id: 'new-page',
+                label: 'Add new page (Ctrl+Enter)',
+                icon: ICON_NEW_PAGE,
+                command: (state, dispatch) => {
+                    const pbType = state.schema.nodes.page_break;
+                    if (!pbType)
+                        return false;
+                    return insertPageBreak(pbType)(state, dispatch);
+                },
+            });
+        }
+        if (f.headerFooter) {
+            tail.push({
+                type: 'popover',
+                id: 'headerFooter',
+                label: 'Header and footer',
+                icon: ICON_HEADER_FOOTER,
+            });
+        }
+        if (f.pageSettings) {
+            tail.push({
+                type: 'popover',
+                id: 'pageSettings',
+                label: 'Page settings',
+                icon: ICON_PAGE_SETTINGS,
+            });
+        }
+        if (tail.length === 0) {
+            this.actions = filtered;
+            return;
+        }
+        this.actions = dedupeSeparators([...filtered, TOOLBAR_SEPARATOR, ...tail]);
+    }
+    buildPopoverTemplates() {
+        const f = this.effectiveFeatures;
+        const map = {};
+        if (f.links)
+            map.link = this.linkTpl;
+        if (f.tables)
+            map.table = this.tableTpl;
+        if (f.images)
+            map.image = this.imageTpl;
+        if (f.pageSettings)
+            map.pageSettings = this.pageSettingsTpl;
+        if (f.headerFooter)
+            map.headerFooter = this.headerFooterTpl;
+        return map;
+    }
+    // -- theme ---------------------------------------------------------------
+    resolveTheme() {
+        if (this.theme === 'auto') {
+            if (typeof window === 'undefined') {
+                this.resolvedTheme = 'light';
+                return;
+            }
+            this.resolvedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light';
+            return;
+        }
+        this.resolvedTheme = this.theme;
+    }
+    installMediaListener() {
+        if (this.theme !== 'auto' || typeof window === 'undefined')
+            return;
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        const listener = (e) => {
+            this.resolvedTheme = e.matches ? 'dark' : 'light';
+            this.cdr.markForCheck();
+        };
+        mq.addEventListener('change', listener);
+        this.mediaQuery = mq;
+        this.mediaListener = listener;
+    }
+    uninstallMediaListener() {
+        if (this.mediaQuery && this.mediaListener) {
+            this.mediaQuery.removeEventListener('change', this.mediaListener);
+        }
+        this.mediaQuery = null;
+        this.mediaListener = null;
+    }
+    // -- dispatch + state ----------------------------------------------------
+    onDispatch(tr) {
+        const prev = this.state;
+        this.state = this.state.apply(tr);
+        if (prev.doc !== this.state.doc) {
+            this.change.emit(this.state.doc);
+        }
+        this.stateChange.emit(this.state);
+        this.cdr.markForCheck();
+    }
+    // -- onReady (wire keymap + clipboard + print bridge) --------------------
+    onReady(view) {
+        this.view = view;
+        this.cdr.detectChanges();
+        const f = this.effectiveFeatures;
+        const handler = keymap({
+            ...defaultKeymapBindings(defaultSchema),
+            ...(f.history
+                ? {
+                    'Mod-z': this.history.commands.undo,
+                    'Mod-Shift-z': this.history.commands.redo,
+                    'Mod-y': this.history.commands.redo,
+                }
+                : {}),
+            ...(f.links
+                ? {
+                    'Mod-k': () => {
+                        if (typeof document === 'undefined')
+                            return false;
+                        const root = this.host.nativeElement;
+                        const btn = root.querySelector('[data-testid="btn-link"]');
+                        if (!btn)
+                            return false;
+                        btn.click();
+                        return true;
+                    },
+                }
+                : {}),
+            ...(f.newPage
+                ? {
+                    'Mod-Enter': (state, dispatch) => {
+                        const pbType = state.schema.nodes.page_break;
+                        if (!pbType)
+                            return false;
+                        return insertPageBreak(pbType)(state, dispatch);
+                    },
+                }
+                : {}),
+            ...(f.print
+                ? {
+                    'Mod-p': () => {
+                        if (!this.view)
+                            return false;
+                        void printDocument(this.view);
+                        return true;
+                    },
+                }
+                : {}),
+        });
+        installInputPipeline(view, {
+            keymap: (event, state, dispatch) => handler(event, state, dispatch),
+        });
+        installClipboardHandlers(view);
+        if (typeof document !== 'undefined') {
+            if (this.onPrintListener) {
+                document.removeEventListener('doxiva:print', this.onPrintListener);
+            }
+            const onPrint = () => {
+                if (this.view)
+                    void printDocument(this.view);
+            };
+            this.onPrintListener = onPrint;
+            document.addEventListener('doxiva:print', onPrint);
+        }
+        this.ready.emit(view);
+    }
+    // -- top-row button handlers --------------------------------------------
+    onPrintClick() {
+        if (this.view)
+            void printDocument(this.view);
+    }
+    onDownloadPdfClick() {
+        if (!this.view)
+            return;
+        const prev = typeof document !== 'undefined' ? document.title : '';
+        if (typeof document !== 'undefined')
+            document.title = 'doxiva-document';
+        void printDocument(this.view).finally(() => {
+            if (typeof document !== 'undefined')
+                document.title = prev;
+        });
+    }
+    async onExportDocxClick() {
+        if (!this.view)
+            return;
+        const { exportDocx } = await import('@doxi/docx');
+        const bytes = exportDocx(this.view.state.doc);
+        const blob = new Blob([bytes], {
+            type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'doxiva-document.docx';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }
+    async onImportFile(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        input.value = '';
+        if (!file)
+            return;
+        const { importDocx } = await import('@doxi/docx');
+        const buffer = await file.arrayBuffer();
+        const bytes = new Uint8Array(buffer);
+        const { doc, warnings } = await importDocx(bytes);
+        this.importWarningsList = warnings;
+        this.importWarnings.emit(warnings);
+        if (this.onImportWarnings && this.onImportWarnings !== null) {
+            this.onImportWarnings(warnings);
+        }
+        this.state = EditorState.create({
+            schema: defaultSchema,
+            doc,
+            selection: new TextSelection(1, 1),
+            plugins: [this.history.plugin],
+        });
+        this.cdr.detectChanges();
+    }
+    // -- page-settings apply (remount) --------------------------------------
+    applyPageSettings(close) {
+        close();
+        this.remountEditor();
+    }
+    remountEditor() {
+        this.editorVisible = false;
+        this.view = null;
+        this.cdr.detectChanges();
+        setTimeout(() => {
+            this.editorVisible = true;
+            this.cdr.detectChanges();
+        }, 0);
+    }
+    // -- header/footer popover ----------------------------------------------
+    setChromeHeaderEnabled(v) {
+        this.chromeHeaderEnabled = v;
+        this.cdr.markForCheck();
+    }
+    setChromeFooterEnabled(v) {
+        this.chromeFooterEnabled = v;
+        this.cdr.markForCheck();
+    }
+    setChromeHeaderHeight(raw) {
+        this.chromeHeaderHeightPx = this.clampChromeHeight(raw);
+        this.cdr.markForCheck();
+    }
+    setChromeFooterHeight(raw) {
+        this.chromeFooterHeightPx = this.clampChromeHeight(raw);
+        this.cdr.markForCheck();
+    }
+    clampChromeHeight(raw) {
+        const n = typeof raw === 'number' ? raw : Number(raw);
+        if (!Number.isFinite(n))
+            return 0;
+        if (n < 0)
+            return 0;
+        if (n > 400)
+            return 400;
+        return Math.round(n);
+    }
+    fragmentFromText(text) {
+        const trimmed = text.trim();
+        if (!trimmed)
+            return Fragment.empty;
+        return Fragment.from([
+            defaultSchema.node('paragraph', null, [defaultSchema.text(text)]),
+        ]);
+    }
+    fragmentWithPageNumbers(text) {
+        const prefix = text.trim();
+        const nodes = prefix
+            ? [
+                defaultSchema.text(prefix + ' — '),
+                defaultSchema.text('Page '),
+                defaultSchema.node('page_var', { kind: 'pageNumber' }),
+                defaultSchema.text(' of '),
+                defaultSchema.node('page_var', { kind: 'totalPages' }),
+            ]
+            : [
+                defaultSchema.text('Page '),
+                defaultSchema.node('page_var', { kind: 'pageNumber' }),
+                defaultSchema.text(' of '),
+                defaultSchema.node('page_var', { kind: 'totalPages' }),
+            ];
+        return Fragment.from([defaultSchema.node('paragraph', null, nodes)]);
+    }
+    applyHeaderFooter(state, dispatch, close) {
+        const headerFrag = this.headerPageNum
+            ? this.fragmentWithPageNumbers(this.headerText)
+            : this.fragmentFromText(this.headerText);
+        const footerFrag = this.footerPageNum
+            ? this.fragmentWithPageNumbers(this.footerText)
+            : this.fragmentFromText(this.footerText);
+        const tr = state.tr
+            .step(new SetPageMetaStep('header', headerFrag))
+            .step(new SetPageMetaStep('footer', footerFrag));
+        dispatch(tr);
+        close();
+    }
+    clearHeaderFooter(state, dispatch, close) {
+        const tr = state.tr
+            .step(new SetPageMetaStep('header', Fragment.empty))
+            .step(new SetPageMetaStep('footer', Fragment.empty));
+        dispatch(tr);
+        this.headerText = '';
+        this.footerText = '';
+        this.headerPageNum = false;
+        this.footerPageNum = false;
+        close();
+    }
+    // -- image popover -------------------------------------------------------
+    applyImage(state, dispatch, close) {
+        const trimmed = this.imageSrc.trim();
+        if (trimmed === '') {
+            close();
+            return;
+        }
+        insertImage(defaultSchema, { src: trimmed, alt: this.imageAlt })(state, dispatch);
+        this.imageSrc = '';
+        this.imageAlt = '';
+        close();
+    }
+    onImageKeydown(event, state, dispatch, close) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.applyImage(state, dispatch, close);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+        }
+    }
+    // -- table picker --------------------------------------------------------
+    setTableHover(r, c) {
+        this.tableHover = { r, c };
+        this.cdr.markForCheck();
+    }
+    resetTableHover() {
+        this.tableHover = null;
+        this.cdr.markForCheck();
+    }
+    isTableCellOn(r, c) {
+        const h = this.tableHover;
+        return h !== null && r <= h.r && c <= h.c;
+    }
+    tablePickerLabel() {
+        const h = this.tableHover;
+        return h ? `${h.r + 1} × ${h.c + 1}` : 'Insert table';
+    }
+    pickTable(state, dispatch, close, r, c) {
+        insertTable(defaultSchema, r + 1, c + 1)(state, dispatch);
+        this.tableHover = null;
+        close();
+    }
+    // -- link popover --------------------------------------------------------
+    get linkType() {
+        return defaultSchema.marks.link;
+    }
+    hasExistingLink(state) {
+        return this.linkType ? getLinkAt(state, this.linkType) !== null : false;
+    }
+    linkInitialHref(state) {
+        if (!this.linkType)
+            return '';
+        const mark = getLinkAt(state, this.linkType);
+        return mark ? String(mark.attrs.href ?? '') : '';
+    }
+    applyLink(state, dispatch, close, rawHref) {
+        if (!this.linkType) {
+            close();
+            return;
+        }
+        const trimmed = rawHref.trim();
+        if (trimmed === '') {
+            unsetLink(this.linkType)(state, dispatch);
+            close();
+            return;
+        }
+        setLink(this.linkType, { href: trimmed })(state, dispatch);
+        close();
+    }
+    removeLink(state, dispatch, close) {
+        if (!this.linkType) {
+            close();
+            return;
+        }
+        unsetLink(this.linkType)(state, dispatch);
+        close();
+    }
+    onLinkKeydown(event, state, dispatch, close, rawHref) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.applyLink(state, dispatch, close, rawHref);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            close();
+        }
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Function)
+], DxDoxivaEditorComponent.prototype, "initialDoc", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], DxDoxivaEditorComponent.prototype, "theme", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], DxDoxivaEditorComponent.prototype, "features", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], DxDoxivaEditorComponent.prototype, "paginated", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], DxDoxivaEditorComponent.prototype, "defaultPageSize", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], DxDoxivaEditorComponent.prototype, "editable", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], DxDoxivaEditorComponent.prototype, "ariaLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], DxDoxivaEditorComponent.prototype, "onImportWarnings", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], DxDoxivaEditorComponent.prototype, "change", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], DxDoxivaEditorComponent.prototype, "stateChange", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], DxDoxivaEditorComponent.prototype, "importWarnings", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], DxDoxivaEditorComponent.prototype, "ready", void 0);
+__decorate([
+    ViewChild('linkTpl', { static: true }),
+    __metadata("design:type", TemplateRef)
+], DxDoxivaEditorComponent.prototype, "linkTpl", void 0);
+__decorate([
+    ViewChild('tableTpl', { static: true }),
+    __metadata("design:type", TemplateRef)
+], DxDoxivaEditorComponent.prototype, "tableTpl", void 0);
+__decorate([
+    ViewChild('imageTpl', { static: true }),
+    __metadata("design:type", TemplateRef)
+], DxDoxivaEditorComponent.prototype, "imageTpl", void 0);
+__decorate([
+    ViewChild('pageSettingsTpl', { static: true }),
+    __metadata("design:type", TemplateRef)
+], DxDoxivaEditorComponent.prototype, "pageSettingsTpl", void 0);
+__decorate([
+    ViewChild('headerFooterTpl', { static: true }),
+    __metadata("design:type", TemplateRef)
+], DxDoxivaEditorComponent.prototype, "headerFooterTpl", void 0);
+DxDoxivaEditorComponent = __decorate([
+    Component({
+        selector: 'dx-doxiva-editor',
+        standalone: true,
+        imports: [DoxivaEditorComponent, DoxivaToolbarComponent, NgFor, NgIf],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: `
+    <div
+      class="dx-doxiva-shell"
+      [class.dx-theme-dark]="resolvedTheme === 'dark'"
+      [class.dx-theme-light]="resolvedTheme === 'light'"
+      [class.no-header]="!chromeHeaderEnabled"
+      [class.no-footer]="!chromeFooterEnabled"
+      [style.--dx-header-height.px]="chromeHeaderHeightPx"
+      [style.--dx-footer-height.px]="chromeFooterHeightPx"
+      data-doxiva-version="0.11.0"
+      data-testid="doxiva-shell"
+    >
+      <div
+        *ngIf="showTopRow"
+        class="dx-doxiva-toprow"
+        data-testid="doxiva-toprow"
+      >
+        <button
+          *ngIf="effectiveFeatures.print"
+          type="button"
+          data-testid="btn-print-top"
+          [disabled]="view === null"
+          (click)="onPrintClick()"
+        >Print</button>
+        <button
+          *ngIf="effectiveFeatures.downloadPdf"
+          type="button"
+          data-testid="btn-download-pdf"
+          [disabled]="view === null"
+          (click)="onDownloadPdfClick()"
+        >Download PDF</button>
+        <button
+          *ngIf="effectiveFeatures.exportDocx"
+          type="button"
+          data-testid="btn-export-docx"
+          [disabled]="view === null"
+          (click)="onExportDocxClick()"
+        >Export DOCX</button>
+        <ng-container *ngIf="effectiveFeatures.importDocx">
+          <button
+            type="button"
+            data-testid="btn-import-docx"
+            (click)="fileInput.click()"
+          >Import DOCX</button>
+          <input
+            #fileInput
+            type="file"
+            accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+            data-testid="import-file-input"
+            style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+            (change)="onImportFile($event)"
+          />
+        </ng-container>
+      </div>
+
+      <dx-toolbar
+        [state]="state"
+        [actions]="actions"
+        [popoverTemplates]="popoverTemplates"
+        (dispatch)="onDispatch($event)"
+      />
+
+      <ng-template
+        #tableTpl
+        let-popState="state"
+        let-popDispatch="dispatch"
+        let-popClose="close"
+      >
+        <div
+          class="dx-toolbar-popover dx-table-picker"
+          role="dialog"
+          aria-label="Insert table"
+          (mousedown)="$event.stopPropagation()"
+          (mouseleave)="resetTableHover()"
+        >
+          <div class="dx-table-picker-grid">
+            <ng-container *ngFor="let r of tablePickerRows; let rIdx = index">
+              <button
+                *ngFor="let c of tablePickerCols; let cIdx = index"
+                type="button"
+                [class]="'dx-table-picker-cell' + (isTableCellOn(rIdx, cIdx) ? ' is-on' : '')"
+                [attr.data-testid]="'table-picker-cell-' + rIdx + '-' + cIdx"
+                [attr.aria-label]="(rIdx + 1) + ' × ' + (cIdx + 1)"
+                (mouseenter)="setTableHover(rIdx, cIdx)"
+                (mousedown)="$event.preventDefault()"
+                (click)="pickTable(popState, popDispatch, popClose, rIdx, cIdx)"
+              ></button>
+            </ng-container>
+          </div>
+          <div class="dx-table-picker-label">{{ tablePickerLabel() }}</div>
+        </div>
+      </ng-template>
+
+      <ng-template #imageTpl let-popState="state" let-popDispatch="dispatch" let-popClose="close">
+        <div
+          class="dx-toolbar-popover dx-toolbar-image-popover"
+          role="dialog"
+          aria-label="Insert image"
+          (mousedown)="$event.stopPropagation()"
+        >
+          <input
+            type="url"
+            data-testid="image-input-src"
+            placeholder="https://example.com/image.jpg"
+            [value]="imageSrc"
+            (input)="imageSrc = $any($event.target).value"
+            (keydown)="onImageKeydown($event, popState, popDispatch, popClose)"
+          />
+          <input
+            type="text"
+            data-testid="image-input-alt"
+            placeholder="Alt text (optional)"
+            [value]="imageAlt"
+            (input)="imageAlt = $any($event.target).value"
+            (keydown)="onImageKeydown($event, popState, popDispatch, popClose)"
+          />
+          <div class="dx-toolbar-image-actions">
+            <button
+              type="button"
+              data-testid="image-apply"
+              (mousedown)="$event.preventDefault()"
+              (click)="applyImage(popState, popDispatch, popClose)"
+            >Apply</button>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template
+        #headerFooterTpl
+        let-popState="state"
+        let-popDispatch="dispatch"
+        let-popClose="close"
+      >
+        <div
+          class="dx-toolbar-popover dx-header-footer-popover"
+          role="dialog"
+          aria-label="Header and footer settings"
+          (mousedown)="$event.stopPropagation()"
+        >
+          <label>
+            Header:
+            <input
+              type="text"
+              data-testid="header-text"
+              placeholder="Header text"
+              [value]="headerText"
+              (input)="headerText = $any($event.target).value"
+            />
+          </label>
+          <label class="dx-header-footer-checkbox">
+            <input
+              type="checkbox"
+              data-testid="header-pagenum"
+              [checked]="headerPageNum"
+              (change)="headerPageNum = $any($event.target).checked"
+            />
+            Show "Page N of M" in header
+          </label>
+          <fieldset class="dx-header-footer-section">
+            <legend>Header</legend>
+            <label class="dx-header-footer-checkbox">
+              <input
+                type="checkbox"
+                data-testid="header-enabled"
+                [checked]="chromeHeaderEnabled"
+                (change)="setChromeHeaderEnabled($any($event.target).checked)"
+              />
+              Enabled
+            </label>
+            <label>
+              Height (px):
+              <input
+                type="number"
+                data-testid="header-height"
+                min="0"
+                max="400"
+                [value]="chromeHeaderHeightPx"
+                (input)="setChromeHeaderHeight($any($event.target).value)"
+              />
+            </label>
+          </fieldset>
+          <label>
+            Footer:
+            <input
+              type="text"
+              data-testid="footer-text"
+              placeholder="Footer text"
+              [value]="footerText"
+              (input)="footerText = $any($event.target).value"
+            />
+          </label>
+          <label class="dx-header-footer-checkbox">
+            <input
+              type="checkbox"
+              data-testid="footer-pagenum"
+              [checked]="footerPageNum"
+              (change)="footerPageNum = $any($event.target).checked"
+            />
+            Show "Page N of M" in footer
+          </label>
+          <fieldset class="dx-header-footer-section">
+            <legend>Footer</legend>
+            <label class="dx-header-footer-checkbox">
+              <input
+                type="checkbox"
+                data-testid="footer-enabled"
+                [checked]="chromeFooterEnabled"
+                (change)="setChromeFooterEnabled($any($event.target).checked)"
+              />
+              Enabled
+            </label>
+            <label>
+              Height (px):
+              <input
+                type="number"
+                data-testid="footer-height"
+                min="0"
+                max="400"
+                [value]="chromeFooterHeightPx"
+                (input)="setChromeFooterHeight($any($event.target).value)"
+              />
+            </label>
+          </fieldset>
+          <div class="dx-header-footer-actions">
+            <button
+              type="button"
+              data-testid="header-footer-apply"
+              (mousedown)="$event.preventDefault()"
+              (click)="applyHeaderFooter(popState, popDispatch, popClose)"
+            >Apply</button>
+            <button
+              type="button"
+              data-testid="header-footer-clear"
+              (mousedown)="$event.preventDefault()"
+              (click)="clearHeaderFooter(popState, popDispatch, popClose)"
+            >Clear</button>
+            <button
+              type="button"
+              data-testid="header-footer-cancel"
+              (mousedown)="$event.preventDefault()"
+              (click)="popClose()"
+            >Cancel</button>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template
+        #pageSettingsTpl
+        let-popState="state"
+        let-popDispatch="dispatch"
+        let-popClose="close"
+      >
+        <div
+          class="dx-toolbar-popover dx-page-settings-popover"
+          role="dialog"
+          aria-label="Page settings"
+          (mousedown)="$event.stopPropagation()"
+        >
+          <label>
+            Size:
+            <select
+              data-testid="page-size"
+              [value]="pageSize"
+              (change)="pageSize = $any($event.target).value"
+            >
+              <option value="letter">Letter (8.5 × 11 in)</option>
+              <option value="a4">A4 (210 × 297 mm)</option>
+              <option value="legal">Legal (8.5 × 14 in)</option>
+              <option value="a5">A5 (148 × 210 mm)</option>
+            </select>
+          </label>
+          <label>
+            Orientation:
+            <select
+              data-testid="page-orientation"
+              [value]="pageOrientation"
+              (change)="pageOrientation = $any($event.target).value"
+            >
+              <option value="portrait">Portrait</option>
+              <option value="landscape">Landscape</option>
+            </select>
+          </label>
+          <label>
+            Margins:
+            <select
+              data-testid="page-margins"
+              [value]="pageMargins"
+              (change)="pageMargins = $any($event.target).value"
+            >
+              <option value="normal">Normal (96 px)</option>
+              <option value="narrow">Narrow (48 px)</option>
+              <option value="wide">Wide (144 px)</option>
+            </select>
+          </label>
+          <div class="dx-page-settings-actions">
+            <button
+              type="button"
+              data-testid="page-settings-apply"
+              (mousedown)="$event.preventDefault()"
+              (click)="applyPageSettings(popClose)"
+            >Apply</button>
+            <button
+              type="button"
+              data-testid="page-settings-cancel"
+              (mousedown)="$event.preventDefault()"
+              (click)="popClose()"
+            >Cancel</button>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template #linkTpl let-popState="state" let-popDispatch="dispatch" let-popClose="close">
+        <div
+          class="dx-toolbar-popover dx-toolbar-link-popover"
+          role="dialog"
+          aria-label="Insert link"
+          (mousedown)="$event.stopPropagation()"
+        >
+          <input
+            #linkInput
+            type="url"
+            data-testid="link-input"
+            placeholder="https://example.com"
+            [value]="linkInitialHref(popState)"
+            (keydown)="onLinkKeydown($event, popState, popDispatch, popClose, linkInput.value)"
+          />
+          <button
+            type="button"
+            data-testid="link-apply"
+            (mousedown)="$event.preventDefault()"
+            (click)="applyLink(popState, popDispatch, popClose, linkInput.value)"
+          >Apply</button>
+          <button
+            *ngIf="hasExistingLink(popState)"
+            type="button"
+            data-testid="link-remove"
+            (mousedown)="$event.preventDefault()"
+            (click)="removeLink(popState, popDispatch, popClose)"
+          >Remove</button>
+        </div>
+      </ng-template>
+
+      <section class="dx-doxiva-editor-wrap" data-testid="editor-wrap">
+        <dx-editor
+          *ngIf="editorVisible"
+          [state]="state"
+          [renderer]="renderer"
+          [paginated]="paginated ? paginatedConfig : undefined"
+          [editable]="editable"
+          [ariaLabel]="ariaLabel ?? 'Document editor'"
+          (dispatch)="onDispatch($event)"
+          (ready)="onReady($event)"
+        />
+      </section>
+
+      <div
+        *ngIf="showWarningsPanel"
+        class="dx-doxiva-import-warnings"
+        data-testid="import-warnings"
+      >
+        <strong>{{ importWarningsList.length }} warning{{ importWarningsList.length === 1 ? '' : 's' }}:</strong>
+        <ul>
+          <li *ngFor="let w of importWarningsList.slice(0, 5)">{{ w.code }}: {{ w.message }}</li>
+          <li *ngIf="importWarningsList.length > 5">… and {{ importWarningsList.length - 5 }} more</li>
+        </ul>
+      </div>
+    </div>
+  `,
+    })
+], DxDoxivaEditorComponent);
+export { DxDoxivaEditorComponent };
+//# sourceMappingURL=doxiva-doxiva-editor.component.js.map