el-header-and-footer 0.0.1

package/fesm2020/el-header-and-footer.mjs

@@ -0,0 +1,1113 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, forwardRef, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdown, NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i1 from '@angular/router';
+import * as i2 from '@angular/platform-browser';
+import * as i3 from 'ngx-color/sketch';
+import { ColorSketchModule } from 'ngx-color/sketch';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { ColorPickerModule } from 'ngx-color-picker';
+import { NgxColorsModule } from 'ngx-colors';
+
+class ElHeaderAndFooterService {
+    constructor() { }
+}
+ElHeaderAndFooterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElHeaderAndFooterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ElHeaderAndFooterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElHeaderAndFooterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElHeaderAndFooterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class ElHeaderAndFooterComponent {
+    constructor(router, route, renderer, sanitizer) {
+        this.router = router;
+        this.route = route;
+        this.renderer = renderer;
+        this.sanitizer = sanitizer;
+        this.editorId = '';
+        this.editorText = '';
+        this.editorFrom = '';
+        this.clear = false;
+        this.toolbarMode = 'fixed';
+        this.editorTextChange = new EventEmitter();
+        this.editorActionResponse = new EventEmitter();
+        this.value = '';
+        this.editorTextClear = new EventEmitter();
+        this.showToolbar = false;
+        this.toolbarTop = 0;
+        this.toolbarLeft = 0;
+        this.fonts = ['Arial', 'Courier New', 'Georgia', 'Times New Roman', 'Verdana'];
+        this.fontSizes = [10, 12, 14, 16, 18, 20, 24, 28, 32, 36];
+        this.selectedFont = 'Arial';
+        this.selectedFontSize = 14;
+        this.isTableSelected = false;
+        this.tableAdded = false;
+        this.selectedTable = null;
+        this.isPlaceholderVisible = true;
+        this.selectedCell = null;
+        this.isBoldActive = false;
+        this.isItalicActive = false;
+        this.isUnderlineActive = false;
+        this.isStrikethroughActive = false;
+        this.isSubscriptActive = false;
+        this.isSuperscriptActive = false;
+        this.selectedFormatBlock = 'normal';
+        this.undoStack = [];
+        this.redoStack = [];
+        this.history = [];
+        this.historyIndex = -1;
+        this.selectedImage = null;
+        this.imageEditUrl = '';
+        this.imagePositionX = 0;
+        this.imagePositionY = 0;
+        this.imageResizeStartX = 0;
+        this.imageResizeStartY = 0;
+        this.imageResizeStartWidth = 0;
+        this.imageResizeStartHeight = 0;
+        this.imageResizeDirection = null;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.color = '#ddd';
+        this.selectedItemIndex = null;
+        this.parsedTable = null;
+        this.isFullScreen = false;
+        this.today = '';
+        this.CanvasColor = '#fff';
+    }
+    ngOnChanges(changes) {
+        if (changes['bgColor']) {
+            const event = { color: { hex: this.bgColor } };
+            this.setCanvasBackgroundColor(event, this.editorId);
+        }
+    }
+    ngAfterViewInit() {
+        this.initEditor();
+        this.checkPlaceholder();
+        this.setupHistory();
+    }
+    ngOnInit() {
+        this.init_Func(this.editorText);
+        document.addEventListener('selectionchange', () => {
+            this.checkActiveStates();
+            this.checkFormatBlock(this.editorId);
+        });
+        this.addClickListenerToImages();
+        this.addClickListenerToElements();
+        // this.route.queryParams.subscribe(params => {
+        //   const data = JSON.parse(params['data']);
+        //   if (data.editedIMG) {
+        //     const imgUrl = sessionStorage.getItem('editImageFromTemp');
+        //     if (imgUrl) {
+        //       this.replaceImageSrc(imgUrl, data.index.index)
+        //     }
+        //     sessionStorage.removeItem('editImageFromTemp');
+        //   }
+        // })
+    }
+    writeValue(value) {
+        if (value !== undefined) {
+            this.editorText = value;
+            this.initEditor();
+            this.init_Func(this.editorText);
+        }
+    }
+    // private addClickListenerToImages() {
+    //   const editor = document.getElementById('editor');
+    //   if (editor) {
+    //     editor.addEventListener('click', (event) => {
+    //       const target = event.target as HTMLElement;
+    //       if (target.tagName === 'IMG') {
+    //         this.selectedImage = target as HTMLImageElement;
+    //         this.imageEditUrl = this.selectedImage.src;
+    //         // Position the edit button near the selected image
+    //       } else {
+    //         this.selectedImage = null;
+    //       }
+    //     });
+    //   }
+    // }
+    addClickListenerToImages() {
+        const editor = document.getElementById(this.editorId);
+        if (editor) {
+            editor.addEventListener('click', (event) => {
+                const target = event.target;
+                if (target.tagName === 'IMG') {
+                    this.selectedImage = target;
+                    this.imageEditUrl = this.selectedImage.src;
+                    // Get the index of the selected image
+                    const images = editor.getElementsByTagName('img');
+                    for (let i = 0; i < images.length; i++) {
+                        if (images[i] === this.selectedImage) {
+                            this.selectedItemIndex = i;
+                            break;
+                        }
+                    }
+                    if (this.toolbarMode === 'bubble') {
+                        this.onTextSelect();
+                    }
+                }
+                else {
+                    this.selectedImage = null;
+                    this.selectedItemIndex = null;
+                }
+            });
+        }
+    }
+    addClickListenerToElements() {
+        const editor = document.getElementById(this.editorId);
+        if (editor) {
+            editor.addEventListener('click', (event) => {
+                const target = event.target;
+                // Handle images
+                if (target.tagName === 'IMG') {
+                    this.selectedImage = target;
+                    this.imageEditUrl = this.selectedImage.src;
+                    // Get the index of the selected image
+                    const images = editor.getElementsByTagName('img');
+                    for (let i = 0; i < images.length; i++) {
+                        if (images[i] === this.selectedImage) {
+                            this.selectedItemIndex = i;
+                            break;
+                        }
+                    }
+                }
+                else {
+                    this.selectedImage = null;
+                }
+                if (target.tagName === 'TD' || target.tagName === 'TH') {
+                    this.selectedTable = target.closest('table');
+                    const cells = this.selectedTable.getElementsByTagName(target.tagName);
+                    for (let i = 0; i < cells.length; i++) {
+                        if (cells[i] === target) {
+                            this.selectedItemIndex = i;
+                            break;
+                        }
+                    }
+                }
+                else {
+                    this.selectedTable = null;
+                }
+                if (target.tagName === 'P' || target.tagName === 'SPAN' || target.tagName === 'DIV') {
+                    const paragraphs = editor.getElementsByTagName(target.tagName);
+                    for (let i = 0; i < paragraphs.length; i++) {
+                        if (paragraphs[i] === target) {
+                            this.selectedItemIndex = i;
+                            break;
+                        }
+                    }
+                }
+                else {
+                }
+            });
+        }
+    }
+    replaceImageSrc(newSrc, index) {
+        const editor = document.getElementById(this.editorId);
+        if (editor) {
+            editor.focus();
+            const images = editor.getElementsByTagName('IMG');
+            if (index >= 0) {
+                images[index].setAttribute('src', newSrc);
+            }
+            else {
+                console.warn(`Index ${index} is out of bounds. Total images: ${images.length}`);
+            }
+        }
+        else {
+            console.error('Editor element not found');
+        }
+    }
+    initEditor() {
+        // Initialize editor content and listeners
+        const editor = document.getElementById(this.editorId);
+        if (editor) {
+            editor.innerHTML = this.editorText;
+            editor.addEventListener('input', () => {
+                this.onModelChange(editor.innerHTML);
+            });
+        }
+        this.checkPlaceholder();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        // Handle the disabled state if necessary
+    }
+    onModelChange(value) {
+        if (value) {
+            const VALUE = value;
+            this.editorText = this.mainCanvas(VALUE);
+            this.onChange(this.mainCanvas(VALUE));
+            this.editorTextChange.emit(this.mainCanvas(VALUE));
+        }
+        else {
+            this.selectedImage = null;
+        }
+    }
+    applyImageStyles(content) {
+        const div = document.createElement('div');
+        div.innerHTML = content;
+        const images = div.querySelectorAll('img');
+        images.forEach(img => {
+            if (img.style.maxWidth >= '700px') {
+                img.style.maxWidth = '700px';
+                // img.width = 300;
+                img.style.height = 'auto';
+            }
+            else {
+                img.style.maxWidth = '100%';
+                img.style.height = 'auto';
+            }
+        });
+        return div.innerHTML;
+    }
+    init_Func(html) {
+        if (html) {
+            let editor = document.getElementById(this.editorId);
+            if (editor) {
+                editor.focus();
+                this.setEditorContent(html);
+                // Set up a MutationObserver to handle content changes
+                this.setupMutationObserver(editor);
+                // Move the caret to the end after initial content setup
+                this.moveCaretToEnd(editor);
+                // editor.focus()
+                // editor.innerHTML = html;
+                // this.sanitizedContent = this.sanitizer.bypassSecurityTrustHtml(this.applyImageStyles(html));
+                // editor.innerHTML = this.sanitizedContent as string;
+                // editor.addEventListener('input', () => {
+                //   if (editor) {
+                //     editor.focus()
+                //     this.onModelChange(editor.innerHTML);
+                //   }
+                // });
+            }
+        }
+        else {
+            this.selectedImage = null;
+        }
+    }
+    setEditorContent(html) {
+        let editor = document.getElementById(this.editorId);
+        if (editor) {
+            // Sanitize and apply styles to the HTML
+            this.sanitizedContent = this.sanitizer.bypassSecurityTrustHtml(this.applyImageStyles(html));
+            editor.innerHTML = this.sanitizedContent;
+        }
+    }
+    setupMutationObserver(editor) {
+        const observer = new MutationObserver(() => {
+            // Move the caret to the end after content changes
+            this.moveCaretToEnd(editor);
+            // Update model with the current content
+            this.onModelChange(editor.innerHTML);
+        });
+        observer.observe(editor, { childList: true, subtree: true, characterData: true });
+    }
+    moveCaretToEnd(editor) {
+        const selection = window.getSelection();
+        const range = document.createRange();
+        if (editor.lastChild) {
+            range.selectNodeContents(editor);
+            range.collapse(false); // Collapse to the end
+            selection?.removeAllRanges();
+            selection?.addRange(range);
+        }
+    }
+    // format(command: string, value?: any) {
+    //   document.execCommand(command, false, value ?? '');
+    //   //  if (command === 'underline') {
+    //   //     // Toggle underline
+    //   //     const isUnderlined = document.queryCommandState('underline');
+    //   //     document.execCommand('underline', false, isUnderlined ? 'false' : 'true');
+    //   // } else {
+    //   //     document.execCommand(command, false, '');
+    //   // }
+    // }
+    onFormatChange(data) {
+        const value = data;
+        this.selectedFormatBlock = value;
+        if (value) {
+            this.format('formatBlock', this.editorId, value);
+        }
+    }
+    format(command, editorId, value) {
+        const editor = document.getElementById(editorId);
+        if (editor) {
+            editor.focus();
+            if (command === 'subscript') {
+                this.isSubscriptActive = !this.isSubscriptActive;
+                document.execCommand('subscript', false, '');
+            }
+            else if (command === 'superscript') {
+                this.isSuperscriptActive = !this.isSuperscriptActive;
+                document.execCommand('superscript', false, '');
+                ;
+            }
+            else {
+                document.execCommand(command, false, value ?? '');
+                if (value) {
+                    const tag = value.toLowerCase().replace(/[<>]/g, '');
+                    const toolbar = document.getElementById(editorId + 'toolbar');
+                    if (toolbar) {
+                        this.selectedFormatBlock = this.formatBlockDecode(tag);
+                    }
+                }
+            }
+        }
+        this.checkActiveStates();
+        this.checkFormatBlock(editorId);
+    }
+    checkActiveStates() {
+        this.isBoldActive = document.queryCommandState('bold');
+        this.isItalicActive = document.queryCommandState('italic');
+        this.isUnderlineActive = document.queryCommandState('underline');
+        this.isStrikethroughActive = document.queryCommandState('strikethrough');
+        this.isSubscriptActive = document.queryCommandState('subscript');
+        this.isSuperscriptActive = document.queryCommandState('superscript');
+    }
+    checkFormatBlock(editorId) {
+        const editor = document.getElementById(editorId);
+        if (editor) {
+            const formatBlock = document.queryCommandValue('formatBlock');
+            const toolbar = document.getElementById(editorId + 'toolbar');
+            if (toolbar) {
+                this.selectedFormatBlock = this.formatBlockDecode(formatBlock);
+            }
+            // You can further handle the formatBlock value as needed
+        }
+    }
+    formatBlockDecode(data) {
+        switch (data) {
+            case 'h1':
+                return 'heading 1';
+                break;
+            case 'h2':
+                return 'heading 2';
+                break;
+            case 'h3':
+                return 'heading 3';
+                break;
+            case 'h4':
+                return 'heading 4';
+                break;
+            case 'h5':
+                return 'heading 5';
+                break;
+            case 'h6':
+                return 'heading 6';
+                break;
+            case 'p':
+                return 'normal';
+                break;
+            default:
+                return 'normal';
+                break;
+        }
+    }
+    changeFont(event) {
+        this.selectedFont = event;
+        document.execCommand('fontName', false, this.selectedFont);
+    }
+    insertCodeBlock() {
+        const code = `
+      <pre style="font-size: 12px;
+                  color: white;
+                  background-color: black;
+                  overflow-x: auto;
+                  margin-bottom: 5px;
+                  margin-top: 5px;
+                  padding: 5px 10px;">
+        <code style="display: block;
+                     white-space: pre-wrap;
+                     height: auto;
+                     font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
+                     font-size: 14px;" class="language-html">Insert code here...</code>
+      </pre>
+    `;
+        document.execCommand('insertHTML', false, code);
+    }
+    // changeFontSize(event: any) {
+    //   document.execCommand('fontSize', false, '7');
+    //   let editor = document.getElementById('editor');
+    //   if (editor) {
+    //     let fontElements = editor.getElementsByTagName('font');
+    //     for (let i = 0; i < fontElements.length; i++) {
+    //       if (fontElements[i].size == "7") {
+    //         fontElements[i].removeAttribute("size");
+    //         fontElements[i].style.fontSize = this.selectedFontSize + 'px';
+    //       }
+    //     }
+    //   }
+    // }
+    changeFontSize(event) {
+        const selectedText = window.getSelection();
+        if (selectedText && selectedText.rangeCount > 0) {
+            const range = selectedText.getRangeAt(0);
+            const span = document.createElement('span');
+            span.style.fontSize = this.selectedFontSize + 'px';
+            range.surroundContents(span);
+        }
+    }
+    addLink() {
+        let url = prompt("Enter the link here: ", "http://");
+        if (url) {
+            document.execCommand("createLink", false, url);
+        }
+    }
+    insertsImage(editorId) {
+        const editor = document.getElementById(editorId);
+        if (editor) {
+            editor.focus();
+            let imageInput = document.getElementById('imageInput');
+            if (imageInput) {
+                imageInput.click();
+            }
+        }
+    }
+    handleImageUpload(event) {
+        const file = event.target.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                const img = new Image();
+                img.src = e.target.result;
+                img.onload = () => {
+                    // Create the HTML string with the exact width and height
+                    const imgHTML = `<img src="${img.src}" width="${img.width}" height="${img.height}">`;
+                    // Insert the image into the editor
+                    document.execCommand('insertHTML', false, imgHTML);
+                };
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    addTable(editorId) {
+        const tableWidth = 825; // Table width in pixels
+        const cols = 3; // Number of columns
+        const cellMinWidth = tableWidth / cols; // Calculate minimum width for each cell
+        let table = `<br /><table style="border-collapse: collapse; width: ${tableWidth}px; border: 1px solid black;">`;
+        for (let i = 0; i < 3; i++) { // Number of rows
+            table += '<tr>';
+            for (let j = 0; j < cols; j++) {
+                table += `<td style="border: 1px solid #000; word-wrap: break-word; word-break: break-all; white-space: normal; min-width: ${cellMinWidth}px;">&nbsp;</td>`;
+            }
+            table += '</tr>';
+        }
+        table += '</table><br/ >';
+        // document.execCommand('insertHTML', false, table);
+        const editor = document.getElementById(editorId);
+        if (editor) {
+            editor.focus();
+            document.execCommand('insertHTML', false, table);
+        }
+        this.tableAdded = true;
+        this.checkTableSelection();
+    }
+    checkTableSelection(event) {
+        let target = event?.target;
+        if (target && (target.tagName === 'TD' || target.tagName === 'TH')) {
+            this.isTableSelected = true;
+            this.selectedTable = target.closest('table');
+        }
+        else {
+            this.isTableSelected = false;
+            this.selectedTable = null;
+        }
+        this.checkPlaceholder();
+    }
+    checkPlaceholder() {
+        // let editor = document.getElementById('editor');
+        // if (editor) {
+        //   this.isPlaceholderVisible = editor.innerHTML === '' || editor.innerHTML === '<br>';
+        //   if (this.isPlaceholderVisible) {
+        //     // editor.innerHTML = '<span class="placeholder" style="background: transparent; color: #000000">Insert text here ...</span>';
+        //   } else {
+        //     let placeholder = editor.querySelector('.placeholder');
+        //     if (placeholder) {
+        //       editor.removeChild(placeholder);
+        //     }
+        //   }
+        // }
+    }
+    onFocus() {
+        // let editor = document.getElementById('editor');
+        // if (editor && this.isPlaceholderVisible) {
+        //   editor.innerHTML = '';
+        //   this.isPlaceholderVisible = false;
+        // }
+    }
+    // colorChange(newColor: string) {
+    //   this.color = newColor;
+    // }
+    onBlur() {
+        this.checkPlaceholder();
+    }
+    addRow() {
+        if (this.selectedTable) {
+            let row = this.selectedTable.insertRow();
+            for (let i = 0; i < this.selectedTable.rows[0].cells.length; i++) {
+                let cell = row.insertCell(i);
+                cell.innerHTML = '&nbsp;';
+                cell.style.border = '1px solid black';
+            }
+        }
+    }
+    // deleteRow() {
+    //   if (this.selectedTable) {
+    //     this.selectedTable.deleteRow(-1);
+    //   }
+    // }
+    //   deleteRow() {
+    //   if (this.selectedTable) {
+    //     let rowIndex = this.selectedTable.rows.length - 1; 
+    //     if (window.getSelection) {
+    //       let selection = window.getSelection();
+    //       if (selection) {
+    //         let row = selection.anchorNode?.parentElement?.closest('tr');
+    //         if (row) {
+    //           rowIndex = row.rowIndex;
+    //         }
+    //       }
+    //     }
+    //     this.selectedTable.deleteRow(rowIndex);
+    //   }
+    // }
+    deleteRow() {
+        const selection = window.getSelection();
+        if (selection) {
+            if (!selection.rangeCount)
+                return;
+            const range = selection.getRangeAt(0);
+            const selectedNode = range.startContainer;
+            const row = selectedNode.parentElement?.closest('tr');
+            if (row) {
+                const table = row.closest('table');
+                if (table) {
+                    table.deleteRow(row.rowIndex);
+                }
+            }
+        }
+    }
+    // addColumn() {
+    //   if (this.selectedTable) {
+    //     for (let i = 0; i < this.selectedTable.rows.length; i++) {
+    //       let cell = this.selectedTable.rows[i].insertCell(-1);
+    //       cell.innerHTML = '&nbsp;';
+    //       cell.style.border = '1px solid black';
+    //     }
+    //   }
+    // }
+    addColumn() {
+        if (this.selectedTable) {
+            const columnCount = this.selectedTable.rows[0].cells.length + 1; // New column count
+            const tableWidth = this.selectedTable.offsetWidth;
+            const minWidth = tableWidth / columnCount;
+            for (let i = 0; i < this.selectedTable.rows.length; i++) {
+                let cell = this.selectedTable.rows[i].insertCell(-1);
+                cell.innerHTML = '&nbsp;';
+                cell.style.border = '1px solid black';
+                cell.style.minWidth = `${minWidth}px`;
+                cell.style.wordWrap = 'break-word';
+                cell.style.wordBreak = 'break-all';
+                cell.style.whiteSpace = 'normal';
+            }
+            // Update existing cells' minWidth
+            for (let i = 0; i < this.selectedTable.rows.length; i++) {
+                for (let j = 0; j < this.selectedTable.rows[i].cells.length; j++) {
+                    this.selectedTable.rows[i].cells[j].style.minWidth = `${minWidth}px`;
+                }
+            }
+        }
+    }
+    deleteColumn() {
+        if (this.selectedTable) {
+            if (window.getSelection) {
+                let selection = window.getSelection();
+                if (selection) {
+                    let cell = selection.anchorNode?.parentElement?.closest('td, th');
+                    if (cell) {
+                        let cellIndex = cell.cellIndex;
+                        for (let i = 0; i < this.selectedTable.rows.length; i++) {
+                            this.selectedTable.rows[i].deleteCell(cellIndex);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    // deleteColumn() {
+    //   if (this.selectedTable) {
+    //     for (let i = 0; i < this.selectedTable.rows.length; i++) {
+    //       this.selectedTable.rows[i].deleteCell(-1);
+    //     }
+    //   }
+    // }
+    adjustTableWidth(event) {
+        if (this.selectedTable) {
+            this.selectedTable.style.width = event.target.value + 'px';
+        }
+    }
+    adjustCellWidth(event) {
+        if (this.selectedTable) {
+            for (let i = 0; i < this.selectedTable.rows.length; i++) {
+                for (let j = 0; j < this.selectedTable.rows[i].cells.length; j++) {
+                    this.selectedTable.rows[i].cells[j].style.width = event.target.value + 'px';
+                }
+            }
+        }
+    }
+    adjustCellHeight(event) {
+        if (this.selectedTable) {
+            for (let i = 0; i < this.selectedTable.rows.length; i++) {
+                for (let j = 0; j < this.selectedTable.rows[i].cells.length; j++) {
+                    this.selectedTable.rows[i].cells[j].style.height = event.target.value + 'px';
+                }
+            }
+        }
+    }
+    setCaretToEnd(element) {
+        const range = document.createRange();
+        const sel = window.getSelection();
+        if (sel) {
+            range.selectNodeContents(element);
+            range.collapse(false);
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+    }
+    openColorPicker(inputId) {
+        const inputElement = document.getElementById(inputId);
+        if (inputElement) {
+            inputElement.click();
+        }
+    }
+    setTextColor(event, editorId) {
+        const editor = document.getElementById(editorId);
+        if (editor) {
+            editor.focus();
+            const color = event.color.hex;
+            this.selectedTextColor = color;
+            document.execCommand('foreColor', true, color);
+            if (this.dropdown) {
+                this.dropdown.close();
+            }
+        }
+    }
+    setBackgroundColor(event, editorId) {
+        const editor = document.getElementById(editorId);
+        if (editor) {
+            editor.focus();
+            const color = event.color.hex;
+            this.backgroundColor = color;
+            document.execCommand('hiliteColor', true, color);
+            if (this.dropdown) {
+                this.dropdown.close();
+            }
+        }
+    }
+    // colorChanged(event: any) {
+    //   this.color = event.color.hex; 
+    // }
+    logEvent(event, trigger) {
+        const color = event;
+        this.setTextColor(color, this.editorId);
+        this.selectedTextColor = event;
+        document.execCommand('foreColor', false, event);
+        // this.logs.unshift([this.logs.length + 1, trigger, event]);
+    }
+    editImage() {
+        let data;
+        switch (this.editorFrom) {
+            case 'section-content':
+                data = { editIMG: true, from: 'htmlEditor', index: this.selectedItemIndex };
+                this.navigateToIMGEditor(data);
+                sessionStorage.setItem('editImageFromTemp', JSON.stringify(this.imageEditUrl));
+                sessionStorage.setItem('textEditor', this.editorText);
+                break;
+            case 'template':
+                data = { editIMG: true, from: 'templateEditor', index: this.selectedItemIndex };
+                this.navigateToIMGEditor(data);
+                // sessionStorage.setItem('editImageFromTemp2', JSON.stringify(this.imageEditUrl));
+                sessionStorage.setItem('templateEditor', this.editorText);
+                break;
+            default:
+                sessionStorage.removeItem('editImageFromTemp');
+                // sessionStorage.removeItem('editImageFromTemp2');
+                sessionStorage.removeItem('templateEditor');
+                sessionStorage.removeItem('textEditor');
+                break;
+        }
+        // if (this.editorFrom === 'section-content') {
+        //   const data = {editIMG: true, from: 'htmlEditor', index: this.selectedItemIndex}
+        //   this.navigateToIMGEditor(data)
+        //   sessionStorage.setItem('editImageFromTemp', JSON.stringify(this.imageEditUrl))
+        //   sessionStorage.setItem('textEditor', this.editorText)
+        // } 
+    }
+    navigateToIMGEditor(data) {
+        this.router.navigate(['/admin/image-editor'], { queryParams: { data: JSON.stringify(data) } });
+    }
+    //  onTextSelect(event: MouseEvent): void {
+    //   if (this.toolbarMode === 'bubble') {
+    //     const selection = window.getSelection();
+    //     if (selection && selection.rangeCount > 0) {
+    //       const range = selection.getRangeAt(0);
+    //       if (!range.collapsed) {
+    //         const rect = range.getBoundingClientRect();
+    //         this.toolbarTop = rect.bottom + window.scrollY + 10;
+    //         this.toolbarLeft = rect.left + window.scrollX + (rect.width / 2) - 50;
+    //         this.showToolbar = true;
+    //       } else {
+    //         this.showToolbar = false;
+    //       }
+    //     }
+    //   }
+    // }
+    onTextSelect(event) {
+        if (this.toolbarMode === 'bubble') {
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                if (!range.collapsed) {
+                    const rect = range.getBoundingClientRect();
+                    const scrollY = document.documentElement.scrollTop;
+                    const scrollX = document.documentElement.scrollLeft;
+                    this.toolbarTop = rect.top + scrollY - 75;
+                    this.toolbarLeft = rect.left + scrollX + (rect.width / 2) - 325;
+                    this.showToolbar = true;
+                }
+                else {
+                    this.showToolbar = false;
+                }
+            }
+            else {
+                this.showToolbar = false;
+            }
+        }
+    }
+    onPaste(event) {
+        event.preventDefault();
+        const clipboardData = event.clipboardData;
+        if (clipboardData) {
+            const pastedText = clipboardData.getData('text/plain');
+            if (this.isTableData(pastedText)) {
+                const html = this.convertTextToTable(pastedText);
+                this.insertHtmlAtCaret(html);
+            }
+            else {
+                this.insertHtmlAtCaret(pastedText);
+            }
+        }
+    }
+    isTableData(text) {
+        const rows = text.split('\n');
+        return rows.length > 1 && rows[0].split('\t').length > 1;
+    }
+    convertTextToTable(text) {
+        const rows = text.split('\n').filter(row => row.trim() !== '');
+        const tableRows = rows.map(row => {
+            const cells = row.split('\t').map(cell => `<td class="px-1 py-1  style="border: 1px solid #000">${cell}</td>`).join('');
+            return `<tr >${cells}</tr>`;
+        }).join('');
+        return `<table>${tableRows}</table>`;
+    }
+    insertHtmlAtCaret(html) {
+        const range = window.getSelection()?.getRangeAt(0);
+        if (range) {
+            range.deleteContents();
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = html;
+            const frag = document.createDocumentFragment();
+            let node;
+            while ((node = tempDiv.firstChild)) {
+                frag.appendChild(node);
+            }
+            range.insertNode(frag);
+            range.collapse(false);
+        }
+    }
+    openFullscreen() {
+        var elem = document.getElementById("textEditor");
+        this.isFullScreen = true;
+        if (elem.requestFullscreen) {
+            elem.requestFullscreen();
+        }
+        else if (elem.mozRequestFullScreen) {
+            elem.mozRequestFullScreen();
+        }
+        else if (elem.webkitRequestFullscreen) {
+            elem.webkitRequestFullscreen();
+        }
+        else if (elem.msRequestFullscreen) {
+            elem.msRequestFullscreen();
+        }
+        this.style = {
+            'min-height': '90vh',
+            'max-height': '90vh',
+        };
+    }
+    closeFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+            this.isFullScreen = false;
+            this.style = {
+                'min-height': '400px',
+                'max-height': '400px',
+            };
+        }
+    }
+    openCanvasColorPicker(inputId) {
+        const inputElement = document.getElementById(inputId);
+        if (inputElement) {
+            inputElement.click();
+        }
+    }
+    setCanvasBackgroundColor(event, editorId) {
+        this.CanvasColor = event.color.hex;
+        const editor = document.getElementById(editorId);
+        if (editor) {
+            let color = '';
+            console.log('event bg color  = ', event);
+            editor.style.backgroundColor = '#fff';
+            color = event.color.hex || event;
+            editor.style.backgroundColor = color;
+            this.mainCanvas();
+            // this.init_Func(`<div style="background-color: ${color};">${this.editorText}</div>`);
+            if (this.dropdown) {
+                this.dropdown.close();
+            }
+        }
+    }
+    getToday() {
+        const currentDate = new Date();
+        const day = currentDate.getDate();
+        const month = currentDate.getMonth() + 1;
+        const year = currentDate.getFullYear();
+        const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
+        this.today = formattedDate;
+        // const label = `{(${this.today})}`;
+        const label = `{(date)}`;
+        const htmlContent = ` ${label} `;
+        const editor = document.getElementById(this.editorId);
+        if (editor) {
+            this.editorText += `<div> ${htmlContent} </div>`;
+            this.sanitizedContent = this.editorText;
+        }
+        else {
+            this.editorText += `<div> ${htmlContent} </div>`;
+            this.sanitizedContent = this.editorText;
+        }
+    }
+    insertPageNumber() {
+        const pageNumber = '{(page)}';
+        const editor = document.getElementById(this.editorId);
+        if (editor) {
+            this.editorText += `<div> ${pageNumber} </div>`;
+            this.sanitizedContent = this.editorText;
+        }
+        else {
+            this.editorText += `<div> ${pageNumber} </div>`;
+            this.sanitizedContent = this.editorText;
+        }
+    }
+    clearTextEditor() {
+        const editor = document.getElementById(this.editorId);
+        if (editor) {
+            this.editorTextClear.emit();
+            let data;
+            // data.color.hex = '#ffffff'
+            data = {
+                color: {
+                    hex: '#353343'
+                }
+            };
+            editor.innerHTML = '';
+            this.setCanvasBackgroundColor(data, this.editorId);
+        }
+    }
+    setupHistory() {
+        this.saveState();
+        const editor = document.getElementById(this.editorId);
+        if (editor) {
+            editor.addEventListener('input', () => this.onInput());
+        }
+    }
+    onInput() {
+        this.saveState();
+    }
+    saveState() {
+        const editor = document.getElementById(this.editorId);
+        if (editor) {
+            const editorContent = editor.innerHTML;
+            if (this.historyIndex === this.history.length - 1) {
+                this.history.push(editorContent);
+                this.redoStack = [];
+            }
+            else {
+                this.history = this.history.slice(0, this.historyIndex + 1);
+                this.history.push(editorContent);
+                this.redoStack = [];
+            }
+            this.historyIndex++;
+        }
+    }
+    undo() {
+        if (this.historyIndex > 0) {
+            this.redoStack.push(this.history[this.historyIndex]);
+            this.historyIndex--;
+            const editor = document.getElementById(this.editorId);
+            if (editor) {
+                this.sanitizedContent = this.history[this.historyIndex];
+            }
+        }
+    }
+    redo() {
+        if (this.redoStack.length > 0) {
+            const redoContent = this.redoStack.pop();
+            this.history.push(redoContent);
+            this.historyIndex++;
+            const editor = document.getElementById(this.editorId);
+            if (editor) {
+                this.sanitizedContent = redoContent;
+            }
+        }
+    }
+    mainCanvas(data) {
+        let BG = '';
+        const editor = document.getElementById(this.editorId);
+        if (editor) {
+            editor.focus();
+            if (editor.style.backgroundColor === 'rgb(53, 51, 67)') {
+                BG = 'rgb(255, 255, 255)';
+            }
+            else {
+                BG = editor.style.backgroundColor;
+            }
+            return `<div style="background-color: ${BG}; padding: 10px 15px;">${data}</div>`;
+        }
+        else {
+            return `<div>${data}</div>`;
+        }
+    }
+    themeMode() {
+        const clrMode = document.body.getAttribute('data-layout-color');
+        if (clrMode == 'dark') {
+            return '2px solid #414141 !important';
+        }
+        else {
+            return '2px solid #D0D0D0 !important';
+        }
+    }
+    themeModeClr() {
+        const clrMode = document.body.getAttribute('data-layout-color');
+        if (clrMode == 'dark') {
+            return '#fff !important';
+        }
+        else {
+            return '#000 !important';
+        }
+    }
+}
+ElHeaderAndFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElHeaderAndFooterComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }, { token: i0.Renderer2 }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+ElHeaderAndFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: ElHeaderAndFooterComponent, selector: "el-header-and-footer", inputs: { editorId: "editorId", editorText: "editorText", editorFrom: "editorFrom", clear: "clear", editorAction: "editorAction", style: "style", bgColor: "bgColor", toolbarMode: "toolbarMode", value: "value" }, outputs: { editorTextChange: "editorTextChange", editorActionResponse: "editorActionResponse", editorTextClear: "editorTextClear" }, providers: [{
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ElHeaderAndFooterComponent),
+            multi: true
+        }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: NgbDropdown, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"container els-text-editor px-0\">\r\n    <div class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\" role=\"toolbar\" [id]=\"editorId+'toolbar'\"\r\n        aria-label=\"Toolbar with button groups\">\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n            <!-- <div class=\"dropdown\">\r\n                <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff; width: 150px; border: 2px solid #7D6D6D !important;\" (change)=\"onFormatChange($event)\">\r\n                    <option [value]=\"'<h1>'\">Heading 1</option>\r\n                    <option [value]=\"'<h2>'\">Heading 2</option>\r\n                    <option [value]=\"'<h3>'\">Heading 3</option>\r\n                    <option [value]=\"'<h4>'\">Heading 4</option>\r\n                    <option [value]=\"'<h5>'\">Heading 5</option>\r\n                    <option [value]=\"'<h6>'\">Heading 6</option>\r\n                    <option selected [value]=\"'<p>'\">Normal</option>\r\n                </select>\r\n            </div> -->\r\n            <div ngbDropdown class=\"dropdown\">\r\n                <button class=\"btn btn-sm els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n                 [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\"\r\n                    id=\"headerDropdown\" ngbDropdownToggle>\r\n                    <span style=\"width: 85px; font-weight: 700 !important;\">{{selectedFormatBlock | titlecase}}</span>\r\n                    <i class=\"mdi mdi-chevron-down \"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\">\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h1>')\" [style.color]=\"themeModeClr()\">\r\n                        <h1>Heading 1</h1>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h2>')\" [style.color]=\"themeModeClr()\">\r\n                        <h2>Heading 2</h2>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h3>')\" [style.color]=\"themeModeClr()\">\r\n                        <h3>Heading 3</h3>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h4>')\" [style.color]=\"themeModeClr()\">\r\n                        <h4>Heading 4</h4>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h5>')\" [style.color]=\"themeModeClr()\">\r\n                        <h5>Heading 5</h5>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h6>')\" [style.color]=\"themeModeClr()\">\r\n                        <h6>Heading 6</h6>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<p>')\" [style.color]=\"themeModeClr()\">\r\n                        <p>Normal</p>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n            <div ngbDropdown class=\"dropdown\">\r\n                <button class=\"btn btn-sm els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n                    id=\"headerDropdown\"  [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\" ngbDropdownToggle>\r\n                    <span style=\"width: 85px; font-weight: 700 !important;\" class=\"text-truncate\">{{selectedFont |\r\n                        titlecase}}</span>\r\n                    <i class=\"mdi mdi-chevron-down \"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\">\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" *ngFor=\"let font of fonts\"\r\n                        (click)=\"changeFont(font)\">\r\n                        <span>{{ font }}</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"border py-0\" [style.border]=\"themeMode()\" style=\"height: fit-content;\">\r\n            <div class=\"btn-group els-button-group mr-2 \" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-sm els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n                    (click)=\"format('bold', editorId)\">\r\n                    <i class=\"mdi mdi-format-bold\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n                    (click)=\"format('italic', editorId)\">\r\n                    <i class=\"mdi mdi-format-italic\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n                    (click)=\"format('underline', editorId)\">\r\n                    <i class=\"mdi mdi-format-underline\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n                    (click)=\"format('strikethrough', editorId)\">\r\n                    <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n                </button>\r\n                <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n                    <!-- <input type=\"color\" id=\"textColorPicker\"\r\n                                style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                                (change)=\"setTextColor($event)\">\r\n                            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n                                (click)=\"openColorPicker('textColorPicker')\">\r\n                                <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n                            </button> -->\r\n                    <div ngbDropdown class=\"ql-align\">\r\n                        <button type=\"button\"\r\n                            class=\"btn btn-outline-primary els-toolbar-button arrow-none text-secondary border-none p-0\"\r\n                            id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                            <i class=\"mdi mdi-format-color-text icon-with-underline\"\r\n                                [style.color]=\"selectedTextColor ?? '#000'\"></i>\r\n                        </button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 200px;\">\r\n                            <color-sketch color=\"#fff\" [presetColors]=\"[]\"\r\n                                (onChangeComplete)=\"setTextColor($event, editorId)\"></color-sketch>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n                    <!-- <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n                                (click)=\"openColorPicker('bgColorPicker')\">\r\n                                <i class=\"mdi mdi-alpha-a-box\"></i>\r\n                            </button>\r\n                            <input type=\"color\" id=\"bgColorPicker\"\r\n                                style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                                (change)=\"setBackgroundColor($event)\"> -->\r\n                    <div ngbDropdown class=\"ql-align\">\r\n                        <button type=\"button\"\r\n                            class=\"btn btn-outline-primary els-toolbar-button arrow-none text-secondary border-none p-0\"\r\n                            id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                            <i class=\"mdi mdi-alpha-a-box\" [style.color]=\"backgroundColor ?? '#000'\"></i>\r\n                        </button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 200px;\">\r\n                            <color-sketch color=\"#fff\" [presetColors]=\"[]\"\r\n                                (onChangeComplete)=\"setBackgroundColor($event, editorId)\"></color-sketch>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"format('insertOrderedList', editorId)\"><i\r\n                        class=\"mdi mdi-format-list-numbered\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"format('insertUnorderedList', editorId)\"><i\r\n                        class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n                <div ngbDropdown class=\"ql-align\">\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n                        id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                        <i class=\"mdi mdi-format-align-left \"></i>\r\n                    </button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n                            (click)=\"format('justifyLeft', editorId)\"><i class=\"mdi mdi-format-align-left\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n                            (click)=\"format('justifyCenter', editorId)\"><i\r\n                                class=\"mdi mdi-format-align-center\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n                            (click)=\"format('justifyRight', editorId)\"><i\r\n                                class=\"mdi mdi-format-align-right\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n                            (click)=\"format('justifyFull', editorId)\"><i\r\n                                class=\"mdi mdi-format-align-justify\"></i></button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n                    (click)=\"format('subscript', editorId)\">\r\n                    <i class=\"mdi mdi-format-subscript\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n                    (click)=\"format('superscript', editorId)\">\r\n                    <i class=\"mdi mdi-format-superscript\"></i>\r\n                </button>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n\r\n                <div ngbDropdown class=\"ql-align\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary arrow-none els-toolbar-button  border-none p-0\"\r\n                        id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                        <i class=\"mdi mdi-format-color-fill\"></i>\r\n                    </button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 200px;\">\r\n                        <color-sketch color=\"#fff\"\r\n                            (onChangeComplete)=\"setCanvasBackgroundColor($event, editorId)\"></color-sketch>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group-2 mr-3\" role=\"group\" aria-label=\"Table Options\">\r\n                <button class=\"btn btn-white  px-1\" style=\"height: 24px;\" (click)=\"getToday()\">Date</button>\r\n            </div>\r\n            <div class=\"btn-group els-button-group-2\" role=\"group\" aria-label=\"Table Options\">\r\n                <button class=\"btn btn-white  px-1\" style=\"height: 24px;\" (click)=\"insertPageNumber()\">Page\r\n                    No</button>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n                        class=\"mdi mdi-link-variant\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage(editorId)\"><i\r\n                        class=\"mdi mdi-image\"></i></button>\r\n                <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n\r\n            </div>\r\n            <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n                                class=\"mdi mdi-table\"></i></button>\r\n                        <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addRow()\"><i\r\n                                class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n                        <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                            (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n                        <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                            (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n                        <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                            (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n                    </div>\r\n                    <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n                        <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n                            style=\"position: absolute;\">Edit Image</button>\r\n                    </div> -->\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"undo()\">\r\n                    <i class=\"mdi mdi-undo\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"redo()\">\r\n                    <i class=\"mdi mdi-redo\"></i>\r\n                </button>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n                <!-- <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n                                    style=\"position: absolute;\">Edit Image</button> -->\r\n                <button class=\"btn btn-white els-toolbar-button\" (click)=\"clearTextEditor()\">\r\n                    <i class=\"mdi mdi-close-circle\"></i>\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div contenteditable=\"true\" [id]=\"editorId\" class=\"els-border p-3\" #editor\r\n        style=\"position: relative !important; height: 130px; max-width: 100%; overflow: hidden; \"\r\n        [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n        contenteditable=\"true\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n        (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n    </div>\r\n    <table *ngIf=\"parsedTable\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngFor=\"let header of parsedTable.headers\">{{ header }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of parsedTable.rows\">\r\n                <td *ngFor=\"let cell of row\">{{ cell }}</td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>", styles: ["*{font-family:Noto Sans Telugu UI,sans-serif}#editor{min-height:125px;max-height:125px;overflow-y:auto}#editor img{max-width:100%;height:auto}.bubble-toolbar{position:absolute;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026;z-index:1000;display:none}.els-text-editor{box-sizing:border-box}.els-btn-toolbar{width:\"1028px\"}.els-toolbar-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.els-toolbar-button-2{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:100px}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;color:#fff}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:100%;padding:2px 5px 2px 8px;position:relative;width:100%;border:none;background-color:#fff;color:#6c757d}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#353343}.els-border:focus{outline:none}.els-dropdown-item{width:50px!important}.els-toolbar-button.active,.btn-toolbar .btn.active,.btn-toolbar .btn:hover{color:#06c}.dropdown-toggle:after{display:none}.table-container{overflow-x:auto;width:100%}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse;table-layout:fixed}table td,table th{padding:.75rem;vertical-align:top;border:1px solid #dee2e6;word-wrap:break-word}@media (max-width: 576px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-spacing:0}table thead,table tbody,table tr,table th,table td{display:block}table thead tr{position:absolute;top:-9999px;left:-9999px}table tr{margin-bottom:.625rem;border:1px solid #ccc}table td,table th{border:none;border-bottom:1px solid #ddd;position:relative;padding-left:50%;white-space:normal;text-align:left}table td:before,table th:before{position:absolute;top:.75rem;left:.75rem;width:45%;padding-right:.75rem;white-space:nowrap;text-align:left;font-weight:700}}table.resizable{overflow:hidden;resize:both}.btn-group .btn{display:flex;align-items:center;justify-content:center}.btn-group .mdi{font-size:18px}.icon-with-underline{text-decoration:underline}pre{background-color:#f0f0f0;border:1px solid #ccc;border-radius:5px;overflow-x:auto}code{display:block;white-space:pre-wrap;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;cursor:pointer}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#555}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.pasted-table{border-collapse:collapse;width:100%}.pasted-table td{border:1px solid black;padding:8px}.pasted-table tr:nth-child(even){background-color:#f2f2f2}.pasted-table tr:hover{background-color:#ddd}.vertical-line{border-left:2px solid #ccc;height:100%;margin:0 auto}.els-text-format{font-weight:800!important;background-color:#2b2936!important;border:2px solid #7D6D6D!important;color:#fff!important}.els-text-format>button{color:#fff!important}.els-text-format>button:hover{background-color:#7d6d6d!important;color:#fff!important}\n"], components: [{ type: i3.SketchComponent, selector: "color-sketch", inputs: ["disableAlpha", "presetColors", "width"] }], directives: [{ type: i4.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i4.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i4.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "titlecase": i5.TitleCasePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElHeaderAndFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'el-header-and-footer', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ElHeaderAndFooterComponent),
+                            multi: true
+                        }], template: "<div class=\"container els-text-editor px-0\">\r\n    <div class=\"btn-toolbar els-btn-toolbar p-2 py-2 mb-0\" role=\"toolbar\" [id]=\"editorId+'toolbar'\"\r\n        aria-label=\"Toolbar with button groups\">\r\n        <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Header Options\">\r\n            <!-- <div class=\"dropdown\">\r\n                <select class=\"els-form-select \" style=\" font-weight: 700 !important; color: #fff; width: 150px; border: 2px solid #7D6D6D !important;\" (change)=\"onFormatChange($event)\">\r\n                    <option [value]=\"'<h1>'\">Heading 1</option>\r\n                    <option [value]=\"'<h2>'\">Heading 2</option>\r\n                    <option [value]=\"'<h3>'\">Heading 3</option>\r\n                    <option [value]=\"'<h4>'\">Heading 4</option>\r\n                    <option [value]=\"'<h5>'\">Heading 5</option>\r\n                    <option [value]=\"'<h6>'\">Heading 6</option>\r\n                    <option selected [value]=\"'<p>'\">Normal</option>\r\n                </select>\r\n            </div> -->\r\n            <div ngbDropdown class=\"dropdown\">\r\n                <button class=\"btn btn-sm els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n                 [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\"\r\n                    id=\"headerDropdown\" ngbDropdownToggle>\r\n                    <span style=\"width: 85px; font-weight: 700 !important;\">{{selectedFormatBlock | titlecase}}</span>\r\n                    <i class=\"mdi mdi-chevron-down \"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\">\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h1>')\" [style.color]=\"themeModeClr()\">\r\n                        <h1>Heading 1</h1>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h2>')\" [style.color]=\"themeModeClr()\">\r\n                        <h2>Heading 2</h2>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h3>')\" [style.color]=\"themeModeClr()\">\r\n                        <h3>Heading 3</h3>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h4>')\" [style.color]=\"themeModeClr()\">\r\n                        <h4>Heading 4</h4>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h5>')\" [style.color]=\"themeModeClr()\">\r\n                        <h5>Heading 5</h5>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<h6>')\" [style.color]=\"themeModeClr()\">\r\n                        <h6>Heading 6</h6>\r\n                    </button>\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" (click)=\"onFormatChange('<p>')\" [style.color]=\"themeModeClr()\">\r\n                        <p>Normal</p>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"btn-group els-button-group\" role=\"group\" aria-label=\"Font Options\">\r\n            <div ngbDropdown class=\"dropdown\">\r\n                <button class=\"btn btn-sm els-form-select border els-toolbar-dropdown-button dropdown-toggle text-start\"\r\n                    id=\"headerDropdown\"  [style.border]=\"themeMode()\" [style.color]=\"themeModeClr()\" ngbDropdownToggle>\r\n                    <span style=\"width: 85px; font-weight: 700 !important;\" class=\"text-truncate\">{{selectedFont |\r\n                        titlecase}}</span>\r\n                    <i class=\"mdi mdi-chevron-down \"></i>\r\n                </button>\r\n                <div ngbDropdownMenu aria-labelledby=\"headerDropdown\" class=\"els-text-format\">\r\n                    <button class=\"dropdown-item pb-0\" type=\"button\" *ngFor=\"let font of fonts\"\r\n                        (click)=\"changeFont(font)\">\r\n                        <span>{{ font }}</span>\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"border py-0\" [style.border]=\"themeMode()\" style=\"height: fit-content;\">\r\n            <div class=\"btn-group els-button-group mr-2 \" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-sm els-toolbar-button\" [class.active]=\"isBoldActive\"\r\n                    (click)=\"format('bold', editorId)\">\r\n                    <i class=\"mdi mdi-format-bold\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isItalicActive\"\r\n                    (click)=\"format('italic', editorId)\">\r\n                    <i class=\"mdi mdi-format-italic\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isUnderlineActive\"\r\n                    (click)=\"format('underline', editorId)\">\r\n                    <i class=\"mdi mdi-format-underline\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isStrikethroughActive\"\r\n                    (click)=\"format('strikethrough', editorId)\">\r\n                    <i class=\"mdi mdi-format-strikethrough-variant\"></i>\r\n                </button>\r\n                <div class=\"btn-group\" role=\"group\" aria-label=\"Text Color\">\r\n                    <!-- <input type=\"color\" id=\"textColorPicker\"\r\n                                style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                                (change)=\"setTextColor($event)\">\r\n                            <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"position: relative;\"\r\n                                (click)=\"openColorPicker('textColorPicker')\">\r\n                                <i class=\"mdi mdi-format-color-text icon-with-underline\" [style.color]=\"selectedTextColor\"></i>\r\n                            </button> -->\r\n                    <div ngbDropdown class=\"ql-align\">\r\n                        <button type=\"button\"\r\n                            class=\"btn btn-outline-primary els-toolbar-button arrow-none text-secondary border-none p-0\"\r\n                            id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                            <i class=\"mdi mdi-format-color-text icon-with-underline\"\r\n                                [style.color]=\"selectedTextColor ?? '#000'\"></i>\r\n                        </button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 200px;\">\r\n                            <color-sketch color=\"#fff\" [presetColors]=\"[]\"\r\n                                (onChangeComplete)=\"setTextColor($event, editorId)\"></color-sketch>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"btn-group\" role=\"group\" aria-label=\"Background Color\" style=\"position: relative;\">\r\n                    <!-- <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [style.color]=\"backgroundColor\"\r\n                                (click)=\"openColorPicker('bgColorPicker')\">\r\n                                <i class=\"mdi mdi-alpha-a-box\"></i>\r\n                            </button>\r\n                            <input type=\"color\" id=\"bgColorPicker\"\r\n                                style=\"position: absolute; top: 100%; left: 0; z-index: 100; opacity: 0;\"\r\n                                (change)=\"setBackgroundColor($event)\"> -->\r\n                    <div ngbDropdown class=\"ql-align\">\r\n                        <button type=\"button\"\r\n                            class=\"btn btn-outline-primary els-toolbar-button arrow-none text-secondary border-none p-0\"\r\n                            id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                            <i class=\"mdi mdi-alpha-a-box\" [style.color]=\"backgroundColor ?? '#000'\"></i>\r\n                        </button>\r\n                        <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 200px;\">\r\n                            <color-sketch color=\"#fff\" [presetColors]=\"[]\"\r\n                                (onChangeComplete)=\"setBackgroundColor($event, editorId)\"></color-sketch>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"format('insertOrderedList', editorId)\"><i\r\n                        class=\"mdi mdi-format-list-numbered\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                    (click)=\"format('insertUnorderedList', editorId)\"><i\r\n                        class=\"mdi mdi-format-list-bulleted\"></i></button>\r\n                <div ngbDropdown class=\"ql-align\">\r\n                    <button type=\"button\" class=\"btn btn-white els-toolbar-button arrow-none text-secondary\"\r\n                        id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                        <i class=\"mdi mdi-format-align-left \"></i>\r\n                    </button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 3px;\">\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n                            (click)=\"format('justifyLeft', editorId)\"><i class=\"mdi mdi-format-align-left\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n                            (click)=\"format('justifyCenter', editorId)\"><i\r\n                                class=\"mdi mdi-format-align-center\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n                            (click)=\"format('justifyRight', editorId)\"><i\r\n                                class=\"mdi mdi-format-align-right\"></i></button>\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button\" style=\"color: #7A7982;\"\r\n                            (click)=\"format('justifyFull', editorId)\"><i\r\n                                class=\"mdi mdi-format-align-justify\"></i></button>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSubscriptActive\"\r\n                    (click)=\"format('subscript', editorId)\">\r\n                    <i class=\"mdi mdi-format-subscript\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" [class.active]=\"isSuperscriptActive\"\r\n                    (click)=\"format('superscript', editorId)\">\r\n                    <i class=\"mdi mdi-format-superscript\"></i>\r\n                </button>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n\r\n                <div ngbDropdown class=\"ql-align\">\r\n                    <button type=\"button\" class=\"btn btn-outline-primary arrow-none els-toolbar-button  border-none p-0\"\r\n                        id=\"dropdownBasic1\" aria-expanded=\"false\" ngbDropdownToggle>\r\n                        <i class=\"mdi mdi-format-color-fill\"></i>\r\n                    </button>\r\n                    <div ngbDropdownMenu aria-labelledby=\"dropdownBasic1\" style=\"width: 200px;\">\r\n                        <color-sketch color=\"#fff\"\r\n                            (onChangeComplete)=\"setCanvasBackgroundColor($event, editorId)\"></color-sketch>\r\n                    </div>\r\n                </div>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group-2 mr-3\" role=\"group\" aria-label=\"Table Options\">\r\n                <button class=\"btn btn-white  px-1\" style=\"height: 24px;\" (click)=\"getToday()\">Date</button>\r\n            </div>\r\n            <div class=\"btn-group els-button-group-2\" role=\"group\" aria-label=\"Table Options\">\r\n                <button class=\"btn btn-white  px-1\" style=\"height: 24px;\" (click)=\"insertPageNumber()\">Page\r\n                    No</button>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addLink()\"><i\r\n                        class=\"mdi mdi-link-variant\"></i></button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"insertsImage(editorId)\"><i\r\n                        class=\"mdi mdi-image\"></i></button>\r\n                <input type=\"file\" id=\"imageInput\" style=\"display: none;\" (change)=\"handleImageUpload($event)\">\r\n\r\n            </div>\r\n            <!-- <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n                        <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addTable()\"><i\r\n                                class=\"mdi mdi-table\"></i></button>\r\n                        <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"addRow()\"><i\r\n                                class=\"mdi mdi-table-row-plus-after\"></i></button>\r\n                        <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                            (click)=\"deleteRow()\"><i class=\"mdi mdi-table-row-remove\"></i></button>\r\n                        <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                            (click)=\"addColumn()\"><i class=\"mdi mdi-table-column-plus-after\"></i></button>\r\n                        <button *ngIf=\"isTableSelected\" type=\"button\" class=\"btn btn-white els-toolbar-button\"\r\n                            (click)=\"deleteColumn()\"><i class=\"mdi mdi-table-column-remove\"></i></button>\r\n                    </div>\r\n                    <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n                        <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n                            style=\"position: absolute;\">Edit Image</button>\r\n                    </div> -->\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Text Formatting\">\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"undo()\">\r\n                    <i class=\"mdi mdi-undo\"></i>\r\n                </button>\r\n                <button type=\"button\" class=\"btn btn-white els-toolbar-button\" (click)=\"redo()\">\r\n                    <i class=\"mdi mdi-redo\"></i>\r\n                </button>\r\n\r\n            </div>\r\n            <div class=\"btn-group els-button-group mr-2\" role=\"group\" aria-label=\"Table Options\">\r\n                <!-- <button *ngIf=\"selectedImage\" class=\"btn btn-white els-toolbar-button-2\" (click)=\"editImage()\"\r\n                                    style=\"position: absolute;\">Edit Image</button> -->\r\n                <button class=\"btn btn-white els-toolbar-button\" (click)=\"clearTextEditor()\">\r\n                    <i class=\"mdi mdi-close-circle\"></i>\r\n                </button>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <div contenteditable=\"true\" [id]=\"editorId\" class=\"els-border p-3\" #editor\r\n        style=\"position: relative !important; height: 130px; max-width: 100%; overflow: hidden; \"\r\n        [ngStyle]=\"{'font-family': selectedFont, 'font-size': selectedFontSize + 'px'}\" [style]=\"style\"\r\n        contenteditable=\"true\" (input)=\"onModelChange($event)\" placeholder=\"Insert text here ...\"\r\n        (mouseup)=\"onTextSelect($event)\" [innerHTML]=\"sanitizedContent\" (paste)=\"onPaste($event)\" (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" (click)=\"checkTableSelection($event)\">\r\n    </div>\r\n    <table *ngIf=\"parsedTable\">\r\n        <thead>\r\n            <tr>\r\n                <th *ngFor=\"let header of parsedTable.headers\">{{ header }}</th>\r\n            </tr>\r\n        </thead>\r\n        <tbody>\r\n            <tr *ngFor=\"let row of parsedTable.rows\">\r\n                <td *ngFor=\"let cell of row\">{{ cell }}</td>\r\n            </tr>\r\n        </tbody>\r\n    </table>\r\n</div>", styles: ["*{font-family:Noto Sans Telugu UI,sans-serif}#editor{min-height:125px;max-height:125px;overflow-y:auto}#editor img{max-width:100%;height:auto}.bubble-toolbar{position:absolute;background-color:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 5px #00000026;z-index:1000;display:none}.els-text-editor{box-sizing:border-box}.els-btn-toolbar{width:\"1028px\"}.els-toolbar-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.els-toolbar-button-2{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:100px}.els-toolbar-dropdown-button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;color:#fff}.els-toolbar-dropdown-button:focus{outline:none}.els-form-select{cursor:pointer;display:inline-block;height:100%;padding:2px 5px 2px 8px;position:relative;width:100%;border:none;background-color:#fff;color:#6c757d}.els-button-group{margin-right:15px}.els-form-select:focus{outline:none}.els-border{border:#353343}.els-border:focus{outline:none}.els-dropdown-item{width:50px!important}.els-toolbar-button.active,.btn-toolbar .btn.active,.btn-toolbar .btn:hover{color:#06c}.dropdown-toggle:after{display:none}.table-container{overflow-x:auto;width:100%}table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse;table-layout:fixed}table td,table th{padding:.75rem;vertical-align:top;border:1px solid #dee2e6;word-wrap:break-word}@media (max-width: 576px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;border-spacing:0}table thead,table tbody,table tr,table th,table td{display:block}table thead tr{position:absolute;top:-9999px;left:-9999px}table tr{margin-bottom:.625rem;border:1px solid #ccc}table td,table th{border:none;border-bottom:1px solid #ddd;position:relative;padding-left:50%;white-space:normal;text-align:left}table td:before,table th:before{position:absolute;top:.75rem;left:.75rem;width:45%;padding-right:.75rem;white-space:nowrap;text-align:left;font-weight:700}}table.resizable{overflow:hidden;resize:both}.btn-group .btn{display:flex;align-items:center;justify-content:center}.btn-group .mdi{font-size:18px}.icon-with-underline{text-decoration:underline}pre{background-color:#f0f0f0;border:1px solid #ccc;border-radius:5px;overflow-x:auto}code{display:block;white-space:pre-wrap;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:14px}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;cursor:pointer}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#555}.custom-scrollbar::-webkit-scrollbar-track{background:transparent;border-radius:10px}.pasted-table{border-collapse:collapse;width:100%}.pasted-table td{border:1px solid black;padding:8px}.pasted-table tr:nth-child(even){background-color:#f2f2f2}.pasted-table tr:hover{background-color:#ddd}.vertical-line{border-left:2px solid #ccc;height:100%;margin:0 auto}.els-text-format{font-weight:800!important;background-color:#2b2936!important;border:2px solid #7D6D6D!important;color:#fff!important}.els-text-format>button{color:#fff!important}.els-text-format>button:hover{background-color:#7d6d6d!important;color:#fff!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Router }, { type: i1.ActivatedRoute }, { type: i0.Renderer2 }, { type: i2.DomSanitizer }]; }, propDecorators: { dropdown: [{
+                type: ViewChild,
+                args: [NgbDropdown, { static: true }]
+            }], editorId: [{
+                type: Input
+            }], editorText: [{
+                type: Input
+            }], editorFrom: [{
+                type: Input
+            }], clear: [{
+                type: Input
+            }], editorAction: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], toolbarMode: [{
+                type: Input
+            }], editorTextChange: [{
+                type: Output
+            }], editorActionResponse: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }], editorTextClear: [{
+                type: Output
+            }] } });
+
+class ElHeaderAndFooterModule {
+}
+ElHeaderAndFooterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElHeaderAndFooterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElHeaderAndFooterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElHeaderAndFooterModule, declarations: [ElHeaderAndFooterComponent], imports: [CommonModule,
+        NgxColorsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgbDropdownModule,
+        ColorSketchModule,
+        ColorPickerModule], exports: [ElHeaderAndFooterComponent] });
+ElHeaderAndFooterModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElHeaderAndFooterModule, imports: [[
+            CommonModule,
+            NgxColorsModule,
+            FormsModule,
+            ReactiveFormsModule,
+            NgbDropdownModule,
+            ColorSketchModule,
+            ColorPickerModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: ElHeaderAndFooterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ElHeaderAndFooterComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        NgxColorsModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgbDropdownModule,
+                        ColorSketchModule,
+                        ColorPickerModule
+                    ],
+                    exports: [
+                        ElHeaderAndFooterComponent
+                    ]
+                }]
+        }] });
+
+/*
+ * Public API Surface of el-header-and-footer
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ElHeaderAndFooterComponent, ElHeaderAndFooterModule, ElHeaderAndFooterService };
+//# sourceMappingURL=el-header-and-footer.mjs.map