tafeel-word-template-letters 1.0.0

package/fesm2022/tafeel-word-template-letters.mjs

@@ -0,0 +1,1306 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, HostListener, Output, Input, Component, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/platform-browser';
+import * as mammoth from 'mammoth';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+class WordTemplateLettersComponent {
+    constructor(fb, sanitizer) {
+        this.fb = fb;
+        this.sanitizer = sanitizer;
+        this.templates = [];
+        this.refreshTemplatesRequested = new EventEmitter();
+        this.templateTagsRequested = new EventEmitter();
+        this.uploadedTemplateAnalyzeRequested = new EventEmitter();
+        this.pdfPreviewRequested = new EventEmitter();
+        this.wordPreviewRequested = new EventEmitter();
+        this.generateLetterRequested = new EventEmitter();
+        this.suggestedTags = [];
+        this.selectedTemplateName = '';
+        this.uploadedTemplateFile = null;
+        this.uploadedTemplateName = '';
+        this.form = this.fb.group({});
+        this.tags = [];
+        this.layoutTags = [];
+        this.numberFormatControls = {};
+        this.pdfPreviewUrl = null;
+        this.isPdfPreviewStale = false;
+        this.wordHtmlPreview = null;
+        this.wordPreviewMessage = '';
+        this.signatureFile = null;
+        this.fontSize = 12;
+        this.fontBold = false;
+        this.fontItalic = false;
+        this.fontUnderline = false;
+        this.bodyToolbarTouched = {
+            fontSize: false,
+            fontBold: false,
+            fontItalic: false,
+            fontUnderline: false
+        };
+        this.lineThickness = 1;
+        this.tableRows = 3;
+        this.tableColumns = 3;
+        this.tableHasHeader = true;
+        this.tableHeaderColor = '#f1f3f5';
+        this.tablePickerOpenTag = '';
+        this.tablePickerHoverRows = 1;
+        this.tablePickerHoverColumns = 1;
+        this.tablePickerRows = Array.from({ length: 8 }, (_, index) => index + 1);
+        this.tablePickerColumns = Array.from({ length: 8 }, (_, index) => index + 1);
+        this.isLoadingTemplates = false;
+        this.isLoadingTags = false;
+        this.isAnalyzingUpload = false;
+        this.isPreviewingWordHtml = false;
+        this.isPreviewingPdf = false;
+        this.isGenerating = false;
+        this.errorMessage = '';
+        this.tableResizeCursor = '';
+        this.pdfPreviewObjectUrl = '';
+        this.tableResizeState = null;
+        this.wordPreviewTimer = null;
+        this.wordPreviewRequestId = 0;
+        this.hasPendingPreviewChanges = false;
+    }
+    ngOnInit() {
+        this.refreshTemplatesRequested.emit();
+    }
+    ngOnDestroy() {
+        this.clearWordPreviewTimer();
+        this.clearPdfPreview();
+    }
+    loadTemplates() {
+        this.errorMessage = '';
+        this.isLoadingTemplates = true;
+        this.refreshTemplatesRequested.emit();
+    }
+    setTemplates(templates) {
+        this.templates = templates || [];
+        this.isLoadingTemplates = false;
+    }
+    failTemplates(message = 'Unable to load server templates.') {
+        this.errorMessage = message;
+        this.isLoadingTemplates = false;
+    }
+    applyTemplateAnalysis(response) {
+        const templateTags = response && response.tags ? response.tags : [];
+        this.layoutTags = templateTags.filter(tag => this.isLayoutTag(tag));
+        this.tags = templateTags.filter(tag => !this.isLayoutTag(tag) && !tag.startsWith('__'));
+        this.suggestedTags = response && response.suggestedTags ? response.suggestedTags : [];
+        this.createForm(this.tags);
+        this.isLoadingTags = false;
+        this.isAnalyzingUpload = false;
+        this.previewPdfAfterTemplateReady();
+    }
+    failTemplateAnalysis(message = 'Unable to read tags from the selected template.') {
+        this.errorMessage = message;
+        this.isLoadingTags = false;
+        this.isAnalyzingUpload = false;
+        if (this.uploadedTemplateFile) {
+            this.uploadedTemplateFile = null;
+            this.uploadedTemplateName = '';
+        }
+    }
+    completePdfPreview(blob) {
+        this.isPreviewingPdf = false;
+        this.showPdfPreview(blob);
+    }
+    failPdfPreview(message = 'Unable to preview the letter as PDF.') {
+        this.errorMessage = message;
+        this.isPreviewingPdf = false;
+    }
+    completeGeneratedLetter(blob, outputFileName) {
+        const fileName = outputFileName || this.activeTemplateName.replace(/\.docx$/i, '_generated.docx');
+        this.isGenerating = false;
+        this.openBlob(blob, fileName, 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
+    }
+    failGeneratedLetter(message = 'Unable to generate the letter.') {
+        this.errorMessage = message;
+        this.isGenerating = false;
+    }
+    completeWordPreview(blob, requestId) {
+        this.convertWordBlobToHtml(blob, requestId);
+    }
+    failWordPreview(requestId, message = 'Unable to update Word preview.') {
+        if (requestId !== this.wordPreviewRequestId) {
+            return;
+        }
+        this.isPreviewingWordHtml = false;
+        this.wordPreviewMessage = message;
+    }
+    onTemplateChange() {
+        this.uploadedTemplateFile = null;
+        this.uploadedTemplateName = '';
+        this.resetTemplateState();
+        if (!this.selectedTemplateName) {
+            return;
+        }
+        this.isLoadingTags = true;
+        this.templateTagsRequested.emit(this.selectedTemplateName);
+    }
+    resetTemplateState() {
+        this.tags = [];
+        this.layoutTags = [];
+        this.suggestedTags = [];
+        this.numberFormatControls = {};
+        this.signatureFile = null;
+        this.clearPdfPreview();
+        this.clearWordPreview();
+        this.clearWordPreviewTimer();
+        this.form = this.fb.group({});
+        this.resetBodyToolbarState();
+        this.hasPendingPreviewChanges = false;
+        this.errorMessage = '';
+    }
+    onTemplateFileSelected(event) {
+        const input = event.target;
+        const file = input.files && input.files.length > 0 ? input.files[0] : null;
+        if (!file) {
+            return;
+        }
+        if (!/\.docx$/i.test(file.name)) {
+            this.errorMessage = 'Only .docx Word templates are supported.';
+            input.value = '';
+            return;
+        }
+        this.resetTemplateState();
+        this.uploadedTemplateFile = file;
+        this.uploadedTemplateName = file.name;
+        this.selectedTemplateName = '';
+        this.isAnalyzingUpload = true;
+        this.uploadedTemplateAnalyzeRequested.emit(file);
+    }
+    generateLetter() {
+        if (!this.hasActiveTemplate || this.isGenerating) {
+            return;
+        }
+        this.errorMessage = '';
+        this.isGenerating = true;
+        const outputFileName = this.activeTemplateName.replace(/\.docx$/i, '_generated.docx');
+        this.generateLetterRequested.emit(this.createRenderRequest(outputFileName));
+    }
+    previewPdf() {
+        if (!this.hasActiveTemplate || this.isPreviewingPdf) {
+            return;
+        }
+        this.errorMessage = '';
+        this.isPreviewingPdf = true;
+        this.pdfPreviewRequested.emit(this.createRenderRequest());
+    }
+    previewPdfAfterTemplateReady() {
+        setTimeout(() => {
+            if (this.hasActiveTemplate && !this.isPreviewingPdf) {
+                this.previewPdf();
+            }
+        });
+    }
+    getSuggestedTag(tag) {
+        return this.suggestedTags.find(item => item.key.toLowerCase() === tag.toLowerCase());
+    }
+    trackByTag(index, tag) {
+        return tag;
+    }
+    get hasActiveTemplate() {
+        return !!this.selectedTemplateName || !!this.uploadedTemplateFile;
+    }
+    get activeTemplateName() {
+        return this.uploadedTemplateName || this.selectedTemplateName;
+    }
+    getEditorStyles(tag) {
+        const styles = {
+            'direction': 'rtl',
+            'text-align': 'right'
+        };
+        if (this.isBodyTag(tag)) {
+            Object.assign(styles, this.getBodyToolbarStyles());
+        }
+        return styles;
+    }
+    getBodyToolbarStyles() {
+        const styles = {};
+        if (this.bodyToolbarTouched.fontSize) {
+            styles['font-size'] = `${this.fontSize || 12}pt`;
+        }
+        if (this.bodyToolbarTouched.fontBold) {
+            styles['font-weight'] = this.fontBold ? '700' : '400';
+        }
+        if (this.bodyToolbarTouched.fontItalic) {
+            styles['font-style'] = this.fontItalic ? 'italic' : 'normal';
+        }
+        if (this.bodyToolbarTouched.fontUnderline) {
+            styles['text-decoration'] = this.fontUnderline ? 'underline' : 'none';
+        }
+        return styles;
+    }
+    isNumberField(tag) {
+        return /number|no|id|date|count|mobile/i.test(tag);
+    }
+    supportsHindiNumberFormat(tag) {
+        return this.isNumberField(tag) || this.isMultilineField(tag);
+    }
+    isSystemGeneratedTag(tag) {
+        return /^(PageNumber|Page|TotalPages|PageCount)$/i.test(tag);
+    }
+    isSignatureTag(tag) {
+        return /^(SignatureImage|Signature|UserSignatureImage)$/i.test(tag);
+    }
+    isMultilineField(tag) {
+        const normalizedTag = this.normalizeTagName(tag);
+        return /^(Body|LetterBody|Description|Notes|Remarks|DecisionText)$/i.test(normalizedTag)
+            || /Body$/i.test(normalizedTag);
+    }
+    isBodyTag(tag) {
+        return /^Body$/i.test(this.normalizeTagName(tag));
+    }
+    isLayoutTag(tag) {
+        return this.isSystemGeneratedTag(tag) || this.isSignatureTag(tag);
+    }
+    onBodyToolbarStyleChange(tag, style) {
+        this.bodyToolbarTouched[style] = true;
+        const editor = this.getRichEditorElement(tag);
+        if (editor && this.isBodyTag(tag)) {
+            this.applyBodyToolbarStyles(editor);
+            this.syncRichEditorValue(tag, editor);
+        }
+        this.markPreviewDirty();
+    }
+    resetBodyToolbarStyles(tag) {
+        this.resetBodyToolbarState();
+        const editor = this.getRichEditorElement(tag);
+        if (editor && this.isBodyTag(tag)) {
+            this.clearBodyToolbarStyles(editor);
+            this.syncRichEditorValue(tag, editor);
+        }
+        this.markPreviewDirty();
+    }
+    onRichTextInput(tag, event) {
+        const target = event.target;
+        const control = this.form.get(tag);
+        if (control) {
+            control.setValue(target.innerHTML);
+        }
+        this.markPreviewDirty();
+    }
+    onRichTextFocusOut(event) {
+        this.onFieldPreviewCommit(event);
+    }
+    onFieldPreviewCommit(event) {
+        if (this.isFocusMovingWithinSameTagField(event)) {
+            return;
+        }
+        if (!this.hasPendingPreviewChanges) {
+            return;
+        }
+        this.scheduleWordHtmlPreview(300, true);
+    }
+    markPreviewDirty() {
+        this.hasPendingPreviewChanges = true;
+        if (this.pdfPreviewUrl) {
+            this.isPdfPreviewStale = true;
+        }
+    }
+    onRichTextPaste(tag, event) {
+        event.preventDefault();
+        const clipboardData = event.clipboardData;
+        const html = clipboardData ? clipboardData.getData('text/html') : '';
+        const text = clipboardData ? clipboardData.getData('text/plain') : '';
+        const cleanHtml = html ? this.cleanPastedHtml(html) : this.plainTextToHtml(text);
+        this.insertEditorHtml(tag, cleanHtml);
+    }
+    applyEditorCommand(tag, command, value) {
+        const editor = this.getRichEditorElement(tag);
+        if (!editor) {
+            return;
+        }
+        editor.focus();
+        document.execCommand(command, false, value || null);
+        this.syncRichEditorValue(tag, editor);
+    }
+    applyEditorAlignment(tag, alignment) {
+        const editor = this.getRichEditorElement(tag);
+        if (!editor) {
+            return;
+        }
+        editor.focus();
+        this.ensureEditorBlockStructure(editor, alignment);
+        const blocks = this.getSelectedEditorBlocks(editor);
+        const targets = blocks.length > 0 ? blocks : this.getEditorBlocks(editor);
+        if (targets.length === 0) {
+            this.syncRichEditorValue(tag, editor);
+            return;
+        }
+        targets.forEach(block => {
+            block.style.textAlign = alignment;
+            if (alignment === 'right' || alignment === 'justify') {
+                block.dir = 'rtl';
+                block.style.direction = 'rtl';
+            }
+            else if (alignment === 'left') {
+                block.dir = 'ltr';
+                block.style.direction = 'ltr';
+            }
+        });
+        this.syncRichEditorValue(tag, editor);
+    }
+    onTableResizeMouseMove(tag, event) {
+        if (this.tableResizeState) {
+            this.resizeActiveTable(event);
+            return;
+        }
+        const targetCell = this.getResizeTargetCell(event);
+        if (!targetCell) {
+            this.tableResizeCursor = '';
+            return;
+        }
+        this.tableResizeCursor = this.getResizeDirection(targetCell, event) || '';
+    }
+    onTableResizeMouseDown(tag, event) {
+        const editor = this.getRichEditorElement(tag);
+        const targetCell = this.getResizeTargetCell(event);
+        if (!editor || !targetCell) {
+            return;
+        }
+        const direction = this.getResizeDirection(targetCell, event);
+        if (!direction) {
+            return;
+        }
+        const table = targetCell.closest('table');
+        const row = targetCell.parentElement;
+        if (!table || !row) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.tableResizeState = {
+            tag,
+            editor,
+            table,
+            rowIndex: row.rowIndex,
+            columnIndex: targetCell.cellIndex,
+            startX: event.clientX,
+            startY: event.clientY,
+            startWidth: targetCell.getBoundingClientRect().width,
+            startHeight: targetCell.getBoundingClientRect().height,
+            direction
+        };
+        this.tableResizeCursor = direction;
+    }
+    onDocumentMouseMove(event) {
+        if (this.tableResizeState) {
+            this.resizeActiveTable(event);
+        }
+    }
+    onDocumentMouseUp() {
+        if (!this.tableResizeState) {
+            return;
+        }
+        this.syncTableEditor(this.tableResizeState.tag, this.tableResizeState.editor);
+        this.tableResizeState = null;
+        this.tableResizeCursor = '';
+    }
+    clearTableResizeCursor() {
+        if (!this.tableResizeState) {
+            this.tableResizeCursor = '';
+        }
+    }
+    insertTable(tag) {
+        const rows = this.clamp(this.tableRows, 1, 20);
+        const columns = this.clamp(this.tableColumns, 1, 8);
+        const tableId = `table-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
+        const wrapperStyle = 'width:100%;text-align:left;direction:ltr;';
+        const tableStyle = 'display:inline-table;border-collapse:collapse;border:1px solid #495057;direction:ltr;margin-top:10px;margin-right:0;margin-bottom:14px;margin-left:0;width:auto;max-width:100%;';
+        const cellStyle = 'border:1px solid #495057;direction:rtl;min-width:90px;height:34px;padding:7px 9px;vertical-align:top;';
+        const headerStyle = `${cellStyle}background:${this.tableHeaderColor};font-weight:700;`;
+        let html = `<div class="template-editor-table-wrapper" data-table-align="left" style="${wrapperStyle}"><table class="template-editor-table" data-template-table-id="${tableId}" data-table-align="left" dir="ltr" style="${tableStyle}"><tbody>`;
+        if (this.tableHasHeader) {
+            html += '<tr>';
+            this.createTableCells(columns, index => `Header ${index + 1}`).forEach(cell => html += `<th contenteditable="true" data-table-header="true" style="${headerStyle}">${cell}</th>`);
+            html += '</tr>';
+        }
+        for (let row = 0; row < rows; row++) {
+            html += '<tr>';
+            this.createTableCells(columns, () => '<br>').forEach(cell => html += `<td contenteditable="true" style="${cellStyle}">${cell}</td>`);
+            html += '</tr>';
+        }
+        html += '</tbody></table></div><p><br></p>';
+        this.insertEditorHtml(tag, html);
+        this.focusFirstTableCell(tag, tableId);
+    }
+    toggleTablePicker(tag) {
+        this.tablePickerOpenTag = this.tablePickerOpenTag === tag ? '' : tag;
+        this.tablePickerHoverRows = this.clamp(this.tableRows, 1, 8);
+        this.tablePickerHoverColumns = this.clamp(this.tableColumns, 1, 8);
+    }
+    previewTableSize(rows, columns) {
+        this.tablePickerHoverRows = rows;
+        this.tablePickerHoverColumns = columns;
+    }
+    isTablePickerCellActive(row, column) {
+        return row <= this.tablePickerHoverRows && column <= this.tablePickerHoverColumns;
+    }
+    insertTableFromPicker(tag, rows, columns) {
+        this.tableRows = rows;
+        this.tableColumns = columns;
+        this.tablePickerOpenTag = '';
+        this.insertTable(tag);
+    }
+    applyCurrentTableHeaderColor(tag) {
+        this.tableHasHeader = true;
+        this.applyCurrentTableHeader(tag);
+    }
+    applyCurrentTableHeader(tag) {
+        const context = this.getCurrentTableContext(tag);
+        if (!context) {
+            return;
+        }
+        const firstRow = context.table.rows[0];
+        if (!firstRow) {
+            return;
+        }
+        Array.from(firstRow.cells).forEach(cell => {
+            const tableCell = cell;
+            if (this.tableHasHeader) {
+                tableCell.setAttribute('data-table-header', 'true');
+                tableCell.style.backgroundColor = this.tableHeaderColor;
+                tableCell.style.fontWeight = '700';
+            }
+            else {
+                tableCell.removeAttribute('data-table-header');
+                tableCell.style.removeProperty('background-color');
+                tableCell.style.removeProperty('font-weight');
+            }
+        });
+        this.syncTableEditor(tag, context.editor);
+    }
+    addTableRow(tag) {
+        const context = this.getCurrentTableContext(tag);
+        if (!context) {
+            return;
+        }
+        const referenceRow = context.row || context.table.rows[context.table.rows.length - 1];
+        const columnCount = Math.max(referenceRow ? referenceRow.cells.length : 0, 1);
+        const newRow = context.table.insertRow(referenceRow ? referenceRow.rowIndex + 1 : -1);
+        for (let index = 0; index < columnCount; index++) {
+            const cell = newRow.insertCell(index);
+            cell.contentEditable = 'true';
+            cell.innerHTML = '<br>';
+        }
+        this.focusElementContents(newRow.cells[0]);
+        this.syncTableEditor(tag, context.editor);
+    }
+    deleteTableRow(tag) {
+        const context = this.getCurrentTableContext(tag);
+        if (!context || context.table.rows.length <= 1) {
+            return;
+        }
+        const rowIndex = context.row ? context.row.rowIndex : context.table.rows.length - 1;
+        context.table.deleteRow(rowIndex);
+        const nextRow = context.table.rows[Math.min(rowIndex, context.table.rows.length - 1)];
+        if (nextRow && nextRow.cells.length > 0) {
+            this.focusElementContents(nextRow.cells[0]);
+        }
+        this.syncTableEditor(tag, context.editor);
+    }
+    addTableColumn(tag) {
+        const context = this.getCurrentTableContext(tag);
+        if (!context) {
+            return;
+        }
+        const insertIndex = context.cell ? context.cell.cellIndex + 1 : this.getMaxTableColumnCount(context.table);
+        Array.from(context.table.rows).forEach(row => {
+            const referenceCell = row.cells[Math.max(0, Math.min(insertIndex - 1, row.cells.length - 1))];
+            const isHeaderRow = referenceCell && referenceCell.tagName.toLowerCase() === 'th';
+            const cell = document.createElement(isHeaderRow ? 'th' : 'td');
+            cell.contentEditable = 'true';
+            cell.innerHTML = '<br>';
+            row.insertBefore(cell, row.cells[insertIndex] || null);
+        });
+        const focusRow = context.row || context.table.rows[0];
+        if (focusRow && focusRow.cells[insertIndex]) {
+            this.focusElementContents(focusRow.cells[insertIndex]);
+        }
+        this.syncTableEditor(tag, context.editor);
+    }
+    deleteTableColumn(tag) {
+        const context = this.getCurrentTableContext(tag);
+        if (!context || this.getMaxTableColumnCount(context.table) <= 1) {
+            return;
+        }
+        const deleteIndex = context.cell ? context.cell.cellIndex : this.getMaxTableColumnCount(context.table) - 1;
+        Array.from(context.table.rows).forEach(row => {
+            if (row.cells[deleteIndex]) {
+                row.deleteCell(deleteIndex);
+            }
+        });
+        const focusRow = context.row || context.table.rows[0];
+        const focusIndex = Math.max(0, deleteIndex - 1);
+        if (focusRow && focusRow.cells[focusIndex]) {
+            this.focusElementContents(focusRow.cells[focusIndex]);
+        }
+        this.syncTableEditor(tag, context.editor);
+    }
+    deleteCurrentTable(tag) {
+        const context = this.getCurrentTableContext(tag);
+        if (!context) {
+            return;
+        }
+        const paragraph = document.createElement('p');
+        paragraph.innerHTML = '<br>';
+        const removableElement = context.wrapper || context.table;
+        removableElement.parentNode?.insertBefore(paragraph, removableElement.nextSibling);
+        removableElement.remove();
+        this.focusElementContents(paragraph);
+        this.syncTableEditor(tag, context.editor);
+    }
+    alignCurrentTable(tag, alignment) {
+        const context = this.getCurrentTableContext(tag);
+        if (!context) {
+            return;
+        }
+        context.table.style.textAlign = alignment;
+        context.table.style.display = 'inline-table';
+        context.table.style.float = 'none';
+        context.table.dir = 'ltr';
+        context.table.style.direction = 'ltr';
+        context.table.style.removeProperty('margin');
+        context.table.setAttribute('data-table-align', alignment);
+        if (context.wrapper) {
+            context.wrapper.style.width = '100%';
+            context.wrapper.style.textAlign = alignment;
+            context.wrapper.setAttribute('data-table-align', alignment);
+        }
+        if (alignment === 'right') {
+            if (context.wrapper) {
+                context.wrapper.removeAttribute('dir');
+                context.wrapper.style.removeProperty('direction');
+            }
+            context.table.dir = 'ltr';
+            context.table.style.direction = 'ltr';
+            context.table.style.marginLeft = '0';
+            context.table.style.marginRight = '0';
+        }
+        else if (alignment === 'center') {
+            if (context.wrapper) {
+                context.wrapper.removeAttribute('dir');
+                context.wrapper.style.removeProperty('direction');
+            }
+            context.table.dir = 'ltr';
+            context.table.style.direction = 'ltr';
+            context.table.style.marginLeft = '0';
+            context.table.style.marginRight = '0';
+        }
+        else {
+            if (context.wrapper) {
+                context.wrapper.removeAttribute('dir');
+                context.wrapper.style.removeProperty('direction');
+            }
+            context.table.dir = 'ltr';
+            context.table.style.direction = 'ltr';
+            context.table.style.marginLeft = '0';
+            context.table.style.marginRight = '0';
+        }
+        this.syncTableEditor(tag, context.editor);
+    }
+    insertHeading(tag) {
+        this.insertEditorHtml(tag, '<h2>Section Title</h2>');
+    }
+    insertParagraph(tag) {
+        this.insertEditorHtml(tag, '<p>Write paragraph text here.</p>');
+    }
+    insertBulletList(tag) {
+        this.insertEditorHtml(tag, '<ul><li>First point</li><li>Second point</li><li>Third point</li></ul>');
+    }
+    insertNumberedList(tag) {
+        this.insertEditorHtml(tag, '<ol><li>First item</li><li>Second item</li><li>Third item</li></ol>');
+    }
+    insertSeparator(tag) {
+        const thickness = this.clamp(this.lineThickness, 1, 6);
+        this.lineThickness = thickness;
+        this.insertEditorHtml(tag, `<hr style="border:0;border-top:${thickness}px solid #495057;margin:10px 0;"><p><br></p>`);
+    }
+    insertArabicOpening(tag) {
+        this.insertEditorHtml(tag, '<p dir="rtl" style="text-align: right;">سعادة/ </p><p dir="rtl" style="text-align: right;">السلام عليكم ورحمة الله وبركاته،</p><p dir="rtl" style="text-align: right;">إشارة إلى الموضوع أعلاه، نفيدكم بما يلي:</p>');
+    }
+    onSignatureSelected(event) {
+        const input = event.target;
+        this.signatureFile = input.files && input.files.length > 0 ? input.files[0] : null;
+        this.scheduleWordHtmlPreview();
+    }
+    createForm(tags) {
+        const group = {};
+        tags.forEach(tag => {
+            group[tag] = [''];
+            if (this.supportsHindiNumberFormat(tag)) {
+                this.numberFormatControls[tag] = false;
+            }
+        });
+        this.form = this.fb.group(group);
+    }
+    insertEditorHtml(tag, html) {
+        const control = this.form.get(tag);
+        if (!control) {
+            return;
+        }
+        const editor = this.getRichEditorElement(tag);
+        if (!editor) {
+            control.setValue(`${String(control.value || '')}${html}`);
+            return;
+        }
+        editor.focus();
+        this.insertHtmlAtCursor(editor, html);
+        this.syncRichEditorValue(tag, editor);
+        this.markPreviewDirty();
+    }
+    focusFirstTableCell(tag, tableId) {
+        window.setTimeout(() => {
+            const editor = this.getRichEditorElement(tag);
+            const table = editor ? editor.querySelector(`table[data-template-table-id="${tableId}"]`) : null;
+            const cell = table ? table.querySelector('th,td') : null;
+            if (cell) {
+                this.focusElementContents(cell);
+            }
+        });
+    }
+    getCurrentTableContext(tag) {
+        const editor = this.getRichEditorElement(tag);
+        if (!editor) {
+            return null;
+        }
+        const selection = window.getSelection();
+        const selectedElement = selection && selection.anchorNode && editor.contains(selection.anchorNode)
+            ? this.getElementFromSelectionNode(selection.anchorNode)
+            : null;
+        const cell = selectedElement ? selectedElement.closest('td,th') : null;
+        const row = cell ? cell.closest('tr') : null;
+        const tableFromSelection = cell ? cell.closest('table') : null;
+        const tables = Array.from(editor.querySelectorAll('table'));
+        const table = tableFromSelection || tables[tables.length - 1] || null;
+        const wrapper = table ? table.closest('.template-editor-table-wrapper') : null;
+        return table ? { editor, table, wrapper, row, cell } : null;
+    }
+    getMaxTableColumnCount(table) {
+        return Array.from(table.rows).reduce((max, row) => Math.max(max, row.cells.length), 0);
+    }
+    focusElementContents(element) {
+        element.focus();
+        const range = document.createRange();
+        range.selectNodeContents(element);
+        range.collapse(false);
+        const selection = window.getSelection();
+        if (selection) {
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+    }
+    syncTableEditor(tag, editor) {
+        this.syncRichEditorValue(tag, editor);
+        this.markPreviewDirty();
+        editor.focus();
+    }
+    isFocusMovingWithinSameTagField(event) {
+        if (!event) {
+            return false;
+        }
+        const currentTarget = event.currentTarget;
+        const nextTarget = event.relatedTarget;
+        const currentField = currentTarget ? currentTarget.closest('.tag-field') : null;
+        return !!currentField && !!nextTarget && currentField.contains(nextTarget);
+    }
+    insertHtmlAtCursor(editor, html) {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0 || !editor.contains(selection.anchorNode)) {
+            editor.insertAdjacentHTML('beforeend', html);
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+        const container = document.createElement('div');
+        container.innerHTML = html;
+        const fragment = document.createDocumentFragment();
+        let node;
+        let lastNode = null;
+        while ((node = container.firstChild)) {
+            lastNode = fragment.appendChild(node);
+        }
+        range.insertNode(fragment);
+        if (lastNode) {
+            range.setStartAfter(lastNode);
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+    }
+    cleanPastedHtml(html) {
+        const container = document.createElement('div');
+        container.innerHTML = String(html || '')
+            .replace(/<!--[\s\S]*?-->/g, '')
+            .replace(/<style[\s\S]*?<\/style>/gi, '')
+            .replace(/<script[\s\S]*?<\/script>/gi, '')
+            .replace(/<xml[\s\S]*?<\/xml>/gi, '')
+            .replace(/<meta[\s\S]*?>/gi, '')
+            .replace(/<link[\s\S]*?>/gi, '')
+            .replace(/<\/?o:p[^>]*>/gi, '');
+        this.cleanPastedNode(container);
+        const cleaned = container.innerHTML.trim();
+        return cleaned || this.plainTextToHtml(container.textContent || '');
+    }
+    cleanPastedNode(node) {
+        Array.from(node.childNodes).forEach(child => {
+            if (child.nodeType === Node.TEXT_NODE) {
+                child.textContent = this.normalizePastedText(child.textContent || '');
+                return;
+            }
+            if (!(child instanceof HTMLElement)) {
+                child.parentNode?.removeChild(child);
+                return;
+            }
+            this.cleanPastedNode(child);
+            const tagName = child.tagName.toLowerCase();
+            if (!this.isAllowedPasteTag(tagName)) {
+                this.unwrapElement(child);
+                return;
+            }
+            const hasRtlText = this.containsRtlText(child.textContent || '');
+            const direction = hasRtlText && this.isPastedBlockTag(tagName)
+                ? 'rtl'
+                : this.getAllowedDirection(child.getAttribute('dir'));
+            const cleanStyle = this.getCleanPastedStyle(child);
+            Array.from(child.attributes).forEach(attribute => child.removeAttribute(attribute.name));
+            if (direction) {
+                child.setAttribute('dir', direction);
+            }
+            if (cleanStyle) {
+                child.setAttribute('style', cleanStyle);
+            }
+            if ((tagName === 'span' || tagName === 'font' || tagName === 'a') && !cleanStyle && !direction) {
+                this.unwrapElement(child);
+            }
+        });
+    }
+    isAllowedPasteTag(tagName) {
+        return [
+            'p', 'div', 'br', 'h1', 'h2', 'h3', 'ul', 'ol', 'li',
+            'table', 'thead', 'tbody', 'tr', 'td', 'th', 'strong', 'b',
+            'em', 'i', 'u', 'span', 'font', 'hr', 'a'
+        ].indexOf(tagName) >= 0;
+    }
+    getAllowedDirection(value) {
+        const normalized = String(value || '').toLowerCase();
+        return normalized === 'rtl' || normalized === 'ltr' ? normalized : '';
+    }
+    getCleanPastedStyle(element) {
+        const style = element.getAttribute('style') || '';
+        const rules = [];
+        const textAlign = /text-align\s*:\s*(right|center|left|justify)/i.exec(style);
+        const direction = /direction\s*:\s*(rtl|ltr)/i.exec(style);
+        const fontWeight = /font-weight\s*:\s*(bold|[6-9]00)/i.exec(style);
+        const fontStyle = /font-style\s*:\s*italic/i.test(style);
+        const textDecoration = /text-decoration[^:]*:\s*[^;]*underline/i.test(style);
+        if (this.isPastedBlockTag(element.tagName.toLowerCase()) && this.containsRtlText(element.textContent || '') && (!textAlign || textAlign[1].toLowerCase() !== 'center')) {
+            rules.push('text-align: right');
+        }
+        else if (textAlign) {
+            rules.push(`text-align: ${textAlign[1].toLowerCase()}`);
+        }
+        if (this.isPastedBlockTag(element.tagName.toLowerCase()) && this.containsRtlText(element.textContent || '')) {
+            rules.push('direction: rtl');
+        }
+        else if (direction) {
+            rules.push(`direction: ${direction[1].toLowerCase()}`);
+        }
+        if (fontWeight || element.tagName.toLowerCase() === 'b' || element.tagName.toLowerCase() === 'strong') {
+            rules.push('font-weight: bold');
+        }
+        if (fontStyle || element.tagName.toLowerCase() === 'i' || element.tagName.toLowerCase() === 'em') {
+            rules.push('font-style: italic');
+        }
+        if (textDecoration || element.tagName.toLowerCase() === 'u') {
+            rules.push('text-decoration: underline');
+        }
+        return rules.join('; ');
+    }
+    normalizePastedText(value) {
+        return String(value || '')
+            .replace(/\u00a0/g, ' ')
+            .replace(/[ \t\r\n\f\v]+/g, ' ');
+    }
+    isPastedBlockTag(tagName) {
+        return ['p', 'div', 'h1', 'h2', 'h3', 'li', 'td', 'th'].indexOf(tagName) >= 0;
+    }
+    containsRtlText(value) {
+        return /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/.test(String(value || ''));
+    }
+    unwrapElement(element) {
+        const parent = element.parentNode;
+        if (!parent) {
+            return;
+        }
+        while (element.firstChild) {
+            parent.insertBefore(element.firstChild, element);
+        }
+        parent.removeChild(element);
+    }
+    plainTextToHtml(text) {
+        return String(text || '')
+            .replace(/\r\n/g, '\n')
+            .split('\n')
+            .map(line => `<p>${line ? this.escapeHtml(line) : '<br>'}</p>`)
+            .join('');
+    }
+    escapeHtml(value) {
+        return String(value || '')
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;');
+    }
+    getRichEditorElement(tag) {
+        return document.getElementById(`tag-${tag}`);
+    }
+    getSelectedEditorBlocks(editor) {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0 || !editor.contains(selection.anchorNode)) {
+            return [];
+        }
+        const range = selection.getRangeAt(0);
+        const blocks = this.getEditorBlocks(editor)
+            .filter(block => range.intersectsNode(block));
+        if (blocks.length > 0) {
+            return blocks;
+        }
+        const anchorElement = this.getElementFromSelectionNode(selection.anchorNode);
+        const closestBlock = anchorElement ? this.closestEditorBlock(anchorElement, editor) : null;
+        return closestBlock ? [closestBlock] : [];
+    }
+    getEditorBlocks(editor) {
+        return Array.from(editor.querySelectorAll('p, div, h1, h2, h3, li, td, th'));
+    }
+    ensureEditorBlockStructure(editor, fallbackAlignment = 'right') {
+        const inlineNodes = [];
+        Array.from(editor.childNodes).forEach(node => {
+            if (this.isIgnorableEditorTextNode(node)) {
+                editor.removeChild(node);
+                return;
+            }
+            if (this.isEditorBlockNode(node)) {
+                this.wrapInlineEditorNodes(editor, inlineNodes, node, fallbackAlignment);
+                return;
+            }
+            inlineNodes.push(node);
+        });
+        this.wrapInlineEditorNodes(editor, inlineNodes, null, fallbackAlignment);
+    }
+    wrapInlineEditorNodes(editor, inlineNodes, beforeNode, fallbackAlignment) {
+        if (inlineNodes.length === 0) {
+            return;
+        }
+        const paragraph = document.createElement('p');
+        const text = inlineNodes.map(node => node.textContent || '').join('');
+        const hasRtlText = this.containsRtlText(text);
+        const alignment = fallbackAlignment || (hasRtlText ? 'right' : 'left');
+        paragraph.style.textAlign = alignment;
+        if (alignment === 'right' || alignment === 'justify' || hasRtlText) {
+            paragraph.dir = 'rtl';
+            paragraph.style.direction = 'rtl';
+        }
+        else if (alignment === 'left') {
+            paragraph.dir = 'ltr';
+            paragraph.style.direction = 'ltr';
+        }
+        inlineNodes.forEach(node => paragraph.appendChild(node));
+        editor.insertBefore(paragraph, beforeNode);
+        inlineNodes.length = 0;
+    }
+    isEditorBlockNode(node) {
+        return node instanceof HTMLElement && /^(p|div|h1|h2|h3|ul|ol|li|table|hr)$/i.test(node.tagName);
+    }
+    isIgnorableEditorTextNode(node) {
+        return node.nodeType === Node.TEXT_NODE && !String(node.textContent || '').trim();
+    }
+    getElementFromSelectionNode(node) {
+        if (!node) {
+            return null;
+        }
+        return node instanceof HTMLElement ? node : node.parentElement;
+    }
+    closestEditorBlock(element, editor) {
+        const block = element.closest('p, div, h1, h2, h3, li, td, th');
+        return block && editor.contains(block) ? block : null;
+    }
+    getResizeTargetCell(event) {
+        const element = event.target;
+        const cell = element ? element.closest('td,th') : null;
+        return cell && cell.closest('.rich-body-editor') ? cell : null;
+    }
+    getResizeDirection(cell, event) {
+        const rect = cell.getBoundingClientRect();
+        const resizeThreshold = 7;
+        const nearRightEdge = Math.abs(event.clientX - rect.right) <= resizeThreshold;
+        const nearBottomEdge = Math.abs(event.clientY - rect.bottom) <= resizeThreshold;
+        if (nearRightEdge && nearBottomEdge) {
+            return 'both';
+        }
+        if (nearRightEdge) {
+            return 'column';
+        }
+        if (nearBottomEdge) {
+            return 'row';
+        }
+        return null;
+    }
+    resizeActiveTable(event) {
+        if (!this.tableResizeState) {
+            return;
+        }
+        const state = this.tableResizeState;
+        if (state.direction === 'column' || state.direction === 'both') {
+            const width = Math.max(44, Math.round(state.startWidth + event.clientX - state.startX));
+            this.setTableColumnWidth(state.table, state.columnIndex, width);
+        }
+        if (state.direction === 'row' || state.direction === 'both') {
+            const height = Math.max(28, Math.round(state.startHeight + event.clientY - state.startY));
+            this.setTableRowHeight(state.table, state.rowIndex, height);
+        }
+    }
+    setTableColumnWidth(table, columnIndex, width) {
+        Array.from(table.rows).forEach(row => {
+            const cell = row.cells[columnIndex];
+            if (!cell) {
+                return;
+            }
+            cell.style.width = `${width}px`;
+            cell.style.minWidth = `${width}px`;
+        });
+    }
+    setTableRowHeight(table, rowIndex, height) {
+        const row = table.rows[rowIndex];
+        if (!row) {
+            return;
+        }
+        row.style.height = `${height}px`;
+        Array.from(row.cells).forEach(cell => {
+            cell.style.height = `${height}px`;
+            cell.style.minHeight = `${height}px`;
+        });
+    }
+    syncRichEditorValue(tag, editor, emitEvent = true) {
+        const control = this.form.get(tag);
+        if (control) {
+            control.setValue(editor.innerHTML, { emitEvent });
+        }
+    }
+    applyBodyToolbarStyles(editor) {
+        const styles = this.getBodyToolbarStyles();
+        const targets = Array.from(editor.querySelectorAll('p, h1, h2, h3, li, td, th'));
+        targets.forEach(target => {
+            if (styles['font-size']) {
+                target.style.fontSize = styles['font-size'];
+            }
+            if (styles['font-style']) {
+                target.style.fontStyle = styles['font-style'];
+            }
+            if (styles['text-decoration']) {
+                target.style.textDecoration = styles['text-decoration'];
+            }
+            if (styles['font-weight'] && (this.fontBold || target.tagName.toLowerCase() !== 'th')) {
+                target.style.fontWeight = styles['font-weight'];
+            }
+        });
+    }
+    clearBodyToolbarStyles(editor) {
+        const targets = Array.from(editor.querySelectorAll('p, h1, h2, h3, li, td, th'));
+        targets.forEach(target => {
+            target.style.removeProperty('font-size');
+            target.style.removeProperty('font-weight');
+            target.style.removeProperty('font-style');
+            target.style.removeProperty('text-decoration');
+        });
+    }
+    resetBodyToolbarState() {
+        this.fontSize = 12;
+        this.fontBold = false;
+        this.fontItalic = false;
+        this.fontUnderline = false;
+        this.bodyToolbarTouched = {
+            fontSize: false,
+            fontBold: false,
+            fontItalic: false,
+            fontUnderline: false
+        };
+    }
+    createTableRow(cells) {
+        return `| ${cells.join(' | ')} |`;
+    }
+    createTableCells(count, valueFactory) {
+        const cells = [];
+        for (let index = 0; index < count; index++) {
+            cells.push(valueFactory(index));
+        }
+        return cells;
+    }
+    clamp(value, min, max) {
+        const parsedValue = Number(value);
+        if (isNaN(parsedValue) || !isFinite(parsedValue)) {
+            return min;
+        }
+        return Math.min(Math.max(Math.floor(parsedValue), min), max);
+    }
+    normalizeTagName(tag) {
+        return (tag || '')
+            .replace(/[{}[\]]/g, '')
+            .trim();
+    }
+    buildTagPayload() {
+        const payload = {};
+        Object.keys(this.form.value || {}).forEach(key => {
+            if (this.isMultilineField(key)) {
+                const editor = this.getRichEditorElement(key);
+                if (editor) {
+                    this.ensureEditorBlockStructure(editor);
+                    if (this.isBodyTag(key)) {
+                        this.applyBodyToolbarStyles(editor);
+                    }
+                    this.normalizeEditorTablesForExport(editor);
+                    this.syncRichEditorValue(key, editor, false);
+                }
+            }
+            payload[key] = this.form.value[key] == null ? '' : String(this.form.value[key]);
+            if (this.supportsHindiNumberFormat(key)) {
+                payload[`__numberFormat:${key}`] = this.numberFormatControls[key] ? 'hindi' : 'english';
+            }
+        });
+        payload['SignatureImage'] = this.signatureFile ? '[Signature Image]' : '';
+        payload['Signature'] = this.signatureFile ? '[Signature Image]' : '';
+        payload['UserSignatureImage'] = this.signatureFile ? '[Signature Image]' : '';
+        return payload;
+    }
+    createRenderRequest(outputFileName) {
+        return {
+            templateName: this.selectedTemplateName,
+            uploadedTemplateFile: this.uploadedTemplateFile,
+            tags: this.buildTagPayload(),
+            outputFileName,
+            signatureFile: this.signatureFile
+        };
+    }
+    normalizeEditorTablesForExport(editor) {
+        const tables = Array.from(editor.querySelectorAll('table'));
+        tables.forEach(table => {
+            const wrapper = table.closest('.template-editor-table-wrapper');
+            const alignment = this.getTableExportAlignment(table, wrapper);
+            if (!alignment) {
+                return;
+            }
+            table.setAttribute('data-table-align', alignment);
+            table.setAttribute('align', alignment);
+            table.setAttribute('dir', 'ltr');
+            table.style.textAlign = alignment;
+            table.style.display = 'inline-table';
+            table.style.direction = 'ltr';
+            table.style.float = 'none';
+            if (wrapper) {
+                wrapper.setAttribute('data-table-align', alignment);
+                wrapper.style.width = '100%';
+                wrapper.style.textAlign = alignment;
+            }
+        });
+    }
+    getTableExportAlignment(table, wrapper) {
+        const wrapperTextAlign = (wrapper?.style.textAlign || '').toLowerCase();
+        if (wrapperTextAlign === 'left' || wrapperTextAlign === 'center' || wrapperTextAlign === 'right') {
+            return wrapperTextAlign;
+        }
+        const wrapperDataAlignment = (wrapper?.getAttribute('data-table-align') || '').toLowerCase();
+        if (wrapperDataAlignment === 'left' || wrapperDataAlignment === 'center' || wrapperDataAlignment === 'right') {
+            return wrapperDataAlignment;
+        }
+        const tableTextAlign = (table.style.textAlign || '').toLowerCase();
+        if (tableTextAlign === 'left' || tableTextAlign === 'center' || tableTextAlign === 'right') {
+            return tableTextAlign;
+        }
+        const tableDataAlignment = (table.getAttribute('data-table-align') || '').toLowerCase();
+        if (tableDataAlignment === 'left' || tableDataAlignment === 'center' || tableDataAlignment === 'right') {
+            return tableDataAlignment;
+        }
+        return null;
+    }
+    showPdfPreview(blob) {
+        this.clearPdfPreview();
+        const pdfBlob = new Blob([blob], { type: 'application/pdf' });
+        this.pdfPreviewObjectUrl = window.URL.createObjectURL(pdfBlob);
+        this.pdfPreviewUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`${this.pdfPreviewObjectUrl}#zoom=page-fit`);
+        this.isPdfPreviewStale = false;
+        this.hasPendingPreviewChanges = false;
+    }
+    scheduleWordHtmlPreview(delay = 650, refreshPdf = false) {
+        if (!this.hasActiveTemplate || this.isLoadingTags || this.isAnalyzingUpload) {
+            return;
+        }
+        if (this.pdfPreviewUrl) {
+            this.isPdfPreviewStale = true;
+            if (refreshPdf) {
+                this.clearWordPreviewTimer();
+                this.wordPreviewTimer = setTimeout(() => this.refreshPdfPreviewAfterFieldChange(delay), delay);
+            }
+            return;
+        }
+        this.clearWordPreviewTimer();
+        this.wordPreviewTimer = setTimeout(() => this.renderWordHtmlPreview(), delay);
+    }
+    refreshPdfPreviewAfterFieldChange(delay) {
+        this.wordPreviewTimer = null;
+        if (!this.hasActiveTemplate || !this.pdfPreviewUrl) {
+            return;
+        }
+        if (this.isPreviewingPdf) {
+            this.wordPreviewTimer = setTimeout(() => this.refreshPdfPreviewAfterFieldChange(delay), delay);
+            return;
+        }
+        this.previewPdf();
+    }
+    renderWordHtmlPreview() {
+        if (!this.hasActiveTemplate) {
+            this.clearWordPreview();
+            return;
+        }
+        const requestId = ++this.wordPreviewRequestId;
+        const outputFileName = this.activeTemplateName.replace(/\.docx$/i, '_preview.docx') || 'template_preview.docx';
+        this.isPreviewingWordHtml = true;
+        this.wordPreviewMessage = '';
+        this.wordPreviewRequested.emit({
+            ...this.createRenderRequest(outputFileName),
+            requestId
+        });
+    }
+    async convertWordBlobToHtml(blob, requestId) {
+        try {
+            const arrayBuffer = await blob.arrayBuffer();
+            const result = await mammoth.convertToHtml({ arrayBuffer }, {
+                convertImage: mammoth.images.dataUri,
+                styleMap: [
+                    "p[style-name='Title'] => h1:fresh",
+                    "p[style-name='Heading 1'] => h1:fresh",
+                    "p[style-name='Heading 2'] => h2:fresh",
+                    "p[style-name='Heading 3'] => h3:fresh"
+                ]
+            });
+            if (requestId !== this.wordPreviewRequestId) {
+                return;
+            }
+            this.wordHtmlPreview = this.sanitizer.bypassSecurityTrustHtml(this.decorateWordPreviewHtml(result.value));
+            this.wordPreviewMessage = result.messages && result.messages.length > 0
+                ? 'Quick Word preview updated. Use PDF Preview for exact template layout.'
+                : '';
+            this.hasPendingPreviewChanges = false;
+        }
+        catch {
+            if (requestId === this.wordPreviewRequestId) {
+                this.wordHtmlPreview = null;
+                this.wordPreviewMessage = 'Unable to render Word preview.';
+            }
+        }
+        finally {
+            if (requestId === this.wordPreviewRequestId) {
+                this.isPreviewingWordHtml = false;
+            }
+        }
+    }
+    decorateWordPreviewHtml(html) {
+        return `<div class="word-html-page" dir="rtl">${html || ''}</div>`;
+    }
+    clearWordPreviewTimer() {
+        if (this.wordPreviewTimer) {
+            clearTimeout(this.wordPreviewTimer);
+            this.wordPreviewTimer = null;
+        }
+    }
+    clearWordPreview() {
+        this.wordHtmlPreview = null;
+        this.wordPreviewMessage = '';
+    }
+    clearPdfPreview() {
+        if (this.pdfPreviewObjectUrl) {
+            window.URL.revokeObjectURL(this.pdfPreviewObjectUrl);
+        }
+        this.pdfPreviewObjectUrl = '';
+        this.pdfPreviewUrl = null;
+        this.isPdfPreviewStale = false;
+    }
+    openBlob(blob, fileName, contentType) {
+        const documentBlob = new Blob([blob], { type: contentType });
+        const url = window.URL.createObjectURL(documentBlob);
+        const opened = window.open(url, '_blank');
+        if (!opened) {
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = fileName;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+        setTimeout(() => window.URL.revokeObjectURL(url), 60000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: WordTemplateLettersComponent, deps: [{ token: i1.FormBuilder }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: WordTemplateLettersComponent, isStandalone: false, selector: "masar-word-template-letters", inputs: { templates: "templates" }, outputs: { refreshTemplatesRequested: "refreshTemplatesRequested", templateTagsRequested: "templateTagsRequested", uploadedTemplateAnalyzeRequested: "uploadedTemplateAnalyzeRequested", pdfPreviewRequested: "pdfPreviewRequested", wordPreviewRequested: "wordPreviewRequested", generateLetterRequested: "generateLetterRequested" }, host: { listeners: { "document:mousemove": "onDocumentMouseMove($event)", "document:mouseup": "onDocumentMouseUp()" } }, ngImport: i0, template: "<div class=\"word-template-page\">\r\n  <div class=\"page-toolbar\">\r\n    <div>\r\n      <h1>Word Template Letters</h1>\r\n      <p>Generate letters from server templates using Masar data tags.</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"alert alert-danger\" *ngIf=\"errorMessage\">\r\n    {{ errorMessage }}\r\n  </div>\r\n\r\n  <section class=\"template-panel selector-panel\">\r\n    <div class=\"template-select-field\">\r\n      <label for=\"templateSelect\">Template</label>\r\n      <div class=\"template-select-control\">\r\n        <select id=\"templateSelect\" class=\"form-control\" [(ngModel)]=\"selectedTemplateName\" (change)=\"onTemplateChange()\">\r\n          <option value=\"\">Select template</option>\r\n          <option *ngFor=\"let template of templates\" [value]=\"template.name\">\r\n            {{ template.displayName }} - {{ template.name }}\r\n          </option>\r\n        </select>\r\n        <button type=\"button\" class=\"btn btn-outline-secondary icon-action-btn refresh-action-btn\" title=\"Refresh templates\" aria-label=\"Refresh templates\" (click)=\"loadTemplates()\" [disabled]=\"isLoadingTemplates\">\r\n          <i class=\"fa fa-sync-alt\" [class.fa-spin]=\"isLoadingTemplates\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"template-upload-field\">\r\n      <label for=\"templateUpload\">Upload Word Template</label>\r\n      <input id=\"templateUpload\" class=\"form-control\" type=\"file\" accept=\".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document\" (change)=\"onTemplateFileSelected($event)\" />\r\n      <span class=\"font-source\" *ngIf=\"uploadedTemplateName\">{{ uploadedTemplateName }}</span>\r\n    </div>\r\n\r\n    <div class=\"template-summary\" *ngIf=\"hasActiveTemplate\">\r\n      <div>\r\n        <span class=\"summary-label\">Active Template</span>\r\n        <strong>{{ uploadedTemplateName ? 'Uploaded' : 'Server' }}</strong>\r\n      </div>\r\n      <div>\r\n        <span class=\"summary-label\">Data Tags</span>\r\n        <strong>{{ tags.length }}</strong>\r\n      </div>\r\n      <div>\r\n        <span class=\"summary-label\">Layout Tags</span>\r\n        <strong>{{ layoutTags.length }}</strong>\r\n      </div>\r\n      <div>\r\n        <span class=\"summary-label\">Signature</span>\r\n        <strong>{{ signatureFile ? 'Selected' : 'Optional' }}</strong>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"template-empty\" *ngIf=\"!isLoadingTemplates && templates.length === 0\">\r\n      No .docx templates were found on the server.\r\n    </div>\r\n  </section>\r\n\r\n  <section class=\"template-panel editor-panel\" *ngIf=\"hasActiveTemplate\">\r\n    <div class=\"workbench-layout\" *ngIf=\"!isLoadingTags && !isAnalyzingUpload\">\r\n      <div class=\"data-entry-panel\">\r\n        <form [formGroup]=\"form\" class=\"tags-form\" *ngIf=\"tags.length > 0\">\r\n          <div class=\"tag-field\" [class.multiline-field]=\"isMultilineField(tag)\" *ngFor=\"let tag of tags; trackBy: trackByTag\">\r\n            <label *ngIf=\"!isMultilineField(tag)\" [for]=\"'tag-' + tag\">\r\n              {{ getSuggestedTag(tag)?.label || tag }}\r\n              <span>{{ tag }}</span>\r\n            </label>\r\n            <div class=\"editor-toolbar word-ribbon\" *ngIf=\"isBodyTag(tag)\">\r\n              <div class=\"ribbon-group font-ribbon-group\">\r\n                <div class=\"ribbon-controls\">\r\n                  <div class=\"ribbon-row\">\r\n                    <input class=\"form-control form-control-sm ribbon-size-input\" title=\"Font size\" aria-label=\"Font size\" type=\"number\" min=\"8\" max=\"36\" [(ngModel)]=\"fontSize\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"onBodyToolbarStyleChange(tag, 'fontSize')\" />\r\n                    <label class=\"ribbon-toggle\" [class.active]=\"fontBold\" title=\"Bold\" aria-label=\"Bold\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"fontBold\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"onBodyToolbarStyleChange(tag, 'fontBold')\" />\r\n                      <i class=\"fas fa-bold\" aria-hidden=\"true\"></i>\r\n                    </label>\r\n                    <label class=\"ribbon-toggle\" [class.active]=\"fontItalic\" title=\"Italic\" aria-label=\"Italic\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"fontItalic\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"onBodyToolbarStyleChange(tag, 'fontItalic')\" />\r\n                      <i class=\"fas fa-italic\" aria-hidden=\"true\"></i>\r\n                    </label>\r\n                    <label class=\"ribbon-toggle\" [class.active]=\"fontUnderline\" title=\"Underline\" aria-label=\"Underline\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"fontUnderline\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"onBodyToolbarStyleChange(tag, 'fontUnderline')\" />\r\n                      <i class=\"fas fa-underline\" aria-hidden=\"true\"></i>\r\n                    </label>\r\n                    <label class=\"ribbon-toggle ribbon-text-toggle\" [class.active]=\"numberFormatControls[tag]\" title=\"Use Hindi numbers\" aria-label=\"Use Hindi numbers\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"numberFormatControls[tag]\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"markPreviewDirty()\" />\r\n                      \u0661\u0662\u0663\r\n                    </label>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Reset body style changes\" aria-label=\"Reset body style changes\" (click)=\"resetBodyToolbarStyles(tag)\">\r\n                      <i class=\"fas fa-undo\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"ribbon-group paragraph-ribbon-group\">\r\n                <div class=\"ribbon-controls\">\r\n                  <div class=\"ribbon-row\">\r\n                    <select class=\"form-control form-control-sm line-thickness-select\" title=\"Line thickness\" aria-label=\"Line thickness\" [(ngModel)]=\"lineThickness\" [ngModelOptions]=\"{standalone: true}\">\r\n                      <option [ngValue]=\"1\">1px</option>\r\n                      <option [ngValue]=\"2\">2px</option>\r\n                      <option [ngValue]=\"3\">3px</option>\r\n                      <option [ngValue]=\"4\">4px</option>\r\n                      <option [ngValue]=\"6\">6px</option>\r\n                    </select>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Line\" aria-label=\"Insert line\" (click)=\"insertSeparator(tag)\">\r\n                      <i class=\"fas fa-minus\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Align left\" aria-label=\"Align text left\" (click)=\"applyEditorAlignment(tag, 'left')\">\r\n                      <i class=\"fas fa-align-left\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Align center\" aria-label=\"Align text center\" (click)=\"applyEditorAlignment(tag, 'center')\">\r\n                      <i class=\"fas fa-align-center\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Align right\" aria-label=\"Align text right\" (click)=\"applyEditorAlignment(tag, 'right')\">\r\n                      <i class=\"fas fa-align-right\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Justify\" aria-label=\"Justify text\" (click)=\"applyEditorAlignment(tag, 'justify')\">\r\n                      <i class=\"fas fa-align-justify\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"ribbon-group table-builder table-ribbon-group\">\r\n                <div class=\"ribbon-controls\">\r\n                  <div class=\"ribbon-row\">\r\n                    <div class=\"table-picker\">\r\n                      <button type=\"button\" class=\"ribbon-primary-btn table-picker-trigger\" title=\"Insert table\" aria-label=\"Insert table\" (click)=\"toggleTablePicker(tag)\">\r\n                        <i class=\"fas fa-table\" aria-hidden=\"true\"></i>\r\n                        <i class=\"fas fa-caret-down table-picker-caret\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                      <div class=\"table-picker-panel\" *ngIf=\"tablePickerOpenTag === tag\">\r\n                        <div class=\"table-picker-size\">{{ tablePickerHoverRows }} \u00D7 {{ tablePickerHoverColumns }}</div>\r\n                        <div class=\"table-picker-grid\" role=\"grid\" aria-label=\"Select table size\">\r\n                          <div class=\"table-picker-row\" *ngFor=\"let row of tablePickerRows\">\r\n                            <button\r\n                              type=\"button\"\r\n                              class=\"table-picker-cell\"\r\n                              *ngFor=\"let column of tablePickerColumns\"\r\n                              [class.active]=\"isTablePickerCellActive(row, column)\"\r\n                              [attr.aria-label]=\"'Insert ' + row + ' by ' + column + ' table'\"\r\n                              (mouseenter)=\"previewTableSize(row, column)\"\r\n                              (focus)=\"previewTableSize(row, column)\"\r\n                              (click)=\"insertTableFromPicker(tag, row, column)\">\r\n                            </button>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    <label class=\"ribbon-toggle ribbon-text-toggle\" [class.active]=\"tableHasHeader\" title=\"Header row\" aria-label=\"Header row\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"tableHasHeader\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"applyCurrentTableHeader(tag)\" />\r\n                      Header\r\n                    </label>\r\n                    <label class=\"header-color-picker\" title=\"Header color\" aria-label=\"Header color\">\r\n                      <input type=\"color\" [(ngModel)]=\"tableHeaderColor\" [ngModelOptions]=\"{standalone: true}\" (change)=\"applyCurrentTableHeaderColor(tag)\" />\r\n                    </label>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn table-align-btn\" title=\"Align table left\" aria-label=\"Align table left\" (click)=\"alignCurrentTable(tag, 'left')\">\r\n                      <i class=\"fas fa-table\" aria-hidden=\"true\"></i><i class=\"fas fa-align-left\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn table-align-btn\" title=\"Align table center\" aria-label=\"Align table center\" (click)=\"alignCurrentTable(tag, 'center')\">\r\n                      <i class=\"fas fa-table\" aria-hidden=\"true\"></i><i class=\"fas fa-align-center\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn table-align-btn\" title=\"Align table right\" aria-label=\"Align table right\" (click)=\"alignCurrentTable(tag, 'right')\">\r\n                      <i class=\"fas fa-table\" aria-hidden=\"true\"></i><i class=\"fas fa-align-right\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-danger-btn\" title=\"Delete table\" aria-label=\"Delete table\" (click)=\"deleteCurrentTable(tag)\">\r\n                      <i class=\"fas fa-trash-alt\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div\r\n              *ngIf=\"isMultilineField(tag)\"\r\n              [id]=\"'tag-' + tag\"\r\n              class=\"form-control rich-body-editor\"\r\n              contenteditable=\"true\"\r\n              dir=\"rtl\"\r\n              [ngStyle]=\"getEditorStyles(tag)\"\r\n              [class.table-resize-column]=\"tableResizeCursor === 'column'\"\r\n              [class.table-resize-row]=\"tableResizeCursor === 'row'\"\r\n              [class.table-resize-both]=\"tableResizeCursor === 'both'\"\r\n              (mousemove)=\"onTableResizeMouseMove(tag, $event)\"\r\n              (mousedown)=\"onTableResizeMouseDown(tag, $event)\"\r\n              (mouseleave)=\"clearTableResizeCursor()\"\r\n              (paste)=\"onRichTextPaste(tag, $event)\"\r\n              (input)=\"onRichTextInput(tag, $event)\"\r\n              (focusout)=\"onRichTextFocusOut($event)\">\r\n            </div>\r\n            <input *ngIf=\"!isMultilineField(tag)\" [id]=\"'tag-' + tag\" class=\"form-control\" type=\"text\" [formControlName]=\"tag\" (input)=\"markPreviewDirty()\" (blur)=\"onFieldPreviewCommit($event)\" />\r\n            <label class=\"number-format\" *ngIf=\"isNumberField(tag) && !isMultilineField(tag)\">\r\n              <input type=\"checkbox\" [(ngModel)]=\"numberFormatControls[tag]\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"markPreviewDirty()\" (blur)=\"onFieldPreviewCommit($event)\" />\r\n              Use Hindi numbers\r\n            </label>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"tags-empty-state\" *ngIf=\"tags.length === 0\">\r\n          <div>\r\n            <strong>No editable tags found</strong>\r\n            <span>The selected template does not contain supported tags.</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"settings-layout media-settings\">\r\n          <div class=\"settings-group\">\r\n            <div class=\"settings-title\">Media</div>\r\n            <div class=\"format-field signature-field\">\r\n              <label for=\"signatureImage\">Signature Image</label>\r\n              <input id=\"signatureImage\" class=\"form-control\" type=\"file\" accept=\"image/png,image/jpeg,image/gif\" (change)=\"onSignatureSelected($event)\" />\r\n              <span class=\"file-name\" *ngIf=\"signatureFile\">{{ signatureFile.name }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"pdf-preview-panel\">\r\n        <div class=\"preview-panel-header\">\r\n          <div>\r\n            <h3>{{ pdfPreviewUrl ? 'PDF Preview' : 'Word Preview' }}</h3>\r\n            <span class=\"preview-status\" *ngIf=\"pdfPreviewUrl && isPdfPreviewStale\">Preview needs refresh. Click Preview PDF for the exact updated layout.</span>\r\n            <span class=\"preview-status\" *ngIf=\"isPreviewingWordHtml && !pdfPreviewUrl\">Updating Word preview...</span>\r\n            <span class=\"preview-status\" *ngIf=\"wordPreviewMessage && !pdfPreviewUrl\">{{ wordPreviewMessage }}</span>\r\n          </div>\r\n          <div class=\"preview-actions\">\r\n            <button type=\"button\" class=\"btn btn-outline-secondary preview-pdf-btn\" (click)=\"previewPdf()\" [disabled]=\"isLoadingTags || isAnalyzingUpload || isPreviewingPdf\">\r\n              <i class=\"fa fa-file-pdf\" aria-hidden=\"true\"></i>\r\n              {{ isPreviewingPdf ? 'Rendering PDF...' : 'Preview PDF' }}\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-primary word-action-btn\" title=\"Generate Word document\" aria-label=\"Generate Word document\" (click)=\"generateLetter()\" [disabled]=\"!hasActiveTemplate || isLoadingTags || isAnalyzingUpload || isGenerating\">\r\n              <i class=\"fa fa-file-word\" [class.fa-pulse]=\"isGenerating\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <iframe *ngIf=\"pdfPreviewUrl\" class=\"pdf-frame\" [src]=\"pdfPreviewUrl\" title=\"Letter PDF Preview\"></iframe>\r\n\r\n        <div class=\"word-html-preview\" *ngIf=\"!pdfPreviewUrl && wordHtmlPreview\" [innerHTML]=\"wordHtmlPreview\"></div>\r\n\r\n        <div class=\"pdf-empty\" *ngIf=\"!pdfPreviewUrl && !wordHtmlPreview\">\r\n          {{ isPreviewingWordHtml ? 'Preparing Word preview...' : 'Fill the form to see a quick Word preview.' }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"template-empty\" *ngIf=\"isLoadingTags || isAnalyzingUpload\">\r\n      Reading template tags...\r\n    </div>\r\n  </section>\r\n</div>\r\n", styles: [".word-template-page{background:#f5f7f9;min-height:calc(100vh - 64px);padding:24px}.page-toolbar,.panel-header,.toolbar-actions,.panel-actions{align-items:center;display:flex;gap:12px}.page-toolbar,.panel-header{justify-content:space-between}.page-toolbar h1,.panel-header h2{color:#212529;font-size:22px;font-weight:600;line-height:1.25;margin:0}.page-toolbar p,.panel-header p{color:#6c757d;font-size:13px;line-height:1.45;margin:6px 0 0}.toolbar-actions,.panel-actions{flex-wrap:wrap;justify-content:flex-end}.template-panel{background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 1px 2px #00000008;margin-top:18px;padding:18px}.editor-panel{display:flex;flex-direction:column;min-height:calc(100vh - 220px)}.selector-panel{align-items:end;display:grid;gap:16px;grid-template-columns:minmax(280px,1fr) minmax(260px,.8fr)}.template-select-control{align-items:center;display:flex;gap:8px}.template-select-control select{min-width:0}.icon-action-btn{align-items:center;display:inline-flex;flex:0 0 auto;height:38px;justify-content:center;min-width:42px;padding-left:10px;padding-right:10px}.refresh-action-btn,.refresh-action-btn:hover,.refresh-action-btn:focus{background:#fff;color:#495057}.refresh-action-btn i{color:#495057!important;font-size:15px}.refresh-action-btn:disabled i{color:#868e96!important}.template-select-field label,.template-upload-field label,.format-field label,.tag-field label{color:#343a40;display:block;font-size:13px;font-weight:600;margin-bottom:6px}.template-summary{border:1px solid #e9ecef;border-radius:8px;display:grid;gap:0;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}.template-summary>div{background:#f8f9fa;border-right:1px solid #e9ecef;min-width:0;padding:10px 12px}.template-summary>div:last-child{border-right:0}.summary-label,.file-name,.font-source,.tag-field label span{color:#6c757d;display:block;font-size:12px;font-weight:400;line-height:1.35;margin-top:2px;overflow-wrap:anywhere}.template-summary strong{color:#212529;display:block;font-size:14px;margin-top:2px;overflow-wrap:anywhere}.template-empty{color:#6c757d;font-size:13px;padding:18px 0 4px}.workbench-layout{align-items:start;display:grid;flex:1;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 270px);width:100%}.pdf-preview-panel,.data-entry-panel{border:1px solid #dee2e6;border-radius:8px;height:100%;min-width:0;padding:14px;width:100%}.pdf-preview-panel{background:#f8f9fa;display:flex;flex-direction:column;min-height:calc(100vh - 300px)}.data-entry-panel{background:#fff;display:flex;flex-direction:column;min-height:calc(100vh - 300px)}.preview-panel-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:12px}.preview-actions{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.preview-actions .btn{align-items:center;display:inline-flex;gap:7px}.preview-pdf-btn{height:38px;padding-left:12px;padding-right:12px}.preview-pdf-btn i{color:#6c757d;font-size:16px}.word-action-btn{align-items:center;display:inline-flex;flex:0 0 44px;height:38px;justify-content:center;min-width:44px;padding:0}.word-action-btn i{color:#fff;font-size:18px;line-height:1}.preview-panel-header h3{color:#212529;font-size:16px;font-weight:600;line-height:1.3;margin:0}.preview-status{color:#6c757d;display:block;font-size:12px;line-height:1.35;margin-top:3px}.pdf-frame{background:#fff;border:1px solid #ced4da;border-radius:6px;display:block;flex:1;min-height:calc(100vh - 380px);width:100%}.word-html-preview{background:#2b2b2b;border:1px solid #ced4da;border-radius:6px;flex:1;min-height:calc(100vh - 380px);overflow:auto;padding:24px}:host ::ng-deep .word-html-preview .word-html-page{background:#fff;box-shadow:0 2px 10px #00000029;color:#111;direction:rtl;font-family:Arial,Tahoma,sans-serif;font-size:12pt;line-height:1.6;margin:0 auto;min-height:920px;padding:70px 72px;text-align:right;width:min(100%,794px)}:host ::ng-deep .word-html-preview .word-html-page p{margin:0 0 10px}:host ::ng-deep .word-html-preview .word-html-page h1,:host ::ng-deep .word-html-preview .word-html-page h2,:host ::ng-deep .word-html-preview .word-html-page h3{color:#111;font-weight:700;line-height:1.35;margin:0 0 14px}:host ::ng-deep .word-html-preview .word-html-page table{border-collapse:collapse;direction:ltr;margin:10px 0 14px;max-width:100%}:host ::ng-deep .word-html-preview .word-html-page th,:host ::ng-deep .word-html-preview .word-html-page td{border:1px solid #495057;direction:rtl;padding:6px 8px;vertical-align:top}:host ::ng-deep .word-html-preview .word-html-page img{height:auto;max-width:100%}.pdf-empty{align-items:center;background:#fff;border:1px dashed #ced4da;border-radius:6px;color:#6c757d;display:flex;flex:1;font-size:13px;justify-content:center;min-height:calc(100vh - 380px);padding:18px;text-align:center}.settings-layout{display:block;margin-top:16px}.media-settings{border-top:1px solid #dee2e6;padding-top:14px}.settings-group{min-width:0}.settings-title{color:#495057;font-size:13px;font-weight:600;margin-bottom:10px}.format-check,.number-format{align-items:center;color:#495057;display:flex;font-size:13px;gap:7px;margin:0}.signature-field input{height:auto}.tags-form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:18px;overflow:auto;padding-right:4px}.tags-empty-state{align-items:center;background:#fff;border:1px dashed #ced4da;border-radius:6px;color:#6c757d;display:flex;flex:1;justify-content:center;margin-top:18px;min-height:clamp(360px,46vh,680px);padding:18px;text-align:center}.tags-empty-state strong{color:#343a40;display:block;font-size:15px;margin-bottom:6px}.tags-empty-state span{display:block;font-size:13px}.tag-field{min-width:0}.tag-field.multiline-field{grid-column:1/-1}.tag-field.multiline-field>label{display:none!important}.editor-toolbar{align-items:stretch;background:linear-gradient(#fbfbfb,#f1f3f5);border:1px solid #cfd6de;border-bottom:0;border-radius:4px 4px 0 0;display:flex;flex-wrap:nowrap;gap:0;padding:0}.editor-toolbar button:has(.fa-file-pdf),.editor-toolbar .preview-pdf-btn{display:none!important}.word-ribbon{min-height:46px;overflow:visible}.ribbon-group{align-items:center;border-right:1px solid #cfd6de;display:flex;flex-direction:row;justify-content:center;margin:0;min-width:0;padding:6px 8px;position:relative}.ribbon-group:last-child{border-right:0}.font-ribbon-group,.paragraph-ribbon-group{flex:0 0 auto}.table-ribbon-group{flex:0 0 auto;padding-right:10px}.ribbon-controls{align-items:center;display:flex;flex-wrap:nowrap;gap:5px;min-height:28px}.ribbon-row{align-items:center;display:flex;flex-wrap:nowrap;gap:4px;min-height:28px}.font-ribbon-group .ribbon-controls,.font-ribbon-group .ribbon-row{flex-wrap:nowrap}.font-ribbon-group .ribbon-toggle,.font-ribbon-group .ribbon-icon-btn{flex:0 0 auto}.ribbon-size-input{flex:0 0 54px;height:26px;padding:2px 4px;text-align:center}.line-thickness-select{flex:0 0 64px;height:26px;min-width:64px;padding:2px 4px}.ribbon-icon-btn,.ribbon-primary-btn,.ribbon-danger-btn,.ribbon-command-btn,.ribbon-toggle{align-items:center;background:transparent;border:1px solid transparent;border-radius:2px;color:#343a40;cursor:pointer;display:inline-flex;font-size:12px;gap:3px;height:26px;justify-content:center;line-height:1;min-width:26px;padding:3px 6px;-webkit-user-select:none;user-select:none}.ribbon-icon-btn:hover,.ribbon-command-btn:hover,.ribbon-toggle:hover{background:#e9f2ff;border-color:#9dc5f4}.ribbon-primary-btn{background:#eef5ff;border-color:#b9d5ff;color:#0d47a1}.ribbon-primary-btn:hover{background:#dcecff}.ribbon-danger-btn{color:#b42318}.ribbon-danger-btn:hover{background:#fff1f0;border-color:#ffb4ab}.ribbon-toggle input{display:none}.ribbon-toggle.active{background:#dbeafe;border-color:#7db3f2;color:#0b5cad}.ribbon-text-toggle{font-weight:600;min-width:auto;white-space:nowrap}.ribbon-corner-icon{font-size:9px;margin-left:-1px;margin-top:-8px}.ribbon-command-btn{min-width:52px}.table-align-btn{min-width:42px}.table-align-btn .fa-table{font-size:11px}.header-color-picker{align-items:center;border:1px solid transparent;border-radius:2px;cursor:pointer;display:inline-flex;height:26px;justify-content:center;margin:0;padding:2px;width:30px}.header-color-picker:hover{background:#e9f2ff;border-color:#9dc5f4}.header-color-picker input{border:0;cursor:pointer;height:20px;padding:0;width:24px}.ribbon-field{align-items:center;color:#495057;display:inline-flex;font-size:11px;gap:4px;margin:0;white-space:nowrap}.ribbon-field input{height:26px;padding:2px 4px;text-align:center;width:54px}.table-picker{display:inline-flex;position:relative}.table-picker-trigger{min-width:34px;padding-left:7px;padding-right:7px}.table-picker-caret{font-size:9px;margin-left:1px}.table-picker-panel{background:#fff;border:1px solid #adb5bd;border-radius:3px;box-shadow:0 6px 16px #2125292e;left:0;padding:7px;position:absolute;top:30px;width:148px;z-index:25}.table-picker-size{border-bottom:1px solid #e9ecef;color:#212529;font-size:12px;font-weight:600;line-height:1;margin:0 -7px 6px;padding:0 7px 6px;text-align:center}.table-picker-grid{display:flex;flex-direction:column;gap:2px}.table-picker-row{display:flex;gap:2px}.table-picker-cell{background:#fff;border:1px solid #d0d7de;cursor:pointer;height:13px;min-width:0;padding:0;width:13px}.table-picker-cell:hover,.table-picker-cell:focus,.table-picker-cell.active{background:#dcecff;border-color:#4d94ff;outline:none}.rich-body-editor{background:#fff;border-top-left-radius:0;border-top-right-radius:0;direction:auto;font-family:Arial,Tahoma,sans-serif;font-size:14px;line-height:1.7;min-height:clamp(360px,46vh,680px);overflow:auto;padding:14px;white-space:normal}.rich-body-editor:empty:before{color:#adb5bd;content:\"Start writing the letter body here...\"}.rich-body-editor:focus{border-color:#86b7fe;box-shadow:0 0 0 .2rem #0d6efd26;outline:0}.rich-body-editor p,.rich-body-editor h1,.rich-body-editor h2,.rich-body-editor h3,.rich-body-editor ul,.rich-body-editor ol{margin:0 0 10px}.rich-body-editor h1,.rich-body-editor h2,.rich-body-editor h3{color:#212529;font-weight:700;line-height:1.35}.rich-body-editor h1{font-size:2em}.rich-body-editor h2{font-size:1.75em}.rich-body-editor h3{font-size:1.45em}.rich-body-editor .template-editor-table-wrapper{width:100%}.rich-body-editor table{border:1px solid #495057;border-collapse:collapse;direction:ltr;display:inline-table;margin:10px 0 14px;max-width:100%;table-layout:auto;width:auto}.rich-body-editor th,.rich-body-editor td{border:1px solid #495057;direction:rtl;height:34px;min-width:90px;padding:7px 9px;position:relative;vertical-align:top}.rich-body-editor.table-resize-column,.rich-body-editor.table-resize-column th,.rich-body-editor.table-resize-column td{cursor:col-resize}.rich-body-editor.table-resize-row,.rich-body-editor.table-resize-row th,.rich-body-editor.table-resize-row td{cursor:row-resize}.rich-body-editor.table-resize-both,.rich-body-editor.table-resize-both th,.rich-body-editor.table-resize-both td{cursor:nwse-resize}.rich-body-editor th:focus,.rich-body-editor td:focus{box-shadow:inset 0 0 0 2px #86b7fe;outline:0}.rich-body-editor th{background:#f1f3f5;font-weight:700}.number-format{font-size:12px;margin-top:7px}@media (max-width: 992px){.selector-panel,.workbench-layout{grid-template-columns:1fr}.editor-panel,.workbench-layout{min-height:auto}.template-summary{max-width:100%}}@media (max-width: 768px){.word-template-page{padding:16px}.page-toolbar,.panel-header{align-items:stretch;flex-direction:column}.toolbar-actions,.panel-actions{justify-content:flex-start}.toolbar-actions .btn,.panel-actions .btn{flex:1 1 150px}.style-tools,.table-builder{flex:1 1 100%}.pdf-preview-panel,.pdf-frame,.pdf-empty{min-height:520px}}@media (max-width: 520px){.template-panel{padding:14px}.template-summary,.tags-form{grid-template-columns:1fr}.template-summary>div{border-bottom:1px solid #e9ecef;border-right:0}.template-summary>div:last-child{border-bottom:0}.font-toolbar-field,.size-toolbar-field,.toolbar-toggle-group{flex:1 1 100%}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: WordTemplateLettersComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: 'masar-word-template-letters', template: "<div class=\"word-template-page\">\r\n  <div class=\"page-toolbar\">\r\n    <div>\r\n      <h1>Word Template Letters</h1>\r\n      <p>Generate letters from server templates using Masar data tags.</p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"alert alert-danger\" *ngIf=\"errorMessage\">\r\n    {{ errorMessage }}\r\n  </div>\r\n\r\n  <section class=\"template-panel selector-panel\">\r\n    <div class=\"template-select-field\">\r\n      <label for=\"templateSelect\">Template</label>\r\n      <div class=\"template-select-control\">\r\n        <select id=\"templateSelect\" class=\"form-control\" [(ngModel)]=\"selectedTemplateName\" (change)=\"onTemplateChange()\">\r\n          <option value=\"\">Select template</option>\r\n          <option *ngFor=\"let template of templates\" [value]=\"template.name\">\r\n            {{ template.displayName }} - {{ template.name }}\r\n          </option>\r\n        </select>\r\n        <button type=\"button\" class=\"btn btn-outline-secondary icon-action-btn refresh-action-btn\" title=\"Refresh templates\" aria-label=\"Refresh templates\" (click)=\"loadTemplates()\" [disabled]=\"isLoadingTemplates\">\r\n          <i class=\"fa fa-sync-alt\" [class.fa-spin]=\"isLoadingTemplates\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"template-upload-field\">\r\n      <label for=\"templateUpload\">Upload Word Template</label>\r\n      <input id=\"templateUpload\" class=\"form-control\" type=\"file\" accept=\".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document\" (change)=\"onTemplateFileSelected($event)\" />\r\n      <span class=\"font-source\" *ngIf=\"uploadedTemplateName\">{{ uploadedTemplateName }}</span>\r\n    </div>\r\n\r\n    <div class=\"template-summary\" *ngIf=\"hasActiveTemplate\">\r\n      <div>\r\n        <span class=\"summary-label\">Active Template</span>\r\n        <strong>{{ uploadedTemplateName ? 'Uploaded' : 'Server' }}</strong>\r\n      </div>\r\n      <div>\r\n        <span class=\"summary-label\">Data Tags</span>\r\n        <strong>{{ tags.length }}</strong>\r\n      </div>\r\n      <div>\r\n        <span class=\"summary-label\">Layout Tags</span>\r\n        <strong>{{ layoutTags.length }}</strong>\r\n      </div>\r\n      <div>\r\n        <span class=\"summary-label\">Signature</span>\r\n        <strong>{{ signatureFile ? 'Selected' : 'Optional' }}</strong>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"template-empty\" *ngIf=\"!isLoadingTemplates && templates.length === 0\">\r\n      No .docx templates were found on the server.\r\n    </div>\r\n  </section>\r\n\r\n  <section class=\"template-panel editor-panel\" *ngIf=\"hasActiveTemplate\">\r\n    <div class=\"workbench-layout\" *ngIf=\"!isLoadingTags && !isAnalyzingUpload\">\r\n      <div class=\"data-entry-panel\">\r\n        <form [formGroup]=\"form\" class=\"tags-form\" *ngIf=\"tags.length > 0\">\r\n          <div class=\"tag-field\" [class.multiline-field]=\"isMultilineField(tag)\" *ngFor=\"let tag of tags; trackBy: trackByTag\">\r\n            <label *ngIf=\"!isMultilineField(tag)\" [for]=\"'tag-' + tag\">\r\n              {{ getSuggestedTag(tag)?.label || tag }}\r\n              <span>{{ tag }}</span>\r\n            </label>\r\n            <div class=\"editor-toolbar word-ribbon\" *ngIf=\"isBodyTag(tag)\">\r\n              <div class=\"ribbon-group font-ribbon-group\">\r\n                <div class=\"ribbon-controls\">\r\n                  <div class=\"ribbon-row\">\r\n                    <input class=\"form-control form-control-sm ribbon-size-input\" title=\"Font size\" aria-label=\"Font size\" type=\"number\" min=\"8\" max=\"36\" [(ngModel)]=\"fontSize\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"onBodyToolbarStyleChange(tag, 'fontSize')\" />\r\n                    <label class=\"ribbon-toggle\" [class.active]=\"fontBold\" title=\"Bold\" aria-label=\"Bold\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"fontBold\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"onBodyToolbarStyleChange(tag, 'fontBold')\" />\r\n                      <i class=\"fas fa-bold\" aria-hidden=\"true\"></i>\r\n                    </label>\r\n                    <label class=\"ribbon-toggle\" [class.active]=\"fontItalic\" title=\"Italic\" aria-label=\"Italic\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"fontItalic\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"onBodyToolbarStyleChange(tag, 'fontItalic')\" />\r\n                      <i class=\"fas fa-italic\" aria-hidden=\"true\"></i>\r\n                    </label>\r\n                    <label class=\"ribbon-toggle\" [class.active]=\"fontUnderline\" title=\"Underline\" aria-label=\"Underline\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"fontUnderline\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"onBodyToolbarStyleChange(tag, 'fontUnderline')\" />\r\n                      <i class=\"fas fa-underline\" aria-hidden=\"true\"></i>\r\n                    </label>\r\n                    <label class=\"ribbon-toggle ribbon-text-toggle\" [class.active]=\"numberFormatControls[tag]\" title=\"Use Hindi numbers\" aria-label=\"Use Hindi numbers\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"numberFormatControls[tag]\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"markPreviewDirty()\" />\r\n                      \u0661\u0662\u0663\r\n                    </label>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Reset body style changes\" aria-label=\"Reset body style changes\" (click)=\"resetBodyToolbarStyles(tag)\">\r\n                      <i class=\"fas fa-undo\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"ribbon-group paragraph-ribbon-group\">\r\n                <div class=\"ribbon-controls\">\r\n                  <div class=\"ribbon-row\">\r\n                    <select class=\"form-control form-control-sm line-thickness-select\" title=\"Line thickness\" aria-label=\"Line thickness\" [(ngModel)]=\"lineThickness\" [ngModelOptions]=\"{standalone: true}\">\r\n                      <option [ngValue]=\"1\">1px</option>\r\n                      <option [ngValue]=\"2\">2px</option>\r\n                      <option [ngValue]=\"3\">3px</option>\r\n                      <option [ngValue]=\"4\">4px</option>\r\n                      <option [ngValue]=\"6\">6px</option>\r\n                    </select>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Line\" aria-label=\"Insert line\" (click)=\"insertSeparator(tag)\">\r\n                      <i class=\"fas fa-minus\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Align left\" aria-label=\"Align text left\" (click)=\"applyEditorAlignment(tag, 'left')\">\r\n                      <i class=\"fas fa-align-left\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Align center\" aria-label=\"Align text center\" (click)=\"applyEditorAlignment(tag, 'center')\">\r\n                      <i class=\"fas fa-align-center\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Align right\" aria-label=\"Align text right\" (click)=\"applyEditorAlignment(tag, 'right')\">\r\n                      <i class=\"fas fa-align-right\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn\" title=\"Justify\" aria-label=\"Justify text\" (click)=\"applyEditorAlignment(tag, 'justify')\">\r\n                      <i class=\"fas fa-align-justify\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"ribbon-group table-builder table-ribbon-group\">\r\n                <div class=\"ribbon-controls\">\r\n                  <div class=\"ribbon-row\">\r\n                    <div class=\"table-picker\">\r\n                      <button type=\"button\" class=\"ribbon-primary-btn table-picker-trigger\" title=\"Insert table\" aria-label=\"Insert table\" (click)=\"toggleTablePicker(tag)\">\r\n                        <i class=\"fas fa-table\" aria-hidden=\"true\"></i>\r\n                        <i class=\"fas fa-caret-down table-picker-caret\" aria-hidden=\"true\"></i>\r\n                      </button>\r\n                      <div class=\"table-picker-panel\" *ngIf=\"tablePickerOpenTag === tag\">\r\n                        <div class=\"table-picker-size\">{{ tablePickerHoverRows }} \u00D7 {{ tablePickerHoverColumns }}</div>\r\n                        <div class=\"table-picker-grid\" role=\"grid\" aria-label=\"Select table size\">\r\n                          <div class=\"table-picker-row\" *ngFor=\"let row of tablePickerRows\">\r\n                            <button\r\n                              type=\"button\"\r\n                              class=\"table-picker-cell\"\r\n                              *ngFor=\"let column of tablePickerColumns\"\r\n                              [class.active]=\"isTablePickerCellActive(row, column)\"\r\n                              [attr.aria-label]=\"'Insert ' + row + ' by ' + column + ' table'\"\r\n                              (mouseenter)=\"previewTableSize(row, column)\"\r\n                              (focus)=\"previewTableSize(row, column)\"\r\n                              (click)=\"insertTableFromPicker(tag, row, column)\">\r\n                            </button>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n                    </div>\r\n                    <label class=\"ribbon-toggle ribbon-text-toggle\" [class.active]=\"tableHasHeader\" title=\"Header row\" aria-label=\"Header row\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"tableHasHeader\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"applyCurrentTableHeader(tag)\" />\r\n                      Header\r\n                    </label>\r\n                    <label class=\"header-color-picker\" title=\"Header color\" aria-label=\"Header color\">\r\n                      <input type=\"color\" [(ngModel)]=\"tableHeaderColor\" [ngModelOptions]=\"{standalone: true}\" (change)=\"applyCurrentTableHeaderColor(tag)\" />\r\n                    </label>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn table-align-btn\" title=\"Align table left\" aria-label=\"Align table left\" (click)=\"alignCurrentTable(tag, 'left')\">\r\n                      <i class=\"fas fa-table\" aria-hidden=\"true\"></i><i class=\"fas fa-align-left\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn table-align-btn\" title=\"Align table center\" aria-label=\"Align table center\" (click)=\"alignCurrentTable(tag, 'center')\">\r\n                      <i class=\"fas fa-table\" aria-hidden=\"true\"></i><i class=\"fas fa-align-center\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-icon-btn table-align-btn\" title=\"Align table right\" aria-label=\"Align table right\" (click)=\"alignCurrentTable(tag, 'right')\">\r\n                      <i class=\"fas fa-table\" aria-hidden=\"true\"></i><i class=\"fas fa-align-right\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                    <button type=\"button\" class=\"ribbon-danger-btn\" title=\"Delete table\" aria-label=\"Delete table\" (click)=\"deleteCurrentTable(tag)\">\r\n                      <i class=\"fas fa-trash-alt\" aria-hidden=\"true\"></i>\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div\r\n              *ngIf=\"isMultilineField(tag)\"\r\n              [id]=\"'tag-' + tag\"\r\n              class=\"form-control rich-body-editor\"\r\n              contenteditable=\"true\"\r\n              dir=\"rtl\"\r\n              [ngStyle]=\"getEditorStyles(tag)\"\r\n              [class.table-resize-column]=\"tableResizeCursor === 'column'\"\r\n              [class.table-resize-row]=\"tableResizeCursor === 'row'\"\r\n              [class.table-resize-both]=\"tableResizeCursor === 'both'\"\r\n              (mousemove)=\"onTableResizeMouseMove(tag, $event)\"\r\n              (mousedown)=\"onTableResizeMouseDown(tag, $event)\"\r\n              (mouseleave)=\"clearTableResizeCursor()\"\r\n              (paste)=\"onRichTextPaste(tag, $event)\"\r\n              (input)=\"onRichTextInput(tag, $event)\"\r\n              (focusout)=\"onRichTextFocusOut($event)\">\r\n            </div>\r\n            <input *ngIf=\"!isMultilineField(tag)\" [id]=\"'tag-' + tag\" class=\"form-control\" type=\"text\" [formControlName]=\"tag\" (input)=\"markPreviewDirty()\" (blur)=\"onFieldPreviewCommit($event)\" />\r\n            <label class=\"number-format\" *ngIf=\"isNumberField(tag) && !isMultilineField(tag)\">\r\n              <input type=\"checkbox\" [(ngModel)]=\"numberFormatControls[tag]\" [ngModelOptions]=\"{standalone: true}\" (ngModelChange)=\"markPreviewDirty()\" (blur)=\"onFieldPreviewCommit($event)\" />\r\n              Use Hindi numbers\r\n            </label>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"tags-empty-state\" *ngIf=\"tags.length === 0\">\r\n          <div>\r\n            <strong>No editable tags found</strong>\r\n            <span>The selected template does not contain supported tags.</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"settings-layout media-settings\">\r\n          <div class=\"settings-group\">\r\n            <div class=\"settings-title\">Media</div>\r\n            <div class=\"format-field signature-field\">\r\n              <label for=\"signatureImage\">Signature Image</label>\r\n              <input id=\"signatureImage\" class=\"form-control\" type=\"file\" accept=\"image/png,image/jpeg,image/gif\" (change)=\"onSignatureSelected($event)\" />\r\n              <span class=\"file-name\" *ngIf=\"signatureFile\">{{ signatureFile.name }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n\r\n      <div class=\"pdf-preview-panel\">\r\n        <div class=\"preview-panel-header\">\r\n          <div>\r\n            <h3>{{ pdfPreviewUrl ? 'PDF Preview' : 'Word Preview' }}</h3>\r\n            <span class=\"preview-status\" *ngIf=\"pdfPreviewUrl && isPdfPreviewStale\">Preview needs refresh. Click Preview PDF for the exact updated layout.</span>\r\n            <span class=\"preview-status\" *ngIf=\"isPreviewingWordHtml && !pdfPreviewUrl\">Updating Word preview...</span>\r\n            <span class=\"preview-status\" *ngIf=\"wordPreviewMessage && !pdfPreviewUrl\">{{ wordPreviewMessage }}</span>\r\n          </div>\r\n          <div class=\"preview-actions\">\r\n            <button type=\"button\" class=\"btn btn-outline-secondary preview-pdf-btn\" (click)=\"previewPdf()\" [disabled]=\"isLoadingTags || isAnalyzingUpload || isPreviewingPdf\">\r\n              <i class=\"fa fa-file-pdf\" aria-hidden=\"true\"></i>\r\n              {{ isPreviewingPdf ? 'Rendering PDF...' : 'Preview PDF' }}\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-primary word-action-btn\" title=\"Generate Word document\" aria-label=\"Generate Word document\" (click)=\"generateLetter()\" [disabled]=\"!hasActiveTemplate || isLoadingTags || isAnalyzingUpload || isGenerating\">\r\n              <i class=\"fa fa-file-word\" [class.fa-pulse]=\"isGenerating\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <iframe *ngIf=\"pdfPreviewUrl\" class=\"pdf-frame\" [src]=\"pdfPreviewUrl\" title=\"Letter PDF Preview\"></iframe>\r\n\r\n        <div class=\"word-html-preview\" *ngIf=\"!pdfPreviewUrl && wordHtmlPreview\" [innerHTML]=\"wordHtmlPreview\"></div>\r\n\r\n        <div class=\"pdf-empty\" *ngIf=\"!pdfPreviewUrl && !wordHtmlPreview\">\r\n          {{ isPreviewingWordHtml ? 'Preparing Word preview...' : 'Fill the form to see a quick Word preview.' }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"template-empty\" *ngIf=\"isLoadingTags || isAnalyzingUpload\">\r\n      Reading template tags...\r\n    </div>\r\n  </section>\r\n</div>\r\n", styles: [".word-template-page{background:#f5f7f9;min-height:calc(100vh - 64px);padding:24px}.page-toolbar,.panel-header,.toolbar-actions,.panel-actions{align-items:center;display:flex;gap:12px}.page-toolbar,.panel-header{justify-content:space-between}.page-toolbar h1,.panel-header h2{color:#212529;font-size:22px;font-weight:600;line-height:1.25;margin:0}.page-toolbar p,.panel-header p{color:#6c757d;font-size:13px;line-height:1.45;margin:6px 0 0}.toolbar-actions,.panel-actions{flex-wrap:wrap;justify-content:flex-end}.template-panel{background:#fff;border:1px solid #dee2e6;border-radius:8px;box-shadow:0 1px 2px #00000008;margin-top:18px;padding:18px}.editor-panel{display:flex;flex-direction:column;min-height:calc(100vh - 220px)}.selector-panel{align-items:end;display:grid;gap:16px;grid-template-columns:minmax(280px,1fr) minmax(260px,.8fr)}.template-select-control{align-items:center;display:flex;gap:8px}.template-select-control select{min-width:0}.icon-action-btn{align-items:center;display:inline-flex;flex:0 0 auto;height:38px;justify-content:center;min-width:42px;padding-left:10px;padding-right:10px}.refresh-action-btn,.refresh-action-btn:hover,.refresh-action-btn:focus{background:#fff;color:#495057}.refresh-action-btn i{color:#495057!important;font-size:15px}.refresh-action-btn:disabled i{color:#868e96!important}.template-select-field label,.template-upload-field label,.format-field label,.tag-field label{color:#343a40;display:block;font-size:13px;font-weight:600;margin-bottom:6px}.template-summary{border:1px solid #e9ecef;border-radius:8px;display:grid;gap:0;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}.template-summary>div{background:#f8f9fa;border-right:1px solid #e9ecef;min-width:0;padding:10px 12px}.template-summary>div:last-child{border-right:0}.summary-label,.file-name,.font-source,.tag-field label span{color:#6c757d;display:block;font-size:12px;font-weight:400;line-height:1.35;margin-top:2px;overflow-wrap:anywhere}.template-summary strong{color:#212529;display:block;font-size:14px;margin-top:2px;overflow-wrap:anywhere}.template-empty{color:#6c757d;font-size:13px;padding:18px 0 4px}.workbench-layout{align-items:start;display:grid;flex:1;gap:18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - 270px);width:100%}.pdf-preview-panel,.data-entry-panel{border:1px solid #dee2e6;border-radius:8px;height:100%;min-width:0;padding:14px;width:100%}.pdf-preview-panel{background:#f8f9fa;display:flex;flex-direction:column;min-height:calc(100vh - 300px)}.data-entry-panel{background:#fff;display:flex;flex-direction:column;min-height:calc(100vh - 300px)}.preview-panel-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:12px}.preview-actions{align-items:center;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.preview-actions .btn{align-items:center;display:inline-flex;gap:7px}.preview-pdf-btn{height:38px;padding-left:12px;padding-right:12px}.preview-pdf-btn i{color:#6c757d;font-size:16px}.word-action-btn{align-items:center;display:inline-flex;flex:0 0 44px;height:38px;justify-content:center;min-width:44px;padding:0}.word-action-btn i{color:#fff;font-size:18px;line-height:1}.preview-panel-header h3{color:#212529;font-size:16px;font-weight:600;line-height:1.3;margin:0}.preview-status{color:#6c757d;display:block;font-size:12px;line-height:1.35;margin-top:3px}.pdf-frame{background:#fff;border:1px solid #ced4da;border-radius:6px;display:block;flex:1;min-height:calc(100vh - 380px);width:100%}.word-html-preview{background:#2b2b2b;border:1px solid #ced4da;border-radius:6px;flex:1;min-height:calc(100vh - 380px);overflow:auto;padding:24px}:host ::ng-deep .word-html-preview .word-html-page{background:#fff;box-shadow:0 2px 10px #00000029;color:#111;direction:rtl;font-family:Arial,Tahoma,sans-serif;font-size:12pt;line-height:1.6;margin:0 auto;min-height:920px;padding:70px 72px;text-align:right;width:min(100%,794px)}:host ::ng-deep .word-html-preview .word-html-page p{margin:0 0 10px}:host ::ng-deep .word-html-preview .word-html-page h1,:host ::ng-deep .word-html-preview .word-html-page h2,:host ::ng-deep .word-html-preview .word-html-page h3{color:#111;font-weight:700;line-height:1.35;margin:0 0 14px}:host ::ng-deep .word-html-preview .word-html-page table{border-collapse:collapse;direction:ltr;margin:10px 0 14px;max-width:100%}:host ::ng-deep .word-html-preview .word-html-page th,:host ::ng-deep .word-html-preview .word-html-page td{border:1px solid #495057;direction:rtl;padding:6px 8px;vertical-align:top}:host ::ng-deep .word-html-preview .word-html-page img{height:auto;max-width:100%}.pdf-empty{align-items:center;background:#fff;border:1px dashed #ced4da;border-radius:6px;color:#6c757d;display:flex;flex:1;font-size:13px;justify-content:center;min-height:calc(100vh - 380px);padding:18px;text-align:center}.settings-layout{display:block;margin-top:16px}.media-settings{border-top:1px solid #dee2e6;padding-top:14px}.settings-group{min-width:0}.settings-title{color:#495057;font-size:13px;font-weight:600;margin-bottom:10px}.format-check,.number-format{align-items:center;color:#495057;display:flex;font-size:13px;gap:7px;margin:0}.signature-field input{height:auto}.tags-form{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:18px;overflow:auto;padding-right:4px}.tags-empty-state{align-items:center;background:#fff;border:1px dashed #ced4da;border-radius:6px;color:#6c757d;display:flex;flex:1;justify-content:center;margin-top:18px;min-height:clamp(360px,46vh,680px);padding:18px;text-align:center}.tags-empty-state strong{color:#343a40;display:block;font-size:15px;margin-bottom:6px}.tags-empty-state span{display:block;font-size:13px}.tag-field{min-width:0}.tag-field.multiline-field{grid-column:1/-1}.tag-field.multiline-field>label{display:none!important}.editor-toolbar{align-items:stretch;background:linear-gradient(#fbfbfb,#f1f3f5);border:1px solid #cfd6de;border-bottom:0;border-radius:4px 4px 0 0;display:flex;flex-wrap:nowrap;gap:0;padding:0}.editor-toolbar button:has(.fa-file-pdf),.editor-toolbar .preview-pdf-btn{display:none!important}.word-ribbon{min-height:46px;overflow:visible}.ribbon-group{align-items:center;border-right:1px solid #cfd6de;display:flex;flex-direction:row;justify-content:center;margin:0;min-width:0;padding:6px 8px;position:relative}.ribbon-group:last-child{border-right:0}.font-ribbon-group,.paragraph-ribbon-group{flex:0 0 auto}.table-ribbon-group{flex:0 0 auto;padding-right:10px}.ribbon-controls{align-items:center;display:flex;flex-wrap:nowrap;gap:5px;min-height:28px}.ribbon-row{align-items:center;display:flex;flex-wrap:nowrap;gap:4px;min-height:28px}.font-ribbon-group .ribbon-controls,.font-ribbon-group .ribbon-row{flex-wrap:nowrap}.font-ribbon-group .ribbon-toggle,.font-ribbon-group .ribbon-icon-btn{flex:0 0 auto}.ribbon-size-input{flex:0 0 54px;height:26px;padding:2px 4px;text-align:center}.line-thickness-select{flex:0 0 64px;height:26px;min-width:64px;padding:2px 4px}.ribbon-icon-btn,.ribbon-primary-btn,.ribbon-danger-btn,.ribbon-command-btn,.ribbon-toggle{align-items:center;background:transparent;border:1px solid transparent;border-radius:2px;color:#343a40;cursor:pointer;display:inline-flex;font-size:12px;gap:3px;height:26px;justify-content:center;line-height:1;min-width:26px;padding:3px 6px;-webkit-user-select:none;user-select:none}.ribbon-icon-btn:hover,.ribbon-command-btn:hover,.ribbon-toggle:hover{background:#e9f2ff;border-color:#9dc5f4}.ribbon-primary-btn{background:#eef5ff;border-color:#b9d5ff;color:#0d47a1}.ribbon-primary-btn:hover{background:#dcecff}.ribbon-danger-btn{color:#b42318}.ribbon-danger-btn:hover{background:#fff1f0;border-color:#ffb4ab}.ribbon-toggle input{display:none}.ribbon-toggle.active{background:#dbeafe;border-color:#7db3f2;color:#0b5cad}.ribbon-text-toggle{font-weight:600;min-width:auto;white-space:nowrap}.ribbon-corner-icon{font-size:9px;margin-left:-1px;margin-top:-8px}.ribbon-command-btn{min-width:52px}.table-align-btn{min-width:42px}.table-align-btn .fa-table{font-size:11px}.header-color-picker{align-items:center;border:1px solid transparent;border-radius:2px;cursor:pointer;display:inline-flex;height:26px;justify-content:center;margin:0;padding:2px;width:30px}.header-color-picker:hover{background:#e9f2ff;border-color:#9dc5f4}.header-color-picker input{border:0;cursor:pointer;height:20px;padding:0;width:24px}.ribbon-field{align-items:center;color:#495057;display:inline-flex;font-size:11px;gap:4px;margin:0;white-space:nowrap}.ribbon-field input{height:26px;padding:2px 4px;text-align:center;width:54px}.table-picker{display:inline-flex;position:relative}.table-picker-trigger{min-width:34px;padding-left:7px;padding-right:7px}.table-picker-caret{font-size:9px;margin-left:1px}.table-picker-panel{background:#fff;border:1px solid #adb5bd;border-radius:3px;box-shadow:0 6px 16px #2125292e;left:0;padding:7px;position:absolute;top:30px;width:148px;z-index:25}.table-picker-size{border-bottom:1px solid #e9ecef;color:#212529;font-size:12px;font-weight:600;line-height:1;margin:0 -7px 6px;padding:0 7px 6px;text-align:center}.table-picker-grid{display:flex;flex-direction:column;gap:2px}.table-picker-row{display:flex;gap:2px}.table-picker-cell{background:#fff;border:1px solid #d0d7de;cursor:pointer;height:13px;min-width:0;padding:0;width:13px}.table-picker-cell:hover,.table-picker-cell:focus,.table-picker-cell.active{background:#dcecff;border-color:#4d94ff;outline:none}.rich-body-editor{background:#fff;border-top-left-radius:0;border-top-right-radius:0;direction:auto;font-family:Arial,Tahoma,sans-serif;font-size:14px;line-height:1.7;min-height:clamp(360px,46vh,680px);overflow:auto;padding:14px;white-space:normal}.rich-body-editor:empty:before{color:#adb5bd;content:\"Start writing the letter body here...\"}.rich-body-editor:focus{border-color:#86b7fe;box-shadow:0 0 0 .2rem #0d6efd26;outline:0}.rich-body-editor p,.rich-body-editor h1,.rich-body-editor h2,.rich-body-editor h3,.rich-body-editor ul,.rich-body-editor ol{margin:0 0 10px}.rich-body-editor h1,.rich-body-editor h2,.rich-body-editor h3{color:#212529;font-weight:700;line-height:1.35}.rich-body-editor h1{font-size:2em}.rich-body-editor h2{font-size:1.75em}.rich-body-editor h3{font-size:1.45em}.rich-body-editor .template-editor-table-wrapper{width:100%}.rich-body-editor table{border:1px solid #495057;border-collapse:collapse;direction:ltr;display:inline-table;margin:10px 0 14px;max-width:100%;table-layout:auto;width:auto}.rich-body-editor th,.rich-body-editor td{border:1px solid #495057;direction:rtl;height:34px;min-width:90px;padding:7px 9px;position:relative;vertical-align:top}.rich-body-editor.table-resize-column,.rich-body-editor.table-resize-column th,.rich-body-editor.table-resize-column td{cursor:col-resize}.rich-body-editor.table-resize-row,.rich-body-editor.table-resize-row th,.rich-body-editor.table-resize-row td{cursor:row-resize}.rich-body-editor.table-resize-both,.rich-body-editor.table-resize-both th,.rich-body-editor.table-resize-both td{cursor:nwse-resize}.rich-body-editor th:focus,.rich-body-editor td:focus{box-shadow:inset 0 0 0 2px #86b7fe;outline:0}.rich-body-editor th{background:#f1f3f5;font-weight:700}.number-format{font-size:12px;margin-top:7px}@media (max-width: 992px){.selector-panel,.workbench-layout{grid-template-columns:1fr}.editor-panel,.workbench-layout{min-height:auto}.template-summary{max-width:100%}}@media (max-width: 768px){.word-template-page{padding:16px}.page-toolbar,.panel-header{align-items:stretch;flex-direction:column}.toolbar-actions,.panel-actions{justify-content:flex-start}.toolbar-actions .btn,.panel-actions .btn{flex:1 1 150px}.style-tools,.table-builder{flex:1 1 100%}.pdf-preview-panel,.pdf-frame,.pdf-empty{min-height:520px}}@media (max-width: 520px){.template-panel{padding:14px}.template-summary,.tags-form{grid-template-columns:1fr}.template-summary>div{border-bottom:1px solid #e9ecef;border-right:0}.template-summary>div:last-child{border-bottom:0}.font-toolbar-field,.size-toolbar-field,.toolbar-toggle-group{flex:1 1 100%}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.DomSanitizer }], propDecorators: { templates: [{
+                type: Input
+            }], refreshTemplatesRequested: [{
+                type: Output
+            }], templateTagsRequested: [{
+                type: Output
+            }], uploadedTemplateAnalyzeRequested: [{
+                type: Output
+            }], pdfPreviewRequested: [{
+                type: Output
+            }], wordPreviewRequested: [{
+                type: Output
+            }], generateLetterRequested: [{
+                type: Output
+            }], onDocumentMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onDocumentMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup']
+            }] } });
+
+class WordTemplateLettersModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: WordTemplateLettersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: WordTemplateLettersModule, declarations: [WordTemplateLettersComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule], exports: [WordTemplateLettersComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: WordTemplateLettersModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: WordTemplateLettersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        WordTemplateLettersComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule
+                    ],
+                    exports: [
+                        WordTemplateLettersComponent
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WordTemplateLettersComponent, WordTemplateLettersModule };
+//# sourceMappingURL=tafeel-word-template-letters.mjs.map