@kolkov/angular-editor 3.1.0 → 3.1.2

package/fesm2022/kolkov-angular-editor.mjs

@@ -1,1564 +1,1541 @@
-import * as i0 from '@angular/core';
-import { inject, DOCUMENT, Injectable, EventEmitter, ElementRef, Renderer2, forwardRef, HostListener, ViewChild, Output, HostBinding, Input, Component, ChangeDetectorRef, SecurityContext, ContentChild, Attribute, ViewEncapsulation, NgModule } from '@angular/core';
-import { HttpClient, HttpResponse } from '@angular/common/http';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DomSanitizer } from '@angular/platform-browser';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-
-class AngularEditorService {
-    savedSelection = null;
-    selectedText = '';
-    uploadUrl = '';
-    uploadWithCredentials = false;
-    http = inject(HttpClient);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    doc = inject(DOCUMENT);
-    /**
-     * Executed command from editor header buttons exclude toggleEditorMode
-     * @param command string from triggerCommand
-     * @param value
-     */
-    executeCommand(command, value) {
-        const commands = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre'];
-        if (commands.includes(command)) {
-            this.doc.execCommand('formatBlock', false, command);
-            return;
-        }
-        this.doc.execCommand(command, false, value);
-    }
-    /**
-     * Create URL link
-     * @param url string from UI prompt
-     */
-    createLink(url) {
-        if (!url.includes('http')) {
-            this.doc.execCommand('createlink', false, url);
-        }
-        else {
-            const newUrl = '<a href="' + url + '" target="_blank">' + this.selectedText + '</a>';
-            this.insertHtml(newUrl);
-        }
-    }
-    /**
-     * insert color either font or background
-     *
-     * @param color color to be inserted
-     * @param where where the color has to be inserted either text/background
-     */
-    insertColor(color, where) {
-        const restored = this.restoreSelection();
-        if (restored) {
-            if (where === 'textColor') {
-                this.doc.execCommand('foreColor', false, color);
-            }
-            else {
-                this.doc.execCommand('hiliteColor', false, color);
-            }
-        }
-    }
-    /**
-     * Set font name
-     * @param fontName string
-     */
-    setFontName(fontName) {
-        this.doc.execCommand('fontName', false, fontName);
-    }
-    /**
-     * Set font size
-     * @param fontSize string
-     */
-    setFontSize(fontSize) {
-        this.doc.execCommand('fontSize', false, fontSize);
-    }
-    /**
-     * Create raw HTML
-     * @param html HTML string
-     */
-    insertHtml(html) {
-        const isHTMLInserted = this.doc.execCommand('insertHTML', false, html);
-        if (!isHTMLInserted) {
-            throw new Error('Unable to perform the operation');
-        }
-    }
-    /**
-     * save selection when the editor is focussed out
-     */
-    saveSelection = () => {
-        if (this.doc.getSelection) {
-            const sel = this.doc.getSelection();
-            if (sel.getRangeAt && sel.rangeCount) {
-                this.savedSelection = sel.getRangeAt(0);
-                this.selectedText = sel.toString();
-            }
-        }
-        else {
-            this.savedSelection = null;
-        }
-    };
-    /**
-     * restore selection when the editor is focused in
-     *
-     * saved selection when the editor is focused out
-     */
-    restoreSelection() {
-        if (this.savedSelection) {
-            if (this.doc.getSelection) {
-                const sel = this.doc.getSelection();
-                sel.removeAllRanges();
-                sel.addRange(this.savedSelection);
-                return true;
-            }
-        }
-        return false;
-    }
-    /**
-     * setTimeout used for execute 'saveSelection' method in next event loop iteration
-     */
-    executeInNextQueueIteration(callbackFn, timeout = 1e2) {
-        setTimeout(callbackFn, timeout);
-    }
-    /** check any selection is made or not */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    checkSelection() {
-        if (!this.savedSelection) {
-            throw new Error('No Selection Made');
-        }
-        const selectedText = this.savedSelection.toString();
-        if (selectedText.length === 0) {
-            throw new Error('No Selection Made');
-        }
-        return true;
-    }
-    /**
-     * Upload file to uploadUrl
-     * @param file The file
-     */
-    uploadImage(file) {
-        const uploadData = new FormData();
-        uploadData.append('file', file, file.name);
-        return this.http.post(this.uploadUrl, uploadData, {
-            reportProgress: true,
-            observe: 'events',
-            withCredentials: this.uploadWithCredentials,
-        });
-    }
-    /**
-     * Insert image with Url
-     * @param imageUrl The imageUrl.
-     */
-    insertImage(imageUrl) {
-        this.doc.execCommand('insertImage', false, imageUrl);
-    }
-    setDefaultParagraphSeparator(separator) {
-        this.doc.execCommand('defaultParagraphSeparator', false, separator);
-    }
-    /**
-     * Apply custom class to selection with enterprise-level HTML structure preservation.
-     * Supports three modes:
-     * - 'inline': Wrap selection in a single element (legacy behavior)
-     * - 'block': Apply class to each block element in selection
-     * - 'auto': Smart detection based on selection span (default)
-     *
-     * @param customClass The custom class configuration
-     */
-    createCustomClass(customClass) {
-        if (!customClass || !this.savedSelection) {
-            return;
-        }
-        const mode = customClass.mode || 'auto';
-        const range = this.savedSelection;
-        // Restore selection before applying
-        this.restoreSelection();
-        if (mode === 'inline') {
-            this.applyClassInline(range, customClass);
-        }
-        else if (mode === 'block') {
-            this.applyClassToBlocks(range, customClass);
-        }
-        else {
-            // Auto mode: detect if selection spans multiple blocks
-            const blocks = this.getBlockElementsInRange(range);
-            if (blocks.length > 1) {
-                this.applyClassToBlocks(range, customClass);
-            }
-            else {
-                this.applyClassInline(range, customClass);
-            }
-        }
-    }
-    /**
-     * Apply class inline by wrapping selection in a single element.
-     * Uses extractContents + insertNode pattern for safety.
-     */
-    applyClassInline(range, customClass) {
-        const tagName = customClass.tag || 'span';
-        try {
-            // Create wrapper element
-            const wrapper = this.doc.createElement(tagName);
-            wrapper.className = customClass.class;
-            // Extract contents and wrap (safer than surroundContents)
-            const contents = range.extractContents();
-            wrapper.appendChild(contents);
-            range.insertNode(wrapper);
-            // Normalize to merge adjacent text nodes
-            if (wrapper.parentNode) {
-                wrapper.parentNode.normalize();
-            }
-            // Update selection to the new wrapper
-            range.selectNodeContents(wrapper);
-            const sel = this.doc.getSelection();
-            sel.removeAllRanges();
-            sel.addRange(range);
-        }
-        catch (e) {
-            // Fallback to legacy method if DOM manipulation fails
-            console.warn('applyClassInline failed, using fallback:', e);
-            this.applyClassInlineFallback(customClass);
-        }
-    }
-    /**
-     * Fallback method for inline class application (legacy behavior).
-     */
-    applyClassInlineFallback(customClass) {
-        const tagName = customClass.tag || 'span';
-        const newTag = '<' + tagName + ' class="' + customClass.class + '">' + this.selectedText + '</' + tagName + '>';
-        this.insertHtml(newTag);
-    }
-    /**
-     * Apply class to each block element in selection.
-     * Preserves HTML structure by adding class to existing elements.
-     */
-    applyClassToBlocks(range, customClass) {
-        const blocks = this.getBlockElementsInRange(range);
-        if (blocks.length === 0) {
-            // No blocks found, fall back to inline
-            this.applyClassInline(range, customClass);
-            return;
-        }
-        // Apply class to each block element
-        blocks.forEach(block => {
-            // Toggle class: remove if present, add if not
-            if (block.classList.contains(customClass.class)) {
-                block.classList.remove(customClass.class);
-            }
-            else {
-                block.classList.add(customClass.class);
-            }
-        });
-        // Trigger change detection by moving cursor
-        const sel = this.doc.getSelection();
-        if (sel && blocks.length > 0) {
-            // Reselect the original range
-            sel.removeAllRanges();
-            sel.addRange(range);
-        }
-    }
-    /**
-     * Get all block-level elements within a range.
-     * Returns elements that are fully or partially selected.
-     */
-    getBlockElementsInRange(range) {
-        const blockTags = [
-            'P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
-            'LI', 'BLOCKQUOTE', 'PRE', 'ADDRESS', 'ARTICLE',
-            'ASIDE', 'FIGCAPTION', 'FIGURE', 'FOOTER', 'HEADER',
-            'MAIN', 'NAV', 'SECTION'
-        ];
-        const blocks = [];
-        const seen = new Set();
-        // Get the common ancestor
-        const container = range.commonAncestorContainer;
-        const root = container.nodeType === Node.ELEMENT_NODE
-            ? container
-            : container.parentElement;
-        if (!root) {
-            return blocks;
-        }
-        // If root itself is a block element and fully contains the range
-        if (blockTags.includes(root.tagName) && this.isNodeFullyInRange(root, range)) {
-            return [root];
-        }
-        // Find all block elements within the range using TreeWalker
-        const walker = this.doc.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
-            acceptNode: (node) => {
-                if (!blockTags.includes(node.tagName)) {
-                    return NodeFilter.FILTER_SKIP;
-                }
-                // Check if node intersects with selection
-                if (range.intersectsNode(node)) {
-                    return NodeFilter.FILTER_ACCEPT;
-                }
-                return NodeFilter.FILTER_SKIP;
-            }
-        });
-        let node;
-        while ((node = walker.nextNode())) {
-            const element = node;
-            // Avoid duplicates and nested blocks
-            if (!seen.has(element) && !this.hasAncestorInSet(element, seen)) {
-                seen.add(element);
-                blocks.push(element);
-            }
-        }
-        // If no blocks found, check if we're inside a block
-        if (blocks.length === 0) {
-            let parent = root;
-            while (parent && parent !== this.doc.body) {
-                if (blockTags.includes(parent.tagName)) {
-                    blocks.push(parent);
-                    break;
-                }
-                parent = parent.parentElement;
-            }
-        }
-        return blocks;
-    }
-    /**
-     * Check if a node is fully contained within a range.
-     */
-    isNodeFullyInRange(node, range) {
-        const nodeRange = this.doc.createRange();
-        nodeRange.selectNodeContents(node);
-        return range.compareBoundaryPoints(Range.START_TO_START, nodeRange) <= 0 &&
-            range.compareBoundaryPoints(Range.END_TO_END, nodeRange) >= 0;
-    }
-    /**
-     * Check if element has an ancestor in the given set.
-     */
-    hasAncestorInSet(element, set) {
-        let parent = element.parentElement;
-        while (parent) {
-            if (set.has(parent)) {
-                return true;
-            }
-            parent = parent.parentElement;
-        }
-        return false;
-    }
-    insertVideo(videoUrl) {
-        if (videoUrl.match('www.youtube.com') || videoUrl.match('youtu.be')) {
-            this.insertYouTubeVideoTag(videoUrl);
-        }
-        if (videoUrl.match('vimeo.com')) {
-            this.insertVimeoVideoTag(videoUrl);
-        }
-    }
-    insertYouTubeVideoTag(videoUrl) {
-        // Support both formats: youtube.com/watch?v=ID and youtu.be/ID
-        let id;
-        if (videoUrl.includes('youtu.be/')) {
-            id = videoUrl.split('youtu.be/')[1].split('?')[0];
-        }
-        else {
-            id = videoUrl.split('v=')[1].split('&')[0];
-        }
-        const imageUrl = `https://img.youtube.com/vi/${id}/0.jpg`;
-        const thumbnail = `
+import * as i0 from "@angular/core";
+import { Attribute, ChangeDetectorRef, Component, ContentChild, DOCUMENT, ElementRef, EventEmitter, HostBinding, HostListener, Injectable, Input, NgModule, Output, Renderer2, SecurityContext, ViewChild, ViewEncapsulation, forwardRef, inject } from "@angular/core";
+import { HttpClient, HttpResponse } from "@angular/common/http";
+import * as i1 from "@angular/forms";
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
+import { DomSanitizer } from "@angular/platform-browser";
+import * as i1$1 from "@angular/common";
+import { CommonModule } from "@angular/common";
+var AngularEditorService = class AngularEditorService {
+	savedSelection = null;
+	selectedText = "";
+	uploadUrl = "";
+	uploadWithCredentials = false;
+	http = inject(HttpClient);
+	doc = inject(DOCUMENT);
+	executeCommand(command, value) {
+		if ([
+			"h1",
+			"h2",
+			"h3",
+			"h4",
+			"h5",
+			"h6",
+			"p",
+			"pre"
+		].includes(command)) {
+			this.doc.execCommand("formatBlock", false, command);
+			return;
+		}
+		this.doc.execCommand(command, false, value);
+	}
+	createLink(url) {
+		if (!url.includes("http")) this.doc.execCommand("createlink", false, url);
+		else {
+			const newUrl = "<a href=\"" + url + "\" target=\"_blank\">" + this.selectedText + "</a>";
+			this.insertHtml(newUrl);
+		}
+	}
+	insertColor(color, where) {
+		if (this.restoreSelection()) {
+			if (where === "textColor") this.doc.execCommand("foreColor", false, color);
+			else this.doc.execCommand("hiliteColor", false, color);
+		}
+	}
+	setFontName(fontName) {
+		this.doc.execCommand("fontName", false, fontName);
+	}
+	setFontSize(fontSize) {
+		this.doc.execCommand("fontSize", false, fontSize);
+	}
+	insertHtml(html) {
+		if (!this.doc.execCommand("insertHTML", false, html)) throw new Error("Unable to perform the operation");
+	}
+	saveSelection = () => {
+		if (this.doc.getSelection) {
+			const sel = this.doc.getSelection();
+			if (sel.getRangeAt && sel.rangeCount) {
+				this.savedSelection = sel.getRangeAt(0);
+				this.selectedText = sel.toString();
+			}
+		} else this.savedSelection = null;
+	};
+	restoreSelection() {
+		if (this.savedSelection) {
+			if (this.doc.getSelection) {
+				const sel = this.doc.getSelection();
+				sel.removeAllRanges();
+				sel.addRange(this.savedSelection);
+				return true;
+			}
+		}
+		return false;
+	}
+	executeInNextQueueIteration(callbackFn, timeout = 100) {
+		setTimeout(callbackFn, timeout);
+	}
+	checkSelection() {
+		if (!this.savedSelection) throw new Error("No Selection Made");
+		if (this.savedSelection.toString().length === 0) throw new Error("No Selection Made");
+		return true;
+	}
+	uploadImage(file) {
+		const uploadData = new FormData();
+		uploadData.append("file", file, file.name);
+		return this.http.post(this.uploadUrl, uploadData, {
+			reportProgress: true,
+			observe: "events",
+			withCredentials: this.uploadWithCredentials
+		});
+	}
+	insertImage(imageUrl) {
+		this.doc.execCommand("insertImage", false, imageUrl);
+	}
+	setDefaultParagraphSeparator(separator) {
+		this.doc.execCommand("defaultParagraphSeparator", false, separator);
+	}
+	createCustomClass(customClass) {
+		if (!customClass || !this.savedSelection) return;
+		const mode = customClass.mode || "auto";
+		const range = this.savedSelection;
+		this.restoreSelection();
+		if (mode === "inline") this.applyClassInline(range, customClass);
+		else if (mode === "block") this.applyClassToBlocks(range, customClass);
+		else if (this.getBlockElementsInRange(range).length > 1) this.applyClassToBlocks(range, customClass);
+		else this.applyClassInline(range, customClass);
+	}
+	applyClassInline(range, customClass) {
+		const tagName = customClass.tag || "span";
+		try {
+			const wrapper = this.doc.createElement(tagName);
+			wrapper.className = customClass.class;
+			const contents = range.extractContents();
+			wrapper.appendChild(contents);
+			range.insertNode(wrapper);
+			if (wrapper.parentNode) wrapper.parentNode.normalize();
+			range.selectNodeContents(wrapper);
+			const sel = this.doc.getSelection();
+			sel.removeAllRanges();
+			sel.addRange(range);
+		} catch (e) {
+			console.warn("applyClassInline failed, using fallback:", e);
+			this.applyClassInlineFallback(customClass);
+		}
+	}
+	applyClassInlineFallback(customClass) {
+		const tagName = customClass.tag || "span";
+		const newTag = "<" + tagName + " class=\"" + customClass.class + "\">" + this.selectedText + "</" + tagName + ">";
+		this.insertHtml(newTag);
+	}
+	applyClassToBlocks(range, customClass) {
+		const blocks = this.getBlockElementsInRange(range);
+		if (blocks.length === 0) {
+			this.applyClassInline(range, customClass);
+			return;
+		}
+		blocks.forEach((block) => {
+			if (block.classList.contains(customClass.class)) block.classList.remove(customClass.class);
+			else block.classList.add(customClass.class);
+		});
+		const sel = this.doc.getSelection();
+		if (sel && blocks.length > 0) {
+			sel.removeAllRanges();
+			sel.addRange(range);
+		}
+	}
+	getBlockElementsInRange(range) {
+		const blockTags = [
+			"P",
+			"DIV",
+			"H1",
+			"H2",
+			"H3",
+			"H4",
+			"H5",
+			"H6",
+			"LI",
+			"BLOCKQUOTE",
+			"PRE",
+			"ADDRESS",
+			"ARTICLE",
+			"ASIDE",
+			"FIGCAPTION",
+			"FIGURE",
+			"FOOTER",
+			"HEADER",
+			"MAIN",
+			"NAV",
+			"SECTION"
+		];
+		const blocks = [];
+		const seen = /* @__PURE__ */ new Set();
+		const container = range.commonAncestorContainer;
+		const root = container.nodeType === Node.ELEMENT_NODE ? container : container.parentElement;
+		if (!root) return blocks;
+		if (blockTags.includes(root.tagName) && this.isNodeFullyInRange(root, range)) return [root];
+		const walker = this.doc.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, { acceptNode: (node) => {
+			if (!blockTags.includes(node.tagName)) return NodeFilter.FILTER_SKIP;
+			if (range.intersectsNode(node)) return NodeFilter.FILTER_ACCEPT;
+			return NodeFilter.FILTER_SKIP;
+		} });
+		let node;
+		while (node = walker.nextNode()) {
+			const element = node;
+			if (!seen.has(element) && !this.hasAncestorInSet(element, seen)) {
+				seen.add(element);
+				blocks.push(element);
+			}
+		}
+		if (blocks.length === 0) {
+			let parent = root;
+			while (parent && parent !== this.doc.body) {
+				if (blockTags.includes(parent.tagName)) {
+					blocks.push(parent);
+					break;
+				}
+				parent = parent.parentElement;
+			}
+		}
+		return blocks;
+	}
+	isNodeFullyInRange(node, range) {
+		const nodeRange = this.doc.createRange();
+		nodeRange.selectNodeContents(node);
+		return range.compareBoundaryPoints(Range.START_TO_START, nodeRange) <= 0 && range.compareBoundaryPoints(Range.END_TO_END, nodeRange) >= 0;
+	}
+	hasAncestorInSet(element, set) {
+		let parent = element.parentElement;
+		while (parent) {
+			if (set.has(parent)) return true;
+			parent = parent.parentElement;
+		}
+		return false;
+	}
+	insertVideo(videoUrl) {
+		if (videoUrl.match("www.youtube.com") || videoUrl.match("youtu.be")) this.insertYouTubeVideoTag(videoUrl);
+		if (videoUrl.match("vimeo.com")) this.insertVimeoVideoTag(videoUrl);
+	}
+	insertYouTubeVideoTag(videoUrl) {
+		let id;
+		if (videoUrl.includes("youtu.be/")) id = videoUrl.split("youtu.be/")[1].split("?")[0];
+		else id = videoUrl.split("v=")[1].split("&")[0];
+		const thumbnail = `
       <div style='position: relative'>
         <a href='${videoUrl}' target='_blank'>
-          <img src="${imageUrl}" alt="click to watch"/>
+          <img src="${`https://img.youtube.com/vi/${id}/0.jpg`}" alt="click to watch"/>
           <img style='position: absolute; left:200px; top:140px'
           src="https://img.icons8.com/color/96/000000/youtube-play.png"/>
         </a>
       </div>`;
-        this.insertHtml(thumbnail);
-    }
-    insertVimeoVideoTag(videoUrl) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const sub = this.http.get(`https://vimeo.com/api/oembed.json?url=${videoUrl}`).subscribe(data => {
-            const imageUrl = data.thumbnail_url_with_play_button;
-            const thumbnail = `<div>
+		this.insertHtml(thumbnail);
+	}
+	insertVimeoVideoTag(videoUrl) {
+		const sub = this.http.get(`https://vimeo.com/api/oembed.json?url=${videoUrl}`).subscribe((data) => {
+			const thumbnail = `<div>
         <a href='${videoUrl}' target='_blank'>
-          <img src="${imageUrl}" alt="${data.title}"/>
+          <img src="${data.thumbnail_url_with_play_button}" alt="${data.title}"/>
         </a>
       </div>`;
-            this.insertHtml(thumbnail);
-            sub.unsubscribe();
-        });
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    nextNode(node) {
-        if (node.hasChildNodes()) {
-            return node.firstChild;
-        }
-        else {
-            while (node && !node.nextSibling) {
-                node = node.parentNode;
-            }
-            if (!node) {
-                return null;
-            }
-            return node.nextSibling;
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    getRangeSelectedNodes(range, includePartiallySelectedContainers) {
-        let node = range.startContainer;
-        const endNode = range.endContainer;
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let rangeNodes = [];
-        // Special case for a range that is contained within a single node
-        if (node === endNode) {
-            rangeNodes = [node];
-        }
-        else {
-            // Iterate nodes until we hit the end container
-            while (node && node !== endNode) {
-                rangeNodes.push(node = this.nextNode(node));
-            }
-            // Add partially selected nodes at the start of the range
-            node = range.startContainer;
-            while (node && node !== range.commonAncestorContainer) {
-                rangeNodes.unshift(node);
-                node = node.parentNode;
-            }
-        }
-        // Add ancestors of the range container, if required
-        if (includePartiallySelectedContainers) {
-            node = range.commonAncestorContainer;
-            while (node) {
-                rangeNodes.push(node);
-                node = node.parentNode;
-            }
-        }
-        return rangeNodes;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    getSelectedNodes() {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const nodes = [];
-        if (this.doc.getSelection) {
-            const sel = this.doc.getSelection();
-            for (let i = 0, len = sel.rangeCount; i < len; ++i) {
-                nodes.push(...this.getRangeSelectedNodes(sel.getRangeAt(i), true));
-            }
-        }
-        return nodes;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    replaceWithOwnChildren(el) {
-        const parent = el.parentNode;
-        while (el.hasChildNodes()) {
-            parent.insertBefore(el.firstChild, el);
-        }
-        parent.removeChild(el);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    removeSelectedElements(tagNames) {
-        const tagNamesArray = tagNames.toLowerCase().split(',');
-        this.getSelectedNodes().forEach((node) => {
-            if (node.nodeType === 1 &&
-                tagNamesArray.indexOf(node.tagName.toLowerCase()) > -1) {
-                // Remove the node and replace it with its children
-                this.replaceWithOwnChildren(node);
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorService, decorators: [{
-            type: Injectable
-        }] });
-
+			this.insertHtml(thumbnail);
+			sub.unsubscribe();
+		});
+	}
+	nextNode(node) {
+		if (node.hasChildNodes()) return node.firstChild;
+		else {
+			while (node && !node.nextSibling) node = node.parentNode;
+			if (!node) return null;
+			return node.nextSibling;
+		}
+	}
+	getRangeSelectedNodes(range, includePartiallySelectedContainers) {
+		let node = range.startContainer;
+		const endNode = range.endContainer;
+		let rangeNodes = [];
+		if (node === endNode) rangeNodes = [node];
+		else {
+			while (node && node !== endNode) rangeNodes.push(node = this.nextNode(node));
+			node = range.startContainer;
+			while (node && node !== range.commonAncestorContainer) {
+				rangeNodes.unshift(node);
+				node = node.parentNode;
+			}
+		}
+		if (includePartiallySelectedContainers) {
+			node = range.commonAncestorContainer;
+			while (node) {
+				rangeNodes.push(node);
+				node = node.parentNode;
+			}
+		}
+		return rangeNodes;
+	}
+	getSelectedNodes() {
+		const nodes = [];
+		if (this.doc.getSelection) {
+			const sel = this.doc.getSelection();
+			for (let i = 0, len = sel.rangeCount; i < len; ++i) nodes.push(...this.getRangeSelectedNodes(sel.getRangeAt(i), true));
+		}
+		return nodes;
+	}
+	replaceWithOwnChildren(el) {
+		const parent = el.parentNode;
+		while (el.hasChildNodes()) parent.insertBefore(el.firstChild, el);
+		parent.removeChild(el);
+	}
+	removeSelectedElements(tagNames) {
+		const tagNamesArray = tagNames.toLowerCase().split(",");
+		this.getSelectedNodes().forEach((node) => {
+			if (node.nodeType === 1 && tagNamesArray.indexOf(node.tagName.toLowerCase()) > -1) this.replaceWithOwnChildren(node);
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AngularEditorService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AngularEditorService
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AngularEditorService,
+	decorators: [{ type: Injectable }]
+});
 const angularEditorConfig = {
-    editable: true,
-    spellcheck: true,
-    height: 'auto',
-    minHeight: '0',
-    maxHeight: 'auto',
-    width: 'auto',
-    minWidth: '0',
-    translate: 'yes',
-    enableToolbar: true,
-    showToolbar: true,
-    placeholder: 'Enter text here...',
-    defaultParagraphSeparator: '',
-    defaultFontName: '',
-    defaultFontSize: '',
-    fonts: [
-        { class: 'arial', name: 'Arial' },
-        { class: 'times-new-roman', name: 'Times New Roman' },
-        { class: 'calibri', name: 'Calibri' },
-        { class: 'comic-sans-ms', name: 'Comic Sans MS' }
-    ],
-    uploadUrl: 'v1/image',
-    uploadWithCredentials: false,
-    sanitize: true,
-    toolbarPosition: 'top',
-    outline: true,
-    /*toolbarHiddenButtons: [
-      ['bold', 'italic', 'underline', 'strikeThrough', 'superscript', 'subscript'],
-      ['heading', 'fontName', 'fontSize', 'color'],
-      ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull', 'indent', 'outdent'],
-      ['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
-      ['paragraph', 'blockquote', 'removeBlockquote', 'horizontalLine', 'orderedList', 'unorderedList'],
-      ['link', 'unlink', 'image', 'video']
-    ]*/
+	editable: true,
+	spellcheck: true,
+	height: "auto",
+	minHeight: "0",
+	maxHeight: "auto",
+	width: "auto",
+	minWidth: "0",
+	translate: "yes",
+	enableToolbar: true,
+	showToolbar: true,
+	placeholder: "Enter text here...",
+	defaultParagraphSeparator: "",
+	defaultFontName: "",
+	defaultFontSize: "",
+	fonts: [
+		{
+			class: "arial",
+			name: "Arial"
+		},
+		{
+			class: "times-new-roman",
+			name: "Times New Roman"
+		},
+		{
+			class: "calibri",
+			name: "Calibri"
+		},
+		{
+			class: "comic-sans-ms",
+			name: "Comic Sans MS"
+		}
+	],
+	uploadUrl: "v1/image",
+	uploadWithCredentials: false,
+	sanitize: true,
+	toolbarPosition: "top",
+	outline: true
 };
-
 function isDefined(value) {
-    return value !== undefined && value !== null;
-}
-
-class AeSelectComponent {
-    options = [];
-    // eslint-disable-next-line @angular-eslint/no-input-rename
-    isHidden = false;
-    selectedOption;
-    disabled = false;
-    optionId = 0;
-    get label() {
-        return this.selectedOption && Object.prototype.hasOwnProperty.call(this.selectedOption, 'label') ? this.selectedOption.label : 'Select';
-    }
-    opened = false;
-    get value() {
-        return this.selectedOption.value;
-    }
-    hidden = 'inline-block';
-    // eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
-    changeEvent = new EventEmitter();
-    labelButton;
-    elRef = inject(ElementRef);
-    r = inject(Renderer2);
-    ngOnInit() {
-        this.selectedOption = this.options[0];
-        if (isDefined(this.isHidden) && this.isHidden) {
-            this.hide();
-        }
-    }
-    hide() {
-        this.hidden = 'none';
-    }
-    optionSelect(option, event) {
-        //console.log(event.button, event.buttons);
-        if (event.buttons !== 1) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this.setValue(option.value);
-        this.onChange(this.selectedOption.value);
-        this.changeEvent.emit(this.selectedOption.value);
-        this.onTouched();
-        this.opened = false;
-    }
-    toggleOpen(event) {
-        // event.stopPropagation();
-        if (this.disabled) {
-            return;
-        }
-        this.opened = !this.opened;
-    }
-    onClick($event) {
-        if (!this.elRef.nativeElement.contains($event.target)) {
-            this.close();
-        }
-    }
-    close() {
-        this.opened = false;
-    }
-    get isOpen() {
-        return this.opened;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    writeValue(value) {
-        if (!value || typeof value !== 'string') {
-            return;
-        }
-        this.setValue(value);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    setValue(value) {
-        let index = 0;
-        const selectedEl = this.options.find((el, i) => {
-            index = i;
-            return el.value === value;
-        });
-        if (selectedEl) {
-            this.selectedOption = selectedEl;
-            this.optionId = index;
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onChange = () => { };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onTouched = () => { };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.labelButton.nativeElement.disabled = isDisabled;
-        const div = this.labelButton.nativeElement;
-        const action = isDisabled ? 'addClass' : 'removeClass';
-        this.r[action](div, 'disabled');
-        this.disabled = isDisabled;
-    }
-    handleKeyDown($event) {
-        if (!this.opened) {
-            return;
-        }
-        // console.log($event.key);
-        // if (KeyCode[$event.key]) {
-        switch ($event.key) {
-            case 'ArrowDown':
-                this._handleArrowDown($event);
-                break;
-            case 'ArrowUp':
-                this._handleArrowUp($event);
-                break;
-            case 'Space':
-                this._handleSpace($event);
-                break;
-            case 'Enter':
-                this._handleEnter($event);
-                break;
-            case 'Tab':
-                this._handleTab($event);
-                break;
-            case 'Escape':
-                this.close();
-                $event.preventDefault();
-                break;
-            case 'Backspace':
-                this._handleBackspace();
-                break;
-        }
-        // } else if ($event.key && $event.key.length === 1) {
-        // this._keyPress$.next($event.key.toLocaleLowerCase());
-        // }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    _handleArrowDown($event) {
-        if (this.optionId < this.options.length - 1) {
-            this.optionId++;
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    _handleArrowUp($event) {
-        if (this.optionId >= 1) {
-            this.optionId--;
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    _handleSpace($event) {
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    _handleEnter($event) {
-        this.optionSelect(this.options[this.optionId], $event);
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    _handleTab($event) {
-    }
-    _handleBackspace() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: AeSelectComponent, isStandalone: false, selector: "ae-select", inputs: { options: "options", isHidden: ["hidden", "isHidden"] }, outputs: { changeEvent: "change" }, host: { listeners: { "document:click": "onClick($event)", "keydown": "handleKeyDown($event)" }, properties: { "style.display": "this.hidden" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AeSelectComponent),
-                multi: true,
-            }
-        ], viewQueries: [{ propertyName: "labelButton", first: true, predicate: ["labelButton"], descendants: true, static: true }], ngImport: i0, template: "<span class=\"ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n  <button [tabIndex]=\"-1\" #labelButton tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n    <svg>\n      <use [attr.href]=\"'assets/ae-icons/icons.svg#sort'\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#sort'\"></use>\n    </svg>\n  </button>\n  <span class=\"ae-picker-options\">\n    @for (item of options; track item.value; let i = $index) {\n      <span tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n            [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n            (mousedown)=\"optionSelect(item, $event)\">\n            {{item.label}}\n      </span>\n    }\n    @if (!options.length) {\n      <span class=\"dropdown-item\">No items for select</span>\n    }\n  </span>\n</span>\n", styles: ["a{cursor:pointer}svg{width:100%;height:100%}.ae-picker{color:var(--ae-picker-color, #444);display:inline-block;float:left;width:100%;position:relative;vertical-align:middle}.ae-picker-label{cursor:pointer;display:inline-block;padding-left:8px;padding-right:10px;position:relative;width:100%;line-height:1.8rem;vertical-align:middle;font-size:85%;text-align:left;background-color:var(--ae-picker-label-color, white);min-width:2rem;float:left;border:1px solid #ddd;border-radius:var(--ae-button-radius, 4px);text-overflow:clip;overflow:hidden;white-space:nowrap;height:2rem}.ae-picker-label:before{content:\"\";position:absolute;right:0;top:0;width:20px;height:100%;background:linear-gradient(to right,var(--ae-picker-label-color, white),var(--ae-picker-label-color, white) 100%)}.ae-picker-label:focus{outline:none}.ae-picker-label:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-picker-label svg{position:absolute;right:0;width:1rem}.ae-picker-label svg:not(:root){overflow:hidden}.ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-picker-options{background-color:var(--ae-picker-option-bg-color, #fff);display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-picker-options .ae-picker-item{cursor:pointer;display:block;padding:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;border:0 solid #ddd}.ae-picker-options .ae-picker-item.selected{color:#06c;background-color:var(--ae-picker-option-active-bg-color, #fff4c2)}.ae-picker-options .ae-picker-item.focused{background-color:var(--ae-picker-option-focused-bg-color, #fbf9b0)}.ae-picker-options .ae-picker-item:hover{background-color:var(--ae-picker-option-hover-bg-color, #fffa98)}.ae-expanded{display:block;margin-top:-1px;z-index:1}.ae-expanded .ae-picker-label{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg .ae-stroke{stroke:#ccc}.ae-expanded .ae-picker-options{display:flex;flex-direction:column;margin-top:-1px;top:100%;z-index:3;border-color:#ccc}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+	return value !== void 0 && value !== null;
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AeSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ae-select', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AeSelectComponent),
-                            multi: true,
-                        }
-                    ], standalone: false, template: "<span class=\"ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n  <button [tabIndex]=\"-1\" #labelButton tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n    <svg>\n      <use [attr.href]=\"'assets/ae-icons/icons.svg#sort'\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#sort'\"></use>\n    </svg>\n  </button>\n  <span class=\"ae-picker-options\">\n    @for (item of options; track item.value; let i = $index) {\n      <span tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n            [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n            (mousedown)=\"optionSelect(item, $event)\">\n            {{item.label}}\n      </span>\n    }\n    @if (!options.length) {\n      <span class=\"dropdown-item\">No items for select</span>\n    }\n  </span>\n</span>\n", styles: ["a{cursor:pointer}svg{width:100%;height:100%}.ae-picker{color:var(--ae-picker-color, #444);display:inline-block;float:left;width:100%;position:relative;vertical-align:middle}.ae-picker-label{cursor:pointer;display:inline-block;padding-left:8px;padding-right:10px;position:relative;width:100%;line-height:1.8rem;vertical-align:middle;font-size:85%;text-align:left;background-color:var(--ae-picker-label-color, white);min-width:2rem;float:left;border:1px solid #ddd;border-radius:var(--ae-button-radius, 4px);text-overflow:clip;overflow:hidden;white-space:nowrap;height:2rem}.ae-picker-label:before{content:\"\";position:absolute;right:0;top:0;width:20px;height:100%;background:linear-gradient(to right,var(--ae-picker-label-color, white),var(--ae-picker-label-color, white) 100%)}.ae-picker-label:focus{outline:none}.ae-picker-label:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-picker-label svg{position:absolute;right:0;width:1rem}.ae-picker-label svg:not(:root){overflow:hidden}.ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-picker-options{background-color:var(--ae-picker-option-bg-color, #fff);display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-picker-options .ae-picker-item{cursor:pointer;display:block;padding:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;border:0 solid #ddd}.ae-picker-options .ae-picker-item.selected{color:#06c;background-color:var(--ae-picker-option-active-bg-color, #fff4c2)}.ae-picker-options .ae-picker-item.focused{background-color:var(--ae-picker-option-focused-bg-color, #fbf9b0)}.ae-picker-options .ae-picker-item:hover{background-color:var(--ae-picker-option-hover-bg-color, #fffa98)}.ae-expanded{display:block;margin-top:-1px;z-index:1}.ae-expanded .ae-picker-label{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg .ae-stroke{stroke:#ccc}.ae-expanded .ae-picker-options{display:flex;flex-direction:column;margin-top:-1px;top:100%;z-index:3;border-color:#ccc}\n"] }]
-        }], propDecorators: { options: [{
-                type: Input
-            }], isHidden: [{
-                type: Input,
-                args: ['hidden']
-            }], hidden: [{
-                type: HostBinding,
-                args: ['style.display']
-            }], changeEvent: [{
-                type: Output,
-                args: ['change']
-            }], labelButton: [{
-                type: ViewChild,
-                args: ['labelButton', { static: true }]
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], handleKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-class AeButtonComponent {
-    iconName = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AeButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: AeButtonComponent, isStandalone: false, selector: "ae-button, button[aeButton]", inputs: { iconName: "iconName" }, host: { properties: { "attr.tabIndex": "-1", "attr.type": "\"button\"" }, classAttribute: "angular-editor-button" }, ngImport: i0, template: "@if (iconName) {\n  <svg>\n    <use [attr.href]=\"'assets/ae-icons/icons.svg#' + iconName\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#' + iconName\"></use>\n  </svg>\n} @else {\n  <ng-content></ng-content>\n}\n", styles: ["a{cursor:pointer}:host.angular-editor-button{background-color:var(--ae-button-bg-color, white);vertical-align:middle;border:var(--ae-button-border, 1px solid #ddd);border-radius:var(--ae-button-radius, 4px);padding:.4rem;float:left;width:2rem;height:2rem}:host.angular-editor-button svg{width:100%;height:100%}:host.angular-editor-button:hover{cursor:pointer;background-color:var(--ae-button-hover-bg-color, #f1f1f1);transition:.2s ease}:host.angular-editor-button:focus,:host.angular-editor-button.focus{outline:0}:host.angular-editor-button:disabled{background-color:var(--ae-button-disabled-bg-color, #f5f5f5);pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label.foreground :after{background:#555}:host.angular-editor-button:disabled>.color-label.background{background:#555}:host.angular-editor-button.active{background:var(--ae-button-active-bg-color, #fffbd3)}:host.angular-editor-button.active:hover{background-color:var(--ae-button-active-hover-bg-color, #fffaad)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AeButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ae-button, button[aeButton]', host: {
-                        'class': 'angular-editor-button',
-                        '[attr.tabIndex]': '-1',
-                        '[attr.type]': '"button"',
-                    }, standalone: false, template: "@if (iconName) {\n  <svg>\n    <use [attr.href]=\"'assets/ae-icons/icons.svg#' + iconName\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#' + iconName\"></use>\n  </svg>\n} @else {\n  <ng-content></ng-content>\n}\n", styles: ["a{cursor:pointer}:host.angular-editor-button{background-color:var(--ae-button-bg-color, white);vertical-align:middle;border:var(--ae-button-border, 1px solid #ddd);border-radius:var(--ae-button-radius, 4px);padding:.4rem;float:left;width:2rem;height:2rem}:host.angular-editor-button svg{width:100%;height:100%}:host.angular-editor-button:hover{cursor:pointer;background-color:var(--ae-button-hover-bg-color, #f1f1f1);transition:.2s ease}:host.angular-editor-button:focus,:host.angular-editor-button.focus{outline:0}:host.angular-editor-button:disabled{background-color:var(--ae-button-disabled-bg-color, #f5f5f5);pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label.foreground :after{background:#555}:host.angular-editor-button:disabled>.color-label.background{background:#555}:host.angular-editor-button.active{background:var(--ae-button-active-bg-color, #fffbd3)}:host.angular-editor-button.active:hover{background-color:var(--ae-button-active-hover-bg-color, #fffaad)}\n"] }]
-        }], propDecorators: { iconName: [{
-                type: Input
-            }] } });
-
-class AeToolbarSetComponent {
-    constructor() {
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AeToolbarSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: AeToolbarSetComponent, isStandalone: false, selector: "ae-toolbar-set, [aeToolbarSet]", host: { classAttribute: "angular-editor-toolbar-set" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["a{cursor:pointer}:host.angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AeToolbarSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ae-toolbar-set, [aeToolbarSet]', host: {
-                        'class': 'angular-editor-toolbar-set'
-                    }, standalone: false, template: "<ng-content></ng-content>\n", styles: ["a{cursor:pointer}:host.angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}\n"] }]
-        }], ctorParameters: () => [] });
-
-class AeToolbarComponent {
-    htmlMode = false;
-    linkSelected = false;
-    block = 'default';
-    fontName = 'Times New Roman';
-    fontSize = '3';
-    foreColour = '';
-    backColor = '';
-    headings = [
-        {
-            label: 'Heading 1',
-            value: 'h1',
-        },
-        {
-            label: 'Heading 2',
-            value: 'h2',
-        },
-        {
-            label: 'Heading 3',
-            value: 'h3',
-        },
-        {
-            label: 'Heading 4',
-            value: 'h4',
-        },
-        {
-            label: 'Heading 5',
-            value: 'h5',
-        },
-        {
-            label: 'Heading 6',
-            value: 'h6',
-        },
-        {
-            label: 'Paragraph',
-            value: 'p',
-        },
-        {
-            label: 'Predefined',
-            value: 'pre'
-        },
-        {
-            label: 'Standard',
-            value: 'div'
-        },
-        {
-            label: 'default',
-            value: 'default'
-        }
-    ];
-    fontSizes = [
-        {
-            label: '1',
-            value: '1',
-        },
-        {
-            label: '2',
-            value: '2',
-        },
-        {
-            label: '3',
-            value: '3',
-        },
-        {
-            label: '4',
-            value: '4',
-        },
-        {
-            label: '5',
-            value: '5',
-        },
-        {
-            label: '6',
-            value: '6',
-        },
-        {
-            label: '7',
-            value: '7',
-        }
-    ];
-    customClassId = '-1';
-    _customClasses = [];
-    customClassList = [{ label: '', value: '' }];
-    tagMap = {
-        BLOCKQUOTE: 'indent',
-        A: 'link'
-    };
-    select = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P', 'PRE', 'DIV'];
-    buttons = ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'justifyLeft', 'justifyCenter',
-        'justifyRight', 'justifyFull', 'indent', 'outdent', 'insertUnorderedList', 'insertOrderedList', 'link'];
-    id = '';
-    uploadUrl = '';
-    upload;
-    showToolbar = false;
-    fonts = [{ label: '', value: '' }];
-    set customClasses(classes) {
-        if (classes) {
-            this._customClasses = classes;
-            this.customClassList = this._customClasses.map((x, i) => ({ label: x.name, value: i.toString() }));
-            this.customClassList.unshift({ label: 'Clear Class', value: '-1' });
-        }
-    }
-    set defaultFontName(value) {
-        if (value) {
-            this.fontName = value;
-        }
-    }
-    set defaultFontSize(value) {
-        if (value) {
-            this.fontSize = value;
-        }
-    }
-    hiddenButtons = [];
-    execute = new EventEmitter();
-    myInputFile;
-    get isLinkButtonDisabled() {
-        return this.htmlMode || !this.editorService.selectedText;
-    }
-    r = inject(Renderer2);
-    editorService = inject(AngularEditorService);
-    er = inject(ElementRef);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    doc = inject(DOCUMENT);
-    /**
-     * Trigger command from editor header buttons
-     * @param command string from toolbar buttons
-     */
-    triggerCommand(command) {
-        this.execute.emit(command);
-    }
-    /**
-     * highlight editor buttons when cursor moved or positioning
-     */
-    triggerButtons() {
-        if (!this.showToolbar) {
-            return;
-        }
-        this.buttons.forEach(e => {
-            const result = this.doc.queryCommandState(e);
-            const elementById = this.doc.getElementById(e + '-' + this.id);
-            if (result) {
-                this.r.addClass(elementById, 'active');
-            }
-            else {
-                this.r.removeClass(elementById, 'active');
-            }
-        });
-    }
-    /**
-     * trigger highlight editor buttons when cursor moved or positioning in block
-     */
-    triggerBlocks(nodes) {
-        if (!this.showToolbar) {
-            return;
-        }
-        this.linkSelected = nodes.findIndex(x => x.nodeName === 'A') > -1;
-        let found = false;
-        this.select.forEach(y => {
-            const node = nodes.find(x => x.nodeName === y);
-            if (node !== undefined && y === node.nodeName) {
-                if (found === false) {
-                    this.block = node.nodeName.toLowerCase();
-                    found = true;
-                }
-            }
-            else if (found === false) {
-                this.block = 'default';
-            }
-        });
-        found = false;
-        if (this._customClasses) {
-            this._customClasses.forEach((y, index) => {
-                const node = nodes.find(x => {
-                    if (x instanceof Element) {
-                        return x.className === y.class;
-                    }
-                    return false;
-                });
-                if (node !== undefined) {
-                    if (found === false) {
-                        this.customClassId = index.toString();
-                        found = true;
-                    }
-                }
-                else if (found === false) {
-                    this.customClassId = '-1';
-                }
-            });
-        }
-        Object.keys(this.tagMap).map(e => {
-            const elementById = this.doc.getElementById(this.tagMap[e] + '-' + this.id);
-            const node = nodes.find(x => x.nodeName === e);
-            if (node !== undefined && e === node.nodeName) {
-                this.r.addClass(elementById, 'active');
-            }
-            else {
-                this.r.removeClass(elementById, 'active');
-            }
-        });
-        this.foreColour = this.doc.queryCommandValue('ForeColor');
-        this.fontSize = this.doc.queryCommandValue('FontSize');
-        this.fontName = this.doc.queryCommandValue('FontName').replace(/"/g, '');
-        this.backColor = this.doc.queryCommandValue('backColor');
-    }
-    /**
-     * insert URL link
-     */
-    insertUrl() {
-        let url = 'https://';
-        const selection = this.editorService.savedSelection;
-        if (selection && selection.commonAncestorContainer.parentElement?.nodeName === 'A') {
-            const parent = selection.commonAncestorContainer.parentElement;
-            // Use getAttribute to preserve relative URLs instead of href which returns absolute URL
-            const href = parent.getAttribute('href');
-            if (href !== '' && href !== null) {
-                url = href;
-            }
-        }
-        const promptUrl = prompt('Insert URL link', url);
-        if (promptUrl && promptUrl !== '' && promptUrl !== 'https://') {
-            this.editorService.createLink(promptUrl);
-        }
-    }
-    /**
-     * insert Video link
-     */
-    insertVideo() {
-        this.execute.emit('');
-        const url = prompt('Insert Video link', `https://`);
-        if (url && url !== '' && url !== `https://`) {
-            this.editorService.insertVideo(url);
-        }
-    }
-    /** insert color */
-    insertColor(color, where) {
-        this.editorService.insertColor(color, where);
-        this.execute.emit('');
-    }
-    /**
-     * set font Name/family
-     * @param foreColor string
-     */
-    setFontName(foreColor) {
-        this.editorService.setFontName(foreColor);
-        this.execute.emit('');
-    }
-    /**
-     * set font Size
-     * @param fontSize string
-     */
-    setFontSize(fontSize) {
-        this.editorService.setFontSize(fontSize);
-        this.execute.emit('');
-    }
-    /**
-     * toggle editor mode (WYSIWYG or SOURCE)
-     * @param m boolean
-     */
-    setEditorMode(m) {
-        const toggleEditorModeButton = this.doc.getElementById('toggleEditorMode' + '-' + this.id);
-        if (m) {
-            this.r.addClass(toggleEditorModeButton, 'active');
-        }
-        else {
-            this.r.removeClass(toggleEditorModeButton, 'active');
-        }
-        this.htmlMode = m;
-    }
-    /**
-     * Upload image when file is selected.
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onFileChanged(event) {
-        const file = event.target.files[0];
-        if (file.type.includes('image/')) {
-            if (this.upload) {
-                this.upload(file).subscribe((response) => {
-                    if (response instanceof HttpResponse) {
-                        this.watchUploadImage(response, event);
-                    }
-                });
-            }
-            else if (this.uploadUrl) {
-                this.editorService.uploadImage(file).subscribe((response) => {
-                    if (response instanceof HttpResponse) {
-                        this.watchUploadImage(response, event);
-                    }
-                });
-            }
-            else {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    const fr = e.currentTarget;
-                    if (fr.result !== null) {
-                        this.editorService.insertImage(fr.result.toString());
-                    }
-                    // Reset input value to allow re-uploading the same file
-                    event.target.value = null;
-                };
-                reader.readAsDataURL(file);
-            }
-        }
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    watchUploadImage(response, event) {
-        const body = response.body;
-        if (body) {
-            const { imageUrl } = body;
-            this.editorService.insertImage(imageUrl);
-        }
-        event.srcElement.value = null;
-    }
-    /**
-     * Set custom class
-     */
-    setCustomClass(classId) {
-        if (classId === '-1') {
-            this.execute.emit('clear');
-        }
-        else {
-            this.editorService.createCustomClass(this._customClasses[+classId]);
-        }
-    }
-    isButtonHidden(name) {
-        if (!name) {
-            return false;
-        }
-        if (!(this.hiddenButtons instanceof Array)) {
-            return false;
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        let result;
-        for (const arr of this.hiddenButtons) {
-            if (arr instanceof Array) {
-                result = arr.find(item => item === name);
-            }
-            if (result) {
-                break;
-            }
-        }
-        return result !== undefined;
-    }
-    focus() {
-        this.execute.emit('focus');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AeToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: AeToolbarComponent, isStandalone: false, selector: "angular-editor-toolbar, ae-toolbar, div[aeToolbar]", inputs: { id: "id", uploadUrl: "uploadUrl", upload: "upload", showToolbar: "showToolbar", fonts: "fonts", customClasses: "customClasses", defaultFontName: "defaultFontName", defaultFontSize: "defaultFontSize", hiddenButtons: "hiddenButtons" }, outputs: { execute: "execute" }, viewQueries: [{ propertyName: "myInputFile", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "@if (showToolbar) {\n  <div class=\"angular-editor-toolbar\">\n    <div aeToolbarSet>\n      <button aeButton title=\"Undo\" iconName=\"undo\" (click)=\"triggerCommand('undo')\" [hidden]=\"isButtonHidden('undo')\">\n      </button>\n      <button aeButton title=\"Redo\" iconName=\"redo\" (click)=\"triggerCommand('redo')\"\n              [hidden]=\"isButtonHidden('redo')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'bold-'+id\" aeButton title=\"Bold\" iconName=\"bold\" (click)=\"triggerCommand('bold')\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('bold')\">\n      </button>\n      <button [id]=\"'italic-'+id\" aeButton iconName=\"italic\" title=\"Italic\" (click)=\"triggerCommand('italic')\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('italic')\">\n      </button>\n      <button [id]=\"'underline-'+id\" aeButton title=\"Underline\" iconName=\"underline\"\n              (click)=\"triggerCommand('underline')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('underline')\">\n      </button>\n      <button [id]=\"'strikeThrough-'+id\" aeButton iconName=\"strikeThrough\" title=\"Strikethrough\"\n              (click)=\"triggerCommand('strikeThrough')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('strikeThrough')\">\n      </button>\n      <button [id]=\"'subscript-'+id\" aeButton title=\"Subscript\" iconName=\"subscript\"\n              (click)=\"triggerCommand('subscript')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('subscript')\">\n      </button>\n      <button [id]=\"'superscript-'+id\" aeButton iconName=\"superscript\" title=\"Superscript\"\n              (click)=\"triggerCommand('superscript')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('superscript')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'justifyLeft-'+id\" aeButton iconName=\"justifyLeft\" title=\"Justify Left\"\n              (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('justifyLeft')\">\n      </button>\n      <button [id]=\"'justifyCenter-'+id\" aeButton iconName=\"justifyCenter\" title=\"Justify Center\"\n              (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('justifyCenter')\">\n      </button>\n      <button [id]=\"'justifyRight-'+id\" aeButton iconName=\"justifyRight\" title=\"Justify Right\"\n              (click)=\"triggerCommand('justifyRight')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('justifyRight')\">\n      </button>\n      <button [id]=\"'justifyFull-'+id\" aeButton iconName=\"justifyFull\" title=\"Justify Full\"\n              (click)=\"triggerCommand('justifyFull')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('justifyFull')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'indent-'+id\" aeButton iconName=\"indent\" title=\"Indent\"\n              (click)=\"triggerCommand('indent')\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('indent')\">\n      </button>\n      <button [id]=\"'outdent-'+id\" aeButton iconName=\"outdent\" title=\"Outdent\"\n              (click)=\"triggerCommand('outdent')\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('outdent')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'insertUnorderedList-'+id\" aeButton iconName=\"unorderedList\" title=\"Unordered List\"\n              (click)=\"triggerCommand('insertUnorderedList')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('insertUnorderedList')\">\n      </button>\n      <button [id]=\"'insertOrderedList-'+id\" aeButton iconName=\"orderedList\" title=\"Ordered List\"\n              (click)=\"triggerCommand('insertOrderedList')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('insertOrderedList')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <ae-select class=\"select-heading\" [options]=\"headings\"\n                 [(ngModel)]=\"block\"\n                 (change)=\"triggerCommand(block)\"\n                 [disabled]=\"htmlMode\"\n                 [hidden]=\"isButtonHidden('heading')\"\n                 tabindex=\"-1\"></ae-select>\n    </div>\n    <div aeToolbarSet>\n      <ae-select class=\"select-font\" [options]=\"fonts\"\n                 [(ngModel)]=\"fontName\"\n                 (change)=\"setFontName(fontName)\"\n                 [disabled]=\"htmlMode\"\n                 [hidden]=\"isButtonHidden('fontName')\"\n                 tabindex=\"-1\"></ae-select>\n    </div>\n    <div aeToolbarSet>\n      <ae-select class=\"select-font-size\" [options]=\"fontSizes\"\n                 [(ngModel)]=\"fontSize\"\n                 (change)=\"setFontSize(fontSize)\"\n                 [disabled]=\"htmlMode\"\n                 [hidden]=\"isButtonHidden('fontSize')\"\n                 tabindex=\"-1\">\n      </ae-select>\n    </div>\n    <div aeToolbarSet>\n      <input\n        style=\"display: none\"\n        type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\"\n        #fgInput>\n      <button [id]=\"'foregroundColorPicker-'+id\" aeButton iconName=\"textColor\"\n              (click)=\"focus(); fgInput.click()\"\n              title=\"Text Color\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('textColor')\">\n      </button>\n      <input\n        style=\"display: none\"\n        type=\"color\" (change)=\"insertColor(bgInput.value, 'backgroundColor')\"\n        #bgInput>\n      <button [id]=\"'backgroundColorPicker-'+id\" aeButton iconName=\"backgroundColor\"\n              (click)=\"focus(); bgInput.click()\"\n              title=\"Background Color\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('backgroundColor')\">\n      </button>\n    </div>\n    @if (_customClasses) {\n      <div aeToolbarSet>\n        <ae-select class=\"select-custom-style\" [options]=\"customClassList\"\n                   [(ngModel)]=\"customClassId\"\n                   (change)=\"setCustomClass(customClassId)\"\n                   [disabled]=\"htmlMode\"\n                   [hidden]=\"isButtonHidden('customClasses')\"\n                   tabindex=\"-1\"></ae-select>\n      </div>\n    }\n    <div aeToolbarSet>\n      <button [id]=\"'link-'+id\" aeButton iconName=\"link\" (click)=\"insertUrl()\"\n              title=\"Insert Link\" [disabled]=\"isLinkButtonDisabled\" [hidden]=\"isButtonHidden('link')\">\n      </button>\n      <button [id]=\"'unlink-'+id\" aeButton iconName=\"unlink\" (click)=\"triggerCommand('unlink')\"\n              title=\"Unlink\" [disabled]=\"htmlMode || !linkSelected\" [hidden]=\"isButtonHidden('unlink')\">\n      </button>\n      <input\n        style=\"display: none\"\n        accept=\"image/*\"\n        type=\"file\" (change)=\"onFileChanged($event)\"\n        #fileInput>\n      <button [id]=\"'insertImage-'+id\" aeButton iconName=\"image\" (click)=\"focus(); fileInput.click()\"\n              title=\"Insert Image\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('insertImage')\">\n      </button>\n      <button [id]=\"'insertVideo-'+id\" aeButton iconName=\"video\"\n              (click)=\"insertVideo()\" title=\"Insert Video\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('insertVideo')\">\n      </button>\n      <button [id]=\"'insertHorizontalRule-'+id\" aeButton iconName=\"horizontalLine\" title=\"Horizontal Line\"\n              (click)=\"triggerCommand('insertHorizontalRule')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('insertHorizontalRule')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'clearFormatting-'+id\" aeButton iconName=\"removeFormat\" title=\"Clear Formatting\"\n              class=\"angular-editor-button\"\n              (click)=\"triggerCommand('removeFormat')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('removeFormat')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'toggleEditorMode-'+id\" aeButton iconName=\"htmlCode\" title=\"HTML Code\"\n              (click)=\"triggerCommand('toggleEditorMode')\" [hidden]=\"isButtonHidden('toggleEditorMode')\">\n      </button>\n    </div>\n    <ng-content></ng-content>\n  </div>\n}\n", styles: ["a{cursor:pointer}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:var(--ae-toolbar-bg-color, #f5f5f5);font-size:.8rem;padding:var(--ae-toolbar-padding, .2rem);border:var(--ae-toolbar-border-radius, 1px solid #ddd);display:flex;flex-wrap:wrap;gap:4px}.select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-heading option{border:1px solid;background-color:#fff}}.select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font option{border:1px solid;background-color:#fff}}.select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font-size option{border:1px solid;background-color:#fff}.select-font-size .size1{font-size:10px}.select-font-size .size2{font-size:12px}.select-font-size .size3{font-size:14px}.select-font-size .size4{font-size:16px}.select-font-size .size5{font-size:18px}.select-font-size .size6{font-size:20px}.select-font-size .size7{font-size:22px}}.select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-custom-style option{border:1px solid;background-color:#fff}}.select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.color-label{position:relative;cursor:pointer}.background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}.default{font-size:16px}h1{font-size:24px}h2{font-size:20px}h3{font-size:16px}h4{font-size:15px}h5{font-size:14px}h6{font-size:13px}div,pre{font-size:12px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AeSelectComponent, selector: "ae-select", inputs: ["options", "hidden"], outputs: ["change"] }, { kind: "component", type: AeButtonComponent, selector: "ae-button, button[aeButton]", inputs: ["iconName"] }, { kind: "component", type: AeToolbarSetComponent, selector: "ae-toolbar-set, [aeToolbarSet]" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AeToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'angular-editor-toolbar, ae-toolbar, div[aeToolbar]', standalone: false, template: "@if (showToolbar) {\n  <div class=\"angular-editor-toolbar\">\n    <div aeToolbarSet>\n      <button aeButton title=\"Undo\" iconName=\"undo\" (click)=\"triggerCommand('undo')\" [hidden]=\"isButtonHidden('undo')\">\n      </button>\n      <button aeButton title=\"Redo\" iconName=\"redo\" (click)=\"triggerCommand('redo')\"\n              [hidden]=\"isButtonHidden('redo')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'bold-'+id\" aeButton title=\"Bold\" iconName=\"bold\" (click)=\"triggerCommand('bold')\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('bold')\">\n      </button>\n      <button [id]=\"'italic-'+id\" aeButton iconName=\"italic\" title=\"Italic\" (click)=\"triggerCommand('italic')\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('italic')\">\n      </button>\n      <button [id]=\"'underline-'+id\" aeButton title=\"Underline\" iconName=\"underline\"\n              (click)=\"triggerCommand('underline')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('underline')\">\n      </button>\n      <button [id]=\"'strikeThrough-'+id\" aeButton iconName=\"strikeThrough\" title=\"Strikethrough\"\n              (click)=\"triggerCommand('strikeThrough')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('strikeThrough')\">\n      </button>\n      <button [id]=\"'subscript-'+id\" aeButton title=\"Subscript\" iconName=\"subscript\"\n              (click)=\"triggerCommand('subscript')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('subscript')\">\n      </button>\n      <button [id]=\"'superscript-'+id\" aeButton iconName=\"superscript\" title=\"Superscript\"\n              (click)=\"triggerCommand('superscript')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('superscript')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'justifyLeft-'+id\" aeButton iconName=\"justifyLeft\" title=\"Justify Left\"\n              (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('justifyLeft')\">\n      </button>\n      <button [id]=\"'justifyCenter-'+id\" aeButton iconName=\"justifyCenter\" title=\"Justify Center\"\n              (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('justifyCenter')\">\n      </button>\n      <button [id]=\"'justifyRight-'+id\" aeButton iconName=\"justifyRight\" title=\"Justify Right\"\n              (click)=\"triggerCommand('justifyRight')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('justifyRight')\">\n      </button>\n      <button [id]=\"'justifyFull-'+id\" aeButton iconName=\"justifyFull\" title=\"Justify Full\"\n              (click)=\"triggerCommand('justifyFull')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('justifyFull')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'indent-'+id\" aeButton iconName=\"indent\" title=\"Indent\"\n              (click)=\"triggerCommand('indent')\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('indent')\">\n      </button>\n      <button [id]=\"'outdent-'+id\" aeButton iconName=\"outdent\" title=\"Outdent\"\n              (click)=\"triggerCommand('outdent')\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('outdent')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'insertUnorderedList-'+id\" aeButton iconName=\"unorderedList\" title=\"Unordered List\"\n              (click)=\"triggerCommand('insertUnorderedList')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('insertUnorderedList')\">\n      </button>\n      <button [id]=\"'insertOrderedList-'+id\" aeButton iconName=\"orderedList\" title=\"Ordered List\"\n              (click)=\"triggerCommand('insertOrderedList')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('insertOrderedList')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <ae-select class=\"select-heading\" [options]=\"headings\"\n                 [(ngModel)]=\"block\"\n                 (change)=\"triggerCommand(block)\"\n                 [disabled]=\"htmlMode\"\n                 [hidden]=\"isButtonHidden('heading')\"\n                 tabindex=\"-1\"></ae-select>\n    </div>\n    <div aeToolbarSet>\n      <ae-select class=\"select-font\" [options]=\"fonts\"\n                 [(ngModel)]=\"fontName\"\n                 (change)=\"setFontName(fontName)\"\n                 [disabled]=\"htmlMode\"\n                 [hidden]=\"isButtonHidden('fontName')\"\n                 tabindex=\"-1\"></ae-select>\n    </div>\n    <div aeToolbarSet>\n      <ae-select class=\"select-font-size\" [options]=\"fontSizes\"\n                 [(ngModel)]=\"fontSize\"\n                 (change)=\"setFontSize(fontSize)\"\n                 [disabled]=\"htmlMode\"\n                 [hidden]=\"isButtonHidden('fontSize')\"\n                 tabindex=\"-1\">\n      </ae-select>\n    </div>\n    <div aeToolbarSet>\n      <input\n        style=\"display: none\"\n        type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\"\n        #fgInput>\n      <button [id]=\"'foregroundColorPicker-'+id\" aeButton iconName=\"textColor\"\n              (click)=\"focus(); fgInput.click()\"\n              title=\"Text Color\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('textColor')\">\n      </button>\n      <input\n        style=\"display: none\"\n        type=\"color\" (change)=\"insertColor(bgInput.value, 'backgroundColor')\"\n        #bgInput>\n      <button [id]=\"'backgroundColorPicker-'+id\" aeButton iconName=\"backgroundColor\"\n              (click)=\"focus(); bgInput.click()\"\n              title=\"Background Color\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('backgroundColor')\">\n      </button>\n    </div>\n    @if (_customClasses) {\n      <div aeToolbarSet>\n        <ae-select class=\"select-custom-style\" [options]=\"customClassList\"\n                   [(ngModel)]=\"customClassId\"\n                   (change)=\"setCustomClass(customClassId)\"\n                   [disabled]=\"htmlMode\"\n                   [hidden]=\"isButtonHidden('customClasses')\"\n                   tabindex=\"-1\"></ae-select>\n      </div>\n    }\n    <div aeToolbarSet>\n      <button [id]=\"'link-'+id\" aeButton iconName=\"link\" (click)=\"insertUrl()\"\n              title=\"Insert Link\" [disabled]=\"isLinkButtonDisabled\" [hidden]=\"isButtonHidden('link')\">\n      </button>\n      <button [id]=\"'unlink-'+id\" aeButton iconName=\"unlink\" (click)=\"triggerCommand('unlink')\"\n              title=\"Unlink\" [disabled]=\"htmlMode || !linkSelected\" [hidden]=\"isButtonHidden('unlink')\">\n      </button>\n      <input\n        style=\"display: none\"\n        accept=\"image/*\"\n        type=\"file\" (change)=\"onFileChanged($event)\"\n        #fileInput>\n      <button [id]=\"'insertImage-'+id\" aeButton iconName=\"image\" (click)=\"focus(); fileInput.click()\"\n              title=\"Insert Image\"\n              [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('insertImage')\">\n      </button>\n      <button [id]=\"'insertVideo-'+id\" aeButton iconName=\"video\"\n              (click)=\"insertVideo()\" title=\"Insert Video\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('insertVideo')\">\n      </button>\n      <button [id]=\"'insertHorizontalRule-'+id\" aeButton iconName=\"horizontalLine\" title=\"Horizontal Line\"\n              (click)=\"triggerCommand('insertHorizontalRule')\" [disabled]=\"htmlMode\"\n              [hidden]=\"isButtonHidden('insertHorizontalRule')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'clearFormatting-'+id\" aeButton iconName=\"removeFormat\" title=\"Clear Formatting\"\n              class=\"angular-editor-button\"\n              (click)=\"triggerCommand('removeFormat')\" [disabled]=\"htmlMode\" [hidden]=\"isButtonHidden('removeFormat')\">\n      </button>\n    </div>\n    <div aeToolbarSet>\n      <button [id]=\"'toggleEditorMode-'+id\" aeButton iconName=\"htmlCode\" title=\"HTML Code\"\n              (click)=\"triggerCommand('toggleEditorMode')\" [hidden]=\"isButtonHidden('toggleEditorMode')\">\n      </button>\n    </div>\n    <ng-content></ng-content>\n  </div>\n}\n", styles: ["a{cursor:pointer}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:var(--ae-toolbar-bg-color, #f5f5f5);font-size:.8rem;padding:var(--ae-toolbar-padding, .2rem);border:var(--ae-toolbar-border-radius, 1px solid #ddd);display:flex;flex-wrap:wrap;gap:4px}.select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-heading option{border:1px solid;background-color:#fff}}.select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font option{border:1px solid;background-color:#fff}}.select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font-size option{border:1px solid;background-color:#fff}.select-font-size .size1{font-size:10px}.select-font-size .size2{font-size:12px}.select-font-size .size3{font-size:14px}.select-font-size .size4{font-size:16px}.select-font-size .size5{font-size:18px}.select-font-size .size6{font-size:20px}.select-font-size .size7{font-size:22px}}.select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-custom-style option{border:1px solid;background-color:#fff}}.select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.color-label{position:relative;cursor:pointer}.background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}.default{font-size:16px}h1{font-size:24px}h2{font-size:20px}h3{font-size:16px}h4{font-size:15px}h5{font-size:14px}h6{font-size:13px}div,pre{font-size:12px}\n"] }]
-        }], propDecorators: { id: [{
-                type: Input
-            }], uploadUrl: [{
-                type: Input
-            }], upload: [{
-                type: Input
-            }], showToolbar: [{
-                type: Input
-            }], fonts: [{
-                type: Input
-            }], customClasses: [{
-                type: Input
-            }], defaultFontName: [{
-                type: Input
-            }], defaultFontSize: [{
-                type: Input
-            }], hiddenButtons: [{
-                type: Input
-            }], execute: [{
-                type: Output
-            }], myInputFile: [{
-                type: ViewChild,
-                args: ['fileInput', { static: true }]
-            }] } });
-
-class AngularEditorComponent {
-    autoFocus;
-    onChange;
-    onTouched;
-    modeVisual = true;
-    showPlaceholder = false;
-    disabled = false;
-    focused = false;
-    touched = false;
-    changed = false;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    focusInstance;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    blurInstance;
-    id = '';
-    config = angularEditorConfig;
-    placeholder = '';
-    tabIndex = null;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    html = new EventEmitter();
-    textArea;
-    editorWrapper;
-    editorToolbar;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    customButtonsTemplateRef;
-    executeCommandFn = this.executeCommand.bind(this);
-    viewMode = new EventEmitter();
-    /** emits `blur` event when focused out from the textarea */
-    // eslint-disable-next-line @angular-eslint/no-output-native, @angular-eslint/no-output-rename
-    blurEvent = new EventEmitter();
-    /** emits `focus` event when focused in to the textarea */
-    // eslint-disable-next-line @angular-eslint/no-output-rename, @angular-eslint/no-output-native
-    focusEvent = new EventEmitter();
-    tabindex = -1;
-    onFocus() {
-        this.focus();
-    }
-    r = inject(Renderer2);
-    editorService = inject(AngularEditorService);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    doc = inject(DOCUMENT);
-    sanitizer = inject(DomSanitizer);
-    cdRef = inject(ChangeDetectorRef);
-    constructor(defaultTabIndex, 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    autoFocus) {
-        this.autoFocus = autoFocus;
-        const parsedTabIndex = Number(defaultTabIndex);
-        this.tabIndex = (parsedTabIndex || parsedTabIndex === 0) ? parsedTabIndex : null;
-    }
-    ngOnInit() {
-        this.config.toolbarPosition = this.config.toolbarPosition ? this.config.toolbarPosition : angularEditorConfig.toolbarPosition;
-    }
-    ngAfterViewInit() {
-        if (isDefined(this.autoFocus)) {
-            this.focus();
-        }
-    }
-    onPaste(event) {
-        if (this.config.rawPaste) {
-            event.preventDefault();
-            const text = event.clipboardData?.getData('text/plain') ?? '';
-            document.execCommand('insertHTML', false, text);
-            return text;
-        }
-        return undefined;
-    }
-    /**
-     * Executed command from editor header buttons
-     * @param command string from triggerCommand
-     * @param value
-     */
-    executeCommand(command, value) {
-        this.focus();
-        if (command === 'focus') {
-            return;
-        }
-        if (command === 'toggleEditorMode') {
-            this.toggleEditorMode(this.modeVisual);
-        }
-        else if (command !== '') {
-            if (command === 'clear') {
-                this.editorService.removeSelectedElements(this.getCustomTags());
-                this.onContentChange(this.textArea.nativeElement);
-            }
-            else if (command === 'default') {
-                this.editorService.removeSelectedElements('h1,h2,h3,h4,h5,h6,p,pre');
-                this.onContentChange(this.textArea.nativeElement);
-            }
-            else {
-                this.editorService.executeCommand(command, value);
-            }
-            this.exec();
-        }
-    }
-    /**
-     * focus event
-     */
-    onTextAreaFocus(event) {
-        if (this.focused) {
-            event.stopPropagation();
-            return;
-        }
-        this.focused = true;
-        this.focusEvent.emit(event);
-        if (!this.touched || !this.changed) {
-            this.editorService.executeInNextQueueIteration(() => {
-                this.configure();
-                this.touched = true;
-            });
-        }
-    }
-    /**
-     * @description fires when cursor leaves textarea
-     */
-    onTextAreaMouseOut(event) {
-        this.editorService.saveSelection();
-    }
-    /**
-     * blur event
-     */
-    onTextAreaBlur(event) {
-        /**
-         * save selection if focussed out
-         */
-        this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
-        if (typeof this.onTouched === 'function') {
-            (this.onTouched)();
-        }
-        if (event.relatedTarget !== null) {
-            const parent = event.relatedTarget.parentElement;
-            if (!parent?.classList.contains('angular-editor-toolbar-set') && !parent?.classList.contains('ae-picker')) {
-                this.blurEvent.emit(event);
-                this.focused = false;
-            }
-        }
-    }
-    /**
-     *  focus the text area when the editor is focused
-     */
-    focus() {
-        if (this.modeVisual) {
-            this.textArea.nativeElement.focus();
-        }
-        else {
-            const sourceText = this.doc.getElementById('sourceText' + this.id);
-            sourceText.focus();
-            this.focused = true;
-        }
-    }
-    /**
-     * Executed from the contenteditable section while the input property changes
-     * @param element html element from contenteditable
-     */
-    onContentChange(element) {
-        let html = this.modeVisual ? element.innerHTML : element.innerText;
-        if ((!html || html === '<br>')) {
-            html = '';
-        }
-        if (typeof this.onChange === 'function') {
-            const sanitized = (this.config.sanitize || this.config.sanitize === undefined)
-                ? (this.sanitizer.sanitize(SecurityContext.HTML, html) ?? '')
-                : html;
-            (this.onChange)(sanitized);
-            if ((!html) !== this.showPlaceholder) {
-                this.togglePlaceholder(this.showPlaceholder);
-            }
-        }
-        this.changed = true;
-    }
-    /**
-     * Set the function to be called
-     * when the control receives a change event.
-     *
-     * @param fn a function
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    registerOnChange(fn) {
-        this.onChange = (e) => (e === '<br>' ? fn('') : fn(e));
-    }
-    /**
-     * Set the function to be called
-     * when the control receives a touch event.
-     *
-     * @param fn a function
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    /**
-     * Write a new value to the element.
-     *
-     * @param value value to be executed when there is a change in contenteditable
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    writeValue(value) {
-        if ((!value || value === '<br>' || value === '') !== this.showPlaceholder) {
-            this.togglePlaceholder(this.showPlaceholder);
-        }
-        if (value === undefined || value === '' || value === '<br>') {
-            value = null;
-        }
-        this.refreshView(value);
-    }
-    /**
-     * refresh view/HTML of the editor
-     *
-     * @param value html string from the editor
-     */
-    refreshView(value) {
-        const normalizedValue = value === null ? '' : value;
-        // Apply sanitization to prevent XSS when setting innerHTML
-        const sanitizedValue = this.config.sanitize !== false
-            ? this.sanitizer.sanitize(SecurityContext.HTML, normalizedValue)
-            : normalizedValue;
-        this.r.setProperty(this.textArea.nativeElement, 'innerHTML', sanitizedValue);
-        return;
-    }
-    /**
-     * toggles placeholder based on input string
-     *
-     * @param value A HTML string from the editor
-     */
-    togglePlaceholder(value) {
-        if (!value) {
-            this.r.addClass(this.editorWrapper.nativeElement, 'show-placeholder');
-            this.showPlaceholder = true;
-        }
-        else {
-            this.r.removeClass(this.editorWrapper.nativeElement, 'show-placeholder');
-            this.showPlaceholder = false;
-        }
-    }
-    /**
-     * Implements disabled state for this element
-     *
-     * @param isDisabled Disabled flag
-     */
-    setDisabledState(isDisabled) {
-        const div = this.textArea.nativeElement;
-        const action = isDisabled ? 'addClass' : 'removeClass';
-        this.r[action](div, 'disabled');
-        this.disabled = isDisabled;
-    }
-    /**
-     * toggles editor mode based on bToSource bool
-     *
-     * @param bToSource A boolean value from the editor
-     */
-    toggleEditorMode(bToSource) {
-        let oContent;
-        const editableElement = this.textArea.nativeElement;
-        if (bToSource) {
-            oContent = this.r.createText(editableElement.innerHTML);
-            this.r.setProperty(editableElement, 'innerHTML', '');
-            this.r.setProperty(editableElement, 'contentEditable', false);
-            const oPre = this.r.createElement('pre');
-            this.r.setStyle(oPre, 'margin', '0');
-            this.r.setStyle(oPre, 'outline', 'none');
-            const oCode = this.r.createElement('code');
-            this.r.setProperty(oCode, 'id', 'sourceText' + this.id);
-            this.r.setStyle(oCode, 'display', 'block');
-            this.r.setStyle(oCode, 'white-space', 'pre-wrap');
-            this.r.setStyle(oCode, 'word-break', 'keep-all');
-            this.r.setStyle(oCode, 'outline', 'none');
-            this.r.setStyle(oCode, 'margin', '0');
-            this.r.setStyle(oCode, 'background-color', '#fff5b9');
-            this.r.setProperty(oCode, 'contentEditable', true);
-            this.r.appendChild(oCode, oContent);
-            this.focusInstance = this.r.listen(oCode, 'focus', (event) => this.onTextAreaFocus(event));
-            this.blurInstance = this.r.listen(oCode, 'blur', (event) => this.onTextAreaBlur(event));
-            this.r.appendChild(oPre, oCode);
-            this.r.appendChild(editableElement, oPre);
-            // ToDo move to service
-            this.doc.execCommand('defaultParagraphSeparator', false, 'div');
-            this.modeVisual = false;
-            this.viewMode.emit(false);
-            oCode.focus();
-        }
-        else {
-            if (this.doc.querySelectorAll) {
-                // Apply sanitization to prevent XSS when switching from HTML mode
-                if (this.config.sanitize !== false) {
-                    editableElement.innerText = this.sanitizer.sanitize(SecurityContext.HTML, editableElement.innerText);
-                }
-                this.r.setProperty(editableElement, 'innerHTML', editableElement.innerText);
-            }
-            else {
-                oContent = this.doc.createRange();
-                oContent.selectNodeContents(editableElement.firstChild);
-                let oContentString = oContent.toString();
-                // Apply sanitization to prevent XSS when switching from HTML mode
-                if (this.config.sanitize !== false) {
-                    oContentString = this.sanitizer.sanitize(SecurityContext.HTML, oContentString);
-                }
-                this.r.setProperty(editableElement, 'innerHTML', oContentString);
-            }
-            this.r.setProperty(editableElement, 'contentEditable', true);
-            this.modeVisual = true;
-            this.viewMode.emit(true);
-            this.onContentChange(editableElement);
-            editableElement.focus();
-        }
-        this.editorToolbar.setEditorMode(!this.modeVisual);
-    }
-    /**
-     * toggles editor buttons when cursor moved or positioning
-     *
-     * Send a node array from the contentEditable of the editor
-     */
-    exec() {
-        this.editorToolbar.triggerButtons();
-        let userSelection;
-        if (this.doc.getSelection) {
-            userSelection = this.doc.getSelection();
-            this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
-        }
-        let a = userSelection.focusNode;
-        const els = [];
-        while (a && a.id !== 'editor') {
-            els.unshift(a);
-            a = a.parentNode;
-        }
-        this.editorToolbar.triggerBlocks(els);
-    }
-    configure() {
-        this.editorService.uploadUrl = this.config.uploadUrl ?? '';
-        this.editorService.uploadWithCredentials = this.config.uploadWithCredentials ?? false;
-        if (this.config.defaultParagraphSeparator) {
-            this.editorService.setDefaultParagraphSeparator(this.config.defaultParagraphSeparator);
-        }
-        if (this.config.defaultFontName) {
-            this.editorService.setFontName(this.config.defaultFontName);
-        }
-        if (this.config.defaultFontSize) {
-            this.editorService.setFontSize(this.config.defaultFontSize);
-        }
-    }
-    getFonts() {
-        const fonts = this.config.fonts ? this.config.fonts : (angularEditorConfig.fonts ?? []);
-        return fonts.map(x => {
-            return { label: x.name, value: x.name };
-        });
-    }
-    getCustomTags() {
-        const tags = ['span'];
-        (this.config.customClasses ?? []).forEach(x => {
-            if (x.tag !== undefined) {
-                if (!tags.includes(x.tag)) {
-                    tags.push(x.tag);
-                }
-            }
-        });
-        return tags.join(',');
-    }
-    ngOnDestroy() {
-        if (this.blurInstance) {
-            this.blurInstance();
-        }
-        if (this.focusInstance) {
-            this.focusInstance();
-        }
-    }
-    filterStyles(html) {
-        html = html.replace('position: fixed;', '');
-        return html;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorComponent, deps: [{ token: 'tabindex', attribute: true }, { token: 'autofocus', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: AngularEditorComponent, isStandalone: false, selector: "angular-editor", inputs: { id: "id", config: "config", placeholder: "placeholder", tabIndex: "tabIndex" }, outputs: { html: "html", viewMode: "viewMode", blurEvent: "blur", focusEvent: "focus" }, host: { listeners: { "focus": "onFocus()" }, properties: { "attr.tabindex": "this.tabindex" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => AngularEditorComponent),
-                multi: true
-            },
-            AngularEditorService
-        ], queries: [{ propertyName: "customButtonsTemplateRef", first: true, predicate: ["customButtons"], descendants: true }], viewQueries: [{ propertyName: "textArea", first: true, predicate: ["editor"], descendants: true, static: true }, { propertyName: "editorWrapper", first: true, predicate: ["editorWrapper"], descendants: true, static: true }, { propertyName: "editorToolbar", first: true, predicate: ["editorToolbar"], descendants: true }], ngImport: i0, template: "<div\n  class=\"angular-editor\"\n  #angularEditor\n  [style.width]=\"config.width\"\n  [style.minWidth]=\"config.minWidth\"\n  [ngClass]=\"{\n     'bottom': config.toolbarPosition === 'bottom'\n     }\"\n>\n  <angular-editor-toolbar\n    #editorToolbar\n    [id]=\"id\"\n    [uploadUrl]=\"config.uploadUrl || ''\"\n    [upload]=\"$any(config.upload)\"\n    [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n    [fonts]=\"getFonts()\"\n    [customClasses]=\"config.customClasses || []\"\n    [defaultFontName]=\"config.defaultFontName || ''\"\n    [defaultFontSize]=\"config.defaultFontSize || ''\"\n    [hiddenButtons]=\"config.toolbarHiddenButtons || []\"\n    (execute)=\"executeCommand($event)\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"customButtonsTemplateRef\"\n      [ngTemplateOutletContext]=\"{ executeCommandFn: this.executeCommandFn}\"\n    >\n    </ng-container>\n  </angular-editor-toolbar>\n\n  <div\n    class=\"angular-editor-wrapper\"\n    #editorWrapper\n  >\n    <div\n      #editor\n      class=\"angular-editor-textarea\"\n      [attr.contenteditable]=\"config.editable\"\n      [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n      [attr.translate]=\"config.translate\"\n      [attr.spellcheck]=\"config.spellcheck\"\n      [attr.dir]=\"config.textDirection\"\n      [style.height]=\"config.height\"\n      [style.minHeight]=\"config.minHeight\"\n      [style.maxHeight]=\"config.maxHeight\"\n      [style.outline]=\"config.outline === false ? 'none': undefined\"\n      (input)=\"onContentChange($any($event.target))\"\n      (focus)=\"onTextAreaFocus($event)\"\n      (blur)=\"onTextAreaBlur($event)\"\n      (click)=\"exec()\"\n      (keyup)=\"exec()\"\n      (mouseout)=\"onTextAreaMouseOut($event)\"\n      (paste)=\"onPaste($event)\"\n    >\n    </div>\n    <span class=\"angular-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n  </div>\n</div>\n", styles: ["a{cursor:pointer}.angular-editor{display:flex;flex-direction:column;gap:var(--ae-gap, 5px)}.angular-editor.bottom{flex-direction:column-reverse}.angular-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);color:#868e96;opacity:1}.angular-editor .angular-editor-wrapper{position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:150px;overflow:auto;resize:vertical}.angular-editor .angular-editor-wrapper .angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:5rem;padding:.5rem .8rem 1rem;border-radius:var(--ae-text-area-border-radius, .3rem);border:var(--ae-text-area-border, 1px solid #ddd);background-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea:focus,.angular-editor .angular-editor-wrapper .angular-editor-textarea.focus{outline:var(--ae-focus-outline-color, -webkit-focus-ring-color auto 1px)}.angular-editor .angular-editor-wrapper .angular-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.angular-editor .angular-editor-wrapper ::ng-deep p{margin-bottom:0}.angular-editor .angular-editor-wrapper .angular-editor-placeholder{display:none;position:absolute;top:0;padding:.6rem .8rem 1rem .9rem;color:#6c757d;opacity:.75}.angular-editor .angular-editor-wrapper.show-placeholder .angular-editor-placeholder{display:block}.angular-editor .angular-editor-wrapper.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AeToolbarComponent, selector: "angular-editor-toolbar, ae-toolbar, div[aeToolbar]", inputs: ["id", "uploadUrl", "upload", "showToolbar", "fonts", "customClasses", "defaultFontName", "defaultFontSize", "hiddenButtons"], outputs: ["execute"] }], encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'angular-editor', encapsulation: ViewEncapsulation.None, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => AngularEditorComponent),
-                            multi: true
-                        },
-                        AngularEditorService
-                    ], standalone: false, template: "<div\n  class=\"angular-editor\"\n  #angularEditor\n  [style.width]=\"config.width\"\n  [style.minWidth]=\"config.minWidth\"\n  [ngClass]=\"{\n     'bottom': config.toolbarPosition === 'bottom'\n     }\"\n>\n  <angular-editor-toolbar\n    #editorToolbar\n    [id]=\"id\"\n    [uploadUrl]=\"config.uploadUrl || ''\"\n    [upload]=\"$any(config.upload)\"\n    [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n    [fonts]=\"getFonts()\"\n    [customClasses]=\"config.customClasses || []\"\n    [defaultFontName]=\"config.defaultFontName || ''\"\n    [defaultFontSize]=\"config.defaultFontSize || ''\"\n    [hiddenButtons]=\"config.toolbarHiddenButtons || []\"\n    (execute)=\"executeCommand($event)\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"customButtonsTemplateRef\"\n      [ngTemplateOutletContext]=\"{ executeCommandFn: this.executeCommandFn}\"\n    >\n    </ng-container>\n  </angular-editor-toolbar>\n\n  <div\n    class=\"angular-editor-wrapper\"\n    #editorWrapper\n  >\n    <div\n      #editor\n      class=\"angular-editor-textarea\"\n      [attr.contenteditable]=\"config.editable\"\n      [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n      [attr.translate]=\"config.translate\"\n      [attr.spellcheck]=\"config.spellcheck\"\n      [attr.dir]=\"config.textDirection\"\n      [style.height]=\"config.height\"\n      [style.minHeight]=\"config.minHeight\"\n      [style.maxHeight]=\"config.maxHeight\"\n      [style.outline]=\"config.outline === false ? 'none': undefined\"\n      (input)=\"onContentChange($any($event.target))\"\n      (focus)=\"onTextAreaFocus($event)\"\n      (blur)=\"onTextAreaBlur($event)\"\n      (click)=\"exec()\"\n      (keyup)=\"exec()\"\n      (mouseout)=\"onTextAreaMouseOut($event)\"\n      (paste)=\"onPaste($event)\"\n    >\n    </div>\n    <span class=\"angular-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n  </div>\n</div>\n", styles: ["a{cursor:pointer}.angular-editor{display:flex;flex-direction:column;gap:var(--ae-gap, 5px)}.angular-editor.bottom{flex-direction:column-reverse}.angular-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);color:#868e96;opacity:1}.angular-editor .angular-editor-wrapper{position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:150px;overflow:auto;resize:vertical}.angular-editor .angular-editor-wrapper .angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:5rem;padding:.5rem .8rem 1rem;border-radius:var(--ae-text-area-border-radius, .3rem);border:var(--ae-text-area-border, 1px solid #ddd);background-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea:focus,.angular-editor .angular-editor-wrapper .angular-editor-textarea.focus{outline:var(--ae-focus-outline-color, -webkit-focus-ring-color auto 1px)}.angular-editor .angular-editor-wrapper .angular-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.angular-editor .angular-editor-wrapper ::ng-deep p{margin-bottom:0}.angular-editor .angular-editor-wrapper .angular-editor-placeholder{display:none;position:absolute;top:0;padding:.6rem .8rem 1rem .9rem;color:#6c757d;opacity:.75}.angular-editor .angular-editor-wrapper.show-placeholder .angular-editor-placeholder{display:block}.angular-editor .angular-editor-wrapper.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['tabindex']
-                }] }, { type: undefined, decorators: [{
-                    type: Attribute,
-                    args: ['autofocus']
-                }] }], propDecorators: { id: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], tabIndex: [{
-                type: Input
-            }], html: [{
-                type: Output
-            }], textArea: [{
-                type: ViewChild,
-                args: ['editor', { static: true }]
-            }], editorWrapper: [{
-                type: ViewChild,
-                args: ['editorWrapper', { static: true }]
-            }], editorToolbar: [{
-                type: ViewChild,
-                args: ['editorToolbar']
-            }], customButtonsTemplateRef: [{
-                type: ContentChild,
-                args: ["customButtons"]
-            }], viewMode: [{
-                type: Output
-            }], blurEvent: [{
-                type: Output,
-                args: ['blur']
-            }], focusEvent: [{
-                type: Output,
-                args: ['focus']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }] } });
-
-class AngularEditorModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorModule, declarations: [AngularEditorComponent, AeToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [AngularEditorComponent, AeToolbarComponent, AeButtonComponent, AeToolbarSetComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorModule, imports: [CommonModule, FormsModule, ReactiveFormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AngularEditorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule, FormsModule, ReactiveFormsModule
-                    ],
-                    declarations: [AngularEditorComponent, AeToolbarComponent, AeSelectComponent, AeButtonComponent, AeToolbarSetComponent],
-                    exports: [AngularEditorComponent, AeToolbarComponent, AeButtonComponent, AeToolbarSetComponent]
-                }]
-        }] });
-
-/*
- * Public API Surface of angular-editor
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var AeSelectComponent = class AeSelectComponent {
+	options = [];
+	isHidden = false;
+	selectedOption;
+	disabled = false;
+	optionId = 0;
+	get label() {
+		return this.selectedOption && Object.prototype.hasOwnProperty.call(this.selectedOption, "label") ? this.selectedOption.label : "Select";
+	}
+	opened = false;
+	get value() {
+		return this.selectedOption.value;
+	}
+	hidden = "inline-block";
+	changeEvent = new EventEmitter();
+	labelButton;
+	elRef = inject(ElementRef);
+	r = inject(Renderer2);
+	ngOnInit() {
+		this.selectedOption = this.options[0];
+		if (isDefined(this.isHidden) && this.isHidden) this.hide();
+	}
+	hide() {
+		this.hidden = "none";
+	}
+	optionSelect(option, event) {
+		if (event.buttons !== 1) return;
+		event.preventDefault();
+		event.stopPropagation();
+		this.setValue(option.value);
+		this.onChange(this.selectedOption.value);
+		this.changeEvent.emit(this.selectedOption.value);
+		this.onTouched();
+		this.opened = false;
+	}
+	toggleOpen(event) {
+		if (this.disabled) return;
+		this.opened = !this.opened;
+	}
+	onClick($event) {
+		if (!this.elRef.nativeElement.contains($event.target)) this.close();
+	}
+	close() {
+		this.opened = false;
+	}
+	get isOpen() {
+		return this.opened;
+	}
+	writeValue(value) {
+		if (!value || typeof value !== "string") return;
+		this.setValue(value);
+	}
+	setValue(value) {
+		let index = 0;
+		const selectedEl = this.options.find((el, i) => {
+			index = i;
+			return el.value === value;
+		});
+		if (selectedEl) {
+			this.selectedOption = selectedEl;
+			this.optionId = index;
+		}
+	}
+	onChange = () => {};
+	onTouched = () => {};
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.labelButton.nativeElement.disabled = isDisabled;
+		const div = this.labelButton.nativeElement;
+		const action = isDisabled ? "addClass" : "removeClass";
+		this.r[action](div, "disabled");
+		this.disabled = isDisabled;
+	}
+	handleKeyDown($event) {
+		if (!this.opened) return;
+		switch ($event.key) {
+			case "ArrowDown":
+				this._handleArrowDown($event);
+				break;
+			case "ArrowUp":
+				this._handleArrowUp($event);
+				break;
+			case "Space":
+				this._handleSpace($event);
+				break;
+			case "Enter":
+				this._handleEnter($event);
+				break;
+			case "Tab":
+				this._handleTab($event);
+				break;
+			case "Escape":
+				this.close();
+				$event.preventDefault();
+				break;
+			case "Backspace": this._handleBackspace();
+		}
+	}
+	_handleArrowDown($event) {
+		if (this.optionId < this.options.length - 1) this.optionId++;
+	}
+	_handleArrowUp($event) {
+		if (this.optionId >= 1) this.optionId--;
+	}
+	_handleSpace($event) {}
+	_handleEnter($event) {
+		this.optionSelect(this.options[this.optionId], $event);
+	}
+	_handleTab($event) {}
+	_handleBackspace() {}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AeSelectComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: AeSelectComponent,
+		isStandalone: false,
+		selector: "ae-select",
+		inputs: {
+			options: "options",
+			isHidden: ["hidden", "isHidden"]
+		},
+		outputs: { changeEvent: "change" },
+		host: {
+			listeners: {
+				"document:click": "onClick($event)",
+				"keydown": "handleKeyDown($event)"
+			},
+			properties: { "style.display": "this.hidden" }
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => AeSelectComponent),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "labelButton",
+			first: true,
+			predicate: ["labelButton"],
+			descendants: true,
+			static: true
+		}],
+		ngImport: i0,
+		template: "<span class=\"ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n  <button [tabIndex]=\"-1\" #labelButton tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n    <svg>\n      <use [attr.href]=\"'assets/ae-icons/icons.svg#sort'\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#sort'\"></use>\n    </svg>\n  </button>\n  <span class=\"ae-picker-options\">\n    @for (item of options; track item.value; let i = $index) {\n      <span tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n            [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n            (mousedown)=\"optionSelect(item, $event)\">\n            {{item.label}}\n      </span>\n    }\n    @if (!options.length) {\n      <span class=\"dropdown-item\">No items for select</span>\n    }\n  </span>\n</span>\n",
+		styles: ["a{cursor:pointer}svg{width:100%;height:100%}.ae-picker{color:var(--ae-picker-color, #444);display:inline-block;float:left;width:100%;position:relative;vertical-align:middle}.ae-picker-label{cursor:pointer;display:inline-block;padding-left:8px;padding-right:10px;position:relative;width:100%;line-height:1.8rem;vertical-align:middle;font-size:85%;text-align:left;background-color:var(--ae-picker-label-color, white);min-width:2rem;float:left;border:1px solid #ddd;border-radius:var(--ae-button-radius, 4px);text-overflow:clip;overflow:hidden;white-space:nowrap;height:2rem}.ae-picker-label:before{content:\"\";position:absolute;right:0;top:0;width:20px;height:100%;background:linear-gradient(to right,var(--ae-picker-label-color, white),var(--ae-picker-label-color, white) 100%)}.ae-picker-label:focus{outline:none}.ae-picker-label:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-picker-label svg{position:absolute;right:0;width:1rem}.ae-picker-label svg:not(:root){overflow:hidden}.ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-picker-options{background-color:var(--ae-picker-option-bg-color, #fff);display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-picker-options .ae-picker-item{cursor:pointer;display:block;padding:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;border:0 solid #ddd}.ae-picker-options .ae-picker-item.selected{color:#06c;background-color:var(--ae-picker-option-active-bg-color, #fff4c2)}.ae-picker-options .ae-picker-item.focused{background-color:var(--ae-picker-option-focused-bg-color, #fbf9b0)}.ae-picker-options .ae-picker-item:hover{background-color:var(--ae-picker-option-hover-bg-color, #fffa98)}.ae-expanded{display:block;margin-top:-1px;z-index:1}.ae-expanded .ae-picker-label{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg .ae-stroke{stroke:#ccc}.ae-expanded .ae-picker-options{display:flex;flex-direction:column;margin-top:-1px;top:100%;z-index:3;border-color:#ccc}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: i1$1.NgClass,
+			selector: "[ngClass]",
+			inputs: ["class", "ngClass"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AeSelectComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ae-select",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => AeSelectComponent),
+				multi: true
+			}],
+			standalone: false,
+			template: "<span class=\"ae-picker\" [ngClass]=\"{'ae-expanded':isOpen}\">\n  <button [tabIndex]=\"-1\" #labelButton tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-label\" (click)=\"toggleOpen($event);\">{{label}}\n    <svg>\n      <use [attr.href]=\"'assets/ae-icons/icons.svg#sort'\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#sort'\"></use>\n    </svg>\n  </button>\n  <span class=\"ae-picker-options\">\n    @for (item of options; track item.value; let i = $index) {\n      <span tabindex=\"-1\" type=\"button\" role=\"button\" class=\"ae-picker-item\"\n            [ngClass]=\"{'selected': item.value === value, 'focused': i === optionId}\"\n            (mousedown)=\"optionSelect(item, $event)\">\n            {{item.label}}\n      </span>\n    }\n    @if (!options.length) {\n      <span class=\"dropdown-item\">No items for select</span>\n    }\n  </span>\n</span>\n",
+			styles: ["a{cursor:pointer}svg{width:100%;height:100%}.ae-picker{color:var(--ae-picker-color, #444);display:inline-block;float:left;width:100%;position:relative;vertical-align:middle}.ae-picker-label{cursor:pointer;display:inline-block;padding-left:8px;padding-right:10px;position:relative;width:100%;line-height:1.8rem;vertical-align:middle;font-size:85%;text-align:left;background-color:var(--ae-picker-label-color, white);min-width:2rem;float:left;border:1px solid #ddd;border-radius:var(--ae-button-radius, 4px);text-overflow:clip;overflow:hidden;white-space:nowrap;height:2rem}.ae-picker-label:before{content:\"\";position:absolute;right:0;top:0;width:20px;height:100%;background:linear-gradient(to right,var(--ae-picker-label-color, white),var(--ae-picker-label-color, white) 100%)}.ae-picker-label:focus{outline:none}.ae-picker-label:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.ae-picker-label:hover:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-picker-label:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.ae-picker-label:disabled:before{background:linear-gradient(to right,#f5f5f5 100%,#fff)}.ae-picker-label svg{position:absolute;right:0;width:1rem}.ae-picker-label svg:not(:root){overflow:hidden}.ae-picker-label svg .ae-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ae-picker-options{background-color:var(--ae-picker-option-bg-color, #fff);display:none;min-width:100%;position:absolute;white-space:nowrap;z-index:3;border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ae-picker-options .ae-picker-item{cursor:pointer;display:block;padding:5px;z-index:3;text-align:left;background-color:transparent;min-width:2rem;border:0 solid #ddd}.ae-picker-options .ae-picker-item.selected{color:#06c;background-color:var(--ae-picker-option-active-bg-color, #fff4c2)}.ae-picker-options .ae-picker-item.focused{background-color:var(--ae-picker-option-focused-bg-color, #fbf9b0)}.ae-picker-options .ae-picker-item:hover{background-color:var(--ae-picker-option-hover-bg-color, #fffa98)}.ae-expanded{display:block;margin-top:-1px;z-index:1}.ae-expanded .ae-picker-label{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg{color:#ccc;z-index:2}.ae-expanded .ae-picker-label svg .ae-stroke{stroke:#ccc}.ae-expanded .ae-picker-options{display:flex;flex-direction:column;margin-top:-1px;top:100%;z-index:3;border-color:#ccc}\n"]
+		}]
+	}],
+	propDecorators: {
+		options: [{ type: Input }],
+		isHidden: [{
+			type: Input,
+			args: ["hidden"]
+		}],
+		hidden: [{
+			type: HostBinding,
+			args: ["style.display"]
+		}],
+		changeEvent: [{
+			type: Output,
+			args: ["change"]
+		}],
+		labelButton: [{
+			type: ViewChild,
+			args: ["labelButton", { static: true }]
+		}],
+		onClick: [{
+			type: HostListener,
+			args: ["document:click", ["$event"]]
+		}],
+		handleKeyDown: [{
+			type: HostListener,
+			args: ["keydown", ["$event"]]
+		}]
+	}
+});
+var AeButtonComponent = class AeButtonComponent {
+	iconName = "";
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AeButtonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: AeButtonComponent,
+		isStandalone: false,
+		selector: "ae-button, button[aeButton]",
+		inputs: { iconName: "iconName" },
+		host: {
+			properties: {
+				"attr.tabIndex": "-1",
+				"attr.type": "\"button\""
+			},
+			classAttribute: "angular-editor-button"
+		},
+		ngImport: i0,
+		template: "@if (iconName) {\n  <svg>\n    <use [attr.href]=\"'assets/ae-icons/icons.svg#' + iconName\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#' + iconName\"></use>\n  </svg>\n} @else {\n  <ng-content></ng-content>\n}\n",
+		styles: ["a{cursor:pointer}:host.angular-editor-button{background-color:var(--ae-button-bg-color, white);vertical-align:middle;border:var(--ae-button-border, 1px solid #ddd);border-radius:var(--ae-button-radius, 4px);padding:.4rem;float:left;width:2rem;height:2rem}:host.angular-editor-button svg{width:100%;height:100%}:host.angular-editor-button:hover{cursor:pointer;background-color:var(--ae-button-hover-bg-color, #f1f1f1);transition:.2s ease}:host.angular-editor-button:focus,:host.angular-editor-button.focus{outline:0}:host.angular-editor-button:disabled{background-color:var(--ae-button-disabled-bg-color, #f5f5f5);pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label.foreground :after{background:#555}:host.angular-editor-button:disabled>.color-label.background{background:#555}:host.angular-editor-button.active{background:var(--ae-button-active-bg-color, #fffbd3)}:host.angular-editor-button.active:hover{background-color:var(--ae-button-active-hover-bg-color, #fffaad)}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AeButtonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ae-button, button[aeButton]",
+			host: {
+				"class": "angular-editor-button",
+				"[attr.tabIndex]": "-1",
+				"[attr.type]": "\"button\""
+			},
+			standalone: false,
+			template: "@if (iconName) {\n  <svg>\n    <use [attr.href]=\"'assets/ae-icons/icons.svg#' + iconName\" [attr.xlink:href]=\"'assets/ae-icons/icons.svg#' + iconName\"></use>\n  </svg>\n} @else {\n  <ng-content></ng-content>\n}\n",
+			styles: ["a{cursor:pointer}:host.angular-editor-button{background-color:var(--ae-button-bg-color, white);vertical-align:middle;border:var(--ae-button-border, 1px solid #ddd);border-radius:var(--ae-button-radius, 4px);padding:.4rem;float:left;width:2rem;height:2rem}:host.angular-editor-button svg{width:100%;height:100%}:host.angular-editor-button:hover{cursor:pointer;background-color:var(--ae-button-hover-bg-color, #f1f1f1);transition:.2s ease}:host.angular-editor-button:focus,:host.angular-editor-button.focus{outline:0}:host.angular-editor-button:disabled{background-color:var(--ae-button-disabled-bg-color, #f5f5f5);pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label{pointer-events:none;cursor:not-allowed}:host.angular-editor-button:disabled>.color-label.foreground :after{background:#555}:host.angular-editor-button:disabled>.color-label.background{background:#555}:host.angular-editor-button.active{background:var(--ae-button-active-bg-color, #fffbd3)}:host.angular-editor-button.active:hover{background-color:var(--ae-button-active-hover-bg-color, #fffaad)}\n"]
+		}]
+	}],
+	propDecorators: { iconName: [{ type: Input }] }
+});
+var AeToolbarSetComponent = class AeToolbarSetComponent {
+	constructor() {}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AeToolbarSetComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: AeToolbarSetComponent,
+		isStandalone: false,
+		selector: "ae-toolbar-set, [aeToolbarSet]",
+		host: { classAttribute: "angular-editor-toolbar-set" },
+		ngImport: i0,
+		template: "<ng-content></ng-content>\n",
+		styles: ["a{cursor:pointer}:host.angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AeToolbarSetComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ae-toolbar-set, [aeToolbarSet]",
+			host: { "class": "angular-editor-toolbar-set" },
+			standalone: false,
+			template: "<ng-content></ng-content>\n",
+			styles: ["a{cursor:pointer}:host.angular-editor-toolbar-set{display:flex;gap:1px;width:fit-content;vertical-align:baseline}\n"]
+		}]
+	}],
+	ctorParameters: () => []
+});
+var AeToolbarComponent = class AeToolbarComponent {
+	htmlMode = false;
+	linkSelected = false;
+	block = "default";
+	fontName = "Times New Roman";
+	fontSize = "3";
+	foreColour = "";
+	backColor = "";
+	headings = [
+		{
+			label: "Heading 1",
+			value: "h1"
+		},
+		{
+			label: "Heading 2",
+			value: "h2"
+		},
+		{
+			label: "Heading 3",
+			value: "h3"
+		},
+		{
+			label: "Heading 4",
+			value: "h4"
+		},
+		{
+			label: "Heading 5",
+			value: "h5"
+		},
+		{
+			label: "Heading 6",
+			value: "h6"
+		},
+		{
+			label: "Paragraph",
+			value: "p"
+		},
+		{
+			label: "Predefined",
+			value: "pre"
+		},
+		{
+			label: "Standard",
+			value: "div"
+		},
+		{
+			label: "default",
+			value: "default"
+		}
+	];
+	fontSizes = [
+		{
+			label: "1",
+			value: "1"
+		},
+		{
+			label: "2",
+			value: "2"
+		},
+		{
+			label: "3",
+			value: "3"
+		},
+		{
+			label: "4",
+			value: "4"
+		},
+		{
+			label: "5",
+			value: "5"
+		},
+		{
+			label: "6",
+			value: "6"
+		},
+		{
+			label: "7",
+			value: "7"
+		}
+	];
+	customClassId = "-1";
+	_customClasses = [];
+	customClassList = [{
+		label: "",
+		value: ""
+	}];
+	tagMap = {
+		BLOCKQUOTE: "indent",
+		A: "link"
+	};
+	select = [
+		"H1",
+		"H2",
+		"H3",
+		"H4",
+		"H5",
+		"H6",
+		"P",
+		"PRE",
+		"DIV"
+	];
+	buttons = [
+		"bold",
+		"italic",
+		"underline",
+		"strikeThrough",
+		"subscript",
+		"superscript",
+		"justifyLeft",
+		"justifyCenter",
+		"justifyRight",
+		"justifyFull",
+		"indent",
+		"outdent",
+		"insertUnorderedList",
+		"insertOrderedList",
+		"link"
+	];
+	id = "";
+	uploadUrl = "";
+	upload;
+	showToolbar = false;
+	fonts = [{
+		label: "",
+		value: ""
+	}];
+	set customClasses(classes) {
+		if (classes) {
+			this._customClasses = classes;
+			this.customClassList = this._customClasses.map((x, i) => ({
+				label: x.name,
+				value: i.toString()
+			}));
+			this.customClassList.unshift({
+				label: "Clear Class",
+				value: "-1"
+			});
+		}
+	}
+	set defaultFontName(value) {
+		if (value) this.fontName = value;
+	}
+	set defaultFontSize(value) {
+		if (value) this.fontSize = value;
+	}
+	hiddenButtons = [];
+	execute = new EventEmitter();
+	myInputFile;
+	get isLinkButtonDisabled() {
+		return this.htmlMode || !this.editorService.selectedText;
+	}
+	r = inject(Renderer2);
+	editorService = inject(AngularEditorService);
+	er = inject(ElementRef);
+	doc = inject(DOCUMENT);
+	triggerCommand(command) {
+		this.execute.emit(command);
+	}
+	triggerButtons() {
+		if (!this.showToolbar) return;
+		this.buttons.forEach((e) => {
+			if (this.isButtonHidden(e)) return;
+			const result = this.doc.queryCommandState(e);
+			const elementById = this.doc.getElementById(e + "-" + this.id);
+			if (!elementById) return;
+			if (result) this.r.addClass(elementById, "active");
+			else this.r.removeClass(elementById, "active");
+		});
+	}
+	triggerBlocks(nodes) {
+		if (!this.showToolbar) return;
+		this.linkSelected = nodes.findIndex((x) => x.nodeName === "A") > -1;
+		let found = false;
+		this.select.forEach((y) => {
+			const node = nodes.find((x) => x.nodeName === y);
+			if (node !== void 0 && y === node.nodeName) {
+				if (found === false) {
+					this.block = node.nodeName.toLowerCase();
+					found = true;
+				}
+			} else if (found === false) this.block = "default";
+		});
+		found = false;
+		if (this._customClasses) this._customClasses.forEach((y, index) => {
+			if (nodes.find((x) => {
+				if (x instanceof Element) return x.className === y.class;
+				return false;
+			}) !== void 0) {
+				if (found === false) {
+					this.customClassId = index.toString();
+					found = true;
+				}
+			} else if (found === false) this.customClassId = "-1";
+		});
+		Object.keys(this.tagMap).map((e) => {
+			const elementById = this.doc.getElementById(this.tagMap[e] + "-" + this.id);
+			const node = nodes.find((x) => x.nodeName === e);
+			if (node !== void 0 && e === node.nodeName) this.r.addClass(elementById, "active");
+			else this.r.removeClass(elementById, "active");
+		});
+		this.foreColour = this.doc.queryCommandValue("ForeColor");
+		this.fontSize = this.doc.queryCommandValue("FontSize");
+		this.fontName = this.doc.queryCommandValue("FontName").replace(/"/g, "");
+		this.backColor = this.doc.queryCommandValue("backColor");
+	}
+	insertUrl() {
+		let url = "https://";
+		const selection = this.editorService.savedSelection;
+		if (selection && selection.commonAncestorContainer.parentElement?.nodeName === "A") {
+			const href = selection.commonAncestorContainer.parentElement.getAttribute("href");
+			if (href !== "" && href !== null) url = href;
+		}
+		const promptUrl = prompt("Insert URL link", url);
+		if (promptUrl && promptUrl !== "" && promptUrl !== "https://") this.editorService.createLink(promptUrl);
+	}
+	insertVideo() {
+		this.execute.emit("");
+		const url = prompt("Insert Video link", `https://`);
+		if (url && url !== "" && url !== `https://`) this.editorService.insertVideo(url);
+	}
+	insertColor(color, where) {
+		this.editorService.insertColor(color, where);
+		this.execute.emit("");
+	}
+	setFontName(foreColor) {
+		this.editorService.setFontName(foreColor);
+		this.execute.emit("");
+	}
+	setFontSize(fontSize) {
+		this.editorService.setFontSize(fontSize);
+		this.execute.emit("");
+	}
+	setEditorMode(m) {
+		const toggleEditorModeButton = this.doc.getElementById("toggleEditorMode-" + this.id);
+		if (m) this.r.addClass(toggleEditorModeButton, "active");
+		else this.r.removeClass(toggleEditorModeButton, "active");
+		this.htmlMode = m;
+	}
+	onFileChanged(event) {
+		const file = event.target.files[0];
+		if (file.type.includes("image/")) {
+			if (this.upload) this.upload(file).subscribe((response) => {
+				if (response instanceof HttpResponse) this.watchUploadImage(response, event);
+			});
+			else if (this.uploadUrl) this.editorService.uploadImage(file).subscribe((response) => {
+				if (response instanceof HttpResponse) this.watchUploadImage(response, event);
+			});
+			else {
+				const reader = new FileReader();
+				reader.onload = (e) => {
+					const fr = e.currentTarget;
+					if (fr.result !== null) this.editorService.insertImage(fr.result.toString());
+					event.target.value = null;
+				};
+				reader.readAsDataURL(file);
+			}
+		}
+	}
+	watchUploadImage(response, event) {
+		const body = response.body;
+		if (body) {
+			const { imageUrl } = body;
+			this.editorService.insertImage(imageUrl);
+		}
+		event.srcElement.value = null;
+	}
+	setCustomClass(classId) {
+		if (classId === "-1") this.execute.emit("clear");
+		else this.editorService.createCustomClass(this._customClasses[+classId]);
+	}
+	isButtonHidden(name) {
+		if (!name) return false;
+		if (!(this.hiddenButtons instanceof Array)) return false;
+		let result;
+		for (const arr of this.hiddenButtons) {
+			if (arr instanceof Array) result = arr.find((item) => item === name);
+			if (result) break;
+		}
+		return result !== void 0;
+	}
+	focus() {
+		this.execute.emit("focus");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AeToolbarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: AeToolbarComponent,
+		isStandalone: false,
+		selector: "angular-editor-toolbar, ae-toolbar, div[aeToolbar]",
+		inputs: {
+			id: "id",
+			uploadUrl: "uploadUrl",
+			upload: "upload",
+			showToolbar: "showToolbar",
+			fonts: "fonts",
+			customClasses: "customClasses",
+			defaultFontName: "defaultFontName",
+			defaultFontSize: "defaultFontSize",
+			hiddenButtons: "hiddenButtons"
+		},
+		outputs: { execute: "execute" },
+		viewQueries: [{
+			propertyName: "myInputFile",
+			first: true,
+			predicate: ["fileInput"],
+			descendants: true
+		}],
+		ngImport: i0,
+		template: "@if (showToolbar) {\n  <div class=\"angular-editor-toolbar\">\n    @if (!isButtonHidden('undo') || !isButtonHidden('redo')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('undo')) {\n          <button aeButton title=\"Undo\" iconName=\"undo\" (click)=\"triggerCommand('undo')\">\n          </button>\n        }\n        @if (!isButtonHidden('redo')) {\n          <button aeButton title=\"Redo\" iconName=\"redo\" (click)=\"triggerCommand('redo')\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('bold') || !isButtonHidden('italic') || !isButtonHidden('underline') || !isButtonHidden('strikeThrough') || !isButtonHidden('subscript') || !isButtonHidden('superscript')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('bold')) {\n          <button [id]=\"'bold-'+id\" aeButton title=\"Bold\" iconName=\"bold\" (click)=\"triggerCommand('bold')\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('italic')) {\n          <button [id]=\"'italic-'+id\" aeButton iconName=\"italic\" title=\"Italic\" (click)=\"triggerCommand('italic')\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('underline')) {\n          <button [id]=\"'underline-'+id\" aeButton title=\"Underline\" iconName=\"underline\"\n                  (click)=\"triggerCommand('underline')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('strikeThrough')) {\n          <button [id]=\"'strikeThrough-'+id\" aeButton iconName=\"strikeThrough\" title=\"Strikethrough\"\n                  (click)=\"triggerCommand('strikeThrough')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('subscript')) {\n          <button [id]=\"'subscript-'+id\" aeButton title=\"Subscript\" iconName=\"subscript\"\n                  (click)=\"triggerCommand('subscript')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('superscript')) {\n          <button [id]=\"'superscript-'+id\" aeButton iconName=\"superscript\" title=\"Superscript\"\n                  (click)=\"triggerCommand('superscript')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('justifyLeft') || !isButtonHidden('justifyCenter') || !isButtonHidden('justifyRight') || !isButtonHidden('justifyFull')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('justifyLeft')) {\n          <button [id]=\"'justifyLeft-'+id\" aeButton iconName=\"justifyLeft\" title=\"Justify Left\"\n                  (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('justifyCenter')) {\n          <button [id]=\"'justifyCenter-'+id\" aeButton iconName=\"justifyCenter\" title=\"Justify Center\"\n                  (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('justifyRight')) {\n          <button [id]=\"'justifyRight-'+id\" aeButton iconName=\"justifyRight\" title=\"Justify Right\"\n                  (click)=\"triggerCommand('justifyRight')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('justifyFull')) {\n          <button [id]=\"'justifyFull-'+id\" aeButton iconName=\"justifyFull\" title=\"Justify Full\"\n                  (click)=\"triggerCommand('justifyFull')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('indent') || !isButtonHidden('outdent')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('indent')) {\n          <button [id]=\"'indent-'+id\" aeButton iconName=\"indent\" title=\"Indent\"\n                  (click)=\"triggerCommand('indent')\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('outdent')) {\n          <button [id]=\"'outdent-'+id\" aeButton iconName=\"outdent\" title=\"Outdent\"\n                  (click)=\"triggerCommand('outdent')\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('insertUnorderedList') || !isButtonHidden('insertOrderedList')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('insertUnorderedList')) {\n          <button [id]=\"'insertUnorderedList-'+id\" aeButton iconName=\"unorderedList\" title=\"Unordered List\"\n                  (click)=\"triggerCommand('insertUnorderedList')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('insertOrderedList')) {\n          <button [id]=\"'insertOrderedList-'+id\" aeButton iconName=\"orderedList\" title=\"Ordered List\"\n                  (click)=\"triggerCommand('insertOrderedList')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('heading')) {\n      <div aeToolbarSet>\n        <ae-select class=\"select-heading\" [options]=\"headings\"\n                   [(ngModel)]=\"block\"\n                   (change)=\"triggerCommand(block)\"\n                   [disabled]=\"htmlMode\"\n                   tabindex=\"-1\"></ae-select>\n      </div>\n    }\n    @if (!isButtonHidden('fontName')) {\n      <div aeToolbarSet>\n        <ae-select class=\"select-font\" [options]=\"fonts\"\n                   [(ngModel)]=\"fontName\"\n                   (change)=\"setFontName(fontName)\"\n                   [disabled]=\"htmlMode\"\n                   tabindex=\"-1\"></ae-select>\n      </div>\n    }\n    @if (!isButtonHidden('fontSize')) {\n      <div aeToolbarSet>\n        <ae-select class=\"select-font-size\" [options]=\"fontSizes\"\n                   [(ngModel)]=\"fontSize\"\n                   (change)=\"setFontSize(fontSize)\"\n                   [disabled]=\"htmlMode\"\n                   tabindex=\"-1\">\n        </ae-select>\n      </div>\n    }\n    @if (!isButtonHidden('textColor') || !isButtonHidden('backgroundColor')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('textColor')) {\n          <input\n            style=\"display: none\"\n            type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\"\n            #fgInput>\n          <button [id]=\"'foregroundColorPicker-'+id\" aeButton iconName=\"textColor\"\n                  (click)=\"focus(); fgInput.click()\"\n                  title=\"Text Color\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('backgroundColor')) {\n          <input\n            style=\"display: none\"\n            type=\"color\" (change)=\"insertColor(bgInput.value, 'backgroundColor')\"\n            #bgInput>\n          <button [id]=\"'backgroundColorPicker-'+id\" aeButton iconName=\"backgroundColor\"\n                  (click)=\"focus(); bgInput.click()\"\n                  title=\"Background Color\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (_customClasses && !isButtonHidden('customClasses')) {\n      <div aeToolbarSet>\n        <ae-select class=\"select-custom-style\" [options]=\"customClassList\"\n                   [(ngModel)]=\"customClassId\"\n                   (change)=\"setCustomClass(customClassId)\"\n                   [disabled]=\"htmlMode\"\n                   tabindex=\"-1\"></ae-select>\n      </div>\n    }\n    @if (!isButtonHidden('link') || !isButtonHidden('unlink') || !isButtonHidden('insertImage') || !isButtonHidden('insertVideo') || !isButtonHidden('insertHorizontalRule')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('link')) {\n          <button [id]=\"'link-'+id\" aeButton iconName=\"link\" (click)=\"insertUrl()\"\n                  title=\"Insert Link\" [disabled]=\"isLinkButtonDisabled\">\n          </button>\n        }\n        @if (!isButtonHidden('unlink')) {\n          <button [id]=\"'unlink-'+id\" aeButton iconName=\"unlink\" (click)=\"triggerCommand('unlink')\"\n                  title=\"Unlink\" [disabled]=\"htmlMode || !linkSelected\">\n          </button>\n        }\n        @if (!isButtonHidden('insertImage')) {\n          <input\n            style=\"display: none\"\n            accept=\"image/*\"\n            type=\"file\" (change)=\"onFileChanged($event)\"\n            #fileInput>\n          <button [id]=\"'insertImage-'+id\" aeButton iconName=\"image\" (click)=\"focus(); fileInput.click()\"\n                  title=\"Insert Image\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('insertVideo')) {\n          <button [id]=\"'insertVideo-'+id\" aeButton iconName=\"video\"\n                  (click)=\"insertVideo()\" title=\"Insert Video\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('insertHorizontalRule')) {\n          <button [id]=\"'insertHorizontalRule-'+id\" aeButton iconName=\"horizontalLine\" title=\"Horizontal Line\"\n                  (click)=\"triggerCommand('insertHorizontalRule')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('removeFormat')) {\n      <div aeToolbarSet>\n        <button [id]=\"'clearFormatting-'+id\" aeButton iconName=\"removeFormat\" title=\"Clear Formatting\"\n                class=\"angular-editor-button\"\n                (click)=\"triggerCommand('removeFormat')\" [disabled]=\"htmlMode\">\n        </button>\n      </div>\n    }\n    @if (!isButtonHidden('toggleEditorMode')) {\n      <div aeToolbarSet>\n        <button [id]=\"'toggleEditorMode-'+id\" aeButton iconName=\"htmlCode\" title=\"HTML Code\"\n                (click)=\"triggerCommand('toggleEditorMode')\">\n        </button>\n      </div>\n    }\n    <ng-content></ng-content>\n  </div>\n}\n",
+		styles: ["a{cursor:pointer}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:var(--ae-toolbar-bg-color, #f5f5f5);font-size:.8rem;padding:var(--ae-toolbar-padding, .2rem);border:var(--ae-toolbar-border-radius, 1px solid #ddd);display:flex;flex-wrap:wrap;gap:4px}.select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-heading option{border:1px solid;background-color:#fff}}.select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font option{border:1px solid;background-color:#fff}}.select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font-size option{border:1px solid;background-color:#fff}.select-font-size .size1{font-size:10px}.select-font-size .size2{font-size:12px}.select-font-size .size3{font-size:14px}.select-font-size .size4{font-size:16px}.select-font-size .size5{font-size:18px}.select-font-size .size6{font-size:20px}.select-font-size .size7{font-size:22px}}.select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-custom-style option{border:1px solid;background-color:#fff}}.select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.color-label{position:relative;cursor:pointer}.background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}.default{font-size:16px}h1{font-size:24px}h2{font-size:20px}h3{font-size:16px}h4{font-size:15px}h5{font-size:14px}h6{font-size:13px}div,pre{font-size:12px}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: i1.NgControlStatus,
+				selector: "[formControlName],[ngModel],[formControl]"
+			},
+			{
+				kind: "directive",
+				type: i1.NgModel,
+				selector: "[ngModel]:not([formControlName]):not([formControl])",
+				inputs: [
+					"name",
+					"disabled",
+					"ngModel",
+					"ngModelOptions"
+				],
+				outputs: ["ngModelChange"],
+				exportAs: ["ngModel"]
+			},
+			{
+				kind: "component",
+				type: AeSelectComponent,
+				selector: "ae-select",
+				inputs: ["options", "hidden"],
+				outputs: ["change"]
+			},
+			{
+				kind: "component",
+				type: AeButtonComponent,
+				selector: "ae-button, button[aeButton]",
+				inputs: ["iconName"]
+			},
+			{
+				kind: "component",
+				type: AeToolbarSetComponent,
+				selector: "ae-toolbar-set, [aeToolbarSet]"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AeToolbarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "angular-editor-toolbar, ae-toolbar, div[aeToolbar]",
+			standalone: false,
+			template: "@if (showToolbar) {\n  <div class=\"angular-editor-toolbar\">\n    @if (!isButtonHidden('undo') || !isButtonHidden('redo')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('undo')) {\n          <button aeButton title=\"Undo\" iconName=\"undo\" (click)=\"triggerCommand('undo')\">\n          </button>\n        }\n        @if (!isButtonHidden('redo')) {\n          <button aeButton title=\"Redo\" iconName=\"redo\" (click)=\"triggerCommand('redo')\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('bold') || !isButtonHidden('italic') || !isButtonHidden('underline') || !isButtonHidden('strikeThrough') || !isButtonHidden('subscript') || !isButtonHidden('superscript')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('bold')) {\n          <button [id]=\"'bold-'+id\" aeButton title=\"Bold\" iconName=\"bold\" (click)=\"triggerCommand('bold')\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('italic')) {\n          <button [id]=\"'italic-'+id\" aeButton iconName=\"italic\" title=\"Italic\" (click)=\"triggerCommand('italic')\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('underline')) {\n          <button [id]=\"'underline-'+id\" aeButton title=\"Underline\" iconName=\"underline\"\n                  (click)=\"triggerCommand('underline')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('strikeThrough')) {\n          <button [id]=\"'strikeThrough-'+id\" aeButton iconName=\"strikeThrough\" title=\"Strikethrough\"\n                  (click)=\"triggerCommand('strikeThrough')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('subscript')) {\n          <button [id]=\"'subscript-'+id\" aeButton title=\"Subscript\" iconName=\"subscript\"\n                  (click)=\"triggerCommand('subscript')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('superscript')) {\n          <button [id]=\"'superscript-'+id\" aeButton iconName=\"superscript\" title=\"Superscript\"\n                  (click)=\"triggerCommand('superscript')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('justifyLeft') || !isButtonHidden('justifyCenter') || !isButtonHidden('justifyRight') || !isButtonHidden('justifyFull')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('justifyLeft')) {\n          <button [id]=\"'justifyLeft-'+id\" aeButton iconName=\"justifyLeft\" title=\"Justify Left\"\n                  (click)=\"triggerCommand('justifyLeft')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('justifyCenter')) {\n          <button [id]=\"'justifyCenter-'+id\" aeButton iconName=\"justifyCenter\" title=\"Justify Center\"\n                  (click)=\"triggerCommand('justifyCenter')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('justifyRight')) {\n          <button [id]=\"'justifyRight-'+id\" aeButton iconName=\"justifyRight\" title=\"Justify Right\"\n                  (click)=\"triggerCommand('justifyRight')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('justifyFull')) {\n          <button [id]=\"'justifyFull-'+id\" aeButton iconName=\"justifyFull\" title=\"Justify Full\"\n                  (click)=\"triggerCommand('justifyFull')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('indent') || !isButtonHidden('outdent')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('indent')) {\n          <button [id]=\"'indent-'+id\" aeButton iconName=\"indent\" title=\"Indent\"\n                  (click)=\"triggerCommand('indent')\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('outdent')) {\n          <button [id]=\"'outdent-'+id\" aeButton iconName=\"outdent\" title=\"Outdent\"\n                  (click)=\"triggerCommand('outdent')\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('insertUnorderedList') || !isButtonHidden('insertOrderedList')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('insertUnorderedList')) {\n          <button [id]=\"'insertUnorderedList-'+id\" aeButton iconName=\"unorderedList\" title=\"Unordered List\"\n                  (click)=\"triggerCommand('insertUnorderedList')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('insertOrderedList')) {\n          <button [id]=\"'insertOrderedList-'+id\" aeButton iconName=\"orderedList\" title=\"Ordered List\"\n                  (click)=\"triggerCommand('insertOrderedList')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('heading')) {\n      <div aeToolbarSet>\n        <ae-select class=\"select-heading\" [options]=\"headings\"\n                   [(ngModel)]=\"block\"\n                   (change)=\"triggerCommand(block)\"\n                   [disabled]=\"htmlMode\"\n                   tabindex=\"-1\"></ae-select>\n      </div>\n    }\n    @if (!isButtonHidden('fontName')) {\n      <div aeToolbarSet>\n        <ae-select class=\"select-font\" [options]=\"fonts\"\n                   [(ngModel)]=\"fontName\"\n                   (change)=\"setFontName(fontName)\"\n                   [disabled]=\"htmlMode\"\n                   tabindex=\"-1\"></ae-select>\n      </div>\n    }\n    @if (!isButtonHidden('fontSize')) {\n      <div aeToolbarSet>\n        <ae-select class=\"select-font-size\" [options]=\"fontSizes\"\n                   [(ngModel)]=\"fontSize\"\n                   (change)=\"setFontSize(fontSize)\"\n                   [disabled]=\"htmlMode\"\n                   tabindex=\"-1\">\n        </ae-select>\n      </div>\n    }\n    @if (!isButtonHidden('textColor') || !isButtonHidden('backgroundColor')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('textColor')) {\n          <input\n            style=\"display: none\"\n            type=\"color\" (change)=\"insertColor(fgInput.value, 'textColor')\"\n            #fgInput>\n          <button [id]=\"'foregroundColorPicker-'+id\" aeButton iconName=\"textColor\"\n                  (click)=\"focus(); fgInput.click()\"\n                  title=\"Text Color\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('backgroundColor')) {\n          <input\n            style=\"display: none\"\n            type=\"color\" (change)=\"insertColor(bgInput.value, 'backgroundColor')\"\n            #bgInput>\n          <button [id]=\"'backgroundColorPicker-'+id\" aeButton iconName=\"backgroundColor\"\n                  (click)=\"focus(); bgInput.click()\"\n                  title=\"Background Color\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (_customClasses && !isButtonHidden('customClasses')) {\n      <div aeToolbarSet>\n        <ae-select class=\"select-custom-style\" [options]=\"customClassList\"\n                   [(ngModel)]=\"customClassId\"\n                   (change)=\"setCustomClass(customClassId)\"\n                   [disabled]=\"htmlMode\"\n                   tabindex=\"-1\"></ae-select>\n      </div>\n    }\n    @if (!isButtonHidden('link') || !isButtonHidden('unlink') || !isButtonHidden('insertImage') || !isButtonHidden('insertVideo') || !isButtonHidden('insertHorizontalRule')) {\n      <div aeToolbarSet>\n        @if (!isButtonHidden('link')) {\n          <button [id]=\"'link-'+id\" aeButton iconName=\"link\" (click)=\"insertUrl()\"\n                  title=\"Insert Link\" [disabled]=\"isLinkButtonDisabled\">\n          </button>\n        }\n        @if (!isButtonHidden('unlink')) {\n          <button [id]=\"'unlink-'+id\" aeButton iconName=\"unlink\" (click)=\"triggerCommand('unlink')\"\n                  title=\"Unlink\" [disabled]=\"htmlMode || !linkSelected\">\n          </button>\n        }\n        @if (!isButtonHidden('insertImage')) {\n          <input\n            style=\"display: none\"\n            accept=\"image/*\"\n            type=\"file\" (change)=\"onFileChanged($event)\"\n            #fileInput>\n          <button [id]=\"'insertImage-'+id\" aeButton iconName=\"image\" (click)=\"focus(); fileInput.click()\"\n                  title=\"Insert Image\"\n                  [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('insertVideo')) {\n          <button [id]=\"'insertVideo-'+id\" aeButton iconName=\"video\"\n                  (click)=\"insertVideo()\" title=\"Insert Video\" [disabled]=\"htmlMode\">\n          </button>\n        }\n        @if (!isButtonHidden('insertHorizontalRule')) {\n          <button [id]=\"'insertHorizontalRule-'+id\" aeButton iconName=\"horizontalLine\" title=\"Horizontal Line\"\n                  (click)=\"triggerCommand('insertHorizontalRule')\" [disabled]=\"htmlMode\">\n          </button>\n        }\n      </div>\n    }\n    @if (!isButtonHidden('removeFormat')) {\n      <div aeToolbarSet>\n        <button [id]=\"'clearFormatting-'+id\" aeButton iconName=\"removeFormat\" title=\"Clear Formatting\"\n                class=\"angular-editor-button\"\n                (click)=\"triggerCommand('removeFormat')\" [disabled]=\"htmlMode\">\n        </button>\n      </div>\n    }\n    @if (!isButtonHidden('toggleEditorMode')) {\n      <div aeToolbarSet>\n        <button [id]=\"'toggleEditorMode-'+id\" aeButton iconName=\"htmlCode\" title=\"HTML Code\"\n                (click)=\"triggerCommand('toggleEditorMode')\">\n        </button>\n      </div>\n    }\n    <ng-content></ng-content>\n  </div>\n}\n",
+			styles: ["a{cursor:pointer}.angular-editor-toolbar{font:100 14px/15px Roboto,Arial,sans-serif;background-color:var(--ae-toolbar-bg-color, #f5f5f5);font-size:.8rem;padding:var(--ae-toolbar-padding, .2rem);border:var(--ae-toolbar-border-radius, 1px solid #ddd);display:flex;flex-wrap:wrap;gap:4px}.select-heading{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-heading optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-heading option{border:1px solid;background-color:#fff}}.select-heading:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-heading:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-font optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font option{border:1px solid;background-color:#fff}}.select-font:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-font-size{display:inline-block;width:50px}@supports not (-moz-appearance: none){.select-font-size optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-font-size option{border:1px solid;background-color:#fff}.select-font-size .size1{font-size:10px}.select-font-size .size2{font-size:12px}.select-font-size .size3{font-size:14px}.select-font-size .size4{font-size:16px}.select-font-size .size5{font-size:18px}.select-font-size .size6{font-size:20px}.select-font-size .size7{font-size:22px}}.select-font-size:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-font-size:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.select-custom-style{display:inline-block;width:90px}@supports not (-moz-appearance: none){.select-custom-style optgroup{font-size:12px;background-color:#f4f4f4;padding:5px}.select-custom-style option{border:1px solid;background-color:#fff}}.select-custom-style:disabled{background-color:#f5f5f5;pointer-events:none;cursor:not-allowed}.select-custom-style:hover{cursor:pointer;background-color:#f1f1f1;transition:.2s ease}.color-label{position:relative;cursor:pointer}.background{font-size:smaller;background:#1b1b1b;color:#fff;padding:3px}.foreground :after{position:absolute;content:\"\";inset:auto auto -3px -1px;width:15px;height:2px;z-index:0;background:#1b1b1b}.default{font-size:16px}h1{font-size:24px}h2{font-size:20px}h3{font-size:16px}h4{font-size:15px}h5{font-size:14px}h6{font-size:13px}div,pre{font-size:12px}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{ type: Input }],
+		uploadUrl: [{ type: Input }],
+		upload: [{ type: Input }],
+		showToolbar: [{ type: Input }],
+		fonts: [{ type: Input }],
+		customClasses: [{ type: Input }],
+		defaultFontName: [{ type: Input }],
+		defaultFontSize: [{ type: Input }],
+		hiddenButtons: [{ type: Input }],
+		execute: [{ type: Output }],
+		myInputFile: [{
+			type: ViewChild,
+			args: ["fileInput", { static: false }]
+		}]
+	}
+});
+var AngularEditorComponent = class AngularEditorComponent {
+	autoFocus;
+	onChange;
+	onTouched;
+	modeVisual = true;
+	showPlaceholder = false;
+	disabled = false;
+	focused = false;
+	touched = false;
+	changed = false;
+	focusInstance;
+	blurInstance;
+	id = "";
+	config = angularEditorConfig;
+	placeholder = "";
+	tabIndex = null;
+	html = new EventEmitter();
+	textArea;
+	editorWrapper;
+	editorToolbar;
+	customButtonsTemplateRef;
+	executeCommandFn = this.executeCommand.bind(this);
+	viewMode = new EventEmitter();
+	blurEvent = new EventEmitter();
+	focusEvent = new EventEmitter();
+	tabindex = -1;
+	onFocus() {
+		this.focus();
+	}
+	r = inject(Renderer2);
+	editorService = inject(AngularEditorService);
+	doc = inject(DOCUMENT);
+	sanitizer = inject(DomSanitizer);
+	cdRef = inject(ChangeDetectorRef);
+	constructor(defaultTabIndex, autoFocus) {
+		this.autoFocus = autoFocus;
+		const parsedTabIndex = Number(defaultTabIndex);
+		this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
+	}
+	ngOnInit() {
+		this.config.toolbarPosition = this.config.toolbarPosition ? this.config.toolbarPosition : angularEditorConfig.toolbarPosition;
+	}
+	ngAfterViewInit() {
+		if (isDefined(this.autoFocus)) this.focus();
+	}
+	onPaste(event) {
+		if (this.config.rawPaste) {
+			event.preventDefault();
+			const text = event.clipboardData?.getData("text/plain") ?? "";
+			document.execCommand("insertHTML", false, text);
+			return text;
+		}
+	}
+	executeCommand(command, value) {
+		this.focus();
+		if (command === "focus") return;
+		if (command === "toggleEditorMode") this.toggleEditorMode(this.modeVisual);
+		else if (command !== "") {
+			if (command === "clear") {
+				this.editorService.removeSelectedElements(this.getCustomTags());
+				this.onContentChange(this.textArea.nativeElement);
+			} else if (command === "default") {
+				this.editorService.removeSelectedElements("h1,h2,h3,h4,h5,h6,p,pre");
+				this.onContentChange(this.textArea.nativeElement);
+			} else this.editorService.executeCommand(command, value);
+			this.exec();
+		}
+	}
+	onTextAreaFocus(event) {
+		if (this.focused) {
+			event.stopPropagation();
+			return;
+		}
+		this.focused = true;
+		this.focusEvent.emit(event);
+		if (!this.touched || !this.changed) this.editorService.executeInNextQueueIteration(() => {
+			this.configure();
+			this.touched = true;
+		});
+	}
+	onTextAreaMouseOut(event) {
+		this.editorService.saveSelection();
+	}
+	onTextAreaBlur(event) {
+		this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
+		if (typeof this.onTouched === "function") this.onTouched();
+		if (event.relatedTarget !== null) {
+			const parent = event.relatedTarget.parentElement;
+			if (!parent?.classList.contains("angular-editor-toolbar-set") && !parent?.classList.contains("ae-picker")) {
+				this.blurEvent.emit(event);
+				this.focused = false;
+			}
+		}
+	}
+	focus() {
+		if (this.modeVisual) this.textArea.nativeElement.focus();
+		else {
+			this.doc.getElementById("sourceText" + this.id).focus();
+			this.focused = true;
+		}
+	}
+	onContentChange(element) {
+		let html = this.modeVisual ? element.innerHTML : element.innerText;
+		if (!html || html === "<br>") html = "";
+		if (typeof this.onChange === "function") {
+			const sanitized = this.config.sanitize || this.config.sanitize === void 0 ? this.sanitizer.sanitize(SecurityContext.HTML, html) ?? "" : html;
+			this.onChange(sanitized);
+			if (!html !== this.showPlaceholder) this.togglePlaceholder(this.showPlaceholder);
+		}
+		this.changed = true;
+	}
+	registerOnChange(fn) {
+		this.onChange = (e) => e === "<br>" ? fn("") : fn(e);
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	writeValue(value) {
+		if ((!value || value === "<br>" || value === "") !== this.showPlaceholder) this.togglePlaceholder(this.showPlaceholder);
+		if (value === void 0 || value === "" || value === "<br>") value = null;
+		this.refreshView(value);
+	}
+	refreshView(value) {
+		const normalizedValue = value === null ? "" : value;
+		const sanitizedValue = this.config.sanitize !== false ? this.sanitizer.sanitize(SecurityContext.HTML, normalizedValue) : normalizedValue;
+		this.r.setProperty(this.textArea.nativeElement, "innerHTML", sanitizedValue);
+	}
+	togglePlaceholder(value) {
+		if (!value) {
+			this.r.addClass(this.editorWrapper.nativeElement, "show-placeholder");
+			this.showPlaceholder = true;
+		} else {
+			this.r.removeClass(this.editorWrapper.nativeElement, "show-placeholder");
+			this.showPlaceholder = false;
+		}
+	}
+	setDisabledState(isDisabled) {
+		const div = this.textArea.nativeElement;
+		const action = isDisabled ? "addClass" : "removeClass";
+		this.r[action](div, "disabled");
+		this.disabled = isDisabled;
+	}
+	toggleEditorMode(bToSource) {
+		let oContent;
+		const editableElement = this.textArea.nativeElement;
+		if (bToSource) {
+			oContent = this.r.createText(editableElement.innerHTML);
+			this.r.setProperty(editableElement, "innerHTML", "");
+			this.r.setProperty(editableElement, "contentEditable", false);
+			const oPre = this.r.createElement("pre");
+			this.r.setStyle(oPre, "margin", "0");
+			this.r.setStyle(oPre, "outline", "none");
+			const oCode = this.r.createElement("code");
+			this.r.setProperty(oCode, "id", "sourceText" + this.id);
+			this.r.setStyle(oCode, "display", "block");
+			this.r.setStyle(oCode, "white-space", "pre-wrap");
+			this.r.setStyle(oCode, "word-break", "keep-all");
+			this.r.setStyle(oCode, "outline", "none");
+			this.r.setStyle(oCode, "margin", "0");
+			this.r.setStyle(oCode, "background-color", "#fff5b9");
+			this.r.setProperty(oCode, "contentEditable", true);
+			this.r.appendChild(oCode, oContent);
+			this.focusInstance = this.r.listen(oCode, "focus", (event) => this.onTextAreaFocus(event));
+			this.blurInstance = this.r.listen(oCode, "blur", (event) => this.onTextAreaBlur(event));
+			this.r.appendChild(oPre, oCode);
+			this.r.appendChild(editableElement, oPre);
+			this.doc.execCommand("defaultParagraphSeparator", false, "div");
+			this.modeVisual = false;
+			this.viewMode.emit(false);
+			oCode.focus();
+		} else {
+			if (this.doc.querySelectorAll) {
+				if (this.config.sanitize !== false) editableElement.innerText = this.sanitizer.sanitize(SecurityContext.HTML, editableElement.innerText);
+				this.r.setProperty(editableElement, "innerHTML", editableElement.innerText);
+			} else {
+				oContent = this.doc.createRange();
+				oContent.selectNodeContents(editableElement.firstChild);
+				let oContentString = oContent.toString();
+				if (this.config.sanitize !== false) oContentString = this.sanitizer.sanitize(SecurityContext.HTML, oContentString);
+				this.r.setProperty(editableElement, "innerHTML", oContentString);
+			}
+			this.r.setProperty(editableElement, "contentEditable", true);
+			this.modeVisual = true;
+			this.viewMode.emit(true);
+			this.onContentChange(editableElement);
+			editableElement.focus();
+		}
+		this.editorToolbar.setEditorMode(!this.modeVisual);
+	}
+	exec() {
+		this.editorToolbar.triggerButtons();
+		let userSelection;
+		if (this.doc.getSelection) {
+			userSelection = this.doc.getSelection();
+			this.editorService.executeInNextQueueIteration(this.editorService.saveSelection);
+		}
+		let a = userSelection.focusNode;
+		const els = [];
+		while (a && a.id !== "editor") {
+			els.unshift(a);
+			a = a.parentNode;
+		}
+		this.editorToolbar.triggerBlocks(els);
+	}
+	configure() {
+		this.editorService.uploadUrl = this.config.uploadUrl ?? "";
+		this.editorService.uploadWithCredentials = this.config.uploadWithCredentials ?? false;
+		if (this.config.defaultParagraphSeparator) this.editorService.setDefaultParagraphSeparator(this.config.defaultParagraphSeparator);
+		if (this.config.defaultFontName) this.editorService.setFontName(this.config.defaultFontName);
+		if (this.config.defaultFontSize) this.editorService.setFontSize(this.config.defaultFontSize);
+	}
+	getFonts() {
+		return (this.config.fonts ? this.config.fonts : angularEditorConfig.fonts ?? []).map((x) => {
+			return {
+				label: x.name,
+				value: x.name
+			};
+		});
+	}
+	getCustomTags() {
+		const tags = ["span"];
+		(this.config.customClasses ?? []).forEach((x) => {
+			if (x.tag !== void 0) {
+				if (!tags.includes(x.tag)) tags.push(x.tag);
+			}
+		});
+		return tags.join(",");
+	}
+	ngOnDestroy() {
+		if (this.blurInstance) this.blurInstance();
+		if (this.focusInstance) this.focusInstance();
+	}
+	filterStyles(html) {
+		html = html.replace("position: fixed;", "");
+		return html;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AngularEditorComponent,
+		deps: [{
+			token: "tabindex",
+			attribute: true
+		}, {
+			token: "autofocus",
+			attribute: true
+		}],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: AngularEditorComponent,
+		isStandalone: false,
+		selector: "angular-editor",
+		inputs: {
+			id: "id",
+			config: "config",
+			placeholder: "placeholder",
+			tabIndex: "tabIndex"
+		},
+		outputs: {
+			html: "html",
+			viewMode: "viewMode",
+			blurEvent: "blur",
+			focusEvent: "focus"
+		},
+		host: {
+			listeners: { "focus": "onFocus()" },
+			properties: { "attr.tabindex": "this.tabindex" }
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => AngularEditorComponent),
+			multi: true
+		}, AngularEditorService],
+		queries: [{
+			propertyName: "customButtonsTemplateRef",
+			first: true,
+			predicate: ["customButtons"],
+			descendants: true
+		}],
+		viewQueries: [
+			{
+				propertyName: "textArea",
+				first: true,
+				predicate: ["editor"],
+				descendants: true,
+				static: true
+			},
+			{
+				propertyName: "editorWrapper",
+				first: true,
+				predicate: ["editorWrapper"],
+				descendants: true,
+				static: true
+			},
+			{
+				propertyName: "editorToolbar",
+				first: true,
+				predicate: ["editorToolbar"],
+				descendants: true
+			}
+		],
+		ngImport: i0,
+		template: "<div\n  class=\"angular-editor\"\n  #angularEditor\n  [style.width]=\"config.width\"\n  [style.minWidth]=\"config.minWidth\"\n  [ngClass]=\"{\n     'bottom': config.toolbarPosition === 'bottom'\n     }\"\n>\n  <angular-editor-toolbar\n    #editorToolbar\n    [id]=\"id\"\n    [uploadUrl]=\"config.uploadUrl || ''\"\n    [upload]=\"$any(config.upload)\"\n    [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n    [fonts]=\"getFonts()\"\n    [customClasses]=\"config.customClasses || []\"\n    [defaultFontName]=\"config.defaultFontName || ''\"\n    [defaultFontSize]=\"config.defaultFontSize || ''\"\n    [hiddenButtons]=\"config.toolbarHiddenButtons || []\"\n    (execute)=\"executeCommand($event)\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"customButtonsTemplateRef\"\n      [ngTemplateOutletContext]=\"{ executeCommandFn: this.executeCommandFn}\"\n    >\n    </ng-container>\n  </angular-editor-toolbar>\n\n  <div\n    class=\"angular-editor-wrapper\"\n    #editorWrapper\n  >\n    <div\n      #editor\n      class=\"angular-editor-textarea\"\n      [attr.contenteditable]=\"config.editable\"\n      [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n      [attr.translate]=\"config.translate\"\n      [attr.spellcheck]=\"config.spellcheck\"\n      [attr.dir]=\"config.textDirection\"\n      [style.height]=\"config.height\"\n      [style.minHeight]=\"config.minHeight\"\n      [style.maxHeight]=\"config.maxHeight\"\n      [style.outline]=\"config.outline === false ? 'none': undefined\"\n      (input)=\"onContentChange($any($event.target))\"\n      (focus)=\"onTextAreaFocus($event)\"\n      (blur)=\"onTextAreaBlur($event)\"\n      (click)=\"exec()\"\n      (keyup)=\"exec()\"\n      (mouseout)=\"onTextAreaMouseOut($event)\"\n      (paste)=\"onPaste($event)\"\n    >\n    </div>\n    <span class=\"angular-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n  </div>\n</div>\n",
+		styles: ["a{cursor:pointer}.angular-editor{display:flex;flex-direction:column;gap:var(--ae-gap, 5px)}.angular-editor.bottom{flex-direction:column-reverse}.angular-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);color:#868e96;opacity:1}.angular-editor .angular-editor-wrapper{position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:150px;overflow:auto;resize:vertical}.angular-editor .angular-editor-wrapper .angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:5rem;padding:.5rem .8rem 1rem;border-radius:var(--ae-text-area-border-radius, .3rem);border:var(--ae-text-area-border, 1px solid #ddd);background-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea:focus,.angular-editor .angular-editor-wrapper .angular-editor-textarea.focus{outline:var(--ae-focus-outline-color, -webkit-focus-ring-color auto 1px)}.angular-editor .angular-editor-wrapper .angular-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.angular-editor .angular-editor-wrapper ::ng-deep p{margin-bottom:0}.angular-editor .angular-editor-wrapper .angular-editor-placeholder{display:none;position:absolute;top:0;padding:.6rem .8rem 1rem .9rem;color:#6c757d;opacity:.75}.angular-editor .angular-editor-wrapper.show-placeholder .angular-editor-placeholder{display:block}.angular-editor .angular-editor-wrapper.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: i1$1.NgClass,
+				selector: "[ngClass]",
+				inputs: ["class", "ngClass"]
+			},
+			{
+				kind: "directive",
+				type: i1$1.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "component",
+				type: AeToolbarComponent,
+				selector: "angular-editor-toolbar, ae-toolbar, div[aeToolbar]",
+				inputs: [
+					"id",
+					"uploadUrl",
+					"upload",
+					"showToolbar",
+					"fonts",
+					"customClasses",
+					"defaultFontName",
+					"defaultFontSize",
+					"hiddenButtons"
+				],
+				outputs: ["execute"]
+			}
+		],
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AngularEditorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "angular-editor",
+			encapsulation: ViewEncapsulation.None,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => AngularEditorComponent),
+				multi: true
+			}, AngularEditorService],
+			standalone: false,
+			template: "<div\n  class=\"angular-editor\"\n  #angularEditor\n  [style.width]=\"config.width\"\n  [style.minWidth]=\"config.minWidth\"\n  [ngClass]=\"{\n     'bottom': config.toolbarPosition === 'bottom'\n     }\"\n>\n  <angular-editor-toolbar\n    #editorToolbar\n    [id]=\"id\"\n    [uploadUrl]=\"config.uploadUrl || ''\"\n    [upload]=\"$any(config.upload)\"\n    [showToolbar]=\"config.showToolbar !== undefined ? config.showToolbar : true\"\n    [fonts]=\"getFonts()\"\n    [customClasses]=\"config.customClasses || []\"\n    [defaultFontName]=\"config.defaultFontName || ''\"\n    [defaultFontSize]=\"config.defaultFontSize || ''\"\n    [hiddenButtons]=\"config.toolbarHiddenButtons || []\"\n    (execute)=\"executeCommand($event)\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"customButtonsTemplateRef\"\n      [ngTemplateOutletContext]=\"{ executeCommandFn: this.executeCommandFn}\"\n    >\n    </ng-container>\n  </angular-editor-toolbar>\n\n  <div\n    class=\"angular-editor-wrapper\"\n    #editorWrapper\n  >\n    <div\n      #editor\n      class=\"angular-editor-textarea\"\n      [attr.contenteditable]=\"config.editable\"\n      [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n      [attr.translate]=\"config.translate\"\n      [attr.spellcheck]=\"config.spellcheck\"\n      [attr.dir]=\"config.textDirection\"\n      [style.height]=\"config.height\"\n      [style.minHeight]=\"config.minHeight\"\n      [style.maxHeight]=\"config.maxHeight\"\n      [style.outline]=\"config.outline === false ? 'none': undefined\"\n      (input)=\"onContentChange($any($event.target))\"\n      (focus)=\"onTextAreaFocus($event)\"\n      (blur)=\"onTextAreaBlur($event)\"\n      (click)=\"exec()\"\n      (keyup)=\"exec()\"\n      (mouseout)=\"onTextAreaMouseOut($event)\"\n      (paste)=\"onPaste($event)\"\n    >\n    </div>\n    <span class=\"angular-editor-placeholder\">{{ placeholder || config['placeholder'] }}</span>\n  </div>\n</div>\n",
+			styles: ["a{cursor:pointer}.angular-editor{display:flex;flex-direction:column;gap:var(--ae-gap, 5px)}.angular-editor.bottom{flex-direction:column-reverse}.angular-editor ::ng-deep [contenteditable=true]:empty:before{content:attr(placeholder);color:#868e96;opacity:1}.angular-editor .angular-editor-wrapper{position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:150px;overflow:auto;resize:vertical}.angular-editor .angular-editor-wrapper .angular-editor-textarea:after{content:\"\";position:absolute;bottom:0;right:0;display:block;width:8px;height:8px;cursor:nwse-resize;background-color:#ffffff80}.angular-editor .angular-editor-wrapper .angular-editor-textarea{min-height:5rem;padding:.5rem .8rem 1rem;border-radius:var(--ae-text-area-border-radius, .3rem);border:var(--ae-text-area-border, 1px solid #ddd);background-color:transparent;overflow-x:hidden;overflow-y:auto;position:relative}.angular-editor .angular-editor-wrapper .angular-editor-textarea:focus,.angular-editor .angular-editor-wrapper .angular-editor-textarea.focus{outline:var(--ae-focus-outline-color, -webkit-focus-ring-color auto 1px)}.angular-editor .angular-editor-wrapper .angular-editor-textarea ::ng-deep blockquote{margin-left:1rem;border-left:.2em solid #dfe2e5;padding-left:.5rem}.angular-editor .angular-editor-wrapper ::ng-deep p{margin-bottom:0}.angular-editor .angular-editor-wrapper .angular-editor-placeholder{display:none;position:absolute;top:0;padding:.6rem .8rem 1rem .9rem;color:#6c757d;opacity:.75}.angular-editor .angular-editor-wrapper.show-placeholder .angular-editor-placeholder{display:block}.angular-editor .angular-editor-wrapper.disabled{cursor:not-allowed;opacity:.5;pointer-events:none}\n"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: void 0,
+		decorators: [{
+			type: Attribute,
+			args: ["tabindex"]
+		}]
+	}, {
+		type: void 0,
+		decorators: [{
+			type: Attribute,
+			args: ["autofocus"]
+		}]
+	}],
+	propDecorators: {
+		id: [{ type: Input }],
+		config: [{ type: Input }],
+		placeholder: [{ type: Input }],
+		tabIndex: [{ type: Input }],
+		html: [{ type: Output }],
+		textArea: [{
+			type: ViewChild,
+			args: ["editor", { static: true }]
+		}],
+		editorWrapper: [{
+			type: ViewChild,
+			args: ["editorWrapper", { static: true }]
+		}],
+		editorToolbar: [{
+			type: ViewChild,
+			args: ["editorToolbar"]
+		}],
+		customButtonsTemplateRef: [{
+			type: ContentChild,
+			args: ["customButtons"]
+		}],
+		viewMode: [{ type: Output }],
+		blurEvent: [{
+			type: Output,
+			args: ["blur"]
+		}],
+		focusEvent: [{
+			type: Output,
+			args: ["focus"]
+		}],
+		tabindex: [{
+			type: HostBinding,
+			args: ["attr.tabindex"]
+		}],
+		onFocus: [{
+			type: HostListener,
+			args: ["focus"]
+		}]
+	}
+});
+var AngularEditorModule = class AngularEditorModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AngularEditorModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AngularEditorModule,
+		declarations: [
+			AngularEditorComponent,
+			AeToolbarComponent,
+			AeSelectComponent,
+			AeButtonComponent,
+			AeToolbarSetComponent
+		],
+		imports: [
+			CommonModule,
+			FormsModule,
+			ReactiveFormsModule
+		],
+		exports: [
+			AngularEditorComponent,
+			AeToolbarComponent,
+			AeButtonComponent,
+			AeToolbarSetComponent
+		]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: AngularEditorModule,
+		imports: [
+			CommonModule,
+			FormsModule,
+			ReactiveFormsModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: AngularEditorModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				FormsModule,
+				ReactiveFormsModule
+			],
+			declarations: [
+				AngularEditorComponent,
+				AeToolbarComponent,
+				AeSelectComponent,
+				AeButtonComponent,
+				AeToolbarSetComponent
+			],
+			exports: [
+				AngularEditorComponent,
+				AeToolbarComponent,
+				AeButtonComponent,
+				AeToolbarSetComponent
+			]
+		}]
+	}]
+});
 export { AeButtonComponent, AeSelectComponent, AeToolbarComponent, AeToolbarSetComponent, AngularEditorComponent, AngularEditorModule, AngularEditorService };
-//# sourceMappingURL=kolkov-angular-editor.mjs.map
+
+//# sourceMappingURL=kolkov-angular-editor.mjs.map